/* ICOS Data Discovery Portal — app-specific styles (Bootstrap via icos_chrome) */

/* ── Base ── */
body {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
}

/* ── ICOS chrome tweaks (mirrors trajectory viewer) ── */
header .navbar-brand img { width: 150px; height: auto; }
footer .navbar-brand      { margin-top: 1.5rem; display: inline-block; }
footer .navbar-brand img  { width: 150px; height: auto; }

header div.header {
  background-image: url('/static/header_bg.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: transparent !important;
}

header a, header a:visited { text-decoration: none !important; }

footer .footer-bottom .list-inline-item { margin-right: 2rem; }
footer a, footer a:visited { color: #fff !important; text-decoration: underline !important; }
footer a:hover             { color: rgba(255,255,255,0.75) !important; }
footer h3, footer .h6      { color: #fff; }

/* ── Mega-menu ── */
#collapsing-navbar            { display: flex !important; width: 100% !important; }
#block-cp-theme-d10-main-menu { width: 100% !important; }
#cp_theme_d10_menu            { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; }
#navbar-main .nav.navbar-nav  { width: 100% !important; display: flex !important; }
#navbar-main .menu-level-0    { flex: 1 !important; white-space: nowrap; }
#navbar-main .top-link        { font-size: 0.9rem; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
#navbar-main                  { position: relative; }

.dropdown-menu.show {
  display: flex !important;
  flex-wrap: wrap;
  position: absolute;
  left: 0; right: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  padding: 1rem 1.5rem;
  gap: 0;
}
.menu-col            { min-width: 200px; flex: 1; padding: 0 1rem; }
.menu-col .list-item { padding: 2px 0; }

/* ── App layout ── */
body {
  display: flex;
  flex-direction: column;
  /* --app-h is set from window.visualViewport on phones only, because a
     virtual keyboard shrinks the visible area without shrinking 100dvh — the
     layout then extends under the keyboard and the browser scrolls the page
     to follow the caret, taking the conversation off the top of the screen.
     Everywhere else the fallback applies and nothing changes. */
  height: var(--app-h, 100dvh);
  overflow: hidden;
}

header, footer { flex-shrink: 0; }
footer:empty   { display: none; }

#discovery-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
}

#app-row {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* ── Drag divider ── */
#drag-divider {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: #dee2e6;
  transition: background .15s;
  display: none;
}
#drag-divider:hover, #drag-divider.dragging { background: #2a7ab5; }

/* ── Chat panel ── */
#chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  border-right: 1px solid #dee2e6;
}

#chat-title {
  padding: 10px 16px 8px;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#chat-title h5 { margin: 0; font-size: 0.95rem; color: #495057; }

.plot-bubble { max-width: 90%; }

