:root {
  --bg: #0d1117;
  --bg-soft: #161b22;
  --bg-panel: #1c2129;
  --border: #2d333b;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --accent: #4c8dff;
  --accent-hover: #3a7ae8;
  --green: #3fb950;
  --red: #f85149;
  --amber: #d29922;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100vh; height: 100dvh; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  /* The page itself never scrolls: .messages is the only scroll container, so
     the composer can never be pushed off-screen. */
  overflow: hidden;
  overscroll-behavior: none;
}

.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Let the column/row children shrink below their content size. */
  min-height: 0;
}

.sidebar {
  width: 330px;
  min-width: 330px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Keep the sidebar from stretching the row it lives in. */
  min-height: 0;
  flex-shrink: 0;
}

.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { font-size: 26px; }
.brand h1 { font-size: 19px; font-weight: 650; }
.brand p { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panel h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
}

label { font-size: 12.5px; color: var(--text-dim); }

input[type="text"], input[type="password"], select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 0.15s;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
input::placeholder { color: #586069; }
select { cursor: pointer; }

.btn {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 13px;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  font-family: inherit;
}
.btn:hover:not(:disabled) { border-color: var(--text-dim); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--text-dim); }
.btn.ghost:hover:not(:disabled) { color: var(--text); }

.sources { display: flex; flex-direction: column; gap: 6px; }
.source {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
  transition: border-color 0.15s, background 0.15s;
}
.source:hover { border-color: var(--text-dim); }
.source.active { border-color: var(--accent); background: rgba(76,141,255,0.1); }
.source.unconfigured .dot { background: var(--yellow, #d29922); }
.source.unconfigured .tag { color: var(--yellow, #d29922); }
.source.unreachable { opacity: 0.7; cursor: not-allowed; }
.source.unreachable .dot { background: var(--red); }
.source.unreachable .tag { color: var(--red); }
.source .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim); flex-shrink: 0;
}
.source.ready .dot { background: var(--green); }
.source .name { flex: 1; }
.source .tag { font-size: 11px; color: var(--text-dim); }

.field { display: flex; flex-direction: column; gap: 4px; }
.slider-field { margin-top: 2px; }
input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-top: 2px;
  user-select: none;
}
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 38px; height: 21px;
  background: var(--border);
  border-radius: 21px;
  position: relative;
  transition: background 0.18s;
  flex-shrink: 0;
}
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 17px; height: 17px;
  background: #aab2bd;
  border-radius: 50%;
  transition: transform 0.18s, background 0.18s;
}
.toggle-input:checked + .toggle-track { background: var(--accent); }
.toggle-input:checked + .toggle-track .toggle-thumb {
  transform: translateX(17px);
  background: #fff;
}
.toggle-label { font-size: 13px; color: var(--text); }

.status, .hint { font-size: 12.5px; line-height: 1.5; }
.status:empty, .hint:empty { display: none; }
.status.ok { color: var(--green); }
.status.err { color: var(--red); }
.hint { color: var(--text-dim); }
.hint.warn { color: var(--amber); }

.foot { font-size: 11px; color: var(--text-dim); text-align: center; margin-top: auto; padding-top: 4px; flex-shrink: 0; }
code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 11px; }

.hidden { display: none !important; }

/* min-height:0 is the actual fix. Without it this column flex item defaults to
   min-height:auto and refuses to shrink below its content, so a long answer
   stretches .chat past the viewport and pushes the composer off-screen. */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }

/* The one and only scroll container. flex:1 + min-height:0 caps it at the space
   left over after the composer, which is what makes it scrollable. */
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 28px 32px;
}

.empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-dim);
  gap: 8px;
}
.empty-icon { font-size: 42px; margin-bottom: 6px; }
.empty h3 { font-size: 17px; color: var(--text); font-weight: 600; }
.empty p { font-size: 13.5px; max-width: 380px; line-height: 1.6; }

