/*
  osint.css
  - Standalone "skin" that won't fight your existing styles.
  - Everything is scoped under body.osint-ui so legacy animations/keyframes remain untouched.

  Design goals:
  - Modern, calm "Apple/Ubuntu" vibe
  - No page scroll; only intended panels scroll
  - App bar never overlapped by sidebars/buttons
*/

body.osint-ui {
  --appbar-h: 56px;

  /* neutral "OS" palette */
  --bg: #0b0f14;
  --panel: rgba(18, 24, 33, 0.72);
  --panel-solid: #121821;
  --panel-border: rgba(255, 255, 255, 0.10);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.70);
  --subtle: rgba(255, 255, 255, 0.12);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  --danger: #ff6b6b;

  /* corners */
  --r-sm: 10px;
  --r-md: 14px;

  /* typography */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";

  font-family: var(--font);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(139, 213, 255, 0.10), transparent 60%),
              radial-gradient(900px 700px at 90% 30%, rgba(155, 255, 203, 0.10), transparent 60%),
              var(--bg);
  color: var(--text);
}

/* Prevent that annoying 1-finger page scroll */
html, body.osint-ui {
  height: 100%;
  overflow: hidden;
}

body.osint-ui a { color: var(--accent); }
body.osint-ui a:hover { opacity: 0.9; }

/* ---------------- App Bar ---------------- */
body.osint-ui #appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--appbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 10050;

  background: rgba(10, 14, 20, 0.75);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.osint-ui .appbar-left,
body.osint-ui .appbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.osint-ui .brand-block {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

body.osint-ui .brand {
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.osint-ui .subtitle {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status pill shouldn't be full width */
body.osint-ui #app-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  min-width: 72px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(18, 24, 33, 0.65);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

/* Override legacy fixed positioning for top buttons (we place them in the app bar) */
body.osint-ui #sidebar-toggle,
body.osint-ui #instructions-toggle,
body.osint-ui #toggle-chat {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Ignore legacy slide-up animation for #toggle-chat (it lives in the header now) */
body.osint-ui #toggle-chat.hidden,
body.osint-ui #toggle-chat.shown {
  top: auto !important;
  opacity: 1 !important;
}

/* ---------------- Buttons (scoped) ---------------- */
body.osint-ui .global-button {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: none;
}

body.osint-ui .global-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

body.osint-ui .global-button:active {
  transform: translateY(1px);
}

body.osint-ui .global-button.icon-button {
  padding: 7px 10px;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.osint-ui .global-button.subtle-button {
  padding: 8px 10px;
  height: 36px;
}

/* ---------------- Sidebars ---------------- */
body.osint-ui #sidebar,
body.osint-ui #instructions-sidebar {
  top: var(--appbar-h);
  height: calc(100vh - var(--appbar-h));
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.osint-ui #sidebar {
  width: var(--osint-sidebar-w);
  padding: 0;
  transform: translateX(calc(-1 * var(--osint-sidebar-w)));
  transition: transform 0.3s ease-in-out !important;
  will-change: transform;
}

body.osint-ui #sidebar.open {
  transform: translateX(0);
}

body.osint-ui #sidebar.closed {
  transform: translateX(calc(-1 * var(--osint-sidebar-w)));
}

body.osint-ui #instructions-sidebar {
  width: 320px;
  padding: 0;
}

body.osint-ui #sidebar .sidebar-content,
body.osint-ui #instructions-sidebar .sidebar-content {
  height: 100%;
  max-height: none;
  padding: 16px;
  overflow: auto;
}

body.osint-ui #sidebar h2,
body.osint-ui #instructions-sidebar h2 {
  margin: 4px 0 10px;
  font-size: 16px;
}

body.osint-ui #sidebar h3,
body.osint-ui #instructions-sidebar h3 {
  margin: 14px 0 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
}

body.osint-ui label {
  color: var(--muted);
  font-size: 12px;
}

body.osint-ui input[type="text"],
body.osint-ui select,
body.osint-ui input[type="month"],
body.osint-ui input[type="range"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-radius: 10px;
}

