/* AIService workspace shell styles */

html, body { height: 100%; overflow: hidden; }

.workspace { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

/* Left sidebar */
.w-sidebar { width: 272px; flex-shrink: 0; background: var(--bg-secondary); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; transition: width var(--transition-med), transform var(--transition-med); z-index: 50; }
.w-sidebar.collapsed { width: 72px; }
.w-sidebar.collapsed .label, .w-sidebar.collapsed .sidebar-search, .w-sidebar.collapsed .sidebar-section-title, .w-sidebar.collapsed .history-list { display: none; }
.w-sidebar.collapsed .brand-name { display: none; }
.w-sidebar.collapsed .sidebar-nav-item { justify-content: center; }
.w-sidebar.collapsed .new-chat-btn span.label { display: none; }

.w-sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.w-sidebar-top .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; }
.collapse-btn { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
.collapse-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }

.new-chat-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 14px 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 13.5px; padding: 10px 14px; border-radius: var(--radius-md); transition: background var(--transition-fast); position: relative; overflow: hidden; }
.new-chat-btn:hover { background: var(--accent-hover); }

.sidebar-search { margin: 0 14px 10px; position: relative; }
.sidebar-search input { width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px 8px 32px; font-size: 12.5px; }
.sidebar-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); }
.sidebar-nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sidebar-nav-item.active { background: var(--accent-soft); color: var(--accent); }
.sidebar-nav-item svg { flex-shrink: 0; }
.sidebar-divider { height: 1px; background: var(--border-subtle); margin: 8px 4px; }
.sidebar-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 10px 10px 4px; }

.history-list { display: flex; flex-direction: column; gap: 1px; }
.history-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.8px; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast); position: relative; }
.history-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.history-item.active { background: var(--bg-elevated); color: var(--text-primary); }
.history-item .title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item .pin-btn, .history-item .del-btn { opacity: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border-radius: 5px; flex-shrink: 0; }
.history-item:hover .pin-btn, .history-item:hover .del-btn { opacity: 1; }
.history-item .pin-btn:hover, .history-item .del-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.history-empty { padding: 14px 10px; font-size: 12px; color: var(--text-muted); }

.w-sidebar-bottom { padding: 10px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 2px; }

.sidebar-overlay-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 45; }