.file-bubble { display: flex; flex-direction: column; gap: 6px; }
.file-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  color: #2a7ab5;
  text-decoration: none;
  font-size: 0.86rem;
}
.file-chip:hover { background: #eef4fa; border-color: #2a7ab5; }
.file-chip .file-name { font-weight: 600; }
.file-chip .file-size { color: #6c757d; margin-left: 6px; }
.plot-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 4px 0;
  border: 1px solid #dee2e6;
}

#assistant-notice {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin: 8px 16px 0;
  padding: 8px 12px;
  background: #fff8e6;
  border: 1px solid #f0dca4;
  border-radius: 8px;
  color: #6b5a1f;
  font-size: 0.78rem;
  line-height: 1.45;
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

/* ── Message bubbles ── */
.msg            { display: flex; gap: 10px; max-width: 760px; }
.msg.user       { align-self: flex-end; flex-direction: row-reverse; }
.msg.ai         { align-self: flex-start; }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.msg.ai   .avatar {
  background: #fff; color: #fff;
  border: 1px solid #dee2e6;
  overflow: hidden;
  width: 50px; height: 50px;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.msg.user .avatar { background: #6c757d; color: #fff; }

.bubble {
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.55;
  font-size: 0.9rem;
  max-width: 700px;
  word-break: break-word;
}
.msg.ai   .bubble { background: #f1f3f5; color: #212529; border-bottom-left-radius: 4px; }
.msg.user .bubble { background: #2a7ab5; color: #fff;    border-bottom-right-radius: 4px; }
.bubble strong    { font-weight: 600; }
.bubble ul, .bubble ol { margin: 6px 0 0; padding-left: 18px; }
.bubble li        { margin: 3px 0; }
.bubble p         { margin: 0 0 6px; }
.bubble p:last-child { margin-bottom: 0; }

/* Markdown tables */
.bubble table {
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 8px 0;
  width: 100%;
}
.bubble th, .bubble td {
  border: 1px solid #ced4da;
  padding: 4px 10px;
  text-align: left;
}
.bubble th {
  background: #e8f0f7;
  font-weight: 600;
}
.bubble tr:nth-child(even) td { background: #f8f9fa; }
.bubble a { color: #2a7ab5; }
.msg.user .bubble a { color: #cfe2ff; }

/* streaming cursor */
.cursor::after {
  content: "▋";
  animation: blink 0.7s step-end infinite;
  color: #2a7ab5;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── Input area ── */
#input-area {
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #dee2e6;
  display: flex;
  flex-wrap: wrap;          /* lets the cost read-out sit on its own line */
  gap: 8px;
  align-items: flex-end;
}

/* Model picker + cost read-out share one line under the composer. */
#backend-bar {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

#backend-bar label {
  font-size: 0.75rem;
  color: #6c757d;
  margin: 0;
}

#backend-select {
  width: auto;
  min-width: 190px;
  font-size: 0.75rem;
  padding: 2px 22px 2px 8px;
}

/* Per-answer and session cost; hidden unless a priced model served the turn. */
#cost-readout {
  margin-left: auto;
  font-size: 0.75rem;
  color: #6c757d;
  display: none;
}

#cost-readout .cost-sep {
  opacity: 0.45;
  margin: 0 0.4rem;
}

#user-input {
  flex: 1;
  resize: none;
  border: 1.5px solid #ced4da;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  max-height: 140px;
  line-height: 1.5;
  transition: border-color .2s;
}
#user-input:focus  { border-color: #2a7ab5; box-shadow: 0 0 0 3px rgba(42,122,181,.15); }

#send-btn, #stop-btn { white-space: nowrap; }

/* ── Results panel ── */
#results-panel {
  width: 400px;
  min-width: 200px;
  max-width: 70%;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
#results-panel.visible { display: flex; }

#results-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid #dee2e6;
  background: #e8f0f7;
}
#results-header h6 { margin: 0 0 2px; color: #2a7ab5; font-weight: 600; font-size: 0.85rem; }
#results-summary   { font-size: 0.78rem; color: #6c757d; }

#portal-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #2a7ab5;
  font-weight: 600;
  text-decoration: none;
}
#portal-link:hover { text-decoration: underline; }

#dataset-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Dataset card ── */
.dataset-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px;
  background: #fafafa;
  transition: box-shadow .15s;
}
.dataset-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.card-spec {
  font-size: 0.82rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 5px;
  line-height: 1.3;
}
.card-meta {
  font-size: 0.75rem;
  color: #6c757d;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.btn-card {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 5px;
  font-weight: 600;
}

/* ── Typing indicator ── */
.typing-dots              { display: inline-flex; gap: 4px; padding: 2px 0; }
.typing-dots span         { width: 7px; height: 7px; border-radius: 50%; background: #2a7ab5; animation: bounce 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }

/* Transient note shown while a tool call is being retried. */
.progress-note {
  margin: 4px 0 4px 46px;
  font-size: 0.78rem;
  color: #8a6d3b;
  background: #fcf8e3;
  border-left: 3px solid #e0c56e;
  border-radius: 4px;
  padding: 4px 9px;
}

/* A locked backend is shown but cannot be chosen. */
#backend-select option:disabled {
  color: var(--muted, #6c757d);
  font-style: italic;
}

/* Second line of the standing notice: where the answers are computed. Its own
   line and colour because it is a different kind of statement from the accuracy
   warning above it — a property of this deployment, not a caveat about AI. */
#assistant-notice .notice-local {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #1b6b5a;
}

/* Which tool is running right now. Sits with the messages, not over them, so a
   long tool call reads as work in progress rather than a stalled page. */
.activity {
  display: flex;
  align-items: center;
  margin: 4px 0 4px 46px;
  padding: 5px 10px;
  font-size: 0.8rem;
  color: #1b6b5a;
  background: #eef5f3;
  border-radius: 6px;
  width: fit-content;
}

@media (prefers-reduced-motion: reduce) {
  .activity .fa-spin { animation: none; }
}

/* Operator console: a plain event log, monospace, scrolling. Deliberately
   unstyled beyond legibility — it is for reading what happened, not for looks. */
#admin-console {
  flex-basis: 100%;
  border: 1px solid var(--rule, #d6dddA);
  border-radius: 5px;
  background: #10201d;
  color: #cfe3dd;
  margin-bottom: 6px;
  overflow: hidden;
}

#admin-console-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: #17302b;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#admin-console-head .btn {
  padding: 1px 8px;
  font-size: 0.68rem;
  color: #cfe3dd;
  border-color: #3b4744;
}

