:root{
  --cream:#F5F0E6;
  --cream-2:#FBF8F2;
  --ink:#2B2823;
  --ink-soft:#756E60;
  --sidebar:#1a1a2e;
  --sidebar-line:rgba(255,255,255,0.08);
  --sidebar-text:#E8E4D9;
  --sidebar-text-soft:#9A9587;
  --clay:#C96442;
  --clay-soft:#F0DDD2;
  --green:#2F5D3E;
  --green-soft:#DCE8DD;
  --border:rgba(43,40,35,0.13);
  --shadow:0 1px 2px rgba(43,40,35,0.06);
  --hover-bg:rgba(43,40,35,0.06);
  --settings-bg:#FBF8F2;
  --overlay-bg:rgba(0,0,0,0.4);
  --sidebar-width:280px;
}

/* Dark Theme - Dark Blue */
[data-theme="dark"] {
  --cream:#0f0f1a;
  --cream-2:#16162e;
  --ink:#E8E4D9;
  --ink-soft:#9A9587;
  --sidebar:#0a0a1a;
  --sidebar-text:#E8E4D9;
  --sidebar-text-soft:#6a665a;
  --border:rgba(100,100,200,0.15);
  --shadow:0 1px 2px rgba(0,0,0,0.3);
  --hover-bg:rgba(100,100,200,0.1);
  --settings-bg:#16162e;
  --clay-soft:#2a1a2a;
  --green-soft:#0a2a1f;
  --overlay-bg:rgba(0,0,0,0.7);
  --clay:#7a4a6a;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;}
body{
  font-family:'Noto Sans Bengali','Inter',sans-serif;
  background:var(--cream);
  color:var(--ink);
  display:flex;
  overflow:hidden;
  position:relative;
  height:100vh;
  height:100dvh;
}
::selection{background:var(--clay-soft);}

/* ---------- Sidebar Overlay (Mobile only) ---------- */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  z-index:45;
  opacity:0;
  transition:opacity 0.3s ease;
}
.sidebar-overlay.open{
  display:block;
  opacity:1;
}

/* ---------- Sidebar ---------- */
.sidebar{
  display:flex;
  flex-direction:column;
  background:var(--sidebar);
  color:var(--sidebar-text);
  padding:20px 14px;
  box-shadow:2px 0 20px rgba(0,0,0,0.3);
  flex-shrink:0;
  overflow:hidden;
  transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop: Sidebar always visible */
@media (min-width: 769px) {
  .sidebar {
    position:relative;
    width:var(--sidebar-width);
    min-width:var(--sidebar-width);
    height:100vh;
    height:100dvh;
    z-index:10;
    transform:translateX(0) !important;
    border-right:0.5px solid var(--sidebar-line);
  }
  .sidebar-close-btn {
    display:none !important;
  }
  .menu-btn {
    display:none !important;
  }
  .sidebar-overlay {
    display:none !important;
  }
}

/* Mobile: Sidebar slides in/out */
@media (max-width: 768px) {
  .sidebar {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:var(--sidebar-width);
    min-width:var(--sidebar-width);
    z-index:50;
    transform:translateX(-100%);
    box-shadow:2px 0 20px rgba(0,0,0,0.3);
  }
  .sidebar.open {
    transform:translateX(0);
  }
  .sidebar-close-btn {
    display:flex !important;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.1);
    color:var(--sidebar-text);
    cursor:pointer;
    font-size:18px;
    transition:background 0.15s ease;
  }
  .sidebar-close-btn:hover {
    background:rgba(255,255,255,0.2);
  }
  .menu-btn {
    display:flex !important;
  }
}

.sidebar-close-btn{
  display:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 20px;
}
.brand-mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(155deg,var(--clay),#a84f31);
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Serif Bengali',serif;
  font-weight:700;font-size:15px;color:#fff;
  flex-shrink:0;
}
.brand-name{
  font-family:'Noto Serif Bengali',serif;
  font-weight:600;font-size:16.5px;
  letter-spacing:0.01em;
}
.new-chat{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,0.05);
  border:0.5px solid var(--sidebar-line);
  color:var(--sidebar-text);
  border-radius:10px;
  padding:10px 13px;
  font-size:13.5px;
  font-family:inherit;
  cursor:pointer;
  margin-bottom:22px;
  transition:background 0.15s ease;
}
.new-chat:hover{background:rgba(255,255,255,0.09);}
.new-chat svg{flex-shrink:0;}

