/* The invite page is a workspace with Duly's DM open, drawn with the app's
   measures (clients/web: sidebar 264, message avatar 36, gutter 12, composer
   radius 18). The sidebar's channels are the site's pages. */

.ws-body { block-size: 100dvh; overflow: hidden; background: var(--band); }
.ws { display: grid; grid-template-columns: 264px minmax(0, 1fr); block-size: 100dvh; }
.ws-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Duly's face: the mark, light on ink, as the app draws Duly. */
.duly-face { position: relative; display: inline-block; flex: none; inline-size: 36px; block-size: 36px; border-radius: 25%; background: var(--ink); }
.duly-face::after { content: ""; position: absolute; inset: 0; background: var(--card); -webkit-mask: url("/assets/duly-mark.svg") center / 46% auto no-repeat; mask: url("/assets/duly-mark.svg") center / 46% auto no-repeat; }
.duly-face-row { inline-size: 20px; block-size: 20px; border-radius: 6px; background: var(--card); }
.duly-face-row::after { background: var(--ink); }
.duly-face-head { inline-size: 24px; block-size: 24px; border-radius: 6px; }
.duly-face-big { inline-size: 56px; block-size: 56px; border-radius: var(--radius-large); }

/* ---------- the sidebar ---------- */
.ws-side { display: flex; flex-direction: column; min-block-size: 0; overflow: auto; padding: var(--space-m) var(--space-m) 0; color: var(--band-ink); }
.ws-team { display: flex; align-items: center; gap: var(--space-s); min-block-size: 40px; padding-inline: 6px; border-radius: var(--radius-medium); }
@media (hover: hover) and (pointer: fine) { .ws-team:hover { background: var(--band-hover); } }
.ws-team-mark { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 7px; background: var(--card); }
.ws-team-mark img { block-size: 17px; inline-size: auto; }
.ws-team b { font-size: var(--type-title-size); font-weight: 700; }
.ws-team-home { margin-inline-start: auto; font-size: var(--type-meta-size); color: var(--band-ink-2); }
.ws-section { display: grid; gap: 1px; margin-block-start: var(--space-xl); }
.ws-section h2 { display: flex; align-items: center; block-size: 28px; padding-inline: var(--space-s); font-size: var(--type-meta-size); font-weight: 600; color: var(--band-ink-2); }
.ws-row { display: flex; align-items: center; gap: 10px; min-block-size: 33px; padding-inline: var(--space-s); border-radius: var(--radius-medium); font-size: var(--type-body-size); color: var(--band-ink); }
@media (hover: hover) and (pointer: fine) { .ws-row:hover { background: var(--band-hover); } }
.ws-row[aria-current="page"] { background: var(--band-selected); font-weight: 650; }
.ws-hash { inline-size: 20px; text-align: center; font-size: var(--type-title-size); color: var(--band-ink-2); }
.ws-side a:focus-visible { outline-color: var(--band-ink); }
.ws-me { display: flex; align-items: center; gap: 10px; margin-block-start: auto; padding: var(--space-l) 6px; }
.ws-me > div { display: grid; min-inline-size: 0; }
.ws-me b { font-size: var(--type-row-size); font-weight: 650; }
.ws-me span:not(.ws-face) { font-size: var(--type-meta-size); color: var(--band-ink-2); }
.ws-face-me { inline-size: 32px; block-size: 32px; background: var(--band-hover); color: var(--band-ink); }
.ws-signin { margin-inline-start: auto; display: inline-flex; align-items: center; min-block-size: 32px; padding-inline: var(--space-m); border-radius: var(--radius-pill); background: var(--card); color: var(--action); font-size: var(--type-small-size); font-weight: 650; }

/* ---------- the pane ---------- */
.ws-pane { display: flex; flex-direction: column; min-block-size: 0; margin: var(--space-s) var(--space-s) var(--space-s) 0; border-radius: var(--radius-sheet); background: var(--card); overflow: hidden; }
.ws-head { display: flex; align-items: center; gap: 10px; flex: none; min-block-size: 56px; padding-inline: var(--space-xl); }
.ws-head-words { display: flex; align-items: baseline; gap: 10px; min-inline-size: 0; }
.ws-head-words b { font-size: var(--type-title-size); font-weight: 700; }
.ws-head-words span { padding-inline-start: 10px; border-inline-start: 1px solid var(--hairline); font-size: var(--type-small-size); color: var(--ink-2); }
.ws-back { display: none; }
.ws-restart { margin-inline-start: auto; min-block-size: 32px; padding-inline: var(--space-m); border: 0; border-radius: var(--radius-medium); background: none; color: var(--ink-2); font: 600 var(--type-small-size)/1 var(--type-family); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ws-restart:hover { background: var(--ground); color: var(--ink); } }

