/* ==========================================================================
   Vers3Dynamics Engineering Intelligence — Visual Search Studio
   Windows 95 / Visual Studio 6.0 skin. Full-viewport, zero-scroll IDE.
   ========================================================================== */

:root {
  /* Authentic Win95 design tokens */
  --win-bg: #c0c0c0;
  --win-shadow-dark: #404040;
  --win-shadow-light: #808080;
  --win-highlight: #ffffff;
  --win-blue: #000080;
  --win-blue-light: #1084d0;

  /* Supporting tokens (needed for authentic double bevels) */
  --win-face-light: #dfdfdf;
  --win-black: #000000;
  --win-desktop: #008080; /* classic teal desktop */
  --win-selection: #000080;

  --title-h: 20px;
  --menu-h: 21px;
  --status-h: 22px;
  --sidebar-w: 260px;

  --font-ui: "MS Sans Serif", "Tahoma", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Consolas", "Lucida Console", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
/* The [hidden] attribute must win over class rules that set `display`
   (e.g. the dialog overlay's `display:grid`). */
[hidden] { display: none !important; }

body {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.35;
  color: var(--win-black);
  background: var(--win-desktop);
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
  cursor: default;
  user-select: none;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   3D bevels — raised (highlight top-left, shadow bottom-right); sunken reverses.
   -------------------------------------------------------------------------- */
.raised {
  background: var(--win-bg);
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
}
.sunken {
  background: var(--win-highlight);
  box-shadow:
    inset -1px -1px 0 var(--win-highlight),
    inset  1px  1px 0 var(--win-shadow-dark),
    inset -2px -2px 0 var(--win-face-light),
    inset  2px  2px 0 var(--win-shadow-light);
}
/* A single thin sunken groove (for status cells / small insets) */
.groove {
  box-shadow:
    inset -1px -1px 0 var(--win-highlight),
    inset  1px  1px 0 var(--win-shadow-light);
}

/* --------------------------------------------------------------------------
   Application window (fills the viewport like a maximized MDI frame)
   -------------------------------------------------------------------------- */
.app-window {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--win-bg);
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
  padding: 3px;
}

/* Title bar --------------------------------------------------------------- */
.titlebar {
  height: var(--title-h);
  min-height: var(--title-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--win-blue) 0%, var(--win-blue-light) 100%);
  color: var(--win-highlight);
  font-weight: bold;
}
.titlebar-icon { font-size: 12px; line-height: 1; }
.titlebar-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: .2px;
}
.titlebar-controls { display: flex; gap: 2px; }
.tb-btn {
  width: 16px; height: 14px;
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 9px; font-weight: bold;
  color: var(--win-black);
  background: var(--win-bg);
  border: 0;
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
  cursor: default;
}
.tb-btn:active {
  box-shadow:
    inset  1px  1px 0 var(--win-shadow-dark),
    inset -1px -1px 0 var(--win-highlight),
    inset  2px  2px 0 var(--win-shadow-light),
    inset -2px -2px 0 var(--win-face-light);
}

/* Menu bar ---------------------------------------------------------------- */
.menubar {
  height: var(--menu-h);
  min-height: var(--menu-h);
  display: flex;
  align-items: stretch;
  margin-top: 2px;
  padding: 1px 0;
}
.menu {
  display: flex; align-items: center;
  padding: 0 8px;
  cursor: default;
}
.menu:hover, .menu.open {
  color: var(--win-highlight);
  background: var(--win-blue);
}
.menu u { text-decoration: underline; }

