/* ═══════════════════════════════════════
   chat.css — Chat view, messages, input
   ═══════════════════════════════════════ */

/* ── CHAT CONTAINER ── */
#chat-container {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 6px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}

/* ── WELCOME SCREEN ── */
#welcome-screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px 80px;
  pointer-events: none; overflow-y: hidden; z-index: 2;
}
.welcome-inner { width: 100%; max-width: 420px; text-align: center; pointer-events: all; }

/* Add this to hide the welcome screen when the 'hidden' class is applied */
#welcome-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* BUGFIX: .welcome-inner sets `pointer-events: all` (needed so the prompt
   chips are tappable while the welcome screen is showing). That value is
   set directly on the child, so it overrides the `pointer-events: none`
   inherited from #welcome-screen.hidden above — pointer-events does not
   "lock" descendants the way opacity does. Net effect: after the first
   message was sent, #welcome-screen faded out (opacity:0) but stayed in
   the DOM, absolutely positioned with z-index:2 over the whole message
   list, and its chip buttons remained clickable underneath the messages.
   Any tap on the chat transcript could silently land on an invisible
   chip and resend that chip's canned prompt instead of doing nothing.
   Force pointer-events off on the child too once hidden. */
#welcome-screen.hidden .welcome-inner {
  pointer-events: none;
}


/* HUGE GLASS TEXT — black-to-white animated */
.welcome-glass-text {
  font-size: clamp(36px, 10vw, 52px);
  font-weight: 900; letter-spacing: -1.5px; line-height: 1.05;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #888888 50%, #333333 100%);
  background-size: 100% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textReveal 2.4s ease forwards;
  /* Glass frost effect */
  filter: drop-shadow(0 1px 2px rgba(255,255,255,0.08));
}
@keyframes textReveal {
  0%   { background-position: 100% 100%; opacity:0; transform:translateY(8px); }
  40%  { opacity:1; }
  100% { background-position: 0% 0%;   opacity:1; transform:none; }
}

.welcome-sub {
  font-size: 13px; color: var(--text2); /* Using updated --text2 */
  line-height: 1.7; margin-bottom: 22px;
}

/* Prompt chips */
.chips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chip {
  padding: 10px 10px;
  border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  font-size: 12px; color: var(--text2); /* Using updated --text2 */
  text-align: left;
  display: flex; align-items: center; gap: 8px;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.chip:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); transform: translateY(-1px); }
.chip:active { transform: scale(0.97); }
.chip-icon { font-size: 16px; flex-shrink: 0; }