#admin-log {
  max-height: 190px;
  overflow-y: auto;
  padding: 4px 8px 6px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.5;
}

.admin-row { display: flex; gap: 8px; white-space: pre-wrap; word-break: break-word; }
.admin-t { color: #6f8c85; flex: 0 0 3.5rem; text-align: right; }
.admin-k { color: #8fb6ac; flex: 0 0 4.2rem; }
.admin-v { flex: 1 1 auto; }
.k-ok    .admin-k { color: #6dbb7d; }
.k-err   .admin-k { color: #d98a4e; }
.k-err   .admin-v { color: #e8b48c; }
.k-tool  .admin-k { color: #4fb79e; }
.k-usage .admin-k { color: #9aa8f0; }
.k-code  .admin-v { color: #9fb0ab; }

/* Offered after a turn that failed, to the operator only. */
.escalate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 6px 46px;
  padding: 7px 11px;
  font-size: 0.82rem;
  color: #8a6d3b;
  background: #fcf8e3;
  border: 1px solid #e0c56e;
  border-radius: 6px;
  width: fit-content;
}

/* Generated code in the operator console: shown whole, scrolled if long. */
.admin-code {
  margin: 2px 0 4px;
  padding: 4px 6px;
  max-height: 11em;
  overflow: auto;
  background: #0b1815;
  border-radius: 3px;
  color: #9fb0ab;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}

.admin-trunc {
  display: inline-block;
  margin-bottom: 3px;
  padding: 0 5px;
  border-radius: 3px;
  background: #d98a4e;
  color: #10201d;
  font-weight: 600;
}

/* ── Phones ─────────────────────────────────────────────────────────────
   Tested on the stand 2026-09-10: the two standing notices took the top third
   of the screen, the slot timer with its Pause/Finish buttons sat over the
   operator console toggle, and the bubble text was desktop-sized. Below 640px
   the notices go (they are on the brochure and the sign-in page), the results
   panel moves under the chat instead of beside it, the text steps down one
   size, and the slot timer becomes a full-width strip along the bottom with
   the composer padded so nothing hides beneath it. The timer's own style is
   inline, hence the !important. */
@media (max-width: 640px) {
  #assistant-notice { display: none; }
  #chat-title       { padding: 6px 10px; }
  #chat-title h5    { font-size: 0.8rem; }
  #chat-title .btn  { font-size: 0.7rem; padding: 2px 6px; }
  #messages         { padding: 10px 8px; gap: 10px; }
  .msg              { max-width: 100%; }
  .avatar           { display: none; }
  .bubble           { font-size: 0.82rem; padding: 8px 10px; }
  .bubble table     { font-size: 0.72rem; }
  .activity         { margin-left: 4px; font-size: 0.74rem; }
  #app-row          { flex-direction: column; }
  #chat-panel       { border-right: none; }
  #results-panel    { max-width: 100%; max-height: 38%; border-top: 1px solid #dee2e6; }
  #drag-divider     { display: none !important; }
  #input-area       { padding: 8px 8px 56px; }
  #backend-bar      { font-size: 0.72rem; }
  #backend-bar .btn { font-size: 0.7rem; padding: 2px 6px; }
  #icos-slot-timer  {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    border-radius: 0 !important; border-width: 1px 0 0 !important;
    justify-content: center !important;
    font-size: 11.5px !important; padding: 0.35rem 0.5rem !important;
  }
}

/* ── Thumbs up under an answer ── */
.like-row { margin-top: 8px; display: flex; justify-content: flex-end; }
.like-btn {
  font: inherit; font-size: 0.74rem; color: #6c757d;
  background: #fff; border: 1px solid #dee2e6; border-radius: 14px;
  padding: 2px 10px; cursor: pointer; line-height: 1.5;
}
.like-btn:hover:not(:disabled) { color: #2a7ab5; border-color: #2a7ab5; }
.like-btn.liked, .like-btn.liked:disabled { color: #1b6b5a; border-color: #1b6b5a; background: #eef5f3; cursor: default; }
.like-btn:disabled:not(.liked) { opacity: 0.6; }
.like-row { gap: 6px; align-items: center; flex-wrap: wrap; }
.feedback-ask { display: flex; gap: 6px; align-items: center; flex: 1 1 100%; margin-top: 6px; }
.feedback-ask label { display: flex; gap: 6px; align-items: center; flex: 1; font-size: 0.78rem; color: #495057; }
.feedback-ask input { flex: 1; font: inherit; font-size: 0.8rem; padding: 3px 8px; border: 1px solid #ced4da; border-radius: 6px; }