:root {
  --bg: #0a0a0a;
  --bg-elev: #121212;
  --bg-elev-2: #171717;
  --bg-elev-3: #1f1f1f;
  --bg-soft: #0f0f0f;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text: #f2f2f2;
  --text-muted: #b6b6b6;
  --text-faint: #8d8d8d;
  --accent: #2977ff;
  --accent-2: #8eaefc;
  --green: #2dd28b;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --sidebar-w: 276px;
  --composer-max: 870px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea { font: inherit; }
button { border: 0; background: none; color: inherit; cursor: pointer; }
textarea, input { outline: none; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.sidebar {
  background: #0b0b0b;
  border-right: 1px solid var(--border);
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100vh;
}
.sidebar-top { display: grid; gap: 14px; }
.sidebar-header-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 0; }
.brand-simple { font-size: 20px; font-weight: 650; letter-spacing: -.03em; }
.sidebar-header-actions { display: flex; align-items: center; gap: 8px; }
.slim-icon { width: 34px; height: 34px; border-radius: 10px; color: var(--text-muted); background: transparent; }
.slim-icon:hover { background: rgba(255,255,255,.06); color: var(--text); }

.new-chat-btn {
  height: 40px;
  width: 100%;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--text);
  font-weight: 560;
}
.new-chat-btn:hover { background: rgba(255,255,255,.09); }
.plus-icon { font-size: 17px; color: var(--text-muted); }

.sidebar-menu, .history-list, .project-section, .sidebar-bottom { display: grid; gap: 4px; }
.side-link {
  display: flex; align-items: center; gap: 12px;
  min-height: 40px; border-radius: 12px; padding: 0 12px;
  color: var(--text-muted); text-align: left;
}
.side-link:hover, .side-link.active { background: rgba(255,255,255,.06); color: var(--text); }
.side-link-icon { width: 18px; text-align: center; color: var(--text-faint); }
.section-label {
  padding: 12px 10px 6px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-muted); font-size: 13px; font-weight: 560;
}
.chevron-inline { color: var(--text-faint); }
.projects-heading { margin-top: 4px; }
.project-card {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 0 10px; border-radius: 14px; text-align: left;
}
.project-card.active, .project-card:hover { background: rgba(255,255,255,.06); }
.project-logo, .avatar, .message-avatar { display: grid; place-items: center; }
.project-logo { width: 28px; height: 28px; border-radius: 10px; background: #8b5cf6; color: #fff; font-size: 11px; font-weight: 800; }
.project-meta { display: flex; flex-direction: column; gap: 2px; }
.project-meta strong { font-size: 14px; }
.project-meta small { color: var(--text-faint); font-size: 11px; }
.history-section { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.history-list { min-height: 0; overflow: auto; padding: 0 4px 8px; }
.history-empty { color: var(--text-faint); font-size: 13px; padding: 0 8px; }
.history-group { display: grid; gap: 2px; }
.history-date { color: var(--text-faint); font-size: 11px; padding: 6px 8px; }
.history-item {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 8px; border-radius: 11px; color: var(--text-muted); cursor: pointer;
}
.history-item:hover, .history-item.selected { background: rgba(255,255,255,.06); color: var(--text); }
.history-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.history-item small { color: var(--text-faint); font-size: 11px; }
.history-star, .history-delete { color: var(--text-faint); padding: 0; width: 18px; }
.history-star:hover, .history-delete:hover { color: var(--text); }
.sidebar-bottom { padding-top: 6px; border-top: 1px solid var(--border); }
.account-card, .settings-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-align: left;
}
.account-card:hover, .settings-link:hover { background: rgba(255,255,255,.06); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #a855f7; color: #fff; font-size: 12px; font-weight: 800; }
.account-card strong { display: block; font-size: 14px; }
.account-card small { color: var(--text-faint); font-size: 11px; }
.nav-icon { color: var(--text-faint); }

.main-panel { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 62px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.04);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.menu-btn { display: none; width: 38px; height: 38px; border-radius: 11px; }
.menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--text); margin: 2px auto; }
.compact-title strong { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.mode-switch {
  justify-self: center;
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: #141414; border: 1px solid var(--border);
  border-radius: 999px; padding: 4px; min-width: 256px;
}
.mode-tab {
  height: 36px; min-width: 118px; padding: 0 16px; border-radius: 999px; color: var(--text-muted); font-weight: 600;
}
.mode-tab.active { background: rgba(255,255,255,.06); color: var(--text); }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.connection-status {
  height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(255,255,255,.03); color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; font-size: 12px;
}
.status-pulse, .connector-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(45,210,139,.12); }
.theme-toggle { width: 36px; height: 36px; border-radius: 50%; color: var(--text-muted); }
.theme-toggle:hover { background: rgba(255,255,255,.06); color: var(--text); }