/* ── MESSAGES ── */
.message-row { display:flex; gap:8px; animation: msgIn 0.2s ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
.message-row.user { justify-content: flex-end; }
.message-row.ai   { justify-content: flex-start; }

.msg-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface3); border: 1px solid var(--border2);
  font-size: 12px; font-weight: 700; color: var(--text2); /* Using updated --text2 */
}
.msg-content { max-width: 88%; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-bubble {
  padding: 10px 13px; border-radius: var(--r-lg);
  font-size: 14px; line-height: 1.7;
  background: transparent; /* No background */
  border: none;            /* No border */
  color: var(--text); /* Ensure text is readable on chat-container's background */
}
.msg-bubble.ai {
  /* No specific background or border for AI, handled by general .msg-bubble */
  border-top-left-radius: 4px;
}
.msg-bubble.user {
  background: var(--surface2); /* Dark grey background */
  border: 1px solid var(--border2); /* Matching border */
  border-top-right-radius: 4px;
}
.msg-meta { font-size: 10px; color: var(--text3); /* Using updated --text3 */
  padding: 0 2px; }
.message-row.user .msg-meta { text-align: right; }

.ai-action-bar {
  display: flex; /* Make buttons horizontal */
  flex-direction: row; /* Explicitly set row direction */
  gap: 6px; /* Spacing between buttons */
  padding: 4px 0; /* Some padding */
  justify-content: flex-start; /* Align to start */
}


/* Markdown in ai bubbles */
.msg-content.md-body h1,
.msg-content.md-body h2,
.msg-content.md-body h3,
.msg-content.md-body h4,
.msg-content.md-body h5,
.msg-content.md-body h6 {
  margin: 16px 0 8px;
  font-weight: 700;
  color: var(--text);
}
.msg-content.md-body h1 {
  font-size: 1.6em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.msg-content.md-body h2 { font-size: 1.4em; }
.msg-content.md-body h3 { font-size: 1.2em; color: var(--text2); } /* Using updated --text2 */
.msg-content.md-body h4 { font-size: 1.1em; color: var(--text2); } /* Using updated --text2 */
.msg-content.md-body h5 { font-size: 1.05em; color: var(--text3); } /* Using updated --text3 */
.msg-content.md-body h6 { font-size: 1em; color: var(--text3); } /* Using updated --text3 */

.msg-content.md-body p  { margin-bottom: 8px; color: var(--text); }
.msg-content.md-body ul,.msg-content.md-body ol {
  padding-left: 20px;
  margin-bottom: 8px;
  color: var(--text);
}
.msg-content.md-body ul li, .msg-content.md-body ol li {
  margin-bottom: 4px;
}

.msg-content.md-body code {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 0.9em;
  font-family: monospace;
  color: var(--green); /* Highlight inline code */
}
.msg-content.md-body pre  {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  overflow-x: auto;
  margin: 10px 0;
  font-family: monospace;
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--text);
  position: relative;
}
.msg-content.md-body pre .copy-code-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--surface3);
  border: 1px solid var(--border3);
  color: var(--text2); /* Using updated --text2 */
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
}
.msg-content.md-body pre .copy-code-btn:hover {
  background: var(--accent-dim);
  color: var(--text);
}
.msg-content.md-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.msg-content.md-body .md-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin:10px 0;
  border:1px solid var(--border2);
  border-radius: var(--r-md);
  overflow: hidden; /* Ensure rounded corners are visible for inner borders */
}
.msg-content.md-body .md-table th {
  background:var(--surface2);
  padding:8px 10px;
  border:1px solid var(--border2);
  text-align:left;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap; /* Prevent headers from wrapping too much */
}
.msg-content.md-body .md-table td {
  padding:7px 10px;
  border:1px solid var(--border);
  color: var(--text2); /* Using updated --text2 */
}
.msg-content.md-body .md-table tr:nth-child(even) td { background:var(--surface); }

.msg-content.md-body .md-blockquote {
  border-left: 4px solid var(--border3);
  padding-left: 15px;
  margin: 10px 0;
  color: var(--text2); /* Using updated --text2 */
  font-style: italic;
  background: var(--surface);
  border-radius: var(--r-sm);
  padding-top: 8px;
  padding-bottom: 8px;
}
.msg-content.md-body .md-list-ul li::before {
  content: "•";
  color: var(--text2); /* Using updated --text2 */
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
.msg-content.md-body .md-list-ol li {
  list-style-type: decimal;
  margin-left: 1.5em; /* Adjust to align with bullet points */
}
.msg-content.md-body .md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}
.msg-content.md-body .md-answer-line {
  border-bottom: 1px dashed var(--text3); /* Using updated --text3 */
  margin: 15px 0;
  height: 1px; /* Ensure it's visible even if no content */
}
.msg-content.md-body .md-link {
  color: var(--accent); /* Consistent link color */
  text-decoration: underline;
}

/* Diagram Container Styling (for SVGs, charts) */
.msg-content.md-body .diagram-container {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 15px;
  margin: 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensure SVG doesn't break out */
  position: relative;
  cursor: zoom-in; /* Indicate it's clickable for lightbox */
  transition: all var(--t-fast);
}

.msg-content.md-body .diagram-container:hover {
  border-color: var(--border3);
  box-shadow: 0 0 10px rgba(255,255,255,0.05);
}

.msg-content.md-body .diagram-container svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.msg-content.md-body .diagram-hover-btns {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none; /* Only show on hover of container, not just btns themselves */
}

.msg-content.md-body .diagram-container:hover .diagram-hover-btns {
  opacity: 1;
  pointer-events: all;
}

.msg-content.md-body .diagram-hover-btn {
  background: rgba(14,14,14,0.8);
  color: var(--text);
  border: 1px solid var(--border3);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: 0.7em;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.msg-content.md-body .diagram-hover-btn:hover {
  background: rgba(30,30,30,0.9);
  border-color: var(--text);
}

/* Styling for the container that holds the image, caption, and add button */
.image-attachment-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Space between image and caption controls */
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
}

