/* ==========================================================================
   B1Xagi Official Document & Q/A Section Typography Standard
   Applies to Question & Answer sections, Produced Documents, Mobile,
   Music, Voice, Cartoon and Videos.
   ========================================================================== */

:root {
  /* Official Font Families */
  --font-doc-times: "Times New Roman", Times, "Liberation Serif", serif;
  --font-doc-calibri: Calibri, Candara, "Segoe UI", system-ui, sans-serif;
  --font-doc-arial: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-doc-garamond: Garamond, "Baskerville", "EB Garamond", Georgia, serif;
  --font-doc-georgia: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --font-doc-schoolbook: "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

  /* Default Active Document Font (house standard: Georgia) */
  --doc-official-font: var(--font-doc-georgia);

  /* On-screen metrics: A4 standard at 100% scale with 12px normal margin */
  --doc-body-size: 12px;
  --doc-body-size-mobile: 12px;
  --doc-question-title-size: 18px;
  --doc-question-title-size-mobile: 16px;
  --doc-h1-size: 15px;
  --doc-h2-size: 14px;
  --doc-h3-size: 13px;
  --doc-line-spacing: 1.5;
  --doc-a4-width: 210mm;
  --doc-a4-normal-margin: 12px;
  --doc-standard-margin: 12px;
}

/* Font Family Selection mappings — document/answer font only.
   UI chrome keeps its sans-serif --font-ui (see font-settings.css). */
:root[data-font-family="times"], :root[data-doc-font="times"] { --doc-official-font: var(--font-doc-times); }
:root[data-font-family="calibri"], :root[data-doc-font="calibri"], :root[data-font-family="humanist"] { --doc-official-font: var(--font-doc-calibri); }
:root[data-font-family="arial"], :root[data-doc-font="arial"], :root[data-font-family="classic"] { --doc-official-font: var(--font-doc-arial); }
:root[data-font-family="garamond"], :root[data-doc-font="garamond"] { --doc-official-font: var(--font-doc-garamond); }
:root[data-font-family="georgia"], :root[data-doc-font="georgia"] { --doc-official-font: var(--font-doc-georgia); }
:root[data-font-family="schoolbook"], :root[data-doc-font="schoolbook"] { --doc-official-font: var(--font-doc-schoolbook); }

/* ==========================================================================
   Question and Answer Section & Produced Documents
   ========================================================================== */

