* { margin: 0; padding: 0; box-sizing: border-box; }

    /* Scrollbars are idle by default and revealed only while a surface is
       actually being scrolled (see js/scrollbars.js, which toggles
       .is-scrolling). The track keeps its width the whole time, so nothing
       reflows when the thumb fades in or out. */
    * {
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }

    /* Applied once by js/scrollbars.js to anything that has actually scrolled,
       so the fade transition stays off the universal selector. */
    .scroll-surface {
      transition: scrollbar-color .6s ease;
    }

    *::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    *::-webkit-scrollbar-track {
      background: transparent;
    }

    *::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }

    *::-webkit-scrollbar-thumb {
      min-width: 36px;
      min-height: 36px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      /* Slow, eased fade on the way out; the reveal below is near-instant so
         the thumb is already there by the time the user looks for it. */
      transition: background-color .6s ease .25s;
    }

    .is-scrolling {
      scrollbar-color: var(--scrollbar-thumb) transparent;
      transition: scrollbar-color .1s ease;
    }

    .is-scrolling::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      transition: background-color .1s ease;
    }

    .is-scrolling::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-thumb-hover);
    }

    /* The same bar, kept up. For a surface whose overflow is rare enough that
       the bar is the only sign there is more to see -- an answer's wide table.
       A surface that fits draws no bar either way. */
    .scrollbar-persistent,
    .scrollbar-persistent.scroll-surface {
      scrollbar-color: var(--scrollbar-thumb) transparent;
      transition: none;
    }

    .scrollbar-persistent::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      transition: none;
    }

    .scrollbar-persistent::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-thumb-hover);
    }

    @media (prefers-reduced-motion: reduce) {
      *::-webkit-scrollbar-thumb,
      .is-scrolling::-webkit-scrollbar-thumb {
        transition: none;
      }
    }

    /* Layout + color tokens live in tokens.css */
    body {
      font-family: var(--font-sans);
      background: #0f1117;
      color: #e0e0e0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    body.app-booting > :not(.app-boot-screen):not(.auth-screen):not(script) {
      visibility: hidden !important;
    }

    body.auth-required > :not(.auth-screen):not(script) {
      visibility: hidden !important;
    }

    .auth-screen {
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: grid;
      place-items: center;
      padding: 24px;
      background: var(--surface-page);
      color: var(--text);
    }

    .auth-screen[hidden] { display: none; }

    .auth-panel {
      width: min(420px, 100%);
      padding: 32px;
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      background: var(--surface);
      box-shadow: var(--shadow-card);
      transform: translateY(-3vh);
    }

    /* Type and mark come from the shared brand rule in type.css -- the login
       screen is the first thing anyone sees, so it has to be the same wordmark
       the rail carries, not a bolder letterspaced cousin of it. */
    .auth-brand {
      margin-bottom: 28px;
      color: var(--ink);
    }

    .auth-heading {
      margin-bottom: 24px;
    }

    /* Face, weight and tracking are the display-type rule's business (type.css);
       stating a weight here only meant the file disagreed with what shipped. */
    .auth-heading h1 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 26px;
      line-height: 1.2;
    }

    .auth-heading p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    /* Where the address sits after it has been submitted: readable, still
       correctable, and carrying none of an input's visual weight. */
    .auth-identity {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border-soft);
      color: var(--text);
      font-size: 14px;
    }
    .auth-identity[hidden] { display: none; }
    .auth-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .auth-identity .auth-link { flex: none; padding: 0; }

    .auth-form {
      display: grid;
      gap: 9px;
    }

    .auth-form[hidden] { display: none; }

    .auth-form label {
      margin: 0 2px;
      color: var(--text);
      font-size: 12.5px;
      font-weight: 600;
    }

    .auth-form input {
      width: 100%;
      height: 46px;
      padding: 0 14px;
      border: 1px solid var(--border-input);
      border-radius: var(--r-lg);
      outline: none;
      background: var(--surface);
      color: var(--ink);
      font: inherit;
      font-size: 14px;
      transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
    }

    /* A focused field in this app moves its border and stops there. The halo
       that used to sit here was the one cold slate-blue left in the palette,
       and on the flax ground it read as a different product's control. */
    .auth-form input:focus {
      border-color: var(--border-focus);
    }

    .auth-code-entry {
      position: relative;
      margin: 2px 0 3px;
    }

    #auth-code {
      position: absolute;
      inset: 0;
      z-index: 2;
      height: 100%;
      padding: 0;
      border: 0;
      opacity: 0;
      cursor: text;
    }

    .auth-code-slots {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
    }

    .auth-code-slot {
      display: grid;
      place-items: center;
      height: 50px;
      border: 1px solid var(--border-input);
      border-radius: var(--r-md);
      background: var(--surface);
      color: var(--ink);
      font-size: 19px;
      font-weight: 550;
      font-variant-numeric: tabular-nums;
      transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease;
    }

    .auth-code-slot.is-filled {
      background: var(--surface-inset);
    }

    /* The slot being typed into is the one place a moved border alone is too
       quiet -- there are six identical boxes and no caret to follow -- so it
       also takes the ink border it would wear if it were the whole field. */
    .auth-code-entry:focus-within .auth-code-slot.is-active {
      border-color: var(--muted);
      background: var(--surface);
    }

    .auth-form > button[type="submit"] {
      height: 44px;
      margin-top: 5px;
      border: 0;
      border-radius: var(--r-lg);
      background: var(--accent);
      color: var(--on-accent);
      font: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--dur) ease, opacity var(--dur) ease;
    }

    .auth-form > button[type="submit"]:hover:not(:disabled) { background: var(--accent-hover); }
    .auth-form > button[type="submit"]:disabled { opacity: .45; cursor: default; }

    .auth-code-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 2px;
    }

    .auth-link {
      border: 0;
      padding: 5px 0;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 13px;
      cursor: pointer;
    }

    .auth-link:hover:not(:disabled) { color: var(--ink); }
    .auth-link:disabled { color: var(--faint); cursor: default; }

    .auth-status {
      margin-top: 14px;
      color: var(--red);
      font-size: 13px;
      line-height: 1.55;
    }

    .auth-status:empty { display: none; }

    @media (max-width: 520px) {
      .auth-screen { padding: 16px; }
      .auth-panel { padding: 26px 22px; transform: none; }
      .auth-code-slots { gap: 6px; }
      .auth-code-slot { height: 46px; }
    }

    .app-boot-screen {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      background: var(--surface-inset);
      color: var(--ink);
    }

    .app-boot-screen.is-ready {
      display: none;
    }

    .app-boot-content {
      width: min(240px, calc(100vw - 48px));
      display: grid;
      justify-items: center;
      transform: translateY(-2vh);
    }

    .app-boot-error {
      display: grid;
      justify-items: center;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      text-align: center;
    }

    .app-boot-error[hidden] { display: none; }

    .app-boot-error button {
      border: 1px solid var(--border-card-hover);
      border-radius: 6px;
      padding: 7px 11px;
      background: var(--surface);
      color: var(--ink);
      font: inherit;
      font-weight: 650;
      cursor: pointer;
    }

    .app-boot-error button:hover { background: #eef2f6; }

    .left-rail {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 52;
      width: var(--rail-width);
      display: flex;
      flex-direction: column;
      background: var(--surface-inset);
      border-right: 1px solid var(--border);
      padding: 8px 0 8px 8px;
      gap: 0;
    }

    /* The rail background is repeated here so the strip between the open menu
       and the button is opaque: the menu is anchored inside this padding box,
       so history rows can no longer show through the gap. It has to be the
       rail's own token, not a near neighbour -- the point is that the seam is
       invisible, and a step of lightness at the bottom of the rail reads as a
       separate panel bolted on under the history. */
    .account-control {
      position: relative;
      flex: 0 0 auto;
      /* Account placement must not depend on chat history having loaded. When
         the loading rail is hidden, this auto margin still holds the account
         at the foot of the sidebar instead of letting it jump below modes. */
      margin-top: auto;
      padding: 10px 8px 2px 0;
      border-top: 1px solid var(--border-soft);
      background: var(--surface-rail);
    }

    .account-control[hidden],
    .account-menu[hidden] { display: none; }
    .account-menu [hidden] { display: none; }

    .account-button {
      width: 100%;
      min-width: 0;
      height: 44px;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 16px;
      align-items: center;
      gap: 9px;
      border: 0;
      border-radius: 10px;
      padding: 0 8px;
      background: transparent;
      color: var(--text);
      font: inherit;
      cursor: pointer;
      text-align: left;
    }

    .account-button:hover,
    .account-button[aria-expanded="true"] { background: var(--active-bg); }

    .account-initials {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--active-bg);
      color: var(--green-deep);
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .02em;
    }

    .account-label {
      overflow: hidden;
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-button svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
    }

    /* Spans the rail edge to edge like the button below it, and sits just
       above it: bottom is measured inside the control's own padding box, so
       the remaining gap is rail background rather than the scrolling list. */
    .account-menu {
      position: absolute;
      left: 0;
      right: 8px;
      bottom: calc(100% - 6px);
      z-index: 80;
      overflow: hidden;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
    }

    .account-menu button,
    .account-menu a {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      border: 0;
      border-radius: 10px;
      padding: 9px 10px;
      background: transparent;
      color: var(--ink-strong);
      font: inherit;
      font-size: 14px;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
    }

    .account-menu-icon {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .account-menu-switch {
      position: relative;
      width: 30px;
      height: 18px;
      flex: 0 0 30px;
      margin-left: auto;
      border-radius: 999px;
      background: var(--border);
      transition: background .16s ease;
    }

    .account-menu-switch::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--surface);
      transition: transform .16s ease;
    }

    #account-voice-input[aria-checked="true"] .account-menu-switch {
      background: var(--green);
    }

    #account-voice-input[aria-checked="true"] .account-menu-switch::after {
      transform: translateX(12px);
    }

    .account-menu button:hover,
    .account-menu a:hover { background: var(--hover-bg); }

    body.auth-enabled:not(.auth-admin) .library-upload-btn,
    body.auth-enabled:not(.auth-admin) .zpravy-upload-btn,
    body.auth-enabled:not(.auth-admin) .ds-upload-btn,
    body.auth-enabled:not(.auth-admin) #source-picker-upload,
    body.auth-enabled:not(.auth-admin) .ds-detail-save,
    body.auth-enabled:not(.auth-admin) .ds-relation-add-card,
    body.auth-enabled:not(.auth-admin) .ds-relation-remove {
      display: none !important;
    }

    body.auth-enabled:not(.auth-admin) .ds-edit-control {
      pointer-events: none;
    }

    body.auth-enabled:not(.auth-admin) textarea.ds-edit-control,
    body.auth-enabled:not(.auth-admin) input.ds-edit-control,
    body.auth-enabled:not(.auth-admin) select.ds-edit-control {
      border-color: transparent !important;
      background: transparent !important;
      box-shadow: none !important;
      color: inherit !important;
      opacity: 1 !important;
      resize: none;
    }

    .mobile-rail-toggle {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 70;
      width: 38px;
      height: 38px;
      border: 1px solid var(--border-input);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      display: none;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .mobile-rail-toggle svg {
      width: 19px;
      height: 19px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
    }

    .rail-backdrop {
      position: fixed;
      inset: 0;
      z-index: 51;
      display: none;
      background: rgba(15, 23, 42, 0.18);
      backdrop-filter: blur(2px);
    }

    .brand-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      margin-right: 8px;
      padding: 8px 10px 10px;
    }

    .brand-bar {
      display: inline-flex;
      align-items: center;
      gap: 0;
      min-width: 0;
    }

    .admin-review-context {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      gap: 8px;
    }

    .admin-review-context[hidden] { display: none; }

    .admin-review-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 30px;
      width: 30px;
      height: 30px;
      border-radius: 9px;
      color: var(--muted);
      text-decoration: none;
    }

    .admin-review-back:hover,
    .admin-review-back:focus-visible {
      color: var(--ink);
      background: var(--hover-bg);
    }

    .admin-review-back svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .admin-review-identity {
      display: flex;
      flex-direction: column;
      min-width: 0;
      line-height: 1.2;
    }

    .admin-review-identity strong {
      font-size: 12px;
      font-weight: 650;
    }

    .admin-review-identity small {
      max-width: 150px;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .brand-title {
      appearance: none;
      border: 0;
      background: transparent;
      padding: 0;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      font-family: inherit;
      cursor: pointer;
      transition: opacity var(--dur);
    }

    .brand-title:hover {
      opacity: .72;
    }

    .mode-bar {
      display: flex;
      flex-direction: column;
      gap: 1px;
      margin-right: 8px;
    }

    .chat-history-rail {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      flex: 1;
      overflow-y: auto;
      scrollbar-gutter: stable;
    }

    .chat-history-rail.is-loading,
    .chat-history-rail.is-empty {
      display: none;
    }

    .chat-history-title {
      display: block;
      font-size: 12px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--muted);
      padding: 8px 8px 6px;
    }

    .chat-history-head { position: relative; }

    /* The second section's label, inside the list because that is where the row
       it introduces lives. Matches the rail heading above it, with room over it
       to separate the groups. */
    .chat-history-group {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      padding: 8px 8px 6px;
      margin-top: 10px;
    }

    .chat-history-list {
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      gap: 0;
      overflow-y: visible;
      padding: 0 0 6px;
      min-height: auto;
    }

    /* The open account menu covers the foot of the rail, so the history behind
       it is frozen instead of scrolling under the panel. */
    body.account-menu-open .chat-history-rail {
      overflow-y: hidden;
    }

    .chat-history-error {
      font-size: 12px;
      color: var(--muted);
      padding: 8px 10px;
      border-radius: 0;
      background: transparent;
      border: 0;
      line-height: 1.35;
    }

    .chat-session-loading {
      width: min(420px, 70%);
      margin: 22vh auto 0;
      display: grid;
      gap: 8px;
      pointer-events: none;
    }

    .chat-session-loading::before,
    .chat-session-loading::after {
      content: "";
      display: block;
      height: 12px;
      border-radius: 999px;
      background: var(--skeleton);
      background-size: 220% 100%;
      animation: subtleSkeleton 1.9s ease-in-out infinite;
    }

    .chat-session-loading::after {
      width: 68%;
      animation-delay: 0.18s;
    }

    .chat-history-item {
      position: relative;
      display: block;
      height: 36px;
      padding: 0;
      border-radius: 8px;
    }

    .chat-history-main {
      position: relative;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      appearance: none;
      -webkit-appearance: none;
      border: none;
      background: transparent;
      color: #cbd5e1;
      font: inherit;
      min-height: 36px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 7px 8px;
      border-radius: 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: clip;
      transition: background 0.15s, color 0.15s;
    }

    .chat-history-item:hover .chat-history-main {
      background: rgba(148, 163, 184, 0.12);
      color: #d1d5db;
    }

    .chat-history-main:hover {
      background: rgba(148, 163, 184, 0.12);
      color: #d1d5db;
    }

    .chat-history-item.active .chat-history-main {
      color: #e5e7eb;
      background: rgba(148, 163, 184, 0.16);
      white-space: nowrap;
    }

    .chat-history-name {
      display: block;
      flex: 1 1 auto;
      min-width: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: inherit;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }

    /* A title cut mid-letter reads as a rendering fault. Fading the last few
       millimetres says the same thing -- there is more text -- without the
       hard edge. Only titles that actually overflow are masked, so a short one
       keeps its final character at full strength. */
    .chat-history-name[data-overflowing="true"] {
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    }

    /* No transition at rest: the reveal is animated only while hovered, so
       leaving the row snaps the title back to the start instead of slowly
       sliding back over an already-abandoned row. */
    .chat-history-name-track {
      display: inline-block;
      min-width: max-content;
      transform: translateX(0);
      transition: none;
      will-change: transform;
    }

    .chat-history-item:hover .chat-history-name[data-overflowing="true"]:not(.is-renaming) .chat-history-name-track {
      transform: translateX(var(--chat-history-title-shift, 0));
      transition: transform var(--chat-history-title-duration, 1800ms) linear 240ms;
    }

    .chat-history-item:hover .chat-history-name,
    .chat-history-item.opening .chat-history-name,
    .chat-history-item.pending .chat-history-name {
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 72px), transparent calc(100% - 46px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 72px), transparent calc(100% - 46px), transparent 100%);
    }

    .chat-history-name.is-renaming {
      overflow: hidden;
    }

    .chat-history-name.is-renaming .chat-history-letter {
      display: inline-block;
      white-space: pre;
      opacity: 0;
      animation: chatHistoryLetterIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: var(--letter-delay, 0ms);
    }

    .chat-history-status {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      padding: 0;
      color: var(--faint);
      flex: 0 0 auto;
      z-index: 1;
    }

    .chat-history-status.pending::before {
      content: '';
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #202124;
      transform: scale(.58);
      transform-origin: center;
      will-change: transform;
      animation: chatPendingPulse 1.4s cubic-bezier(.45, 0, .55, 1) infinite alternate;
      animation-delay: var(--pending-delay, 0ms);
    }

    .chat-history-delete {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      border: 0;
      background: transparent;
      color: var(--faint);
      font-size: 0;
      line-height: 1;
      cursor: pointer;
      width: 26px;
      height: 26px;
      padding: 0;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      transition: opacity .14s, background .14s, color .14s, transform .14s;
    }

    .chat-history-item:hover .chat-history-delete,
    .chat-history-item.opening .chat-history-delete,
    .chat-history-item.is-menu-open .chat-history-delete {
      opacity: 1;
      pointer-events: auto;
    }

    /* Renaming happens in the row, in place of the row's button -- the field
       takes the same box so the title does not jump as it becomes editable. */
    .chat-history-item.is-renaming-row .chat-history-main,
    .chat-history-item.is-renaming-row .chat-history-delete { display: none; }

    .chat-history-rename {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 36px;
      margin: 0;
      padding: 7px 8px;
      border: 1px solid var(--border-focus);
      border-radius: 8px;
      background: var(--surface);
      color: var(--ink);
      font-family: inherit;
      font-size: 14px;
      line-height: 20px;
      outline: none;
    }

    /* Three dots rather than a bin: the button opens the row's options now, and
       one of them is destructive. */
    .chat-history-delete::before {
      content: "";
      width: 16px;
      height: 16px;
      display: block;
      background: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='19' cy='12' r='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='19' cy='12' r='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .chat-history-delete:hover {
      color: var(--ink-strong);
      transform: translateY(-50%);
    }

    .chat-history-item.is-deleting {
      overflow: hidden;
      pointer-events: none;
      will-change: height, opacity, transform;
      animation: chatHistoryDeleteOut 200ms cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .chat-history-item.is-entering {
      overflow: hidden;
      min-height: 0;
      will-change: height, opacity, transform;
      animation: chatHistoryEnter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes chatHistoryEnter {
      from {
        opacity: 0;
        height: 0;
        transform: translateY(-7px);
      }
      to {
        opacity: 1;
        height: 36px;
        transform: translateY(0);
      }
    }

    @keyframes chatHistoryLetterIn {
      from {
        opacity: 0;
        transform: translateY(2px);
        filter: blur(0.4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @keyframes chatHistoryDeleteOut {
      from {
        opacity: 1;
        height: 36px;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        height: 0;
        transform: translateX(-6px);
      }
    }

    /* `hidden` loses to the display below, so it needs saying twice. */
    .mode-btn[hidden] { display: none; }

    .mode-btn {
      border: none;
      background: transparent;
      color: #d6d9df;
      min-height: 36px;
      padding: 7px 8px;
      border-radius: 8px;
      font-size: 14px;
      font-family: inherit;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 0;
      cursor: pointer;
      text-align: left;
      /* Zelená zpráva is an <a> -- its own page, not a mode -- so the rail has
         to say no to the underline and the visited colour a link arrives with. */
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .mode-btn-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: currentColor;
      opacity: .92;
    }

    .mode-btn-icon svg {
      width: 18px;
      height: 18px;
      display: block;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mode-btn span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* The nav icons answer the pointer, on the same easing as everything else
       so it reads as one interface rather than a flourish. Each leans the way
       its subject suggests -- the magnifier tips as if being picked up, the
       page and the paper lift -- which is small enough to feel like intent
       and not like decoration. The label stays still: moving both would be a
       bounce. */
    .mode-btn-icon svg {
      transform-origin: 50% 55%;
      transition: transform 200ms var(--ease-out);
    }

    .mode-btn:hover .mode-btn-icon svg,
    .mode-btn:focus-visible .mode-btn-icon svg {
      transform: scale(1.09);
    }

    #mode-zelena:hover .mode-btn-icon svg,
    #mode-zelena:focus-visible .mode-btn-icon svg,
    #mode-library:hover .mode-btn-icon svg,
    #mode-library:focus-visible .mode-btn-icon svg,
    #mode-zpravy:hover .mode-btn-icon svg,
    #mode-zpravy:focus-visible .mode-btn-icon svg {
      transform: scale(1.07) translateY(-1px);
    }

    @media (prefers-reduced-motion: reduce) {
      .mode-btn-icon svg,
      .mode-btn:hover .mode-btn-icon svg,
      .mode-btn:focus-visible .mode-btn-icon svg,
      #mode-zelena:hover .mode-btn-icon svg,
      #mode-library:hover .mode-btn-icon svg,
      #mode-zpravy:hover .mode-btn-icon svg {
        transition: none;
        transform: none;
      }
    }

    .mode-btn:hover {
      background: rgba(148, 163, 184, 0.12);
      color: var(--surface-inset);
    }

    .mode-btn.active {
      color: var(--surface-inset);
      background: rgba(148, 163, 184, 0.16);
    }



    

    

    

    

    
    
    
    

    

    

    

    

    

    
    

    

    
    

    
    
    
    
    
    
    
    
    
    
    

    

    

    

    
    

    

    

    

    

    

    

    

    
    
    
    
    
    
    
    
    
    
    

    

    

    

    

    
    
    
    
    

    

    

    
    
    
    

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes chatPendingPulse {
      from { transform: scale(.58); }
      to { transform: scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .chat-history-status.pending::before {
        animation: none;
        transform: scale(.78);
      }
      .chat-history-name-track {
        transition: none;
        transform: none !important;
      }
      .chat-history-item.is-deleting {
        animation-duration: 1ms;
        transform: none;
      }
    }

    #chat-area {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-gutter: stable both-edges;
      padding: var(--main-pad) var(--main-pad) 104px calc(var(--rail-width) + var(--main-pad));
      transition: padding-right 180ms ease;
      display: flex;
      flex-direction: column;
      gap: 16px;
      /* Lets an answer's table measure the room beside the reading column. */
      container-type: inline-size;
    }

    /* A flex item's padding can consume its own content box without extending
       the scroll range. Keep the transient turn reserve as a real flex item so
       it reliably preserves the viewport when a tall trace becomes an answer. */
    #chat-area::after {
      content: '';
      display: block;
      flex: 0 0 var(--chat-turn-reserve, 0px);
      margin-top: -16px;
      pointer-events: none;
    }

    body.admin-review-mode .brand-title,
    body.admin-review-mode .mode-bar,
    body.admin-review-mode #account-control,
    body.admin-review-mode #input-area,
    body.admin-review-mode .chat-history-delete,
    body.admin-review-mode .answer-feedback,
    body.admin-review-mode #workbook-panel-history {
      display: none !important;
    }

    /* A shared conversation is shown inside the viewer's own app, so only the
       controls that would write to somebody else's chat come off -- their rail,
       their chats and the rest of the shell stay exactly as they were. */
    body.viewing-shared-chat #input-area,
    body.viewing-shared-chat .answer-feedback {
      display: none !important;
    }

    /* Fixed rather than sticky: sticky still occupies a row in the chat's flex
       column, which is exactly the vertical space the messages should keep.
       Anchored left, past the rail -- the right edge is where the artifact
       panel opens. */
    .shared-chat-badge {
      display: none;
      position: fixed;
      top: 14px;
      left: calc(var(--rail-width) + var(--main-pad));
      z-index: 40;
      align-items: center;
      gap: 8px;
      padding: 9px 16px 9px 13px;
      /* The constructive family rather than a grey chip: this is information
         about the conversation, and it has to hold its own floating over the
         page instead of reading as a disabled control. */
      border: 1px solid var(--green-border);
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green-deep);
      font-size: 13px;
      font-weight: 560;
      line-height: 1;
      letter-spacing: -.01em;
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(var(--muted-rgb) / .08), 0 6px 16px rgba(var(--muted-rgb) / .10);
      pointer-events: none;
    }

    body.viewing-shared-chat .shared-chat-badge {
      display: inline-flex;
    }

    .shared-chat-badge svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
      opacity: .85;
    }

    /* The rail is off-canvas on a phone and its toggle takes the top-left
       corner, so the badge crosses to the other side rather than sitting under
       it. */
    @media (max-width: 720px) {
      .shared-chat-badge {
        left: auto;
        right: var(--main-pad);
      }
    }

    body.admin-review-mode .brand-bar {
      flex: 1;
    }

    body.admin-review-mode .chat-history-rail {
      margin-top: 2px;
    }

    body.admin-review-mode #chat-area,
    body.viewing-shared-chat #chat-area {
      padding-bottom: var(--main-pad);
    }

    body.admin-review-mode.chat-empty #chat-area,
    body.viewing-shared-chat.chat-empty #chat-area {
      justify-content: flex-start;
      padding-bottom: var(--main-pad);
    }

    .admin-review-state {
      width: min(100%, var(--content-width));
      margin: auto;
      padding: 32px;
      text-align: center;
      color: var(--muted);
    }

    .admin-review-state strong {
      display: block;
      color: var(--ink);
      font-size: 16px;
    }

    .admin-review-state p {
      margin: 7px 0 0;
      font-size: 13px;
    }

    .chat-turn-outline {
      position: fixed;
      z-index: 54;
      top: 50%;
      right: 0;
      width: 264px;
      max-height: min(440px, calc(100vh - 190px));
      padding: 7px;
      overflow: hidden;
      border: 1px solid transparent;
      border-radius: 14px;
      background: transparent;
      box-shadow: none;
      transform: translate(220px, -50%);
      transition:
        transform 180ms cubic-bezier(.22, 1, .36, 1),
        background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        opacity 140ms ease;
    }

    .chat-turn-outline:hover,
    .chat-turn-outline:focus-within {
      border-color: var(--border-soft);
      border-right-color: transparent;
      border-radius: 14px 0 0 14px;
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 10px 30px rgba(15, 23, 42, .09);
      transform: translate(0, -50%);
    }

    .chat-turn-outline-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
      max-height: min(424px, calc(100vh - 206px));
      overflow-y: auto;
      overflow-x: hidden;
    }

    .chat-turn-outline-item {
      display: grid;
      grid-template-columns: 20px;
      align-items: center;
      gap: 9px;
      min-height: 5px;
      width: 100%;
      padding: 0 8px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 12px;
      line-height: 1.35;
      text-align: left;
      cursor: pointer;
    }

    .chat-turn-outline:hover .chat-turn-outline-list,
    .chat-turn-outline:focus-within .chat-turn-outline-list {
      gap: 2px;
    }

    .chat-turn-outline:hover .chat-turn-outline-item,
    .chat-turn-outline:focus-within .chat-turn-outline-item {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      min-height: 32px;
      padding: 5px 8px;
    }

    .chat-turn-outline-item::before {
      content: '';
      display: block;
      width: 12px;
      height: 2px;
      justify-self: end;
      transform: translateX(-12px);
      border-radius: 999px;
      background: var(--active-bg);
      transition: width 140ms ease, background-color 140ms ease;
    }

    .chat-turn-outline-item span {
      display: none;
      min-width: 0;
      overflow: hidden;
      opacity: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: opacity 100ms ease;
    }

    .chat-turn-outline:hover .chat-turn-outline-item span,
    .chat-turn-outline:focus-within .chat-turn-outline-item span {
      display: block;
      opacity: 1;
    }

    .chat-turn-outline:hover .chat-turn-outline-item::before,
    .chat-turn-outline:focus-within .chat-turn-outline-item::before {
      display: none;
    }

    .chat-turn-outline:hover .chat-turn-outline-item:hover,
    .chat-turn-outline .chat-turn-outline-item:focus-visible {
      outline: none;
      background: var(--hover-bg);
      color: var(--ink);
    }

    .chat-turn-outline-item.active {
      background: transparent;
      color: var(--ink);
    }

    .chat-turn-outline-item.active span {
      font-weight: 550;
    }

    .chat-turn-outline-item.active::before {
      width: 19px;
      background: #202124;
    }

    body.answer-inspector-open .chat-turn-outline {
      opacity: 0;
      pointer-events: none;
      transform: translate(220px, -50%);
    }

    @media (max-width: 900px) {
      .chat-turn-outline {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .chat-turn-outline,
      .chat-turn-outline-item::before,
      .chat-turn-outline-item span,
      button.table-hover-copy-btn {
        transition: none;
      }
    }

    .library-area {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      /* Room on both sides: the cards used to run to the frame, which is what
         made the section feel like a table rather than a page. */
      padding: 0 var(--library-gutter) var(--main-pad) calc(var(--rail-width) + var(--library-gutter));
      display: none;
    }

    /* Wider than a reading measure -- it is a grid of cards, not prose -- but
       bounded, so a wide window does not stretch the row to the frame. */
    .library-wrap {
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
    }

    /* The dark slate pill this used to be was already stripped back to nothing by
       features.css; what was left read as a toolbar bolted above the page. It is
       a page header now: room above it, the name at display size, the controls on
       its line. */
    .library-toolbar-shell {
      margin: 0 0 22px;
      padding: 44px 0 0;
      background: transparent;
      border-bottom: 0;
    }

    .library-toolbar {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 0 0 18px;
      border-bottom: 1px solid var(--border-soft);
    }

    /* The heading takes the width of its text, not the leftover space. While it
       grew instead, the free space in the row piled up between it and the search
       field, which then looked stranded however wide its basis was. */
    .library-toolbar-copy {
      min-width: 0;
      flex: 0 1 auto;
    }

    .library-title {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 27px;
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
    .library-toolbar-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      flex: 1 1 auto;
      min-width: 0;
    }

    .library-upload-btn {
      width: 36px;
      height: 36px;
      min-height: 36px;
      padding: 0;
      border-radius: 10px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 0;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      transition: background .15s, border-color .15s, color .15s, transform .15s;
    }

    .library-upload-btn:hover {
      background: rgba(34, 197, 94, 0.16);
      border-color: rgba(34, 197, 94, 0.58);
      color: #dcfce7;
      transform: translateY(-1px);
    }

    .library-upload-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Compact on a desktop toolbar, but still allowed to shrink when a long
       category heading needs the room. */
    .library-filter {
      width: min(20rem, 100%);
      flex: 0 1 20rem;
      max-width: 20rem;
      padding: 9px 12px;
      border-radius: 10px;
      border: 1px solid var(--border-input);
      background: var(--surface);
      color: var(--ink);
      font-size: 13.5px;
      outline: none;
    }

    /* Left to the browser default until now, which washes out on the flax
       ground. The app's other search fields all name this colour. */
    .library-filter::placeholder {
      color: var(--faint);
    }

	    .library-list {
	      display: grid;
	      /* Column count follows the width rather than being fixed at four: at a
	         1280 window four made 229px cards, so every title wrapped to three
	         lines and the cards grew tall and mostly empty. */
	      grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	      gap: 14px;
	      align-items: stretch;
	      padding-top: 0;
	    }

    .library-item {
      position: relative;
      border: 1px solid #1f2937;
      background: var(--ink);
      border-radius: 14px;
      padding: 16px 40px 16px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 88px;
      transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
      box-shadow: none;
    }

    .library-item:hover {
      border-color: var(--border);
      background: var(--accent);
      box-shadow: 0 10px 26px rgba(2, 6, 23, .12);
      transform: translateY(-1px);
    }

    .library-text {
      min-width: 0;
      flex: 1;
    }

    .library-name {
      font-size: 14px;
      font-weight: 450;
      color: #e5e7eb;
      line-height: 1.34;
      display: block;
      max-height: 4.2em;
      overflow: hidden;
      word-break: break-word;
    }

    .library-empty {
      grid-column: 1 / -1;
      border: 1px solid rgba(148, 163, 184, 0.16);
      border-radius: 20px;
      padding: 28px;
      color: var(--faint);
      font-size: 14px;
      text-align: center;
      background:
        radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.12), transparent 42%),
        rgba(15, 23, 42, 0.28);
    }

    .library-empty strong {
      font-weight: 600;
      color: inherit;
    }

    .library-empty.compact-loader {
      min-height: 64px;
      padding: 14px 4px;
      display: grid;
      align-content: center;
      gap: 11px;
      text-align: left;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .library-empty.compact-loader::before,
    .library-empty.compact-loader::after {
      content: "";
      display: block;
      height: 13px;
      border-radius: 999px;
      background: var(--skeleton);
      background-size: 220% 100%;
      animation: subtleSkeleton 1.8s ease-in-out infinite;
    }

    .library-empty.compact-loader::after {
      width: 46%;
      animation-delay: 0.16s;
    }

    .library-empty.library-empty-state {
      min-height: 120px;
      padding: 44px 16px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--faint);
    }

    .ds-list > .library-empty.compact-loader {
      padding: 22px 18px;
    }

    .ds-list > .library-empty.catalog-empty {
      min-height: 48px;
      padding: 18px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }    .upload-row {
      display: flex;
      gap: 10px;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .upload-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 160px;
    }

    .upload-label {
      font-size: 11px;
      color: var(--faint);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .upload-dropzone {
      width: 72px;
      height: 72px;
      border: 2px dashed var(--border);
      border-radius: 12px;
      background: var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      flex-shrink: 0;
    }

    .upload-dropzone:hover,
    .upload-dropzone.drag-over {
      border-color: var(--green-border);
      background: #0d1a12;
    }.upload-btn {
      background: var(--green-deep);
      border: none;
      border-radius: 8px;
      color: var(--on-accent);
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s;
    }

    .upload-btn:hover {
      background: var(--green-hover);
    }

    .upload-btn:disabled {
      background: #1f2937;
      color: var(--muted);
      cursor: not-allowed;
    }

    .message {
      max-width: var(--content-width);
      width: 100%;
      margin: 0 auto;
    }

    .message.user {
      background: transparent;
      border: none;
      padding: 0;
      display: flex;
      /* A column so attachment rows stack above the bubble; align-items keeps
         everything on the right edge exactly as justify-content used to. */
      flex-direction: column;
      align-items: flex-end;
    }

    .message.user .bubble {
      background: #1e293b;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 18px;
      width: fit-content;
      max-width: 75%;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .message.assistant {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 2px 0;
      box-shadow: none;
    }

    .message .label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }

    .message.user .label { color: var(--blue); }
    .message.assistant .label { color: var(--green-border); }

    

    

    .answer-text {
      font-size: 15px;
      line-height: 1.7;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
      color: #e5e7eb;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding-top: 10px;
      padding-top: 10px;
      padding: 4px 0;
    }

    .answer-text .katex {
      font-size: 1.02em;
    }

    .answer-text .katex-display {
      margin: 10px 0 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 0;
    }

    .sources-toggle,
    .agent-trace-toggle,
    .analysis-solution-toggle {
      display: inline-block;
      margin-top: 12px;
      margin-right: 12px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.01em;
      color: var(--faint);
      cursor: pointer;
      user-select: none;
      border: none;
      background: none;
      padding: 4px 0;
      opacity: 0.92;
      transition: color 0.15s ease, opacity 0.15s ease;
    }

    .sources-toggle:hover,
    .agent-trace-toggle:hover,
    .analysis-solution-toggle:hover {
      text-decoration: none;
      color: #cbd5e1;
      opacity: 1;
    }

    .sources-list { display: none; margin-top: 8px; }
    .sources-list.open { display: block; }

    .message > .sources-list,
    .message > .skills-list,
    .message > .answer-exports,
    .message > .analysis-solution,
    .message > .agent-trace {
      display: none !important;
    }

    .answer-inspector {
      position: fixed;
      z-index: 120;
      inset: 0 0 0 auto;
      display: flex;
      flex-direction: column;
      width: min(var(--answer-inspector-width), 100vw);
      overflow: visible;
      background: var(--surface);
      border-left: 1px solid var(--border);
      box-shadow: -12px 0 32px rgb(var(--muted-rgb) / .10);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(calc(100% + 40px));
      transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        opacity 150ms ease,
        visibility 0s linear 220ms;
    }

    .answer-inspector.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0);
      transition-delay: 0s;
    }

    .answer-inspector-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 18px 12px;
      border-bottom: 1px solid var(--border-soft);
    }

    .answer-inspector-back {
      display: grid;
      place-items: center;
      position: absolute;
      z-index: 2;
      left: -34px;
      top: 50%;
      width: 34px;
      height: 48px;
      padding: 0;
      border: 1px solid var(--border);
      border-right: 0;
      border-radius: 10px 0 0 10px;
      background: var(--surface);
      color: var(--muted);
      line-height: 1;
      cursor: pointer;
      transform: translateY(-50%);
      box-shadow: -5px 0 14px rgba(15, 23, 42, 0.04);
    }

    .answer-inspector-back svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .answer-inspector-back:hover {
      background: var(--hover-bg);
      color: var(--ink);
    }

    .answer-inspector-tabs {
      display: flex;
      gap: 14px;
      flex: 1 1 auto;
      min-width: 0;
    }

    .answer-inspector-tab {
      /* Sized to the label, not stretched to half the panel: a rule under a
         stretched tab is a rule across the whole header, which is the heaviness
         the fill had. Left-aligned, like the Databáze tabs. */
      flex: 0 1 auto;
      min-width: 0;
      padding: 8px 10px 7px;
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 550;
      cursor: pointer;
      transition: color var(--dur), border-color var(--dur);
    }

    /* Tabs are marked by a rule under the active label, not a filled shape.
       The pill this replaced was the loudest thing in a quiet UI, and it had to
       carry a tan strong enough to beat the surface, which made it louder still.
       The transparent border on the resting state reserves the 2px so switching
       tabs never shifts the row. Same pattern as .zz-tab on the Zelená page,
       which already worked this way. */
    .answer-inspector-tab:hover {
      background: transparent;
      color: var(--ink);
    }

    .answer-inspector-tab.active {
      background: transparent;
      color: var(--ink);
      border-bottom-color: var(--accent);
    }

    .answer-inspector-content {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: 16px;
    }

    .answer-inspector-content .sources-list,
    .answer-inspector-content .skills-list,
    .answer-inspector-content .answer-exports,
    .answer-inspector-content .analysis-solution,
    .answer-inspector-content .agent-trace {
      display: block !important;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .answer-inspector-content .agent-trace.open,
    .answer-inspector-content .sources-list.open,
    .answer-inspector-content .answer-exports,
    .answer-inspector-content .analysis-solution.open {
      padding: 0;
    }

    .answer-inspector-content .analysis-solution {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--border-soft);
    }

    .answer-inspector-content .analysis-solution.open {
      padding: 16px 0 0;
    }

    .answer-inspector-content .analysis-solution-code {
      max-width: 100%;
      overflow-x: hidden;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    /* No box round the list and no box round each row. The panel is already a
       panel; drawing a card inside it, inside a bordered group, inside the
       inspector, is three frames deep for a list of four things. What is left
       is what the list needed all along: a hairline between rows and enough air
       to read them. */
    /* Sources take what they need, up to 38% of the panel, and scroll inside
       that; the solution takes the rest. The cap is the point: the solution is
       one long listing and would otherwise win every time, which is how the
       sources ended up as a caption on top of it. It is a ceiling rather than a
       fixed share, because a fixed share left one short source sitting on a
       band of nothing, and with the skills listed below it that band landed in
       the middle of the panel.

       The half goes on the wrapper, not on the list inside it: the wrapper is
       the flex child, and sizing the inner list left the wrapper free to
       stretch, which put a band of nothing between the last source and the
       code. */
    .answer-inspector-section {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    /* Names the block without competing with what is in it -- and in the same
       voice the trace view's own labels already speak in, so the two tabs of
       one panel do not each invent their own kind of section heading. Matches
       .agent-trace-summary-label; keep them in step. */
    .answer-inspector-section-title {
      flex: 0 0 auto;
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    /* The solution gets the larger share: it is the thing you opened the panel
       to read, while the sources are a short list you check. Each half scrolls
       inside itself, so neither can take the other's room. */
    .answer-inspector-content[data-view="resources"] .answer-inspector-section.is-sources {
      flex: 0 0 auto;
      max-height: 38%;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border-soft);
    }

    .answer-inspector-content[data-view="resources"] .answer-inspector-section.is-solution {
      flex: 1 1 auto;
      margin-top: 18px;
    }

    /* Skills are a short list read at a glance, so they keep their own height
       between the sources and the solution instead of taking a share of it. */
    .answer-inspector-content[data-view="resources"] .answer-inspector-section.is-skills {
      flex: 0 0 auto;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border-soft);
    }

    .answer-inspector-content[data-view="resources"] .answer-inspector-section + .answer-inspector-section.is-skills {
      margin-top: 18px;
    }

    /* A rule under the last block closes nothing; it only draws a line. */
    .answer-inspector-content[data-view="resources"] .answer-inspector-section:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .answer-inspector-content[data-view="resources"] .sources-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    .answer-inspector-content[data-view="resources"] .data-source-list {
      gap: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .answer-inspector-content[data-view="resources"] .analysis-solution {
      flex: 1 1 auto;
      min-height: 0;
      margin-top: 0;
    }

    .answer-inspector-content[data-view="resources"] .data-source-card {
      padding: 13px 4px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .answer-inspector-content[data-view="resources"] .data-source-card + .data-source-card {
      border-top: 1px solid var(--border-soft);
    }

    /* The row does not fill on hover -- there is no card edge for a fill to sit
       inside any more. The name answers instead, the way a link does. */
    .answer-inspector-content[data-view="resources"] .data-source-card:hover {
      background: transparent;
    }

    .answer-inspector-content[data-view="resources"] a.data-source-card:hover .data-source-name,
    .answer-inspector-content[data-view="resources"] .data-source-card a.data-source-name:hover {
      color: var(--ink);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .answer-inspector-content[data-view="resources"] .analysis-solution,
    .answer-inspector-content[data-view="resources"] .analysis-solution.open {
      display: flex !important;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
      margin-top: 12px;
      padding: 0;
      border-top: 0;
    }

    .answer-inspector-content[data-view="resources"] {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .answer-inspector-content[data-view="resources"] .analysis-solution-card,
    .answer-inspector-content[data-view="resources"] .analysis-solution-section {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
    }

    .answer-inspector-content[data-view="resources"] .analysis-solution-code {
      flex: 0 1 auto;
      min-height: 0;
      max-height: none;
      margin: 0;
      padding: 14px;
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      background: var(--surface-inset);
    }

    .answer-inspector-trace,
    .answer-inspector-step-body,
    .answer-inspector-step-panel {
      min-width: 0;
      max-width: 100%;
    }

    .answer-inspector-content[data-view="trace"] {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .answer-inspector-trace {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
    }

    .answer-inspector-step-selectors {
      display: grid;
      flex: 0 0 auto;
      gap: 3px;
    }

    .answer-inspector-step-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      padding: 10px 9px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
    }

    .answer-inspector-step-status {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 9px;
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
    }

    .answer-inspector-step-trigger:hover {
      background: var(--hover-bg);
      color: var(--ink);
    }

    .answer-inspector-step-trigger.active {
      background: var(--active-bg);
      color: var(--ink);
    }

    .answer-inspector-step-chevron {
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg);
      transition: transform 150ms ease;
    }

    .answer-inspector-step-trigger.active .answer-inspector-step-chevron {
      transform: rotate(225deg);
    }

    .answer-inspector-step-body {
      flex: 0 1 auto;
      min-height: 0;
      margin-top: 12px;
      padding: 14px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      background: var(--surface-inset);
      color: var(--text);
      font-size: 12px;
    }

    .answer-inspector-step-panel pre,
    .answer-inspector-step-panel pre.step-code {
      max-width: 100%;
      margin: 0;
      overflow-x: hidden;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      font-family: var(--font-mono);
      line-height: 1.5;
    }

    .analysis-solution {
      display: none;
      margin-top: 8px;
      color: #cbd5e1;
      font-size: 12px;
    }

    .analysis-solution.open {
      display: block;
    }

    .analysis-solution-card {
      padding: 2px 0 0;
    }

    .analysis-solution-section + .analysis-solution-section {
      margin-top: 12px;
    }
    .analysis-solution-code {
      margin: 8px 0 0;
      max-height: 520px;
      overflow: auto;
      border-radius: 8px;
      border: none;
      background: rgba(2, 6, 23, 0.26);
      padding: 12px;
      color: #dbeafe;
      font-size: 12px;
      line-height: 1.45;
    }

    .data-source-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    /* A row, like the catalogue's: the type icon first so a table and a
       spreadsheet are told apart before the name is read. */
    .data-source-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 10px 12px;
      text-decoration: none;
      transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
    }

    /* A row whose text is one line centres against its icon; flex-start left
       the name sitting ~4.5px above the icon's middle, because the icon box is
       24px tall against a 16.9px line. Rows with a description keep flex-start,
       so the icon stays level with the first line rather than the block. */
    .data-source-card:has(.data-source-icon):not(:has(.data-source-description)) {
      align-items: center;
    }

    .data-source-card:has(.data-source-icon):not(:has(.data-source-description)) .data-source-icon {
      margin-top: 0;
    }

    .data-source-card:hover {
      background: var(--card-hover-bg);
      border-color: var(--border-card-hover);
      text-decoration: none;
    }

    .data-source-icon {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin-top: 1px;
      color: var(--muted);
    }

    .data-source-icon svg { width: 18px; height: 18px; }

    .data-source-card:hover .data-source-icon { color: var(--accent); }

    .data-source-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    /* Not blue: it is a row in a list, and the icon already says it is a
       source you can open. */
    .data-source-name {
      display: block;
      color: var(--ink);
      font-size: 13px;
      font-weight: 500;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .data-source-description {
      margin-top: 5px;
      color: var(--faint);
      font-size: 12px;
      line-height: 1.4;
    }

    .data-source-description:empty {
      display: none;
    }

    .chunk-card {
      background: #1a1f2e;
      border: 1px solid #2a3040;
      border-radius: 8px;
      padding: 12px 16px;
      margin-top: 8px;
    }

    .chunk-card .meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .chunk-card .meta span {
      background: #252a3a;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .chunk-card .meta a {
      color: var(--blue);
      text-decoration: none;
    }

    .chunk-card .meta a:hover {
      text-decoration: underline;
    }

    .chunk-card .chunk-content {
      font-size: 13px;
      line-height: 1.5;
      white-space: pre-wrap;
      color: var(--faint);
      max-height: 200px;
      overflow-y: auto;
    }
    .not-reliable {
      color: var(--red);
      font-size: 14px;
      margin-top: 8px;
    }

    /* Failed turn: a quiet notice rather than an answer bubble, so it never
       reads as a result the user could rate. */
    .answer-error {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px 14px;
      border: 1px solid var(--border-soft);
      border-left: 3px solid var(--red);
      border-radius: var(--r-lg);
      background: var(--surface-inset);
    }

    .answer-error-icon {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      stroke: var(--red);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .answer-error-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 2px;
    }

    .answer-error-text {
      font-size: 14px;
      line-height: 1.5;
      color: var(--text);
      overflow-wrap: anywhere;
    }

    .answer-error-cause {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 6px;
      margin-top: 7px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
      overflow-wrap: anywhere;
    }

    .answer-error-cause span {
      font-weight: 600;
      color: var(--text);
    }

    .answer-error-cause ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .answer-error-cause li + li {
      margin-top: 3px;
    }

    .answer-error-tools {
      gap: 6px;
    }

    .answer-tools-row {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-top: 10px;
      width: 100%;
    }

    .answer-tools-row.is-entering {
      animation: answerToolsReveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .answer-tools-row.is-entering .answer-feedback > *,
    .answer-tools-row.is-entering .answer-more {
      animation: answerToolControlReveal 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .answer-tools-row.is-entering .answer-feedback > :nth-child(2) {
      animation-delay: 55ms;
    }

    .answer-tools-row.is-entering .answer-more {
      animation-delay: 110ms;
    }

    @keyframes answerToolsReveal {
      from {
        opacity: 0;
        transform: translateY(3px);
        clip-path: inset(0 100% 0 0);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
      }
    }

    @keyframes answerToolControlReveal {
      from {
        opacity: 0;
        transform: translateX(-3px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .answer-tools-row.is-entering,
    .answer-tools-row.is-entering .answer-feedback > *,
    .answer-tools-row.is-entering .answer-more {
        animation: none;
      }
    }
    .agent-trace { display: none; margin-top: 8px; }
    .agent-trace.open { display: block; padding: 2px 0 4px; }
    .answer-feedback {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      align-items: center;
    }
    .answer-tools-row .answer-feedback {
      margin-top: 0;
      margin-left: 0;
    }
    .answer-more {
      position: relative;
      display: inline-flex;
    }
    .answer-more-trigger {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      transition: color .14s ease, background .14s ease;
    }
    .answer-more-trigger:hover,
    .answer-more.open .answer-more-trigger {
      color: var(--ink);
      background: var(--hover-bg);
    }
    /* Opens the side panel with the answer's sources, steps and code, so the
       icon has to say "look at this" without saying "menu". Three earlier
       attempts and why they failed: a filled ellipsis promised a dropdown that
       never appears; an info circle shares its silhouette with a warning at
       this size; a document under a magnifier carried five paths and sat
       noticeably denser than the thumbs beside it. The plus in the lens is
       load-bearing -- without it this is the plain magnifier the Výzkumník nav
       already wears. */
    .answer-more-trigger svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
    }.answer-feedback button,
    .answer-retry {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      background: transparent;
      border: 0;
      color: var(--muted);
      border-radius: 8px;
      padding: 0;
      cursor: pointer;
      transition: color 0.14s ease, background 0.14s ease, transform 0.14s ease;
    }
    .answer-feedback button:hover,
    .answer-retry:hover {
      background: var(--hover-bg);
      color: var(--ink);
    }
    .answer-feedback button svg,
    .answer-retry svg {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .answer-feedback button.active-up {
      background: var(--active-bg);
      color: var(--ink);
    }
    .answer-feedback button.active-down {
      background: var(--active-bg);
      color: var(--ink);
    }
    .answer-feedback button.active-up svg,
    .answer-feedback button.active-down svg {
      fill: currentColor;
      stroke-width: 1.7;
    }
    .answer-feedback button:disabled { opacity: 0.5; cursor: wait; }
    .agent-step {
      background: rgba(148, 163, 184, 0.06);
      border: 1px solid rgba(148, 163, 184, 0.14);
      border-radius: 10px;
      padding: 10px 12px;
      margin-top: 8px;
      font-size: 13px;
    }
    .agent-step.error { border-color: rgba(239, 68, 68, 0.42); }
    .agent-step.finish { border-color: rgba(16, 185, 129, 0.36); }
    .agent-step.nested {
      margin-left: 22px;
      background: rgba(148, 163, 184, 0.04);
      position: relative;
    }
    .agent-step.nested::before {
      content: "└";
      position: absolute;
      left: -16px;
      top: 6px;
      color: var(--text);
      font-size: 14px;
    }
    .agent-step-head {
      display: flex;
      gap: 10px;
      align-items: baseline;
      flex-wrap: wrap;
      color: #cbd5e1;
    }    .agent-step-head .step-action {
      color: #cbd5e1;
      font-weight: 650;
    }
    .agent-step-head .step-label { color: var(--faint); }    .agent-step .step-body {
      margin-top: 6px;
      font-size: 12px;
      color: var(--faint);
    }
    .agent-step .step-body .step-arg-label {
      margin-top: 2px;
      margin-bottom: 6px;
      color: #cbd5e1;
      font-weight: 600;
    }
    .agent-step .step-body .step-code-kind {
      margin-top: 4px;
      margin-bottom: 4px;
      color: var(--faint);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 700;
    }
    .agent-step .step-body pre {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 4px 0 0;
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-word;
      margin: 4px 0 0 0;
      color: #cbd5e1;
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .agent-step .step-body pre.step-code {
      white-space: pre;
      word-break: normal;
    }.agent-step .step-error {
      color: var(--red);
      margin-top: 4px;
      font-family: var(--font-mono);
      font-size: 12px;
    }

    #input-area {
      position: fixed;
      left: var(--rail-width);
      right: 14px;
      bottom: 0;
      z-index: 55;
      background: linear-gradient(to top, #0f1117 0%, rgba(15, 17, 23, 0.96) 74%, rgba(15, 17, 23, 0) 100%);
      padding: 14px var(--main-pad) 16px;
      pointer-events: none;
      transition: right 180ms ease;
    }

    #input-area form {
      max-width: var(--content-width);
      margin: 0 auto;
      display: flex;
      position: relative;
      gap: 0;
      border-top: none;
      padding-top: 0;
      pointer-events: auto;
    }

    body.chat-empty #chat-area {
      justify-content: center;
      padding-bottom: 90px;
    }

    body.chat-empty .empty-state {
      margin: 0 auto 16px;
      transform: translateY(-54px);
    }

    body.chat-empty .empty-state p {
      display: none;
    }


    body.chat-empty #input-area {
      top: calc(50vh - 54px);
      bottom: auto;
      background: transparent;
      padding-top: 0;
      padding-bottom: 0;
    }

    body.chat-empty #input-area form {
      max-width: 680px;
    }

    body.chat-empty .input-wrap {
      box-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
    }

    .question-input {
      width: 100%;
      display: block;
      background: transparent;
      border: none;
      border-radius: 24px;
      padding: 13px 50px;
      font-size: 15px;
      color: #e0e0e0;
      outline: none;
      min-height: 24px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      overflow-x: hidden;
      overflow-y: hidden;
      line-height: 22px;
      box-sizing: border-box;
    }

    .question-input:focus { outline: none; }

    .question-input::selection,
    .question-input *::selection {
      background: rgba(15, 23, 42, 0.14);
      color: inherit;
    }

    .question-input:empty::before {
      content: attr(data-placeholder);
      color: var(--muted);
      pointer-events: none;
    }

    .question-input.is-voice-dictating::before {
      display: none !important;
      content: none !important;
    }

    .source-token,
    .graph-token {
      display: inline;
      max-width: min(320px, 70vw);
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: inherit;
      font-weight: 650;
      line-height: inherit;
      white-space: nowrap;
      vertical-align: baseline;
      user-select: all;
      -webkit-user-select: all;
    }

    .question-input .source-token,
    .question-input .graph-token {
      cursor: default;
    }

    .message.user .source-token,
    .message.user .graph-token {
      background: transparent;
      color: inherit;
    }

    

    .answer-text a.citation-link {
      color: var(--blue);
      text-decoration: none;
    }

    .answer-text a.citation-link:hover {
      text-decoration: underline;
    }

    .answer-text .source-backed-passage.is-source-highlighted {
      border-radius: 3px;
      background: var(--green-border);
      box-shadow: 0 0 0 3px var(--green-border);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    .answer-text h1 {
      margin: 1.5em 0 0.34em;
      font-size: 1.35rem;
      line-height: 1.25;
    }

    .answer-text h2 {
      margin: 1.3em 0 0.3em;
      font-size: 1.15rem;
      line-height: 1.3;
    }

    .answer-text h3 {
      margin: 1.1em 0 0.26em;
      font-size: 1rem;
      line-height: 1.35;
    }

    .answer-text h4 {
      margin: 0.9em 0 0.24em;
      font-size: 0.92rem;
      line-height: 1.35;
    }

    .answer-text h1 + h1,
    .answer-text h1 + h2,
    .answer-text h1 + h3,
    .answer-text h1 + h4,
    .answer-text h2 + h1,
    .answer-text h2 + h2,
    .answer-text h2 + h3,
    .answer-text h2 + h4,
    .answer-text h3 + h1,
    .answer-text h3 + h2,
    .answer-text h3 + h3,
    .answer-text h3 + h4,
    .answer-text h4 + h1,
    .answer-text h4 + h2,
    .answer-text h4 + h3,
    .answer-text h4 + h4 {
      margin-top: 0.58em;
    }

    .answer-text h1:first-child,
    .answer-text h2:first-child,
    .answer-text h3:first-child,
    .answer-text h4:first-child {
      margin-top: 0;
    }

    .answer-text p {
      margin: 0 0 0.68em;
      line-height: 1.6;
    }

    .answer-text p:last-child {
      margin-bottom: 0;
    }

    .answer-text ul,
    .answer-text ol {
      margin: 0.18em 0 0.56em 1.06em;
      padding-left: 0.74em;
      line-height: 1.58;
    }

    .answer-text li {
      margin: 0;
      padding-left: 0.08em;
      line-height: 1.5;
    }

    .answer-text li + li {
      margin-top: 0.22em;
    }

    .answer-text li > p {
      margin: 0;
    }

    .answer-text li > p + p {
      margin-top: 0.3em;
    }

    .answer-text li > ul,
    .answer-text li > ol {
      margin-top: 0.2em;
      margin-bottom: 0.2em;
    }

    .answer-text h1 + p,
    .answer-text h2 + p,
    .answer-text h3 + p,
    .answer-text h4 + p,
    .answer-text h1 + ul,
    .answer-text h2 + ul,
    .answer-text h3 + ul,
    .answer-text h4 + ul,
    .answer-text h1 + ol,
    .answer-text h2 + ol,
    .answer-text h3 + ol,
    .answer-text h4 + ol {
      margin-top: 0.12em;
    }

    .answer-text > :first-child {
      margin-top: 0 !important;
    }

    .answer-text > :last-child {
      margin-bottom: 0 !important;
    }

    .answer-text blockquote {
      margin: 0.55em 0;
      padding: 0.42em 0.8em;
      border-left: 3px solid #475569;
      background: rgba(148, 163, 184, 0.09);
      border-radius: 6px;
    }

    .answer-text hr.md-rule {
      border: 0;
      border-top: 1px solid rgba(148, 163, 184, 0.35);
      margin: 0.6em 0;
    }

    .table-copy-wrapper {
      position: relative;
      width: 100%;
      max-width: 100%;
      overflow: visible;
      margin: 0.85em 0 1.05em;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .table-copy-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
    }

    /* A table wider than the reading column takes the room beside it, centred
       on the column, before it scrolls. The breakout spans that room: the chat
       area's width, capped so rows stay readable. The table inside keeps the
       column's width at least -- a table that fits sits exactly where it did --
       and grows to its own width up to the room, then scrolls. The column is
       the message's width, the chat area's up to --content-width. */
    #chat-area .table-breakout {
      --table-room: max(100%, min(100cqw, 1200px));
      display: flex;
      justify-content: center;
      width: var(--table-room);
      margin: 0.85em calc((100% - var(--table-room)) / 2) 1.05em;
    }

    #chat-area .table-breakout > .table-copy-wrapper {
      flex: 0 1 auto;
      width: auto;
      margin: 0;
      min-width: min(100%, 100cqw, var(--content-width));
    }

    button.table-copy-btn.table-hover-copy-btn {
      position: absolute;
      z-index: 3;
      top: 5px;
      right: 5px;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: rgba(250, 250, 250, .96);
      color: var(--text);
      box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-2px);
      transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    }

    .table-copy-wrapper:hover > button.table-hover-copy-btn,
    .table-copy-wrapper:focus-within > button.table-hover-copy-btn,
    button.table-hover-copy-btn:focus-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    button.table-copy-btn.table-hover-copy-btn:hover,
    button.table-copy-btn.table-hover-copy-btn:focus-visible,
    button.table-copy-btn.table-hover-copy-btn.copied {
      outline: none;
      border-color: var(--border-card-hover);
      background: var(--hover-bg);
      color: var(--ink);
    }

    .table-copy-icon {
      position: relative;
      display: block;
      width: 14px;
      height: 14px;
    }

    .table-copy-icon::before,
    .table-copy-icon::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      border: 1.5px solid currentColor;
      border-radius: 3.5px;
    }

    .table-copy-icon::before {
      top: 1px;
      left: 4px;
    }

    .table-copy-icon::after {
      top: 4px;
      left: 1px;
    }

    button.table-hover-copy-btn.copied .table-copy-icon {
      display: none;
    }

    button.table-hover-copy-btn.copied::after {
      content: '✓';
      font-size: 14px;
      font-weight: 650;
      line-height: 1;
    }

    .answer-text table.md-table {
      border-collapse: collapse;
      border-spacing: 0;
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
      width: max-content;
      min-width: 100%;
      border: 0;
      border-radius: 0;
      overflow: visible;
      background: transparent;
      font-variant-numeric: tabular-nums;
    }

    .answer-text table.md-table thead,
    .answer-text table.md-table tbody,
    .answer-text table.md-table tr {
      width: auto;
    }

    .answer-text table.md-table th,
    .answer-text table.md-table td {
      border: 0;
      border-bottom: 1px solid rgba(148, 163, 184, 0.22);
      padding: 12px 20px;
      min-width: 72px;
      max-width: 240px;
      vertical-align: top;
      white-space: normal;
      overflow-wrap: normal;
    }

    .answer-text table.md-table th:first-child,
    .answer-text table.md-table td:first-child {
      padding-left: 0;
    }

    .answer-text table.md-table th:last-child,
    .answer-text table.md-table td:last-child {
      padding-right: 0;
    }

    .answer-text table.md-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .answer-text table.md-table thead th {
      border-bottom-color: rgba(148, 163, 184, 0.42);
      background: transparent;
      color: inherit;
      font-weight: 650;
      text-align: left;
    }

    .answer-text table.md-table tbody tr:nth-child(even) {
      background: transparent;
    }

    .analysis-chart {
      position: relative;
      width: 100%;
      max-width: 780px;
      margin: 24px 0 10px;
      color: var(--text);
    }

    .analysis-chart-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 10px;
    }

    .analysis-chart-copy {
      min-width: 0;
    }

    .analysis-chart-copy h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 650;
      line-height: 1.35;
    }

    .analysis-chart-copy p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .analysis-chart-menu {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      opacity: 0;
      pointer-events: auto;
      transition: opacity 140ms ease;
    }

    .analysis-chart:hover .analysis-chart-menu,
    .analysis-chart-menu:focus-within,
    .analysis-chart-menu.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .analysis-chart-menu-trigger {
      position: relative;
      z-index: 1;
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      padding: 0;
      border: 1px solid transparent;
      border-radius: var(--r-pill);
      background: var(--hover-bg);
      color: var(--text-soft);
      cursor: pointer;
      transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
    }

    .analysis-chart-menu-trigger:hover,
    .analysis-chart-menu-trigger:focus-visible,
    .analysis-chart-menu.is-open .analysis-chart-menu-trigger {
      background: var(--hover-bg);
      border-color: var(--border-soft);
      color: var(--ink);
      transform: translateY(-1px);
    }

    .analysis-chart-menu-trigger svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    .analysis-chart-menu-popover {
      position: absolute;
      z-index: 8;
      top: calc(100% + 4px);
      right: 0;
      width: max-content;
      min-width: 190px;
      padding: 5px;
      border: 1px solid var(--border-soft);
      border-radius: var(--r-lg);
      background: var(--surface);
      box-shadow: var(--shadow-float);
    }

    .analysis-chart-menu-popover button {
      display: block;
      width: 100%;
      padding: 9px 10px;
      border: 0;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }

    .analysis-chart-menu-popover button:hover,
    .analysis-chart-menu-popover button:focus-visible {
      background: var(--hover-bg);
      color: var(--ink);
    }

    .analysis-chart-menu-popover button:disabled {
      opacity: .5;
      cursor: default;
    }

    .analysis-chart-body {
      position: relative;
      width: 100%;
      height: 360px;
      overflow: hidden;
    }

    .analysis-chart-pie .analysis-chart-body {
      height: 300px;
    }

    .analysis-chart-map .analysis-chart-body {
      height: 374px;
    }

    .analysis-chart-plot {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .analysis-chart.is-table .analysis-chart-plot,
    .analysis-chart:not(.is-table) .chart-table-view {
      display: none !important;
    }

    .analysis-chart.is-table .chart-table-view {
      display: block !important;
    }

    .analysis-chart-plot .vega-embed,
    .analysis-chart-plot .vega-embed > div,
    .analysis-chart-plot svg,
    .analysis-chart-plot canvas {
      max-width: 100%;
    }

    /* Dense obec and katastr maps avoid a Vega selection because it recalculates
       every shape on each pointer move. One host class lets the browser dim the
       existing SVG paths directly, with no chart dataflow or geometry redraw. */
    .analysis-chart-map .analysis-chart-plot.has-map-hover .map-valued-marks path {
      opacity: .58;
    }

    .analysis-chart-map .analysis-chart-plot.has-map-hover .map-valued-marks path.is-map-hovered {
      opacity: 1;
      stroke-width: 1.8px;
    }

    .analysis-chart-tooltip {
      position: fixed;
      z-index: 1000;
      min-width: 190px;
      max-width: min(300px, calc(100vw - 24px));
      padding: 10px 11px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
      color: var(--text);
      font-family: var(--font-sans);
      pointer-events: none;
    }

    .analysis-chart-tooltip-map {
      width: min(340px, calc(100vw - 24px));
      max-width: min(380px, calc(100vw - 24px));
    }

    .analysis-chart-tooltip-title {
      margin-bottom: 7px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 650;
      line-height: 1.2;
    }

    .analysis-chart-tooltip-row {
      display: grid;
      grid-template-columns: 9px minmax(0, 1fr) auto;
      align-items: center;
      gap: 7px;
      min-height: 21px;
      font-size: 12px;
      line-height: 1.3;
    }

    .analysis-chart-tooltip-row.is-single-series {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .analysis-chart-tooltip-row.is-text {
      align-items: start;
    }

    .analysis-chart-tooltip-row.is-text .analysis-chart-tooltip-label {
      overflow: visible;
      color: var(--muted);
      text-overflow: clip;
      white-space: normal;
    }

    .analysis-chart-tooltip-row.is-text .analysis-chart-tooltip-value {
      overflow-wrap: anywhere;
      text-align: right;
      white-space: normal;
    }

    .analysis-chart-tooltip-map .analysis-chart-tooltip-row.is-single-series {
      grid-template-columns: minmax(108px, .8fr) minmax(0, 1.2fr);
      align-items: baseline;
      column-gap: 16px;
    }

    .analysis-chart-tooltip-map .analysis-chart-tooltip-row > .analysis-chart-tooltip-value {
      text-align: right;
    }

    .analysis-chart-tooltip-section-label {
      margin: 5px 0 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
    }

    .analysis-chart-tooltip-map .analysis-chart-tooltip-row.is-list-item {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      min-height: 19px;
    }

    .analysis-chart-tooltip-row.is-list-item .analysis-chart-tooltip-label {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }

    .analysis-chart-tooltip-row.is-list-item .analysis-chart-tooltip-value {
      text-align: right;
      white-space: nowrap;
    }

    .analysis-chart-tooltip-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }

    .analysis-chart-tooltip-label {
      min-width: 0;
      overflow: hidden;
      color: var(--text);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .analysis-chart-tooltip-value {
      color: var(--ink);
      font-size: 12px;
      font-weight: 650;
      font-variant-numeric: tabular-nums;
    }

    .chart-table-view {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .chart-table-view .table-copy-wrapper {
      min-height: 100%;
      margin: 0;
    }

    .chart-table-view .table-copy-scroll {
      min-height: 100%;
    }

    .chart-table-view table.md-table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--surface);
    }

    .analysis-chart.is-fallback .analysis-chart-menu-trigger {
      display: none;
    }

    @media (max-width: 720px) {
      .analysis-chart {
        margin-top: 20px;
      }

      .analysis-chart-body {
        height: 300px;
      }

      .analysis-chart-pie .analysis-chart-body {
        height: 270px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .analysis-chart-menu,
      .analysis-chart-menu-trigger {
        transition: none;
      }    }

    .answer-export-footer {
      margin: 18px 0 4px;
    }

    .answer-exports {
      display: none;
    }

    .answer-inspector-content .answer-exports {
      display: block !important;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-soft);
    }

    .answer-inspector-content .answer-exports::before {
      content: "Výstupy";
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .data-export-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .data-export-image {
      position: relative;
      margin: 0;
      width: fit-content;
      max-width: min(480px, 100%);
      border-radius: 24px;
      overflow: hidden;
    }

    .data-export-image-preview {
      display: block;
      width: fit-content;
      max-width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: zoom-in;
    }

    .data-export-image-preview img {
      display: block;
      width: auto;
      height: auto;
      max-width: min(480px, 100%);
      max-height: 480px;
    }

    /* A loading image has no intrinsic size, and `width: auto` above gives the
       browser nothing to derive a box from, so the figure would collapse and a
       reloaded page would read as an empty answer. The placeholder rebuilds the
       box the clamped image will occupy: the width formula is the same 480px
       and 100% clamps resolved against the ratio, so a portrait picture reserves
       a narrow box rather than a square one. Images published before the size
       was recorded, and SVG, fall back to 3:2. */
    /* The width lives on the figure. Asking the button for 100% of a
       `fit-content` figure that is itself sized by the button resolves to zero. */
    .data-export-image.is-loading {
      width: min(480px, 100%, calc(480px * var(--image-ratio, 1.5)));
    }

    .data-export-image.is-loading .data-export-image-preview {
      width: 100%;
      aspect-ratio: var(--image-ratio, 1.5);
      border-radius: 24px;
      background: var(--skeleton);
      background-size: 220% 100%;
      animation: subtleSkeleton 1.9s ease-in-out infinite;
      cursor: default;
    }

    .data-export-image.is-loading .data-export-image-preview img {
      opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .data-export-image.is-loading .data-export-image-preview {
        animation: none;
      }
    }

    .data-export-image-download {
      position: absolute;
      top: 12px;
      right: 12px;
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      color: #fff;
      background: rgb(0 0 0 / 65%);
      text-decoration: none;
    }

    .data-export-image-download:hover {
      background: rgb(0 0 0 / 85%);
    }

    .data-export-image-download svg {
      width: 18px;
      height: 18px;
    }

    .data-export-image-download:focus-visible,
    .data-export-image-preview:focus-visible {
      outline: 3px solid var(--accent, #477a36);
      outline-offset: -3px;
    }

    /* A generated interactive page takes the answer's full width: it is the
       output itself, not an attachment beside it. */
    .data-export-interactive {
      position: relative;
      flex: 1 1 100%;
      min-width: 0;
      margin: 0;
    }

    .data-export-interactive-frame {
      display: block;
      width: 100%;
      /* Until the page reports its height; see interactive-views.js. */
      height: min(70vh, 640px);
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #fff;
    }

    /* Hidden until its page reports a height; the figure holds the box. */
    .data-export-interactive-frame {
      transition: opacity .18s ease;
    }

    .data-export-interactive-frame[data-view-pending] {
      opacity: 0;
    }

    .data-export-interactive:has(> .data-export-interactive-frame[data-view-pending]) {
      border-radius: 16px;
      background: var(--skeleton);
    }

    @media (prefers-reduced-motion: reduce) {
      .data-export-interactive-frame {
        transition: none;
      }
    }

    .interactive-view-stopped {
      padding: 16px 18px;
      border: 1px solid var(--border);
      border-radius: 16px;
      color: var(--muted);
    }

    .data-export-file {
      appearance: none;
      display: inline-grid;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      width: min(480px, 100%);
      max-width: 100%;
      min-width: 0;
      min-height: 62px;
      padding: 10px 18px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      color: var(--ink);
      font: inherit;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
    }

    .data-export-entry {
      position: relative;
      display: inline-flex;
      width: min(480px, 100%);
      max-width: 100%;
    }

    .data-export-entry .data-export-file { width: 100%; padding-right: 50px; }
    .data-export-entry.has-secondary-action .data-export-file { padding-right: 82px; }

    .data-export-entry-actions {
      position: absolute;
      top: 50%;
      right: 9px;
      display: flex;
      align-items: center;
      gap: 2px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%);
      transition: opacity .14s ease;
    }

    .data-export-entry:hover .data-export-entry-actions,
    .data-export-entry:focus-within .data-export-entry-actions {
      opacity: 1;
      pointer-events: auto;
    }

    .data-export-direct-download,
    .data-export-workbook-switch {
      appearance: none;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font: inherit;
      text-decoration: none;
      letter-spacing: 1px;
      cursor: pointer;
    }

    .data-export-direct-download svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .data-export-direct-download:hover,
    .data-export-workbook-switch:hover { background: var(--hover-bg); color: var(--ink); }
    .data-export-direct-download:focus-visible,
    .data-export-workbook-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

    @media (hover: none) {
      .data-export-entry-actions { opacity: 1; pointer-events: auto; }
    }

    .data-export-file:has(.data-export-icon[data-visual-kind="image"]) {
      grid-template-columns: 36px minmax(0, 1fr);
    }

    .data-export-file .data-export-icon.chat-attachment-icon[data-visual-kind="spreadsheet"] svg {
      width: 31px;
      height: 31px;
    }

    .data-export-file:hover {
      background: var(--surface-inset);
      border-color: var(--border-card-hover);
      box-shadow: 0 3px 9px rgba(15, 23, 42, .06);
    }

    .data-export-file:active {
      transform: translateY(1px);
    }

    .data-export-file:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    .data-export-file.is-unavailable,
    .message-attachment.is-unavailable {
      cursor: not-allowed;
      opacity: .58;
      filter: grayscale(.35);
    }

    .data-export-file.is-unavailable:hover {
      background: var(--surface);
      border-color: var(--border);
      box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    }

    .data-export-icon.chat-attachment-icon {
      width: 32px;
      height: 32px;
      border-radius: 0;
      background: transparent;
      color: var(--green);
    }

    .data-export-icon.chat-attachment-icon[data-visual-kind="image"] {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--blue);
      color: var(--on-accent);
    }

    .data-export-icon.chat-attachment-icon[data-visual-kind="pdf"] {
      color: var(--red);
    }

    .data-export-icon.chat-attachment-icon[data-visual-kind="document"] { color: var(--blue); }
    .data-export-icon.chat-attachment-icon[data-visual-kind="presentation"] { color: var(--presentation); }

    .data-export-copy {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .data-export-name {
      overflow: hidden;
      color: var(--ink);
      font-size: 13px;
      font-weight: 500;
      line-height: 17px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .data-export-type {
      color: var(--muted);
      font-size: 11px;
      line-height: 15px;
    }

    .answer-inspector-content .data-export-group {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .answer-inspector-content .data-export-file {
      width: 100%;
      max-width: none;
      min-width: 0;
    }

    

    

    #send-btn {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent);
      color: var(--on-accent);
      border: none;
      border-radius: 999px;
      padding: 0;
      font-size: 17px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      box-shadow: none;
      transition: background 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
    }

    #send-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
    #send-btn svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #send-btn.is-voice-stop {
      background: var(--red);
    }
    #send-btn.is-voice-stop::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--surface);
      animation: voice-recording-pulse 1.35s ease-in-out infinite;
    }
    #send-btn.is-voice-finalizing,
    #send-btn.is-voice-finalizing:hover {
      background: var(--red);
      color: var(--surface);
      cursor: default;
      opacity: 1;
      transform: none;
    }
    #send-btn.is-voice-finalizing::before {
      content: "";
      width: 12px;
      height: 12px;
      box-sizing: border-box;
      border: 2px solid color-mix(in srgb, var(--surface) 42%, transparent);
      border-top-color: var(--surface);
      border-radius: 50%;
      animation: voice-input-spin .75s linear infinite;
    }
    @keyframes voice-input-spin { to { transform: rotate(360deg); } }
    @keyframes voice-recording-pulse {
      0%, 100% { opacity: .58; }
      50% { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      #send-btn.is-voice-stop::before,
      #send-btn.is-voice-finalizing::before { animation: none; }
    }
    #send-btn:disabled { background: var(--accent); color: var(--surface); opacity: 0.45; cursor: wait; transform: none; }
    #send-btn.is-stop {
      background: var(--accent);
      color: var(--on-accent);
    }
    #send-btn.is-stop::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--surface);
      display: block;
    }
    #send-btn.is-stop:hover {
      background: var(--accent-hover);
    }
    #send-btn.is-uploading,
    #send-btn.is-uploading:hover {
      background: var(--muted);
      color: var(--surface);
      cursor: default;
      opacity: 1;
      transform: none;
    }
    #send-btn.is-uploading::before {
      content: "";
      width: 13px;
      height: 13px;
      box-sizing: border-box;
      border: 2px solid color-mix(in srgb, var(--surface) 38%, transparent);
      border-top-color: var(--surface);
      border-radius: 50%;
      animation: voice-input-spin .72s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      #send-btn.is-uploading::before { animation: none; }
    }

    .loading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 14px;
      width: 100%;
    }
    .loading .dot {
      width: 6px;
      height: 6px;
      background: var(--green-border);
      border-radius: 50%;
      animation: blink 1.4s infinite both;
    }

    .loading .dot:nth-of-type(2) { animation-delay: 0.2s; }
    .loading .dot:nth-of-type(3) { animation-delay: 0.4s; }

    @keyframes blink {
      0%, 80%, 100% { opacity: 0.2; }
      40% { opacity: 1; }
    }

    .empty-state {
      width: min(680px, calc(100% - 48px));
      margin: 15vh auto 0;
      text-align: center;
      color: var(--faint);
      padding: 0 12px;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .empty-state h2 { font-size: 22px; color: #e5e7eb; margin: 0 0 10px; letter-spacing: -0.03em; font-weight: 600; }
    .empty-state p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--faint); }

    @keyframes subtleSkeleton {
      0% { background-position: 110% 0; opacity: 0.62; }
      50% { opacity: 1; }
      100% { background-position: -110% 0; opacity: 0.62; }
    }.table-copy-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--green);
      border: none;
      color: var(--ink-strong);
      border-radius: 8px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
      white-space: nowrap;
      vertical-align: middle;
    }

    .table-copy-btn:hover {
      background: var(--green);
    }

    .table-copy-btn.copied {
      background: var(--green);
    }

    .input-wrap {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      background: #0f1117;
      border: 1px solid var(--border);
      border-radius: 24px;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, border-radius 0.18s ease;
      min-height: 52px;
      box-shadow: 0 10px 26px rgba(2, 6, 23, 0.16);
    }
    .input-wrap.composer-resizing { overflow: hidden; }
    .input-wrap:focus-within { border-color: #4ade80; box-shadow: 0 12px 30px rgba(34, 197, 94, 0.14); }

    .composer-text-pane {
      flex: 0 0 auto;
      min-height: 50px;
      max-height: 50px;
      overflow: hidden;
      scrollbar-gutter: stable;
    }

    .composer-text-pane.is-scrolled {
      -webkit-mask-image: linear-gradient(to bottom, transparent 0 4px, #000 16px, #000 100%);
      mask-image: linear-gradient(to bottom, transparent 0 4px, #000 16px, #000 100%);
    }

    .composer-footer {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 2;
      padding: 0;
      pointer-events: none;
    }

    .composer-footer::before {
      content: none;
    }

    .composer-footer > * {
      pointer-events: auto;
      position: relative;
      z-index: 1;
    }

    .composer-footer-spacer {
      display: block;
      flex: 1;
      min-width: 12px;
      pointer-events: none;
    }

    .voice-input-status {
      overflow: hidden;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
    }

    .voice-input-status.is-error { color: var(--red); }

    .voice-input-status.is-listening {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .input-wrap.multiline {
      min-height: 82px;
      border-radius: 24px;
    }

    .input-wrap.multiline .composer-text-pane {
      flex: 0 0 auto;
      min-height: 0;
      max-height: min(42vh, 320px);
      overflow-y: auto;
    }

    .input-wrap.multiline .question-input {
      padding: 10px 18px;
    }

    .input-wrap.multiline .composer-footer {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      transform: none;
      flex: 0 0 44px;
      width: 100%;
      height: 44px;
      padding: 0 8px 8px;
    }

    .input-wrap.multiline .composer-footer::before {
      content: none;
    }