.image-attachment-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  display: block;
}

.image-caption-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-caption-input-row input {
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--bg2);
  border: 1px solid var(--border2);
  font-size: 13px;
  color: var(--text);
}
/* Ensure placeholder is visible for the caption input */
.image-caption-input-row input::placeholder {
  color: var(--text2) !important; /* Force a lighter placeholder color */
  opacity: 1; /* Ensure opacity is not reducing visibility */
}


.image-caption-input-row .add-caption-btn {
  /* Styling for the 'Add' button */
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--surface2) !important; /* Force background */
  border: 1px solid var(--border2) !important; /* Force border */
  color: var(--text) !important; /* Force text color */
  font-size: 13px;
  font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.image-caption-input-row .add-caption-btn:hover {
  background: var(--surface3) !important; /* Force background on hover */
  border-color: var(--border3) !important; /* Force border on hover */
  color: var(--text) !important; /* Force text color on hover */
}


/* ── DOC CARD ── */
.doc-card {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--glass2); border: 1px solid var(--border2);
  backdrop-filter: blur(20px);
  padding-bottom: 12px; /* room for the primary button so it isn't clipped by overflow:hidden */
}
.doc-card-header {
  padding: 14px 16px;
  background: var(--surface2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.doc-card-icon { font-size: 24px; flex-shrink: 0; }
.doc-card-title { font-size: 14px; font-weight: 700; }
.doc-card-sub   { font-size: 11px; color: var(--text3); /* Using updated --text3 */
  margin-top: 2px; }
.doc-card-preview { padding: 12px 16px; overflow-x: auto; font-size: 13px; }

/* Download toggle button */
.doc-download-toggle {
  margin: 12px 16px 14px; /* Added margin-top to create space */
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--text2); /* Using updated --text2 */
  width: calc(100% - 32px);
}
.doc-download-toggle:hover { background: var(--surface2); color: var(--text); }
.doc-download-toggle svg { width: 14px; height: 14px; }

/* Download pop-under panel */
.doc-download-panel {
  display: none;
  flex-direction: column; gap: 6px;
  margin: 0 16px 14px;
  padding: 12px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r-md);
}
.doc-download-panel.open { display: flex; }
.dl-btn {
  width: 100%; padding: 12px 16px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
  box-sizing: border-box; /* prevents overflow that causes uneven corners */
}
.dl-btn:hover { background: var(--surface3); border-color: var(--border2); }
.dl-btn .dl-format { font-size:10px; color:var(--text3); /* Using updated --text3 */
  margin-left:auto; }
.dl-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Primary download button — glassy gradient, per format, no glow ──
   Inset with side margin so the card's overflow:hidden + rounded corners
   never clip the button's own corners. */