.ws-feed { flex: 1; min-block-size: 0; overflow: auto; overscroll-behavior: contain; padding-inline: var(--space-xl); }
.ws-start { display: grid; justify-items: center; gap: var(--space-m); max-inline-size: var(--column-conversation); margin: 0 auto; padding-block: clamp(32px, 10vh, 96px) var(--space-xxl); text-align: center; }
.ws-start h1 { margin-block-start: var(--space-s); font-size: var(--type-display-size); line-height: var(--type-display-line-height); font-weight: var(--type-display-weight); text-wrap: balance; }
.ws-start > p { max-inline-size: 30rem; font-size: var(--type-title-size); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.ws-start-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); inline-size: min(100%, 480px); margin-block-start: var(--space-s); }
.ws-start-card { display: grid; justify-items: start; gap: 6px; padding: var(--space-l); border: 1px solid var(--hairline); border-radius: var(--radius-large); background: var(--card); box-shadow: var(--elevation-raised); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--motion-quick) var(--motion-curve), border-color var(--motion-quick) var(--motion-curve), opacity var(--motion-quick) var(--motion-curve); }
@media (hover: hover) and (pointer: fine) { .ws-start-card:hover:not(:disabled) { background: var(--ground); } }
.ws-start-card b { margin-block-start: 6px; font-size: var(--type-body-size); font-weight: 650; }
.ws-start-card > span:last-child { font-size: var(--type-small-size); line-height: var(--type-small-line-height); color: var(--ink-2); }
.ws-start-card[data-selected] { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.ws-start-card:disabled { cursor: default; }
.ws-start-card:disabled:not([data-selected]) { opacity: 0.5; box-shadow: none; }
.ws-icon { display: grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: var(--radius-medium); background: var(--ground); color: var(--ink); }

/* ---------- messages ---------- */
.ws-log { list-style: none; max-inline-size: var(--column-conversation); margin: 0 auto; padding: 0 0 var(--space-l); }
.ws-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-m); padding-block: var(--space-s); animation: ws-in var(--motion-settle) var(--motion-curve) both; }
.ws-face { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: color-mix(in srgb, var(--palette-teammate-clay) 16%, var(--card)); color: var(--palette-teammate-clay); font-size: var(--type-row-size); font-weight: 700; }
.ws-msg-content { min-inline-size: 0; }
.ws-msg-head { display: flex; align-items: baseline; gap: var(--space-s); margin-block-end: var(--space-xs); }
.ws-msg-head b { font-size: var(--type-body-size); font-weight: 650; }
.ws-msg-head time { font-size: var(--type-meta-size); color: var(--ink-2); }
.ws-msg-body { font-size: var(--type-body-size); line-height: var(--type-body-line-height); overflow-wrap: anywhere; }
.ws-msg-body + .ws-msg-body { margin-block-start: var(--space-xs); }

.ws-card { max-inline-size: 480px; margin-block-start: var(--space-m); border: 1px solid var(--hairline); border-radius: var(--radius-large); background: var(--card); box-shadow: var(--elevation-raised); }
.ws-card-top { display: flex; align-items: center; gap: var(--space-m); padding: var(--space-l); }
.ws-card-top > div { display: grid; gap: 2px; min-inline-size: 0; }
.ws-card-top b { font-size: var(--type-title-size); font-weight: 650; overflow-wrap: anywhere; }
.ws-card-top span:not(.ws-icon) { font-size: var(--type-small-size); color: var(--ink-2); }
.ws-card-foot { display: flex; flex-wrap: wrap; gap: var(--space-s); padding: var(--space-m) var(--space-l); border-block-start: 1px solid var(--hairline); }
.ws-button { display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: var(--space-l); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 650 var(--type-row-size)/1 var(--type-family); }
.ws-button-primary { border-color: transparent; background: var(--action); color: var(--on-action); }
@media (hover: hover) and (pointer: fine) { .ws-button-primary:hover { background: var(--action-hover); } }

/* The app's answer chips (choice-card.css): chosen takes the accent edge, the rest go quiet. */
.ws-chips { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-m); }
.ws-chip { min-block-size: 32px; padding: var(--space-xs) var(--space-m); border: 1px solid var(--hairline); border-radius: var(--radius-medium); background: var(--card); color: var(--ink); font: 500 var(--type-row-size)/1.2 var(--type-family); cursor: pointer; transition: background-color var(--motion-quick) var(--motion-curve); }
@media (hover: hover) and (pointer: fine) { .ws-chip:hover:not(:disabled) { background: var(--ground); } }
.ws-chip-quiet { color: var(--ink-2); }
.ws-chip[data-selected] { border-color: var(--action); background: var(--ground); font-weight: 650; }
.ws-chip:disabled { cursor: default; }
.ws-chip:disabled:not([data-selected]) { color: var(--ink-3); }
.ws-chip:focus-visible, .ws-start-card:focus-visible, .ws-button:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.ws-typing { display: flex; gap: 5px; align-items: center; block-size: 22px; }
.ws-typing::before, .ws-typing::after, .ws-typing > span { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ink-3); animation: ws-dot 900ms ease-in-out infinite; }
.ws-typing > span { animation-delay: 150ms; }
.ws-typing::after { animation-delay: 300ms; }
@keyframes ws-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ws-dot { 50% { opacity: 0.35; } }

