/*
 * OpenGoose share viewer — styling.
 *
 * Brand-aligned monochrome "ink" palette with automatic light/dark via
 * prefers-color-scheme. Optimised for comfortable long-form reading of a
 * shared conversation. No build step: plain CSS with custom properties.
 *
 * Type: Lato (the OpenGoose brand face), self-hosted as woff under
 * assets/fonts/ so it loads even where Google Fonts is blocked. Latin only —
 * CJK and other scripts fall back to the system stack below.
 */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-400.woff") format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/lato-600.woff") format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-700.woff") format("woff");
}

:root {
  --og-bg: #ffffff;
  --og-bg-subtle: #f6f6f7;
  --og-bg-elevated: #ffffff;
  --og-border: #e6e6e8;
  --og-text: #1a1a1a;
  --og-text-secondary: #57575c;
  --og-text-tertiary: #8a8a90;
  --og-user-bubble: #ecf2ff;
  --og-user-bubble-text: #16213a;
  --og-accent: #1a1a1a;
  --og-border-faint: rgba(0, 0, 0, 0.08);   /* desktop --border-tertiary */
  --og-link: #205EA6;                       /* Flexoki blue — the link voice */
  --og-success-text: #16803C;               /* desktop --success-text */
  --og-danger-text: #B91C1C;                /* desktop --danger-text */
  --og-radius: 16px;
  --og-radius-sm: 10px;
  --og-maxw: 760px;
  --og-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --og-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --og-bg: #0f0f10;
    --og-bg-subtle: #17171a;
    --og-bg-elevated: #1b1b1f;
    --og-border: #2a2a2f;
    --og-text: #f2f2f3;
    --og-text-secondary: #b4b4ba;
    --og-text-tertiary: #8a8a90;
    --og-user-bubble: #1e2740;
    --og-user-bubble-text: #dfe7ff;
    --og-accent: #f2f2f3;
    --og-border-faint: rgba(255, 255, 255, 0.08);
    --og-link: #4385BE;
    --og-success-text: #4ADE80;
    --og-danger-text: #F87171;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--og-bg);
  color: var(--og-text);
  font-family: var(--og-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.og-shell { max-width: var(--og-maxw); margin: 0 auto; padding: 24px 20px 96px; }

/* ---- Top disclaimer (AI provenance, the DeepSeek-share placement) ---- */
.og-top-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 0 0;
  font-size: 13px;
  color: var(--og-text-tertiary);
  text-align: center;
}
.og-top-disclaimer-icon { display: inline-flex; flex: none; }

/* ---- Header ---- */
.og-header { padding: 28px 0 20px; border-bottom: 1px solid var(--og-border); margin-bottom: 28px; }
.og-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; }
.og-meta { display: flex; align-items: center; gap: 10px; color: var(--og-text-secondary); font-size: 14px; flex-wrap: wrap; }
.og-author { display: inline-flex; align-items: center; gap: 8px; }
.og-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--og-bg-subtle); }
.og-dot { color: var(--og-text-tertiary); }
.og-globe { display: inline-flex; flex: none; }

/* ---- Messages ---- */
.og-thread { display: flex; flex-direction: column; gap: 26px; }
.og-msg { display: flex; flex-direction: column; }
.og-msg-role { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--og-text-tertiary); margin-bottom: 8px; }
.og-msg.user .og-bubble {
  align-self: flex-end;
  background: var(--og-user-bubble);
  color: var(--og-user-bubble-text);
  border-radius: var(--og-radius);
  padding: 12px 16px;
  max-width: 85%;
}
.og-msg.user { align-items: flex-end; }
.og-msg.assistant .og-bubble { max-width: 100%; }

