/* Dhwani AI — calm, spacious Gemini-inspired workspace skin.
   This layer intentionally changes presentation only; interaction hooks and
   component IDs remain in the original markup. */
:root {
  color-scheme: light;
  --bg: #f7f8fd;
  --sidebar: #f5f7fd;
  --surface: #ffffff;
  --surface-soft: #f0f3fb;
  --line: #e4e8f3;
  --line-strong: #d5dced;
  --text: #20243a;
  --muted: #68718a;
  --subtle: #929bb1;
  --accent: #637bea;
  --accent-strong: #4f68df;
  --accent-soft: #edf1ff;
  --good: #268665;
  --warn: #a8752b;
  --radius: 16px;
  --shadow: 0 18px 48px rgba(50, 67, 125, .10);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111521;
  --sidebar: #151a29;
  --surface: #1a2031;
  --surface-soft: #222a3e;
  --line: #2d3750;
  --line-strong: #3b4863;
  --text: #edf1ff;
  --muted: #a9b3cc;
  --subtle: #7f8ba8;
  --accent: #8da0ff;
  --accent-strong: #a7b4ff;
  --accent-soft: #242e50;
  --good: #75d0ad;
  --warn: #e7bd78;
  --shadow: 0 20px 54px rgba(0, 0, 0, .28);
}
html, body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: "DM Sans", "Outfit", system-ui, sans-serif;
}
body { background-image: radial-gradient(ellipse at 76% 0%, rgba(218, 226, 255, .35), transparent 38%); }
:root[data-theme="dark"] body {
  background-image: radial-gradient(ellipse at 76% 0%, rgba(67, 81, 145, .18), transparent 42%);
}
.app-shell { background: var(--bg); }
.sidebar {
  width: 274px;
  min-width: 274px;
  padding: 20px 14px 14px;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}