.dl-btn.dl-primary {
  width: calc(100% - 32px); margin: 12px 16px 0; padding: 13px 18px;
  border-radius: 13px; border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: #fff;
  box-sizing: border-box; position: relative;
  backdrop-filter: blur(14px);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.dl-btn.dl-primary:active { transform: scale(0.98); }
.dl-btn.dl-primary .dl-primary-icon { display:flex; align-items:center; flex-shrink:0; opacity:0.95; }
.dl-btn.dl-primary .dl-primary-text { white-space: nowrap; }
.dl-btn.dl-primary .dl-primary-ext { font-size: 11px; font-weight: 500; opacity: 0.65; margin-left: 2px; }

/* Glassy gradients per format — layered translucent gradient, no box-shadow glow */
.dl-grad-pdf {
  background: linear-gradient(135deg, rgba(239,68,68,0.92) 0%, rgba(185,28,28,0.92) 100%);
}
.dl-grad-docx {
  background: linear-gradient(135deg, rgba(59,130,246,0.92) 0%, rgba(29,78,216,0.92) 100%);
}
.dl-grad-pptx {
  background: linear-gradient(135deg, rgba(245,158,11,0.92) 0%, rgba(180,102,10,0.92) 100%);
}
.dl-grad-xlsx {
  background: linear-gradient(135deg, rgba(16,185,129,0.92) 0%, rgba(4,120,87,0.92) 100%);
}
.dl-grad-txt {
  background: linear-gradient(135deg, rgba(107,114,128,0.92) 0%, rgba(55,65,81,0.92) 100%);
}
/* Format color dots */
.dot-pdf  { width:8px;height:8px;border-radius:50%;background:#F87171;flex-shrink:0; }
.dot-word { width:8px;height:8px;border-radius:50%;background:#60A5FA;flex-shrink:0; }
.dot-pptx { width:8px;height:8px;border-radius:50%;background:#FBBF24;flex-shrink:0; }
.dot-xlsx { width:8px;height:8px;border-radius:50%;background:#6EE7B7;flex-shrink:0; }
.dot-txt  { width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0; }

/* ── INPUT BAR — single clean pill, Gemini-style ── */
.input-bar {
  flex-shrink: 0;
  padding: 10px 14px 16px;
  background: var(--glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
}
.input-bar-inner { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }

/* The pill itself — one continuous shape, no nested bordered boxes inside */
.input-row {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface2); border: 1px solid transparent;
  border-radius: 28px; padding: 6px 6px 6px 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 4px 18px rgba(0,0,0,0.12);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
.input-row:focus-within {
  background: var(--surface3);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 6px 22px rgba(0,0,0,0.18);
}

.input-side-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text2);
  transition: background var(--t-fast), color var(--t-fast);
}
.input-side-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.input-side-btn svg { width: 17px; height: 17px; }

.chat-input-area { flex: 1; min-width: 0; }
.chat-input {
  width: 100%; background: transparent; border: none; resize: none;
  color: var(--text); font-size: 15px; line-height: 1.5;
  padding: 8px 4px; max-height: 130px; box-shadow: none !important;
}
.chat-input::placeholder { color: var(--text3); }
.chat-input:focus { outline: none; border: none; box-shadow: none; }

/* Send button — a plain filled circle, only shown once there's text to send */
.send-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: none;
  background: var(--text); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.75); pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
}
.send-btn.visible { opacity: 1; transform: none; pointer-events: all; }
.send-btn:disabled { opacity: 0.3; pointer-events: none; }
.send-btn svg { width: 16px; height: 16px; }

/* Attach pop-under */
#attach-panel {
  display: none; flex-direction: column; gap: 4px;
  padding: 10px 10px 12px; border-radius: 16px;
  background: rgba(7,11,18,.9); border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  margin-bottom: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
#attach-panel.open { display: flex; }

.attach-section-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  color: rgba(248,250,252,.3); text-transform: uppercase;
  padding: 4px 4px 3px;
}

.attach-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: var(--text); cursor: pointer; transition: .15s; width: 100%; text-align: left;
}
.attach-opt:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }
.attach-opt:active { transform: scale(.98); }

/* Temporarily-disabled attach options (image upload, form builder, idea
   picker) — dimmed and non-interactive, but left in the DOM so re-enabling
   is a one-line change in views/chat.html. */
.attach-opt--disabled { opacity: .4; cursor: not-allowed; }
.attach-opt--disabled:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.attach-opt--disabled:active { transform: none; }

.attach-opt-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
.attach-opt-icon svg { width: 16px; height: 16px; color: rgba(248,250,252,.65); }
.attach-opt-title  { font-size: 13px; font-weight: 700; color: var(--text); }
.attach-opt-sub    { font-size: 10.5px; color: rgba(248,250,252,.38); margin-top: 1px; }

