/* ── Workbook panel ───────────────────────────────────────────
       Wide right-hand panel for reading a generated .xlsx in place.
       Separate from the answer inspector: it needs far more width, and
       only one of the two is ever open. */
    /* `display: flex` outranks the UA's [hidden] rule, so the closed panel
       has to be hidden explicitly or it covers the page. */
    .workbook-panel[hidden] { display: none; }

    .workbook-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: var(--workbook-panel-width);
      /* Above the answer inspector (120): both claim the right edge, and the
         file you just opened is the one you meant to look at. */
      z-index: 130;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-left: 1px solid var(--border);
      box-shadow: var(--shadow-float);
    }

    .workbook-panel-head {
      flex: 0 0 auto;
      padding: 12px 14px 0;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    .workbook-panel-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    .workbook-panel-name {
      min-width: 0;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .workbook-panel-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
    }

    .workbook-panel-status {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 500;
      white-space: nowrap;
    }

    .workbook-panel-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 0 0 auto;
    }

    .workbook-panel-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      transition: background var(--dur), color var(--dur);
    }

    .workbook-panel-action[hidden],
    .workbook-panel-action svg[hidden] {
      display: none !important;
    }

    .workbook-panel-action:hover { background: var(--hover-bg); color: var(--ink); }

    .workbook-panel-action svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .workbook-history-control {
      position: relative;
      flex: 0 0 30px;
      width: 30px;
      height: 30px;
    }

    .workbook-history-control:has(.workbook-panel-action[hidden]) { display: none; }

    .workbook-panel-history-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 2;
      width: max-content;
      min-width: 112px;
      max-width: min(280px, calc(100vw - 28px));
      max-height: min(360px, 55vh);
      overflow-y: auto;
      padding: 5px;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      box-shadow: var(--shadow-float);
    }

    .workbook-panel-history-menu[hidden] { display: none; }

    .workbook-history-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 30px;
      align-items: center;
      border-radius: var(--r-sm);
    }

    .workbook-history-row:hover,
    .workbook-history-row.is-current { background: var(--hover-bg); }

    .workbook-history-open,
    .workbook-history-download {
      border: 0;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
    }

    .workbook-history-open {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 0;
      padding: 8px 9px;
      text-align: left;
    }

    .workbook-history-open span {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12.5px;
    }

    .workbook-history-open small,
    .workbook-history-empty { color: var(--muted); font-size: 11.5px; }

    .workbook-history-download {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: var(--r-sm);
    }

    .workbook-history-download:hover { background: var(--surface); }
    .workbook-history-download svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
    .workbook-history-empty { padding: 12px; text-align: center; }

    .workbook-sheet-tabs[hidden] { display: none; }

    /* Sheet tabs live inside the header and sit on its bottom border, so the
       active one reads as continuous with the grid below. */
    .workbook-sheet-tabs {
      display: flex;
      gap: 2px;
      margin: 10px -14px -1px;
      padding: 0 14px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .workbook-sheet-tabs::-webkit-scrollbar { height: 0; }

    .workbook-sheet-tab {
      border: 1px solid transparent;
      border-bottom: 0;
      background: transparent;
      color: var(--muted);
      padding: 6px 12px;
      border-radius: var(--r-sm) var(--r-sm) 0 0;
      font-size: 12.5px;
      line-height: 1.5;
      cursor: pointer;
      white-space: nowrap;
      transition: background var(--dur), color var(--dur);
    }

    .workbook-sheet-tab:hover { background: var(--hover-bg); color: var(--ink); }

    .workbook-sheet-tab.active {
      background: var(--surface);
      border-color: var(--border);
      color: var(--ink);
      font-weight: 600;
    }

    /* The grid is the panel's whole point, so its scrollbars stay put instead of
       fading out like the app's auto-hiding ones -- they double as the only cue
       that there is more sheet off-screen. */
    .workbook-grid-wrap {
      flex: 1;
      overflow: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb-strong) transparent;
      transition: none;
    }

    .workbook-grid-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
    .workbook-grid-wrap::-webkit-scrollbar-track { background: transparent; }

    .workbook-grid-wrap::-webkit-scrollbar-thumb,
    .workbook-grid-wrap.is-scrolling::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb-strong);
      border: 2px solid var(--surface);
      border-radius: 999px;
      transition: none;
    }

    .workbook-grid-wrap::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
    .workbook-grid-wrap::-webkit-scrollbar-corner { background: transparent; }

    .workbook-grid {
      border-collapse: separate;
      border-spacing: 0;
      font-size: 12.5px;
      font-variant-numeric: tabular-nums;
    }

    .workbook-grid th,
    .workbook-grid td {
      border-right: 1px solid var(--border-soft);
      border-bottom: 1px solid var(--border-soft);
      padding: 5px 8px;
      text-align: left;
      vertical-align: top;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .workbook-grid thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--surface-inset);
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      text-align: center;
    }

    .workbook-rownum-col { width: 44px; }

    .workbook-grid .workbook-rownum {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--surface-inset);
      color: var(--faint);
      font-size: 11px;
      font-weight: 500;
      text-align: right;
    }

    .workbook-grid thead .workbook-rownum { z-index: 3; }
    .workbook-grid td.numeric { text-align: right; }
    .workbook-grid td.frozen-row { background: var(--surface-inset); font-weight: 600; color: var(--ink); }
    .workbook-grid tbody tr:hover td:not(.frozen-row) { background: var(--hover-bg); }

    .workbook-empty {
      display: grid;
      place-items: center;
      min-height: 180px;
      padding: 24px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    .workbook-empty.workbook-error { color: var(--red); }

    .workbook-loader {
      width: 18px;
      height: 18px;
      border: 2px solid var(--border);
      border-top-color: var(--muted);
      border-radius: 50%;
      animation: spin .75s linear infinite;
    }

    body:is(.workbook-panel-open, .file-preview-open) #chat-area {
      padding-right: calc(var(--workbook-panel-width) + var(--main-pad));
    }

    body:is(.workbook-panel-open, .file-preview-open) #input-area {
      right: var(--workbook-panel-width);
    }

    @media (max-width: 900px) {
      .workbook-panel { width: 100%; }
      body:is(.workbook-panel-open, .file-preview-open) #chat-area { padding-right: var(--main-pad); }
      body:is(.workbook-panel-open, .file-preview-open) #input-area { right: 0; }
    }

    /* Phone-shaped previews already occupy the whole screen. Offering another
       fullscreen action there changes nothing, so keep only download and close. */
    @media (max-aspect-ratio: 4 / 5) {
      #workbook-panel-expand,
      #file-preview-expand {
        display: none;
      }

      /* On a phone the panel fills the screen, and its controls belong under the
         thumb rather than up at the top edge. The head keeps its source order for
         screen readers and moves visually. */
      .workbook-panel { flex-direction: column-reverse; }
      .workbook-panel-head {
        padding: 0 14px 12px;
        border-top: 1px solid var(--border);
        border-bottom: 0;
      }

      /* The workbook panel spends that bottom padding on its sheet tabs, which
         sit under the bar. The file preview has none -- its tabs, when the file
         is a workbook, are drawn inside the frame -- so the bar was left hard
         against the top border with 12px under it. Centre it in the bar it owns. */
      #file-preview-panel .workbook-panel-head {
        padding-top: 12px;
      }
      /* The menu opens from a bar at the bottom, so it has to grow upwards. */
      .workbook-panel-history-menu {
        top: auto;
        bottom: calc(100% + 8px);
      }
    }

    /* Fullscreen is the same panel widened to the window, so the toolbar, the
       download and the close button all stay where the reader left them. */
    .workbook-panel.is-fullscreen {
      left: 0;
      width: 100%;
      border-left: 0;
    }

    .file-preview-body {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      overflow: auto;
      background: var(--surface-page);
    }
    /* An iframe has its own document and its own scroll position. Let it be the
       sole scroll container, otherwise this wrapper can add a second vertical
       rail at the panel edge. Text and images still use the wrapper above. */
    .file-preview-body:has(> .file-preview-frame) { overflow: hidden; }
    .file-preview-frame {
      flex: 1 1 auto;
      width: 100%;
      border: 0;
    }
    /* Converting a large workbook takes tens of seconds. The frame is kept out of
       the layout until it has loaded so the panel shows the loader rather than a
       blank rectangle that reads as a broken preview. */
    .file-preview-frame.is-loading {
      position: absolute;
      width: 0;
      height: 0;
      visibility: hidden;
    }
    .file-preview-image {
      display: block;
      max-width: 100%;
      margin: auto;
      padding: 16px;
      object-fit: contain;
    }
    .file-preview-text {
      flex: 1 1 auto;
      padding: 20px 22px;
      background: var(--surface);
      color: var(--text);
      font-size: 14px;
      line-height: 1.7;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .file-preview-status {
      flex: 1 1 auto;
      display: grid;
      place-items: center;
      padding: 24px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }