/* fv-toolbar.css — collapsible viewer toolbar.
   Inherits the tokens already declared in index.html's :root. */

#fvt-bar {
  position: relative;
  z-index: 30;
  flex-shrink: 0;
  background: rgba(10, 15, 26, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  padding-top: env(safe-area-inset-top, 0px);
  font-family: var(--ui, system-ui, sans-serif);
}

/* ── Row 1: always visible, deliberately short ───────────────────────── */
.fvt-main {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 46px;
  padding: 0 6px;
}

.fvt-name {
  flex: 1;
  min-width: 0;            /* lets the filename truncate instead of pushing */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4px;
  line-height: 1.15;
}
#fvt-title {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text, #e8edf5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#fvt-meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.62rem;
  color: var(--text-off, #4a5a78);
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.fvt-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--text-dim, #8a9ab8);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fvt-icon:hover { background: rgba(255, 255, 255, 0.06); color: var(--text, #e8edf5); }
.fvt-icon:active { background: rgba(255, 255, 255, 0.1); }
.fvt-icon:focus-visible { outline: 2px solid var(--teal, #2de0c4); outline-offset: -2px; }

#fvt-toggle svg { transition: transform 0.18s; }
#fvt-bar.collapsed #fvt-toggle svg { transform: rotate(180deg); }

/* ── Row 2: file-type tools, horizontally scrollable ─────────────────── */
.fvt-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-height: 46px;
  opacity: 1;
  transition: max-height 0.18s ease, opacity 0.14s ease, padding 0.18s ease;
}
.fvt-tools::-webkit-scrollbar { display: none; }

#fvt-bar.collapsed .fvt-tools {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.fvt-tool {
  flex-shrink: 0;
  background: var(--bg-card, #121b2e);
  color: var(--text-dim, #8a9ab8);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  border-radius: 6px;
  padding: 6px 11px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  min-height: 30px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fvt-tool:hover {
  color: var(--text, #e8edf5);
  border-color: var(--border-t, rgba(45, 224, 196, 0.28));
}
.fvt-tool:active { background: var(--bg-surface, #0d1424); }
.fvt-tool:focus-visible { outline: 2px solid var(--teal, #2de0c4); outline-offset: 1px; }

.fvt-sep {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--border, rgba(255, 255, 255, 0.1));
  margin: 0 3px;
}
.fvt-hint {
  flex-shrink: 0;
  font-size: 0.66rem;
  color: var(--text-off, #4a5a78);
  padding-left: 4px;
  white-space: nowrap;
}

/* ── Transient status line ───────────────────────────────────────────── */
.fvt-flash {
  max-height: 0;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--teal, #2de0c4);
  background: rgba(45, 224, 196, 0.08);
  transition: max-height 0.18s ease, padding 0.18s ease;
  padding: 0 12px;
}
.fvt-flash.show { max-height: 72px; padding: 7px 12px; }
.fvt-flash.bad { color: #ffb4a0; background: rgba(239, 68, 68, 0.1); }

/* ── Screen economy ──────────────────────────────────────────────────── */
/* The measurement strip only applies to rasters. Hidden elsewhere it
   returns 190px of report area on every other file type. */
.fv-measure-bar.hidden { display: none; }
#fv-img-wrap:not(.measuring) { padding-bottom: 0; }

/* Phones: shorter rows, and the type label goes — the filename already
   says what it is, and vertical space is the scarce resource. */
@media (max-width: 560px) {
  .fvt-main { height: 42px; gap: 2px; }
  .fvt-icon { width: 36px; height: 36px; }
  #fvt-title { font-size: 0.8rem; }
  #fvt-meta { display: none; }
  .fvt-tool { padding: 6px 9px; font-size: 0.65rem; }
  .fvt-hint { display: none; }
}

/* Landscape on a phone is the worst case: ~375px tall. Collapse the tool
   row by default there so the report gets the screen. */
@media (max-height: 460px) {
  .fvt-main { height: 38px; }
  .fvt-tools { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
  #fvt-bar:not(.collapsed) .fvt-tools {
    max-height: 44px; opacity: 1; padding-bottom: 7px;
  }
}

/* Wide screens can afford to show everything at once. */
@media (min-width: 900px) {
  .fvt-main { height: 50px; padding: 0 10px; }
  .fvt-tools { padding: 0 12px 9px; }
  #fvt-title { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fvt-tools, .fvt-flash, .fvt-icon, .fvt-tool, #fvt-toggle svg { transition: none; }
}

/* Wrapping toggles used by the tool row */
#fv-json.nowrap { white-space: pre; }
.fv-csv-scroll.nowrap td, .fv-csv-scroll.nowrap th { white-space: nowrap; }

/* ── Measurement drawer ──────────────────────────────────────────────────
   Measurement needs more than a tool row: a scale readout that says
   whether the numbers mean anything, a list of what has been measured, and
   four export buttons. That does not fit inline, so it drops down — and
   only when asked for, because a permanent panel was costing 190px on
   every file including 3D scenes that cannot be measured at all. */
.fvt-drawer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: 1px solid transparent;
  transition: max-height .2s ease, opacity .16s ease, border-color .2s;
}
#fvt-bar.drawer-open .fvt-drawer {
  max-height: 46vh;
  opacity: 1;
  overflow-y: auto;
  border-top-color: var(--border, rgba(255,255,255,.07));
}
/* Collapsing the whole bar collapses the drawer with it. */
#fvt-bar.collapsed .fvt-drawer { max-height: 0; opacity: 0; border-top-color: transparent; }

.fvt-drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 6px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .66rem; letter-spacing: .04em;
  color: var(--text-off, #4a5a78);
}
#fvt-scale { flex: 1; min-width: 0; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
#fvt-scale.ok { color: var(--teal, #2de0c4); }
.fvt-icon.fvt-sm { width: 28px; height: 28px; border-radius: 6px; }

.fvt-measure-list { padding: 0 10px 6px; display: grid; gap: 3px; }
.fvt-mrow {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 5px;
  background: rgba(255,255,255,.03); font-size: .76rem;
}
.fvt-mtype {
  font-family: var(--mono, ui-monospace, monospace); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-off, #4a5a78); min-width: 56px;
}
.fvt-mval { font-family: var(--mono, ui-monospace, monospace);
            font-weight: 600; color: var(--text, #e8edf5); }
.fvt-msec { font-size: .68rem; color: var(--text-dim, #8a9ab8); }
.fvt-mdel {
  margin-left: auto; background: none; border: 0;
  color: var(--text-off, #4a5a78); font-size: 1rem; line-height: 1;
  padding: 2px 6px; cursor: pointer;
}
.fvt-mdel:hover { color: var(--danger, #ef4444); }
.fvt-mempty { font-size: .72rem; color: var(--text-off, #4a5a78);
              padding: 6px 2px; line-height: 1.45; }

.fvt-drawer-exports {
  display: flex; gap: 5px; padding: 4px 10px 10px;
  overflow-x: auto; scrollbar-width: none;
}
.fvt-drawer-exports::-webkit-scrollbar { display: none; }
.fvt-tool[disabled] { opacity: .4; cursor: not-allowed; }

/* Active tool */
.fvt-tool.on {
  background: var(--teal, #2de0c4);
  color: #070c16;
  border-color: var(--teal, #2de0c4);
  font-weight: 600;
}

/* The legacy fv-measure bar is never shown once the toolbar is present. */
.fv-measure-bar { display: none !important; }

@media (max-height: 460px) { #fvt-bar.drawer-open .fvt-drawer { max-height: 38vh; } }
@media (prefers-reduced-motion: reduce) { .fvt-drawer { transition: none; } }