/* Menu dropdown popup */
.menu-popup {
  position: absolute;
  z-index: 100;
  min-width: 180px;
  padding: 2px;
  background: var(--win-bg);
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
}
.menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 20px 3px 22px;
  white-space: nowrap;
  cursor: default;
}
.menu-item .mi-count { margin-left: auto; color: var(--win-shadow-light); font-family: var(--font-mono); }
.menu-item:hover { color: var(--win-highlight); background: var(--win-blue); }
.menu-item:hover .mi-count { color: #b8c8ff; }
.menu-item.disabled { color: var(--win-shadow-light); }
.menu-item.disabled:hover { color: var(--win-shadow-light); background: transparent; }
.menu-sep { height: 0; margin: 2px 2px; border-top: 1px solid var(--win-shadow-light); border-bottom: 1px solid var(--win-highlight); }

/* Toolbar / search -------------------------------------------------------- */
.toolbar {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px; padding: 3px 4px;
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
}
.toolbar-search { display: flex; align-items: center; gap: 6px; flex: 1; }
.tb-label { color: var(--win-black); padding-left: 2px; }

.field {
  font-family: var(--font-ui); font-size: 11px; color: var(--win-black);
  background: var(--win-highlight);
  border: 0;
  padding: 3px 4px;
  box-shadow:
    inset -1px -1px 0 var(--win-highlight),
    inset  1px  1px 0 var(--win-shadow-dark),
    inset -2px -2px 0 var(--win-face-light),
    inset  2px  2px 0 var(--win-shadow-light);
  outline: none;
}
.toolbar-search .field { flex: 1; }
.field:focus { outline: none; }

.combo {
  font-family: var(--font-ui); font-size: 11px; color: var(--win-black);
  background: var(--win-highlight);
  border: 0;
  padding: 2px 2px;
  box-shadow:
    inset -1px -1px 0 var(--win-highlight),
    inset  1px  1px 0 var(--win-shadow-dark),
    inset -2px -2px 0 var(--win-face-light),
    inset  2px  2px 0 var(--win-shadow-light);
}

.btn {
  font-family: var(--font-ui); font-size: 11px; color: var(--win-black);
  min-width: 66px;
  padding: 4px 10px;
  background: var(--win-bg);
  border: 0;
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
  cursor: default;
}
.btn:focus { outline: 1px dotted var(--win-black); outline-offset: -4px; }
.btn:active {
  padding: 5px 9px 3px 11px;
  box-shadow:
    inset  1px  1px 0 var(--win-shadow-dark),
    inset -1px -1px 0 var(--win-highlight),
    inset  2px  2px 0 var(--win-shadow-light),
    inset -2px -2px 0 var(--win-face-light);
}
.btn-default { font-weight: bold; }

/* Main split -------------------------------------------------------------- */
.main {
  flex: 1;
  display: flex;
  min-height: 0;
  margin-top: 3px;
  gap: 0;
}
.pane { display: flex; flex-direction: column; min-height: 0; }
.sidebar { width: var(--sidebar-w); min-width: 160px; }
.content { flex: 1; min-width: 0; }
.splitter {
  width: 3px;
  background: var(--win-bg);
  box-shadow: inset 1px 0 0 var(--win-highlight), inset -1px 0 0 var(--win-shadow-light);
  cursor: col-resize;
}
.pane-title {
  font-weight: bold;
  padding: 2px 4px;
  color: var(--win-black);
  background: var(--win-bg);
}
.pane-title .muted { font-weight: normal; color: var(--win-shadow-light); }

/* Tree-view explorer ------------------------------------------------------ */
.tree {
  flex: 1;
  overflow: auto;
  background: var(--win-highlight);
  padding: 4px 2px;
  box-shadow:
    inset -1px -1px 0 var(--win-highlight),
    inset  1px  1px 0 var(--win-shadow-dark),
    inset -2px -2px 0 var(--win-face-light),
    inset  2px  2px 0 var(--win-shadow-light);
}
.tree-group { margin-bottom: 4px; }
.tree-root {
  display: flex; align-items: center; gap: 4px;
  padding: 1px 4px; font-weight: bold;
}
.tree-node {
  display: flex; align-items: center; gap: 5px;
  padding: 1px 4px 1px 18px;
  white-space: nowrap;
  cursor: default;
}
.tree-node .tn-icon { width: 14px; text-align: center; }
.tree-node .tn-count { margin-left: auto; padding-left: 8px; color: var(--win-shadow-light); font-family: var(--font-mono); }
.tree-node:hover { background: #d7e3ff; }
.tree-node.active {
  background: var(--win-selection);
  color: var(--win-highlight);
}
.tree-node.active .tn-count { color: #b8c8ff; }
.tree-indent { padding-left: 30px; }
.tree-empty { padding: 6px 8px; color: var(--win-shadow-light); }

/* Content / results zone -------------------------------------------------- */
.content-scroll {
  flex: 1;
  overflow: auto;
  padding: 6px;
  background: var(--win-bg);
  box-shadow:
    inset -1px -1px 0 var(--win-highlight),
    inset  1px  1px 0 var(--win-shadow-dark),
    inset -2px -2px 0 var(--win-face-light),
    inset  2px  2px 0 var(--win-shadow-light);
}

/* Result / answer windows */
.result-window {
  margin-bottom: 8px;
  background: var(--win-bg);
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
  padding: 3px;
}
.rw-title {
  display: flex; align-items: center; gap: 6px;
  height: 18px; padding: 0 4px;
  background: linear-gradient(90deg, var(--win-blue) 0%, var(--win-blue-light) 100%);
  color: var(--win-highlight);
  font-weight: bold;
}
.rw-title .rw-kind {
  margin-left: auto;
  font-family: var(--font-mono); font-weight: normal;
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: #cfe0ff;
}
.rw-title .rw-flag {
  font-family: var(--font-mono); font-weight: normal; font-size: 10px;
  color: #cfe0ff; padding-left: 6px;
}
.rw-body {
  margin-top: 3px;
  padding: 7px 9px;
  background: var(--win-highlight);
  color: var(--win-black);
  box-shadow:
    inset -1px -1px 0 var(--win-highlight),
    inset  1px  1px 0 var(--win-shadow-dark),
    inset -2px -2px 0 var(--win-face-light),
    inset  2px  2px 0 var(--win-shadow-light);
  user-select: text;
}
.rw-heading { font-weight: bold; font-size: 12px; margin-bottom: 2px; }
.rw-meta { color: var(--win-shadow-light); margin-bottom: 5px; }
.rw-meta .rw-score { font-family: var(--font-mono); }
.rw-snippet { margin-bottom: 6px; }
.rw-snippet em { font-style: normal; font-weight: bold; background: #fff1a8; }
.rw-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rw-tag {
  font-family: var(--font-mono); font-size: 10px;
  padding: 0 4px;
  background: var(--win-bg);
  box-shadow: inset -1px -1px 0 var(--win-shadow-light), inset 1px 1px 0 var(--win-highlight);
}
.rw-actions { display: flex; gap: 12px; }
a.link { color: var(--win-blue); text-decoration: underline; cursor: pointer; }
a.link:hover { color: var(--win-blue-light); }

/* AI answer specifics */
.ans-text { user-select: text; }
.ans-text sup { color: var(--win-blue); font-weight: bold; font-family: var(--font-mono); }
.ans-cites { margin-top: 8px; border-top: 1px solid var(--win-shadow-light); padding-top: 6px; }
.ans-cite { margin: 2px 0; }
.ans-cite sup { color: var(--win-blue); font-weight: bold; font-family: var(--font-mono); }
.spinner-text { color: var(--win-shadow-light); }

/* Welcome / empty states */
.welcome-body { padding: 14px 16px; user-select: text; }
.welcome-body h2 { font-size: 14px; margin: 0 0 8px; }
.welcome-body p { margin: 0 0 10px; }
.example-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.example {
  padding: 3px 8px; background: var(--win-bg); cursor: default;
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark), inset 1px 1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light), inset 2px 2px 0 var(--win-face-light);
}
.example:active {
  box-shadow:
    inset 1px 1px 0 var(--win-shadow-dark), inset -1px -1px 0 var(--win-highlight),
    inset 2px 2px 0 var(--win-shadow-light), inset -2px -2px 0 var(--win-face-light);
}

/* Pager */
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 6px 0 2px; }
.pager .pg-info { padding: 0 8px; }

/* Status bar -------------------------------------------------------------- */
.statusbar {
  height: var(--status-h); min-height: var(--status-h);
  display: flex; align-items: stretch; gap: 2px;
  margin-top: 3px; padding: 1px;
}
.status-cell {
  display: flex; align-items: center; gap: 5px;
  padding: 1px 7px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  box-shadow:
    inset -1px -1px 0 var(--win-highlight),
    inset  1px  1px 0 var(--win-shadow-light);
}
.status-grow { flex: 1; }
.led {
  width: 8px; height: 8px; flex: none;
  border-radius: 1px;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.4), inset 1px 1px 0 rgba(255,255,255,.5);
}
.led-green { background: #00c000; }
.led-red { background: #d00000; }
.led-gray { background: var(--win-shadow-light); }
.led-yellow { background: #d8d800; }

/* Dialog / modal ---------------------------------------------------------- */
.dialog-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: transparent;
  display: grid; place-items: center;
}
.dialog {
  min-width: 340px; max-width: 90%;
  background: var(--win-bg);
  padding: 3px;
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light),
    3px 3px 8px rgba(0,0,0,.35);
}
.dialog .titlebar { margin: 0; }
.dialog-body { padding: 12px; user-select: text; }
.dialog-body p { margin: 0 0 8px; }
.dialog-row { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.dialog-row .field { flex: 1; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.dialog code { font-family: var(--font-mono); background: var(--win-highlight);
  box-shadow: inset -1px -1px 0 var(--win-highlight), inset 1px 1px 0 var(--win-shadow-light);
  padding: 1px 4px; display: inline-block; }
.status-ok { color: #006000; font-weight: bold; }
.status-err { color: #a00000; font-weight: bold; }

/* --------------------------------------------------------------------------
   Chunky Win95 scrollbars (WebKit/Blink)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-corner { background: var(--win-bg); }
::-webkit-scrollbar-track {
  background-color: var(--win-bg);
  background-image:
    linear-gradient(45deg, #a8a8a8 25%, transparent 25%, transparent 75%, #a8a8a8 75%),
    linear-gradient(45deg, #a8a8a8 25%, var(--win-bg) 25%, var(--win-bg) 75%, #a8a8a8 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
}
::-webkit-scrollbar-thumb {
  background: var(--win-bg);
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
}
::-webkit-scrollbar-button:single-button {
  background: var(--win-bg);
  display: block; height: 16px; width: 16px;
  box-shadow:
    inset -1px -1px 0 var(--win-shadow-dark),
    inset  1px  1px 0 var(--win-highlight),
    inset -2px -2px 0 var(--win-shadow-light),
    inset  2px  2px 0 var(--win-face-light);
}

@media (max-width: 720px) {
  .sidebar { width: 180px; min-width: 120px; }
  .titlebar-text { font-size: 10px; }
}