/* 1. Body Text & Paragraphs: 12px matching illustrations, code, etc. */
:root :is(#shell, body) :is(
  .message.user .message-body,
  .message.assistant .message-body,
  .result-card .message-body,
  .arena-card-body,
  .arena-question-text,
  .active-inquiry-bar,
  #chat-inquiry-preview,
  .qa-question-heading,
  .qa-question-text,
  .qa-bundle,
  .artifact-document,
  .artifact-content,
  .reading-surface,
  .reading-prose,
  .document-canvas,
  .rendered-document,
  .executive-print-sheet,
  .research-notebook-content,
  /* Music, Voice, Cartoon and Videos outputs */
  .voice-transcript,
  .script-viewer,
  .lyrics-preview,
  .studio-document,
  .storyboard-text,
  .cartoon-dialogue,
  .video-captions,
  .ds-character-preview
) {
  font-family: var(--doc-official-font) !important;
  font-size: var(--doc-body-size, 12px) !important;
  line-height: var(--doc-line-spacing, 1.5) !important;
  letter-spacing: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-kerning: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 2. Paragraphs & List Items within Q&A and Produced Documents */
:root :is(#shell, body) :is(
  .message-body,
  .qa-question-text,
  .artifact-document,
  .reading-prose,
  .storyboard-text,
  .voice-transcript,
  .lyrics-preview
) :is(p, li, blockquote, dd) {
  font-family: var(--doc-official-font) !important;
  font-size: var(--doc-body-size, 12px) !important;
  font-weight: 400 !important;
  line-height: var(--doc-line-spacing, 1.5) !important;
  margin-bottom: 0.85em !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

:root :is(#shell, body) :is(.message-body, .artifact-document) :is(td, th) {
  font-family: var(--doc-official-font) !important;
  font-size: var(--doc-body-size, 12px) !important;
  line-height: 1.4 !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

:root :is(#shell, body) :is(.message-body, .artifact-document) :is(pre, code, .code-line-code, .code-line-num) {
  font-size: var(--doc-body-size, 12px) !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

:root :is(#shell, body) :is(.message-body, .artifact-document) :is(p, li, blockquote) :is(span, a, em, strong, b, i, code) {
  font-size: var(--doc-body-size, 12px) !important;
  overflow-wrap: anywhere !important;
}

/* 3. Headings: Subordinate to Question Title (18px) */
:root :is(#shell, body) :is(
  .message-body,
  .artifact-document,
  .reading-prose,
  .rendered-document,
  .executive-print-sheet
) h1 {
  font-family: var(--doc-official-font) !important;
  font-size: var(--doc-h1-size, 15px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 1.1em 0 0.45em !important;
  color: inherit !important;
}

:root :is(#shell, body) :is(
  .message-body,
  .artifact-document,
  .reading-prose,
  .rendered-document,
  .executive-print-sheet
) h2 {
  font-family: var(--doc-official-font) !important;
  font-size: var(--doc-h2-size, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 1.05em 0 0.4em !important;
  color: inherit !important;
}

:root :is(#shell, body) :is(
  .message-body,
  .artifact-document,
  .reading-prose,
  .rendered-document,
  .executive-print-sheet
) :is(h3, h4, h5, h6) {
  font-family: var(--doc-official-font) !important;
  font-size: var(--doc-h3-size, 13px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0.95em 0 0.38em !important;
  color: inherit !important;
}

/* 4. Question Section Specific Styling — Highest Heading Hierarchy */
:root :is(#shell, body) :is(
  .qa-question-title,
  .qa-question-title :is(strong, b, span),
  .arena-question-text,
  #arena-inquiry-text
) {
  font-family: var(--doc-official-font) !important;
  font-size: var(--doc-question-title-size, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

.message.user {
  padding: 12px !important;
  margin-block: 10px !important;
  line-height: var(--doc-line-spacing, 1.5) !important;
  box-sizing: border-box !important;
}

.active-inquiry-bar {
  padding: 8px 12px !important;
  font-family: var(--doc-official-font) !important;
  box-sizing: border-box !important;
}

/* 5. Answer Window & Margins: A4 Page Format with Strict 12px Normal Margin */
:root :is(#shell, body) :is(
  .message.assistant.result-card,
  .arena-card.result-card,
  #messages .message.assistant,
  .artifact-document,
  .rendered-document,
  .executive-print-sheet,
  .print-document
) {
  width: 100% !important;
  max-width: min(var(--doc-a4-width, 210mm), 100%) !important;
  margin-inline: auto !important;
  padding: var(--doc-a4-normal-margin, 12px) !important;
  padding-right: var(--doc-a4-normal-margin, 12px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

:root :is(#shell, body) :is(
  .result-card .message-body,
  .message.assistant .message-body,
  .arena-card-body,
  .artifact-document,
  .message-answer-window .message-body
) {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 12px !important;
  font-size: var(--doc-body-size, 12px) !important;
  line-height: var(--doc-line-spacing, 1.5) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-wrap: anywhere !important;
}

:root[data-theme] .result-card :is(.message-answer-window, .arena-answer-window),
:root .message-answer-window,
:root .arena-answer-window {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  padding-right: 12px !important;
  overflow-x: hidden !important;
}

.artifact-document,
.rendered-document,
.executive-print-sheet,
.print-document {
  padding: var(--doc-a4-normal-margin, 12px) !important;
  padding-right: var(--doc-a4-normal-margin, 12px) !important;
  box-sizing: border-box !important;
}

/* 6. Mobile Responsiveness: A4 scaling down smoothly on phones with font 12 (12px) & 12px margin */
@media (max-width: 650px) {
  :root {
    --doc-body-size: 12px;
    --doc-body-size-mobile: 12px;
    --doc-question-title-size: 16px;
    --doc-question-title-size-mobile: 16px;
    --doc-h1-size: 14.5px;
    --doc-h2-size: 13.5px;
    --doc-h3-size: 12.5px;
  }
  :root :is(#shell, body) :is(
    .qa-question-title,
    .qa-question-title :is(strong, b, span),
    .arena-question-text,
    #arena-inquiry-text
  ) {
    font-size: var(--doc-question-title-size-mobile, 16px) !important;
    font-weight: 700 !important;
  }
  :root :is(#shell, body) :is(
    .message.user .message-body,
    .message.assistant .message-body,
    .result-card .message-body,
    .arena-card-body,
    .arena-question-text,
    .active-inquiry-bar,
    .artifact-document,
    .artifact-content,
    .reading-surface,
    .reading-prose,
    .voice-transcript,
    .script-viewer,
    .lyrics-preview,
    .storyboard-text,
    .cartoon-dialogue,
    .video-captions
  ) {
    font-size: var(--doc-body-size-mobile, 12px) !important;
    line-height: var(--doc-line-spacing, 1.5) !important;
  }

  :root :is(#shell, body) :is(
    .message-body,
    .artifact-document,
    .reading-prose
  ) h1 {
    font-size: var(--doc-h1-size, 14.5px) !important;
    font-weight: 700 !important;
  }

  :root :is(#shell, body) :is(
    .message-body,
    .artifact-document,
    .reading-prose
  ) h2 {
    font-size: var(--doc-h2-size, 13.5px) !important;
    font-weight: 700 !important;
  }

  :root :is(#shell, body) :is(
    .message-body,
    .artifact-document,
    .reading-prose
  ) :is(h3, h4, h5, h6) {
    font-size: var(--doc-h3-size, 12.5px) !important;
    font-weight: 700 !important;
  }

  :root[data-theme] .result-card :is(.message-answer-window, .arena-answer-window) {
    padding: 12px !important;
    padding-right: 12px !important;
  }
}

/* 6b. Diagrams inside Answers and Documents match active Answer Typography (Font 12 / 12px) */
:root :is(#shell, body) :is(
  .b1x-diagram-card,
  .b1x-diagram-frame,
  .b1x-diagram-frame svg,
  .b1x-diagram-frame text,
  .b1x-diagram-frame tspan,
  .b1x-diagram-frame .nodeLabel,
  .b1x-diagram-frame .edgeLabel,
  .b1x-diagram-node-label,
  .b1x-diagram-edge-label,
  .text-diagram-svg,
  .text-diagram-svg text
) {
  font-size: var(--doc-body-size, 12px) !important;
}

:root :is(#shell, body) .b1x-diagram-frame .edgeLabel,
:root :is(#shell, body) .b1x-diagram-edge-label {
  font-size: var(--doc-body-size, 12px) !important;
}

/* 7. Print & Export Media: Strict 1-inch margins on all sides */
@media print {
  @page {
    margin: var(--doc-standard-margin);
    size: auto;
  }
  body, .message-body, .artifact-document {
    font-family: var(--doc-official-font) !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
    color: #000 !important;
    background: #fff !important;
  }
}

/* Hide diagram chrome / debug captions and document footers */
:root :is(#shell, body) .b1x-diagram-card figcaption {
  display: none !important;
}

:root :is(#shell, body) .exec-footer {
  display: none !important;
}

/* Screen answers use the workspace width. Apply one gutter at the scroll
   surface, rather than an A4 cap and padding on every nested answer wrapper.
   Native hosts previously injected six-ID rules; this shared rule also fixes
   existing hosts when they load the updated web workspace. Print stays A4. */
@media screen {
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #workspace-view {
    width:100%!important;max-width:none!important;min-width:0!important;
    padding-inline:0!important;margin-inline:0!important;box-sizing:border-box!important;
  }
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #thread {
    width:100%!important;max-width:none!important;min-width:0!important;
    padding-inline:clamp(18px,4vw,56px)!important;padding-bottom:calc(136px + env(safe-area-inset-bottom,0px))!important;
    margin-inline:0!important;box-sizing:border-box!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;
  }
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell :is(#messages,.active-inquiry-bar) {
    width:min(100%,920px)!important;max-width:920px!important;min-width:0!important;
    padding-inline:clamp(8px,1.6vw,20px)!important;margin-inline:auto!important;box-sizing:border-box!important;
  }
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #messages :is(.qa-bundle,.qa-answer-tree,.message,.message-answer-window) {
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding-inline:0!important;margin-inline:auto!important;box-sizing:border-box!important;
  }
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #messages .message-body {
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:clamp(8px,1.2vw,16px) clamp(8px,1.5vw,18px)!important;
    margin-inline:0!important;box-sizing:border-box!important;
    border-radius:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #messages .qa-question-heading {
    padding:clamp(6px,1vw,10px) clamp(4px,1vw,10px)!important;
    margin-bottom:6px!important;
    max-width:100%!important;box-sizing:border-box!important;border-radius:0!important;
    background:transparent!important;
    border:0!important;
    border-bottom:1px solid color-mix(in srgb,var(--b1x-accent,#10b981) 24%,var(--b1x-border,rgba(128,128,128,0.18)))!important;
    box-shadow:none!important;
  }
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell:not(.studio-active):not(.dock-open) #main > .composer-area > #composer:not([data-presence=ready]):not([data-presence=running]) {
    width:min(100%,880px)!important;max-width:880px!important;margin-inline:auto!important;
  }
}
@media screen and (max-width:700px) {
  :root {
    --doc-body-size: 10.5px;
    --doc-body-size-mobile: 10.5px;
    --doc-question-title-size-mobile: 13px;
    --doc-h1-size: 12px;
    --doc-h2-size: 11.5px;
    --doc-h3-size: 11px;
    --doc-line-spacing: 1.42;
  }
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #main {padding-inline:0!important;min-width:0!important}
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #thread {padding-inline:8px!important;padding-bottom:calc(136px + env(safe-area-inset-bottom,0px))!important}
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell :is(#messages,.active-inquiry-bar) {width:100%!important;max-width:100%!important;padding-inline:0!important}
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #messages .message-body {padding:6px 4px!important;border-radius:0!important;background:transparent!important;border:0!important;font-size:10.5px!important;line-height:1.42!important}
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #messages .message-body :is(p,li,blockquote,dd,span,a,em,strong) {font-size:10.5px!important;line-height:1.42!important}
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #messages .message-body :is(td,th,pre,code,.code-line-code,.code-line-num) {font-size:10px!important;line-height:1.38!important;padding:4px 6px!important}
  :root[data-theme] body #shell#shell#shell#shell#shell#shell#shell #messages .qa-question-heading {padding:6px 4px!important;border-radius:0!important;background:transparent!important}
}

/* Keep large diagrams readable inside a bounded two-axis scroll region. */
@media screen {
  #shell#shell#shell#shell#shell#shell#shell .b1x-diagram-frame {
    overflow:auto!important;max-height:min(65dvh,640px)!important;max-width:100%!important;
    box-sizing:border-box;overscroll-behavior:contain;touch-action:pan-x pan-y;
  }
  #shell#shell#shell#shell#shell#shell#shell .b1x-diagram-frame>svg {
    width:var(--diagram-natural-width,640px)!important;height:var(--diagram-natural-height,400px)!important;
    min-width:0!important;max-width:none!important;max-height:none!important;margin:0!important;
  }
  #shell#shell#shell#shell#shell#shell#shell .b1x-diagram-frame[data-fit=true]>svg {
    width:100%!important;height:auto!important;max-width:100%!important;
  }
}