.msg { display: flex; gap: 13px; margin-bottom: 22px; max-width: 860px; }
.msg .avatar {
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.msg.user .avatar { background: #263042; }
.msg.assistant .avatar { background: #1f3a2a; }
.msg .body { flex: 1; min-width: 0; }
.msg .who { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; }
.msg .text {
  font-size: 14.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
  /* Long URLs / hashes / minified lines wrap instead of widening the page. */
  overflow-wrap: anywhere;
  max-width: 100%;
}
.msg.assistant .text.notfound { color: var(--amber); font-style: italic; }

/* Code and tables scroll inside their own box rather than the page. */
.msg .text pre,
.msg .text table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.msg .text pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 11px;
  margin: 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
}
.msg .text pre code { background: none; padding: 0; font-size: inherit; }
.msg .text img { max-width: 100%; height: auto; }

/* Tables need a scroll wrapper; the element itself goes inside a .table-wrap. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 8px 0;
}
.table-wrap table { border-collapse: collapse; }
.table-wrap th, .table-wrap td {
  border: 1px solid var(--border);
  padding: 5px 9px;
  font-size: 12.5px;
  white-space: nowrap;
}

.sources-list { margin-top: 11px; max-width: 100%; }
.sources-list summary {
  font-size: 12px; color: var(--text-dim); cursor: pointer;
  user-select: none; list-style: none;
}
.sources-list summary::-webkit-details-marker { display: none; }
.sources-list summary::before { content: "▸ "; }
.sources-list[open] summary::before { content: "▾ "; }
.sources-list ul { margin: 8px 0 0 4px; list-style: none; }
.sources-list li {
  font-size: 12.5px; color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 0;
  /* Paths are long and unbreakable by default. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.thinking { display: flex; gap: 5px; align-items: center; color: var(--text-dim); font-size: 13.5px; }
.thinking .bounce { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: bounce 1.2s infinite; }
.thinking .bounce:nth-child(2) { animation-delay: 0.15s; }
.thinking .bounce:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }

.composer {
  display: flex;
  gap: 10px;
  padding: 18px 32px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  /* Stick to the bottom of the chat column and never collapse. */
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 2;
  /* Clear the iPhone home indicator / rounded corners. */
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(32px + env(safe-area-inset-left, 0px));
  padding-right: calc(32px + env(safe-area-inset-right, 0px));
}
.composer input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  padding: 12px 15px;
  font-size: 14.5px;
  font-family: inherit;
}
.composer input:focus { outline: none; border-color: var(--accent); }
.composer .btn { padding: 12px 22px; }

.err-banner {
  background: rgba(248,81,73,0.12);
  border: 1px solid rgba(248,81,73,0.4);
  color: var(--red);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
  max-width: 860px;
  overflow-wrap: anywhere;
}

/* Mobile-only top bar; hidden on desktop so the layout is unchanged there. */
.topbar {
  display: none;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.topbar-title { font-size: 15px; font-weight: 600; }

.icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--border); }

@media (max-width: 820px) {
  /* Chat first so it gets the screen; sidebar becomes a drawer overlaying it. */
  .app { flex-direction: column; position: relative; }

  .topbar { display: flex; }

  /* Collapsed by default on mobile: the drawer is taken out of flow and laid
     over the chat, so the chat keeps the full height whether it is open or not
     and the messages area stays the single scroll container. */
  .sidebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    padding: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 70dvh;
    z-index: 3;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
    /* Override the desktop fixed height so the drawer sizes to its content. */
    height: auto;
    flex-shrink: 1;
  }
  .app.drawer-closed .sidebar { display: none; }

  /* Smaller paddings and gaps on small screens. */
  .messages { padding: 16px 14px; }
  .brand { display: none; }

  .composer {
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }

  /* 16px stops iOS Safari zooming the page when a field is focused. */
  input[type="text"], input[type="password"], select,
  .composer input { font-size: 16px; }

  /* Comfortable tap targets (>= 44px). */
  .btn { min-height: 44px; padding: 10px 14px; font-size: 14.5px; }
  .composer .btn { min-height: 44px; padding: 10px 18px; }
  input[type="text"], input[type="password"], select { min-height: 44px; }
  .source { min-height: 44px; }
  .toggle-row { min-height: 44px; }
  .toggle-track { width: 44px; height: 26px; border-radius: 26px; }
  .toggle-thumb { width: 22px; height: 22px; }
  .toggle-input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }

  .panel { padding: 11px; gap: 7px; }
  .foot { font-size: 10.5px; }

  /* Keep message rows from being cramped by the 30px avatar gutter. */
  .msg { gap: 9px; margin-bottom: 16px; }
  .msg .text { font-size: 15px; }
  .msg .avatar { width: 26px; height: 26px; font-size: 13px; }

  .empty { padding: 0 6px; }
  .empty h3 { font-size: 16px; }
  .empty p { font-size: 13.5px; max-width: 100%; }
}

/* Very short landscape phones: give the drawer less room. */
@media (max-width: 820px) and (max-height: 500px) {
  .sidebar { max-height: 78dvh; }
}