/* ===========================================================================
   Saint Germain Hospital — "calm clinical authority"
   Fraunces (display) + IBM Plex Sans (UI) · petrol-teal + warm gold
   =========================================================================== */

:root {
  --ink:        #11272c;
  --ink-soft:   #3f5b62;
  --muted:      #748a90;
  --line:       #e4ebec;
  --line-soft:  #eef3f3;
  --bg:         #e9efee;
  --surface:    #ffffff;
  --surface-2:  #f5f9f8;

  --primary:      #0b6b73;
  --primary-deep: #084a52;
  --primary-700:  #0a5b62;
  --accent:       #c2902f;   /* warm gold */
  --accent-soft:  #f4ead2;
  --danger:       #bb3b30;
  --danger-deep:  #94271f;

  --ring: rgba(11, 107, 115, 0.28);
  --shadow-sm: 0 1px 2px rgba(16,42,48,.06), 0 1px 3px rgba(16,42,48,.05);
  --shadow-md: 0 10px 28px -14px rgba(13,46,52,.22), 0 2px 6px rgba(13,46,52,.05);
  --shadow-lg: 0 30px 70px -28px rgba(8,42,48,.42);

  --radius:    16px;
  --radius-sm: 10px;
  --header-h:  74px;
  --content-max: 1400px;   /* shared content band so header + pages + dashboard align */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.6;
  background-color: var(--bg);
  /* layered atmosphere: soft glow + faint dot grid */
  background-image:
    radial-gradient(1100px 520px at 82% -8%, rgba(11,107,115,.10), transparent 60%),
    radial-gradient(900px 480px at -5% 8%, rgba(194,144,47,.07), transparent 55%),
    radial-gradient(rgba(17,39,44,.045) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-attachment: fixed;
  min-height: 100vh;
}

::selection { background: rgba(11,107,115,.18); }

h1, h2, h3 { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

input, button, select, textarea { font-family: inherit; font-size: 1rem; }

/* ----------------------------------------------------------------- Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: #eaf6f5;
  padding: 0.85rem 2rem;
  background:
    radial-gradient(120% 180% at 88% -40%, rgba(255,255,255,.10), transparent 45%),
    linear-gradient(120deg, var(--primary-deep) 0%, var(--primary) 58%, #0d7c83 100%);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 24px -16px rgba(8,42,48,.7);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: var(--content-max);
  margin: 0 auto;
}

.logo {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.22));
}

.header-text h1 {
  font-size: 1.45rem;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.12rem;
}

.header-text p {
  font-size: 0.82rem;
  margin: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232,246,245,.72);
  font-weight: 500;
}

.powered-by {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(232,246,245,.78);
}
.xl8-logo { height: 28px; width: auto; opacity: 0.95; }

/* Language switcher (added in header) */
#lang-switcher {
  appearance: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 0.34rem 1.9rem 0.34rem 0.8rem;
  font-size: 0.82rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  margin-left: 0.9rem;
  transition: background-color .2s ease;
}
#lang-switcher:hover { background-color: rgba(255,255,255,.2); }
#lang-switcher option { color: #11272c; }

/* ------------------------------------------------------------- Main / page */
.main-content {
  max-width: var(--content-max);
  margin: 2.4rem auto;
  background: var(--surface);
  padding: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
/* slim accent rule across the top of the main card */
.main-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #18a0a8 55%, var(--accent));
}

/* Login is a compact, centered card (not the wide form/config card width) */
.main-content:has(#login-form) { max-width: 440px; }

/* The dashboard manages its own full-height grid, so drop the wrapping card's
   chrome (the 2.4rem margin/padding + border/shadow) for that page. */
.main-content:has(.dashboard-container) {
  max-width: none;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.main-content:has(.dashboard-container)::before { display: none; }

.page { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.page h2 {
  font-size: 1.6rem;
  color: var(--ink);
  margin-bottom: 1.3rem;
  letter-spacing: -0.015em;
}

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- Form fields */
label { font-weight: 500; color: var(--ink-soft); }

input, .full-width, textarea.full-width {
  width: 100%;
  padding: 0.7rem 0.85rem;
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder { color: #a7b6ba; }

input:focus, .full-width:focus, textarea.full-width:focus, select:focus-visible {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  background: #fff;
}
select[multiple].full-width { min-height: 120px; }
textarea.full-width { resize: vertical; min-height: 110px; }

/* ----------------------------------------------------------------- Buttons */
button {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 100%);
  color: #fff;
  border: none;
  padding: 0.66rem 1.3rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(11,107,115,.7);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
button:hover { filter: brightness(1.05); box-shadow: 0 12px 22px -10px rgba(11,107,115,.8); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }

#startSessionButton { padding: 0.74rem 1.7rem; font-size: 1.02rem; }

.btn-secondary {
  background: var(--surface);
  color: var(--primary-deep);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 0.6rem 1.05rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  margin-left: 0.5rem;
}
.btn-secondary:hover { background: var(--surface-2); border-color: #d3e0e1; transform: translateY(-1px); }

.btn-logout, .btn-hangup {
  background: linear-gradient(180deg, var(--danger) 0%, var(--danger-deep) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(187,59,48,.7);
  transition: transform .12s ease, filter .2s ease;
}
.btn-logout { padding: 0.7rem 1.6rem; }
.btn-hangup { margin-top: 1.4rem; width: 100%; padding: 0.7rem; }
.btn-logout:hover, .btn-hangup:hover { filter: brightness(1.06); transform: translateY(-1px); }

nav { margin-top: 2rem; display: flex; justify-content: space-between; }

/* ------------------------------------------------------------ Config table */
.config-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.config-table .label-cell {
  width: 240px;
  vertical-align: top;
  padding: 0.9rem 1.2rem 0.9rem 0;
  font-weight: 600;
  color: var(--ink-soft);
}
.config-table tr { border-bottom: 1px solid var(--line-soft); }
.config-table tr:last-child { border-bottom: none; }
/* No per-cell transform/animation here: a transformed <td> creates a stacking
   context that traps the Choices dropdown behind later rows (greeting textarea). */
.config-table td { padding: 0.9rem 0; }

label:hover { cursor: help; }

/* Choices.js — match the theme */
.choices { margin-bottom: 1rem; position: relative; }
/* keep the open dropdown above the following form rows (e.g. greeting textarea) */
.choices.is-open, .choices.is-focused { z-index: 40; }
.choices__list--dropdown, .choices__list[aria-expanded] { z-index: 60; }
.choices__inner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  min-height: 42px;
}
.choices.is-focused .choices__inner { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  background: var(--primary);
  border: none;
  border-radius: 999px;
  padding: 0.12rem 0.6rem;    /* shorter chip (~2/3 height) */
  font-size: 0.78rem;
  line-height: 1.3;
  margin: 0 0.3rem 0.25rem 0;
}
/* the default remove (×) button has huge padding that inflates the chip height */
.choices__list--multiple .choices__button {
  margin: 0 0 0 6px;
  padding: 0;
  width: 13px;
  height: 13px;
  background-size: 8px 8px;
  border-left: 0;
  opacity: 0.85;
}
.choices__list--multiple .choices__button:hover { opacity: 1; }
.choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--surface-2); }

/* ----------------------------------------------------------- Dashboard grid */
.dashboard-container {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(305px, 1.15fr) minmax(250px, 1.05fr) minmax(250px, 1.05fr);
  height: calc(100vh - var(--header-h) - 2.4rem);
  gap: 1.2rem;
  padding: 1.6rem 1.8rem;
  max-width: var(--content-max);
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 1180px) {
  .dashboard-container { grid-template-columns: 1.3fr 1fr; height: auto; min-height: calc(100vh - var(--header-h) - 2.4rem); }
  /* Columns are auto-height here, so let the Intelligence sections flow
     normally instead of forcing a 50:50 split into zero height. */
  .intel-col .col-body { overflow: visible; }
  .intel-section { flex: none; }
  .intel-col #insights-panel,
  .intel-col #relevant-info-panel { overflow-y: visible; max-height: 40vh; }
  .caller-col .col-body { overflow: visible; }
  .caller-col #caller-history-panel { flex: none; max-height: 32vh; }
}
@media (max-width: 720px) {
  .dashboard-container { grid-template-columns: 1fr; }
}

.chat-panel {
  min-height: 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.2rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  position: relative;
}
.chat-panel h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chat-panel h2::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #1bb05a;
  box-shadow: 0 0 0 4px rgba(27,176,90,.18);
  animation: livepulse 2s ease-in-out infinite;
}
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.chat-window {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-right: 0.6rem;
}
.chat-window::-webkit-scrollbar { width: 8px; }
.chat-window::-webkit-scrollbar-thumb { background: #d6e1e2; border-radius: 8px; }

.chat-message { display: flex; width: 100%; padding: 0 0.25rem; animation: rise .35s ease both; }
.chat-message.agent { justify-content: flex-start; }
.chat-message.caller { justify-content: flex-end; }

.chat-message .bubble {
  max-width: 76%;
  padding: 0.7rem 1rem;
  line-height: 1.5;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
  word-wrap: break-word;
}
.chat-message.agent .bubble {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
}
.chat-message.caller .bubble {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #eafcfb;
  border-radius: 16px 16px 5px 16px;
}

.new-messages-btn {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 10;
}
.new-messages-btn:hover { transform: translateX(-50%) translateY(-2px); }

/* --------------------------------------------------- Side columns (info) */
.side-col {
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* the column itself never scrolls... */
}
/* Column title — stays fixed; only .col-body scrolls beneath it */
.side-col > h3 {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0;
  padding: 1.25rem 1.25rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
}
.col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;            /* ...the body does */
  padding: 1rem 1.25rem 1.2rem;
  display: flex;
  flex-direction: column;
}
/* Section sub-headers within a column */
.col-body > h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1rem 0 0.45rem;
}
.col-body > h4:first-child { margin-top: 0; }
.btn-hangup { margin-top: auto; }

/* Intelligence column: split the body 50:50 into two internally-scrolling
   sections (Insights & Alerts / Relevant Info) instead of one long scroll. */
.intel-col .col-body { overflow: hidden; gap: 0.7rem; }
.intel-section { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.intel-section > h4 {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 0.45rem;
}
.intel-col #insights-panel,
.intel-col #relevant-info-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 0;
}

/* Caller column: Twilio + conversation-known facts sit at natural height; Caller
   History takes the remaining space and scrolls, with Hang Up pinned below it. */
.caller-col .col-body { overflow: hidden; }
.caller-col #caller-history-panel {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  margin-bottom: 0.9rem;
}
#caller-known-panel { margin-bottom: 0.4rem; }

/* Location column: let the map fill the available height */
.location-col #location-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  margin-bottom: 0;
}
.location-col .loc-map { flex: 1; min-height: 220px; }

#caller-info-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
#caller-info-table td { padding: 0.32rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
#caller-info-table td:first-child { color: var(--muted); width: 42%; }
#caller-info-panel iframe { border-radius: var(--radius-sm); border: 1px solid var(--line); margin-top: 0.6rem; }

/* Memory panels */
.muted { color: var(--muted); font-size: 0.85rem; }
#caller-history-panel, #relevant-info-panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}
#relevant-info-panel { border-left: 3px solid var(--accent); background: #fff; }
#caller-history-panel h4, #relevant-info-panel h4 {
  margin: 0.55rem 0 0.3rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-deep);
}
#caller-history-panel ul, #relevant-info-panel ul { margin: 0.3rem 0; padding-left: 1.15rem; }
#caller-history-panel li, #relevant-info-panel li { margin-bottom: 0.3rem; }

