/* Rozmowa's threads (ADR 0145): the button by a selection, a message's action, the marked
   fragment with its marker, "W wątku: …", the list's opener and the panel beside the
   conversation (the whole screen under 1050 px). */

/* "Wątek" by the selection. */
.thread-float { position: fixed; z-index: 40; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 13px/1 var(--sans); box-shadow: 0 6px 18px #292b2729; animation: q-pop 140ms var(--ease) both; }
.thread-float[hidden] { display: none; }
.thread-float .icon { width: 15px; height: 15px; }
.thread-float:hover { background: var(--sage); }

/* A message's own action: quiet until the message is pointed at or the keyboard reaches it. */
.thread-action { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 5px; font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .15s, background .2s, color .2s; }
.thread-action .icon { width: 13px; height: 13px; }
.thread-action:hover { background: var(--sage); color: var(--ink); }
.message-row:hover .thread-action, .message-row:focus-within .thread-action, .thread-action:focus-visible { opacity: 1; }
@media (hover: none) { .thread-action { opacity: 1; } }
/* Under the person's own message the hour stands at the bubble's edge, over the action's
   room, and gives way when the message is pointed at: it moves left, then the action shows
   (out: the action goes, then the hour moves back), never one over the other. The two stand in
   one box (thread-marks.js), so the whole of it less the hour's own width is the action's room
   in any language, with nothing measured, and the bubble never changes size (task #176). */
.thread-slide { display: flex; align-items: center; gap: inherit; }
.thread-slide time { position: relative; left: 100%; translate: -100% 0; transition: left .14s var(--ease) .1s, translate .14s var(--ease) .1s; }
.thread-slide .thread-action { transition: opacity .1s, background .2s, color .2s; }
.message-row:hover .thread-slide time, .message-row:focus-within .thread-slide time { left: 0; translate: 0 0; transition-delay: 0s; }
.message-row:hover .thread-slide .thread-action, .message-row:focus-within .thread-slide .thread-action { transition: opacity .12s .14s, background .2s, color .2s; }
/* (Nothing to point with: the action shows all the time, the hour beside it.) */
@media (hover: none) { .thread-slide time { left: 0; translate: 0 0; } }

/* The fragment a thread is about, in its message. */
mark.thread-mark { background: #e3e8d2; color: inherit; border-radius: 2px; box-shadow: 0 1px 0 #aab58a; cursor: pointer; transition: background .2s; }
mark.thread-mark:hover, mark.thread-mark.is-open { background: #d5ddbd; }
mark.thread-mark.is-hot { background: #c4d09f; }
mark.thread-mark--draft { background: #efe9c9; box-shadow: 0 1px 0 #c9bd7f; cursor: text; }
/* A thread put away (ADR 0153) leaves its fragment as plain text. While the panel shows that
   thread, and for the moment the way back to it is taken, it is lit: with no underline. */
mark.thread-mark--archived, mark.thread-mark--archived:hover { background: #efe9c9; box-shadow: none; cursor: text; }
mark.thread-mark--archived.is-hot { background: #c4d09f; }
.thread-marker { display: inline-flex; align-items: center; gap: 3px; height: 20px; margin: 0 1px 0 5px; padding: 0 7px; vertical-align: baseline; border-radius: 999px; background: var(--sage); color: #4b5838; font: 600 11.5px/1 var(--sans); white-space: nowrap; }
.thread-marker::after { content: attr(data-count); }
.thread-marker .icon { width: 12px; height: 12px; }
.thread-marker:hover { background: #cdd6bb; color: var(--ink); }
.thread-marker.is-new::before, .threads-open.is-new::before, .thread-result.is-new .thread-result-button::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--olive); }
.thread-marker.is-working .icon { animation: now-pulse 1.8s ease-in-out infinite; border-radius: 50%; }

/* "W wątku: …" where a thread's latest answer came. */
.thread-result { list-style: none; display: flex; margin: -10px 0 -10px -9px; }
.thread-result-button { display: inline-flex; align-items: center; gap: 7px; max-width: min(100%, 720px); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted); text-align: left; }
.thread-result-button .icon { width: 13px; height: 13px; flex-shrink: 0; }
.thread-result-button:hover { background: var(--sage); color: var(--ink); }
.thread-result-label { flex-shrink: 0; font-weight: 600; }
.thread-result-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The threads' pill: the opener of the conversation's threads and the panel's way back to its
   fragment are one look. */
.threads-open, .thread-to-fragment { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.threads-open .icon, .thread-to-fragment .icon { width: 13px; height: 13px; }
.threads-open:hover, .thread-to-fragment:hover { background: var(--sage); }
/* The opener: a strip of its own above the transcript, at the right. */
.threads-open { flex: none; align-self: flex-end; margin: 8px 6px 0 0; }
.threads-open[hidden] { display: none; }

/* The panel. */
.thread-panel { flex: 0 0 clamp(360px, 34vw, 520px); min-width: 0; height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--paper); animation: q-fade-in 160ms ease-out both; }
.thread-panel[hidden] { display: none; }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px 20px; }
.thread-head h2 { flex: 1; font: 550 17.2px/1.3 var(--sans); }
.thread-all[hidden], .thread-archive[hidden], .thread-restore[hidden] { display: none; }
.thread-all, .thread-restore { font-size: 12.5px; color: var(--olive); }
.thread-about { padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.thread-about[hidden], .thread-list[hidden], .thread-body[hidden] { display: none; }
.thread-quote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid #aab58a; color: #59634d; font-size: 13.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
/* (The arrow's own room stands in for some of the pill's.) */
.thread-to-fragment { padding-left: 8px; }
.thread-body { flex: 1; min-height: 0; display: flex; }
.thread-view.chat-view { padding: 0 18px; }
.thread-view .messages { padding-top: 18px; gap: 20px; }
.thread-list { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 14px 14px; }
.thread-search { display: flex; align-items: center; gap: 8px; margin: 0 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #eeece580; color: var(--muted); }
.thread-search:focus-within { outline: 2px solid var(--olive); }
.thread-search input { background: none; border: 0; outline: 0; min-width: 0; width: 100%; font-size: 13.5px; }
.thread-search input:focus-visible { box-shadow: none; }
.thread-search .icon { width: 16px; height: 16px; flex-shrink: 0; }
.thread-rows { flex: 1; min-height: 0; margin: 12px 0 0; padding: 0; list-style: none; overflow: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; }
.thread-row { display: grid; gap: 3px; width: 100%; padding: 10px 8px; border-radius: 6px; text-align: left; color: var(--ink); }
.thread-row:hover { background: #dbddd280; }
.thread-row-quote { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.thread-row-quote > span, .thread-row-result { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-row-result { font-size: 13px; color: #59634d; }
.thread-row-meta { font-size: 12px; color: var(--muted); }
.thread-empty { padding: 10px 8px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
/* The archived threads (ADR 0153): behind their own button under the others, each with
   "Przywróć" beside its row. */
.thread-archived-head { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.thread-archived-toggle { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px; border-radius: 6px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.thread-archived-toggle:hover { background: #dbddd280; color: var(--ink); }
.thread-archived-toggle span { flex: 1; }
.thread-archived-toggle .icon { width: 13px; height: 13px; flex-shrink: 0; transition: rotate .15s; }
.thread-archived-toggle[aria-expanded="false"] .thread-archived-caret { rotate: -90deg; }
.thread-item--archived { display: flex; align-items: center; gap: 4px; }
.thread-item--archived .thread-row { flex: 1; min-width: 0; }
.thread-item--archived .thread-row-quote { font-weight: 500; color: #59634d; }
.thread-row-restore { flex: none; margin-right: 6px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--olive); }
.thread-row-restore:hover { background: var(--sage); }

@media (max-width: 1050px) {
  /* The thread covers the conversation, under the history's drawer and its shade. */
  .thread-panel { position: absolute; inset: 0; z-index: 28; flex: none; width: auto; border-left: 0; }
  .thread-view.chat-view { padding: 0 14px; }
  .thread-action, .thread-marker { min-height: 24px; }
  /* A finger's height for the way back, where the thread is the whole screen. */
  .thread-to-fragment { height: 32px; }
}