/* 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; }
@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: everyone, people by name, the link, and what sharing means. */
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-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; }
.share-person { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 4px; }
.share-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.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; }
.history-item .history-row--shared { align-items: flex-start; padding-right: 8px; }
.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--shared > .history-dot { align-self: center; }

/* 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); }