/* The app host page and the pieces every Pure Server page shares (dialogs, the drawer, the picker).
   Tokens, the app bar and controls are in web/theme.css. */
main { flex: 1; display: flex; min-height: 0; }
/* The app follows the theme the bridge sends it. Its frame keeps the normal colour scheme: a frame whose scheme
   differs from its document's gets an opaque white backdrop in Chrome, behind a dark app. */
iframe { flex: 1; border: 0; width: 100%; height: 100%; background: var(--sheet); color-scheme: normal; }
.card {
  margin: 12vh auto auto; width: min(440px, calc(100% - 32px)); padding: 28px;
  background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--accent);
}
.card h1 { font-size: 16px; margin: 0 0 8px; }
.card p { font-size: 13px; line-height: 1.5; color: var(--quiet); margin: 0 0 16px; }
.key { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.key code { flex: 1; font-size: 11px; padding: 8px; background: var(--ground); border-radius: var(--radius); overflow-wrap: anywhere; }
.message { min-height: 1.5em; margin: 12px 0 0 !important; }

@media (max-width: 960px) {
  /* Narrow (a split pane, a small window): the app keeps its icon, the names go */
  #app-name, .who { display: none; }
  .app { padding: 0 8px; }
  .doc { max-width: 30vw; }
}

/* The assistant drawer */
.drawer.drawer-shared { border-left-color: var(--platform-colors-border, var(--rule)); }
.drawer { width: 380px; flex: none; display: flex; flex-direction: column; background: var(--sheet); border-left: 1px solid var(--rule); min-height: 0; }
.drawer-head { display: flex; align-items: center; gap: 10px; height: 44px; background: var(--chrome); padding: 0 12px 0 16px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.drawer-title { font-weight: 700; }
/* The conversation column stands on the left of the app, as the assistant drawer does on PureDesktop; the same
   width as the desk's (cloud.css .shell-left). */
.drawer.column { padding: 0; width: clamp(320px, 28vw, 420px); border-left: 0; border-right: 1px solid var(--rule); }
.drawer.column iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: transparent; }
.drawer-head .grow { flex: 1; }
.drawer-choose { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--quiet); }
.drawer-choose label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.drawer-choose label[hidden] { display: none; }
.drawer-choose select { font: inherit; font-size: 12px; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 3px 6px; max-width: 200px; }
.icon { font: inherit; border: none; background: none; color: var(--quiet); cursor: pointer; font-size: 13px; padding: 4px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.5; }
.turn p { margin: 0 0 6px; }
.turn.you { align-self: flex-end; max-width: 85%; background: var(--ground); border-radius: var(--radius); padding: 8px 12px; }
.turn.assistant { color: var(--ink); }
.activity { color: var(--quiet); font-size: 12px; }
.activity.quiet-line { opacity: 0.75; }
.condensed { opacity: 0.55; }
.divider { font-size: 11px; color: var(--quiet); text-align: center; border-top: 1px solid var(--rule); padding-top: 8px; }
.drawer-head .link:disabled { color: var(--quiet); cursor: default; }
.approval { border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; }
.approval-title { margin: 0 0 6px; font-weight: 600; }
.approval-args { margin: 0 0 8px; font-size: 11px; max-height: 160px; overflow: auto; background: var(--ground); border-radius: var(--radius); padding: 8px; white-space: pre-wrap; }
.approval.settled { opacity: 0.8; }
.quiet { color: var(--quiet); margin: 0; }
.drawer-foot { border-top: 1px solid var(--rule); padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.drawer-foot textarea { font: inherit; font-size: 13px; resize: vertical; border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; background: var(--sheet); color: var(--ink); }
.drawer-status { font-size: 12px; color: var(--quiet); min-height: 1.2em; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
a.link { text-decoration: none; }

.about { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); color: var(--ink); padding: 24px 28px; max-width: min(460px, calc(100vw - 32px)); }
.about::backdrop { background: rgb(0 0 0 / 0.35); }
.about h2 { margin: 0 0 8px; font-size: 18px; }
.about p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.about form { display: flex; justify-content: flex-end; margin: 0; }

.capture { position: fixed; inset: 0; z-index: 1000; }
.capture-image { position: absolute; inset: 0; width: 100vw; height: 100vh; }
.capture-shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); cursor: crosshair; }
.capture-box { position: absolute; outline: 2px solid var(--accent); background: rgb(255 255 255 / 0.08); box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.25); pointer-events: none; }
.capture-panel { position: absolute; right: 16px; bottom: 16px; width: min(320px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); font-size: 13px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.2); }
.capture-title { margin: 0; font-weight: 700; }
.capture-hint { margin: 0; color: var(--quiet); font-size: 12px; }
.capture-note { font: inherit; font-size: 13px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 8px; background: var(--sheet); color: var(--ink); resize: vertical; }
.capture-option { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.capture-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Choosing in the workspace (web/picker.js) */
.picker { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); color: var(--ink); padding: 0; width: min(620px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); display: none; flex-direction: column; font-size: 13px; }
.picker[open] { display: flex; }
.picker::backdrop { background: rgb(0 0 0 / 0.35); }
.picker header { display: flex; align-items: baseline; gap: 12px; padding: 20px 24px 8px; }
.picker h2 { margin: 0; font-size: 17px; font-weight: 600; }
.picker-kinds { color: var(--quiet); font-size: 12px; font-variant-numeric: tabular-nums; }
.picker-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 24px 10px; border-bottom: 1px solid var(--rule); }
.picker-sep { color: var(--quiet); }
.picker-rows { list-style: none; margin: 0; padding: 6px 12px; overflow: auto; flex: 1; min-height: 220px; }
.picker-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--radius); cursor: pointer; }
.picker-row:hover, .picker-row:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); outline: none; }
.picker-row.chosen { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.picker-row.muted { color: var(--quiet); cursor: default; opacity: 0.6; }
.picker-row.muted:hover { background: none; }
.picker-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-meta { color: var(--quiet); font-size: 12px; font-variant-numeric: tabular-nums; }
.picker-glyph { width: 16px; height: 13px; flex: none; border: 1.5px solid currentColor; border-radius: 2px; opacity: 0.7; }
.picker-glyph.folder { border-radius: 2px 5px 2px 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.picker-glyph.package { border-color: var(--accent); background: var(--accent); opacity: 0.85; }
.picker-glyph.image { border-radius: 3px; }
.picker-glyph.pdf, .picker-glyph.text, .picker-glyph.file { width: 12px; height: 15px; }
.picker-empty { color: var(--quiet); padding: 28px 12px; text-align: center; }
.picker-note { margin: 0; padding: 0 24px; color: var(--warn); min-height: 0; }
.picker-note:empty { display: none; }
.picker-save { display: flex; align-items: center; gap: 10px; padding: 10px 24px 0; }
.picker-save span { color: var(--quiet); }
.picker-name { flex: 1; font: inherit; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ground); color: var(--ink); }
.picker footer { display: flex; align-items: center; gap: 8px; padding: 14px 24px 18px; border-top: 1px solid var(--rule); margin-top: 10px; }
.picker footer .grow { flex: 1; }

/* Working together: who else has the document open, and the discussion beside it (web/together.js) */
.together { display: inline-flex; align-items: center; }
.together[hidden] { display: none; }
.together-person { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; color: #fff; border: 2px solid var(--shell); margin-left: -6px; }
.together-person:first-child { margin-left: 0; }
#discuss-toggle.unread::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-left: 2px; }
.drawer.discuss .drawer-head .quiet { font-size: 12px; }
.drawer.discuss .turn.other { align-self: flex-start; max-width: 85%; }
.drawer.discuss .turn.you { align-self: flex-end; }
.drawer.discuss .turn p { margin: 0; white-space: pre-wrap; }
.chat-who { font-size: 11.5px; font-weight: 600; margin-bottom: 2px; }