/* 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 (ADR 0223): one short view. "Dodaj osobę" and whom it offers, "Kto ma dostęp" with
   each row's access in its own small menu, the foot's two quiet actions, the outside link opened
   in place under them. The product's tokens only; light look only (task #199). */
dialog.share-dialog { width: min(460px, 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) backwards; }
dialog.share-dialog::backdrop { background: var(--q-overlay); animation: q-share-dim 180ms ease both; }
dialog.share-dialog.closing { animation: q-unpop 160ms ease both; pointer-events: none; }
dialog.share-dialog.closing::backdrop { animation: q-share-undim 160ms ease both; }
@keyframes q-share-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes q-share-undim { from { opacity: 1; } to { opacity: 0; } }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 14px 4px 20px; }
.share-head h2 { font: 400 23px/1.25 var(--serif); letter-spacing: -.3px; outline: 0; }
/* Everything under the title scrolls as one where the screen is short (the outside link's part
   under the foot included); the title stays. */
.share-scroll { display: flex; flex-direction: column; min-height: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; overflow-anchor: none; }
.share-scroll > * { flex: none; }
.share-body { display: grid; gap: 4px; padding: 8px 20px 12px; }
/* "Dodaj osobę": a field with its magnifier, then whom it offers. */
.share-add { position: relative; display: grid; margin-bottom: 2px; }
.share-add > .icon { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; }
.share-field { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--control); border-radius: 9px; background: var(--field); color: var(--ink); font-size: 14px; }
.share-add .share-field { padding-left: 35px; }
.share-field::placeholder { color: var(--muted); }
.share-field:focus { outline: 0; border-color: var(--olive); box-shadow: 0 0 0 3px var(--sage); }
.share-people { display: grid; margin: 0; padding: 0; list-style: none; }
.share-people[hidden] { display: none; }
.share-found { max-height: 216px; overflow: auto; scrollbar-width: thin; }
/* A row: a face, who, and at its end what is done with it. The name keeps room to be read (12
   characters at least); where a line has no room for both, the controls go under the name. */