.side-label{
  font-size:11px;
  color:var(--sidebar-text-soft);
  text-transform:uppercase;
  letter-spacing:0.07em;
  padding:0 8px 8px;
}
.class-select{
  margin:0 0 20px;
  background:rgba(255,255,255,0.05);
  border:0.5px solid var(--sidebar-line);
  color:var(--sidebar-text);
  font-family:inherit;font-size:13px;
  border-radius:8px;padding:8px 10px;
  width:100%;
  cursor:pointer;
}
.class-select option{
  background:var(--sidebar);
  color:var(--sidebar-text);
}

.history-scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:1px;
  margin:0 -4px;
  padding:0 4px;
}
.history-scroll::-webkit-scrollbar {
  width: 4px;
}
.history-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.history-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}
.history-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.3);
}
.history-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.history-item{
  padding:8px 8px;
  border-radius:8px;
  font-size:13px;
  color:var(--sidebar-text-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
  flex-shrink:0;
}
.history-item:hover{background:rgba(255,255,255,0.06);color:var(--sidebar-text);}

.sidebar-footer{
  border-top:0.5px solid var(--sidebar-line);
  padding-top:12px;margin-top:8px;
  font-size:12px;color:var(--sidebar-text-soft);
}
.settings-btn{
  display:flex;align-items:center;gap:9px;
  width:100%;background:none;border:none;
  color:var(--sidebar-text-soft);font-family:inherit;
  font-size:13px;padding:8px;border-radius:8px;
  cursor:pointer;transition:background 0.15s ease, color 0.15s ease;
}
.settings-btn:hover{background:rgba(255,255,255,0.06);color:var(--sidebar-text);}
.history-empty{
  font-size:12.5px;color:var(--sidebar-text-soft);
  padding:8px;opacity:0.7;
}

/* ---------- Settings Panel ---------- */
.settings-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(20,18,15,0.45);
  z-index:100;
  align-items:center;
  justify-content:center;
}
.settings-overlay.open{display:flex;}
.settings-panel{
  background:var(--settings-bg);
  color:var(--ink);
  border-radius:16px;
  width:360px;max-width:90vw;
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
  overflow:hidden;
}
.settings-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:0.5px solid var(--border);
  font-family:'Noto Serif Bengali',serif;
  font-weight:600;font-size:15px;
}
.settings-close{
  background:none;border:none;font-size:20px;
  color:var(--ink-soft);cursor:pointer;line-height:1;
}
.settings-body{padding:18px;}
.settings-desc{font-size:13px;color:var(--ink-soft);margin:0 0 16px;line-height:1.6;}

.theme-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:0.5px solid var(--border);
}
.theme-toggle-row label{
  font-size:13.5px;
  cursor:pointer;
}
.theme-toggle{
  position:relative;
  width:48px;
  height:26px;
  background:var(--border);
  border-radius:13px;
  cursor:pointer;
  transition:background 0.3s ease;
  flex-shrink:0;
}
.theme-toggle.active{
  background:var(--clay);
}
.theme-toggle .toggle-knob{
  position:absolute;
  top:2px;
  left:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:white;
  transition:transform 0.3s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.theme-toggle.active .toggle-knob{
  transform:translateX(22px);
}

.settings-stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13.5px;
  padding:9px 0;
  border-bottom:0.5px solid var(--border);
}
.danger-btn{
  width:100%;
  margin-top:18px;
  background:#B3432F;
  color:#fff;
  border:none;
  padding:11px;
  border-radius:10px;
  font-family:inherit;
  font-size:13.5px;
  cursor:pointer;
  transition:background 0.15s ease;
}
.danger-btn:hover{background:#8f3323;}

/* ---------- Main ---------- */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  width:100%;
  position:relative;
  min-width:0;
  overflow:hidden;
  background:var(--cream);
}
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:0.5px solid var(--border);
  flex-shrink:0;
  background:var(--cream);
  min-height:56px;
  padding-top:env(safe-area-inset-top, 12px);
}
.menu-btn{
  width:36px;height:36px;
  border-radius:8px;
  border:none;
  background:none;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.15s ease;
}
.menu-btn:hover{background:var(--hover-bg);}
.menu-btn svg{width:20px;height:20px;}

