:root {
  --bg: #08101d;
  --bg-soft: #0d1830;
  --panel: rgba(12, 22, 43, 0.72);
  --panel-strong: rgba(10, 18, 36, 0.95);
  --text: #ebf4ff;
  --muted: #95abc8;
  --line: rgba(116, 170, 255, 0.24);
  --accent: #1dd8ff;
  --accent-strong: #00b7e8;
  --user: rgba(21, 140, 255, 0.28);
  --assistant: rgba(35, 72, 128, 0.34);
  /* Channel colors for the three top-level nav buttons. These are
     fixed brand colors — each link uses the same gradient on every
     page (chat / admin / beyin) so users learn the association.
     No purple / pink anywhere. */
  --color-sohbet-grad: linear-gradient(135deg, #a8e3ff 0%, #5cc6ff 45%, #1f9eff 100%);
  --color-sohbet-shadow: rgba(31, 158, 255, 0.35);
  --color-admin-grad: linear-gradient(135deg, #ffd99f 0%, #ffb866 45%, #f48a2a 100%);
  --color-admin-shadow: rgba(244, 138, 42, 0.35);
  --color-beyin-grad: linear-gradient(135deg, #b3f0c4 0%, #5fda94 45%, #1fb368 100%);
  --color-beyin-shadow: rgba(31, 179, 104, 0.35);
  /* Brain Agent message-bubble channel re-uses the Beyin green so
     the Beyin button color and the Brain-agent conversation tint
     stay consistent throughout the product. */
  --user-brain: rgba(80, 200, 130, 0.30);
  --assistant-brain: rgba(28, 110, 70, 0.42);
  --line-brain: rgba(120, 230, 165, 0.28);
  --accent-brain: #4adc8a;
  --glow: 0 0 0 1px rgba(81, 179, 255, 0.22), 0 18px 48px rgba(5, 14, 30, 0.62);
  --radius: 18px;
  --button-hover-filter: brightness(1.06);
  --button-hover-border: rgba(137, 213, 255, 0.56);
}

* {
  box-sizing: border-box;
}

/* Subtle, Claude-style scrollbars: thin floating thumb, no visible track.
   Firefox uses the `scrollbar-*` props; WebKit/Blink use the pseudo-elements.
   The transparent border + background-clip makes the thumb appear narrow and
   inset (a short bar floating in the gutter rather than a full-width column on
   a white track). */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(149, 171, 200, 0.35) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(149, 171, 200, 0.32);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(180, 200, 226, 0.5);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 12%, rgba(52, 236, 255, 0.2) 0%, transparent 36%),
    radial-gradient(circle at 85% 84%, rgba(43, 125, 255, 0.28) 0%, transparent 34%),
    linear-gradient(160deg, #040816 0%, #08101d 42%, #0a1530 100%);
  overflow: hidden;
}

.background-shape {
  position: fixed;
  border-radius: 999px;
  z-index: 0;
  filter: blur(8px);
}

.shape-a {
  width: 420px;
  height: 420px;
  left: -130px;
  bottom: -160px;
  background: radial-gradient(circle, rgba(23, 214, 255, 0.8) 0%, rgba(23, 214, 255, 0.06) 65%);
  opacity: 0.45;
}

.shape-b {
  width: 340px;
  height: 340px;
  right: -100px;
  top: 20px;
  background: radial-gradient(circle, rgba(111, 121, 255, 0.7) 0%, rgba(111, 121, 255, 0.08) 68%);
  opacity: 0.5;
}

.app-shell {
  /* Chat is centered in the VIEWPORT (not between the rails) so
     opening/closing a rail no longer shifts it. Rails are absolutely
     positioned at the viewport edges and slide off-screen when
     closed — they appear/disappear without touching the chat. */
  /* Rail widths bumped ~10% so each panel has more breathing room.
     The 700px buffer on --chat-w keeps the centered chat from
     slipping under either rail at common widescreens (left + right
     + small visual gutter). */
  --rail-left-w: 308px;
  --rail-right-w: 352px;
  --chat-w: min(820px, calc(100vw - 700px));
  --rail-anim-dur: 420ms;
  --rail-anim-ease: cubic-bezier(0.32, 0.72, 0, 1);
  position: relative;
  z-index: 1;
  display: block;
  height: 100vh;
  padding: 1rem 0;
}

.app-shell--locked {
  display: none;
}

/* The notification bell/panel and the right-rail toggle button are
   appended to <body> (siblings of .app-shell), so the rule above
   can't reach them — they'd stay pinned to the right edge over the
   login gate after sign-out. app.js marks <body> with .is-auth-locked
   while unauthenticated; hide both right-edge surfaces here so the
   gate shows nothing but the sign-in card. */
body.is-auth-locked #right-rail-toggle,
body.is-auth-locked #notif-bell-btn,
body.is-auth-locked #notif-panel {
  display: none !important;
}

/* Pre-auth probe (see inline <script> at the top of index.html's
   <head>): when a Google token or bypass selection is already in
   storage we suppress the default login-gate-on-locked-shell flash
   for hop-ins from admin / brain. JS will undo this if the stored
   token turns out to be invalid. */
html.is-pre-authed .auth-gate { display: none !important; }
html.is-pre-authed .app-shell.app-shell--locked { display: block !important; }

/* Chat — centered in the viewport via margin auto, fixed width.
   Position is independent of the rails' open/closed state. */
.app-shell .chat-column {
  width: var(--chat-w);
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
  min-width: 0;
}

/* Rails are absolute overlays anchored to the viewport edges.
   They slide in/out via transform — the chat below them never
   reflows. */
.app-shell .left-rail,
.app-shell .right-rail {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  overflow: hidden;
  padding: 0;
  transition: opacity var(--rail-anim-dur) var(--rail-anim-ease),
              transform var(--rail-anim-dur) var(--rail-anim-ease);
}

.app-shell .left-rail  { left:  0; width: var(--rail-left-w); }
.app-shell .right-rail { right: 0; width: var(--rail-right-w); }

.app-shell .rail-inner {
  /* Locked to the rail's natural width so the inside never reflows
     while the outer width animates to 0. */
  width: 308px;
  height: 100%;
  box-sizing: border-box;
  /* Flex column so the pinned account footer stays anchored to the
     bottom while the .rail-inner-scroll above it owns all overflow.
     Padding moves to the children to keep the footer's top border
     edge-to-edge. */
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Frozen top zone (left rail) — same role as the right rail's
   ``.rail-top-safe``: reserves a 56px strip the left-rail toggle
   icon paints over, so card content can never scroll into it. */
.app-shell .left-rail .rail-top-safe {
  flex: 0 0 56px;
  min-height: 56px;
}
/* Frozen middle block above the scroll — brand + the page-nav
   shortcuts stay visible even when ``.rail-inner-scroll`` below
   scrolls. Horizontal padding matches the scroll region so visual
   alignment is preserved across the fixed/scroll seam. */
.app-shell .left-rail .rail-top-fixed {
  flex: 0 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
/* Scrollable region — everything above the pinned account footer.
   Top padding removed because ``.rail-top-safe`` above now owns
   the icon-clearance reservation; bottom padding stays so the last
   item doesn't butt against the footer. */
.app-shell .left-rail .rail-inner-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 1rem;
}
/* Right rail — flex column with a frozen ``.rail-top-safe`` zone at
   the top so the bell + right-rail-toggle icons (position:fixed,
   pinned to the viewport's top-right) always sit over empty space.
   Cards only scroll inside ``.rail-inner-scroll`` BELOW that zone. */
.app-shell .right-rail .rail-inner {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-shell .right-rail .rail-top-safe {
  /* Just enough clearance for the bell + right-rail-toggle (both
     position:fixed). Toggle sits at viewport y≈28-60px; the rail
     itself starts at viewport y=16 (top:1rem), so a 44px safe zone
     lands the first card border at y=60 — flush under the icons with
     no visible gap. Previously 56px, which left a noticeable band. */
  flex: 0 0 44px;
  min-height: 44px;
}
.app-shell .right-rail .rail-inner-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-shell .right-rail .rail-inner {
  width: 352px;
}

/* Slide the whole rail off-screen — the chat never sees this
   movement because the rail isn't in the document flow. */
.app-shell.is-left-collapsed .left-rail {
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

.app-shell.is-right-collapsed .right-rail {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}

/* Single toggle per side — sits at the top corner of the viewport
   (position: fixed) so it stays put whether the rail is open or
   closed. Same icon, same position; the icon's vertical bar tells
   the user which side it controls. */
.rail-toggle-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem + 12px);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease;
  /* Higher than the notification panel (34) and bell (35) so the
     right-rail toggle stays clickable when the notification panel
     slides over the top-right corner. Without this the toggle gets
     visually buried under the panel and looks like it disappeared. */
  z-index: 36;
}

.rail-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line);
}

.rail-toggle-btn:active {
  transform: scale(0.94);
}

.rail-toggle-btn svg { display: block; }

/* Pinned to the viewport corners. The .app-shell no longer has
   horizontal padding (rails now hug the edges), so the inset is
   just the rail-inner's content padding — keeps the icon visually
   at the panel's own top-left/top-right content corner. */
.rail-toggle-btn--left  { left:  12px; }
.rail-toggle-btn--right { right: 12px; }

/* (top clearance for the toggle icon is now handled by
    .rail-inner's padding-top — keeps both rails consistent.) */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.auth-card {
  width: min(92vw, 420px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--glow);
  padding: 1.1rem;
  text-align: center;
}

.auth-card h2 {
  margin: 0.28rem 0 0.5rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.auth-desc {
  margin: 0 0 0.85rem;
  color: #c4daf5;
  font-size: 0.92rem;
}

.auth-status {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

#google-login-btn {
  display: inline-flex;
  justify-content: center;
}

.auth-options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
}