/* ---- Markdown content ---- */
.og-content { overflow-wrap: anywhere; }
.og-content > :first-child { margin-top: 0; }
.og-content > :last-child { margin-bottom: 0; }
.og-content p { margin: 0 0 14px; }
.og-content h1, .og-content h2, .og-content h3 { line-height: 1.3; margin: 22px 0 12px; font-weight: 700; }
.og-content h1 { font-size: 22px; } .og-content h2 { font-size: 19px; } .og-content h3 { font-size: 17px; }
.og-content ul, .og-content ol { margin: 0 0 14px; padding-left: 24px; }
.og-content li { margin: 4px 0; }
.og-content a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.og-content blockquote { margin: 0 0 14px; padding: 2px 16px; border-left: 3px solid var(--og-border); color: var(--og-text-secondary); }
.og-content code { font-family: var(--og-mono); font-size: 0.9em; background: var(--og-bg-subtle); padding: 2px 6px; border-radius: 6px; }
.og-content pre { background: var(--og-bg-subtle); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); padding: 14px 16px; overflow-x: auto; margin: 0 0 14px; }
.og-content pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.5; }
.og-content table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 14px; display: block; overflow-x: auto; }
.og-content th, .og-content td { border: 1px solid var(--og-border); padding: 8px 10px; text-align: left; }
.og-content img { max-width: 100%; border-radius: var(--og-radius-sm); }

/* ---- Attachments ---- */
.og-attachments { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.og-attach-img-link { display: block; max-width: 100%; line-height: 0; }
.og-attach-img { max-width: 100%; border-radius: var(--og-radius-sm); border: 1px solid var(--og-border); display: block; }
.og-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--og-bg-elevated); border: 1px solid var(--og-border); border-radius: var(--og-radius-sm); text-decoration: none; color: inherit; }
.og-file:hover { border-color: var(--og-text-tertiary); }
.og-file-icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--og-bg-subtle); border-radius: 8px; font-size: 18px; flex: none; }
.og-file-meta { min-width: 0; }
.og-file-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-file-sub { color: var(--og-text-tertiary); font-size: 12px; }

/* ---- States ---- */
.og-state { text-align: center; padding: 80px 20px; color: var(--og-text-secondary); }
.og-state h2 { color: var(--og-text); font-size: 20px; margin: 16px 0 8px; }
.og-state p { margin: 0 auto; max-width: 420px; }
.og-spinner { width: 28px; height: 28px; border: 3px solid var(--og-border); border-top-color: var(--og-accent); border-radius: 50%; animation: og-spin 0.8s linear infinite; margin: 0 auto; }
@keyframes og-spin { to { transform: rotate(360deg); } }

/* ---- Model Committee ----
 *
 * The desktop CommitteeView compare row, ported: equal-width columns
 * (`flex: 1 1 0`) that share the row when they fit — no scroll, no fades —
 * and overflow into horizontal scroll past the 260px readability floor,
 * with 32px edge fades + floating paddles tracking the scroll position
 * (attachEdgeFades in app.js).
 */
.og-committee-byline { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--og-text-secondary); }
.og-committee-glyph { display: inline-flex; align-items: center; color: var(--og-text-secondary); }
.og-committee-count { color: var(--og-text-tertiary); font-weight: 500; }
.og-committee-count::before { content: "·"; margin-right: 8px; color: var(--og-text-tertiary); }

.og-committee-colwrap { position: relative; margin-top: 2px; }
.og-committee-cols {
  display: flex;
  align-items: stretch;      /* equal heights: an uneven row reads as a grid */
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 8px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.og-committee-col {
  flex: 1 1 0;               /* share the row equally… */
  min-width: 260px;          /* …down to the desktop readability floor */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--og-bg-elevated);
  border: 1px solid var(--og-border-faint);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Column header — the desktop bar: one compact 6×11 row, logo + a small,
   light model name left (metadata, not the focus), terminal status right. */
.og-committee-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 11px;
  border-bottom: 1px solid var(--og-border-faint);
}
.og-committee-col-head-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.og-committee-col-logo, .og-committee-col-logo svg { width: 20px; height: 20px; }
.og-committee-status { flex: none; font-size: 12px; font-weight: 500; }
.og-status-complete { color: var(--og-success-text); }
.og-status-error { color: var(--og-danger-text); }
.og-status-stopped { color: var(--og-text-tertiary); }

