/* Sharing a conversation (ADR 0158): "Udostępnij" in the header and its dialog (with the links
   for people outside the company), "Udostępnione mi" in the history column, whose a message is,
   the card of a conversation the person may not read, Ustawienia's "Nowe rozmowy" and the page
   of an outside link (linked after threads.css in index.html). Colours and fonts are the tokens
   of styles.css and workspace.css only. */

/* The header's slot: beside Aktywność on a wide screen, a line of its own under the header's
   first on a narrower one, so the state is always there in words and the title keeps its room. */
.share-slot { display: flex; align-items: center; justify-content: flex-end; min-width: 0; margin-left: auto; }
.share-header { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; max-width: 100%; }
/* While a link for people outside the company works: said beside the state, to every reader. On
   one line with the button its words give way first (the whole sentence is its title). */
.share-outside { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 550; color: var(--danger); }
.share-outside[hidden] { display: none; }
.share-outside-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-slot:empty { display: none; }
.share-slot:not(:empty) + .topbar-end { margin-left: 0; }
.share-button { display: inline-flex; align-items: center; flex-shrink: 0; gap: 7px; max-width: 100%; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12px; white-space: nowrap; }
.share-button:hover { background: var(--hover); border-color: var(--control); }
.share-button .icon { color: var(--olive); }
.share-button-word { font-weight: 600; }
.share-state { color: var(--muted); }
.share-state::before { content: '·'; margin-right: 7px; }
.share-state[hidden] { display: none; }
.share-button[data-shared=true] .share-state { color: var(--olive-ink); font-weight: 600; }
.share-owner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--ink); }
.share-owner .avatar { width: 25px; height: 25px; font-size: 9.5px; border: 0; }
.share-owner-name { min-width: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Shared with the person for reading (ADR 0167): said beside whose it is. */
.share-owner-access { flex-shrink: 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; font-weight: 550; color: var(--olive-ink); white-space: nowrap; }
@media (max-width: 1200px) {
  .workspace .topbar:has(> .share-slot:not(:empty)) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 67px auto; height: auto; align-items: center; row-gap: 0; }
  .share-slot:not(:empty) { grid-column: 1 / -1; grid-row: 2; margin: -8px 0 0; padding-bottom: 12px; }
  .share-header { flex-wrap: wrap; row-gap: 6px; }
  .share-outside-words { white-space: normal; }
}
@media (max-width: 760px) {
  .workspace .topbar:has(> .share-slot:not(:empty)) { grid-template-rows: 59px auto; }
}

/* The dialog: a switch of two sections; inside the company the access, everyone, people by
   name and the conversation's own link; outside, the links with a password. */
