:root {
    --bg: #0a0a12; --bg-elevated: #101018; --bg-card: #181822; --border: #2a2a38;
    --text: #f0f0f5; --text-muted: #8888a0; --accent: #1a9fff; --accent-hover: #3db0ff;
    --purple: #6366f1; --success: #22c55e; --danger: #ef4444; --radius: 12px; --radius-sm: 8px;
    --font: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace;
}
[data-theme="light"] {
    --bg: #f5f6fa; --bg-elevated: #fff; --bg-card: #eef0f6; --border: #dde0ea;
    --text: #12121a; --text-muted: #6b6b80; --accent: #0077cc;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:var(--font); background:var(--bg); color:var(--text); overflow:hidden; }

.splash { position:fixed; inset:0; background:#0a0a12; display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity .5s,visibility .5s; }
.splash.hide { opacity:0; visibility:hidden; }
.splash-content { text-align:center; }
.splash-logo { width:80px; height:80px; border-radius:50%; margin-bottom:16px; animation:pulse 2s ease infinite; }
.splash-title { font-size:2.2rem; font-weight:700; color:#1a9fff; letter-spacing:-.03em; }
.splash-sub { color:#889; margin-top:6px; font-size:.95rem; }
.splash-loader { width:120px; height:3px; background:#222; border-radius:2px; margin:28px auto 0; overflow:hidden; }
.splash-loader .bar { height:100%; width:40%; background:#1a9fff; border-radius:2px; animation:load 1.2s ease infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes load { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

.app { display:flex; height:100vh; height:100dvh; }
.app.hidden { display:none; }
.sidebar { width:280px; background:var(--bg-elevated); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; transition:transform .3s; }
.sidebar-scrim { display:none; }
.sidebar-header { padding:16px 18px; border-bottom:1px solid var(--border); }
.sidebar-scroll { flex:1; overflow-y:auto; min-height:0; border-top:1px solid var(--border); }
.settings-input { background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:7px 10px; min-width:170px; font-size:.85rem; }
.paste-view { white-space:pre-wrap; word-break:break-word; max-height:420px; overflow:auto; font-size:.78rem; margin:0; }
.message .text { min-width:0; max-width:100%; }
.message.user .actions { justify-content:flex-end; }
.chat-search { padding:2px 12px 8px; }
.chat-search input { width:100%; box-sizing:border-box; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:7px 10px; font-size:.85rem; }
.scroll-down-btn { position:fixed; right:22px; bottom:118px; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text); font-size:19px; line-height:1; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; z-index:60; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.scroll-down-btn.show { opacity:1; pointer-events:auto; transform:none; }
.chat-item.imagine-new .title { color:var(--accent); font-weight:600; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.1rem; }
.brand-logo { width:28px; height:28px; border-radius:50%; }
.new-chat-btn { margin:12px 14px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:10px; border:1px solid var(--border); background:var(--bg-card); color:var(--text); font-size:.95rem; font-weight:500; cursor:pointer; transition:border-color .15s; }
.new-chat-btn:hover { border-color:var(--accent); color:var(--accent); }
.chat-list { padding:8px 10px 12px; }
.group-label { font-size:.72rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; padding:10px 8px 6px; }
.chat-item { display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:8px; cursor:pointer; color:var(--text-muted); font-size:.9rem; margin-bottom:2px; position:relative; }
.chat-item:hover, .chat-item.active { background:var(--bg-card); color:var(--text); }
.chat-item .title { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item .pin { font-size:.7rem; opacity:.7; }
.chat-item .more { opacity:0; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:2px 6px; font-size:1rem; line-height:1; }
.chat-item:hover .more { opacity:1; }
.sidebar-footer { padding:12px 16px; border-top:1px solid var(--border); }
.memory-status { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-muted); margin-bottom:6px; }
.memory-status .dot { width:8px; height:8px; background:var(--success); border-radius:50%; animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--bg-elevated); }
.topbar-title { font-weight:600; color:var(--text-muted); }
.topbar-actions { margin-left:auto; }

.chat-container { flex:1; overflow-y:auto; }
.welcome { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:40px 20px; text-align:center; }
.welcome.hidden { display:none; }
.welcome-logo { width:72px; height:72px; border-radius:50%; margin-bottom:18px; }
.welcome h2 { font-size:1.5rem; margin-bottom:8px; }
.welcome p { color:var(--text-muted); font-size:.95rem; max-width:400px; }
.quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; justify-content:center; }
.chip { background:var(--bg-card); border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:20px; font-size:.85rem; cursor:pointer; }
.chip:hover { border-color:var(--accent); color:var(--accent); }

.messages { padding:24px 20px 40px; max-width:820px; margin:0 auto; width:100%; }
.message { display:flex; gap:12px; margin-bottom:24px; animation:fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.message .avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; overflow:hidden; background:var(--bg-card); }
.message .avatar img { width:100%; height:100%; object-fit:cover; }
.message.user .avatar { background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; color:#fff; }
.message .content { flex:1; min-width:0; }
.message .role { font-size:.75rem; font-weight:600; color:var(--text-muted); margin-bottom:4px; }
.message .text { line-height:1.65; font-size:.95rem; white-space:pre-wrap; word-break: normal; overflow-wrap: anywhere; }
.message .text pre { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px; overflow-x:auto; margin:10px 0; font-family:var(--mono); font-size:.85rem; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
.message .text code { font-family:var(--mono); background:var(--bg-card); padding:2px 5px; border-radius:4px; font-size:.88em; }
.message .files { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.file-chip { display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border); padding:6px 10px; border-radius:6px; font-size:.8rem; }
.file-chip img { width:32px; height:32px; object-fit:cover; border-radius:4px; }
.message .actions { display:flex; gap:6px; margin-top:8px; opacity:0; transition:opacity .15s; }
.message:hover .actions { opacity:1; }
.message .actions button { background:none; border:1px solid transparent; color:var(--text-muted); font-size:.75rem; padding:4px 8px; border-radius:6px; cursor:pointer; }
.message .actions button:hover { border-color:var(--border); color:var(--text); background:var(--bg-card); }

.img-card { margin-top:10px; max-width:400px; }
.img-card img { width:100%; border-radius:12px; border:1px solid var(--border); cursor:pointer; display:block; background:var(--bg-card); min-height:100px; }
.img-card .img-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.img-card .img-actions button {
    background:var(--bg-card); border:1px solid var(--border); color:var(--text); padding:8px 12px;
    border-radius:8px; font-size:.82rem; cursor:pointer;
}
.img-card .img-actions button:hover { border-color:var(--accent); color:var(--accent); }

.pdf-link, .dl-btn {
    display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:10px 14px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:10px; color:var(--accent);
    font-size:.9rem; cursor:pointer; text-decoration:none;
}
.pdf-link:hover, .dl-btn:hover { border-color:var(--accent); }

.input-area { padding:12px 20px 18px; border-top:1px solid var(--border); background:var(--bg); }
.file-preview { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; max-width:820px; margin-left:auto; margin-right:auto; }
.file-preview:empty { display:none; }
.preview-item { display:flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border); padding:6px 10px; border-radius:8px; font-size:.8rem; max-width:200px; }
.preview-item img { width:36px; height:36px; object-fit:cover; border-radius:4px; }
.preview-item .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.preview-item .remove { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; }
.input-box { display:flex; align-items:flex-end; gap:8px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; padding:10px 12px; max-width:820px; margin:0 auto; }
.input-box:focus-within { border-color:var(--accent); }
.input-box textarea { flex:1; background:transparent; border:none; color:var(--text); font-family:var(--font); font-size:.95rem; resize:none; outline:none; max-height:160px; line-height:1.5; padding:6px 0; }
.send-btn { width:40px; height:40px; border-radius:10px; background:var(--accent); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.3); }
.input-meta { display:flex; gap:8px; justify-content:center; margin-top:8px; font-size:.75rem; color:var(--text-muted); }

.icon-btn { width:36px; height:36px; border-radius:8px; background:transparent; border:none; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.icon-btn:hover { background:var(--bg-card); color:var(--text); }
.text-btn { background:none; border:none; color:var(--text-muted); font-size:.8rem; cursor:pointer; padding:4px 0; display:block; }
.text-btn:hover { color:var(--accent); }
#clearMemoryBtn:hover { color:var(--danger); }

.typing { display:flex; gap:4px; padding:8px 0; }
.typing span { width:7px; height:7px; background:var(--text-muted); border-radius:50%; animation:bounce 1.2s infinite; }
.typing span:nth-child(2){animation-delay:.15s} .typing span:nth-child(3){animation-delay:.3s}
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:500; padding:20px; pointer-events:auto; }
.modal.hidden { display:none; }
.modal-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; padding:20px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.modal-desc { color:var(--text-muted); font-size:.85rem; margin-bottom:14px; }
.mem-grid { display:flex; flex-direction:column; gap:12px; }
.mem-grid label { display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--text-muted); }
.mem-grid textarea { background:var(--bg-card); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px; font-family:var(--font); font-size:.9rem; resize:vertical; outline:none; }
.modal-actions { margin-top:16px; display:flex; justify-content:flex-end; }
.btn { padding:10px 16px; border-radius:8px; border:1px solid var(--border); background:var(--bg-card); color:var(--text); cursor:pointer; font-size:.9rem; }
.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }

.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
.lightbox.hidden { display:none; }
.lightbox img { max-width:min(96vw,900px); max-height:78vh; border-radius:12px; object-fit:contain; }
.lb-close { position:absolute; top:16px; right:20px; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; }
.lb-actions { display:flex; gap:12px; margin-top:16px; }

.ctx-menu { position:fixed; z-index:600; min-width:160px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:0 8px 30px rgba(0,0,0,.4); }
.ctx-menu.hidden { display:none; }
.ctx-menu button { display:block; width:100%; text-align:left; background:none; border:none; color:var(--text); padding:8px 12px; border-radius:6px; font-size:.88rem; cursor:pointer; }
.ctx-menu button:hover { background:var(--bg-card); }
.ctx-menu button.danger { color:var(--danger); }

.mobile-only { display:none; }
@media (max-width:768px) {
    .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    #sidebar.open + .sidebar-scrim { display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99; }
    .mobile-only { display:flex; }
}
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

.message .text a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.message .text a:hover { opacity: 0.85; }

/* Chat / Work toggle */
.mode-toggle {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
  position: relative;
}
.mode-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: .15s;
}
.mode-btn.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
[data-theme="light"] .mode-btn.active {
  background: #111;
  color: #fff;
}
.begin-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.welcome-sub { color: var(--text-muted); font-size: .9rem; }

/* tooltips */
.tip, .mode-btn, .plus-btn {
  position: relative;
}
.tip:hover::after, .mode-btn:hover::after, .plus-btn:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: .75rem;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}
.tip:hover::before, .mode-btn:hover::before, .plus-btn:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111;
  z-index: 50;
}