/* Main column */
.w-main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.chat-header { height: 58px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--border-subtle); }
.mobile-burger { display: none; width: 34px; height: 34px; border-radius: 8px; align-items: center; justify-content: center; flex-shrink: 0; }
.conv-title { font-weight: 600; font-size: 14px; background: transparent; border: none; outline: none; padding: 6px 8px; border-radius: 6px; max-width: 260px; }
.conv-title:hover, .conv-title:focus { background: var(--bg-elevated); }
.header-selects { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.select-chip { display: flex; align-items: center; gap: 6px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 6px 10px; font-size: 12px; font-weight: 500; }
.select-chip select { background: transparent; border: none; font-size: 12px; font-weight: 500; outline: none; }
.token-chip { font-size: 11.5px; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: 5px 10px; border-radius: 20px; white-space: nowrap; }
.header-spacer { flex: 1; }
.panel-toggle-btn { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.panel-toggle-btn:hover, .panel-toggle-btn.active { background: var(--bg-elevated); color: var(--text-primary); }

.chat-body { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.chat-scroll { flex: 1; overflow-y: auto; }
.chat-inner { max-width: 760px; margin: 0 auto; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 22px; }

.msg-row { display: flex; gap: 12px; align-items: flex-start; group: msg; }
.msg-row.user { flex-direction: row-reverse; }
.msg-avatar { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.msg-avatar.assistant { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.msg-avatar.user { background: var(--bg-tertiary); color: var(--text-primary); }
.msg-avatar.error { background: var(--danger); }
.msg-col { display: flex; flex-direction: column; gap: 6px; max-width: 78%; }
.msg-row.user .msg-col { align-items: flex-end; }
.msg-bubble { padding: 12px 15px; border-radius: var(--radius-md); font-size: 14.2px; line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.msg-bubble-error { background: rgba(240,87,92,0.10); border: 1px solid var(--danger); color: var(--danger); }
.msg-row.assistant .msg-bubble { background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
.msg-row.user .msg-bubble { background: var(--accent-soft); }
.msg-bubble p { margin: 0 0 10px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul, .msg-bubble ol { margin: 0 0 10px; padding-left: 20px; }
.msg-bubble a { color: var(--accent); text-decoration: underline; }
.msg-bubble code.inline-code { background: var(--bg-tertiary); padding: 2px 6px; border-radius: 5px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code-block { background: #0d0e12; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin: 10px 0; overflow: hidden; }
.code-block-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: rgba(255,255,255,0.04); font-size: 11.5px; color: var(--text-muted); }
.code-copy-btn { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); padding: 3px 8px; border-radius: 5px; }
.code-copy-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.code-block pre { margin: 0; padding: 13px 15px; overflow-x: auto; font-size: 12.6px; line-height: 1.55; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e3e6ea; }

.msg-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--transition-fast); }
.msg-row:hover .msg-actions { opacity: 1; }
.msg-action-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-muted); }
.msg-action-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.msg-edit-area { width: 100%; background: var(--bg-tertiary); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; resize: vertical; min-height: 60px; }
.msg-edit-actions { display: flex; gap: 8px; margin-top: 6px; justify-content: flex-end; }

.typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: bounce 1.1s 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 bounce { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.stream-cursor { display: inline-block; width: 2px; height: 14px; background: var(--accent); margin-left: 2px; animation: blink 0.9s infinite; vertical-align: middle; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.scroll-bottom-btn { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: var(--bg-secondary); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-elevated); border-radius: 20px; padding: 7px 14px; font-size: 12px; display: none; align-items: center; gap: 6px; z-index: 5; }
.scroll-bottom-btn.show { display: flex; }

.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
.chat-empty-inner { text-align: center; max-width: 420px; padding: 0 20px; }
.chat-empty-inner .empty-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.chat-empty-inner h3 { font-size: 18px; margin-bottom: 8px; }
.chat-empty-inner p { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 20px; }
.suggestion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggestion-chip { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; text-align: left; color: var(--text-secondary); transition: border-color var(--transition-fast), color var(--transition-fast); }
.suggestion-chip:hover { border-color: var(--accent); color: var(--text-primary); }

/* Composer */
.composer-wrap { flex-shrink: 0; padding: 12px 20px 18px; position: relative; }
.dropzone-overlay { position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: var(--radius-lg); background: var(--accent-soft); display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--accent); z-index: 20; }
.dropzone-overlay.show { display: flex; }
.composer-inner { max-width: 760px; margin: 0 auto; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 10px 10px 8px; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 8px; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: 4px 6px 4px 10px; border-radius: 20px; }
.attach-chip .remove-chip { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted); }
.attach-chip .remove-chip:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.attach-chip img.thumb { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.composer-row { display: flex; align-items: flex-end; gap: 8px; padding: 0 4px; }
.composer-row textarea { flex: 1; resize: none; background: transparent; border: none; outline: none; font-size: 14px; max-height: 180px; min-height: 24px; line-height: 1.5; padding: 8px 4px; }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 0; }
.composer-tools-left { display: flex; align-items: center; gap: 2px; }
.tool-btn { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); position: relative; }
.tool-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.agent-mode-btn { width: auto; gap: 5px; padding: 0 10px; border: 1px solid transparent; }
.agent-mode-btn .agent-mode-label { font-size: 12px; font-weight: 500; }
.agent-mode-btn.active { background: var(--accent); color: #fff; }
.agent-mode-btn.active:hover { background: var(--accent); color: #fff; }
.msg-meta .agent-mode-tag { color: var(--accent); font-weight: 500; }
.btn-send { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition-fast), opacity var(--transition-fast); position: relative; overflow: hidden; }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-send.stop { background: var(--danger); }
.composer-hint { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* Ripple */
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); transform: scale(0); animation: ripple-anim 500ms ease-out; pointer-events: none; }
[data-theme='light'] .ripple { background: rgba(0,0,0,0.15); }
@keyframes ripple-anim { to { transform: scale(2.6); opacity: 0; } }

/* Right panel */
.w-rightpanel { width: 280px; flex-shrink: 0; background: var(--bg-secondary); border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; overflow-y: auto; transition: width var(--transition-med), transform var(--transition-med); }
.w-rightpanel.collapsed { width: 0; border-left: none; overflow: hidden; }
.rp-section { padding: 16px 16px; border-bottom: 1px solid var(--border-subtle); }
.rp-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.rp-stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.8px; color: var(--text-secondary); margin-bottom: 8px; }
.rp-stat-row strong { color: var(--text-primary); font-weight: 600; }
.rp-empty { font-size: 12px; color: var(--text-muted); }
.rp-file-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 0; color: var(--text-secondary); }
.rp-note { background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12.3px; margin-bottom: 8px; position: relative; }
.rp-note .del-note { position: absolute; top: 6px; right: 6px; opacity: 0; }
.rp-note:hover .del-note { opacity: 1; }
.token-bar { height: 6px; border-radius: 4px; background: var(--bg-tertiary); overflow: hidden; margin-top: 6px; }
.token-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; transition: width 0.4s ease; }
.provider-status-row { display: flex; align-items: center; gap: 8px; font-size: 12.8px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.status-dot.unavailable { background: var(--danger); }
.status-dot.loading { background: var(--text-secondary); animation: statusDotPulse 1.2s ease-in-out infinite; }
@keyframes statusDotPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.provider-option-unavailable { color: var(--text-secondary); }
.ollama-install-hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.ollama-install-hint a { color: var(--accent, #7c6bf0); }

/* AI Handoff panel */
.handoff-preview { max-height: 130px; overflow-y: auto; white-space: pre-wrap; font-size: 11.3px; line-height: 1.5; color: var(--text-secondary); }
.handoff-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rp-btn { background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 5px 9px; font-size: 11.5px; cursor: pointer; transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s); }
.rp-btn:hover { background: var(--bg-hover, var(--border-subtle)); color: var(--text-primary); }
.handoff-status { font-size: 11.5px; color: var(--success); margin-top: 6px; min-height: 14px; }

/* Generic app pages (workspace/files/prompts/agents/settings/profile) */
.app-page { flex: 1; overflow-y: auto; }
.app-page-inner { max-width: 880px; margin: 0 auto; padding: 30px 26px 60px; }
.app-page-head { margin-bottom: 26px; }
.app-page-head h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.app-page-head p { color: var(--text-secondary); font-size: 13.5px; }
.page-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.note-card, .prompt-card, .file-row, .agent-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
.agent-card { display: flex; flex-direction: column; gap: 8px; }
.agent-card .agent-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.agent-card h3 { font-size: 14.5px; }
.agent-card p { font-size: 12.8px; color: var(--text-secondary); }
.tag-soon { align-self: flex-start; font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: 2px 8px; border-radius: 20px; }
.file-row { display: flex; align-items: center; gap: 12px; }
.file-row .file-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.file-row .file-meta { flex: 1; min-width: 0; }
.file-row .file-meta .fname { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row .file-meta .fsub { font-size: 11.5px; color: var(--text-muted); }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.form-hint { font-size: 11.8px; color: var(--text-muted); margin-top: 6px; }
.settings-block { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.settings-block h3 { font-size: 14.5px; margin-bottom: 4px; }
.settings-block > p { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 16px; }
.theme-options { display: flex; gap: 10px; }
.theme-opt { flex: 1; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px; text-align: center; font-size: 12.5px; cursor: pointer; }
.theme-opt.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.avatar-circle { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.local-only-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: 4px 10px; border-radius: 20px; margin-bottom: 16px; }

/* Toast */
.toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 300; }
.toast { background: var(--bg-secondary); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-elevated); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 12.8px; opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Skeleton loading rows for chat */
.skeleton-row { display: flex; gap: 12px; padding: 4px 0; }
.skeleton-row .sk-avatar { width: 30px; height: 30px; border-radius: 9px; }
.skeleton-row .sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-row .sk-line { height: 12px; border-radius: 4px; }

/* Responsive */
@media (max-width: 1080px) {
  .w-rightpanel { position: fixed; right: 0; top: 0; bottom: 0; height: 100vh; transform: translateX(100%); box-shadow: var(--shadow-elevated); z-index: 60; }
  .w-rightpanel.open { transform: translateX(0); width: 300px; }
  .w-rightpanel.collapsed { width: 300px; }
}
@media (max-width: 860px) {
  .w-sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; transform: translateX(-100%); box-shadow: var(--shadow-elevated); }
  .w-sidebar.mobile-open { transform: translateX(0); width: 280px; }
  .sidebar-overlay-bg.show { display: block; }
  .mobile-burger { display: flex; }
  .header-selects .select-chip:nth-child(2) { display: none; }
  .page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .msg-col { max-width: 88%; }
  .conv-title { max-width: 120px; }
  .token-chip { display: none; }
  .composer-wrap { padding: 10px 10px 14px; }
  .chat-inner { padding: 16px 12px; }
}
/* Touch-device fix (2026-08-21 mobile audit): .msg-actions and the
   history item pin/delete buttons were opacity:0, revealed only via
   :hover -- unreachable on a real touch device, which has no
   persistent hover state. (hover: none) targets touch capability
   directly (correct signal, not a width breakpoint -- a touch tablet
   can be wide, a resized desktop window can be narrow with a mouse).
   Also grows the tap targets themselves to a real touch-friendly size
   without changing anything for pointer/hover-capable devices. */
@media (hover: none) {
  .msg-actions { opacity: 1; }
  .msg-action-btn { width: 34px; height: 34px; }
  .history-item .pin-btn, .history-item .del-btn { opacity: 1; width: 28px; height: 28px; }
  .btn-send { width: 42px; height: 42px; }
  .tool-btn { width: 38px; height: 38px; }
  .rp-note .del-note { opacity: 1; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .chat-header { height: 48px; }
  .composer-wrap { padding: 8px 14px 10px; }
}


/* ---------- Auth pages (login/register/forgot/profile) ----------
   Polish pass (2026-08-21): production-facing first-impression pages,
   not the dev-era version. Concrete changes from a Trader Master-style
   professional-SaaS benchmark (structure/spacing/hierarchy studied,
   nothing copied -- AIService keeps its own dark palette/branding):
   - persistent <label> above each field (previously placeholder-only,
     which vanishes once typing starts -- fails "clear labels")
   - taller inputs/CTA (44px) and a real focus ring, not just a border
     color flip -- matches the rest of the app's --accent-soft language
   - real per-field inline validation instead of one top banner
   - removed the disabled "Google/GitHub — Coming Soon" buttons and the
     "Connects to the real AIService Gateway" dev badge -- both read as
     unfinished-prototype signals on a page meant to build trust */
/* Ambient brand glow (2026-08-21 visual pass): the shell was flat
   --bg-primary with nothing else -- every other brand surface in this
   codebase (marketing hero's .hero-bg-glow, avatar/new-chat-btn
   gradients) uses a soft accent->accent-2 treatment; the auth pages,
   a new user's first real impression, had none of it and read flat/
   templatey next to the rest of the product. One fixed, very soft,
   blurred radial gradient -- not decorative clutter, doesn't move,
   doesn't repeat per-card, sits behind everything at low opacity. */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg-primary); position: relative; overflow: hidden; }
.auth-shell::before { content: ''; position: fixed; top: -20%; left: 50%; width: 900px; height: 900px; transform: translateX(-50%); background: radial-gradient(circle, var(--accent-soft), transparent 65%); filter: blur(20px); pointer-events: none; z-index: 0; }
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 408px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow-elevated); }
.auth-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; margin-bottom: 28px; justify-content: center; }
.auth-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 7px; text-align: center; }
.auth-card > p.auth-sub { text-align: center; color: var(--text-secondary); font-size: 13.5px; margin-bottom: 28px; }
.auth-field { margin-bottom: 18px; }
.auth-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.auth-input { width: 100%; height: 44px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 0 14px; font-size: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.auth-input:hover:not(:focus) { border-color: var(--text-muted); }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-input.invalid { border-color: var(--danger); }
.auth-input.invalid:focus { box-shadow: 0 0 0 3px rgba(240,87,92,0.16); }
.auth-error-text { font-size: 11.8px; color: var(--danger); margin-top: 6px; min-height: 0; display: none; }
.auth-error-text.show { display: block; }
.auth-password-field { position: relative; }
.auth-password-field .auth-input { padding-right: 44px; }
.auth-password-toggle { position: absolute; top: 0; right: 0; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; }
.auth-password-toggle:hover { color: var(--text-primary); }
.auth-password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.auth-field-hint { font-size: 11.8px; color: var(--text-muted); margin-top: 6px; }
.auth-btn { width: 100%; height: 44px; margin-top: 6px; font-size: 14.5px; }
.auth-foot { text-align: center; font-size: 13px; color: var(--text-secondary); margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.auth-foot a { color: var(--accent); font-weight: 600; }
.auth-msg { font-size: 12.8px; padding: 10px 13px; border-radius: var(--radius-sm); margin-bottom: 18px; display: none; }
.auth-msg.error { background: rgba(240,87,92,0.12); color: var(--danger); }
.auth-msg.success { background: rgba(79,209,165,0.12); color: var(--success); }
.auth-msg.show { display: block; }
/* Still used by forgot-password.html/accept-invitation.html/profile.html
   -- not removed from login.html/register.html's stylesheet dependency,
   only from those two pages' own markup (see their own commit notes). */
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; font-size: 11.5px; color: var(--text-muted); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.auth-social { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.auth-social-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px; font-size: 13px; font-weight: 500; }
.auth-social-btn:hover { background: var(--bg-tertiary); }
.auth-social-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.auth-social-btn:disabled:hover { background: var(--bg-elevated); }
.back-home-link { position: fixed; top: 22px; left: 24px; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; z-index: 5; }
.back-home-link:hover { color: var(--text-primary); }
@media (max-width: 460px) {
  .auth-card { padding: 28px 20px; border-radius: var(--radius-md); }
  .auth-shell { padding: 16px; }
}
.profile-shell { max-width: 620px; margin: 0 auto; padding: 40px 24px 60px; }
.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.profile-head .info h2 { font-size: 19px; margin-bottom: 4px; }
.profile-head .info p { font-size: 13px; color: var(--text-secondary); }
.top-bar-min { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); }


/* ---------- Settings Center (settings.html) ---------- */
.settings-shell { max-width: 980px; margin: 0 auto; padding: 28px 24px 80px; display: flex; gap: 32px; align-items: flex-start; }
.settings-nav { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; }
.settings-nav-btn { text-align: left; background: transparent; border: none; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; }
.settings-nav-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.settings-nav-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.settings-content { flex: 1; min-width: 0; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 28px 30px; }
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: settingsFadeIn 0.2s ease; }
@keyframes settingsFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.settings-panel h2 { font-size: 18px; margin-bottom: 22px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.settings-row:last-child { border-bottom: none; }
.settings-row-label { display: flex; flex-direction: column; gap: 3px; }
.settings-row-label strong { font-size: 13.5px; font-weight: 600; }
.settings-row-label span { font-size: 12px; color: var(--text-muted); }
.settings-row-control { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.settings-select { background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; color: var(--text-primary); min-width: 170px; }
.settings-note { font-size: 12.5px; color: var(--text-muted); background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 10px 12px; line-height: 1.5; }
.theme-options { background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 3px; gap: 0; }
.theme-option { background: transparent; border: none; padding: 7px 14px; font-size: 12.5px; color: var(--text-secondary); border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.theme-option.active { background: var(--accent); color: #fff; }
.accent-row { gap: 10px; }
.accent-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.accent-dot.active { border-color: var(--text-primary); }
.toggle-sw { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-sw input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); transition: 0.2s; border-radius: 22px; }
.toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; top: 2px; background: var(--text-muted); transition: 0.2s; border-radius: 50%; }
.toggle-sw input:checked + .toggle-slider { background: var(--accent-soft); border-color: var(--accent); }
.toggle-sw input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--accent); }
.shortcut-table { width: 100%; border-collapse: collapse; }
.shortcut-table td { padding: 10px 8px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.shortcut-table td:first-child { width: 220px; }
.shortcut-key { display: inline-block; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 5px; padding: 3px 7px; font-size: 11.5px; font-family: monospace; color: var(--text-primary); }
.settings-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-elevated); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-elevated); padding: 10px 18px; border-radius: var(--radius-md); font-size: 13px; opacity: 0; pointer-events: none; transition: 0.2s; z-index: 500; }
.settings-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 760px) { .settings-shell { flex-direction: column; padding: 20px 16px 60px; } .settings-nav { width: 100%; flex-direction: row; overflow-x: auto; position: static; } .settings-content { padding: 20px 18px; width: 100%; } .settings-row { flex-direction: column; align-items: flex-start; gap: 10px; } }
body[data-density="compact"] .msg-row { margin-bottom: 6px !important; }
body[data-density="compact"] .msg-bubble { padding: 8px 12px !important; }
.msg-bubble { font-size: var(--chat-font-size, 14.5px); }