body.osint-ui input[type="text"]::placeholder { color: rgba(255,255,255,0.45); }


/* ---------------- Main view containers (prevent page scroll) ---------------- */
body.osint-ui #map-container,
body.osint-ui #data-analysis-container {
  position: fixed;
  top: var(--appbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  transition: left 0.3s ease-in-out !important;
}

body.osint-ui #map-container {
  overflow: hidden;
}

body.osint-ui #data-analysis-container {
  overflow: hidden !important;
  padding: 0 !important;
}

body.osint-ui #sidebar.open ~ #map-container,
body.osint-ui #sidebar.open ~ #data-analysis-container {
  left: var(--osint-sidebar-w);
}

@media (max-width: 900px) {
  body.osint-ui #sidebar.open ~ #map-container,
  body.osint-ui #sidebar.open ~ #data-analysis-container {
    left: 0;
  }
}

/* Map should fill its container */
body.osint-ui #map {
  height: 100%;
}
/* ---------------- Overlays ---------------- */
body.osint-ui #map-state-info {
  background: rgba(18, 24, 33, 0.65);
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
}

body.osint-ui #info {
  background: rgba(18, 24, 33, 0.65);
  border: 1px solid var(--panel-border);
  color: var(--text);
}

body.osint-ui .map-overlay {
  background: transparent;
}

body.osint-ui #legend div {
  background: rgba(18, 24, 33, 0.65);
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 10px;
}

body.osint-ui .mapboxgl-popup-content {
  background: rgba(18, 24, 33, 0.92);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
}

/* Loading indicator (reuses your existing node) */
body.osint-ui #loading-indicator {
  background: rgba(0,0,0,0.70);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* ---------------- Chat ---------------- */
/* --- Chat: keep legacy slide animation working --- */
body.osint-ui #gpt-chat-container {
  /* hidden by default (matches legacy behavior) */
  top: -100% !important;

  /* keep your OSINT skin look */
  width: min(860px, calc(100vw - 24px));
  max-width: 860px;
  border: 1px solid var(--panel-border);
  background: rgba(18, 24, 33, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);

  /* ensure animation exists even if base changes later */
  transition: top 0.5s ease-in-out;
}

/* shown state slides to just under appbar */
body.osint-ui #gpt-chat-container.shown {
  top: calc(var(--appbar-h) + 10px) !important;
}

body.osint-ui #chat-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
}

body.osint-ui #user-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
}

body.osint-ui #send-btn {
  background: rgba(139, 213, 255, 0.20);
  border: 1px solid rgba(139, 213, 255, 0.35);
  color: var(--text);
}

body.osint-ui #send-btn:hover {
  background: rgba(139, 213, 255, 0.26);
}

body.osint-ui .user-input {
  background-color: var(--accent-soft);
}

body.osint-ui .error-message {
  background-color: rgba(255, 107, 107, 0.16);
  color: rgba(255,255,255,0.92);
}

/* ---------------- Data Analysis panels ---------------- */
body.osint-ui .panel-container,
body.osint-ui #table-container,
body.osint-ui #details-section,
body.osint-ui #insights-section,
body.osint-ui #export-controls,
body.osint-ui #line-chart-container-adv {
  background: rgba(18, 24, 33, 0.70);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

body.osint-ui .panel-container,
body.osint-ui #table-container,
body.osint-ui #details-section,
body.osint-ui #insights-section,
body.osint-ui #export-controls {
  padding: 18px;
}


/* ---------------- Mobile ---------------- */
@media (max-width: 768px) {
  body.osint-ui #sidebar { width: min(360px, 92vw); }
  body.osint-ui #instructions-sidebar { width: min(340px, 92vw); }

  body.osint-ui .brand { font-size: 14px; }
  body.osint-ui .subtitle { display: none; }

  body.osint-ui #app-status { max-width: 120px; }
}


/* ======================================================================
   OSINT CONSOLIDATED OVERRIDES
   ====================================================================== */

