/* desk/css/styles.css — the tab-shell chrome.
 *
 * Ported from AIro's ui/desk/css/styles.css, trimmed to what Medical's shell markup
 * (#topbar / #tabs / #content) uses. All colours come from the shared tokens in
 * cc-shared.css (a dark navy chrome with a teal accent). The bar sits at the BOTTOM
 * on desktop and flips to the TOP on ≤1024px purely via flex `order`.
 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  /* 100dvh tracks the VISIBLE viewport on mobile (toolbar shown/hidden) so neither
     the bottom bar nor a framed surface's header is pushed off-screen. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── TAB BAR ── */
#topbar {
  height: var(--bar-h, 48px);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
  order: 2;
}

#tabs-track { flex: 1; display: flex; align-items: center; min-width: 0; position: relative; }
#tabs-track::before, #tabs-track::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 28px;
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.2s;
}
#tabs-track::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
#tabs-track::after { right: 0; background: linear-gradient(to left, var(--surface), transparent); }
#tabs-track.fade-left::before { opacity: 1; }
#tabs-track.fade-right::after { opacity: 1; }

.tabs-arrow {
  width: 24px; height: 30px; background: var(--surface2);
  border: 1px solid var(--white-alpha-12); border-radius: 5px; color: var(--text-dim);
  font-size: 13px; cursor: pointer; display: none; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color .12s, border-color .12s, background .12s; z-index: 3; line-height: 1;
}
.tabs-arrow:hover { color: var(--accent); border-color: var(--accent); background: var(--gold-alpha-08); }
.tabs-arrow.visible { display: flex; }

#tabs-scroll {
  flex: 1; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center;
  scrollbar-width: none; min-width: 0;
}
#tabs-scroll::-webkit-scrollbar { display: none; }
#tabs { display: flex; align-items: center; gap: 4px; padding: 4px 0; min-width: max-content; }

.tab {
  height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  min-width: 90px; flex-shrink: 0; position: relative; user-select: none;
}
.tab:hover { background: var(--navy-hover); border-color: var(--white-alpha-20); }
.tab.active {
  background: linear-gradient(135deg, var(--navy-hover) 0%, var(--navy-deep) 100%);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--gold-alpha-25), inset 0 -1px 0 var(--gold-alpha-20);
}
.tab:active { transform: scale(0.97); }
.tab.loading .tab-favicon { background: var(--accent2); }

.tab-favicon {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 10px; background: var(--accent);
  color: white; font-weight: 700;
}
.tab-label {
  flex: 0 0 auto; font-size: 11px; font-weight: 500; color: var(--text-dim);
  white-space: nowrap; letter-spacing: 0.02em;
}
.tab.active .tab-label { color: var(--text); }
.tab-close {
  width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: var(--text-dim); flex-shrink: 0;
  transition: background .12s, color .12s; line-height: 1;
}
.tab-close:hover { background: var(--red-pink-alpha-20); color: var(--red-bright); }

/* ── CONTENT ── */
#content { flex: 1; position: relative; overflow: hidden; order: 1; }
.page-frame { position: absolute; inset: 0; display: none; flex-direction: column; }
.page-frame.active { display: flex; }
iframe { flex: 1; border: none; background: var(--white); display: block; }

/* ── BLOCKED NOTICE ── */
.blocked-notice {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: var(--bg); color: var(--text-dim); text-align: center; padding: 40px;
}
.blocked-icon { font-size: 48px; opacity: 0.4; }
.blocked-title { font-family: var(--font-heading); font-size: 22px; color: var(--text); }
.blocked-msg { font-size: 12px; line-height: 1.7; max-width: 480px; }
.blocked-url {
  font-size: 11px; color: var(--accent); word-break: break-all; background: var(--surface2);
  padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border);
}

/* ── Small screens: move the tab bar to the TOP (flex order swap) ── */
@media (max-width: 1024px) {
  #topbar { order: 1; border-top: none; border-bottom: 1px solid var(--border); }
  #content { order: 2; }
}