/* Live insights + location panels */
#insights-panel, #location-panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}
ul.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.insight {
  display: flex; flex-direction: column; gap: 0.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  animation: rise .3s ease both;
}
.insight-tag {
  align-self: flex-start;
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.08rem 0.45rem; border-radius: 999px;
  background: var(--line-soft); color: var(--ink-soft);
}
.insight-text { color: var(--ink); line-height: 1.38; }
.insight-alert { border-left-color: var(--danger); }
.insight-alert .insight-tag { background: #f7e0dd; color: var(--danger-deep); }
.insight-inconsistency { border-left-color: var(--accent); }
.insight-inconsistency .insight-tag { background: var(--accent-soft); color: #6b4e12; }
.insight-info { border-left-color: var(--primary); }
.insight-info .insight-tag { background: #d9ecec; color: var(--primary-deep); }
.insight.sev-high { box-shadow: 0 0 0 2px rgba(187,59,48,.12); }
.loc-label { font-weight: 600; color: var(--ink); margin: 0 0 0.2rem; }
.loc-query { color: var(--ink-soft); font-size: 0.84rem; margin: 0 0 0.5rem; word-break: break-word; }
.loc-query a { text-decoration: none; color: var(--primary); }
.loc-map { display: block; width: 100%; border: 1px solid var(--line); }

/* ------------------------------------------------------------- Waiting page */
.waiting-page {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  padding: 2rem; text-align: center;
}
.waiting-box {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 2.6rem 2.8rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  text-align: left;
  position: relative;
}
.waiting-box h2 {
  color: var(--ink);
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  padding-left: 2.2rem;
  position: relative;
}
/* calm "listening" pulse next to the waiting title */
.waiting-box h2::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(11,107,115,.5);
  animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(11,107,115,.45); }
  70%,100% { box-shadow: 0 0 0 16px rgba(11,107,115,0); }
}
.waiting-box p { font-size: 0.97rem; color: var(--ink-soft); margin: 0.55rem 0; }
.waiting-box strong { color: var(--primary-deep); }

/* ------------------------------------------------------------- Manage page */
.manage-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.manage-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .12s ease;
}
.manage-card:hover { box-shadow: var(--shadow-md); }
.manage-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.manage-head strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.manage-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.manage-actions button, .obs-btns button {
  font-size: 0.8rem;
  padding: 0.34rem 0.7rem;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--primary-deep);
  box-shadow: none;
  font-weight: 600;
}
.manage-actions button:hover, .obs-btns button:hover { background: #eef4f4; transform: none; filter: none; }
.manage-actions button.danger, .obs-btns button.danger {
  color: var(--danger); border-color: #eccdc9; background: #fdf4f3;
}
.lang-input { width: auto; margin: 0; padding: 0.3rem 0.5rem; border: 1px solid var(--line); border-radius: 7px; }

.manage-obs { margin-top: 0.75rem; border-top: 1px dashed var(--line); padding-top: 0.75rem; }
.obs-row { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.55rem; }
.obs-tag {
  flex: 0 0 auto;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--accent-soft); color: #8a6418;
  padding: 0.18rem 0.5rem; border-radius: 6px; margin-top: 0.35rem; font-weight: 700;
}
.obs-text { flex: 1 1 auto; width: auto; margin: 0; font-size: 0.88rem; padding: 0.45rem 0.55rem; }
.obs-btns { display: flex; flex-direction: column; gap: 0.3rem; }