.topbar-title{
  font-size:14px;color:var(--ink-soft);
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.topbar-title b{color:var(--ink);font-weight:600;}

.landing{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:20px;
  text-align:center;
  overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom, 20px);
}
.landing-mark{
  width:52px;height:52px;border-radius:15px;
  background:linear-gradient(155deg,var(--clay),#a84f31);
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Serif Bengali',serif;
  font-weight:700;font-size:24px;color:#fff;
  margin-bottom:20px;
  box-shadow:0 6px 20px rgba(201,100,66,0.25);
}
.landing h1{
  font-family:'Noto Serif Bengali',serif;
  font-weight:600;
  font-size:clamp(22px, 5vw, 30px);
  margin:0 0 10px;color:var(--ink);
}
.landing p{
  font-size:15px;color:var(--ink-soft);
  margin:0 0 30px;max-width:440px;line-height:1.7;
}
.quick-subjects{
  display:flex;flex-wrap:wrap;gap:9px;
  justify-content:center;
  margin-bottom:34px;max-width:520px;
}
.msg-footer{
  display:flex;align-items:center;gap:10px;
  margin-top:10px;padding-top:8px;
  font-size:11.5px;color:#A39C8C;
  flex-wrap:wrap;
}
.msg-footer .copy-btn{
  display:flex;align-items:center;gap:5px;
  background:none;border:none;color:#A39C8C;
  font-family:inherit;font-size:11.5px;
  cursor:pointer;padding:3px 6px;border-radius:6px;
  transition:background 0.15s ease, color 0.15s ease;
}
.msg-footer .copy-btn:hover{background:var(--hover-bg);color:var(--ink-soft);}
.chip{
  display:flex;align-items:center;gap:7px;
  background:var(--cream-2);
  border:0.5px solid var(--border);
  border-radius:10px;
  padding:9px 15px;
  font-size:13.5px;color:var(--ink-soft);
  font-family:inherit;
  cursor:default;
  opacity:0.85;
}
.chip .emoji{font-size:15px;}

.composer-wrap{
  width:100%;
  max-width:760px;
  padding:0 12px 16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  flex-shrink:0;
  margin:0 auto;
}
.composer{
  display:flex;
  align-items:flex-end;
  gap:6px;
  background:var(--cream-2);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:8px 8px 8px 12px;
  box-shadow:var(--shadow);
}
.image-preview-row{
  padding:0 4px 8px;
}
.image-preview-chip{
  position:relative;display:inline-block;
  width:52px;height:52px;border-radius:10px;
  overflow:hidden;border:0.5px solid var(--border);
}
.image-preview-chip img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.image-preview-chip button{
  position:absolute;top:-6px;right:-6px;
  width:19px;height:19px;border-radius:50%;
  background:var(--ink);color:#fff;border:none;
  font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.msg-user .attached-image{
  max-width:160px;border-radius:12px;margin-bottom:6px;display:block;
}
.composer textarea{
  flex:1;border:none;background:none;resize:none;
  font-family:'Noto Sans Bengali','Inter',sans-serif;
  font-size:14px;color:var(--ink);
  line-height:1.5;max-height:120px;padding:6px 0;
  outline:none;
  min-height:36px;
}
.composer textarea::placeholder{color:#A39C8C;}
.composer-icon-btn{
  width:32px;height:32px;border-radius:50%;
  border:none;background:none;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background 0.15s ease;
}
.composer-icon-btn:hover{background:var(--hover-bg);}

.send-wrapper {
  display: flex;
  align-items: center;
  gap:4px;
  flex-shrink:0;
}
.send-btn{
  width:34px;height:34px;border-radius:50%;
  border:none;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background 0.15s ease, transform 0.1s ease;
}
.send-btn:hover{background:#254a31;}
.send-btn:active{transform:scale(0.92);}
.send-btn:disabled{opacity:0.4;cursor:not-allowed;}

.stop-btn{
  width:34px;height:34px;border-radius:50%;
  border:none;background:#B3432F;color:#fff;
  display:none;
  align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background 0.15s ease;
}
.stop-btn:hover{background:#8f3323;}
.stop-btn.show{display:flex;}

.composer-foot{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#A39C8C;
  padding:6px 4px 0;
  flex-wrap:wrap;
  gap:4px;
}

.chat-view{display:none;flex:1;flex-direction:column;min-height:0;}
.chat-view.active{display:flex;}
.messages{
  flex:1;overflow-y:auto;
  padding:16px 14px 10px;
  display:flex;flex-direction:column;gap:18px;
  max-width:760px;width:100%;margin:0 auto;
  background:var(--cream);
  -webkit-overflow-scrolling:touch;
}
.messages::-webkit-scrollbar {
  width: 3px;
}
.messages::-webkit-scrollbar-track {
  background: transparent;
}
.messages::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.messages::-webkit-scrollbar-thumb:hover {
  background: var(--ink-soft);
}
.messages {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.msg-user{align-self:flex-end;max-width:85%;}
.msg-user .bubble{
  background:var(--cream-2);
  border:0.5px solid var(--border);
  border-radius:16px 16px 4px 16px;
  padding:10px 14px;
  font-size:14px;line-height:1.6;
  color:var(--ink);
}
.msg-ai{align-self:flex-start;max-width:95%;width:100%;}
.msg-ai-inner{
  display:flex;gap:10px;align-items:flex-start;
}
.ai-avatar{
  width:24px;height:24px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(155deg,var(--clay),#a84f31);
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Serif Bengali',serif;
  font-weight:700;
  font-size:11px;color:#fff;margin-top:2px;
}
.ai-content{
  font-size:14px;line-height:1.7;color:var(--ink);
  flex:1;min-width:0;
  overflow-wrap:break-word;
  word-break:break-word;
}
.ai-content h3{
  font-family:'Noto Serif Bengali',serif;
  font-weight:600;font-size:17px;
  color:var(--ink);
  margin:14px 0 6px;
}
.ai-content h3:first-child{margin-top:0;}
.ai-content p{margin:0 0 10px;}
.ai-content ul{margin:0 0 10px;padding-left:18px;}
.ai-content li{margin-bottom:3px;}
.ai-content b{font-weight:600;color:var(--ink);}
.summary-box{
  background:var(--green-soft);
  border-left:3px solid var(--green);
  border-radius:8px;
  padding:10px 14px;
  margin:12px 0;
  font-size:13.5px;
}
.summary-box b{color:var(--green);}
.practice-box{
  border:0.5px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  margin:12px 0 4px;
  background:var(--cream-2);
}
.practice-box .practice-label{
  font-family:'Noto Serif Bengali',serif;
  font-weight:600;font-size:14px;
  color:var(--clay);margin-bottom:4px;
}
.formula-box{
  background:var(--ink);
  color:var(--cream);
  border-radius:10px;
  padding:14px 16px;
  margin:10px 0 14px;
  font-family:'Inter',monospace;
  font-size:15px;font-weight:500;
  text-align:center;letter-spacing:0.02em;
  overflow-x:auto;
}
.var-list{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:4px;
}
.var-list li{
  display:flex;gap:10px;font-size:13.5px;
  padding:2px 0;
}
.var-list .var-sym{
  font-family:'Inter',monospace;font-weight:600;
  color:var(--clay);min-width:30px;flex-shrink:0;
}
.example-box{
  border:0.5px solid var(--border);
  border-left:3px solid var(--ink-soft);
  border-radius:8px;
  padding:12px 16px;
  margin:12px 0;
  background:rgba(43,40,35,0.02);
}
.example-box .example-label{
  font-family:'Noto Serif Bengali',serif;
  font-weight:600;font-size:14px;
  color:var(--ink);margin-bottom:4px;
}

.cursor{
  display:inline-block;width:2px;height:14px;
  background:var(--ink);margin-left:1px;
  vertical-align:middle;
  animation:blink 0.9s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}
.loading-text{
  animation:fadepulse 1.4s ease-in-out infinite;
}
@keyframes fadepulse{
  0%,100%{opacity:0.35;}
  50%{opacity:1;}
}

.stop-indicator {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--clay);
  margin-right:8px;
  animation:pulse-dot 0.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100%{opacity:0.3;transform:scale(0.9);}
  50%{opacity:1;transform:scale(1.1);}
}

@media (prefers-reduced-motion: reduce){
  .cursor{animation:none;}
  .loading-text{animation:none;}
  .stop-indicator{animation:none;}
}

/* ---------- Custom Modal ---------- */
.custom-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.custom-modal {
  background: var(--cream-2);
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

.custom-modal-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.custom-modal-message {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
}

.custom-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.custom-modal-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.custom-modal-btn:active {
  transform: scale(0.96);
}

.custom-modal-btn.cancel {
  background: var(--border);
  color: var(--ink-soft);
}

.custom-modal-btn.cancel:hover {
  background: rgba(43, 40, 35, 0.15);
}

.custom-modal-btn.confirm {
  background: #B3432F;
  color: #fff;
}

.custom-modal-btn.confirm:hover {
  background: #8f3323;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

[data-theme="dark"] .custom-modal {
  background: var(--settings-bg);
}

[data-theme="dark"] .custom-modal-btn.cancel {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-soft);
}

[data-theme="dark"] .custom-modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ---------- Small Mobile ---------- */
@media (max-width: 480px){
  .composer{padding:6px 6px 6px 10px;}
  .composer textarea{font-size:13px;}
  .msg-user .bubble{font-size:13px;padding:8px 12px;}
  .ai-content{font-size:13px;}
  .ai-content h3{font-size:15px;}
  .topbar{padding:10px 12px;min-height:48px;}
  .landing h1{font-size:clamp(20px, 4.5vw, 26px);}
  .messages{padding:12px 10px 8px;gap:14px;}
  .composer-wrap{padding:0 8px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
  .formula-box{font-size:13px;padding:12px 14px;}
}