/* Deck Studio task pane.
 *
 * Six type sizes and no component gets one of its own. The floor is 11px: the
 * previous stylesheet bottomed out at 7px for the eyebrow and 8px for
 * timestamps, which is most of what made the pane read as cramped rather than
 * considered.
 *
 * The palette is unchanged Sydani navy and orange. Orange is the accent only:
 * the send button, the slide being worked on, the working dots. Green carries
 * progress and completion, from the question header through to the applied
 * tick. Never a large fill of either. */
:root {
  color-scheme: light;
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  color: #101828;
  background: #f6f8fb;

  --navy: #002060;
  --navy-deep: #0d2e64;
  --orange: #ec7c30;
  --pale: #eef3fb;
  --line: #dfe4ec;
  --ink: #101828;
  --ink-2: #344054;
  --muted: #667085;
  --faint: #98a2b3;
  --success: #17795e;
  --warn: #b54708;
  --danger: #b42318;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-width: 280px; min-height: 100vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #f6f8fb; -webkit-font-smoothing: antialiased;
}
button, textarea, input { font: inherit; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }

/* --- header ------------------------------------------------------------- */
.brand-header {
  position: relative; z-index: 5; flex: 0 0 auto;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 11px 68px 11px 12px; color: white;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  border-bottom: 3px solid var(--orange);
}
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: white; display: grid; place-items: center; overflow: hidden; }
.brand-mark img { display: block; width: auto; height: 20px; max-width: 20px; object-fit: contain; }
.brand-header h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; margin: 0; }
.eyebrow { font-size: 9px; font-weight: 600; letter-spacing: .16em; margin: 0 0 1px; color: #a9c2ee; }
.header-actions { display: flex; align-items: center; gap: 2px; }
.header-action { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; padding: 0; color: #a9c2ee; background: transparent; cursor: pointer; }
.header-action:hover, .header-action[aria-expanded="true"] { color: white; background: rgba(255, 255, 255, .14); }
.header-action:disabled { opacity: .4; cursor: default; }
.header-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.host-pending .brand-header { display: none; }

main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0 12px 12px; }
.notice { margin: 12px 0 0; padding: 11px 12px; border: 1px solid #f1c27d; background: #fff7e8; border-radius: 10px; font-size: 12px; line-height: 1.5; }
body:not(.authenticated) .workspace-only { display: none !important; }

/* --- sign in ------------------------------------------------------------ */
.login-screen { flex: 1 1 auto; min-height: 0; display: none; flex-direction: column; justify-content: center; gap: 20px; overflow-y: auto; padding: 20px 4px 4px; }
body.powerpoint-host:not(.authenticated) .login-screen { display: flex; }
body.authenticated .login-screen { display: none; }
.login-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.login-mark { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 4px 14px rgba(0, 32, 96, .07); }
.login-mark img { display: block; width: auto; height: 30px; }
.login-intro h2 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.login-intro p { margin: 7px 0 0; color: #475467; font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.login-card { padding: 16px 15px 15px; border: 1px solid #dbe2ee; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0, 32, 96, .05); }
.login-error { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px; padding: 10px 11px; border: 1px solid #f3c4c0; border-radius: 10px; background: #fef4f3; color: #912018; font-size: 12px; line-height: 1.5; }
.login-error svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: #b42318; stroke-width: 1.5; stroke-linecap: round; }
.login-field { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.login-field + .login-field { margin-top: 13px; }
.login-field > span:first-child { padding-left: 2px; }
.login-input-shell { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 11px; border: 1px solid #c6d0e0; border-radius: 10px; background: white; transition: border-color .12s ease, box-shadow .12s ease; }
.login-input-shell:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 32, 96, .09); }
.login-input-shell > svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: #8494ab; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.login-input-shell input { min-width: 0; flex: 1 1 auto; border: 0; outline: 0; padding: 0; color: var(--ink); background: transparent; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.login-card.invalid .login-field:nth-of-type(2) .login-input-shell { border-color: #d3423a; box-shadow: 0 0 0 3px rgba(180, 35, 24, .10); }
.toggle-password { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; padding: 0; color: #8494ab; background: transparent; cursor: pointer; }
.toggle-password:hover { color: var(--navy); background: var(--pale); }
.toggle-password svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.login-button { width: 100%; height: 40px; margin-top: 15px; border: 0; border-radius: 10px; color: white; background: var(--navy); box-shadow: 0 2px 8px rgba(0, 32, 96, .18); font-size: 13px; font-weight: 600; cursor: pointer; }
.login-button:disabled { opacity: .58; cursor: wait; }
.login-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid #d6e0f0; border-radius: 10px; color: #34435e; background: var(--pale); font-size: 11px; line-height: 1.5; }
.login-note svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; }
.login-help { margin: -4px 0 0; color: var(--faint); font-size: 11px; line-height: 1.5; text-align: center; }
.login-help span { color: #0b4ea2; }

/* --- browser setup ------------------------------------------------------ */
/* The public URL explains how to install the add-in; it is not a second way
   to use Deck Studio. Keeping this surface separate from the sign-in screen
   makes that boundary visible before somebody tries their credentials. */
.browser-setup {
  width: 100%; max-width: 560px; flex: 1 1 auto; min-height: 0;
  display: none; align-self: center; flex-direction: column;
  justify-content: center; gap: 18px; overflow-y: auto; padding: 24px 4px 8px;
}
body.browser-host .browser-setup { display: flex; }
body.browser-host .brand-header { display: none; }
.browser-setup-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.browser-setup-intro h2 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.browser-setup-intro p { margin: 7px 0 0; color: #475467; font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.setup-card { padding: 16px 15px; border: 1px solid #dbe2ee; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0, 32, 96, .05); }
.setup-label { margin: 0 0 11px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.setup-steps { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.setup-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; align-items: start; padding: 12px 0; }
.setup-steps li:first-child { padding-top: 0; }
.setup-steps li:last-child { padding-bottom: 0; }
.setup-steps li + li { border-top: 1px solid #edf0f5; }
.setup-number { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.setup-steps strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4; }
.setup-steps p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.setup-download { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border-radius: 10px; padding: 8px 14px; color: white; background: var(--navy); box-shadow: 0 2px 8px rgba(0, 32, 96, .18); text-decoration: none; }
.setup-download:hover { background: var(--navy-deep); }
.setup-download:focus-visible { outline: 3px solid rgba(0, 32, 96, .20); outline-offset: 2px; }
.setup-download svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.setup-download strong { font-size: 13px; font-weight: 600; line-height: 1.35; }
.access-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #d6e0f0; border-radius: 10px; color: #34435e; background: var(--pale); }
.access-note svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.access-note div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.access-note strong { font-size: 12px; font-weight: 600; line-height: 1.45; }
.access-note span { color: var(--muted); font-size: 11px; line-height: 1.5; }

/* --- chats -------------------------------------------------------------- */
.conversation-panel {
  position: absolute; z-index: 4; inset: 10px 12px auto;
  max-height: min(440px, 74%); display: flex; flex-direction: column;
  padding: 13px 12px 11px; border: 1px solid var(--line); border-radius: 12px;
  background: white;
  box-shadow: 0 14px 28px rgba(0, 32, 96, .13);
}
.conversation-panel-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; }
.conversation-panel-heading > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conversation-panel-heading strong { color: var(--navy); font-size: 13px; font-weight: 600; }
.conversation-panel-heading span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-panel-heading button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; padding: 0; color: var(--muted); background: transparent; cursor: pointer; }
.conversation-panel-heading button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.conversation-panel-heading button:hover { color: var(--ink); background: var(--pale); }
.conversation-list { min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.conversation-empty { margin: 10px 2px; color: var(--muted); font-size: 12px; }
.conversation-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; border-radius: 10px; padding: 11px; color: var(--ink-2); background: transparent; text-align: left; cursor: pointer; }
.conversation-item:hover { background: #f1f4f9; }
.conversation-item.active { background: var(--pale); }
.conversation-item.active .conversation-title { color: var(--navy); font-weight: 600; }
.conversation-item-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conversation-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; }
.conversation-outcome { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-outcome.discarded { color: var(--warn); }
.conversation-time { color: #8a94a4; font-size: 11px; white-space: nowrap; }
.conversation-privacy { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px 11px; border: 1px solid #e7ebf2; border-radius: 9px; background: #f6f8fb; color: var(--muted); font-size: 11px; line-height: 1.5; }
.conversation-privacy svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; fill: none; stroke: #8a94a4; stroke-width: 1.5; stroke-linecap: round; }
.sign-out-button { align-self: flex-end; margin-top: 8px; border: 0; border-radius: 7px; padding: 5px 8px; color: var(--danger); background: transparent; font-size: 11px; cursor: pointer; }
.sign-out-button:hover { color: #912018; background: #fef3f2; }
main.chats-open > :not(#conversation-panel) { opacity: .34; pointer-events: none; }

/* --- transcript --------------------------------------------------------- */
/* A conversation grows upward from the composer, so the newest thing sits at
   the bottom and history scrolls away above it. */
.messages {
  flex: 1 1 auto; min-height: 120px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 13px;
  overflow-y: auto; margin: 0 -12px; padding: 14px 12px;
  scrollbar-width: thin; scrollbar-color: #c3cbd9 transparent;
}
.messages::-webkit-scrollbar { width: 6px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb { border-radius: 999px; background: #c3cbd9; }
.message { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.message.user { align-items: flex-end; }
.bubble { max-width: 88%; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; }
.assistant .bubble { width: 100%; max-width: 100%; color: var(--ink); }
.bubble-text { display: block; }
.user .bubble { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; color: white; background: var(--navy); border-radius: 13px 5px 13px 13px; white-space: pre-wrap; }
.system { flex: 0 0 auto; display: grid; grid-template-columns: 15px 1fr; gap: 9px; align-items: start; font-size: 11px; line-height: 1.5; color: var(--muted); }
.system + .system { margin-top: -7px; }
.system svg { width: 13px; height: 13px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.system.done { color: var(--muted); }
.system.done svg { stroke: var(--success); stroke-width: 1.8; }

/* Time and copy sit under the message, not on it, and stay quiet until it is
   hovered. Copy is on the assistant's output only: a control for words you
   typed yourself is a control for text you already have. */
.message-footer { display: flex; align-items: center; gap: 6px; color: var(--faint); opacity: .55; transition: opacity .12s ease; }
.message:hover .message-footer, .message-footer:focus-within { opacity: 1; }
.message-time { font-size: 11px; }
.copy-message { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; padding: 0; color: inherit; background: transparent; cursor: pointer; }
.copy-message:hover { color: var(--navy); background: var(--pale); }
.copy-message svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.copy-message.copied { color: var(--success); }
.copy-message.copied svg { stroke-width: 2; }

.markdown p { margin: 0 0 9px; }
.markdown p:last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin: 11px 0 6px; color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.4; }
.markdown h1:first-child, .markdown h2:first-child, .markdown h3:first-child { margin-top: 0; }
.markdown ul, .markdown ol { margin: 7px 0 9px; padding-left: 20px; }
.markdown li { margin: 4px 0; }
.markdown li > p { margin: 0; }
.markdown blockquote { margin: 8px 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--ink-2); }
.markdown code { border-radius: 4px; padding: 1px 4px; background: #eef1f5; color: var(--ink-2); font-family: var(--mono); font-size: 11px; }
.markdown pre { max-width: 100%; overflow-x: auto; margin: 8px 0; border-radius: 8px; padding: 10px; background: #172033; color: #f8fafc; }
.markdown pre code { padding: 0; background: transparent; color: inherit; }
.markdown a { color: #0b4ea2; text-decoration: underline; text-underline-offset: 2px; }
.markdown hr { height: 1px; margin: 10px 0; border: 0; background: var(--line); }
.markdown table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 11px; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; vertical-align: top; }
.markdown th { background: var(--pale); color: var(--navy); }

/* Attachments inside a sent bubble. These rules were dropped when the sheet
   was rewritten while the client kept emitting the classes, so the icon
   rendered at its natural size and the name ran into the file size. */
.bubble-files { display: flex; flex-wrap: wrap; gap: 4px; }
.bubble-file { display: flex; align-items: center; gap: 5px; max-width: 100%; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; padding: 3px 7px; background: rgba(255, 255, 255, .13); font-size: 11px; line-height: 1.3; }
.bubble-file-icon { flex: 0 0 auto; display: grid; place-items: center; opacity: .8; }
.bubble-file-icon svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bubble-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.bubble-file-size { flex: 0 0 auto; opacity: .62; }
.bubble-component { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .16); }
.bubble-component .bubble-file-icon { opacity: 1; }
.bubble-component .bubble-file-name { max-width: 168px; }

/* --- what the model is doing -------------------------------------------- */
.activity { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; padding-left: 3px; }
.activity-step { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 9px; align-items: start; font-size: 12px; line-height: 1.45; color: #475467; }
.activity-step svg { width: 13px; height: 13px; margin-top: 2px; fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.activity-step.failed { color: #9b3a2b; }
.activity-step.failed svg { stroke: #9b3a2b; }
/* A grid cell will not shrink below its content unless told to, so a long
   design name or file path pushes the step out of the pane without this. */
.activity-step-label { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.activity-detail { display: block; margin-top: 2px; font-size: 11px; color: #7d8798; }

/* The label is what changes, so the motion trails it. Indented to the
   activity trail's text column so nothing shifts when the dots are removed. */
.loading-indicator { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 2px 3px 2px 28px; color: var(--muted); font-size: 12px; }
.loading-label { min-width: 0; }
.loading-dots { display: inline-flex; align-items: flex-end; gap: 3px; height: 8px; }
.loading-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); animation: loading-bounce 1.1s ease-in-out infinite; }
.loading-dot:nth-child(2) { background: #f0a670; animation-delay: .14s; }
.loading-dot:nth-child(3) { background: #f6cba7; animation-delay: .28s; }
.loading-indicator.completed .loading-dots { display: none; }

@keyframes loading-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-dot { animation: none; opacity: .7; }
  .poll-option, .message-footer { transition: none; }
}

/* --- cards in the transcript --------------------------------------------
   A card never shrinks. Its buttons are the point of it and they sit at its
   foot, so if the browser is allowed to squeeze it the primary action is the
   first thing clipped. History is what gives way, never the controls. */
.card { flex: 0 0 auto; border: 1px solid #dbe2ee; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0, 32, 96, .05); }
.card-head { display: flex; align-items: center; gap: 7px; padding: 11px 12px 3px; }
.card-head-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--navy); }
.card-head-rule { flex: 1 1 auto; height: 1px; background: #eef1f6; }
.card-head-count { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--muted); }
.card-head svg { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- storyline ----------------------------------------------------------- */
.storyline { overflow: hidden; }
.storyline .card-head { border-bottom: 1px solid #eaeff6; padding-bottom: 10px; }
.storyline ol { margin: 0; padding: 6px 0; list-style: none; display: flex; flex-direction: column; }
.storyline li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; padding: 8px 12px; align-items: start; }
.storyline li .storyline-mark { margin-top: -1px; }
.storyline li.pending { opacity: .5; }
.storyline li.active { background: #fdf6f0; }
.storyline-mark { display: grid; place-items: center; height: 18px; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.storyline-mark svg { width: 13px; height: 13px; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.storyline li.done .storyline-mark { color: var(--success); }
.storyline li.active .storyline-mark { color: var(--orange); }
.storyline-line { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.storyline-working { display: inline-flex; gap: 3px; align-items: flex-end; height: 8px; }
.storyline-working .loading-dot { width: 3.5px; height: 3.5px; }
.storyline-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.storyline-title span { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.storyline-title small { font-size: 11px; color: #7d8798; }

/* --- the question, and the record of it ---------------------------------- */
.poll { padding: 13px 13px 12px; }
.poll [hidden] { display: none !important; }
.poll .card-head { padding: 0 0 12px; }
.poll-prompt { margin: 0 0 3px; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.poll-hint { margin: 0 0 10px; color: var(--muted); font-size: 11px; }
.poll-question { margin: 0; padding: 0; border: 0; background: transparent; }
.poll-options { display: flex; flex-direction: column; gap: 6px; }
/* The options are appended straight into the question with no wrapper, so a
   gap on a container that does not exist did nothing. */
.poll-option + .poll-option { margin-top: 6px; }
.poll-option { position: relative; display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 9px; align-items: start; padding: 9px 11px; border: 1px solid #e0e5ed; border-radius: 10px; background: #fbfcfe; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.poll-option:hover { border-color: #aabbd7; background: #f6f8fc; }
.poll-option.selected { border: 1.5px solid #7f9bc8; background: var(--pale); padding: 8.5px 10.5px; }
.poll-option.other { border-style: dashed; background: white; }
.poll-option.other strong { color: #475467; font-weight: 500; }
.poll-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.poll-control { box-sizing: border-box; width: 17px; height: 17px; margin-top: 1px; display: grid; place-items: center; border: 1.5px solid #aeb8c8; background: white; }
.poll-control.radio { border-radius: 50%; }
.poll-control.checkbox { border-radius: 4px; }
.poll-option.selected .poll-control { border-color: var(--navy); }
.poll-option.selected .poll-control.radio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.poll-option.selected .poll-control.checkbox { background: var(--navy); }
.poll-option.selected .poll-control.checkbox::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.poll-option > span:not(.poll-control) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.poll-option strong { color: #17233a; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.poll-option small { color: #5a6474; font-size: 11px; line-height: 1.5; }
.poll-own { width: 100%; margin: 7px 0 1px; padding: 9px 10px; border: 1px solid #bdc9dc; border-radius: 8px; color: var(--ink); background: white; font-family: inherit; font-size: 12.5px; }
.poll-own:focus { border-color: var(--navy); outline: 2px solid rgba(0, 32, 96, .12); outline-offset: 1px; }
.poll-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.poll-navigation button { border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 500; cursor: pointer; }
.poll-back { min-width: 68px; border: 1px solid #ccd5e3; color: var(--ink-2); background: white; }
.poll-back:hover { background: #f4f6f9; }
.poll-next { min-width: 88px; border: 1px solid var(--navy); color: white; background: var(--navy); font-weight: 600; }
.poll-navigation button:disabled { opacity: .5; cursor: default; }
.poll-error { margin: 8px 0 -2px; color: #a3341f; font-size: 11px; }

.answered .card-head-label { color: var(--success); }
.answered .card-head svg { stroke: var(--success); stroke-width: 2; }
.answered-list { margin: 0; padding: 0 13px 10px; list-style: none; }
.answered-item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; padding: 8px 0; }
.answered-item + .answered-item { border-top: 1px solid #eef1f6; }
.answered-index { font-family: var(--mono); font-size: 10px; color: #a4aebe; padding-top: 3px; }
.answered-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.answered-question { font-size: 11px; line-height: 1.45; color: #7d8798; }
.answered-answer { font-size: 12.5px; line-height: 1.45; color: var(--ink); }

/* --- review changes ------------------------------------------------------ */
.change-actions { flex: 0 1 auto; min-height: 0; max-height: min(500px, 60%); display: flex; flex-direction: column; margin: 0 0 12px; border: 1px solid #b9c9e4; border-radius: 13px; background: white; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 32, 96, .08); }
.change-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 13px; background: #f3f7fd; border-bottom: 1px solid #e2eaf5; }
.change-heading div { display: flex; flex-direction: column; gap: 2px; }
.change-heading strong { color: var(--navy); font-size: 13px; font-weight: 600; }
.change-heading span { color: var(--muted); font-size: 11px; }
/* Quiet, because it is the destructive one. Apply keeps the weight. */
.change-heading button { border: 0; border-radius: 7px; padding: 5px 8px; color: #7d8798; background: transparent; font-size: 11px; font-weight: 500; cursor: pointer; }
.change-heading button:hover { color: var(--ink-2); background: #e7eef8; }

/* The list scrolls inside the card, so the heading and Apply are on screen
   however many changes there are. */
.change-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.change-group { display: flex; align-items: center; gap: 7px; padding: 11px 13px 5px; }
.change-group span { font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--muted); }
.change-group i { flex: 1 1 auto; height: 1px; background: #eaeff6; }
.change-item { display: flex; align-items: center; gap: 11px; padding: 9px 13px; }
.change-item-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.change-item-title { font-size: 12.5px; line-height: 1.4; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change-item.edit .change-item-title { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.change-item-design { font-size: 11px; color: #7d8798; }
.slide-thumb { flex: 0 0 auto; width: 56px; height: 42px; border-radius: 4px; border: 1px solid #cfd8e6; background: white; overflow: hidden; position: relative; }
.slide-thumb svg { display: block; width: 100%; height: 100%; }
.slide-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide-thumb-number { position: absolute; right: 0; bottom: 0; padding: 1px 4px; border-radius: 3px 0 0 0; background: var(--pale); color: #46536b; font-family: var(--mono); font-size: 9px; line-height: 1.3; }
.change-foot { flex: 0 0 auto; padding: 11px 13px 13px; border-top: 1px solid #eaeff6; background: #fbfcfe; }
.change-progress { display: block; min-height: 15px; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.change-progress:empty { display: none; }
.change-actions .primary { width: 100%; border: 0; border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.change-actions .primary:disabled { opacity: .5; cursor: wait; }
.change-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.primary { color: white; background: var(--navy); }

/* --- something went wrong ------------------------------------------------ */
.failure { flex: 0 0 auto; border: 1px solid #f0c4bc; border-radius: 12px; background: #fdf4f2; padding: 14px 13px 13px; }
.failure-head { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.failure-head svg { width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--danger); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.failure-title { font-size: 13px; font-weight: 600; color: #912018; }
.failure-body { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #7a2820; }
.failure button { display: block; margin-top: 12px; margin-left: auto; border: 0; border-radius: 9px; padding: 9px 16px; font-size: 12px; font-weight: 600; color: white; background: var(--danger); cursor: pointer; }

/* --- nothing here yet ---------------------------------------------------- */
.empty-state { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 20px 4px; }
.empty-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.empty-mark { width: 52px; height: 52px; border-radius: 15px; background: white; border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 32, 96, .07); }
.empty-mark img { height: 30px; width: auto; display: block; }
.empty-intro h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.empty-intro p { margin: 0; font-size: 13px; line-height: 1.55; color: #475467; text-wrap: pretty; }
.empty-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding-left: 2px; }
.empty-starters { display: flex; flex-direction: column; gap: 7px; }
.empty-starter { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: white; text-align: left; cursor: pointer; }
.empty-starter:hover { border-color: #aabbd7; background: #fbfcfe; }
.empty-starter i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: var(--pale); display: grid; place-items: center; }
.empty-starter svg { width: 14px; height: 14px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty-starter span { min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.empty-canvas { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: 10px; background: var(--pale); border: 1px solid #d6e0f0; font-size: 11px; line-height: 1.5; color: #34435e; }
.empty-canvas svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; }

/* --- composer ------------------------------------------------------------ */
#composer { flex: 0 0 auto; background: #f6f8fb; }
#files { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.composer-shell { padding: 8px 9px 7px; background: white; border: 1px solid #c6d0e0; border-radius: 13px; box-shadow: 0 3px 12px rgba(0, 32, 96, .06); }
.composer-shell:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 32, 96, .09), 0 3px 12px rgba(0, 32, 96, .06); }
.composer-shell.disabled { border-color: var(--line); background: #f1f3f7; box-shadow: none; }
.composer-shell.disabled textarea { color: #a9b0bd; }
.file-list { display: none; flex-wrap: wrap; gap: 5px; padding: 0 0 7px; }
.file-list:not(:empty) { display: flex; }
.file-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; max-width: 100%; border-radius: 8px; padding: 5px 5px 5px 8px; background: #eef1f5; color: #4c5668; font-size: 11px; line-height: 1.3; }
.file-pill svg { flex: 0 0 auto; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.file-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 118px; }
.file-pill-meta { flex: 0 0 auto; color: #8a94a4; }
/* A shape selected in PowerPoint, not a file from disk. It is picked up on its
   own, so this pill is the only place it shows before you send. */
.component-pill { background: #e8eef8; color: #243652; }
.component-pill svg { stroke: var(--navy); opacity: 1; }
.component-pill .file-pill-name { max-width: 168px; }
.component-pill .file-pill-meta { color: var(--muted); }
.file-remove { flex: 0 0 auto; width: 17px; height: 17px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; background: rgba(16, 24, 40, .06); color: var(--muted); cursor: pointer; }
.file-remove svg { width: 9px; height: 9px; stroke-width: 2; opacity: 1; }
.file-remove:hover { background: #dce3ed; color: var(--ink); }
.component-pill .file-remove { background: rgba(0, 32, 96, .07); color: #46536b; }
textarea { display: block; resize: none; overflow-y: hidden; border: 0; outline: 0; min-height: 19px; max-height: 96px; width: 100%; padding: 2px 3px 7px; color: var(--ink); background: transparent; font-size: 13px; line-height: 19px; }
textarea::placeholder { color: var(--faint); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; }
.attachment { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--navy); cursor: pointer; }
.attachment:hover { background: var(--pale); }
.attachment.disabled { color: #b3bac6; cursor: default; pointer-events: none; }
.attachment svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.send { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; padding: 0; background: var(--orange); color: white; cursor: pointer; }
.send svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.send:disabled { background: #f0f2f6; color: #b3bac6; cursor: default; }

@media (max-height: 650px) {
  .brand-header { padding-top: 8px; padding-bottom: 8px; }
  .login-screen { justify-content: flex-start; gap: 14px; }
  .browser-setup { justify-content: flex-start; gap: 14px; }
  .empty-state { gap: 16px; }
}