.brand {
  gap: 12px;
  padding: 4px 10px 25px;
  color: var(--text);
}
.brand-mark { width: 38px; height: 38px; object-fit: contain; }
.brand-wordmark {
  font: 700 17px/1.12 "Outfit", "DM Sans", sans-serif;
  letter-spacing: -.35px;
  color: var(--text);
}
.brand-wordmark b {
  color: var(--accent-strong);
  font-weight: 750;
}
.new-chat {
  min-height: 48px;
  margin: 2px 0 25px;
  border: 1px solid #dce3fa;
  border-radius: 15px;
  background: linear-gradient(110deg, #edf2ff, #f5f1ff);
  color: #394a85;
  font-weight: 650;
  box-shadow: 0 2px 8px rgba(75, 100, 185, .04);
}
:root[data-theme="dark"] .new-chat {
  border-color: #39466e;
  background: linear-gradient(110deg, #202b49, #2b2446);
  color: #e0e7ff;
}
.new-chat:hover {
  border-color: #b9c8f6;
  background: linear-gradient(110deg, #e6edff, #f0eaff);
}
.nav-caption {
  padding: 0 12px 9px;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .14em;
}
.side-nav { gap: 5px; }
.nav-item {
  min-height: 42px;
  margin: 1px 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}
.nav-item:hover, .nav-item.active {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
.nav-item.active {
  box-shadow: 0 2px 9px rgba(42, 59, 112, .045);
}
.nav-icon { color: var(--accent-strong); }
.sidebar-footer {
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.sidebar-note {
  background: rgba(255,255,255,.68);
  border-color: var(--line);
  border-radius: 14px;
}
:root[data-theme="dark"] .sidebar-note { background: rgba(255,255,255,.025); }
.profile-button {
  min-height: 58px;
  border-radius: 14px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(42, 59, 112, .04);
}
.profile-button:hover { border-color: #bdc9ed; background: var(--surface-soft); }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dce5ff, #efe1ff);
  color: #4c5fbe;
}
.sidebar-upgrade {
  min-height: 42px;
  margin: 9px 0 0;
  padding: 0 13px;
  border: 1px solid rgba(99, 123, 234, .12);
  border-radius: 13px;
  background: linear-gradient(110deg, #667fe9, #806ce8);
  box-shadow: 0 5px 15px rgba(99, 123, 234, .18);
}
.sidebar-upgrade:hover { filter: brightness(1.04); box-shadow: 0 8px 20px rgba(99, 123, 234, .22); }
.main-area {
  background:
    radial-gradient(ellipse at 48% 0%, rgba(231, 237, 255, .55), transparent 46%),
    var(--bg);
}
:root[data-theme="dark"] .main-area {
  background:
    radial-gradient(ellipse at 48% 0%, rgba(48, 61, 112, .22), transparent 46%),
    var(--bg);
}
.main-area:has(#chatView.active-view) .topbar {
  position: relative;
  inset: auto;
  height: 66px;
  flex: 0 0 66px;
  padding: 0 clamp(18px, 3vw, 36px);
  border-bottom: 1px solid rgba(220, 226, 241, .72);
  background: rgba(248, 249, 255, .74);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
}
:root[data-theme="dark"] .main-area:has(#chatView.active-view) .topbar {
  border-bottom-color: rgba(55, 67, 96, .7);
  background: rgba(18, 23, 37, .76);
}
.main-area:has(#chatView.active-view) .topbar > *,
.main-area:has(#chatView.active-view) .topbar-actions > * { pointer-events: auto; }
.sidebar-toggle {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border-color: var(--line);
  background: var(--surface);
}
.sidebar-toggle img { width: 28px; height: 28px; }
.topbar-brand-copy { gap: 3px; }
.topbar-brand-copy strong {
  color: var(--text);
  font: 700 19px/1 "Tiro Devanagari Hindi", "Outfit", sans-serif;
}
.topbar-brand-copy span {
  color: var(--muted);
  font: 650 9px/1 "Manrope", sans-serif;
  letter-spacing: .18em;
}
.model-chip {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(42, 59, 112, .035);
}
.model-chip:hover { border-color: #bdc9ed; background: var(--surface-soft); }
.model-dot { background: linear-gradient(135deg, #6687f4, #9675e9); box-shadow: 0 0 0 4px rgba(103, 130, 238, .10); }
.breadcrumb { color: var(--subtle); font-size: 12px; }
.breadcrumb strong { color: var(--muted); font-weight: 600; }
.icon-button {
  border-radius: 12px;
  border-color: var(--line);
  background: var(--surface);
}
.icon-button:hover { border-color: #bdc9ed; background: var(--surface-soft); }
#chatView { position: relative; }
#chatView:not(.has-messages) .chat-scroll {
  justify-content: center;
  padding: 34px 28px 92px;
}
#chatView:not(.has-messages) .welcome {
  width: min(900px, 100%);
  margin: auto;
  animation: fadeIn .34s ease both;
}
.hero-brand-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 23px;
  background: linear-gradient(140deg, rgba(224, 233, 255, .92), rgba(244, 234, 255, .94));
  box-shadow: 0 10px 26px rgba(92, 112, 191, .10), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="dark"] .hero-brand-mark {
  background: linear-gradient(140deg, #26375c, #35284f);
  box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-mark { width: 52px; height: 52px; object-fit: contain; }
.hero-greeting {
  justify-content: center;
  margin: 0 0 12px !important;
  color: var(--text) !important;
  font: 650 clamp(33px, 4.2vw, 48px)/1.15 "Outfit", "Tiro Devanagari Hindi", sans-serif !important;
  letter-spacing: -1.5px !important;
}
.hero-subtitle {
  max-width: 590px;
  margin: 0 auto 25px !important;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.dhwani-suggestions.dhwani-suggestions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(850px, 100%);
  gap: 12px;
  margin: 31px auto 0;
  text-align: left;
}
.dhwani-suggestions button {
  min-height: 104px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 14px;
  align-items: start;
  gap: 10px;
  padding: 15px 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  color: var(--text);
  text-align: left;
  box-shadow: 0 4px 14px rgba(50, 67, 125, .035);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
:root[data-theme="dark"] .dhwani-suggestions button { background: rgba(26,32,49,.88); }
.dhwani-suggestions button:hover {
  transform: translateY(-2px);
  border-color: #c2cdf1;
  background: var(--surface);
  box-shadow: 0 10px 25px rgba(63, 82, 150, .09);
}
.dhwani-suggestion-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #edf2ff, #f3edff);
  color: var(--accent-strong);
  font-size: 16px;
  font-weight: 700;
}
:root[data-theme="dark"] .dhwani-suggestion-icon { background: #2b3657; color: #b8c5ff; }
.dhwani-suggestion-copy { min-width: 0; display: block; }
.dhwani-suggestion-copy strong {
  display: block;
  margin: 1px 0 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.dhwani-suggestion-copy small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.dhwani-suggestion-arrow { color: var(--subtle); font-size: 12px; }
#chatView:not(.has-messages) .composer-zone {
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100% - 64px));
  margin: 0;
  padding: 0;
  z-index: 6;
}
#chatView.has-messages .composer-zone {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(900px, calc(100% - 64px));
  margin: 0 auto;
  padding: 9px 0 18px;
}
.composer-zone::before {
  height: 32px;
  background: linear-gradient(transparent, var(--bg));
}
.composer {
  position: relative;
  padding: 15px 16px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 25px;
  background: var(--surface);
  box-shadow: 0 14px 42px rgba(52, 68, 124, .10), 0 2px 8px rgba(52,68,124,.035);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.composer:focus-within {
  border-color: #aab9ed;
  box-shadow: 0 16px 44px rgba(66, 88, 164, .14), 0 0 0 3px rgba(104, 130, 237, .08);
}
.composer-bottom { align-items: center; gap: 12px; }
.composer textarea {
  min-height: 44px;
  max-height: 180px;
  padding: 8px 3px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}
.composer textarea::placeholder { color: #929bb1; }
.dhwani-plus-button {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--accent-strong);
  font-size: 24px;
  font-weight: 350;
}
.dhwani-plus-button:hover,
.dhwani-plus-button[aria-expanded="true"] {
  border-color: #b7c5f4;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.composer-right { gap: 8px; }
.composer-voice-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: #74809e;
}
.composer-voice-button:hover { border-color: var(--line); background: var(--surface-soft); color: var(--accent-strong); }
.composer-voice-button.is-active { color: var(--accent-strong); border-color: #b6c4f3; background: var(--accent-soft); }
.send-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #6481ef, #786bdf);
  color: #fff;
  box-shadow: 0 5px 13px rgba(90, 112, 220, .25);
}
.send-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.send-button svg { width: 19px; height: 19px; stroke: currentColor; }
.composer-hint { padding: 10px 4px 0; color: var(--subtle); font-size: 10px; }
.plus-menu {
  bottom: calc(100% + 13px);
  left: 0;
  padding: 9px;
  border-color: var(--line);
  border-radius: 17px;
  box-shadow: 0 18px 48px rgba(32, 45, 88, .16);
}
.plus-menu-item { border-radius: 11px; }
.messages { width: min(820px, 100%); gap: 24px; }
#chatView.has-messages .chat-scroll { padding: 28px 28px 8px; }
#chatView .message.user .message-content {
  border: 0;
  border-radius: 21px 21px 7px 21px;
  background: linear-gradient(135deg, #627deb, #766de1);
  color: #fff;
  padding: 13px 17px;
  box-shadow: 0 6px 18px rgba(86, 107, 206, .13);
}
#chatView .message.user .message-text { color: #fff; }
#chatView .message:not(.user) .message-text {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 3px 0;
}
#chatView .message-avatar {
  background: transparent;
  border: 0;
  box-shadow: none;
}
#chatView .message-avatar img { width: 31px; height: 31px; object-fit: contain; }
#chatView .message-actions button {
  border-radius: 10px;
  border-color: var(--line);
  background: var(--surface);
}
#chatView .message-actions button:hover { background: var(--surface-soft); }
.page-heading h1,
.connectors-page-heading h1,
.library-view h1 {
  color: var(--text);
  font-family: "Outfit", "Tiro Devanagari Hindi", sans-serif;
  letter-spacing: -.8px;
}
.button-primary, .button-secondary {
  min-height: 40px;
  border-radius: 12px;
}
.button-primary {
  border-color: transparent;
  background: linear-gradient(120deg, #637fec, #786de3);
  box-shadow: 0 5px 14px rgba(91, 111, 210, .18);
}
.button-primary:hover { filter: brightness(1.05); }
.auth-modal, .modal-card, .subscription-page-card {
  border-color: var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(24, 36, 78, .18);
}
:root[data-theme="dark"] .auth-modal,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .subscription-page-card { background: var(--surface); }
.app-footer { color: var(--subtle); }
.app-footer span:first-child { color: var(--accent-strong); font-weight: 700; }

@media (max-width: 1050px) {
  .sidebar { width: 248px; min-width: 248px; }
  .dhwani-suggestions.dhwani-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .dhwani-suggestions button { min-height: 82px; }
  #chatView:not(.has-messages) .composer-zone { top: 79%; }
}
@media (max-width: 760px) {
  .sidebar { width: 280px; min-width: 280px; }
  .main-area:has(#chatView.active-view) .topbar {
    height: 58px;
    flex-basis: 58px;
    padding: 0 13px;
    gap: 8px;
  }
  .topbar-brand-copy { display: flex; }
  .topbar-brand-copy strong { font-size: 16px; }
  .topbar-brand-copy span { font-size: 8px; }
  .model-chip { min-height: 34px; padding: 0 9px; font-size: 11px; }
  #chatView:not(.has-messages) .chat-scroll { padding: 24px 14px 116px; }
  .hero-brand-mark { width: 52px; height: 52px; border-radius: 19px; margin-bottom: 14px; }
  .hero-mark { width: 43px; height: 43px; }
  .hero-greeting { font-size: clamp(27px, 7vw, 36px) !important; letter-spacing: -.9px !important; }
  .hero-subtitle { max-width: 34ch; font-size: 12px; margin-bottom: 17px !important; }
  .dhwani-suggestions.dhwani-suggestions {
    width: min(520px, 100%);
    gap: 8px;
    margin-top: 21px;
  }
  .dhwani-suggestions button {
    min-height: 76px;
    grid-template-columns: 30px minmax(0,1fr) 10px;
    gap: 7px;
    padding: 10px 8px;
    border-radius: 14px;
  }
  .dhwani-suggestion-icon { width: 29px; height: 29px; border-radius: 10px; }
  .dhwani-suggestion-copy strong { font-size: 11px; margin-bottom: 3px; }
  .dhwani-suggestion-copy small { font-size: 9px; }
  #chatView:not(.has-messages) .composer-zone {
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
  }
  #chatView.has-messages .composer-zone { width: calc(100% - 20px); padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  .composer { padding: 10px 10px 9px; border-radius: 21px; }
  .composer-bottom { gap: 7px; }
  .composer textarea { min-height: 39px; font-size: 14px; padding: 7px 1px; }
  .dhwani-plus-button { width: 34px; height: 34px; flex-basis: 34px; font-size: 22px; }
  .composer-right { gap: 4px; }
  .composer-voice-button { width: 32px; height: 32px; flex-basis: 32px; }
  .send-button { width: 36px; height: 36px; }
  #chatView.has-messages .chat-scroll { padding: 16px 13px 5px; }
}
@media (max-width: 430px) {
  .main-area:has(#chatView.active-view) .topbar { padding: 0 9px; }
  .sidebar-toggle { width: 34px; height: 34px; }
  .topbar-brand-copy { display: none; }
  .dhwani-suggestions.dhwani-suggestions { gap: 7px; }
  .dhwani-suggestions button { min-height: 69px; }
  .dhwani-suggestion-copy small { display: none; }
  #chatView:not(.has-messages) .chat-scroll { padding: 17px 10px 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .dhwani-suggestions button, .composer, .send-button { transition: none; }
}



/* Dhwani AI — restrained ChatGPT / Claude-inspired workspace. */
:root{--bg:#fff;--sidebar:#fafafa;--surface:#fff;--surface-soft:#f4f4f4;--line:#e5e5e5;--line-strong:#d8d8d8;--text:#202020;--muted:#666;--subtle:#8a8a8a;--accent:#333;--accent-strong:#222;--accent-soft:#f0f0f0}
:root[data-theme="dark"]{--bg:#171717;--sidebar:#1e1e1e;--surface:#222;--surface-soft:#2c2c2c;--line:#373737;--line-strong:#494949;--text:#eee;--muted:#b6b6b6;--subtle:#929292;--accent:#eee;--accent-strong:#fff;--accent-soft:#303030}
html,body,.app-shell,.main-area,#chatView.active-view{background:var(--bg)!important;color:var(--text)}
body{background-image:none!important;font-family:"DM Sans","Inter",system-ui,sans-serif}
.app-shell{min-height:100dvh}
.sidebar{width:286px;min-width:286px;padding:17px 12px 12px;background:var(--sidebar)!important;border-right:1px solid var(--line);box-shadow:none}
.brand{gap:10px;padding:3px 9px 22px;color:var(--text)}.brand-mark{width:30px;height:30px;object-fit:contain}
.brand-wordmark{font:650 18px/1.1 "DM Sans","Inter",system-ui,sans-serif;letter-spacing:-.4px;color:var(--text)}.brand-wordmark b{color:var(--text);font-weight:750}
.sidebar .new-chat{min-height:40px;height:40px;margin:2px 0 18px;padding:0 11px;border:0;border-radius:9px;background:#eee!important;color:#252525;box-shadow:none;font-size:13px;font-weight:550}
:root[data-theme="dark"] .sidebar .new-chat{background:#303030!important;color:#f1f1f1}.sidebar .new-chat:hover{background:#e8e8e8!important}
.nav-caption,.sidebar .nav-caption{margin:12px 10px 7px;padding:0;color:var(--subtle);font-size:11px;font-weight:550;letter-spacing:.02em}
.sidebar-scroll-content{overflow-y:auto;min-height:0}.sidebar-scroll-content .side-nav{display:grid;gap:2px;margin:0 0 18px}
.sidebar-scroll-content .side-nav .nav-item{min-height:37px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:13px;font-weight:450}
.sidebar-scroll-content .side-nav .nav-item:hover,.sidebar-scroll-content .side-nav .nav-item:focus-visible,.sidebar-scroll-content .side-nav .nav-item.active{background:#eee;color:#202020}
:root[data-theme="dark"] .sidebar-scroll-content .side-nav .nav-item:hover,:root[data-theme="dark"] .sidebar-scroll-content .side-nav .nav-item:focus-visible,:root[data-theme="dark"] .sidebar-scroll-content .side-nav .nav-item.active{background:#303030;color:#fff}
.nav-icon{width:20px;color:inherit;opacity:.8;font-size:14px}.sidebar .recent-caption{margin-top:16px}.recent-list{padding:2px 0 8px}
.recent-empty{color:var(--subtle);font-size:11px;line-height:1.55;padding:10px}.recent-list .recent-item,.recent-list button{border-radius:7px;color:var(--text)}
.recent-list .recent-item:hover,.recent-list button:hover{background:var(--surface-soft)}
.sidebar-footer{padding-top:10px;border-top:1px solid var(--line)}
.sidebar .profile-button{width:100%;min-height:45px;padding:5px 7px;border:0;border-radius:8px;background:transparent;box-shadow:none}
.sidebar .profile-button:hover{background:var(--surface-soft)}.sidebar .profile-copy strong{font-size:12px;font-weight:600}.sidebar .profile-copy small{font-size:10px;color:var(--subtle)}
.sidebar-upgrade.dhwani-top-upgrade{min-height:32px;margin:0 4px 0 10px;padding:0 13px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:#333;box-shadow:none;font-size:12px;font-weight:550}
:root[data-theme="dark"] .sidebar-upgrade.dhwani-top-upgrade{background:#242424;color:#eee}.sidebar-upgrade.dhwani-top-upgrade:hover{background:var(--surface-soft)}
.main-area{min-width:0;background:#fff!important}:root[data-theme="dark"] .main-area{background:#171717!important}
.main-area:has(#chatView.active-view) .topbar{position:relative;inset:auto;display:flex;flex:0 0 56px;align-items:center;height:56px;padding:0 18px;border:0;background:var(--bg)!important;pointer-events:auto}
.main-area:has(#chatView.active-view) .topbar>*,.main-area:has(#chatView.active-view) .topbar-actions>*{pointer-events:auto}
.sidebar-toggle{width:34px;height:34px;border:0;border-radius:8px;background:transparent;box-shadow:none}.sidebar-toggle:hover{background:var(--surface-soft)}.sidebar-toggle img{width:21px;height:21px}
.topbar-brand-copy,.breadcrumb{display:none!important}
.model-chip{min-height:33px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:transparent;box-shadow:none;color:var(--text);font-size:12px}
.model-chip:hover{border-color:var(--line-strong);background:var(--surface-soft)}.model-dot{background:#777;box-shadow:none}
.topbar-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.dhwani-theme-toggle{width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text);box-shadow:none;font-size:17px}.dhwani-theme-toggle:hover{background:var(--surface-soft)}
.topbar-menu-button{width:34px;height:34px;border:0;background:transparent;color:var(--text)}.topbar-menu-button:hover{background:var(--surface-soft)}
#chatView.active-view{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;position:relative;background:var(--bg)!important;color:var(--text)}
#chatView:not(.has-messages){justify-content:flex-start;padding:0}
#chatView:not(.has-messages) .chat-scroll{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;min-height:0;overflow-y:auto;padding:0 24px 110px;background:transparent}
#chatView:not(.has-messages) .welcome{width:min(760px,100%);margin:0;transform:translateY(-66px);animation:none;text-align:center}
.hero-brand-mark{display:none!important}
.hero-greeting{display:block;margin:0 0 18px!important;color:var(--text)!important;font-family:"DM Sans","Inter",system-ui,sans-serif!important;font-size:clamp(25px,3.1vw,31px)!important;font-weight:450!important;line-height:1.3!important;letter-spacing:-.65px!important}
.hero-subtitle{display:none!important}.dhwani-suggestions,.dhwani-suggestions{display:none!important}
#chatView:not(.has-messages) .composer-zone{position:absolute;z-index:6;top:52%;left:50%;width:min(720px,calc(100% - 52px));margin:0;padding:0;transform:translate(-50%,0)}
#chatView.has-messages .composer-zone{position:relative;top:auto;left:auto;width:min(820px,calc(100% - 48px));margin:0 auto;padding:8px 0 14px;transform:none}
#chatView .composer-zone::before{display:none}
#chatView .composer{display:flex;flex-direction:column;gap:4px;min-height:58px;padding:8px 10px;border:1px solid #dedede;border-radius:20px;background:#fff;box-shadow:0 2px 9px rgba(0,0,0,.045)}
:root[data-theme="dark"] #chatView .composer{border-color:#454545;background:#222;box-shadow:0 2px 9px rgba(0,0,0,.18)}
#chatView .composer:focus-within{border-color:#bcbcbc;box-shadow:0 2px 10px rgba(0,0,0,.065)}
#chatView .composer-bottom{display:flex;align-items:center;gap:8px;min-width:0}
#chatView .composer textarea{flex:1 1 auto;width:100%;min-width:0;min-height:40px;max-height:150px;padding:9px 3px;border:0;border-radius:0;background:transparent;color:var(--text);font-size:14px;line-height:1.45}
#chatView .composer textarea:focus{outline:none;box-shadow:none}#chatView .composer textarea::placeholder{color:#8b8b8b}
#chatView .dhwani-plus-button{width:34px;height:34px;min-width:34px;border:0;border-radius:50%;background:transparent;color:var(--text);box-shadow:none;font-size:23px}
#chatView .dhwani-plus-button:hover{background:var(--surface-soft)}
#chatView .composer-right{display:flex;flex:0 0 auto;align-items:center;gap:4px}
#chatView .composer-voice-button{width:33px;height:33px;min-width:33px;border:0;border-radius:50%;background:transparent;color:#555;box-shadow:none}
#chatView .composer-voice-button:hover{background:var(--surface-soft);color:var(--text)}
#chatView .send-button{width:34px;height:34px;min-width:34px;border:0;border-radius:50%;background:#242424;color:#fff;box-shadow:none}
:root[data-theme="dark"] #chatView .send-button{background:#eee;color:#171717}
#chatView .quick-tags{display:flex!important;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:13px}
#chatView .quick-tag{min-height:30px;padding:5px 10px;border:1px solid #e8e8e8;border-radius:8px;background:#fafafa;color:#555;box-shadow:none;font-size:11px}
#chatView .quick-tag:hover{border-color:#d2d2d2;background:#f2f2f2;color:#222}
:root[data-theme="dark"] #chatView .quick-tag{border-color:#454545;background:#242424;color:#ccc}
#chatView.has-messages .quick-tags{display:none!important}
#chatView.has-messages .chat-scroll{flex:1 1 auto;min-height:0;padding:20px 24px 10px;background:var(--bg)}
#chatView.has-messages .messages{width:min(820px,100%);max-width:100%;margin:0 auto}
#chatView .message.user .message-content{border:0;border-radius:17px 17px 5px 17px;background:#f0f0f0;color:#222;padding:10px 14px}
#chatView .message.user .message-text{color:#222}
:root[data-theme="dark"] #chatView .message.user .message-content{background:#303030;color:#eee}
:root[data-theme="dark"] #chatView .message.user .message-text{color:#eee}
#chatView .message:not(.user) .message-text{border:0;border-radius:0;background:transparent;color:var(--text);padding:2px 0}
#chatView .message-avatar{border:0;background:transparent;box-shadow:none}#chatView .message-avatar img{width:26px;height:26px;object-fit:contain}
@media(max-width:760px){
 .sidebar{width:280px;min-width:280px;padding:16px 12px max(12px,env(safe-area-inset-bottom))}
 .main-area:has(#chatView.active-view) .topbar{flex-basis:52px;height:52px;padding:0 10px}
 #chatView:not(.has-messages) .chat-scroll{padding:0 12px 130px}
 #chatView:not(.has-messages) .welcome{transform:translateY(-60px)}
 #chatView:not(.has-messages) .composer-zone{top:52%;width:calc(100% - 24px)}
 #chatView.has-messages .composer-zone{width:calc(100% - 18px);padding-bottom:max(8px,env(safe-area-inset-bottom))}
 #chatView .composer{border-radius:18px;padding:7px 8px}
 #chatView .composer textarea{min-height:38px;font-size:13px}
 #chatView .dhwani-plus-button,#chatView .composer-voice-button,#chatView .send-button{width:32px;height:32px;min-width:32px}
 #chatView .quick-tags{gap:6px;margin-top:9px}
}



/* Claude-inspired fit and warm-neutral finish. */
:root{--bg:#fff;--sidebar:#faf9f7;--surface:#fff;--surface-soft:#f4f2ef;--line:#e7e4df;--line-strong:#d9d4cc;--text:#262421;--muted:#706b64;--subtle:#969089;--accent:#c96f4b;--accent-strong:#b95f3e;--accent-soft:#f5eee9}
:root[data-theme="dark"]{--bg:#1f1e1c;--sidebar:#252320;--surface:#292724;--surface-soft:#33302c;--line:#403d38;--line-strong:#514c45;--text:#f0ece6;--muted:#c0b8ae;--subtle:#968e84;--accent:#e59a78;--accent-strong:#f0ab8c;--accent-soft:#3a302b}
html,body,.app-shell,.main-area,#chatView.active-view{background:var(--bg)!important;color:var(--text)}
body{background-image:none!important}
.sidebar{width:286px;min-width:286px;padding:16px 12px 11px;background:var(--sidebar)!important;border-right:1px solid var(--line)}
.brand{padding:3px 9px 20px;gap:9px}.brand-mark{width:29px;height:29px}
.brand-wordmark{font-size:18px;font-weight:650;letter-spacing:-.45px}.brand-wordmark b{color:var(--text);font-weight:650}
.sidebar .new-chat{height:40px;min-height:40px;margin:1px 0 13px;padding:0 11px;border:0;border-radius:9px;background:#eae8e5!important;color:#292724;font-size:13px;font-weight:550;box-shadow:none}
:root[data-theme="dark"] .sidebar .new-chat{background:#393631!important;color:#f2eee7}
.sidebar .new-chat:hover{background:#e2dfdb!important}
.nav-caption,.sidebar .nav-caption{margin:12px 10px 6px;color:#8a837a;font-size:10px;font-weight:600;letter-spacing:.08em}
.sidebar-scroll-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
.sidebar-scroll-content .side-nav{display:grid;flex:0 0 auto;gap:2px;margin:0 0 12px}
.sidebar-scroll-content .side-nav .nav-item{min-height:35px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:13px;font-weight:450}
.sidebar-scroll-content .side-nav .nav-item:hover,.sidebar-scroll-content .side-nav .nav-item:focus-visible,.sidebar-scroll-content .side-nav .nav-item.active{background:#eeece9;color:#282521}
:root[data-theme="dark"] .sidebar-scroll-content .side-nav .nav-item:hover,:root[data-theme="dark"] .sidebar-scroll-content .side-nav .nav-item:focus-visible,:root[data-theme="dark"] .sidebar-scroll-content .side-nav .nav-item.active{background:#393631;color:#fff}
.sidebar-scroll-content .side-nav .nav-item.active .nav-icon{color:var(--accent)}.nav-icon{width:20px;color:inherit;opacity:.84;font-size:15px}
.sidebar .recent-caption{margin-top:8px;padding-top:11px;border-top:1px solid var(--line)}
.sidebar-scroll-content #recentChats{display:grid;flex:1 1 auto;align-content:start;gap:1px;min-height:90px;overflow-y:auto;padding:2px 0 10px}
#recentChats .recent-chat{min-height:34px;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#recentChats .recent-chat:hover{background:#efedea;color:var(--text)}
:root[data-theme="dark"] #recentChats .recent-chat:hover{background:#35322d}
#recentChats .recent-empty{padding:8px 10px;color:var(--subtle);font-size:11px;line-height:1.5}
.sidebar-footer{flex:0 0 auto;margin-top:auto;padding-top:9px;border-top:1px solid var(--line)}
.sidebar .profile-button{width:100%;min-height:43px;padding:4px 6px;border:0;border-radius:8px;background:transparent;box-shadow:none}
.sidebar .profile-button:hover{background:var(--surface-soft)}
.sidebar .profile-copy strong{font-size:12px;font-weight:600}.sidebar .profile-copy small{font-size:10px;color:var(--subtle)}
.sidebar-upgrade.dhwani-top-upgrade{min-height:31px;margin:0 4px 0 9px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:#4f4a44;box-shadow:none;font-size:12px;font-weight:500}
:root[data-theme="dark"] .sidebar-upgrade.dhwani-top-upgrade{background:#292724;color:#eee8df}
.sidebar-upgrade.dhwani-top-upgrade:hover{background:var(--surface-soft)}
.main-area{min-width:0;background:var(--bg)!important}
.main-area:has(#chatView.active-view) .topbar{position:relative;inset:auto;display:flex;flex:0 0 54px;align-items:center;height:54px;padding:0 18px;border:0;background:var(--bg)!important}
.sidebar-toggle{width:34px;height:34px;border:0;border-radius:8px;background:transparent;box-shadow:none}
.sidebar-toggle:hover{background:var(--surface-soft)}.sidebar-toggle img{width:21px;height:21px;filter:grayscale(1)}
.topbar-brand-copy,.breadcrumb{display:none!important}
.model-chip{min-height:31px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text);box-shadow:none;font-size:11px}
.model-dot{background:var(--accent);box-shadow:none}
.topbar-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.dhwani-theme-toggle{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);box-shadow:none;font-size:16px}
.dhwani-theme-toggle:hover,.topbar-menu-button:hover{background:var(--surface-soft)}
.topbar-menu-button{width:32px;height:32px;border:0;background:transparent;color:var(--muted)}
.topbar-menu [data-header-action="search"]{display:none!important}
#chatView.active-view{display:flex;flex:1 1 auto;flex-direction:column;align-items:stretch;justify-content:center;min-height:0;overflow:hidden;padding:0 0 42px;background:var(--bg)!important;color:var(--text)}
#chatView:not(.has-messages) .chat-scroll{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0;overflow:visible;padding:0 24px;background:transparent}
#chatView:not(.has-messages) .welcome{width:min(720px,100%);margin:0;transform:none;animation:none;text-align:center}
.hero-brand-mark{display:none!important}
.hero-greeting{display:block;margin:0 0 21px!important;color:var(--text)!important;font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(28px,3vw,32px)!important;font-weight:400!important;line-height:1.2!important;letter-spacing:-.35px!important}
.hero-subtitle{display:none!important}.dhwani-suggestions,.dhwani-suggestions{display:none!important}
#chatView:not(.has-messages) .composer-zone{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:6;flex:0 0 auto;width:min(660px,calc(100% - 48px));max-width:660px;margin:24px auto 0;padding:0;transform:none!important}
#chatView.has-messages .composer-zone{position:relative;inset:auto;top:auto;left:auto;right:auto;bottom:auto;flex:0 0 auto;width:min(790px,calc(100% - 48px));margin:0 auto;padding:8px 0 max(12px,env(safe-area-inset-bottom));transform:none}
#chatView .composer-zone::before{display:none!important}
#chatView .composer{display:flex;flex-direction:column;gap:5px;min-height:105px;padding:11px 13px 9px;border:1px solid #dedbd6;border-radius:16px;background:#fff;box-shadow:0 2px 7px rgba(42,34,25,.045)}
:root[data-theme="dark"] #chatView .composer{border-color:#514c45;background:#292724;box-shadow:0 2px 7px rgba(0,0,0,.16)}
#chatView .composer:focus-within{border-color:#cfc7bd;box-shadow:0 2px 9px rgba(42,34,25,.06)}
#chatView .composer-bottom{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:minmax(34px,auto) 34px;align-items:center;gap:3px 6px;min-width:0}
#chatView .composer textarea{grid-column:1/-1;grid-row:1;display:block;width:100%;min-width:0;min-height:38px;max-height:145px;margin:0;padding:1px 2px 5px;border:0;border-radius:0;background:transparent;color:var(--text);font-size:14px;line-height:1.45;resize:none}
#chatView .composer textarea:focus{outline:none;box-shadow:none}#chatView .composer textarea::placeholder{color:#89837c}
#chatView .dhwani-plus-button{grid-column:1;grid-row:2;justify-self:start;width:32px;height:32px;min-width:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);box-shadow:none;font-size:21px}
#chatView .dhwani-plus-button:hover{background:var(--surface-soft);color:var(--text)}
#chatView .composer-right{grid-column:2;grid-row:2;display:flex;justify-self:end;align-items:center;gap:5px;min-width:0}
#chatView .composer-voice-button{width:31px;height:31px;min-width:31px;border:0;border-radius:50%;background:transparent;color:var(--muted);box-shadow:none}
#chatView .composer-voice-button:hover{background:var(--surface-soft);color:var(--text)}
#chatView .send-button{width:32px;height:32px;min-width:32px;border:0;border-radius:50%;background:#c96f4b;color:#fff;box-shadow:none}
#chatView .send-button:hover{background:#b95f3e}
:root[data-theme="dark"] #chatView .send-button{background:#d98b68;color:#211c18}
#chatView .quick-tags{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
#chatView .quick-tag{min-height:30px;padding:5px 10px;border:1px solid #e6e2dc;border-radius:8px;background:#fff;color:#625c55;box-shadow:none;font-size:11px;font-weight:450}
#chatView .quick-tag:hover{border-color:#d9c7bd;background:#faf6f3;color:#9d5135}
:root[data-theme="dark"] #chatView .quick-tag{border-color:#49443e;background:#292724;color:#ded6ca}
#chatView.has-messages .quick-tags{display:none!important}
#chatView.has-messages .chat-scroll{flex:1 1 auto;min-height:0;padding:20px 24px 10px;background:var(--bg)}
#chatView.has-messages .messages{width:min(790px,100%);max-width:100%;margin:0 auto}
#chatView .message.user .message-content{border:0;border-radius:15px 15px 5px 15px;background:#f1efec;color:#292622;padding:10px 14px}
#chatView .message.user .message-text{color:#292622}
:root[data-theme="dark"] #chatView .message.user .message-content{background:#38342f;color:#eee8df}
:root[data-theme="dark"] #chatView .message.user .message-text{color:#eee8df}
#chatView .message:not(.user) .message-text{border:0;border-radius:0;background:transparent;color:var(--text);padding:2px 0}
#chatView .message-text strong,#chatView .message-text b{font-size:inherit;font-weight:650}
#connectionsView .page-heading h1,#modelsView .page-heading h1,#settingsView .page-heading h1,#libraryView .page-heading h1{font-size:25px;font-weight:500;letter-spacing:-.35px}
@media(max-width:900px){.sidebar{width:270px;min-width:270px}#chatView:not(.has-messages) .composer-zone{width:min(660px,calc(100% - 36px))}}
@media(max-width:760px){
 .sidebar{width:280px;min-width:280px;padding:16px 12px max(12px,env(safe-area-inset-bottom))}
 .main-area:has(#chatView.active-view) .topbar{flex-basis:52px;height:52px;padding:0 10px}
 #chatView.active-view{padding:0 0 20px}
 #chatView:not(.has-messages) .chat-scroll{padding:0 12px}
 #chatView:not(.has-messages) .welcome{transform:none}
 #chatView:not(.has-messages) .composer-zone{width:calc(100% - 24px);margin-top:19px}
 #chatView.has-messages .composer-zone{width:calc(100% - 18px);padding-bottom:max(8px,env(safe-area-inset-bottom))}
 #chatView .composer{min-height:98px;border-radius:15px;padding:9px 10px}
 #chatView .composer textarea{min-height:34px;font-size:13px}
 #chatView .quick-tags{gap:6px;margin-top:9px}
 #chatView .quick-tag{font-size:10px;padding:4px 9px}
}
@media(max-width:430px){.hero-greeting{font-size:26px!important}#chatView:not(.has-messages) .chat-scroll{padding:0 9px}#chatView:not(.has-messages) .composer-zone{width:calc(100% - 18px)}#chatView .quick-tags{gap:5px}}



/* Dark mode surfaces: override legacy hard-coded light surfaces in the chat. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1f1e1c;
  --sidebar: #252320;
  --surface: #292724;
  --surface-soft: #33302c;
  --line: #403d38;
  --line-strong: #514c45;
  --text: #f0ece6;
  --muted: #c0b8ae;
  --subtle: #968e84;
  --accent: #e59a78;
  --accent-strong: #f0ab8c;
  --accent-soft: #3a302b;
}
:root[data-theme="dark"] html,
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell,
:root[data-theme="dark"] .main-area,
:root[data-theme="dark"] #chatView,
:root[data-theme="dark"] #chatView.active-view {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .main-area:has(#chatView.active-view) .topbar {
  background: var(--sidebar) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #chatView .chat-scroll,
:root[data-theme="dark"] #chatView:not(.has-messages) .chat-scroll,
:root[data-theme="dark"] #chatView.has-messages .chat-scroll,
:root[data-theme="dark"] #chatView #messages,
:root[data-theme="dark"] #chatView .messages {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #chatView .composer-zone,
:root[data-theme="dark"] #chatView .composer-bottom,
:root[data-theme="dark"] #chatView .composer-right {
  background: transparent !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #chatView .composer,
:root[data-theme="dark"] #chatForm.composer,
:root[data-theme="dark"] #chatView form.composer {
  background: var(--surface) !important;
  background-image: none !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.22) !important;
}
:root[data-theme="dark"] #chatView .composer textarea,
:root[data-theme="dark"] #chatView .composer textarea:focus {
  background: transparent !important;
  color: var(--text) !important;
  caret-color: var(--text);
}
:root[data-theme="dark"] #chatView .composer textarea::placeholder {
  color: var(--subtle) !important;
}
:root[data-theme="dark"] #chatView .composer-tool,
:root[data-theme="dark"] #chatView .dhwani-plus-button,
:root[data-theme="dark"] #chatView .composer-voice-button,
:root[data-theme="dark"] #chatView .composer-right > button:not(.send-button) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
}
:root[data-theme="dark"] #chatView .composer-tool:hover,
:root[data-theme="dark"] #chatView .dhwani-plus-button:hover,
:root[data-theme="dark"] #chatView .composer-voice-button:hover,
:root[data-theme="dark"] #chatView .composer-right > button:not(.send-button):hover {
  background: var(--surface-soft) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #chatView .send-button {
  background: var(--accent) !important;
  color: #241b17 !important;
  border-color: transparent !important;
}
:root[data-theme="dark"] #chatView .quick-tag {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
:root[data-theme="dark"] #chatView .quick-tag:hover {
  background: var(--surface-soft) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #chatView .message:not(.user) .message-text {
  background: transparent !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #chatView .message.user .message-content,
:root[data-theme="dark"] #chatView .message.user .message-text {
  background: #38342f !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
:root[data-theme="dark"] #chatView .message-actions .small-action {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
:root[data-theme="dark"] #chatView .plus-menu,
:root[data-theme="dark"] #chatView .topbar-menu {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.35) !important;
}
:root[data-theme="dark"] #chatView .plus-menu-item,
:root[data-theme="dark"] #chatView .topbar-menu-item {
  background: transparent !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #chatView .plus-menu-item:hover,
:root[data-theme="dark"] #chatView .topbar-menu-item:hover {
  background: var(--surface-soft) !important;
}
:root[data-theme="dark"] .profile-menu-panel,
:root[data-theme="dark"] .auth-modal,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .modal-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] .profile-menu-panel button,
:root[data-theme="dark"] .modal button {
  color: inherit;
}
:root[data-theme="dark"] .sidebar .new-chat,
:root[data-theme="dark"] .sidebar .profile-button,
:root[data-theme="dark"] .sidebar-upgrade.dhwani-top-upgrade {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] .sidebar-scroll-content .side-nav .nav-item.active,
:root[data-theme="dark"] .sidebar-scroll-content .side-nav .nav-item:hover {
  background: var(--surface-soft) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #recentChats .recent-chat:hover {
  background: var(--surface-soft) !important;
  color: var(--text) !important;
}

/* ---- Bubble-free Claude-inspired chat transcript -------------------------- */
#chatView #messages > .message,
#chatView #messages > .message.user,
#chatView #messages > .message.response {
  width: 100%;
  justify-content: flex-start !important;
  align-items: flex-start;
  margin-inline: auto;
}
#chatView #messages.messages { gap: 26px; }
#chatView #messages .message.user .message-content,
#chatView #messages .message.response .message-content {
  width: 100%;
  max-width: 760px !important;
  min-width: 0;
  flex: 0 1 760px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
#chatView #messages .message.user .message-text,
#chatView #messages .message.response .message-text {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  text-align: left;
  line-height: 1.8;
}
#chatView #messages .message.user .message-text { font-weight: 500; }
#chatView #messages .message.response .message-text.pending-typing,
#chatView #messages .message.pending-message .message-text.pending-typing {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  width: max-content !important;
  min-width: 0 !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#chatView #messages .cf-typing-indicator {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 32px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  opacity: 1 !important;
  visibility: visible !important;
}
#chatView #messages .cf-typing-indicator span {
  display: block !important;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #c96e43 !important;
  opacity: .42;
  animation: cf-typing-bounce .78s ease-in-out infinite !important;
}
#chatView #messages .cf-typing-indicator span:nth-child(2) { animation-delay: .14s; }
#chatView #messages .cf-typing-indicator span:nth-child(3) { animation-delay: .28s; }
@media (max-width: 760px) {
  #chatView #messages .message.user .message-content,
  #chatView #messages .message.response .message-content {
    max-width: 100% !important;
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #chatView #messages .cf-typing-indicator span {
    animation: none !important;
    opacity: .65;
  }
}


/* ---- Conversation alignment, true staggered typing, and sidebar sizing ---- */
/* Keep the transcript in a centered readable lane, with enough space at both edges. */
#chatView.has-messages .chat-scroll {
  padding-inline: clamp(18px, 3.8vw, 44px) !important;
}
#chatView.has-messages .messages {
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  margin-inline: auto !important;
}
/* The previous shared rule forced BOTH roles to the left. Align each role explicitly. */
#chatView #messages > .message {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  align-items: flex-start;
  margin-inline: 0 !important;
}
#chatView #messages > .message.user {
  justify-content: flex-end !important;
}
#chatView #messages > .message.response {
  justify-content: flex-start !important;
}
/* Preserve the bubble-free transcript: the user's text sits at the right, Dhwani at the left. */
#chatView #messages > .message.user .message-content {
  display: block;
  flex: 0 1 auto !important;
  width: fit-content !important;
  max-width: min(78%, 680px) !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#chatView #messages > .message.user .message-text {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  text-align: left;
}
#chatView #messages > .message.response .message-content {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}
#chatView #messages > .message.response .message-text {
  width: 100%;
  max-width: 100%;
  text-align: left;
}

/* A real left-to-right typing wave. Delays are important because the animation
   shorthand above is also important and otherwise resets animation-delay. */
#chatView #messages .cf-typing-indicator span {
  animation: dhwani-typing-wave 1.05s ease-in-out infinite !important;
}
#chatView #messages .cf-typing-indicator span:nth-child(2) {
  animation-delay: .18s !important;
}
#chatView #messages .cf-typing-indicator span:nth-child(3) {
  animation-delay: .36s !important;
}
@keyframes dhwani-typing-wave {
  0%, 60%, 100% { transform: translateY(0); opacity: .38; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* A little more room for navigation without letting it crowd smaller screens. */
@media (min-width: 901px) {
  .sidebar {
    width: 304px !important;
    min-width: 304px !important;
    flex: 0 0 304px !important;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  .sidebar {
    width: 288px !important;
    min-width: 288px !important;
    flex: 0 0 288px !important;
  }
}
@media (max-width: 760px) {
  .sidebar {
    width: min(300px, 86vw) !important;
    min-width: min(300px, 86vw) !important;
    flex: 0 0 min(300px, 86vw) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #chatView #messages .cf-typing-indicator span {
    animation: none !important;
    opacity: .65;
  }
}


.sidebar-footer .sidebar-settings-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sidebar-footer .sidebar-settings-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--text);
}
.sidebar-footer .sidebar-settings-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}