.share-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; min-height: 42px; padding: 4px 0; }
.share-person.is-moving { overflow: hidden; }
.share-person .avatar { width: 28px; height: 28px; font-size: 10px; border: 0; }
.share-person-words { flex: 1 1 12ch; min-width: 0; display: grid; gap: 0; }
.share-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.share-you-mark { color: var(--muted); }
.share-person-through { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--olive-ink); white-space: nowrap; }
.share-role { margin-left: auto; padding: 0 9px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.share-all { background: var(--sand); color: var(--ink); }
.share-empty { padding: 8px 0; font-size: 13px; color: var(--muted); }
/* An offer: an outlined face (not yet in), and the two accesses one press gives. */
.share-offer .avatar { background: transparent; box-shadow: inset 0 0 0 1px var(--control); color: var(--muted); }
.share-offer-pick { display: inline-flex; align-items: center; margin-left: auto; }
.share-offer-button { position: relative; padding: 6px 9px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--olive-ink); white-space: nowrap; }
.share-offer-button + .share-offer-button::before { content: ''; position: absolute; left: -.5px; top: 8px; bottom: 8px; border-left: 1px solid var(--line); }
.share-offer-button:hover, .share-offer-button:focus-visible { background: var(--sage); }
.share-offer-button:disabled { opacity: .6; }
/* The access on a row: its words and a small arrow; the menu under it. */
.share-level { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 6px 7px 6px 10px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--ink); white-space: nowrap; }
.share-level .icon { width: 14px; height: 14px; color: var(--muted); transition: transform .2s var(--ease); }
.share-level:hover, .share-level[aria-expanded=true] { background: var(--hover); }
.share-level[aria-expanded=true] .icon { transform: rotate(180deg); }
.share-level.is-none { color: var(--muted); font-weight: 400; }
.share-menu { min-width: 196px; }
.share-menu .share-menu-check { color: var(--olive); visibility: hidden; }
.share-menu [aria-checked=true] .share-menu-check { visibility: visible; }
.share-menu [aria-checked=true] { font-weight: 550; }
/* "Kto ma dostęp" and "Jak to działa?" beside it. */
.share-with-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.share-label { margin: 0; font: 600 12.5px/1.4 var(--sans); color: var(--muted); }
.share-how { padding: 2px 0; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; white-space: nowrap; }
.share-how:hover, .share-how[aria-expanded=true] { color: var(--ink); }
.share-rules { display: grid; gap: 4px; margin: 6px 0 4px; padding: 10px 12px 10px 28px; border-radius: 9px; background: var(--surface); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* A part opened in place: folded to nothing until asked for (its height moves, share-motion.js). */
.share-reveal { height: 0; overflow: hidden; visibility: hidden; }
.share-reveal.open { height: auto; visibility: visible; }
/* The status line: read out for every change, shown only for what went wrong. */
.share-status:not(.is-bad) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.share-status.is-bad { margin: 4px 0 2px; font-size: 13px; font-weight: 550; color: var(--danger); animation: q-arrive .2s var(--ease) both; }
/* The foot: two quiet actions. */
.share-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.share-act { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 8px 9px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--ink); }
.share-act .icon { width: 15px; height: 15px; flex: none; color: var(--olive); }
.share-act:hover, .share-act[aria-expanded=true] { background: var(--hover); }
.share-act-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-act.is-on { color: var(--olive-ink); }
.share-act.is-copied, .share-make.is-copied { animation: q-arrive .2s var(--ease) both; }
/* The link for people outside the company, opened under the foot. */
.share-outside-part { display: grid; gap: 10px; padding: 2px 20px 16px; }
.share-link-form { display: grid; gap: 8px; }
.share-link-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.share-seg-button { padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 550; color: var(--muted); white-space: nowrap; }
.share-seg-button:hover { color: var(--ink); }
.share-seg-button.active { background: var(--sage); color: var(--olive-ink); }
.share-make { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 14px; border-radius: 8px; background: var(--olive); color: var(--field); font-size: 13px; font-weight: 600; white-space: nowrap; }
.share-make:hover { background: var(--olive-ink); }
.share-make:disabled { opacity: .6; }
.share-rule { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.share-quiet { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 9px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--olive-ink); white-space: nowrap; }
.share-quiet .icon { width: 14px; height: 14px; }
.share-quiet:hover { background: var(--hover); }
.share-quiet.danger { color: var(--danger); }
.share-quiet.danger:hover { background: var(--danger-bg); }
.share-link-new { display: grid; gap: 6px; animation: q-arrive .2s var(--ease) both; }
.share-link-new[hidden], .share-links[hidden] { display: none; }
.share-link-box { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 5px 5px 11px; border: 1px solid var(--control); border-radius: 9px; background: var(--field); }
.share-link-box .share-make { margin-left: 0; padding: 6px 12px; font-size: 12.5px; }
.share-link-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink); user-select: all; }
.share-links { display: grid; margin: 0; padding: 0; list-style: none; }
.share-link-row { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; color: var(--ink); }
.share-link-words { flex: 1; min-width: 0; }
.share-link-row .share-quiet { flex: none; }
/* On a phone: a sheet from the bottom, rows tall enough to touch. */
@media (max-width: 600px) {
  dialog.share-dialog { width: 100vw; max-width: 100vw; max-height: calc(100dvh - 24px); margin: auto 0 0; border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
  dialog.share-dialog[open] { animation: q-share-sheet-in 240ms var(--ease) backwards; }
  dialog.share-dialog.closing { animation: q-share-sheet-out 200ms ease both; }
  .share-head { position: relative; padding-top: 20px; }
  .share-head::before { content: ''; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--control); }
  .share-person { min-height: 48px; }
  .share-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
/* Under a finger (task #185's rule): every control of the dialog is 44 px tall at least; the
   rows grow with them. A mouse keeps the sizes above. */
@media (pointer: coarse) {
  .share-offer-button, .share-level, .share-act, .share-seg-button, .share-quiet, .share-make, .share-menu .row-menu-item { min-height: 44px; }
  .share-how { display: inline-flex; align-items: center; min-height: 44px; }
  .share-with-head { align-items: center; }
}
@keyframes q-share-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes q-share-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  dialog.share-dialog[open], dialog.share-dialog.closing, dialog.share-dialog::backdrop, dialog.share-dialog.closing::backdrop, .share-status.is-bad, .share-link-new, .share-act.is-copied, .share-make.is-copied { animation: none; }
  .share-level .icon { transition: none; }
}

/* A switch (a checkbox with role=switch): the kit's own look, the knob moving to the right. The
   share dialog no longer has one (ADR 0223); the platform's panel does (ADR 0226). */
.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; } }
/* The "…" of a conversation shared with the person, and its menu (ADR 0219): as a row's. */
.share-owner-more { flex-shrink: 0; width: 30px; height: 30px; }
.share-owner-menu { position: fixed; z-index: 45; min-width: 184px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 35px var(--q-shadow); transform-origin: top right; }
.share-owner-menu[hidden] { display: none; }
/* Tinted rows (new, open) never touch: several shared ones in a row keep apart. */
.history-item--shared + .history-item--shared { margin-top: 4px; }