body.osint-ui {
  --osint-sidebar-w: 340px;

  /* primary accent: muted cyan */
  --accent: rgba(138, 198, 214, 0.82);
  --accent-soft: rgba(138, 198, 214, 0.14);
  --accent-line: rgba(138, 198, 214, 0.26);

  /* warning accent: muted amber */
  --warn: rgba(214, 176, 110, 0.82);
  --warn-soft: rgba(214, 176, 110, 0.14);
  --warn-line: rgba(214, 176, 110, 0.26);
}

/* ----------------------------------------------------------------------
   Hidden view safety
   ---------------------------------------------------------------------- */
body.osint-ui .hidden-view,
body.osint-ui .view-container.hidden-view {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.osint-ui .view-container:not(.hidden-view) {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}



/* ----------------------------------------------------------------------
   Internal analysis scroller
   ---------------------------------------------------------------------- */
body.osint-ui #chart-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch;
}

body.osint-ui #combined-mode-container,
body.osint-ui #advanced-mode-container {
  height: auto !important;
  min-height: max-content !important;
}

body.osint-ui #combinedDataGrid,
body.osint-ui #myGrid {
  min-height: 60vh !important;
}

body.osint-ui #pie-chart-container,
body.osint-ui #line-chart-container,
body.osint-ui #pie-chart-container-adv,
body.osint-ui #line-chart-container-adv {
  min-height: 75vh !important;
}

/* ----------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */
body.osint-ui button,
body.osint-ui .global-button,
body.osint-ui input[type="button"],
body.osint-ui input[type="submit"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.osint-ui button:hover,
body.osint-ui .global-button:hover,
body.osint-ui input[type="button"]:hover,
body.osint-ui input[type="submit"]:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  box-shadow: none !important;
}

body.osint-ui button:focus-visible,
body.osint-ui .global-button:focus-visible,
body.osint-ui input:focus-visible,
body.osint-ui select:focus-visible,
body.osint-ui textarea:focus-visible {
  outline: 1px solid var(--accent-line) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* special amber action */
body.osint-ui #add-to-chart {
  background: var(--warn-soft) !important;
  border-color: var(--warn-line) !important;
}

/* ----------------------------------------------------------------------
   Toggle slider / noUiSlider
   ---------------------------------------------------------------------- */
body.osint-ui .slider {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

body.osint-ui input:checked + .slider {
  background-color: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--accent-line) !important;
}

body.osint-ui .noUi-target {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

body.osint-ui .noUi-connect {
  background: var(--accent-soft) !important;
}

body.osint-ui .noUi-handle {
  background: rgba(18, 24, 33, 0.88) !important;
  border: 1px solid var(--accent-line) !important;
  box-shadow: none !important;
}

body.osint-ui input[type="range"] {
  accent-color: rgb(138, 198, 214) !important;
}


/* ----------------------------------------------------------------------
   AG Grid
   ---------------------------------------------------------------------- */
body.osint-ui .ag-theme-alpine {
  --ag-background-color: rgba(18, 24, 33, 0.72);
  --ag-foreground-color: rgba(255, 255, 255, 0.92);
  --ag-text-color: rgba(255, 255, 255, 0.92);
  --ag-secondary-foreground-color: rgba(255, 255, 255, 0.68);

  --ag-header-background-color: rgba(18, 24, 33, 0.92);
  --ag-header-foreground-color: rgba(255, 255, 255, 0.92);

  --ag-odd-row-background-color: rgba(255, 255, 255, 0.025);
  --ag-row-hover-color: var(--accent-soft);
  --ag-selected-row-background-color: rgba(138, 198, 214, 0.18);

  --ag-border-color: rgba(255, 255, 255, 0.10);
  --ag-row-border-color: rgba(255, 255, 255, 0.06);
  --ag-input-border-color: rgba(255, 255, 255, 0.12);
  --ag-input-background-color: rgba(255, 255, 255, 0.05);
  --ag-range-selection-border-color: var(--accent-line);
}

body.osint-ui .ag-theme-alpine,
body.osint-ui .ag-theme-alpine .ag-root-wrapper,
body.osint-ui .ag-theme-alpine .ag-header,
body.osint-ui .ag-theme-alpine .ag-body-viewport,
body.osint-ui .ag-theme-alpine .ag-center-cols-container {
  background: transparent !important;
  color: var(--text) !important;
}

/* ----------------------------------------------------------------------
   Panels / semantic accents
   ---------------------------------------------------------------------- */
body.osint-ui #insights-section {
  border-left: 3px solid var(--warn-line) !important;
  background: linear-gradient(0deg, var(--warn-soft), var(--warn-soft)), rgba(18, 24, 33, 0.70) !important;
}