dialog.share-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px color-mix(in srgb, var(--ink) 16%, transparent); overflow: hidden; }
dialog.share-dialog[open] { display: flex; flex-direction: column; animation: q-pop 180ms var(--ease) both; }
dialog.share-dialog::backdrop { background: color-mix(in srgb, var(--ink) 38%, transparent); }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 8px; }
.share-head h2 { font: 400 25px/1.25 var(--serif); letter-spacing: -.3px; }
.share-body { display: grid; gap: 18px; padding: 8px 20px 20px; overflow: auto; scrollbar-width: thin; }
.share-body[hidden] { display: none; }
/* The switch between the two sections (ADR 0167): inside the company, and the link outside. */
.share-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 6px 20px 8px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.share-tab { min-width: 0; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-tab:hover { color: var(--ink); background: var(--hover); }
.share-tab.active { background: var(--ink); color: var(--paper); }
/* "Dostęp": two choices, neither chosen until the person picks one. */
.share-access { gap: 8px; }
.share-access .choice { flex: 1 1 160px; padding: 11px 12px; font-size: 13.5px; }
.share-access[aria-invalid=true] .choice { border-color: var(--danger); }
.share-access-need { font-size: 12.5px; font-weight: 550; color: var(--danger); }
.share-access-need[hidden] { display: none; }
/* The access of a share that stands: two small buttons, the one in force filled. */
.share-level { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.share-level-button { padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 550; color: var(--muted); white-space: nowrap; }
.share-level-button:hover { color: var(--ink); }
.share-level-button.active { background: var(--sage); color: var(--olive-ink); box-shadow: inset 0 0 0 1px var(--olive); }
.share-level-button:disabled { opacity: .6; }
.share-person-through { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--olive-ink); white-space: nowrap; }
.share-everyone-level { grid-column: 1 / -1; display: flex; justify-content: flex-start; }
.share-everyone-level[hidden] { display: none; }
.share-section { display: grid; gap: 8px; min-width: 0; }
.share-section.share-everyone { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.share-everyone-words { display: grid; gap: 3px; min-width: 0; }
.share-label { margin: 0; font: 600 13.5px/1.4 var(--sans); color: var(--ink); }
.share-hint, .share-note { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.share-search { width: 100%; padding: 9px 11px; border: 1px solid var(--control); border-radius: 8px; background: var(--field); color: var(--ink); font-size: 13.5px; }
.share-search::placeholder { color: var(--muted); }
.share-search:focus { border-color: var(--olive); box-shadow: 0 0 0 3px var(--sage); }
.share-people { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.share-found { max-height: 172px; overflow: auto; scrollbar-width: thin; }
/* A person's row: who, then what can be done with their share. The name keeps room to be
   read (12 characters at least); where a line has no room for both, the controls go under it. */
.share-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; padding: 6px 4px; }
.share-person-words { flex: 1 1 12ch; min-width: 0; display: grid; gap: 1px; }
.share-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.share-person-controls { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.share-empty { padding: 6px 4px; font-size: 13px; color: var(--muted); }
.share-copy { justify-self: start; }
.share-status { min-height: 20px; padding: 0 20px; font-size: 13px; font-weight: 550; color: var(--olive-ink); }
/* The links for people outside the company: a password, how long, the link shown once, the list. */
.share-link-form { display: grid; gap: 8px; }
.share-link-form .btn { justify-self: start; }
.choices--small { gap: 6px; }
.choices--small .choice { flex: 1 1 0; padding: 8px 10px; font-size: 13px; text-align: center; white-space: nowrap; }
.share-link-new { display: grid; gap: 6px; }
.share-link-new[hidden], .share-links[hidden] { display: none; }
.share-link-new .share-link-box { margin-top: 0; }
.share-link-url { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.share-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.share-link-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.share-link-words { flex: 1; min-width: 0; }
.share-link-row.is-off { color: var(--muted); }
.share-link-state { flex: none; font-weight: 550; }
@media (prefers-reduced-motion: reduce) { dialog.share-dialog[open] { animation: none; } }

/* A switch (a checkbox with role=switch): the kit's own look, the knob moving to the right. */
.q-switch { appearance: none; position: relative; flex: none; width: 42px; height: 24px; margin: 0; border: 1px solid var(--muted); border-radius: 999px; background: var(--control); cursor: pointer; transition: background .2s, border-color .2s; }
.q-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 25%, transparent); transition: transform .2s var(--ease); }
.q-switch:checked { background: var(--olive); border-color: var(--olive); }
.q-switch:checked::before { transform: translateX(18px); }
.q-switch:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; box-shadow: none; }
.q-switch:disabled { opacity: .6; cursor: default; }

/* The history column: an own conversation others read, and the ones shared with the person. */
.history-shared { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--muted); }
.history-row .history-shared .icon { width: 14px; height: 14px; }
.history-group--shared { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.history-group--shared:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
/* (Room at the right for the row's "…" menu, as an own conversation's row has.) */
.history-item .history-row--shared { align-items: flex-start; padding-right: 38px; }
.history-row--shared > .icon { margin-top: 2px; }
.history-row--shared > .history-row-words { display: grid; gap: 1px; white-space: normal; }
.history-row-title, .history-row-owner { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-row-owner { font-size: 11.5px; color: var(--olive-ink); }
.history-row.is-new .history-row-owner { font-weight: 400; }

/* A message of someone else: whose it is, above it (as "Quartio" stands above an answer). */
.message-row--other { flex-direction: column; align-items: flex-end; gap: 6px; }
.message-sender { display: flex; align-items: center; gap: 8px; max-width: min(85%, 640px); margin: 0; font-size: 13px; font-weight: 550; color: var(--ink); }
.message-sender .avatar { width: 25px; height: 25px; font-size: 9.5px; border: 0; }
.message-sender-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The start of a conversation that will be shared with everyone (the company's setting). */
.chat-shared-note { display: none; }
.chat-view.empty .chat-shared-note:not([hidden]) { display: block; max-width: 800px; margin: 12px auto 0; text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* A conversation the person may not read: a card in place of the chat. */
.chat-view[hidden], .no-access[hidden] { display: none; }
.no-access { flex: 1; min-width: 0; height: 100%; display: grid; place-items: center; padding: 24px 19px; overflow: auto; }
.no-access-card { width: 100%; max-width: 520px; display: grid; justify-items: center; gap: 12px; text-align: center; animation: q-enter .3s var(--ease); }
.no-access-card h2 { font: 400 clamp(28px, 3vw, 38px)/1.15 var(--serif); letter-spacing: -.6px; overflow-wrap: break-word; }
.no-access-card p { max-width: 44ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.no-access-card .no-access-state { font-size: 14px; font-weight: 550; color: var(--olive-ink); }
.no-access-state:empty { display: none; }
.no-access-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.no-access-actions .btn { padding: 10px 16px; font-size: 13.5px; }

/* Ustawienia → Ogólne, "Nowe rozmowy": each choice with what it means under its name. */
.choice strong { display: block; font-weight: 600; }
.choice-lead { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--olive-ink); }
.choices-note { margin-top: 12px; font-size: 12.5px; }

/* An outside link's page (`/udostepnione/<token>`): the conversation's words, read-only, in the
   chat's look, with nothing to press but links to the web. */
.shared-page { max-width: 820px; margin: 0 auto; padding: 28px 20px 64px; }
.shared-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.shared-head .wordmark { padding: 0; font-size: 26px; }
.shared-mark { font-size: 12px; color: var(--muted); }
.shared-page h1 { font: 400 clamp(28px, 4vw, 38px)/1.15 var(--serif); letter-spacing: -.6px; overflow-wrap: break-word; outline: 0; }
.shared-owner { margin: 6px 0 28px; font-size: 13.5px; color: var(--muted); }
.shared-messages { display: flex; flex-direction: column; gap: 26px; margin: 0; padding: 0; list-style: none; }
.shared-file, .shared-widget { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--olive-ink); }

/* One new to the person stands out until they open it (ADR 0167): beside the filled icon every
   unread row has, a tinted row and "Nowa"; one that has just arrived flashes once. */
.history-item--shared.is-new .history-row { background: var(--sage); }
/* (A row's spans share its width: the mark keeps to its own.) */
.history-row > .history-new { align-self: center; flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: var(--olive); color: var(--paper); font-size: 10.5px; font-weight: 650; letter-spacing: .2px; }
.history-item--shared.is-arriving .history-row { animation: q-share-arrive 1.6s var(--ease) 1; }
@keyframes q-share-arrive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--olive) 55%, transparent); transform: translateX(-6px); opacity: .4; } 30% { transform: none; opacity: 1; } 100% { box-shadow: 0 0 0 9px transparent; } }
/* The column's button, while the column is closed and something in it is new. */
.history-toggle { position: relative; }
.history-toggle.has-news[aria-expanded=false]::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 2px var(--paper); }
@media (prefers-reduced-motion: reduce) { .history-item--shared.is-arriving .history-row { animation: none; } }

/* Who else writes now (ADR 0167): a small row above the message box, three moving dots. */
.typing-row { position: absolute; left: 6px; bottom: 100%; z-index: 1; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 12px); margin: 0 0 6px; padding: 5px 11px 5px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 8%, transparent); font-size: 12.5px; color: var(--ink); animation: q-fade-in .2s var(--ease) both; }
.typing-row[hidden] { display: none; }
.typing-faces { display: inline-flex; }
.typing-faces .avatar { width: 22px; height: 22px; font-size: 9px; border: 2px solid var(--paper); }
.typing-faces .avatar + .avatar { margin-left: -8px; }
.typing-dots { display: inline-flex; align-items: center; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--olive); animation: q-typing 1.2s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
.typing-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
@keyframes q-typing { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity: .7; } .typing-row { animation: none; } }