* {
  box-sizing: border-box;
}

:root {
  --maroon: #7A2E2E;
  --maroon-dark: #5E2222;
  --paper: #F7F2E7;
  --surface-chrome: #FAF6ED; /* headers, side rail, popups — "control" surfaces */
  --surface-interactive: #FDFBF5; /* inputs, active/hover list items — surfaces you type into or select */
  --border-warm: #E0D3B8;
  --text-main: #2A2420;
  --text-muted: #8A7C63;
  --text-faint: #B3A88F;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--text-main);
}

/* --- Login page --- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}

.auth-card {
  background: var(--surface-chrome);
  padding: 2.75rem;
  border-radius: 4px;
  border: 1px solid var(--border-warm);
  box-shadow: 0 2px 16px rgba(122, 46, 46, 0.06);
  width: 340px;
  display: flex;
  flex-direction: column;
}

.auth-card h1 {
  margin: 0 0 1.6rem;
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--maroon);
}

.auth-card label {
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.auth-card input {
  padding: 0.65rem 0.75rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--border-warm);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-card input:focus {
  outline: none;
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(122, 46, 46, 0.1);
  background: var(--surface-interactive);
}

.auth-card button {
  padding: 0.75rem;
  background: var(--maroon);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-card button:hover {
  background: var(--maroon-dark);
}

.error {
  color: #B3261E;
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* --- Chat page --- */
.app-layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--paper);
  border-right: 1px solid var(--border-warm);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
  transition: width 0.2s ease;
}

/* Collapsed: a narrow icon-only rail. The conversation list and
   section label are hidden entirely; the new-chat button shrinks to
   just its "+" (swapped via JS, not CSS text-clipping, so it stays
   fully readable rather than getting awkwardly cut off). */
.sidebar.collapsed {
  width: 56px;
  padding: 1rem 0.5rem;
}
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .conversation-list {
  display: none;
}

.sidebar-toggle-btn {
  /* Sits in the sidebar's normal flow, top-right when expanded and centered
     when collapsed. It used to hang half outside the sidebar's edge, but
     .sidebar has overflow-y: auto, which clips anything outside its box —
     so only half the button was ever visible. */
  align-self: flex-end;
  flex-shrink: 0;
  margin-bottom: 10px;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-chrome);
  border: 1px solid var(--border-warm);
  color: var(--maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sidebar.collapsed .sidebar-toggle-btn {
  align-self: center;
}
.sidebar-toggle-btn:hover {
  background: var(--maroon-light);
}
/* Chevron flips direction when collapsed, via a CSS transform rather
   than swapping the SVG itself -- simpler, and the icon is symmetric
   enough that a flip reads correctly either way. */
.sidebar.collapsed .sidebar-toggle-btn svg {
  transform: scaleX(-1);
}

.sidebar-new-chat {
  background: var(--maroon);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  padding: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: background 0.15s ease;
}

.sidebar-new-chat:hover {
  background: var(--maroon-dark);
}

.sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.4rem;
  margin-bottom: 0.4rem;
}

.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.conversation-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.83rem;
  color: var(--text-main);
}

.conversation-item:hover {
  background: var(--surface-interactive);
}

.conversation-item.active {
  background: var(--surface-interactive);
  border: 1px solid var(--border-warm);
}

.conversation-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.conversation-item-title-input {
  flex: 1;
  font-size: 0.83rem;
  font-family: inherit;
  border: 1px solid var(--maroon);
  border-radius: 4px;
  padding: 2px 5px;
  background: var(--surface-interactive);
  color: var(--text-main);
}

.conversation-item-title-input:focus {
  outline: none;
}

/* Three-dot menu button — hidden until the row is hovered (or the menu
   it opens is itself active), matching the "Claude-style" pattern where
   the row stays clean until you're actually interacting with it. */
.conversation-menu-btn {
  background: none;
  border: none;
  padding: 2px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: none;
  flex-shrink: 0;
}

.conversation-item:hover .conversation-menu-btn,
.conversation-menu-btn.menu-open {
  display: flex;
}

.conversation-menu-btn:hover {
  background: var(--border-warm);
}

.conversation-menu {
  position: absolute;
  right: 4px;
  top: calc(100% + 2px);
  background: var(--surface-chrome);
  border: 1px solid var(--border-warm);
  border-radius: 6px;
  padding: 4px;
  min-width: 110px;
  z-index: 10;
  display: none;
  flex-direction: column;
}

.conversation-menu.open {
  display: flex;
}