body.osint-ui .is-active,
body.osint-ui .active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
}

body.osint-ui .is-warning,
body.osint-ui .flagged,
body.osint-ui .stale-data {
  background: var(--warn-soft) !important;
  border-color: var(--warn-line) !important;
  color: var(--warn) !important;
}
/* ======================================================================
   ANALYSIS VIEWPORT ARROWS — DROP-IN
   - arrows stay visible while scrolling
   - arrows live in dedicated gutters, not on top of panels
   - left arrow respects sidebar-open analysis shift
   ====================================================================== */

body.osint-ui {
  --analysis-arrow-offset: 14px;
  --analysis-arrow-size: 48px;
  --analysis-arrow-gutter: 72px;
}

/* 1) reserve actual gutter space inside the scrolling analysis viewport */
body.osint-ui #chart-container {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  padding-left: var(--analysis-arrow-gutter) !important;
  padding-right: var(--analysis-arrow-gutter) !important;
}

/* 2) the old wrapper must not become the positioning context */
body.osint-ui #chart-with-arrows,
body.osint-ui #chart-with-arrows-adv {
  position: static !important;
  overflow: visible !important;
}

/* 3) arrows are fixed to the viewport height, so they stay available while scrolling */
body.osint-ui #prev-month,
body.osint-ui #next-month,
body.osint-ui #prev-month-adv,
body.osint-ui #next-month-adv {
  position: fixed !important;
  top: calc(var(--appbar-h) + ((100vh - var(--appbar-h)) / 2)) !important;
  transform: translateY(-50%) !important;
  z-index: 10040 !important;

  width: var(--analysis-arrow-size) !important;
  height: var(--analysis-arrow-size) !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(18, 24, 33, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 4) default placement when sidebar is closed */
body.osint-ui #prev-month,
body.osint-ui #prev-month-adv {
  left: var(--analysis-arrow-offset) !important;
}

body.osint-ui #next-month,
body.osint-ui #next-month-adv {
  right: var(--analysis-arrow-offset) !important;
}

/* 5) when sidebar is open, move the LEFT arrow to the analysis container edge,
      not the browser edge */
body.osint-ui #sidebar.open ~ #data-analysis-container #prev-month,
body.osint-ui #sidebar.open ~ #data-analysis-container #prev-month-adv {
  left: calc(var(--osint-sidebar-w) + var(--analysis-arrow-offset)) !important;
}

/* right arrow stays on the outer right edge of the analysis viewport */
body.osint-ui #sidebar.open ~ #data-analysis-container #next-month,
body.osint-ui #sidebar.open ~ #data-analysis-container #next-month-adv {
  right: var(--analysis-arrow-offset) !important;
}

/* 6) hover */
body.osint-ui #prev-month:hover,
body.osint-ui #next-month:hover,
body.osint-ui #prev-month-adv:hover,
body.osint-ui #next-month-adv:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
}

/* 7) keep icon clean */
body.osint-ui #prev-month:hover svg,
body.osint-ui #next-month:hover svg,
body.osint-ui #prev-month-adv:hover svg,
body.osint-ui #next-month-adv:hover svg {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.osint-ui #prev-month svg path,
body.osint-ui #next-month svg path,
body.osint-ui #prev-month-adv svg path,
body.osint-ui #next-month-adv svg path {
  stroke: rgba(255, 255, 255, 0.92) !important;
  fill: none !important;
}