.manage-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.manage-toolbar #manage-search { flex: 1 1 240px; min-width: 0; margin: 0; }
.manage-toolbar #manage-sort { width: auto; margin: 0; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.manage-toolbar #manage-count { margin-left: auto; }

.manage-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: #fff;
  padding: 0.6rem 1.15rem; border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  pointer-events: none; z-index: 9999; font-size: 0.9rem;
}

/* ----------------------------------------------------------- Misc feedback */
.form-error {
  background: #fdf3f2;
  border: 1px solid #eccdc9;
  color: var(--danger-deep);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin: 0.25rem 0 0.9rem;
  animation: rise .25s ease both;
}

.route-loading { display: flex; justify-content: center; align-items: center; min-height: 260px; }
.spinner {
  width: 38px; height: 38px;
  border: 3px solid rgba(11,107,115,.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none; }

/* ----------------------------------------------------------------- Mobile */
@media (max-width: 820px) {
  .app-header { padding: 0.7rem 1rem; }
  .header-content { flex-wrap: wrap; gap: 0.6rem; }
  .header-text h1 { font-size: 1.2rem; }
  .header-text p { font-size: 0.7rem; }
  .powered-by { margin-left: auto; }
  #lang-switcher { margin-left: 0; }

  .main-content { margin: 1.1rem; padding: 1.5rem; }

  .dashboard-container { height: auto; padding: 1rem; }
  .chat-panel, .side-col { width: 100% !important; max-width: 100%; }
  .chat-window { height: 52vh; }
  .location-col #location-panel { min-height: 300px; }

  .config-table, .config-table tbody, .config-table tr, .config-table td { display: block; width: 100%; }
  .config-table .label-cell { width: 100%; padding: 0.6rem 0 0.2rem; }
  .config-table td { padding: 0.2rem 0; }

  .manage-head { flex-direction: column; align-items: flex-start; }
  .obs-row { flex-wrap: wrap; }
  .obs-text { flex: 1 1 100%; }
  .manage-toolbar #manage-count { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}