.conversation-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--text-main);
  cursor: pointer;
  border-radius: 4px;
}

.conversation-menu button:hover {
  background: var(--paper);
}

.conversation-menu button.danger {
  color: #B3261E;
}

.chat-wrap {
  flex: 1;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.chat-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 56px;
  padding: 0 1.5rem;
  background: var(--surface-chrome);
  box-shadow: 0 2px 8px rgba(122, 46, 46, 0.08);
  /* Establishes a stacking context high enough that the Files popup
     (which pops out of this header) renders above .messages-wrap below
     it — without this, .messages-wrap (which has its own position:
     relative, appearing later in the DOM) silently painted over most
     of the popup, leaving only a thin sliver visible. */
  position: relative;
  z-index: 20;
}

/* Username/usage data still loads (app.js's loadUsage() is unchanged) —
   just not shown in the header anymore. Kept in the DOM rather than
   removed so nothing in app.js needs guarding against a missing element. */
.header-usage-info {
  display: none;
}

#username-display {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--maroon);
}

.usage-bar-track {
  width: 190px;
  height: 6px;
  background: var(--border-warm);
  border-radius: 999px;
  margin-top: 7px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  background: #4A9A6E; /* healthy — green */
  width: 0%;
  border-radius: 999px;
  transition: width 0.2s ease, background 0.2s ease;
}

.usage-bar-fill.warning {
  background: #D69A2D; /* approaching limit — amber */
}

.usage-bar-fill.limit {
  background: #B3261E; /* at/near limit — red */
}

.usage-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Utility actions (Summarize / Download) are visually lighter/secondary;
   New chat / Log out are heavier — separates "things you do with a
   conversation" from "things that change your session". */
.btn {
  border-radius: 4px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-warm);
  color: var(--text-muted);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--maroon);
  color: var(--maroon);
}

.logout-btn {
  background: transparent;
  border: 1px solid var(--maroon);
  color: var(--maroon);
}

.logout-btn:hover:not(:disabled) {
  background: var(--maroon);
  color: var(--paper);
}

.messages-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 3.5rem 1.5rem 1.5rem; /* extra right padding so long content clears the floating side rail */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--paper);
  background-image: radial-gradient(#DDD0B0 0.7px, transparent 0.7px);
  background-size: 14px 14px;
}

/* Side rail: Summarize/Download, floated over the message area instead
   of sitting in the header — icon-only, with a hover tooltip showing
   the action name. */
.side-rail {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-chrome);
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

.rail-btn {
  position: relative;
  background: none;
  border: none;
  padding: 4px;
  color: var(--maroon);
  cursor: pointer;
  display: flex;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.rail-btn:hover {
  background: var(--paper);
}

.rail-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--maroon-dark);
  color: var(--paper);
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.rail-btn:hover .rail-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Thin, theme-colored scrollbar instead of the default browser grey,
   which clashed against the warm palette and made the right edge look
   broken rather than intentional. */
.messages::-webkit-scrollbar {
  width: 8px;
}

.messages::-webkit-scrollbar-track {
  background: transparent;
}

.messages::-webkit-scrollbar-thumb {
  background: var(--border-warm);
  border-radius: 999px;
}

.messages::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

.messages {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--border-warm) transparent;
}

.msg {
  max-width: 75%;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
  font-size: 0.95rem;
  overflow-wrap: anywhere; /* breaks long unbroken strings (URLs, citation IDs) so they wrap inside the bubble instead of overflowing past it */
}

/* Assistant replies get a left accent bar instead of a bubble or a flat,
   unmarked block — legal analysis is often long and structured (headers,
   numbered grounds, citations), and a bordered box cramps that. But pure
   flat text with no marker at all read as visually unfinished next to
   the user's bubble. The accent bar runs the full height of the reply,
   however long it is, and echoes the header/button maroon so the page
   reads as one consistent design rather than two different treatments. */
.msg.assistant {
  align-self: flex-start;
  max-width: 90%;
  background: transparent;
  border: none;
  border-left: 3px solid var(--maroon);
  color: var(--text-main);
  padding: 0 0 0 0.75rem;
}

/* Three-dot "thinking" indicator shown in an assistant bubble while
   waiting for the first real token to stream in. */
.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 1.1em;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.msg.user {
  align-self: flex-end;
  background: var(--maroon);
  color: var(--paper);
}

.msg.summary {
  align-self: center;
  max-width: 90%;
  background: #FBF6E9;
  border: 1px solid #E3CE8F;
  font-size: 0.9rem;
}