/* 8) disabled state */
body.osint-ui #prev-month:disabled,
body.osint-ui #next-month:disabled,
body.osint-ui #prev-month-adv:disabled,
body.osint-ui #next-month-adv:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 9) mobile */
@media (max-width: 768px) {
  body.osint-ui {
    --analysis-arrow-offset: 8px;
    --analysis-arrow-size: 42px;
    --analysis-arrow-gutter: 56px;
  }
}

/* ======================================================================
   EMPTY STATES FOR ANALYSIS PANELS
   ====================================================================== */

body.osint-ui #combinedDataGrid,
body.osint-ui #myGrid,
body.osint-ui #pie-chart-container,
body.osint-ui #line-chart-container,
body.osint-ui #pie-chart-container-adv,
body.osint-ui #line-chart-container-adv {
  position: relative;
}

body.osint-ui .osint-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  z-index: 2;

  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;

  background:
    linear-gradient(
      180deg,
      rgba(18, 24, 33, 0.18),
      rgba(18, 24, 33, 0.28)
    );
  border-radius: inherit;
  pointer-events: none;
}

body.osint-ui .osint-empty-state-inner {
  max-width: 520px;
}

body.osint-ui .osint-empty-state-title {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

body.osint-ui .osint-empty-state-subtitle {
  display: block;
  color: var(--muted);
}

body.osint-ui .osint-empty-hidden {
  display: none !important;
}


/* ======================================================================
   ADVANCED MODE – SELECTED BOUNDARIES + CUSTOM CHART FORM FIXES
   ====================================================================== */

/* 1) Selected boundaries list: stop legacy white background / white text weirdness */
body.osint-ui #selectedBoundariesList,
body.osint-ui #selectedBoundariesList .boundary-item {
  background: transparent !important;
  color: var(--text) !important;
}

body.osint-ui #selectedBoundariesList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.osint-ui #selectedBoundariesList h4 {
  margin: 0;
  color: var(--muted) !important;
  font-weight: 600;
}

body.osint-ui #selectedBoundariesList .boundary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

body.osint-ui #selectedBoundariesList .boundary-item span {
  color: var(--text) !important;
  font-size: 14px;
  line-height: 1.4;
}

body.osint-ui #selectedBoundariesList .boundary-item button,
body.osint-ui #selectedBoundariesList .boundary-item .table-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
}

body.osint-ui #selectedBoundariesList .boundary-item button:hover,
body.osint-ui #selectedBoundariesList .boundary-item .table-btn:hover {
  background: rgba(255, 107, 107, 0.14) !important;
  border-color: rgba(255, 107, 107, 0.28) !important;
  color: var(--text) !important;
}

/* prevent ugly white selection flash looking like a filled white box */
body.osint-ui #selectedBoundariesList .boundary-item,
body.osint-ui #selectedBoundariesList .boundary-item * {
  -webkit-tap-highlight-color: transparent;
}

body.osint-ui #selectedBoundariesList .boundary-item ::selection {
  background: rgba(138, 198, 214, 0.28);
  color: var(--text);
}


body.osint-ui #advanced-mode-container select {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text) !important;
}

body.osint-ui #advanced-mode-container select:focus,
body.osint-ui #advanced-mode-container select:focus-visible {
  outline: 1px solid var(--accent-line) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* multi-select list specifically */
body.osint-ui #advanced-mode-container select[multiple] {
  min-height: 112px;
  padding: 8px !important;
}

body.osint-ui #advanced-mode-container select[multiple] option {
  padding: 6px 8px;
  border-radius: 6px;
}



/* labels in the custom chart block */
body.osint-ui #advanced-mode-container label,
body.osint-ui #advanced-mode-container .form-label,
body.osint-ui #advanced-mode-container .chart-label {
  color: var(--muted) !important;
}

/* if your custom chart wrapper exists, make it visually match the rest */
body.osint-ui #custom-chart-container,
body.osint-ui .custom-chart-container {
  background: rgba(18, 24, 33, 0.70) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow) !important;
}