/* Edge fades: page-background gradients marking a clipped side. */
.og-fade { position: absolute; top: 0; bottom: 8px; width: 32px; pointer-events: none; z-index: 2; }
.og-fade-left { left: 0; background: linear-gradient(to right, var(--og-bg), transparent); }
.og-fade-right { right: 0; background: linear-gradient(to left, var(--og-bg), transparent); }

/* Carousel paddle: floating disc above the fade — the explicit "more columns
   this way" signal. Popover surface language: white, hairline, soft shadow. */
.og-paddle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--og-bg-elevated);
  border: 1px solid var(--og-border-faint);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), 0 0.5px 2px rgba(0, 0, 0, 0.06);
  color: var(--og-text-secondary);
  cursor: pointer;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.og-paddle:hover { color: var(--og-text); }
.og-paddle-left { left: 6px; }
.og-paddle-right { right: 6px; }
.og-committee-model-name { font-weight: 500; font-size: 12.5px; color: var(--og-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Column body — content-height columns equalised by the row's stretch; a
   verbose model scrolls internally past the desktop's 500px cap instead of
   ballooning the whole row. */
.og-committee-col-body { flex: 1; min-height: 0; max-height: 500px; overflow-y: auto; padding: 14px 16px; font-size: 14.5px; }
.og-committee-col-body .og-content p { margin: 0 0 10px; }
.og-committee-note { color: var(--og-text-tertiary); font-style: italic; font-size: 13.5px; }

/* Official provider brand logo (inline SVG). Brand-colour logos show their own
   colours; mono logos inherit currentColor and adapt to light/dark. */
.og-provider-logo { flex: none; display: inline-flex; width: 22px; height: 22px; color: var(--og-text); }
.og-provider-logo svg { width: 22px; height: 22px; display: block; }

/* Provider monogram chip — fallback when no brand logo is available. */
.og-provider-chip {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--og-bg);
  border: 1px solid var(--og-border);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--og-text-secondary);
}

/* Assistant byline: model logo + name, sized as a real title (not a caption),
   anchoring the hover profile card. */
.og-assistant-role {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--og-text-secondary);
  width: fit-content;
  cursor: default;
}
.og-role-logo { width: 20px; height: 20px; }
.og-role-logo svg { width: 20px; height: 20px; }

/* Model profile card (the desktop ModelProfileCard: header + catalog
   description). Shown/hidden by attachHoverCard's grace timers (.og-open) —
   the 250ms hide grace is what lets the mouse cross the gap onto the card
   and click its links; a tap toggles it on touch devices. */
.og-model-card {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 300px;
  max-width: 82vw;
  padding: 14px 16px;
  background: var(--og-bg-elevated);
  border: 1px solid var(--og-border-faint);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10), 0 1px 6px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
  cursor: default;
  font-weight: 400;   /* reset the byline's 600 for the card body */
}
.og-model-card.og-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.og-model-card-head { display: flex; align-items: center; gap: 12px; }
/* Large logo on a calm neutral plate, so brand colors never clash. */
.og-model-card-plate { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--og-bg-subtle); border-radius: 11px; }
.og-model-card-logo { width: 28px; height: 28px; }
.og-model-card-logo svg { width: 28px; height: 28px; }
.og-model-card-text { min-width: 0; }
.og-model-card-name { font-size: 15px; font-weight: 600; color: var(--og-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-model-card-provider { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--og-link); text-decoration: none; }

/* Catalog description under the header (12px secondary, links in link-blue). */
.og-model-card-desc { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--og-text-secondary); }
.og-model-card-desc a { color: var(--og-link); text-decoration: none; }
.og-model-card-desc a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Synthesized answer — the aggregated reply, set apart as the panel's
   conclusion (same surface language as the columns: faint hairline + soft
   shadow on the elevated background). */