.chat-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.welcome-view {
  min-height: calc(100vh - 62px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px 230px;
}
.welcome-view h1 { margin: 0 0 28px; font-size: clamp(38px, 4.2vw, 55px); letter-spacing: -.05em; font-weight: 620; }
.welcome-prompts { display: grid; gap: 16px; width: min(100%, 620px); }
.suggestion-line {
  width: 100%; min-height: 42px; border-radius: 12px; padding: 0 16px;
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); background: transparent; justify-content: center;
}
.suggestion-line strong { font-size: 16px; font-weight: 500; color: var(--text-muted); }
.suggestion-line:hover strong { color: var(--text); }

.composer-wrap {
  position: fixed; left: calc(var(--sidebar-w) + 20px); right: 20px; bottom: 18px; pointer-events: none;
}
.composer-wrap > * { pointer-events: auto; }
.composer {
  width: min(var(--composer-max), calc(100vw - var(--sidebar-w) - 40px));
  margin: 0 auto;
  border-radius: 28px;
  border: 1px solid var(--border-strong);
  background: #171717;
  box-shadow: var(--shadow);
  padding: 14px 14px 10px;
}
.attachment-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.attachment-chip {
  height: 32px; max-width: 100%; padding: 0 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted);
}
.attachment-chip strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; color: var(--text); }
.attachment-chip small { color: var(--text-faint); font-size: 11px; }
.attachment-chip button { width: 18px; height: 18px; border-radius: 50%; color: var(--text-faint); }
.attachment-chip button:hover { background: rgba(255,255,255,.08); color: var(--text); }
.hidden-file-input { position: absolute; left: -9999px; width: 1px; height: 1px; }
#messageInput {
  width: 100%; resize: none; max-height: 200px; border: 0; background: transparent; color: var(--text);
  font-size: 30px; line-height: 1.28; padding: 2px 6px 10px; overflow-y: auto;
}
#messageInput::placeholder { color: #b7b7b7; }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer-tools, .composer-actions { display: flex; align-items: center; gap: 10px; }
.round-tool, .voice-btn, .send-btn, .icon-btn {
  display: inline-grid; place-items: center;
}
.round-tool {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 22px;
}
.round-tool:hover { background: rgba(255,255,255,.08); color: var(--text); }
.model-select {
  min-width: 120px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.04);
}
.model-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chatgpt-dot { background: #5fd3c0; }
.gemini-dot { display: grid; place-items: center; font-size: 8px; color: white; background: linear-gradient(135deg, #4285f4, #b86cff); }
.auto-dot { background: linear-gradient(135deg, #a78bfa, #67e8f9); }
.down-caret { color: var(--text-faint); }
.voice-btn {
  width: 36px; height: 36px; border-radius: 50%; color: var(--text-muted); background: transparent;
}
.voice-btn:hover { background: rgba(255,255,255,.06); }
.voice-btn svg, .send-btn svg, .message-action-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.send-btn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: white; box-shadow: 0 8px 20px rgba(41,119,255,.32);
}
.send-btn:hover { transform: translateY(-1px); }
.composer-note { text-align: center; margin: 10px 0 0; color: var(--text-faint); font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 7px; }

.model-menu {
  position: fixed; right: max(20px, calc((100vw - var(--composer-max)) / 2)); bottom: 110px;
  width: 265px; padding: 6px; border-radius: 16px; border: 1px solid var(--border-strong);
  background: #171717; box-shadow: var(--shadow); z-index: 30;
}
.model-menu-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px 6px; }
.model-divider { height: 1px; margin: 4px 6px; background: var(--border); }
.model-option {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 12px; padding: 10px;
}
.model-option:hover, .model-option.selected { background: rgba(255,255,255,.06); }
.model-option > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.model-option strong { font-size: 13px; }
.model-option strong b { color: var(--text-muted); font-weight: 500; }
.model-option small { color: var(--text-faint); font-size: 11px; }
.model-option .check { opacity: 0; color: var(--accent-2); }
.model-option.selected .check { opacity: 1; }

.conversation-view { height: calc(100vh - 62px); overflow-y: auto; padding: 22px 20px 240px; }
.conversation-inner { width: min(100%, 860px); margin: 0 auto; display: grid; gap: 30px; }
.message-row { display: flex; gap: 14px; align-items: flex-start; animation: rise .18s ease both; }
.message-row.user { justify-content: flex-end; }
.message-avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.message-avatar.ai { background: #8b5cf6; color: #fff; }
.message-avatar.user { background: #3166ff; color: #fff; }
.message-content { max-width: min(720px, 82%); }
.message-row.user .message-content {
  background: #161616; border: 1px solid var(--border); border-radius: 18px 18px 6px 18px; padding: 14px 16px;
}
.message-content p { margin: 0; white-space: pre-wrap; font-size: 17px; line-height: 1.7; letter-spacing: -.01em; }
.message-meta { margin-top: 8px; color: var(--text-faint); font-size: 11px; }
.user-attachment-list { display: grid; gap: 8px; margin-top: 12px; }
.user-file-pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border-radius: 12px; padding: 8px 10px; background: rgba(255,255,255,.05); border: 1px solid var(--border);
}
.user-file-pill strong { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.user-file-pill small { color: var(--text-faint); font-size: 11px; }
.assistant-finish-time { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.message-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.message-action-btn {
  width: 30px; height: 30px; border-radius: 8px; color: var(--text-muted); border: 1px solid transparent;
}
.message-action-btn:hover { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); }

.working-line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--text-muted); }
.working-orb { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(45,210,139,.12); animation: pulse 1.3s ease-in-out infinite; }
.working-line strong { font-size: 15px; font-weight: 600; color: var(--text); }
.working-time { font-size: 13px; color: var(--text-muted); }
.stream-stage { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); }
.stream-progress { display: flex; align-items: center; gap: 10px; width: min(420px, 100%); margin: 0 0 10px; }
.stream-progress-track { flex: 1; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
.stream-progress-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2dd28b, #5fd3c0); transition: width .14s linear; }
.stream-progress b { min-width: 42px; font-size: 12px; color: var(--text-muted); text-align: right; }
.stream-text { color: var(--text); }
.typing { display: inline-flex; gap: 5px; padding: 4px 0 8px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

.jr-artifacts { display: grid; gap: 10px; margin-top: 12px; }
.jr-artifact { color: inherit; text-decoration: none; }
.jr-image-artifact {
  display: block; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #121212; max-width: 560px;
}
.jr-image-artifact img { display: block; width: 100%; max-height: 620px; object-fit: contain; background: #0d0d0d; }
.jr-image-artifact > span { display: block; padding: 10px 12px; color: var(--text-muted); font-size: 12px; }
.jr-file-artifact {
  display: flex; align-items: center; gap: 12px; width: min(100%, 560px);
  border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: #141414;
}
.jr-file-artifact:hover { background: #181818; border-color: var(--border-strong); }
.jr-file-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(41,119,255,.14); color: var(--accent-2); font-size: 16px; display: grid; place-items: center; }
.jr-file-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.jr-file-info strong, .jr-file-info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-file-info strong { font-size: 13px; }
.jr-file-info small { font-size: 11px; color: var(--text-faint); }
.jr-file-action { font-size: 12px; color: var(--accent-2); }

.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); }
.settings-modal {
  width: min(92vw, 520px); border-radius: 18px; border: 1px solid var(--border-strong);
  background: #151515; box-shadow: var(--shadow); padding: 22px;
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.eyebrow { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.modal-header h2 { margin: 4px 0 0; font-size: 28px; letter-spacing: -.04em; }
.settings-list { margin-top: 20px; display: grid; gap: 4px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); padding: 16px 0; }
.setting-row span:first-child { display: flex; flex-direction: column; gap: 4px; }
.setting-row strong { font-size: 14px; }
.setting-row small { color: var(--text-muted); font-size: 12px; }
.select-chip, .setting-status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-muted); }
.setting-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.setting-status.always-on { color: var(--green); }
.switch { width: 42px; height: 24px; padding: 3px; border-radius: 999px; background: #2a2a2a; }
.switch i { width: 18px; height: 18px; display: block; border-radius: 50%; background: #9e9e9e; transition: transform .18s; }
.switch.on { background: var(--accent); }
.switch.on i { transform: translateX(18px); background: white; }
.settings-footnote { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; color: var(--text-faint); font-size: 12px; line-height: 1.6; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 60; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: #171717; color: var(--text); box-shadow: var(--shadow); }

.stream-progress.indeterminate .stream-progress-track span { width: 36% !important; animation: jrIndeterminate 1.05s ease-in-out infinite; }
@keyframes jrIndeterminate { 0% { transform: translateX(-130%); } 50% { transform: translateX(90%); } 100% { transform: translateX(280%); } }
@keyframes blink { 0%,70%,100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px rgba(45,210,139,.20), 0 0 0 8px rgba(45,210,139,.05); } 50% { box-shadow: 0 0 0 3px rgba(45,210,139,.24), 0 0 0 12px rgba(45,210,139,.09); } }

body[data-theme="light"] {
  --bg: #f5f5f5; --bg-elev: #ffffff; --bg-elev-2: #fafafa; --bg-elev-3: #f3f3f3;
  --bg-soft: #ffffff; --border: rgba(0,0,0,.08); --border-strong: rgba(0,0,0,.14);
  --text: #161616; --text-muted: #555; --text-faint: #757575;
}
body[data-theme="light"] .sidebar,
body[data-theme="light"] .main-panel,
body[data-theme="light"] .jr-image-artifact img,
body[data-theme="light"] .settings-modal,
body[data-theme="light"] .model-menu,
body[data-theme="light"] .composer,
body[data-theme="light"] .message-row.user .message-content,
body[data-theme="light"] .jr-file-artifact,
body[data-theme="light"] .jr-image-artifact,
body[data-theme="light"] .toast { background: white; }
body[data-theme="light"] .mode-switch,
body[data-theme="light"] .new-chat-btn,
body[data-theme="light"] .connection-status,
body[data-theme="light"] .project-card.active,
body[data-theme="light"] .project-card:hover,
body[data-theme="light"] .side-link.active,
body[data-theme="light"] .side-link:hover,
body[data-theme="light"] .history-item.selected,
body[data-theme="light"] .history-item:hover,
body[data-theme="light"] .attachment-chip,
body[data-theme="light"] .round-tool,
body[data-theme="light"] .model-select { background: rgba(0,0,0,.04); }
body[data-theme="light"] #messageInput::placeholder { color: #7a7a7a; }
body[data-theme="light"] .working-orb { background: #0f0f0f; box-shadow: 0 0 0 5px rgba(15,15,15,.08); }

@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: min(88vw, var(--sidebar-w)); transform: translateX(-102%); transition: transform .22s ease; }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: inline-grid; }
  .composer-wrap { left: 12px; right: 12px; }
  .composer { width: min(var(--composer-max), calc(100vw - 24px)); }
}

@media (max-width: 720px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .mode-switch { min-width: 180px; }
  .mode-tab { min-width: 82px; }
  .connection-status { display: none; }
  .conversation-view { padding-left: 12px; padding-right: 12px; }
  .welcome-view { padding-bottom: 210px; }
  #messageInput { font-size: 22px; }
  .message-content { max-width: 100%; }
}

@media (max-width: 480px) {
  .topbar { padding: 10px 12px; }
  .mode-switch { min-width: 150px; }
  .welcome-view h1 { font-size: 34px; }
  .suggestion-line strong { font-size: 14px; }
  #messageInput { font-size: 20px; }
  .message-content p { font-size: 16px; }
  .composer-toolbar { gap: 8px; }
}

/* Provider-aware header selector + balanced composer typography */
.header-model-select {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 0 6px;
  border-radius: 12px;
  color: var(--text);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
  background: transparent;
}
.header-model-select:hover { background: rgba(255,255,255,.06); }
.header-model-select .down-caret { font-size: 13px; }
.header-provider-icon { width: 30px; height: 30px; }

.provider-icon {
  width: 100%;
  height: 100%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.provider-icon svg {
  width: 72%;
  height: 72%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.provider-icon-chatgpt {
  color: #f5f5f5;
  border-radius: 50%;
}
.provider-icon-chatgpt svg path:first-child { fill: none; }
.provider-icon-gemini {
  color: #8aa9ff;
  border-radius: 50%;
}
.provider-icon-gemini svg {
  width: 68%;
  height: 68%;
  fill: currentColor;
  stroke: none;
}
.provider-icon-auto {
  color: #c3a7ff;
  border-radius: 50%;
}
.provider-icon-auto svg {
  width: 66%;
  height: 66%;
  fill: currentColor;
  stroke: none;
}
.provider-avatar {
  overflow: hidden;
  background: #171717 !important;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.provider-avatar .provider-icon-chatgpt { color: #f4f4f4; }
.provider-avatar .provider-icon-gemini {
  color: #8fa7ff;
  background: radial-gradient(circle at 70% 25%, rgba(181,124,255,.22), transparent 45%);
}

#messageInput {
  font-size: 18px;
  line-height: 1.45;
  padding: 4px 8px 11px;
  letter-spacing: -.01em;
}
#messageInput::placeholder { font-size: 18px; }

/* When the shared provider menu is opened from the header JS positions it next to the selector. */
.model-menu { max-height: min(70vh, 420px); overflow-y: auto; }

body[data-theme="light"] .header-model-select:hover { background: rgba(0,0,0,.05); }
body[data-theme="light"] .provider-avatar { background: #f7f7f7 !important; }
body[data-theme="light"] .provider-icon-chatgpt { color: #111; }

@media (max-width: 720px) {
  .header-model-select { font-size: 15px; padding-right: 6px; }
  .header-provider-icon { width: 26px; height: 26px; }
  #messageInput, #messageInput::placeholder { font-size: 17px; }
}

@media (max-width: 480px) {
  #messageInput, #messageInput::placeholder { font-size: 16px; }
}


/* Exact provider logos + provider picker */
.provider-icon { overflow: hidden; border-radius: 50%; background: #fff; }
.provider-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.provider-icon-chatgpt img { width: 180%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.15); }
.provider-icon-gemini img { width: 100%; height: 100%; object-fit: cover; }
.auto-provider-mark { display:grid;place-items:center;width:100%;height:100%;background:#1f1f1f;color:#c3a7ff;border-radius:50%; }
.provider-menu { position:fixed; z-index:45; width:180px; padding:8px; border:1px solid var(--border-strong); border-radius:14px; background:#171717; box-shadow:var(--shadow); }
.provider-option { width:100%; min-height:48px; border-radius:10px; padding:6px 8px; display:grid; grid-template-columns:34px 1fr 18px; align-items:center; gap:10px; text-align:left; }
.provider-option:hover,.provider-option.selected{background:rgba(255,255,255,.07)}
.provider-logo-box{width:32px;height:32px;border-radius:9px;background:#fff;overflow:hidden;display:grid;place-items:center}
.provider-logo-box img{width:100%;height:100%;object-fit:cover;display:block}
.provider-option[data-provider="ChatGPT"] .provider-logo-box img{width:180%;height:100%;transform:scale(1.12)}
.radio-dot{width:16px;height:16px;border:1.5px solid #4d7dff;border-radius:50%;justify-self:end;position:relative}
.provider-option.selected .radio-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#4d7dff}
body[data-theme="light"] .provider-menu{background:#fff}

/* v1.8.43 provider icon sizing + responsive layout hardening */
.header-provider-icon.provider-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  flex: 0 0 26px !important;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}
.header-provider-icon.provider-icon img,
.provider-avatar .provider-icon img,
.provider-logo-box img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  display: block !important;
}
.provider-avatar .provider-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.provider-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 3px !important;
}
.provider-menu {
  width: 220px !important;
  max-width: calc(100vw - 20px) !important;
}
.provider-option {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  min-height: 52px !important;
}
.provider-logo-box {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background: #fff !important;
}
.provider-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.provider-option-copy strong { color: var(--text); font-size: 13px; font-weight: 600; }
.provider-option-copy small { color: var(--text-faint); font-size: 10px; white-space: nowrap; }
.provider-option-soon { opacity: .72; }
.provider-option-soon:hover { background: rgba(255,255,255,.035) !important; }
.provider-text-logo { display: grid !important; place-items: center !important; color: #111; font-weight: 800; font-size: 16px; }
.grok-logo { background: #fff !important; color: #111 !important; }
.claude-logo { background: #f2e8dc !important; color: #d97745 !important; font-size: 18px; }
.soon-badge { font-size: 9px; color: var(--text-faint); padding: 3px 6px; border-radius: 999px; border: 1px solid var(--border); }

.header-model-select {
  max-width: min(230px, 38vw);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.header-model-select #headerSelectedModel {
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-left, .topbar-actions { min-width: 0; }
.mode-switch { max-width: 260px; }

@media (min-width: 961px) {
  .main-panel { width: calc(100vw - var(--sidebar-w)); }
  .topbar { width: 100%; min-width: 0; }
  .conversation-view { width: 100%; }
}

@media (max-width: 1180px) {
  .connection-status span:last-child { display: none; }
  .connection-status { width: 38px; padding: 0; justify-content: center; }
  .mode-switch { min-width: 210px; }
  .mode-tab { min-width: 96px; }
}

@media (max-width: 960px) {
  .topbar { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .topbar-actions { justify-self: end; }
  .header-model-select { max-width: 190px; }
}

@media (max-width: 720px) {
  .topbar {
    height: auto;
    min-height: 60px;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "left actions" "mode mode";
    row-gap: 8px;
    padding-bottom: 10px;
  }
  .topbar-left { grid-area: left; }
  .topbar-actions { grid-area: actions; }
  .mode-switch { grid-area: mode; justify-self: center; width: min(280px, calc(100vw - 28px)); }
  .chat-stage { min-height: calc(100vh - 108px); }
  .conversation-view { height: calc(100vh - 108px); }
  .header-model-select { max-width: calc(100vw - 130px); }
}

@media (max-width: 480px) {
  .header-provider-icon.provider-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; flex-basis: 24px !important; }
  .header-model-select { font-size: 14px; gap: 7px; }
  .provider-menu { width: min(220px, calc(100vw - 16px)) !important; }
  .composer { border-radius: 22px; }
}

/* JR Chat header right-side status + theme responsive hotfix */
.topbar {
  position: relative;
}
.topbar-actions {
  justify-self: end !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}
.connection-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 10px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.connection-status span:last-child {
  display: inline !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-toggle {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
}

@media (max-width: 1180px) {
  .connection-status {
    width: auto !important;
    padding: 0 9px !important;
  }
  .connection-status span:last-child {
    display: inline !important;
    font-size: 11px;
  }
}

@media (max-width: 720px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas: "left actions" "mode mode" !important;
    column-gap: 8px !important;
  }
  .topbar-left {
    grid-area: left !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .topbar-actions {
    grid-area: actions !important;
    justify-self: end !important;
    align-self: start !important;
    max-width: 100% !important;
  }
  .mode-switch {
    grid-area: mode !important;
  }
  .connection-status {
    height: 34px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }
  .connection-status span:last-child {
    display: inline !important;
    max-width: 76px !important;
    font-size: 10px !important;
  }
  .theme-toggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .topbar-actions {
    gap: 5px !important;
  }
  .connection-status {
    height: 32px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
  }
  .connection-status .status-pulse {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
  }
  .connection-status span:last-child {
    max-width: 62px !important;
    font-size: 9px !important;
  }
  .theme-toggle {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
}

@media (max-width: 360px) {
  .connection-status span:last-child {
    max-width: 52px !important;
  }
  .topbar-actions { gap: 4px !important; }
}

/* JR Chat topbar slot lock: keep PC status + theme pinned right even when Chat/Work hides */
@media (min-width: 721px) {
  .topbar-left {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  .mode-switch {
    grid-column: 2 !important;
    justify-self: center !important;
  }
  .topbar-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    margin-left: 0 !important;
  }
}

/* Account and access control */
.auth-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(5,7,11,.82);backdrop-filter:blur(16px)}
.auth-overlay.hidden{display:none}
.auth-card{width:min(420px,100%);padding:32px;border:1px solid var(--border);border-radius:22px;background:var(--bg-elev);box-shadow:0 24px 80px rgba(0,0,0,.42)}
.auth-brand{font-weight:800;letter-spacing:-.03em;font-size:22px;margin-bottom:28px}.auth-card h1{margin:0 0 8px;font-size:30px}.auth-subtitle,.auth-hint{color:var(--text-muted);font-size:13px;line-height:1.5}.auth-form,.account-form{display:grid;gap:14px;margin-top:22px}.auth-form label,.account-form label{display:grid;gap:7px;color:var(--text-muted);font-size:12px;font-weight:600}.auth-form input,.account-form input,.admin-grid input{border:1px solid var(--border);border-radius:11px;background:var(--bg-elev-2);color:var(--text);padding:12px 13px;outline:none}.auth-form input:focus,.account-form input:focus,.admin-grid input:focus{border-color:var(--accent)}.primary-auth-btn{border:0;border-radius:11px;background:var(--accent);color:white;font-weight:700;padding:12px 15px;cursor:pointer}.auth-error{margin:14px 0 0;border-radius:10px;background:rgba(239,108,130,.12);color:#ff9aac;padding:10px 12px;font-size:12px}.auth-error.hidden{display:none}
.modal-backdrop{z-index:900}.account-modal{width:min(610px,calc(100vw - 28px));max-height:min(82vh,760px);overflow:auto;padding:24px;border:1px solid var(--border);border-radius:20px;background:var(--bg-elev);box-shadow:0 24px 80px rgba(0,0,0,.42)}.account-summary{display:flex;align-items:center;gap:12px;padding:14px 0 20px;border-bottom:1px solid var(--border)}.account-summary>div{display:grid;gap:4px}.account-summary small{color:var(--text-muted);font-size:12px}.account-modal-avatar{width:42px;height:42px}.account-tabs{display:flex;gap:8px;padding:16px 0 4px}.account-tab{border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--text-muted);padding:9px 11px;cursor:pointer}.account-tab.active{background:rgba(255,255,255,.06);color:var(--text)}.account-form.hidden,.admin-panel.hidden{display:none}.admin-create-form{display:grid;gap:12px;padding:16px 0;border-bottom:1px solid var(--border)}.admin-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.tab-checks{display:flex;flex-wrap:wrap;gap:10px;color:var(--text-muted);font-size:12px}.tab-checks label{display:flex;align-items:center;gap:5px}.admin-users{display:grid;gap:8px;padding-top:14px}.admin-user-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}.admin-user-row>div:first-child{display:grid;gap:4px;min-width:0}.admin-user-row small{color:var(--text-muted);font-size:11px;overflow-wrap:anywhere}.admin-user-actions{display:flex;gap:6px;flex:none}.small-action{border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);padding:7px 9px;font-size:11px;cursor:pointer}.logout-btn{width:100%;margin-top:18px;border:1px solid rgba(239,108,130,.35);border-radius:10px;background:transparent;color:#ff9aac;padding:11px;cursor:pointer}
@media (max-width:640px){.auth-card{padding:24px}.admin-grid{grid-template-columns:1fr}.admin-user-row{align-items:flex-start;flex-direction:column}.admin-user-actions{width:100%}.small-action{flex:1}}
.auth-card .auth-form + .auth-form{margin-top:14px}
.jr-image-artifact{position:relative;display:flex;flex-direction:column;gap:9px;padding:8px}.jr-image-artifact>img,.jr-image-artifact>a:first-of-type img{display:block;max-width:100%;border-radius:10px}.jr-artifact-close{position:absolute;right:10px;top:10px;z-index:2;width:27px;height:27px;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:20px;line-height:25px;text-align:center;cursor:pointer}.jr-image-download{display:block;text-align:center;border-radius:9px;padding:8px 10px;background:rgba(255,255,255,.08);color:var(--text);font-size:12px;font-weight:700;text-decoration:none}.jr-image-download:hover{background:var(--accent);color:#fff}
.danger-action{border-color:rgba(239,108,130,.35);color:#ff9aac}.danger-action:hover{background:rgba(239,108,130,.12)}

/* JR Code OpenCode integration additions */
.admin-help{margin:0 0 12px;color:var(--text-muted);font-size:12px;line-height:1.5}
.message-body{font-size:16px;line-height:1.68;word-break:break-word}
.message-error .message-content{border-left:2px solid #ef4444;padding-left:12px}
.message-error .message-body{color:#fca5a5}
.code-shell{margin:12px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0d0d0d;max-width:100%}
.code-head{height:36px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:#171717;color:#a3a3a3;font-size:12px}
.code-head button{border:0;background:transparent;color:#d4d4d4;cursor:pointer;font:inherit;padding:5px 7px;border-radius:6px}.code-head button:hover{background:#272727;color:#fff}
.code-block{margin:0;padding:14px 16px;max-height:360px;overflow:auto;white-space:pre;overscroll-behavior:contain;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;color:#e5e7eb;background:#0d0d0d}
.inline-code{padding:2px 5px;border-radius:5px;background:rgba(127,127,127,.15);font:0.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.history-item{position:relative;padding-right:30px;text-align:left}.history-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-delete{position:absolute;right:8px;top:50%;transform:translateY(-50%);opacity:0;color:var(--text-muted);font-size:18px;padding:3px 6px;border-radius:6px}.history-item:hover .history-delete{opacity:1}.history-delete:hover{background:rgba(239,68,68,.15);color:#ef4444}
#dynamicModelList{display:grid;gap:2px}.connection-status.offline .status-pulse{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.1)}
.pending-body{color:var(--text-muted);font-size:13px}.jr-file-artifact{display:block;padding:10px 12px}
body[data-theme="light"] .code-shell,body[data-theme="light"] .code-block{background:#f5f5f5;color:#111827}body[data-theme="light"] .code-head{background:#ebebeb;color:#525252}body[data-theme="light"] .code-head button{color:#404040}
@media(max-width:760px){.code-block{max-height:300px}.message-content{max-width:88%}.history-delete{opacity:1}}
.stop-btn{background:#ef4444}.stop-btn:hover{background:#dc2626}.stop-square{width:10px;height:10px;background:#fff;border-radius:2px;display:block}.hidden{display:none!important}

/* JR Code v1.1 selector + bubble fixes */
.variant-select{
  height:36px;min-width:88px;padding:0 12px;border-radius:999px;border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.04);
  color:var(--text);font-size:13px;font-weight:550;white-space:nowrap;
}
.variant-select:hover,.model-select:hover{background:rgba(255,255,255,.07)}
.variant-menu{
  position:fixed;z-index:46;width:190px;max-height:min(60vh,360px);overflow:auto;padding:6px;
  border-radius:16px;border:1px solid var(--border-strong);background:#171717;box-shadow:var(--shadow);
}
#dynamicVariantList{display:grid;gap:2px}
.variant-option{
  width:100%;min-height:40px;padding:9px 10px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;color:var(--text-muted);text-align:left;
}
.variant-option:hover,.variant-option.selected{background:rgba(255,255,255,.06);color:var(--text)}
.variant-option .check{opacity:0;color:var(--accent-2)}
.variant-option.selected .check{opacity:1}
.provider-option[data-disabled="true"]{cursor:default}
.provider-option[data-disabled="true"] .radio-dot{display:none}

/* User sent messages: requested blue bubble with white text */
.message-row.user .message-content{
  background:#173e76 !important;
  border:0 !important;
  color:#fff !important;
  border-radius:20px 20px 6px 20px !important;
  padding:12px 16px !important;
  max-width:min(620px,78vw);
  box-shadow:none;
}
.message-row.user .message-body,.message-row.user .message-content p{color:#fff !important}
.message-row.user .user-file-pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);color:#fff}
.message-row.user .user-file-pill small{color:rgba(255,255,255,.72)}

body[data-theme="light"] .variant-menu{background:#fff}
body[data-theme="light"] .variant-select{background:rgba(0,0,0,.04)}
body[data-theme="light"] .message-row.user .message-content{background:#173e76 !important;color:#fff !important}

@media(max-width:720px){
  .composer-actions{gap:6px}
  .variant-select{min-width:76px;padding:0 10px}
  .model-select{min-width:108px;padding:0 10px}
  .message-row.user .message-content{max-width:86vw}
}
@media(max-width:480px){
  .variant-select{min-width:68px;font-size:12px}
  .model-select{min-width:96px;font-size:12px}
}