/* plus button */
.plus-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plus-btn:hover { border-color: var(--accent); color: var(--accent); }
.plus-sign { font-size: 1.4rem; line-height: 1; font-weight: 400; }

/* temporary chat */
.temp-chat-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .8rem;
  cursor: pointer;
}
.temp-chat-btn:hover { border-color: var(--accent); color: var(--accent); }

/* settings */
.settings-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
}
.settings-btn:hover { border-color: var(--accent); }
.gear { font-size: 1rem; }
.settings-section h4 { margin-bottom: 6px; font-size: .95rem; }
.theme-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.theme-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  color: var(--text);
  text-align: center;
  font-size: .8rem;
}
.theme-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,159,255,.25); }
.theme-preview {
  height: 56px;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 8px;
  overflow: hidden;
}
.light-prev { background: #f0f0f4; }
.dark-prev { background: #1a1a22; }
.system-prev { background: linear-gradient(90deg, #f0f0f4 50%, #1a1a22 50%); }
.tp-bar { height: 6px; width: 60%; border-radius: 3px; background: #1a9fff; margin-bottom: 6px; }
.tp-line { height: 4px; width: 90%; border-radius: 2px; background: #888; opacity: .4; margin-bottom: 4px; }
.tp-line.short { width: 50%; }
.dark-prev .tp-line { background: #ccc; }

/* thinking trace — round 28: the dark progress card, same
   language as the build panel, in BOTH themes. (This used to
   follow --bg-card, which is the light box in light mode.) */
.trace {
  background: #12141a;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: .82rem;
  line-height: 1.35;
  color: #e8eaed;
}
.trace .step { margin: 4px 0; }
.trace .ok { color: var(--success); }
.trace .err { color: var(--danger); }
.pages-badge { display: inline-block; margin: 2px 0 8px; padding: 3px 10px; border-radius: 999px; background: rgba(56, 189, 248, .14); color: var(--accent, #38bdf8); font-size: 12px; font-weight: 600; }
.sources { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; }
.sources .sources-title { font-size: 12px; font-weight: 700; opacity: .75; margin-bottom: 4px; }
.sources a { display: block; font-size: 12.5px; color: var(--accent, #38bdf8); text-decoration: none; padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources a:hover { text-decoration: underline; }
.message .text a { color: var(--accent, #38bdf8); }
.terminal { margin-top: 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .25); }
.terminal summary { cursor: pointer; font-size: 12.5px; font-weight: 600; }
.term-cmd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--accent, #38bdf8); margin-top: 8px; word-break: break-all; }
.term-out { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; margin: 4px 0 2px; max-height: 260px; overflow: auto; }
.trace .run { color: var(--accent); }

/* project zip btn */
.project-zip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  font-size: .85rem;
  cursor: pointer;
}
.project-zip-btn:hover { border-color: var(--accent); }

.disclaimer {
  text-align: center;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: .85;
}

.projects-section {
  padding: 4px 10px 8px;
}
.projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 4px;
}
.proj-add {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.proj-add:hover { border-color: var(--accent); color: var(--accent); }
.project-item {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.project-item .proj-name {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
}
.project-item .proj-empty {
  font-size: .75rem;
  padding: 4px 0 4px 18px;
  opacity: .7;
}
.project-item .proj-chat {
  padding: 4px 0 4px 18px;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-item .proj-chat:hover { color: var(--accent); }

.message .actions {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity .15s;
  flex-wrap: wrap;
}
.message:hover .actions { opacity: 1; }
.act-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 30px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.act-btn:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--bg-card);
}
.act-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.message .text img {
  max-width: 220px;
  border-radius: 10px;
  margin: 8px 0;
  display: block;
  border: 1px solid var(--border);
}


/* ===== Chat alignment: user RIGHT, AI LEFT ===== */
.messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px 40px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
.message {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  max-width: 75%;
  width: fit-content;
  animation: fadeIn .25s ease;
}
.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
  margin-left: auto;
}
.message.assistant {
  align-self: flex-start;
  margin-right: auto;
}
.message .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-card);
}
.message .avatar img { width: 100%; height: 100%; object-fit: cover; }
.message.user .avatar {
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 600;
  color: #fff;
}
.message .content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.message.user .content { align-items: flex-end; }
.message.assistant .content { align-items: flex-start; }
.message .role {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.message.user .role { text-align: right; }
.message .text {
  line-height: 1.65;
  font-size: .95rem;
  white-space: pre-wrap;
  word-break: normal; overflow-wrap: anywhere;
}
/* User bubble */
.message.user .text {
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  max-width: 100%;
}
[data-theme="light"] .message.user .text {
  background: #e3f2fd;
  color: #0d47a1;
}
/* AI: plain text, no bubble */
.message.assistant .text {
  background: transparent;
  padding: 0;
  color: var(--text);
}
.message .actions {
  display: flex;
  gap: 2px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity .15s;
  flex-wrap: wrap;
}
.message:hover .actions { opacity: 1; }
.message.user .actions { justify-content: flex-end; }
.message.assistant .actions { justify-content: flex-start; }

/* Project modal */
#projectModal .modal-card { max-width: 400px; }
.project-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.btn.ghost:hover { color: var(--text); border-color: var(--text-muted); }
.project-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .95rem;
  font-family: var(--font);
  outline: none;
  margin-top: 8px;
}
.project-input:focus { border-color: var(--accent); }
.project-item .proj-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}
.project-item .proj-more {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  opacity: 0;
  font-size: 1rem;
}
.project-item:hover .proj-more { opacity: 1; }
.project-item .proj-chat {
  padding-left: 22px;
  border-left: 2px solid var(--border);
  margin-left: 8px;
}


/* --- ZoomAI UI polish --- */
.disclaimer { user-select: none; -webkit-user-select: none; }

.imagine-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 8px 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: .9rem;
  font-family: var(--font);
}
.imagine-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Empty chat: center input */
.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}
.chat-container.empty-chat {
  justify-content: center;
  align-items: center;
  padding-bottom: 8vh;
}
.chat-container.empty-chat .welcome {
  flex: none;
  height: auto;
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chat-container.empty-chat .messages {
  display: none;
}
.chat-container.empty-chat .input-area {
  width: 100%;
  max-width: 820px;
  border-top: none;
  background: transparent;
  padding-left: 16px;
  padding-right: 16px;
}

/* Edit message box */
.edit-box {
  width: 100%;
  max-width: 640px;
  background: #f4f4f4;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme=""] .edit-box, :root:not([data-theme="light"]) .edit-box {
  background: #1a1a24;
  border-color: var(--border);
}
.edit-textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-family: var(--font);
  font-size: .95rem;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
}
.edit-textarea:focus { border-color: var(--accent); }
.edit-files { display: flex; flex-wrap: wrap; gap: 6px; }
.edit-files .chip-x {
  background: none; border: none; cursor: pointer; color: var(--text-muted); margin-left: 4px;
}
.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ChatGPT-like message polish */
.message { border: none; background: transparent; padding: 8px 0; }
.message .avatar, .message .role { display: none !important; }
.message.user .text {
  background: #e3f2fd;
  color: #0d47a1;
  border-radius: 18px;
  max-width: 75%;
  padding: 10px 14px;
}
:root:not([data-theme="light"]) .message.user .text,
[data-theme="dark"] .message.user .text {
  background: #1a2a3a;
  color: #e8eef8;
}
.message.assistant .text {
  background: transparent;
  max-width: 85%;
  padding: 0;
  color: var(--text);
}
.message .actions {
  opacity: 0.35;
}
.message:hover .actions { opacity: 1; }
.message .act-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.message .act-btn:hover { color: var(--text); background: rgba(127,127,127,.12); }
.message .act-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.chat-timestamp {
  text-align: center;
  color: var(--text-muted);
  font-size: .75rem;
  margin: 12px 0 8px;
  opacity: 0.7;
}

.temp-pill {
  display: none;
  font-size: .7rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,210,255,.15);
  color: var(--accent);
  border: 1px solid rgba(0,210,255,.3);
  margin-left: 8px;
}
.temp-pill.on { display: inline-flex; }

.proj-row-actions { display:flex; align-items:center; gap:2px; }
.proj-add-chat {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.proj-add-chat:hover { color: var(--accent); }
.proj-chat {
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 22px; border-left: 2px solid var(--border); margin-left: 8px;
  font-size: .82rem; color: var(--text-muted); cursor: pointer;
}
.proj-chat:hover { color: var(--accent); }
.proj-chat-more {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  opacity: 0; padding: 2px 4px;
}
.proj-chat:hover .proj-chat-more { opacity: 1; }

.send-btn .icon-stop { display: none; }
.send-btn.generating {
  background: #ef4444 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  filter: none !important;
}
.send-btn.generating .icon-send { display: none; }
.send-btn.generating .icon-stop { display: block; }
.message .text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}
.message.user .text {
  display: inline-block;
  text-align: left;
}


/* === bubble + code width fixes (override) === */
.message {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.message.user {
  justify-content: flex-end;
}
.message.assistant {
  justify-content: flex-start;
}
.message .content {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 85%;
  min-width: 0;
}
.message.user .content {
  align-items: flex-end;
  max-width: 75%;
}
.message.assistant .content {
  align-items: flex-start;
  width: 100%;
  max-width: 85%;
}
.message .text {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.message.user .text {
  display: inline-block;
  width: auto;
  min-width: fit-content;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: left;
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.45;
}
.message.assistant .text {
  width: 100%;
  max-width: 100%;
  background: transparent;
  padding: 0;
}
.code-wrap {
  width: 100%;
  max-width: 100%;
  margin: 10px 0;
  box-sizing: border-box;
}
.code-wrap pre {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  box-sizing: border-box;
}
.code-wrap pre code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: block;
  width: auto;
  min-width: 0;
}

.chat-item .more, .proj-more, .proj-chat-more, .proj-add-chat {
  touch-action: manipulation;
  min-width: 32px;
  min-height: 32px;
}
.ctx-menu {
  z-index: 9999;
}
.settings-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.settings-actions .btn { width: 100%; justify-content: center; }

/* user messages hard-right */
.message.user {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-left: 15%;
}
.message.user .content {
  margin-left: auto;
  max-width: 75%;
}
.message.user .text {
  margin-left: auto;
}
.imagine-list {
  padding: 0 8px 8px;
}
.imagine-item {
  font-size: .82rem;
  opacity: 0.95;
}
.chat-item, .imagine-item, .proj-chat, .proj-add-chat, .more {
  touch-action: manipulation;
}
.chat-item .title, .imagine-item .title {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Settings dashboard */
#settingsModal .settings-shell {
  display: flex;
  flex-direction: row;
  width: 900px;
  height: 600px;
  max-width: 95vw;
  max-height: 90vh;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.settings-nav {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  padding: 16px 10px;
  overflow-y: auto;
}
.settings-nav-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 10px 12px 6px;
}
.settings-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  font-family: var(--font);
}
.settings-nav-item:hover { background: rgba(127,127,127,.12); }
.settings-nav-item.active { background: rgba(0,210,255,.12); color: var(--accent); }
.settings-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.settings-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.settings-pane.hidden { display: none; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.settings-profile { display: flex; align-items: center; gap: 12px; }
.settings-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.settings-name { font-weight: 600; }
.settings-email, .settings-muted { color: var(--text-muted); font-size: .85rem; }
.btn-sm { padding: 6px 12px; font-size: .8rem; }
@media (max-width: 720px) {
  #settingsModal .settings-shell { flex-direction: column; height: auto; max-height: 92vh; }
  .settings-nav { width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-label { width: 100%; }
}


/* Round 16: build panel */
.build-panel { margin: 14px auto; max-width: 760px; border: 1px solid var(--border, #333); border-radius: 12px; padding: 12px 14px; background: var(--panel, rgba(127,127,127,.07)); }
.build-panel-title { font-weight: 600; margin-bottom: 4px; }
.build-panel-status { color: var(--text-muted, #999); font-size: .9rem; margin-bottom: 10px; }
.build-panel-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.build-panel-btns .btn { cursor: pointer; }


/* ---- round 17: file cards, sources sheet, suggestions, build card ---- */
.file-card { display:flex; align-items:center; gap:12px; margin-top:10px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); cursor:pointer; max-width:420px; }
.file-card:active { border-color:var(--accent); }
.file-card-icon { font-size:1.35rem; line-height:1; }
.file-card-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.file-card-name { font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-card-sub { color:var(--text-muted); font-size:.8rem; }
.file-card-state { font-size:1.1rem; color:var(--text-muted); min-width:1.2em; text-align:center; }
.file-card-state.spin { display:inline-block; animation:fcspin 0.9s linear infinite; color:var(--accent); }
@keyframes fcspin { to { transform:rotate(360deg); } }
.cite-link { background:none; border:none; padding:0 1px; color:var(--accent); font:inherit; cursor:pointer; }
.sources-row { margin-top:10px; background:var(--bg-card); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:7px 14px; font-size:.85rem; cursor:pointer; }
.sheet-scrim { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:900; }
.sheet { position:fixed; left:0; right:0; bottom:0; max-height:78vh; background:var(--bg-elevated); border-radius:18px 18px 0 0; z-index:901; display:flex; flex-direction:column; animation:sheetup .22s ease; }
.sheet.hidden { display:none; }
.sheet-scrim.hidden { display:none; }
@keyframes sheetup { from { transform:translateY(24px); opacity:.4; } to { transform:none; opacity:1; } }
.sheet-handle { width:44px; height:4px; border-radius:2px; background:var(--border); margin:10px auto 2px; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; padding:8px 18px 10px; }
.sheet-head h3 { font-size:1.05rem; }
.sheet-list { overflow-y:auto; padding:0 10px 18px; }
.src-row { display:flex; gap:12px; padding:12px 10px; border-radius:var(--radius-sm); text-decoration:none; color:var(--text); }
.src-row:active, .src-row.focus { background:var(--bg-card); }
.src-ic { position:relative; width:26px; height:26px; flex:none; border-radius:50%; background:var(--bg-card); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.src-fav { position:absolute; inset:0; width:100%; height:100%; }
.src-letter { font-size:.8rem; color:var(--text-muted); font-weight:600; }
.src-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.src-title { font-weight:600; font-size:.95rem; line-height:1.3; }
.src-snippet { color:var(--text-muted); font-size:.85rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.src-domain { color:var(--text-muted); font-size:.8rem; }
.sugg-row { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:12px; }
.sugg-chip { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:999px; padding:8px 14px; font-size:.88rem; cursor:pointer; text-align:left; }
.sugg-chip:active { border-color:var(--accent); color:var(--accent); }
.build-panel { margin:14px auto; max-width:760px; border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:transparent; }
.build-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.build-title { font-weight:600; }
.build-elapsed, .build-counts { color:var(--text-muted); font-size:.82rem; }
.build-state { color:var(--text-muted); font-size:.9rem; margin-top:3px; }
.build-rows { margin-top:8px; display:flex; flex-direction:column; gap:5px; max-height:220px; overflow-y:auto; padding-right:2px; }
/* round 30: the finished build panel as a compact bar */
.build-panel.compact { border:1px solid var(--border); border-radius:12px; background:var(--panel, rgba(127,127,127,.07)); padding:10px 14px; }
.build-panel.compact.is-done { border-color:rgba(63,185,80,.5); background:rgba(63,185,80,.08); }
.build-panel.compact.is-bad { border-color:rgba(248,81,73,.45); background:rgba(248,81,73,.06); }
.build-compact { display:flex; align-items:center; gap:8px; font-size:.88rem; }
.build-compact-ic { flex-shrink:0; }
.build-compact-ic.ok { color:#3fb950; }
.build-compact-ic.bad { color:#f85149; }
.build-panel .build-linkbtn.primary { color:#58a6ff; font-weight:650; }
.build-actions .build-stop { color:#58a6ff; }
.build-row { display:flex; gap:8px; color:var(--text-muted); font-size:.87rem; }
.build-row-icon { flex:none; }
.build-actions { margin-top:10px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; } /* Round 64: Continue and Details were glued together (Baby's screenshot: 'ContinueDetails') */
.build-linkbtn { background:none; border:none; color:var(--accent); font-size:.92rem; font-weight:600; cursor:pointer; padding:4px 0; }

/* ---- Round 20: quiet Grok-style build progress + modern file cards ---- */
.build-panel { border:none; border-top:1px solid var(--border); border-radius:0; background:transparent; padding:12px 2px 6px; margin:10px auto; }
.build-chev { color:var(--text-muted); font-size:1.05rem; margin-left:auto; transform:rotate(90deg); transition:transform .15s ease; }
.build-panel.collapsed .build-chev { transform:rotate(0deg); }
/* Round 25: the done-collapse is retired (the event list scrolls instead). */
.file-card { border-radius:16px; padding:12px 14px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.file-card-icon { width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(127,127,127,.14); font-size:1.15rem; }
.file-card-state { width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(127,127,127,.12); font-size:1rem; }

/* Round 21: wide tables scroll inside the bubble instead of
   crushing their columns into each other on a phone. */
.message .text .tbl-scroll { overflow-x:auto; max-width:100%; margin:10px 0; -webkit-overflow-scrolling:touch; }
.message .text .tbl-scroll table { border-collapse:collapse; min-width:340px; font-size:.88rem; }
.message .text .tbl-scroll th, .message .text .tbl-scroll td { border:1px solid var(--border); padding:6px 8px; text-align:left; vertical-align:top; }
.message .text .tbl-scroll th { background:var(--bg-card); }

/* Round 22 — file preview sheet */
/* Round 25: the file viewer is a full-screen page, like the
   reference viewer Baby sent — content fills the screen and is
   directly selectable; actions live in the ⋯ menu. */
#fileSheet { inset:0; max-height:none; border-radius:0; }
.file-viewer-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.file-viewer-head h3 { flex:1; font-size:1rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-viewer-icon { font-size:1.1rem; }
.file-menu { position:absolute; top:54px; right:12px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.45); display:flex; flex-direction:column; min-width:180px; z-index:902; padding:6px; }
.file-menu.hidden { display:none; }
.file-menu-item { background:none; border:none; color:var(--text); text-align:left; padding:10px 12px; font-size:.95rem; border-radius:8px; cursor:pointer; }
.file-menu-item:active { background:var(--bg-card); }
.file-sheet-body { flex:1; overflow-y:auto; padding:14px 16px 20px; }
.file-preview-pre { white-space:pre-wrap; word-break:break-word; font-family:'JetBrains Mono',monospace; font-size:.8rem; line-height:1.55; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px; user-select:text; -webkit-user-select:text; }
.file-preview-frame { width:100%; height:100%; min-height:62vh; border:1px solid var(--border); border-radius:12px; background:#fff; }
.file-preview-img { max-width:100%; border-radius:12px; }
.file-preview-note { color:var(--text-muted); font-size:.85rem; padding:10px 2px; }
.file-preview-list { display:flex; flex-direction:column; }
.file-preview-row { display:flex; justify-content:space-between; gap:12px; padding:8px 2px; border-bottom:1px solid var(--border); font-size:.88rem; }
#fileSheet.hidden, #fileScrim.hidden { display:none; }

/* Round 32: the finished build's collapsed record lives at the
   top of its completion reply (Grok's "Worked for Xs ›"). */
.build-done-head {
  background: none; border: none; padding: 2px 0 8px;
  color: var(--text-muted, #9aa0a6); font-size: .84rem;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.build-done-head .build-done-chev { display: inline-block; transition: transform .15s ease; font-size: 1rem; line-height: 1; }
.build-done-head.open .build-done-chev { transform: rotate(90deg); }
.build-done-log {
  margin: 0 0 10px; padding: 10px 12px;
  background: #12141a; border: 1px solid #2a2f3a; border-radius: 12px;
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.build-done-log.hidden { display: none; }
.steps-head {
  background: none; border: none; padding: 2px 0 8px;
  color: var(--text-muted, #9aa0a6); font-size: .84rem;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.steps-head.open .build-done-chev { transform: rotate(90deg); }
.steps-log {
  margin: 0 0 10px; padding: 10px 12px;
  background: #12141a; border: 1px solid #2a2f3a; border-radius: 12px;
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.steps-log.hidden { display: none; }
.build-done-log .build-row { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: #e8eaed; line-height: 1.35; }

.preview-item .pstate { opacity:.75; font-size:.72rem; white-space:nowrap; }
.preview-item .pstate.err { color:#e5484d; opacity:1; }

/* Round 53: tappable ZIP rows in the file viewer */
.file-preview-row.zip-entry-row, .file-preview-row.zip-back-row { display: flex; width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(127,127,127,.14); color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 10px 4px; justify-content: space-between; align-items: center; gap: 10px; }
.file-preview-row.zip-back-row { color: #4f9cf9; font-weight: 600; justify-content: flex-start; }

/* Round 55: attach menu (Camera / Photos / Videos / Files),
   opened by the + button, modelled on the Muse app. */
.input-box { position: relative; }
.attach-menu55 { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 300; min-width: 196px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.attach-menu55.hidden { display: none; }
.attach-menu55 button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 11px 12px; border-radius: 9px; font-size: .95rem; cursor: pointer; }
.attach-menu55 button:hover { background: var(--bg-card); }
.attach-menu55 .am-ic { width: 22px; text-align: center; font-size: 1.05rem; }

/* Round 58: version pager on edited user messages */
.ver-pager58 { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; }
.ver-pager58 .ver-num { font-size: .78rem; color: var(--text-muted); padding: 0 1px; white-space: nowrap; }

/* Round 60: a sent image chip is tappable (opens the lightbox). */
.file-chip img { cursor: pointer; }

/* Round 62: the in-app Download-complete bar (ChatGPT-style). */
#dlBar62 { position: fixed; left: 12px; right: 12px; bottom: 96px; z-index: 1200; display: flex; align-items: center; gap: 10px; background: #17181c; color: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 14px; }
#dlBar62.hidden { display: none; }
#dlBar62 .dl-bar-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dlBar62 .dl-bar-open { background: none; border: none; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; padding: 4px 6px; }
#dlBar62 .dl-bar-x { background: none; border: none; color: #bbb; font-size: 15px; cursor: pointer; padding: 4px 6px; }