.og-committee-synthesis { margin-top: 18px; padding: 16px 18px; background: var(--og-bg-elevated); border: 1px solid var(--og-border-faint); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.og-committee-synthesis-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--og-text-secondary); }
.og-committee-synthesis-label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.og-committee-synth-by { font-size: 12px; color: var(--og-text-tertiary); font-weight: 500; }
.og-committee-synth-by::before { content: "·"; margin-right: 6px; }

/* ---- Footer ----
 *
 * Mirrors the mobile share-card footer (iOS WebAssets/share.html — the "long
 * image" export), so the page closes the same way the shared picture does:
 *
 *   ─────────────────────────────  hairline
 *   [goose]  OpenGoose.AI   [QR]   ← lockup left, scan-to-try QR right
 *            scan hint
 */
.og-footer { margin-top: 48px; }

/* Brand bar: the share-card row — lockup left, QR right, hairline on top. */
.og-footer-bar { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--og-border); }

/* Brand lockup: the goose mark sits BARE — no plate, no border — at the full
   height of the two text lines (share-card layout), wordmark 15px/700. */
.og-brand { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; text-decoration: none; }
.og-brand-logo { width: 40px; height: 40px; flex: none; object-fit: contain; }
.og-brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; min-width: 0; }
.og-brand-name { font-weight: 700; font-size: 15px; color: var(--og-text); }
.og-brand-sub { font-size: 12px; color: var(--og-text-tertiary); }

/* Scan-to-try QR: always dark-on-white so it scans on any theme. */
.og-qr { flex: none; display: block; }
.og-qr svg { display: block; width: 72px; height: 72px; border-radius: 8px; background: #fff; padding: 4px; box-shadow: inset 0 0 0 1px var(--og-border); }

/* On dark themes the mark gets a small white plate (like the QR) so the ink
   drawing stays legible; on light it sits bare on the page. */
@media (prefers-color-scheme: dark) {
  .og-brand-logo { background: #fff; border-radius: 9px; padding: 3px; }
}

/* ---- Syntax highlighting (OGSyntax `hl-*` tokens) ----
 *
 * The Flexoki palette the desktop app uses (theme/global.css), so a code block
 * looks the same shared as it does in the app. Light values first, dark under
 * the same media query the rest of the page uses.
 */
:root {
  --syntax-comment: #878580;
  --syntax-string: #66800B;
  --syntax-keyword: #5E409D;
  --syntax-type: #24837B;
  --syntax-number: #BC5215;
  --syntax-function: #205EA6;
  --syntax-meta: #A02F6F;
  --syntax-constant: #BC5215;
  --syntax-tag: #66800B;
  --syntax-attr: #205EA6;
  --syntax-operator: #AF3029;
}
@media (prefers-color-scheme: dark) {
  :root {
    --syntax-comment: #878580;
    --syntax-string: #879A39;
    --syntax-keyword: #8B7EC8;
    --syntax-type: #3AA99F;
    --syntax-number: #DA702C;
    --syntax-function: #4385BE;
    --syntax-meta: #CE5D97;
    --syntax-constant: #DA702C;
    --syntax-tag: #879A39;
    --syntax-attr: #4385BE;
    --syntax-operator: #D14D41;
  }
}
.hl-comment  { color: var(--syntax-comment); }
.hl-string   { color: var(--syntax-string); }
.hl-keyword  { color: var(--syntax-keyword); }
.hl-type     { color: var(--syntax-type); }
.hl-number   { color: var(--syntax-number); }
.hl-function { color: var(--syntax-function); }
.hl-meta     { color: var(--syntax-meta); }
.hl-constant { color: var(--syntax-constant); }
.hl-tag      { color: var(--syntax-tag); }
.hl-attr     { color: var(--syntax-attr); }
.hl-operator { color: var(--syntax-operator); }

/* KaTeX overflow guard for long display math. */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.og-content .katex { font-size: 1.06em; }