/* ── Image preview card in chat ── */
.img-preview-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; overflow: hidden;
  max-width: 260px; width: 100%;
}
.img-preview-thumb {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block; border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.img-preview-body { padding: 10px 12px 12px; }
.img-preview-filename {
  font-size: .7rem; color: rgba(248,250,252,.35); font-weight: 600;
  margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.img-preview-input-row { display: flex; gap: 6px; align-items: center; }
.img-caption-input {
  flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; padding: 7px 10px; color: #F8FAFC;
  font-size: .8rem; font-family: inherit; outline: none; transition: .15s;
  min-width: 0;
}
.img-caption-input:focus { border-color: rgba(59,130,246,.5); background: rgba(37,99,235,.08); }
.img-caption-input::placeholder { color: rgba(248,250,252,.3); }
.img-add-btn {
  flex-shrink: 0; height: 34px; padding: 0 13px; border-radius: 8px;
  background: rgba(37,99,235,.8); border: 1px solid rgba(59,130,246,.4);
  color: #fff; font-size: .77rem; font-weight: 800; cursor: pointer; transition: .15s;
  white-space: nowrap; font-family: inherit;
}
.img-add-btn:hover { background: rgba(37,99,235,1); }
.img-confirmed-msg { font-size: .75rem; color: #6ee7b7; display: flex; align-items: center; gap: 5px; }
.img-confirmed-msg code { background: rgba(52,211,153,.1); border-radius: 4px; padding: 1px 5px; font-family: monospace; }

/* ── Document preview card ── */
.doc-preview-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 14px 16px; max-width: 320px; width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
.doc-preview-top { display: flex; align-items: center; gap: 10px; }
.doc-preview-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
}
.doc-preview-meta { flex: 1; min-width: 0; }
.doc-preview-name { font-size: .84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-preview-type { font-size: .7rem; color: rgba(248,250,252,.4); margin-top: 2px; }
.doc-preview-snippet {
  font-size: .74rem; color: rgba(248,250,252,.45); line-height: 1.5;
  background: rgba(255,255,255,.04); border-radius: 8px; padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.07); max-height: 72px; overflow: hidden;
}
.doc-preview-added { font-size: .75rem; color: #6ee7b7; display: flex; align-items: center; gap: 5px; }

/* Hint text */
.input-hint { font-size: 10px; color: var(--text3); text-align: center; padding-top: 1px; }
/* ── Math rendering (KaTeX) — js/math-engine.js ─────────────────────────
   .md-math spans start as plain-text LaTeX (e.g. "x^2") and are swapped
   for KaTeX's rendered HTML by UIModule.renderMathInDOM() once KaTeX has
   loaded. Before that swap, style them so the raw LaTeX still reads
   reasonably instead of looking broken for the brief moment before
   render completes. */
.md-math {
  font-family: 'KaTeX_Main', 'Cambria Math', Georgia, serif;
}
.md-math-display {
  display: block;
  text-align: center;
  margin: 14px 0;
  font-size: 1.05em;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
}
.md-math:not(.md-math-display) {
  display: inline-block;
  padding: 0 1px;
}
/* KaTeX's own .katex root element inherits color from context so math
   matches surrounding text color in both light preview and dark chat. */
.msg-bubble.ai .md-math .katex,
.preview-page .md-math .katex {
  color: inherit;
}


/* ── ARTIFACTS PANEL — media & uploads for the current conversation ── */
.artifacts-sub {
  font-size: 12px; color: var(--text3); padding: 0 2px 12px;
}
.artifacts-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 56vh; overflow-y: auto;
}
.artifacts-empty {
  padding: 32px 16px; text-align: center;
  font-size: 13px; color: var(--text3);
}
.artifact-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px;
  background: var(--surface2); border: 1px solid var(--border);
}
.artifact-item-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--surface3);
}
.artifact-item-body { flex: 1; min-width: 0; }
.artifact-item-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artifact-item-meta {
  font-size: 11px; color: var(--text3); margin-top: 2px;
}
.artifact-item-actions { display: flex; gap: 5px; flex-shrink: 0; }
.artifact-item-actions .icon-btn {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface3); border: 1px solid var(--border);
  color: var(--text2); cursor: pointer; transition: .15s;
}
.artifact-item-actions .icon-btn:hover { background: var(--surface4, var(--surface3)); color: var(--text); }
.artifact-item-actions .icon-btn.danger:hover { background: rgba(220,38,38,.18); color: #fca5a5; border-color: rgba(220,38,38,.35); }
.artifact-item-actions .icon-btn svg { width: 14px; height: 14px; }

.artifact-text-body {
  max-height: 55vh; overflow-y: auto; padding: 14px 2px 4px;
  font-size: 13px; line-height: 1.6; color: var(--text2);
  white-space: pre-wrap; word-break: break-word;
}