/* ---------- the composer ---------- */
.ws-compose { flex: none; padding: var(--space-s) var(--space-xl) 0; }
.ws-composer { display: flex; align-items: center; gap: var(--space-s); max-inline-size: var(--column-conversation); margin: 0 auto; padding: var(--space-s) var(--space-s) var(--space-s) var(--space-l); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--radius-sheet); background: var(--card); box-shadow: var(--elevation-raised); transition: border-color var(--motion-quick) var(--motion-curve); }
.ws-composer:focus-within { border-color: var(--action); }
.ws-composer input { flex: 1; min-inline-size: 0; min-block-size: 40px; border: 0; background: none; color: var(--ink); font: 400 16px/1.4 var(--type-family); }
.ws-composer input:focus { outline: none; }
.ws-composer input::placeholder { color: var(--ink-2); }
.ws-send { display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border: 0; border-radius: 50%; background: var(--ground); color: var(--ink-2); cursor: pointer; transition: background-color var(--motion-quick) var(--motion-curve), color var(--motion-quick) var(--motion-curve); }
.ws-composer:has(input:not(:placeholder-shown)) .ws-send { background: var(--action); color: var(--on-action); }
.ws-send:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.ws-send:disabled { cursor: wait; opacity: .5; }
.ws-composer:has([aria-invalid="true"]) { border-color: var(--action); outline: 1px solid var(--action); }
.ws-foot { padding-block: var(--space-s) var(--space-m); text-align: center; font-size: var(--type-meta-size); color: var(--ink-2); }
.ws-foot a { text-decoration: underline; text-underline-offset: 2px; }
.ws-foot .legal-links a + a::before { content: "·"; display: inline-block; padding-inline-end: var(--space-xs); }

/* ---------- a phone: the DM alone, the app's Spruce header ---------- */
@media (max-width: 720px) {
  .ws { grid-template-columns: minmax(0, 1fr); }
  .ws-side { display: none; }
  .ws-pane { margin: 0; border-radius: 0; background: var(--band); }
  .ws-head { position: relative; justify-content: center; min-block-size: 64px; padding: calc(var(--space-s) + env(safe-area-inset-top)) 56px var(--space-m); color: var(--band-ink); }
  .ws-head-words { flex-direction: column; align-items: center; gap: 2px; }
  .ws-head-words b { font-size: var(--type-title-size); }
  .ws-head-words span { padding: 0; border: 0; color: var(--band-ink-2); }
  .ws-back { position: absolute; inset-inline-start: var(--space-s); display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; color: var(--band-ink); }
  .ws-back:focus-visible { outline-color: var(--band-ink); }
  .duly-face-head { position: absolute; inset-inline-end: var(--space-l); inline-size: 32px; block-size: 32px; background: var(--card); }
  .duly-face-head::after { background: var(--ink); }
  .ws-restart { position: absolute; inset-inline-end: var(--space-s); min-block-size: 44px; color: var(--band-ink-2); }
@media (hover: hover) and (pointer: fine) { .ws-restart:hover { background: var(--band-hover); color: var(--band-ink); } }
  .ws-restart:focus-visible { outline-color: var(--band-ink); }
  .ws-head:has(.ws-restart:not([hidden])) .duly-face-head { display: none; }
  .ws-feed { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--card); padding-inline: var(--gutter); }
  .ws-start h1 { font-size: 1.625rem; }
  .ws-start > p { font-size: var(--type-body-size); }
  .ws-start-cards { grid-template-columns: minmax(0, 1fr); }
  .ws-compose { background: var(--card); padding: var(--space-s) var(--space-m) env(safe-area-inset-bottom); }
}
@media (pointer: coarse) {
  .ws-send { inline-size: 44px; block-size: 44px; }
  .ws-chip, .ws-button, .ws-row, .ws-signin, .ws-restart { min-block-size: 44px; }
}
@media (max-width: 720px) and (orientation: landscape) {
  .ws-head, .ws-feed, .ws-compose { padding-inline-start: max(var(--gutter), env(safe-area-inset-left)); padding-inline-end: max(var(--gutter), env(safe-area-inset-right)); }
}
@media (forced-colors: active) {
  .ws-composer, .ws-start-card, .ws-chip, .ws-send, .ws-button { border: 1px solid ButtonText; }
  .ws-composer:focus-within { outline: 2px solid Highlight; }
  .duly-face { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-msg, .ws-typing::before, .ws-typing::after, .ws-typing > span { animation: none; }
}