.auth-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0.3rem 0;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-bypass-btn {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.auth-bypass-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

.auth-bypass-btn:focus-visible {
  outline: 2px solid var(--accent, #6aa9ff);
  outline-offset: 2px;
}

.auth-bypass-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

/* Rails keep their bordered panel look; the chat column is now
   borderless / background-less for a cleaner Claude-style canvas.
   Outer-edge corners flattened and outer border dropped because
   the rail now hugs the viewport edge — a rounded outer corner
   plus a border there would float a 1px line in dead screen space. */
.left-rail,
.right-rail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--glow);
}

.left-rail {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.right-rail {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.chat-column {
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* Scrolling now lives inside .rail-inner (so the rail itself can
   clip during animation); these rules used to set padding/overflow
   on the outer rails — both moved to .rail-inner above. */

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.brand h1,
.chat-header h2 {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
}

.brand h1 {
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  color: #dff5ff;
}

.brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9ff6ff 0%, #27ceff 60%, #0f4f9f 100%);
  box-shadow: 0 0 18px rgba(29, 216, 255, 0.8);
}

.brand-label,
.section-title,
.eyebrow {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-chat-btn,
.quick-btn,
.ghost-btn,
.send-btn,
.recent-chat-btn {
  font: inherit;
  border: 0;
  cursor: pointer;
}

.new-chat-btn,
.btn,
.file-input-btn,
button {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease;
}

.new-chat-btn:hover,
.btn:not(:disabled):hover,
.file-input-btn:hover,
.quick-btn:hover,
.recent-chat-btn:hover,
.ghost-btn:hover,
.send-btn:not(:disabled):hover,
.pause-btn:not(:disabled):hover,
.mode-option:hover,
.feedback-btn:hover,
.recent-chat-rename-btn:hover,
.uploaded-file-delete-btn:hover,
button:not(:disabled):hover {
  filter: var(--button-hover-filter);
  border-color: var(--button-hover-border);
}

.new-chat-btn {
  width: 100%;
  display: inline-block;
  text-align: center;
  border-radius: 12px;
  padding: 0.72rem 0.92rem;
  font-weight: 700;
  color: #041225;
  background: linear-gradient(135deg, #86f8ff 0%, #1dd8ff 45%, #27a6ff 100%);
  box-shadow: 0 8px 22px rgba(16, 163, 255, 0.4);
  text-decoration: none;
}

/* Three top-level nav links — each owns its own brand color. The
   color is identity, so it follows the link everywhere (chat page
   rail, admin page rail, beyin page rail). Defined as CSS vars in
   :root so every page resolves the same gradient. */
.chat-link-btn {
  margin-top: 0.5rem;
  background: var(--color-sohbet-grad);
}
.chat-link-btn:hover {
  box-shadow: 0 8px 22px var(--color-sohbet-shadow);
}

.admin-link-btn {
  margin-top: 0.35rem;
  background: var(--color-admin-grad);
}
.admin-link-btn:hover {
  box-shadow: 0 8px 22px var(--color-admin-shadow);
}

.brain-link-btn {
  margin-top: 0.35rem;
  background: var(--color-beyin-grad);
}
.brain-link-btn:hover {
  box-shadow: 0 8px 22px var(--color-beyin-shadow);
}

/* Visual break that separates the account/admin block above from
   the conversation block below. A thin hairline plus generous
   vertical margin reads as a section divider without adding
   extra typography. */
.rail-section-break {
  height: 1px;
  background: var(--line);
  opacity: 0.7;
  margin: 1.25rem 0 1rem;
}

.rail-account {
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

/* Pinned variant — sits in the rail-inner's flex bottom slot. No
   rounded corners + no top margin because it spans the full rail
   width and butts against the divider; flex-shrink: 0 keeps it from
   collapsing when the sohbet list above grows. */
.rail-account--pinned {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.65rem 1rem;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: rgba(8, 18, 36, 0.55);
  backdrop-filter: blur(8px);
}

.rail-account-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--muted);
}

.rail-account-signout {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.rail-account-signout:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.rail-account-signout:focus-visible {
  outline: 2px solid var(--accent, #6aa9ff);
  outline-offset: 2px;
}

.rail-section {
  margin-top: 1.2rem;
}

.quick-list,
.recent-list,
.source-list,
.tips-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: grid;
  gap: 0.55rem;
}

.quick-btn,
.recent-chat-btn {
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: #d9ebff;
  background: rgba(16, 31, 57, 0.78);
}

.recent-chat-btn.active {
  border-color: rgba(130, 237, 255, 0.9);
  background: linear-gradient(120deg, rgba(24, 68, 117, 0.9) 0%, rgba(14, 44, 89, 0.95) 100%);
}

.recent-chat-item {
  list-style: none;
}

.recent-chat-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(16, 31, 57, 0.78);
  padding: 0.4rem 0.45rem 0.4rem 0.65rem;
}

.recent-chat-card:hover {
  border-color: rgba(137, 213, 255, 0.6);
  background: rgba(23, 43, 76, 0.95);
}

.recent-chat-card.active {
  border-color: rgba(130, 237, 255, 0.9);
  background: linear-gradient(120deg, rgba(24, 68, 117, 0.9) 0%, rgba(14, 44, 89, 0.95) 100%);
}

.recent-chat-title-btn {
  border: 0;
  background: transparent;
  color: #d9ebff;
  text-align: left;
  font: inherit;
  width: 100%;
  cursor: pointer;
  padding: 0.2rem 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-chat-title-input {
  display: none;
  width: 100%;
  border: 1px solid rgba(116, 170, 255, 0.42);
  background: rgba(9, 20, 40, 0.88);
  color: #eaf4ff;
  border-radius: 7px;
  font: inherit;
  padding: 0.24rem 0.4rem;
}

.recent-chat-card.is-editing .recent-chat-title-btn {
  display: none;
}

.recent-chat-card.is-editing .recent-chat-title-input {
  display: block;
}

.recent-chat-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.recent-chat-rename-btn,
.recent-chat-delete-btn {
  border: 1px solid rgba(116, 170, 255, 0.28);
  background: rgba(12, 24, 46, 0.88);
  color: #a6bad6;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 26px;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease, filter 150ms ease;
}

.recent-chat-delete-btn:hover {
  border-color: rgba(255, 154, 154, 0.65);
  color: #ffd8d8;
  background: rgba(91, 28, 36, 0.82);
}

.source-list li,
.tips-list li {
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: rgba(13, 27, 51, 0.86);
  border: 1px solid var(--line);
  font-size: 0.9rem;
}

/* Exact-match citation rows: a (linked) document title with the matched
   snippet beneath it. Falls back gracefully for plain-string sources. */
.source-list li .source-title {
  display: block;
  font-weight: 600;
  color: #cfe3ff;
  text-decoration: none;
  word-break: break-word;
}

.source-list li a.source-title:hover {
  text-decoration: underline;
}

.source-list li .source-snippet {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.82;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.muted {
  opacity: 0.95;
}

.chat-column {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1rem;
  min-height: 0;
  /* Grid items default to min-width: auto (i.e. min-content). Without this,
     a wide unbreakable child — e.g. a markdown table with nowrap cells in an
     assistant message — forces .chat-column past its 1fr track and slides
     under the right rail. min-width: 0 makes the grid honor the 1fr
     allocation and lets the table's own overflow-x: auto kick in. */
  min-width: 0;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.chat-header h2 {
  font-size: 1.03rem;
  max-width: 46ch;
  color: #d9e9ff;
  letter-spacing: 0.02em;
}

.ghost-btn {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(14, 28, 52, 0.88);
  color: var(--text);
  padding: 0.45rem 0.75rem;
}

.mobile-menu-btn {
  display: none;
}

.mobile-chat-title {
  display: none;
}

/* Wraps the message feed inside the chat-column grid (header / feed /
   composer). */
.message-feed-wrap {
  position: relative;
  min-height: 0;
  /* Belt-and-suspenders with .chat-column's min-width: 0 — keep this grid
     row from being widened by an oversized message bubble. */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.message-feed {
  overflow: auto;
  overflow-x: hidden;
  padding: 1rem 0.1rem;
  display: grid;
  /* Grid tracks default to minmax(auto, 1fr); auto = min-content, which a
     long user message can blow past, widening the feed and pushing the
     right-aligned user bubble off the visible edge (where overflow-x:
     hidden then clips it). Pin the single column to minmax(0, 1fr) so it
     respects the feed's own width. */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.95rem;
  position: relative;
  z-index: 1;
  flex: 1;
  /* Flex item default min-width: auto would otherwise let min-content of
     message rows widen this beyond the feed-wrap. */
  min-width: 0;
}

.message-row {
  position: relative;
  z-index: 1;
}

.message-row {
  display: flex;
  gap: 0.65rem;
  /* Grid item in .message-feed — without min-width: 0 it sizes to
     min-content, which can shove a right-aligned user bubble past the
     feed's visible right edge. */
  min-width: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: rise 260ms ease forwards;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2f5485;
  flex: 0 0 auto;
  border: 1px solid rgba(163, 217, 255, 0.35);
}

.message-row.user .avatar {
  background: linear-gradient(135deg, #22e0ff 0%, #2f8cff 100%);
  order: 2;
}

.message-row.assistant .avatar {
  background: linear-gradient(135deg, #7e89ff 0%, #6d3dff 100%);
}

.message-row.user {
  justify-content: flex-end;
}

.bubble-wrap {
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  width: fit-content;
  max-width: calc(100% - 42px);
}

.message-row.user .bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.message-row.assistant .bubble-wrap {
  align-items: flex-start;
}

.who {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.bubble {
  display: inline-block;
  max-width: min(75ch, 100%);
  margin: 0;
  padding: 0.72rem 0.86rem;
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
  font-size: 0.93rem;
  border: 1px solid var(--line);
  background: var(--assistant);
  color: #eaf4ff;
}

/* Grounding annotations — per-segment confidence underlines set by the
   validator. green = grounded, yellow = partial/synthesis, red = unverified.
   Clicking a segment opens the evidence popup over the right rail. */
.grounding-seg {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  cursor: pointer;
  transition: background 0.12s ease;
  border-radius: 2px;
}
.grounding-seg:hover,
.grounding-seg.is-active {
  background: rgba(255, 255, 255, 0.07);
}
.grounding-green {
  text-decoration-color: #22c55e;
}
.grounding-yellow {
  text-decoration-color: #f59e0b;
}
.grounding-red {
  text-decoration-color: #ef4444;
  background: rgba(239, 68, 68, 0.10);
}
.grounding-red:hover,
.grounding-red.is-active {
  background: rgba(239, 68, 68, 0.18);
}

/* Table grounding. A fully-grounded table gets ONE green underline under the
   whole table rather than a mark on every cell. A table with a problem cell
   colours cells individually (the .grounding-seg rules above handle those,
   applied directly to <td>/<th>). */
.grounding-table {
  cursor: pointer;
}
.grounding-table-green {
  border-bottom: 3px solid #22c55e;
  padding-bottom: 3px;
  transition: background 0.12s ease;
}
.grounding-table-green:hover {
  background: rgba(34, 197, 94, 0.06);
}
td.grounding-seg,
th.grounding-seg {
  text-underline-offset: 4px;
}

/* Evidence popup — opaque panel that covers the right rail, styled to match
   the right-rail cards. Opened on click, closed on outside-click / Esc. */
.grounding-popup {
  position: fixed;
  top: calc(1rem + 60px);
  right: 0;
  bottom: 1rem;
  left: auto;
  width: var(--rail-right-w, 352px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: #0a1526;
  border: 1px solid var(--line);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  padding: 1rem 1rem 1.15rem;
  overflow-y: auto;
  box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);
  animation: grounding-popup-in 0.14s ease;
}
@keyframes grounding-popup-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
.grounding-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.grounding-popup-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.grounding-popup-badge-green {
  color: #7ee7a6;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.4);
}
.grounding-popup-badge-yellow {
  color: #f7c66b;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
}
.grounding-popup-badge-red {
  color: #ff9a9a;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.4);
}
.grounding-popup-close {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(10, 18, 36, 0.92);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
}
.grounding-popup-close:hover {
  background: rgba(255, 255, 255, 0.08);
}
.grounding-popup-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.grounding-popup-quote {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: rgba(12, 24, 48, 0.84);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(255, 255, 255, 0.18);
}
.grounding-popup-green .grounding-popup-quote { border-left-color: #22c55e; }
.grounding-popup-yellow .grounding-popup-quote { border-left-color: #f59e0b; }
.grounding-popup-red .grounding-popup-quote { border-left-color: #ef4444; }
.grounding-popup-note {
  color: rgba(234, 243, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
}
.grounding-popup-section {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(234, 243, 255, 0.62);
  margin-top: 0.35rem;
}
.grounding-popup-source {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.8rem;
  background: rgba(12, 24, 48, 0.84);
}
.grounding-popup-source-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.grounding-popup-source-text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(234, 243, 255, 0.78);
}

.bubble h1,
.bubble h2,
.bubble h3 {
  margin: 0.25rem 0 0.35rem;
  line-height: 1.3;
  font-weight: 700;
}

.bubble h1 {
  font-size: 1rem;
}

.bubble h2 {
  font-size: 0.96rem;
}

.bubble h3 {
  font-size: 0.92rem;
}

.bubble ul {
  margin: 0.15rem 0 0.35rem;
  padding-left: 1.15rem;
}

.bubble li {
  margin: 0.1rem 0;
}

.bubble code {
  background: rgba(10, 20, 40, 0.7);
  border: 1px solid rgba(116, 170, 255, 0.28);
  border-radius: 6px;
  padding: 0.04rem 0.32rem;
  font-size: 0.88em;
}

.bubble pre {
  margin: 0.3rem 0;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  overflow-x: auto;
  border: 1px solid rgba(116, 170, 255, 0.28);
  background: rgba(10, 20, 40, 0.72);
}

.bubble pre code {
  border: 0;
  padding: 0;
  background: transparent;
}

.bubble a {
  color: #8eeaff;
  text-decoration: underline;
}

/* Markdown tables (GFM pipe tables rendered by renderMarkdown). The wrap
   lets wide tables scroll horizontally instead of overflowing the bubble. */
.bubble .md-table-wrap {
  margin: 0.45rem 0;
  overflow-x: auto;
  border-radius: 9px;
  border: 1px solid rgba(116, 170, 255, 0.28);
}

.bubble .md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9em;
  background: rgba(10, 20, 40, 0.45);
}

.bubble .md-table th,
.bubble .md-table td {
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(116, 170, 255, 0.2);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.bubble .md-table thead th {
  background: rgba(116, 170, 255, 0.16);
  font-weight: 600;
  position: sticky;
  top: 0;
}

.bubble .md-table tbody tr:nth-child(even) td {
  background: rgba(116, 170, 255, 0.06);
}

.bubble .md-table code {
  white-space: normal;
}

.message-row.user .bubble {
  background: var(--user);
  border-color: rgba(74, 192, 255, 0.5);
}

.time {
  margin: 0.28rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.feedback-row {
  display: flex;
  justify-content: flex-start;
  gap: 0.35rem;
  margin-top: 0.18rem;
  align-self: flex-start;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------------
   Brain Agent — thinking-steps transcript
   ----------------------------------------------------------------------
   Rendered as a collapsible <details> above the assistant bubble. Only
   appears for messages produced by the /brain/agent/chat endpoint
   (i.e. ones whose .thoughts array is non-empty).
*/
.agent-thoughts {
  margin: 0 0 0.45rem;
  border: 1px solid rgba(120, 145, 180, 0.30);
  border-radius: 12px;
  background: rgba(28, 38, 58, 0.55);
  font-size: 0.78rem;
  color: #b9cae3;
  align-self: flex-start;
  max-width: 100%;
}

.agent-thoughts > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.42rem 0.78rem;
  font-weight: 600;
  color: #d5e6ff;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.agent-thoughts > summary::-webkit-details-marker {
  display: none;
}

.agent-thoughts > summary::before {
  content: "▸";
  color: #7fa1d4;
  transition: transform 120ms ease;
}

.agent-thoughts[open] > summary::before {
  transform: rotate(90deg);
}

.agent-thoughts-list {
  list-style: none;
  margin: 0;
  padding: 0 0.55rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.agent-thought-step {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.34rem 0.5rem;
  border-radius: 8px;
  background: rgba(40, 53, 78, 0.45);
}

.agent-thought-step.is-running {
  border-left: 2px solid #6ea5e8;
}

.agent-thought-step.is-done {
  border-left: 2px solid #5fcf90;
}

.agent-thought-step.is-error {
  border-left: 2px solid #e08585;
}

.agent-thought-step.is-pending {
  border-left: 2px solid #e3b04b;
}

.agent-thought-step.is-thinking {
  border-left: 2px solid #9a86d8;
  background: rgba(60, 50, 92, 0.35);
}

.agent-thought-plan {
  color: #d8d2ee;
  font-style: italic;
  line-height: 1.4;
  white-space: pre-wrap;
}

.agent-thought-icon {
  flex: 0 0 1rem;
  font-weight: 700;
  line-height: 1.1;
  color: #cbd9ee;
}

.agent-thought-step.is-running .agent-thought-icon {
  color: #6ea5e8;
  animation: agent-spin 1.4s linear infinite;
  display: inline-block;
}

.agent-thought-step.is-done .agent-thought-icon {
  color: #5fcf90;
}

.agent-thought-step.is-error .agent-thought-icon {
  color: #e08585;
}

.agent-thought-step.is-pending .agent-thought-icon {
  color: #e3b04b;
}

@keyframes agent-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.agent-thought-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.agent-thought-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  color: #e3edff;
  font-weight: 600;
}

.agent-thought-args {
  font-weight: 400;
  color: #9badcb;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  word-break: break-all;
}

.agent-thought-tail {
  font-size: 0.72rem;
  color: #9badcb;
}

.agent-thought-elapsed {
  color: #7e8fb0;
}

/* Soft pulsing "Düşünüyor…" placeholder shown inside a streaming
   assistant bubble when content is still empty. */
.agent-thinking-pulse {
  display: inline-block;
  color: #9aaccf;
  font-style: italic;
  animation: agent-pulse 1.4s ease-in-out infinite;
}

@keyframes agent-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Phase 2 — Brain Agent approval cards. Rendered under the assistant
   bubble whenever the agent has staged a write action that needs an
   explicit Onayla click before it runs. */
.agent-approvals {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.agent-approval-card {
  border: 1px solid rgba(227, 176, 75, 0.5);
  background: linear-gradient(
    180deg,
    rgba(227, 176, 75, 0.10),
    rgba(227, 176, 75, 0.04)
  );
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: #f1e7d2;
}

.agent-approval-head strong {
  color: #f7d27a;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.agent-approval-summary {
  margin: 0;
  color: #f1e7d2;
  font-size: 0.88rem;
  line-height: 1.35;
}

.agent-approval-args {
  margin: 0;
  color: #b8a888;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  word-break: break-all;
}

.agent-approval-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.agent-approval-btn {
  border-radius: 999px;
  padding: 0.32rem 0.95rem;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease, transform 80ms ease;
  font-size: 0.85rem;
}

.agent-approval-btn:hover {
  filter: brightness(1.08);
}

.agent-approval-btn:active {
  transform: translateY(1px);
}

.agent-approval-btn.is-approve {
  background: #3aa264;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.10);
}

.agent-approval-btn.is-reject {
  background: rgba(70, 83, 104, 0.55);
  color: #e6efff;
  border-color: rgba(160, 176, 199, 0.40);
}

/* Phase 3 — document draft preview cards. */

.agent-drafts {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

/* Live background-job progress timeline (agent chat). */
.agent-job-progress {
  margin-top: 0.6rem;
  border: 1px solid rgba(122, 166, 240, 0.45);
  background: linear-gradient(180deg, rgba(122, 166, 240, 0.10), rgba(122, 166, 240, 0.03));
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  color: #e6efff;
}
.agent-job-progress.is-done {
  border-color: rgba(82, 192, 130, 0.45);
  background: linear-gradient(180deg, rgba(82, 192, 130, 0.10), rgba(82, 192, 130, 0.03));
}
.agent-job-progress.is-failed {
  border-color: rgba(227, 95, 95, 0.55);
  background: linear-gradient(180deg, rgba(227, 95, 95, 0.10), rgba(227, 95, 95, 0.03));
}
.agent-job-progress-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.agent-job-progress-head strong {
  color: #cfe0ff;
  font-weight: 700;
  font-size: 0.92rem;
}
.agent-job-progress-spin {
  font-size: 0.78rem;
  color: #9fb6da;
  font-style: italic;
}
.agent-job-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-job-progress-list li {
  font-size: 0.83rem;
  line-height: 1.4;
  color: #cdd9ea;
  padding-left: 0.9rem;
  position: relative;
}
.agent-job-progress-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #7aa6f0;
}
.agent-job-progress.is-done .agent-job-progress-list li:last-child {
  color: #b6e6c8;
  font-weight: 600;
}

.agent-draft-card {
  border: 1px solid rgba(122, 166, 240, 0.45);
  background: linear-gradient(
    180deg,
    rgba(122, 166, 240, 0.10),
    rgba(122, 166, 240, 0.03)
  );
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: #e6efff;
}

.agent-draft-card.is-saved {
  border-color: rgba(82, 192, 130, 0.45);
  background: linear-gradient(
    180deg,
    rgba(82, 192, 130, 0.10),
    rgba(82, 192, 130, 0.03)
  );
}

.agent-draft-card.is-warning {
  border-color: rgba(227, 176, 75, 0.55);
  background: linear-gradient(
    180deg,
    rgba(227, 176, 75, 0.10),
    rgba(227, 176, 75, 0.03)
  );
}

.agent-draft-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.agent-draft-head strong {
  color: #cfe0ff;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
}

.agent-draft-card.is-saved .agent-draft-head strong {
  color: #c8f0d6;
}

.agent-draft-meta {
  color: #9cb0d4;
  font-size: 0.74rem;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
}

.agent-draft-summary {
  margin: 0;
  color: #d5e0f3;
  font-size: 0.88rem;
  line-height: 1.4;
}

.agent-draft-note {
  margin: 0;
  color: #f0d9a3;
  font-size: 0.78rem;
  font-style: italic;
}

.agent-draft-body {
  border-top: 1px dashed rgba(160, 176, 199, 0.25);
  padding-top: 0.4rem;
}

.agent-draft-body > summary {
  cursor: pointer;
  color: #9cb0d4;
  font-size: 0.78rem;
  list-style: none;
  user-select: none;
  padding: 0.15rem 0;
}

.agent-draft-body > summary::-webkit-details-marker {
  display: none;
}

.agent-draft-body > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 120ms ease;
  margin-right: 0.2rem;
}

.agent-draft-body[open] > summary::before {
  content: "▾ ";
}

.agent-draft-markdown {
  margin: 0.35rem 0 0 0;
  padding: 0.6rem 0.75rem;
  background: rgba(15, 22, 36, 0.55);
  border: 1px solid rgba(160, 176, 199, 0.18);
  border-radius: 8px;
  color: #d8e3f6;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow-y: auto;
}

/* Rendered-HTML draft preview — what the .docx will look like.
   Light background mimicking a piece of paper so it reads as a
   document preview, not a code dump. Scrolls when long. */
.agent-draft-rendered {
  margin: 0.35rem 0 0 0;
  padding: 0.9rem 1.1rem;
  background: #fbfbfd;
  border: 1px solid rgba(160, 176, 199, 0.28);
  border-radius: 8px;
  color: #1c2230;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.55;
  max-height: 480px;
  overflow-y: auto;
  word-wrap: break-word;
}

.agent-draft-rendered h1,
.agent-draft-rendered h2,
.agent-draft-rendered h3,
.agent-draft-rendered h4,
.agent-draft-rendered h5,
.agent-draft-rendered h6 {
  margin: 1.05rem 0 0.45rem;
  color: #0e1a30;
  font-weight: 700;
  line-height: 1.25;
}
.agent-draft-rendered h1:first-child,
.agent-draft-rendered h2:first-child,
.agent-draft-rendered h3:first-child {
  margin-top: 0;
}
.agent-draft-rendered h1 { font-size: 1.40rem; }
.agent-draft-rendered h2 { font-size: 1.20rem; }
.agent-draft-rendered h3 { font-size: 1.05rem; }
.agent-draft-rendered h4 { font-size: 0.96rem; }
.agent-draft-rendered h5 { font-size: 0.90rem; }
.agent-draft-rendered h6 { font-size: 0.85rem; color: #3a4660; }

.agent-draft-rendered p {
  margin: 0 0 0.55rem;
}

.agent-draft-rendered strong {
  font-weight: 700;
  color: #0a1428;
}

.agent-draft-rendered ul,
.agent-draft-rendered ol {
  margin: 0 0 0.55rem 1.25rem;
  padding: 0;
}
.agent-draft-rendered li {
  margin: 0 0 0.2rem;
}

.agent-draft-rendered-table {
  border-collapse: collapse;
  margin: 0.55rem 0;
  width: 100%;
  font-size: 0.82rem;
}
.agent-draft-rendered-table th,
.agent-draft-rendered-table td {
  border: 1px solid rgba(160, 176, 199, 0.55);
  padding: 0.35rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.agent-draft-rendered-table thead th {
  background: rgba(110, 158, 224, 0.15);
  color: #0a1428;
  font-weight: 700;
}
.agent-draft-rendered-table tbody tr:nth-child(even) td {
  background: rgba(15, 22, 36, 0.03);
}

.agent-draft-rendered-graph-block {
  margin: 0.7rem 0;
  text-align: center;
}
.agent-draft-rendered-graph {
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(160, 176, 199, 0.35);
  border-radius: 6px;
  background: #ffffff;
}
.agent-draft-rendered-graph-fail {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  background: rgba(220, 90, 90, 0.10);
  border: 1px dashed rgba(220, 90, 90, 0.45);
  border-radius: 6px;
  color: #8a1f1f;
  font-size: 0.80rem;
}
.agent-draft-rendered-empty {
  color: #6b7795;
  font-style: italic;
  margin: 0;
}

.agent-draft-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.agent-draft-btn {
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(160, 176, 199, 0.40);
  background: rgba(70, 83, 104, 0.30);
  color: #e6efff;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: filter 120ms ease, transform 80ms ease;
}

.agent-draft-btn:hover {
  filter: brightness(1.10);
}

.agent-draft-btn:active {
  transform: translateY(1px);
}

.agent-draft-btn.is-download {
  background: #4a7bc8;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* -------------------- Gmail draft cards -------------------- */
/* Visually distinct from document drafts: red-ish accent so it
   reads as "email" at a glance, and a label/value field grid for
   From/To/Subject so it feels like an email, not a doc preview. */
.agent-email-drafts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.agent-email-card {
  border: 1px solid rgba(52, 168, 83, 0.45);
  background: linear-gradient(
    180deg,
    rgba(52, 168, 83, 0.08),
    rgba(52, 168, 83, 0.02)
  );
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #e6efff;
}

.agent-email-card.is-sent {
  border-color: rgba(82, 192, 130, 0.45);
  background: linear-gradient(
    180deg,
    rgba(82, 192, 130, 0.10),
    rgba(82, 192, 130, 0.03)
  );
}

.agent-email-card.is-warning {
  border-color: rgba(227, 176, 75, 0.55);
  background: linear-gradient(
    180deg,
    rgba(227, 176, 75, 0.10),
    rgba(227, 176, 75, 0.03)
  );
}

.agent-email-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.agent-email-head strong {
  color: #c8f0d6;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.agent-email-card.is-sent .agent-email-head strong {
  color: #c8f0d6;
}

.agent-email-meta {
  color: #9cb0d4;
  font-size: 0.72rem;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.agent-email-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.75rem;
  margin: 0;
  font-size: 0.82rem;
}

.agent-email-fields dt {
  color: #9cb0d4;
  font-weight: 600;
}

.agent-email-fields dd {
  margin: 0;
  color: #e6efff;
  word-break: break-word;
}

.agent-email-body {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: rgba(15, 22, 36, 0.55);
  border: 1px solid rgba(160, 176, 199, 0.18);
  border-radius: 8px;
  color: #d8e3f6;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

.agent-email-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.agent-email-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.28rem 0.6rem;
  background: rgba(70, 83, 104, 0.28);
  border: 1px solid rgba(160, 176, 199, 0.32);
  border-radius: 999px;
  color: #dbe6f7;
  font-size: 0.78rem;
  line-height: 1.2;
}

.agent-email-attachment-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.agent-email-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}

.agent-email-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.agent-email-btn {
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  border: 1px solid rgba(160, 176, 199, 0.40);
  background: rgba(70, 83, 104, 0.30);
  color: #e6efff;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: filter 120ms ease, transform 80ms ease;
}

.agent-email-btn:hover {
  filter: brightness(1.10);
}

.agent-email-btn:active {
  transform: translateY(1px);
}

.agent-email-btn.is-send {
  background: #34a853;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.agent-email-btn.is-send:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Spacer flex-grows to shove "Sil" to the far right of the row. */
.agent-email-btn-spacer {
  flex: 1 1 auto;
}

.agent-email-btn.is-delete {
  background: #ea4335;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.agent-email-btn.is-delete:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* -----------------------------------------------------------------
 * Agent graph cards — one per create_graph tool call. Mirrors the
 * email card layout so the artefact stack reads consistently, but
 * with a neutral blue tint to distinguish it from documents and
 * Gmail drafts.
 * ----------------------------------------------------------------- */
.agent-graphs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.agent-graph-card {
  margin: 0;
  border: 1px solid rgba(110, 158, 224, 0.45);
  background: linear-gradient(
    180deg,
    rgba(110, 158, 224, 0.10),
    rgba(110, 158, 224, 0.03)
  );
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #e6efff;
}

.agent-graph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.agent-graph-head strong {
  color: #cfe1ff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.agent-graph-type {
  color: #9cb0d4;
  font-size: 0.72rem;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.agent-graph-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background: #ffffff;
}

.agent-graph-fail {
  color: #ffcfcf;
  font-size: 0.82rem;
  padding: 0.4rem 0.5rem;
  border: 1px dashed rgba(255, 207, 207, 0.4);
  border-radius: 6px;
}

.agent-graph-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.agent-graph-btn {
  border: 1px solid rgba(160, 176, 199, 0.35);
  background: rgba(70, 83, 104, 0.25);
  color: #d5e6ff;
  border-radius: 999px;
  min-height: 28px;
  padding: 0.2rem 0.65rem;
  cursor: pointer;
  font-size: 0.74rem;
}

.agent-graph-btn:hover {
  background: rgba(110, 158, 224, 0.22);
}

.agent-graph-btn:active {
  transform: translateY(1px);
}

.copy-answer-btn {
  border: 1px solid rgba(160, 176, 199, 0.35);
  background: rgba(70, 83, 104, 0.25);
  color: #d5e6ff;
  border-radius: 999px;
  min-height: 28px;
  padding: 0.2rem 0.62rem;
  cursor: pointer;
  font-size: 0.74rem;
  line-height: 1.15;
  font-weight: 600;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.feedback-btn {
  border: 1px solid rgba(160, 176, 199, 0.35);
  background: rgba(70, 83, 104, 0.25);
  color: #8da2bf;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  line-height: 24px;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.feedback-btn.is-selected-up {
  background: rgba(46, 158, 86, 0.35);
  color: #defbe6;
  border-color: rgba(126, 235, 163, 0.7);
}

.feedback-btn.is-selected-down {
  background: rgba(170, 74, 74, 0.36);
  color: #ffe1e1;
  border-color: rgba(255, 153, 153, 0.7);
}

.message-row.typing .bubble {
  min-width: 56px;
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #98d8ff;
  display: inline-block;
  animation: typing-bounce 1.15s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.14s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes typing-bounce {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.composer {
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

.composer textarea {
  width: 100%;
  resize: none;
  min-height: 56px;
  max-height: 160px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  font: inherit;
  color: var(--text);
  background: var(--panel-strong);
}

.composer textarea::placeholder {
  color: #7f99bb;
}

.mode-switch {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.28rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 18, 36, 0.94);
}

.mode-switch.compact {
  margin-top: 0;
  width: auto;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0.2rem;
  padding: 0.18rem;
  border-radius: 999px;
}

.mode-switch.compact.footer-center {
  justify-self: center;
}

.mode-option {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0.45rem 0.52rem;
  background: rgba(12, 24, 46, 0.72);
  color: #8fa9cb;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease, filter 150ms ease;
}

.mode-switch.compact .mode-option {
  font-size: 0.72rem;
  padding: 0.26rem 0.52rem;
  border-radius: 999px;
  min-width: 52px;
}

.pdf-download-btn {
  min-width: 92px;
  min-height: 32px;
  padding: 0.38rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 700;
  /* The button now lives inside .composer-footer-left (left-aligned
     under the chat entry box), so no extra right-margin is needed —
     the grid keeps it well clear of the right composer cluster. */
}

.pdf-download-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Durdur button: visible only while an agent turn is streaming.
   Compact icon-only square — just a pause glyph (||). Click aborts
   the SSE fetch AND drops the user message + assistant placeholder
   from the conversation history so the turn is forgotten. Sized to
   match the PDF indir button's height so the footer stays aligned. */
.stop-agent-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 121, 121, 0.55);
  border-radius: 6px;
  background: rgba(255, 80, 80, 0.10);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.stop-agent-btn:hover {
  background: rgba(255, 80, 80, 0.22);
  border-color: rgba(255, 121, 121, 0.85);
}

.stop-agent-btn:active {
  transform: translateY(1px);
}

.stop-agent-btn[hidden] {
  display: none !important;
}

/* Stop glyph — outer ring with a small filled square centered inside.
   No SVG/font dependency: the ring is the span's own border, the inner
   square is rendered via the ::before pseudo-element so we can re-color
   both halves on :hover with a single rule. */
.stop-agent-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px solid #ffb4b4;
  border-radius: 50%;
  box-sizing: border-box;
}

.stop-agent-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background: #ffb4b4;
  border-radius: 1px;
}

.stop-agent-btn:hover .stop-agent-icon {
  border-color: #ffdada;
}

.stop-agent-btn:hover .stop-agent-icon::before {
  background: #ffdada;
}

.mode-option.is-active {
  color: #041225;
  border-color: rgba(153, 242, 255, 0.9);
  background: linear-gradient(135deg, #84f7ff 0%, #1dd8ff 45%, #1fa8ff 100%);
  box-shadow: 0 8px 20px rgba(20, 151, 255, 0.36);
}

.mode-option:active {
  transform: translateY(1px);
}

/* Beyin (brain agent) target has a single mode, so the Normal/Derin
   switch is dimmed and locked out while that target is active. The
   pointer-events:none on the inner options also suppresses the hover
   styling the disabled buttons would otherwise still pick up. */
.mode-switch.is-disabled {
  opacity: 0.42;
  filter: grayscale(0.45);
  cursor: not-allowed;
}

.mode-switch.is-disabled .mode-option {
  pointer-events: none;
}

.composer-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin-top: 0.65rem;
  gap: 0.5rem;
}

.composer-controls {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.5rem;
}

/* Middle cell of .composer-footer's 3-column grid. Hosts the Durdur
   (icon) + PDF indir buttons as a single grid child so the model
   picker + Gönder cluster stays in the third column instead of
   wrapping to a new row. */
.composer-footer-center {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* -------------------------------------------------------------------
   Model picker (drop-up)
   -------------------------------------------------------------------
   Sits left of the Normal/Derin switch inside .composer-controls.
   Renders as a pill-shaped trigger that matches .mode-option visually;
   the menu pops UPWARD because the composer is anchored near the
   bottom of the viewport — a normal dropdown would clip below the
   fold. Menu open/close is driven by [hidden] in app.js (set both the
   attribute and `aria-expanded` on the button).
   ------------------------------------------------------------------- */
.model-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Gray warning that sits to the left of the drop-up. Reminds the user
   that stronger tiers (Akıllı / En İyi) burn through credits faster.
   Intentionally inline + small so it reads as a passive label, not a
   call-out. */
.model-picker-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(207, 226, 255, 0.55);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-right: 0.5rem;
  user-select: none;
}

.model-picker__button {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 24, 46, 0.72);
  color: #cfe2ff;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, filter 150ms ease;
  min-height: 28px;
  white-space: nowrap;
}

.model-picker__button:hover {
  border-color: rgba(153, 242, 255, 0.55);
  color: #ffffff;
}

.model-picker__button[aria-expanded="true"] {
  border-color: rgba(153, 242, 255, 0.9);
  color: #041225;
  background: linear-gradient(135deg, #84f7ff 0%, #1dd8ff 45%, #1fa8ff 100%);
  box-shadow: 0 8px 20px rgba(20, 151, 255, 0.36);
}

.model-picker__label {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.model-picker__caret {
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.85;
}

.model-picker__menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: rgba(8, 18, 36, 0.98);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(2, 8, 22, 0.55);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.model-picker__menu[hidden] {
  display: none;
}

.model-picker__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.06rem;
  padding: 0.42rem 0.6rem;
  border-radius: 9px;
  cursor: pointer;
  color: #cfe2ff;
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.model-picker__option:hover {
  background: rgba(20, 38, 68, 0.85);
  color: #ffffff;
}

.model-picker__option.is-selected {
  border-color: rgba(153, 242, 255, 0.55);
  background: rgba(20, 60, 110, 0.6);
  color: #ffffff;
}

.model-picker__option-label {
  font-size: 0.82rem;
  font-weight: 700;
}

.model-picker__option-sub {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.model-picker__option.is-selected .model-picker__option-sub {
  color: #aee0ff;
}

.composer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.pause-btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #d8ebff;
  background: rgba(14, 32, 62, 0.9);
  padding: 0.5rem 0.85rem;
}

.pause-btn[hidden] {
  display: none;
}

.pause-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Left-side cluster of the composer footer: chat target switch + an
   inline status pill that surfaces transient feedback (e.g. "Derin
   araştırma çalışıyor..."). The static "Şirket bilgi tabanına bağlı"
   text is intentionally gone — the switch communicates state now. */
.composer-footer-left {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: start;
  min-width: 0;
}

.status-inline {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.status-inline:empty {
  display: none;
}

#status-text {
  font-size: 0.78rem;
  color: var(--muted);
  justify-self: start;
}

.send-btn {
  border-radius: 10px;
  background: linear-gradient(135deg, #7cf2ff 0%, #12caff 52%, #3a8dff 100%);
  color: #041225;
  font-weight: 700;
  padding: 0.52rem 0.95rem;
  justify-self: end;
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.right-rail {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.side-overlay {
  display: none;
}

.context-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  background: rgba(12, 24, 48, 0.84);
}

.upload-form {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.5rem;
  min-width: 0;
}

.upload-department-dropdown {
  position: relative;
}

.upload-department-summary {
  list-style: none;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  padding: 0.45rem 0.62rem;
  cursor: pointer;
  font-size: 0.84rem;
}

.upload-department-summary::-webkit-details-marker {
  display: none;
}

.upload-department-dropdown[open] .upload-department-summary {
  border-color: rgba(120, 196, 255, 0.75);
}

.upload-department-menu {
  position: absolute;
  right: 0;
  z-index: 60;
  margin-top: 0.3rem;
  width: 100%;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 18, 36, 0.98);
  color: #eaf3ff;
  padding: 0.4rem 0.5rem;
  display: grid;
  gap: 0.32rem;
}

.upload-department-menu label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
}

.file-input-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  color: var(--text);
  background: rgba(10, 18, 36, 0.92);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  overflow: hidden;
}
/* Folder picker variant — same chrome as the file picker but the
   wrap shrinks to fit the single button (no filename text inside),
   sitting flush under the main Dosya Seç row. (Legacy — kept for
   any pages still rendering the old two-button layout.) */
.file-input-wrap--folder {
  width: auto;
  align-self: flex-start;
}

/* "Dosya Seç" compound picker — <details>+<summary> styled like the
   single-button .file-input-wrap; menu drops below with two
   options ("Dosyalar..." / "Klasör..."). Native <input type="file">
   can't be both multiple-files and webkitdirectory, so we keep both
   inputs hidden and trigger the right one based on the user's pick. */
.file-picker-dropdown {
  position: relative;
  width: 100%;
}
.file-picker-summary {
  list-style: none;
  cursor: pointer;
}
.file-picker-summary::-webkit-details-marker { display: none; }
.file-picker-caret {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 160ms ease;
}
.file-picker-dropdown[open] .file-picker-caret {
  transform: rotate(180deg);
}
.file-picker-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(10, 18, 36, 0.98);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.35rem;
  display: grid;
  gap: 0.2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.file-picker-option {
  border: 0;
  background: transparent;
  color: #eaf3ff;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  font-size: 0.86rem;
  cursor: pointer;
}
.file-picker-option:hover,
.file-picker-option:focus {
  background: rgba(120, 196, 255, 0.12);
  outline: none;
}
/* Make sure the actual <input type="file"> stays invisible inside
   the wrap on both variants (the label is the click target). */
.file-input-wrap input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-input-btn {
  border: 1px solid rgba(116, 170, 255, 0.38);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.2) 0%, rgba(18, 202, 255, 0.16) 52%, rgba(58, 141, 255, 0.22) 100%);
  color: #dff5ff;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.file-input-text {
  display: block;
  flex: 1 1 auto;
  width: 0;
  font-size: 0.84rem;
  color: #bad4f5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#file-add-btn {
  width: 100%;
}

.upload-status {
  margin: 0.55rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.upload-actions {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.upload-actions label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: auto;
}

.refresh-files-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.refresh-files-btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.refresh-files-btn.is-loading .refresh-icon {
  display: inline-block;
  animation: spin-refresh 0.9s linear infinite;
}

@keyframes spin-refresh {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Custom checkbox — used in the upload actions cluster, the
   per-file selectors, AND the department picker in the upload card.
   Mirrors the global ``input[type="checkbox"]`` rule in admin.css so
   every page has the same checkbox look. */
.upload-actions input[type="checkbox"],
.uploaded-file-select,
.upload-department-menu input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex: 0 0 18px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(116, 170, 255, 0.45);
  border-radius: 5px;
  background: rgba(7, 17, 34, 0.92);
  display: grid;
  place-content: center;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.upload-actions input[type="checkbox"]::before,
.uploaded-file-select::before,
.upload-department-menu input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.12s ease-in-out;
  clip-path: polygon(14% 52%, 0 67%, 44% 100%, 100% 20%, 84% 6%, 42% 70%);
  background: #041225;
}

.upload-actions input[type="checkbox"]:checked,
.uploaded-file-select:checked,
.upload-department-menu input[type="checkbox"]:checked {
  border-color: rgba(124, 242, 255, 0.95);
  background: linear-gradient(135deg, #7cf2ff 0%, #12caff 52%, #3a8dff 100%);
}

.upload-actions input[type="checkbox"]:checked::before,
.uploaded-file-select:checked::before,
.upload-department-menu input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.upload-actions input[type="checkbox"]:focus-visible,
.uploaded-file-select:focus-visible,
.upload-department-menu input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(71, 196, 255, 0.26);
}

.uploaded-file-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: grid;
  /* Single column constrained to the container width. Without the explicit
     minmax(0, 1fr) the implicit grid column sizes to max-content, which lets
     a long filename push the column (and the list) wider than the sidebar
     and triggers horizontal scrolling. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  max-height: 180px;
  /* Keep vertical scrolling for long file lists, but never let a long
     filename produce a horizontal scrollbar — names must truncate with an
     ellipsis instead of widening the box. */
  overflow-y: auto;
  overflow-x: hidden;
}

.uploaded-file-list li {
  padding: 0.46rem 0.58rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(10, 18, 36, 0.8);
  font-size: 0.82rem;
  color: #d8ebff;
  /* Allow this grid item to shrink below its intrinsic content width so the
     ellipsis rule on .uploaded-file-name can take effect. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.uploaded-file-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  /* Same reason as on .uploaded-file-list li — flex containers default to
     min-width: auto which would let content force the row wider than the
     sidebar. */
  min-width: 0;
  max-width: 100%;
}

.uploaded-file-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploaded-file-actions-wrap {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

/* Department folder grouping in the chat sidebar. The outer <li> is the
   "folder" container; the <button> header is the clickable row that
   collapses/expands the inner <ul>. We reset the <li> bullet and let the
   inner list inherit the existing .uploaded-file-item styling. */
.uploaded-file-folder {
  display: block;
  padding: 0;
  border: 1px solid rgba(116, 170, 255, 0.22);
  background: rgba(10, 18, 36, 0.55);
  border-radius: 10px;
  overflow: hidden;
}

.uploaded-file-folder + .uploaded-file-folder {
  margin-top: 0.4rem;
}

.uploaded-file-folder-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.08) 0%, rgba(58, 141, 255, 0.10) 100%);
  border: 0;
  color: #e3f1ff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.uploaded-file-folder-header:hover {
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.14) 0%, rgba(58, 141, 255, 0.16) 100%);
}

.uploaded-file-folder-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex: 0 0 auto;
  color: #9ce6ff;
  transition: transform 140ms ease;
}

.uploaded-file-folder.is-open .uploaded-file-folder-caret {
  transform: rotate(90deg);
}

.uploaded-file-folder-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.uploaded-file-folder-count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: #b7d5ff;
  font-weight: 500;
}

.uploaded-file-folder-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.5rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* The `display: flex` rule above wins over the default user-agent styling
   for [hidden], so we need an explicit rule to actually collapse the folder
   contents when the folder is closed. */
.uploaded-file-folder-list[hidden] {
  display: none;
}

.uploaded-file-folder-list .uploaded-file-item {
  background: rgba(10, 18, 36, 0.78);
  border: 1px solid rgba(116, 170, 255, 0.18);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
}

.uploaded-file-delete-btn {
  border: 1px solid rgba(255, 128, 150, 0.4);
  background: rgba(77, 20, 36, 0.65);
  color: #ffd7df;
  width: 24px;
  height: 24px;
  line-height: 20px;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  padding: 0;
  margin-left: 0;
}

.uploaded-file-download-btn {
  border: 1px solid rgba(116, 195, 255, 0.5);
  background: rgba(20, 46, 77, 0.72);
  color: #dff4ff;
  width: 24px;
  height: 24px;
  line-height: 20px;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 800;
  -webkit-text-stroke: 0.35px currentColor;
  padding: 0;
  margin-left: 0;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.pill {
  font-size: 0.78rem;
  color: #ccf7ff;
  background: rgba(41, 128, 191, 0.36);
  border: 1px solid rgba(107, 209, 255, 0.34);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
}

.btn {
  border: 1px solid rgba(116, 170, 255, 0.3);
  background: rgba(16, 31, 57, 0.92);
  color: #eaf3ff;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.btn.ghost {
  background: rgba(14, 28, 52, 0.88);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  background: rgba(6, 12, 24, 0.58);
  backdrop-filter: blur(2px);
  padding: 1rem;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-card {
  width: min(92vw, 620px);
  border: 1px solid rgba(116, 170, 255, 0.32);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(13, 24, 46, 0.95);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

.modal-card h3 {
  margin: 0 0 0.45rem;
}

.modal-card p {
  margin: 0;
  color: #c5dbf5;
  line-height: 1.45;
}

.modal-actions {
  margin-top: 0.9rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  body {
    overflow: hidden;
  }

  /* Mobile uses the existing Menü button + slide-in overlay for the
     left rail; the right rail is hidden entirely. Hide the desktop
     panel-toggle icons here so they don't float over the chat. */
  .rail-toggle-btn { display: none; }

  .app-shell {
    position: fixed;
    inset: 0;
    height: auto;
    min-height: 0;
    /* Desktop uses flex with a centered fixed-width chat; on mobile
       we want the chat to fill the viewport, so swap back to a
       single full-width column. */
    display: block;
    gap: 0;
    padding: 0;
  }

  .app-shell .chat-column {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .chat-column {
    order: 1;
    min-height: 0;
    height: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding:
      calc(env(safe-area-inset-top, 0px) + 0.65rem)
      0.75rem
      calc(env(safe-area-inset-bottom, 0px) + 0.55rem);
  }

  .message-feed {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  .bubble {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-self: center;
  }

  .chat-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0.65rem;
  }

  .chat-header .header-copy {
    display: none;
  }

  .mobile-chat-title {
    display: block;
    justify-self: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: #dff5ff;
  }

  .left-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 360px);
    height: 100%;
    z-index: 40;
    transform: translateX(-104%);
    transition: transform 220ms ease;
    border-radius: 0 16px 16px 0;
    border-left: 0;
    overflow: hidden;
  }

  /* On mobile the rail's width is dynamic (min(86vw, 360px)), so
     the inner wrapper has to follow the rail width instead of the
     desktop's locked 280px — otherwise content underflows the panel. */
  .app-shell .left-rail .rail-inner {
    width: 100%;
    padding-top: calc(env(safe-area-inset-top, 0px) + 1rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  }

  .right-rail {
    display: none;
  }

  .side-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(3, 9, 18, 0.46);
    backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 30;
  }

  body.menu-open .left-rail {
    transform: translateX(0);
  }

  body.menu-open .side-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================== */
/*  Connectors (right-rail card + Drive UI)                       */
/* ============================================================== */

.connector-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.connector-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.connector-refresh-btn {
  padding: 0.2rem 0.45rem;
  font-size: 0.85rem;
  line-height: 1;
}

.connector-host {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.connector-loading {
  font-size: 0.82rem;
  color: rgba(234, 243, 255, 0.6);
  margin: 0;
}

.connector-tabs {
  display: flex;
  gap: 0.3rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
  margin-bottom: 0.25rem;
}

.connector-tab {
  background: transparent;
  border: none;
  color: rgba(234, 243, 255, 0.62);
  padding: 0.25rem 0.5rem;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 6px;
}

.connector-tab.is-active {
  background: rgba(96, 165, 250, 0.2);
  color: #eaf3ff;
}

.connector-slot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.connector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 0.6rem 0.4rem 0.4rem;
}

.connector-empty-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.connector-empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #eaf3ff;
}

.connector-empty-sub {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(234, 243, 255, 0.62);
  line-height: 1.35;
}

.connector-connect-btn {
  margin-top: 0.4rem;
  width: 100%;
}

/* -----------------------------------------------------------------------
   Diğer Bağlayıcılar — connect-only providers list (Gmail + placeholders)
   ----------------------------------------------------------------------- */
.external-connectors-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.external-connector-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.external-connector-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
}

.external-connector-row.is-connected {
  background: rgba(46, 182, 125, 0.08);
  border-color: rgba(46, 182, 125, 0.35);
}

.external-connector-row.is-coming-soon {
  opacity: 0.7;
}

.ext-connector-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.ext-connector-label {
  flex: 1 1 auto;
  font-size: 0.88rem;
  color: #eaf3ff;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ext-connector-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 90px;
}

.ext-connector-soon {
  font-size: 0.75rem;
  color: rgba(234, 243, 255, 0.55);
  font-style: italic;
}

.ext-connector-loading {
  font-size: 0.75rem;
  color: rgba(234, 243, 255, 0.55);
}

.ext-connector-connect-btn,
.ext-connector-disconnect-btn {
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.1;
  white-space: nowrap;
}

.ext-connector-disconnect-btn {
  color: rgba(234, 243, 255, 0.8);
}

.connector-error {
  font-size: 0.82rem;
  color: rgba(255, 200, 200, 0.92);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.connector-error p { margin: 0; }

/* ---- Drive ---- */

.drive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.8rem;
  min-width: 0;
}

.drive-account {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.drive-account-icon {
  display: inline-flex;
}

.drive-account-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(234, 243, 255, 0.82);
  max-width: 160px;
}

.drive-disconnect-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  color: rgba(234, 243, 255, 0.7);
}

.drive-root-picker {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  border-radius: 8px;
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.drive-root-picker:focus {
  border-color: rgba(96, 165, 250, 0.55);
}

/* Approve-draft modal: department picker. The recommended row gets a
   green halo so it's obvious why it's pre-checked. */
.approve-modal-intro {
  font-size: 0.85rem;
  color: rgba(234, 243, 255, 0.75);
  margin-bottom: 0.75rem;
  line-height: 1.45;
}
.approve-dept-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.approve-dept-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 18, 36, 0.55);
  cursor: pointer;
  font-size: 0.88rem;
}
.approve-dept-row:hover {
  border-color: rgba(96, 165, 250, 0.45);
}
.approve-dept-row.is-recommended {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.55);
}
.approve-dept-row.is-recommended:hover {
  border-color: rgba(34, 197, 94, 0.85);
}
.approve-dept-row input[type="checkbox"] {
  accent-color: #22c55e;
  cursor: pointer;
}
.approve-dept-name {
  flex: 1 1 auto;
  color: #eaf3ff;
}
/* Editable markdown body inside the draft detail modal. Visually it
   mimics the previous <pre> block — same dark panel background, same
   blue-tinted border — but it's a real textarea so the admin can click
   in and type. We force background/color with !important because the
   modal sits inside the broader page theme and at least one user agent
   was rendering the textarea with its native white styling.
   `white-space: pre-wrap` so long Markdown lines flow inside the box
   instead of triggering horizontal scrolling that hides the body. */
.draft-content-editor {
  display: block;
  width: 100%;
  min-height: 360px;
  max-height: 60vh;
  resize: vertical;
  box-sizing: border-box;
  margin: 0.5rem 0 0;
  background: rgba(10, 20, 40, 0.72) !important;
  color: #eaf3ff !important;
  border: 1px solid rgba(116, 170, 255, 0.32);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-text-fill-color: #eaf3ff;
  caret-color: #8eeaff;
  appearance: none;
  -webkit-appearance: none;
}
.draft-content-editor:focus {
  border-color: rgba(116, 170, 255, 0.7);
  box-shadow: 0 0 0 2px rgba(116, 170, 255, 0.18);
}
.draft-content-editor::placeholder {
  color: rgba(234, 243, 255, 0.4);
}
.draft-content-hint {
  margin-top: 0.45rem;
  font-size: 0.78rem;
}

/* Suggested-document rows merged into the Dokümanlar table get a purple
   wash so it's instantly clear they're AI proposals, not human-authored
   drafts. The "Öneriliyor" badge in the title cell calls it out
   explicitly for screen readers and at-a-glance scanning. */
tr.row-suggested td {
  background: rgba(139, 92, 246, 0.12);
  border-top: 1px solid rgba(139, 92, 246, 0.35);
  border-bottom: 1px solid rgba(139, 92, 246, 0.35);
}
tr.row-suggested:hover td {
  background: rgba(139, 92, 246, 0.2);
}
.badge-suggested {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e9d5ff;
  background: rgba(139, 92, 246, 0.22);
  border: 1px solid rgba(139, 92, 246, 0.6);
  border-radius: 999px;
  vertical-align: middle;
}

.approve-dept-recommended-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.25);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.drive-search {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  outline: none;
  box-sizing: border-box;
}

.drive-search:focus {
  border-color: rgba(96, 165, 250, 0.55);
}

.drive-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: rgba(234, 243, 255, 0.65);
  min-height: 18px;
}

.drive-crumb {
  background: transparent;
  border: none;
  padding: 0.1rem 0.25rem;
  color: rgba(96, 165, 250, 0.95);
  cursor: pointer;
  font-size: 0.78rem;
  border-radius: 4px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-crumb:hover:not(.is-current) {
  background: rgba(96, 165, 250, 0.12);
}

.drive-crumb.is-current {
  color: rgba(234, 243, 255, 0.85);
  cursor: default;
}

.drive-crumb-sep {
  color: rgba(234, 243, 255, 0.4);
  padding: 0 0.05rem;
}

.drive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 340px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: 0.35rem;
}

.drive-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.2rem;
  border-radius: 6px;
}

.drive-row:hover {
  background: rgba(96, 165, 250, 0.07);
}

.drive-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drive-row-title {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.drive-row-title[disabled] {
  cursor: default;
}

.drive-row-name {
  color: #eaf3ff;
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.drive-row-sub {
  font-size: 0.7rem;
  color: rgba(234, 243, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.drive-row-import {
  font-size: 0.74rem;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

.drive-row-status {
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
}

.drive-row-status.is-loading {
  color: rgba(234, 243, 255, 0.78);
  background: rgba(96, 165, 250, 0.18);
}

.drive-row-status.is-ok {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.18);
}

.drive-row-status.is-error {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.18);
  cursor: help;
}

.drive-row-status.is-muted {
  color: rgba(234, 243, 255, 0.45);
}

.drive-empty {
  text-align: center;
  font-size: 0.82rem;
  color: rgba(234, 243, 255, 0.55);
  padding: 0.6rem 0.4rem;
}

.drive-footer {
  font-size: 0.78rem;
  color: rgba(234, 243, 255, 0.55);
  display: flex;
  justify-content: center;
  padding: 0.2rem 0;
  min-height: 22px;
}

.drive-load-more {
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
}

/* ----------------------------------------------------------------------
   Collapsible right-rail cards (Doküman Ekle, Bağlı Kaynaklar,
   Diğer Bağlayıcılar). The section-title is the click target across all
   three cards so the chevron geometry is identical everywhere. We turn
   the title into a flex row and pin the chevron to the far right edge
   so it reads as an obvious affordance and the three cards line up.
   ---------------------------------------------------------------------- */
.context-card.is-collapsible > .section-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.context-card.is-collapsible > .section-title::after {
  content: "\25BE"; /* ▾ */
  display: inline-block;
  margin-left: auto;
  font-size: 1.2rem;       /* uniform size across all three cards */
  line-height: 1;
  opacity: 0.8;
  color: var(--text-muted, #94a3c4);
  transition: transform 0.18s ease;
}
.context-card.is-collapsed > .section-title::after {
  transform: rotate(-90deg);
}
.context-card.is-collapsible > .section-title:hover::after {
  opacity: 1;
}
/* Hide every direct child except the clickable title row when collapsed. */
.context-card.is-collapsed > *:not(.section-title) {
  display: none !important;
}
.context-card.is-collapsed {
  padding-bottom: 0.6rem;
}
/* The connector card now keeps its refresh button on its own row below
   the title (was inline next to it). Collapsing the card hides this row
   along with the rest of the body, so the collapsed state really is
   just title + triangle. */
.connector-card-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0.1rem 0 0.4rem;
}
/* Hide the refresh button until the connector reports a connected
   status — there's nothing to refresh before OAuth, and it crowds the
   "Bağlan" CTA otherwise. The base connector toggles is-connected /
   is-disconnected on the card after each status check. */
.connector-card.is-disconnected .connector-card-toolbar {
  display: none;
}

/* ================================================================== */
/*  Bildirim sistemi — Bell + Panel (shared across chat / admin /     */
/*  beyin). Selectors all prefixed .notif- so they don't collide with */
/*  page-specific styles. See notifications.js for the JS half.       */
/* ================================================================== */

.notif-bell-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem + 12px);
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, #95abc8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease;
  z-index: 35;
}

.notif-bell-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line, rgba(116, 170, 255, 0.24));
}

.notif-bell-btn:active { transform: scale(0.94); }

.notif-bell-btn.is-active {
  background: rgba(29, 216, 255, 0.10);
  border-color: var(--line, rgba(116, 170, 255, 0.24));
  color: #e6f0ff;
}

.notif-bell-btn svg { display: block; }

.notif-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent, #1dd8ff);
  color: #04121f;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(8, 16, 29, 0.95);
  pointer-events: none;
}

.notif-bell-badge[hidden] { display: none; }

/* ---- Panel ----------------------------------------------------- */
.notif-panel {
  position: fixed;
  /* Same vertical span as the left rail so both side
     surfaces mirror each other. The bell button has a
     higher z-index (35 vs 34), so it stays clickable on top
     of the panel — and the header padding-top below makes
     room so the title never sits underneath the bell. */
  top: 1rem;
  bottom: 1rem;
  right: 0;
  /* Same width as the left rail (--rail-left-w) so the
     panel feels like a mirrored sidebar rather than a popover. */
  width: 308px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, rgba(116, 170, 255, 0.24));
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  background: var(--panel, rgba(12, 22, 43, 0.72));
  backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(81, 179, 255, 0.22),
              0 18px 48px rgba(5, 14, 30, 0.62);
  z-index: 34;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  transition: opacity var(--rail-anim-dur, 420ms)
                var(--rail-anim-ease, cubic-bezier(0.32, 0.72, 0, 1)),
              transform var(--rail-anim-dur, 420ms)
                var(--rail-anim-ease, cubic-bezier(0.32, 0.72, 0, 1));
  overflow: hidden;
}

.notif-panel[hidden] { display: none; }

.notif-panel.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.notif-panel-header {
  /* Title sits on the same row as the bell (bell is
     position:fixed at the panel’s top-right corner); right
     padding reserves a 60px lane so the title text never
     runs under the bell. "Tümünü okundu işaretle" stacks
     directly below the title via the column flex. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 60px 12px 14px;
  border-bottom: 1px solid var(--line, rgba(116, 170, 255, 0.24));
}

.notif-panel-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text, #ebf4ff);
  letter-spacing: 0.01em;
}

.notif-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notif-mark-all-btn {
  background: transparent;
  border: 0;
  color: var(--muted, #95abc8);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}

.notif-mark-all-btn:hover {
  color: var(--accent, #1dd8ff);
  background: rgba(29, 216, 255, 0.08);
}

.notif-close-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #95abc8);
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, color 140ms ease,
              border-color 140ms ease;
}

.notif-close-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line, rgba(116, 170, 255, 0.24));
}

.notif-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-empty {
  position: absolute;
  inset: 56px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #95abc8);
  font-size: 13px;
  pointer-events: none;
}

.notif-empty[hidden] { display: none; }

/* ---- Cards ----------------------------------------------------- */
.notif-card {
  position: relative;
  display: block;
  padding: 12px 30px 12px 18px;
  border: 1px solid var(--line, rgba(116, 170, 255, 0.24));
  border-radius: 12px;
  background: rgba(10, 18, 36, 0.55);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease,
              max-height 320ms cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 96px;
}

/* Top-right gray delete (×) on every card. Sits in the right gutter
   reserved by the card's padding-right so it never overlaps the time. */
.notif-card-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #95abc8);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.notif-card-close:hover {
  opacity: 1;
  background: rgba(127, 161, 212, 0.16);
  color: var(--text, #ebf4ff);
}

.notif-card:hover {
  background: rgba(15, 28, 56, 0.7);
  border-color: rgba(137, 213, 255, 0.42);
}

.notif-card.is-expanded {
  max-height: 480px;
}

.notif-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, #1dd8ff);
  opacity: 1;
}

.notif-card.is-read .notif-stripe { opacity: 0.4; }
.notif-card.status-done    .notif-stripe { background: #5fda94; }
.notif-card.status-running .notif-stripe { background: #ffb866; }
.notif-card.status-started .notif-stripe { background: #7cf2ff; }
.notif-card.status-failed  .notif-stripe { background: #ff6e7a; }
.notif-card.status-problem .notif-stripe { background: #ff8b5c; }

.notif-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-card-head {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  /* Head bar is its own click target — clicking the title or the
     icon marks the notification read (handler in notifications.js).
     The cursor cue matches the affordance. */
  cursor: pointer;
}
.notif-card.is-unread .notif-card-head:hover {
  background: rgba(127, 161, 212, 0.08);
  border-radius: 6px;
}

.notif-card-icon {
  font-size: 13px;
  line-height: 1;
  color: var(--muted, #95abc8);
}

.notif-card.status-done    .notif-card-icon { color: #5fda94; }
.notif-card.status-running .notif-card-icon { color: #ffb866; }
.notif-card.status-failed  .notif-card-icon { color: #ff6e7a; }
.notif-card.status-problem .notif-card-icon { color: #ff8b5c; }

.notif-card-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #ebf4ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* When the card is expanded, drop the single-line clamp so the full
   title wraps and stays readable — mirrors the body-text expansion. */
.notif-card.is-expanded .notif-card-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.notif-card-time {
  font-size: 11px;
  color: var(--muted, #95abc8);
  white-space: nowrap;
}

.notif-card-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted, #95abc8);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.notif-card.is-expanded .notif-card-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: auto;
  max-height: 320px;
  color: var(--text, #ebf4ff);
}

.notif-card-goto {
  display: none;
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(29, 216, 255, 0.14);
  color: var(--accent, #1dd8ff);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(29, 216, 255, 0.32);
  transition: background 140ms ease, color 140ms ease;
}

.notif-card.is-expanded .notif-card-goto {
  display: inline-flex;
}

.notif-card-goto:hover {
  background: rgba(29, 216, 255, 0.22);
}

/* Action row for backend-driven cards (triage notifications). Unlike
   the goto link, the primary action button stays visible whether or
   not the card is expanded — it's the whole point of the card. */
.notif-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.notif-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(95, 218, 148, 0.14);
  color: #5fda94;
  border: 1px solid rgba(95, 218, 148, 0.34);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.notif-card-action {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent, #1dd8ff);
  color: #04222b;
  font-size: 12.5px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: filter 140ms ease, transform 60ms ease;
}

.notif-card-action:hover { filter: brightness(1.08); }
.notif-card-action:active { transform: translateY(1px); }

/* Cards carrying an action row must never clip it. The collapsed 96px
   clamp hides everything past the first ~2 lines, so drop the clamp for
   action cards — the action button is the point of the card. */
.notif-card.has-action { max-height: none; }

@media (max-width: 480px) {
  .notif-panel {
    top: 0;
    bottom: 0;
    width: 100vw;
    border-radius: 0;
    border-left: 0;
  }
  .notif-bell-btn { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-panel { transition: none; }
  .notif-card  { transition: none; }
}
/* ====================================================================
   Notification extras — bell attention state + toast popups.
   Append-only block; safe to duplicate identically across styles.css,
   admin.css and brain.css.
   ==================================================================== */

/* Bell goes RED whenever there are unread notifications. The
   .is-shaking keyframe is added briefly (~900 ms) on every new
   notification add/upsert so the user gets a side-to-side wiggle
   on top of the colour change. */
.notif-bell-btn.has-unread { color: #ff5d6c; }
.notif-bell-btn.has-unread .notif-bell-badge {
  background: #ff5d6c;
  border-color: rgba(255, 93, 108, 0.6);
  color: #fff;
}
@keyframes notif-bell-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-3px) rotate(-8deg); }
  30%  { transform: translateX(3px)  rotate(8deg);  }
  45%  { transform: translateX(-2px) rotate(-5deg); }
  60%  { transform: translateX(2px)  rotate(5deg);  }
  75%  { transform: translateX(-1px) rotate(-2deg); }
  100% { transform: translateX(0); }
}
.notif-bell-btn.is-shaking {
  animation: notif-bell-shake 0.9s cubic-bezier(.36,.07,.19,.97) both;
  transform-origin: center 30%;
}

/* Toast pop-ups — appear top-center, stack downward, auto-dismiss.
   Wired to window.solvaraNotifications.toast({type,message}).
   .is-visible toggles the slide-in transition. */
.notif-toast-host {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  z-index: 50;
  pointer-events: none;
}
.notif-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem 0.65rem 0.85rem;
  min-height: 38px;
  max-width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(18, 28, 50, 0.92);
  color: #ebf4ff;
  font-size: 0.88rem;
  line-height: 1.3;
  box-shadow: 0 18px 48px rgba(2, 8, 22, 0.55), 0 0 0 1px rgba(81, 179, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.36,.07,.19,.97);
}
.notif-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.notif-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
  color: #041225;
}
.notif-toast--success .notif-toast-icon { background: #5fda94; }
.notif-toast--error   .notif-toast-icon { background: #ff7a8a; color: #fff; }
.notif-toast--info    .notif-toast-icon { background: #5cc6ff; }
.notif-toast--success { border-color: rgba(95, 218, 148, 0.45); }
.notif-toast--error   { border-color: rgba(255, 122, 138, 0.55); }
.notif-toast--info    { border-color: rgba(92, 198, 255, 0.45); }
.notif-toast-msg { display: inline-block; }

/* ---- KaTeX math in chat replies -------------------------------------- */
/* renderMarkdown (app.js) splices KaTeX HTML into assistant bubbles.
   Display equations get breathing room and scroll horizontally rather
   than overflowing the bubble; the .md-math-raw fallback (shown when the
   KaTeX CDN is blocked) just reads as the original LaTeX text. */
.bubble .katex-display {
  margin: 0.6em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}
.bubble .katex { font-size: 1.05em; }
.md-math-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0.85;
}