/* ======================================================================
   ADVANCED ANALYSIS PANELS
   ====================================================================== */

body.osint-ui .advanced-fetch-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 20px;
}

body.osint-ui .advanced-fetch-status {
  color: var(--muted);
  font-size: 13px;
}

body.osint-ui #boundary-specific-content,
body.osint-ui #advanced-insights-content {
  min-height: 120px;
  position: relative;
}

body.osint-ui .boundary-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

body.osint-ui .boundary-info-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 14px;
  box-shadow: none;
}

body.osint-ui .boundary-info-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--text);
}

body.osint-ui .boundary-info-meta {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 10px;
  font-size: 14px;
  line-height: 1.4;
}

body.osint-ui .boundary-info-meta .label {
  color: var(--muted);
  font-weight: 600;
}

body.osint-ui .boundary-info-meta .value {
  color: var(--text);
  word-break: break-word;
}

body.osint-ui .insights-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 16px;
  color: var(--text);
}

body.osint-ui .insights-card p:last-child {
  margin-bottom: 0;
}

body.osint-ui .insights-card,
body.osint-ui .insights-card * {
  font-family: var(--font);
}

body.osint-ui .insights-card h1,
body.osint-ui .insights-card h2,
body.osint-ui .insights-card h3,
body.osint-ui .insights-card h4,
body.osint-ui .insights-card h5,
body.osint-ui .insights-card h6 {
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.3;
  font-weight: 700;
}

body.osint-ui .insights-card h1,
body.osint-ui .insights-card h2 {
  font-size: 16px;
}

body.osint-ui .insights-card h3 {
  font-size: 15px;
}

body.osint-ui .insights-card h4,
body.osint-ui .insights-card h5,
body.osint-ui .insights-card h6 {
  font-size: 14px;
}

body.osint-ui .insights-card p,
body.osint-ui .insights-card li,
body.osint-ui .insights-card blockquote,
body.osint-ui .insights-card td,
body.osint-ui .insights-card th {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

body.osint-ui .insights-card p {
  margin: 0 0 12px;
}

body.osint-ui .insights-card ul,
body.osint-ui .insights-card ol {
  margin: 0 0 12px 18px;
  padding: 0;
}

body.osint-ui .insights-card li {
  margin: 0 0 6px;
}

body.osint-ui .insights-card strong {
  color: var(--text);
  font-weight: 700;
}

body.osint-ui .insights-card em {
  color: var(--muted);
}

body.osint-ui .insights-card blockquote {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-line);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

body.osint-ui .insights-card hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin: 14px 0;
}

body.osint-ui .insights-card table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

body.osint-ui .insights-card th,
body.osint-ui .insights-card td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}

body.osint-ui .insights-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 6px;
}

body.osint-ui .insights-card pre {
  margin: 12px 0;
  padding: 12px;
  overflow-x: auto;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

body.osint-ui .insights-card pre code {
  background: transparent;
  padding: 0;
}

body.osint-ui .adv-inline-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

body.osint-ui .adv-inline-note strong {
  color: var(--text);
}

body.osint-ui .adv-loading {
  color: var(--muted);
  font-size: 14px;
}

body.osint-ui .adv-error {
  color: #ffb4b4;
  background: rgba(255, 107, 107, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.18);
  border-radius: 12px;
  padding: 14px;
}


/* =========================================
   CUSTOM CHART CATEGORY MULTI-SELECT
   ========================================= */

#category-select {
  width: 100%;
  min-height: 140px;
  padding: 12px 14px;
  color: #e8edf5 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px;
  font: inherit;
  line-height: 1.45;
  box-sizing: border-box;
}

#category-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

#category-select option {
  color: #e8edf5 !important;
  padding: 8px 10px;
  font: inherit;
}

#category-select option:checked,
#category-select option:selected {
  color: #243045 !important;
  
  box-shadow: none !important;
}

#category-select option:hover {
  color: #ffffff !important;
  background: #243045 !important;
}