/* Elevated compose box: the form itself is the bordered card, with the
   textarea blending in (no border of its own) and the Send button
   anchored inside, bottom-right — rather than a plain rectangle beside
   a separate button. Reads as a considered "document composer" rather
   than a casual chat input, and leaves room to add more controls
   (attachments, formatting) inside the same box later. */
.chat-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 1.5rem 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--surface-interactive);
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-form:focus-within {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(122, 46, 46, 0.1);
}

.chat-form textarea {
  flex: 1;
  resize: none;
  height: 40px;
  padding: 0.3rem 0.1rem;
  border: none;
  border-radius: 0;
  font-size: 0.95rem;
  font-family: inherit;
  background: transparent;
  color: var(--text-main);
}

.chat-form textarea::placeholder {
  color: var(--text-faint);
}

.chat-form textarea:focus {
  outline: none;
}

.chat-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-form button {
  padding: 0.5rem 1.2rem;
  background: var(--maroon);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chat-form button:hover:not(:disabled) {
  background: var(--maroon-dark);
}

.chat-form button:disabled {
  background: #C9A8A8;
  cursor: not-allowed;
}

/* Attach button/panel (uploading or selecting a document to attach),
   and the Files button/panel (viewing what's already attached to this
   conversation) — both live in a row alongside Send. */

.chat-form-actions-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.files-wrap {
  position: relative;
}

.files-btn {
  background: none;
  border: none;
  padding: 5px 8px;
  color: var(--maroon);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: inherit;
  transition: background 0.15s ease;
}

.files-btn:hover,
.files-btn.active {
  background: var(--paper);
}

.files-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.files-count:empty {
  display: none;
}

.files-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--surface-chrome);
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
  max-height: 320px;
  overflow-y: auto;
}

.files-panel.open {
  display: flex;
}

.files-panel-header {
  padding-bottom: 2px;
}

.files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.files-list:empty::after {
  content: 'Nothing attached yet.';
  font-size: 0.78rem;
  color: var(--text-faint);
}

.files-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-main);
  background: var(--surface-interactive);
  border: 1px solid var(--border-warm);
}

.files-list-item button {
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.files-list-item.uploading,
.files-list-item.success {
  gap: 8px;
}

.files-list-item.error {
  border-color: #B3261E;
  color: #B3261E;
}


.attach-wrap {
  position: relative;
}

.attach-btn {
  background: none;
  border: none;
  padding: 4px;
  color: var(--maroon);
  cursor: pointer;
  display: flex;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.attach-btn:hover,
.attach-btn.active {
  background: var(--paper);
}

.attach-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 260px;
  background: var(--surface-chrome);
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
  max-height: 320px;
  overflow-y: auto;
}

.attach-panel.open {
  display: flex;
}

.attach-panel-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attach-upload-label {
  background: var(--maroon);
  color: var(--paper);
  border-radius: 6px;
  padding: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.attach-upload-label:hover {
  background: var(--maroon-dark);
}

.attach-upload-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
}

.attach-panel-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.attach-doc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attach-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-main);
}

.attach-doc-item:hover {
  background: var(--paper);
}

.attach-doc-item.selected {
  background: var(--surface-interactive);
  border: 1px solid var(--border-warm);
}

.attach-doc-item .doc-type-tag {
  font-size: 0.65rem;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-left: auto;
}

/* Upload progress states — spinner while uploading, checkmark on
   success, error state on failure. Shared by both the attach panel's
   upload flow and the files list, which is where these actually render
   once selected (see app.js's renderFilesList). */

.upload-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-warm);
  border-top-color: var(--maroon);
  border-radius: 50%;
  animation: upload-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.upload-progress-text {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.files-list-item.success {
  border-color: #4A9A6E;
}

.upload-check {
  color: #4A9A6E;
  font-size: 0.85rem;
  line-height: 1;
}

/* Attachment tags shown inside a message bubble — confirms which
   document(s) were actually included with that specific message. */

.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.msg-attachment-tag {
  font-size: 0.72rem;
  background: rgba(247, 242, 231, 0.18);
  border: 1px solid rgba(247, 242, 231, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--paper);
}

/* Upload-in-progress indicator inside the compose box itself — stays
   visible through the whole upload, right where the message is being
   typed, rather than tucked away in the header's Files popup. */

.upload-progress-row:empty {
  display: none;
}

.upload-progress-row {
  margin-bottom: 8px;
}

.upload-progress-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-chrome);
  border: 1px solid var(--border-warm);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--text-main);
}

.upload-progress-chip .upload-progress-text {
  margin-left: auto;
}