/*
 * UI · css/responsive.css · fits every screen at 100% zoom (large monitors, 1366/1280 laptops, tablets, phones),
 * the calm Documents layout, and an AI panel whose input and Send button are always visible.
 * Only media queries and layout rules: no extra script work while scrolling or resizing.
 */

/* ---------------------------------------------------------------- AI panel: header and input fixed, the chat scrolls */
.ai-panel:not([hidden]) { display: flex !important; flex-direction: column; top: 0; bottom: auto; height: 100vh; height: 100dvh; max-height: 100dvh; }
.ai-panel > * { flex: none; }
.ai-panel > .ai-log { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ai-head { background: var(--brand-deep) !important; }
.ai-form { align-items: flex-end; padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important; background: #fff; }
.ai-form textarea { min-width: 0; max-height: 30vh; border-radius: 12px !important; padding: 10px 12px !important; }
#ai-send { flex: none; white-space: nowrap; height: 42px; padding: 0 18px; border-radius: 12px; }

/* ---------------------------------------------------------------- calm Documents page */
.lib-kpis { display: none !important; }                        /* counts live in the subtitle line */
.lib-head { padding: 14px 20px 0; }
.lib-tabs { border-bottom: 0; gap: 6px; margin: 10px 0 8px; }
.lib-tabs button { border: 1px solid #E3E8F2 !important; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }
.lib-tabs button[aria-selected="true"] { background: #EEF3FF; border-color: #C9D7FB !important; }
.toolbar { display: none !important; }                         /* Upload is in the top bar, Refresh in the list bar */
.listbar { padding: 6px 16px !important; background: #fff !important; }
.list-refresh, .list-filters { display: inline-grid; place-items: center; width: 32px; height: 30px; border: 1px solid #E3E8F2; border-radius: 8px;
  background: #fff; color: #5B6782; cursor: pointer; }
.list-refresh:hover, .list-filters:hover, .list-filters[aria-pressed="true"] { color: var(--brand); border-color: #C9D7FB; background: #EEF3FF; }
.list-refresh .ic, .list-filters .ic { width: 16px; height: 16px; }
/* fewer default columns: Type, Version, Published and Size are in the line under the title and in Properties */
.grid-wrap:not(.cards) .grid tr > :nth-child(6), .grid-wrap:not(.cards) .grid tr > :nth-child(7),
.grid-wrap:not(.cards) .grid tr > :nth-child(9), .grid-wrap:not(.cards) .grid tr > :nth-child(10) { display: none; }
.grid-wrap:not(.show-filters) .grid .filter-row { display: none; }
.grid tbody tr td { height: 56px; }
.owner-chip { display: inline-flex; align-items: center; gap: 8px; }
.owner-chip i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E8EFFF; color: var(--brand);
  font: 700 10.5px/1 Roboto, sans-serif; font-style: normal; }

/* ---------------------------------------------------------------- laptops (1500px and below): icon sidebar */
@media (max-width: 1500px) {
  :root { --rail-w: 72px; }
  .appbar-actions { padding: 12px 8px !important; }
  .appbar-actions .top-action { justify-content: center !important; padding: 0 !important; }
  .appbar-actions .top-action > span:not(.badge):not(.ic-wrap) { display: none; }
  .appbar-actions .badge { position: absolute !important; top: 2px; right: 6px; }
  .side-logo { justify-content: center; padding: 4px 0 14px !important; }
  .side-logo .logo-stack { display: none !important; }
  .workspace { --left-w: clamp(210px, 19vw, 270px); --preview-w: 42%; padding: 8px !important; }
  .workspace, .workspace.has-preview { grid-template-columns: var(--left-w) 6px minmax(280px, 1fr); }
  .workspace.has-preview { grid-template-columns: var(--left-w) 6px minmax(280px, 1fr) 6px var(--preview-w); }
  .appbar { padding: 0 14px !important; gap: 10px !important; }
  #top-profile span { display: none; }
  .lib-titlebar h1 { font-size: 21px; }
}

/* ---------------------------------------------------------------- small laptops and tablets (1100px and below) */
@media (max-width: 1100px) {
  .workspace, .workspace.has-preview { grid-template-columns: minmax(0, 1fr) !important; position: relative; }
  .workspace > .splitter { display: none !important; }
  .workspace > .leftpanel { position: fixed; z-index: 40; top: var(--top-h); bottom: 0; left: var(--rail-w); width: min(300px, 86vw);
    transform: translateX(-110%); transition: transform .2s ease; box-shadow: 0 16px 40px rgba(11, 21, 51, .25); }
  body.folders-open .workspace > .leftpanel { transform: none; }
  .workspace > #preview:not([hidden]) { position: fixed; z-index: 45; top: var(--top-h); right: 0; bottom: 0; left: var(--rail-w); width: auto !important; }
  .folders-btn { display: inline-flex !important; }
  .appbar .quick-search::after { display: none; }
  .tenant-chip .tenant-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.folders-btn { display: none; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid #E3E8F2; border-radius: 8px; background: #fff;
  color: #344054; font-size: 13px; cursor: pointer; margin-right: 6px; }
.folders-btn .ic { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- phones (760px and below): bottom navigation */
@media (max-width: 760px) {
  :root { --rail-w: 0px; --top-h: 56px; }
  #app-view { padding-left: 0 !important; padding-bottom: 62px; }
  .appbar-actions { top: auto !important; bottom: 0 !important; left: 0; right: 0; width: 100% !important; height: 62px; padding: 4px 6px !important;
    flex-direction: row !important; overflow-x: auto; overflow-y: hidden; gap: 2px !important; z-index: 50; }
  .appbar-actions .side-logo, #top-history, #top-bookmarks, #top-settings, #top-analytics { display: none !important; }
  .appbar-actions .top-action { flex: 0 0 auto; width: 58px; height: 54px; flex-direction: column !important; gap: 2px !important; margin: 0 !important; }
  .appbar-actions .top-action > span:not(.badge):not(.ic-wrap) { display: block; font-size: 10px; }
  #top-logout { border-top: 0; margin-top: 0 !important; }
  .appbar { height: var(--top-h) !important; padding: 0 10px !important; }
  .tenant-chip { display: none !important; }
  .top-upload span { display: none; }
  .top-upload { padding: 0 12px; }
  .workspace { padding: 0 !important; }
  .workspace > .leftpanel { left: 0; top: var(--top-h); bottom: 62px; }
  .workspace > #preview:not([hidden]) { left: 0; top: 0; bottom: 0; z-index: 70; }
  #dash[open] { inset: var(--top-h) 0 62px 0 !important; }
  .lib-head { padding: 10px 12px 0; }
  .lib-titlebar h1 { font-size: 19px; }
  .grid-wrap:not(.cards) .grid tr > :nth-child(1), .grid-wrap:not(.cards) .grid tr > :nth-child(5),
  .grid-wrap:not(.cards) .grid tr > :nth-child(8) { display: none; }
  .tcell { padding-right: 0 !important; }
  .row-acts { display: none !important; }
  .listbar .pager label:first-child { display: none; }
  .center-split { min-height: 60vh; }
  .ai-panel { width: 100vw !important; }
  .welcome { display: none !important; }
}

/* the header (and the sidebar inside it) stays above the Folders drawer and the docked preview */
.appbar { z-index: 55 !important; }
.appbar-actions .ic-wrap { display: inline-grid !important; place-items: center; position: relative; flex: none; }
.appbar-actions .ic-wrap .badge { position: absolute !important; top: -6px; right: -9px; }
/* History fits in the sidebar now (the old rule hid it when everything was in one header row) */
@media (min-width: 761px) { #top-history:not([hidden]) { display: flex !important; } }