#chart-controls .chart-control-group label[for="category-select"] {
  display: block;
  margin-bottom: 10px;
  color: #dfe7f3;
  font-weight: 500;
}

#chart-controls .chart-control-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#chart-controls {
  color: #e8edf5;
}

.boundary-context-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.boundary-context-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f3f6fb;
  margin-bottom: 10px;
}

.boundary-context-subtitle {
  font-size: 0.85rem;
  font-weight: 700;
  color: #dbe7ff;
  margin-top: 12px;
  margin-bottom: 6px;
}

.boundary-context-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  margin-bottom: 10px;
}

.boundary-context-list {
  margin: 0;
  padding-left: 18px;
  color: #d8e2f0;
}

.boundary-context-list li {
  margin-bottom: 6px;
  color: #d8e2f0;
}

.boundary-context-list li strong,
.boundary-context-list li span {
  color: #d8e2f0;
}

.boundary-context-empty {
  color: rgba(216, 226, 240, 0.72);
  font-size: 0.9rem;
}

.adv-debug-details {
  width: 100%;
}

.adv-debug-details summary {
  cursor: pointer;
  color: #d7e3ff;
  font-weight: 600;
  margin-bottom: 8px;
}

.adv-debug-pre {
  margin: 8px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #e8eefc;
  font-size: 12px;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

body.osint-ui #combined-mode-container,
body.osint-ui #advanced-mode-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.osint-ui #combined-mode-container > *,
body.osint-ui #advanced-mode-container > * {
  margin: 0;
}

body.osint-ui #advanced-mode-container.hidden-view,
body.osint-ui #combined-mode-container.hidden-view {
  display: none !important;
}

#stop-search-content .ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

#stop-search-content .ss-stat-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
}

#stop-search-content .ss-stat-label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 6px;
}

#stop-search-content .ss-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
}

#stop-search-content .ss-section {
  margin-top: 16px;
}

#stop-search-content .ss-meta-note {
  margin: 8px 0 14px;
  font-size: 0.9rem;
  opacity: 0.85;
}

#stop-search-content .ss-mini-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#stop-search-content .ss-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 6px;
}

#stop-search-content .ss-mini-label {
  opacity: 0.9;
}

#stop-search-content .ss-mini-value {
  font-weight: 600;
  text-align: right;
}

/* ======================================================================
   MARKDOWN TYPOGRAPHY NORMALISER
   Applies to AI-rendered insight / verdict panels, not just the card shell
   ====================================================================== */

body.osint-ui #advanced-insights-content,
body.osint-ui #advanced-insights-content * ,
body.osint-ui #stop-search-verdict-content,
body.osint-ui #stop-search-verdict-content * {
  font-family: var(--font) !important;
}

body.osint-ui #advanced-insights-content h1,
body.osint-ui #advanced-insights-content h2,
body.osint-ui #advanced-insights-content h3,
body.osint-ui #advanced-insights-content h4,
body.osint-ui #advanced-insights-content h5,
body.osint-ui #advanced-insights-content h6,
body.osint-ui #stop-search-verdict-content h1,
body.osint-ui #stop-search-verdict-content h2,
body.osint-ui #stop-search-verdict-content h3,
body.osint-ui #stop-search-verdict-content h4,
body.osint-ui #stop-search-verdict-content h5,
body.osint-ui #stop-search-verdict-content h6 {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.osint-ui #advanced-insights-content p,
body.osint-ui #advanced-insights-content li,
body.osint-ui #advanced-insights-content div,
body.osint-ui #advanced-insights-content span,
body.osint-ui #advanced-insights-content td,
body.osint-ui #advanced-insights-content th,
body.osint-ui #stop-search-verdict-content p,
body.osint-ui #stop-search-verdict-content li,
body.osint-ui #stop-search-verdict-content div,
body.osint-ui #stop-search-verdict-content span,
body.osint-ui #stop-search-verdict-content td,
body.osint-ui #stop-search-verdict-content th {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
}

body.osint-ui #advanced-insights-content p,
body.osint-ui #stop-search-verdict-content p {
  margin: 0 0 12px !important;
}

body.osint-ui #advanced-insights-content ul,
body.osint-ui #advanced-insights-content ol,
body.osint-ui #stop-search-verdict-content ul,
body.osint-ui #stop-search-verdict-content ol {
  margin: 0 0 12px 18px !important;
  padding: 0 !important;
}

body.osint-ui #advanced-insights-content li,
body.osint-ui #stop-search-verdict-content li {
  margin: 0 0 6px !important;
}

body.osint-ui #advanced-insights-content strong,
body.osint-ui #stop-search-verdict-content strong {
  color: var(--text) !important;
  font-weight: 700 !important;
}

body.osint-ui #advanced-insights-content blockquote,
body.osint-ui #stop-search-verdict-content blockquote {
  margin: 12px 0 !important;
  padding: 10px 12px !important;
  border-left: 3px solid var(--accent-line) !important;
  background: rgba(255,255,255,0.03) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
}

body.osint-ui #advanced-insights-content pre,
body.osint-ui #stop-search-verdict-content pre {
  margin: 12px 0 !important;
  padding: 12px !important;
  overflow-x: auto !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

body.osint-ui #advanced-insights-content code,
body.osint-ui #stop-search-verdict-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  background: rgba(255,255,255,0.06) !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}

/* ======================================================================
   MOBILE SIDEBAR FIX
   - only one drawer should visually occupy the screen
   - instructions sidebar gets an explicit closed/open transform
   - no content shifting on mobile
   ====================================================================== */

/* Base: make both sidebars real drawers with explicit stacking */
body.osint-ui #sidebar,
body.osint-ui #instructions-sidebar {
  z-index: 10030 !important;
}

/* Left drawer */
body.osint-ui #sidebar {
  left: 0 !important;
  right: auto !important;
}

/* Right drawer */
body.osint-ui #instructions-sidebar {
  left: auto !important;
  right: 0 !important;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out !important;
  will-change: transform;
}

body.osint-ui #instructions-sidebar.open {
  transform: translateX(0) !important;
}

body.osint-ui #instructions-sidebar.closed {
  transform: translateX(100%) !important;
}

/* Desktop: keep normal behavior */
@media (min-width: 769px) {
  body.osint-ui #instructions-sidebar.open {
    right: 0 !important;
  }
}

/* Mobile: drawers become overlay panels, not layout panels */
@media (max-width: 768px) {
  body.osint-ui {
    --osint-sidebar-w: min(88vw, 360px);
  }

  body.osint-ui #sidebar,
  body.osint-ui #instructions-sidebar {
    top: var(--appbar-h) !important;
    height: calc(100dvh - var(--appbar-h)) !important;
    width: var(--osint-sidebar-w) !important;
    max-width: var(--osint-sidebar-w) !important;
    border-radius: 0 !important;
  }

  /* Main content should NOT shift sideways on mobile */
  body.osint-ui #sidebar.open ~ #map-container,
  body.osint-ui #sidebar.open ~ #data-analysis-container,
  body.osint-ui #instructions-sidebar.open ~ #map-container,
  body.osint-ui #instructions-sidebar.open ~ #data-analysis-container {
    left: 0 !important;
    right: 0 !important;
  }

  /* App bar button row is too cramped in your screenshot */
  body.osint-ui .appbar-left,
  body.osint-ui .appbar-right {
    gap: 6px !important;
  }

  body.osint-ui .brand {
    max-width: 92px;
    font-size: 13px;
  }

  body.osint-ui .subtitle {
    display: none !important;
  }

  body.osint-ui #toggle-chat.global-button,
  body.osint-ui #instructions-toggle.global-button,
  body.osint-ui #sidebar-toggle.global-button {
    height: 40px !important;
    padding: 8px 10px !important;
  }

  body.osint-ui #toggle-chat {
    max-width: 132px;
    white-space: normal;
    line-height: 1.1;
  }

  body.osint-ui #app-status {
    min-width: 64px;
    max-width: 96px;
    font-size: 11px;
    padding: 6px 8px;
  }
}