/* =========================================================
   StudyBuddy — Minimal Beige UX
   Courses + Projects + AI Settings Panel + Composer
   Compact Printable Test Layout + Inline Answers
   ========================================================= */

:root{
  --bg: #F3EEE4;
  --bg2:#EEE7DB;

  --card:#FFFFFF;
  --card2:#FBFAF7;

  --stroke: rgba(0,0,0,.10);
  --stroke2: rgba(0,0,0,.16);

  --text:#000000;
  --muted: rgba(0,0,0,.60);

  --btn:#000000;
  --btnHover:#222222;
  --btnText:#FFFFFF;

  --folderInactive:#E7E0D4;
  --folderInactiveHover:#EFE9DF;

  --radius:18px;
  --shadow:0 12px 40px rgba(0,0,0,.10);
}

/* DEFAULT BEIGE */
body[data-theme="beige"]{
  --bg: #F3EEE4;
  --bg2:#EEE7DB;

  --card:#FFFFFF;
  --card2:#FBFAF7;

  --stroke: rgba(0,0,0,.10);
  --stroke2: rgba(0,0,0,.16);

  --text:#000000;
  --muted: rgba(0,0,0,.60);

  --btn:#000000;
  --btnHover:#222222;
  --btnText:#FFFFFF;

  --folderInactive:#E7E0D4;
  --folderInactiveHover:#EFE9DF;

  --shadow:0 12px 40px rgba(0,0,0,.10);
}

/* FOREST GREEN */
body[data-theme="forest"]{
  --bg: #EEF3EA;
  --bg2:#DDE8D4;

  --card:#FFFFFF;
  --card2:#F6FAF3;

  --stroke: rgba(22,64,38,.12);
  --stroke2: rgba(22,64,38,.22);

  --text:#102114;
  --muted: rgba(16,33,20,.62);

  --btn:#173D24;
  --btnHover:#225C35;
  --btnText:#FFFFFF;

  --folderInactive:#CFE0C4;
  --folderInactiveHover:#DCEAD5;

  --shadow:0 12px 40px rgba(22,64,38,.12);
}

/* WARM RED */
body[data-theme="warm-red"]{
  --bg: #F6ECE8;
  --bg2:#EEDCD5;

  --card:#FFFFFF;
  --card2:#FCF7F5;

  --stroke: rgba(90,28,20,.12);
  --stroke2: rgba(90,28,20,.22);

  --text:#24110E;
  --muted: rgba(36,17,14,.62);

  --btn:#5A1C14;
  --btnHover:#7A2A20;
  --btnText:#FFFFFF;

  --folderInactive:#E8CFC7;
  --folderInactiveHover:#F0DDD8;

  --shadow:0 12px 40px rgba(90,28,20,.12);
}

/* GOLDEN BROWN */
body[data-theme="golden-brown"]{
  --bg: #F4EBD8;
  --bg2:#E8D7B8;

  --card:#FFFFFF;
  --card2:#FBF6EA;

  --stroke: rgba(80,54,18,.12);
  --stroke2: rgba(80,54,18,.24);

  --text:#241A0B;
  --muted: rgba(36,26,11,.62);

  --btn:#5A3A12;
  --btnHover:#76501B;
  --btnText:#FFFFFF;

  --folderInactive:#DCC48F;
  --folderInactiveHover:#E8D6A9;

  --shadow:0 12px 40px rgba(80,54,18,.13);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body{ overflow-x:hidden; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
}

/* AUTH */
.authScreen{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.authCard{
  width:min(520px, 94vw);
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  overflow: visible;
}

.brandRow{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.sbBadge{
  width:44px;
  height:44px;
  border-radius:14px;
  background: var(--card2);
  border:1px solid var(--stroke);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

.brandTitle{
  font-weight:800;
  font-size:18px;
  color:var(--text);
}

.brandSub{
  color:var(--muted);
  font-size:13px;
}

/* LAYOUT */
.appScreen{
  display:flex;
  height:100%;
  min-width:0;
  background:var(--bg);
  position:relative;
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
}

/* SIDEBAR */
.sidebar{
  width:280px;
  min-width:280px;
  background: var(--bg2);
  border-right:1px solid var(--stroke);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition: width .2s ease, min-width .2s ease, padding .2s ease;
  overflow-y:auto;
}

.sidebar.collapsed{
  width:0;
  min-width:0;
  padding:0;
  overflow:hidden;
  border-right:none;
}

.sidebarTab{
  position:absolute;
  left:280px;
  top:92px;
  z-index:25;

  width:28px;
  height:58px;

  border-radius:0 14px 14px 0;
  border:1px solid var(--stroke2);
  border-left:none;

  background:var(--card);
  color:var(--text);

  cursor:pointer;
  font-weight:900;
  font-size:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:left .2s ease, background .15s ease;
}

.sidebarTab:hover{
  background:var(--card2);
}

.appScreen.sidebarClosed .sidebarTab{
  left:0;
}

.sidebarSection{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sectionTitle{
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(0,0,0,.55);
  padding:2px 2px 0 2px;
}

/* NEW CHAT */
.newChatBtn{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid var(--stroke2);
  background: var(--btn);
  color: var(--btnText);
  cursor:pointer;
  font-weight:800;
  font-size:15px;
}

.newChatBtn:hover{
  background: var(--btnHover);
}

.smallActionBtn{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  font-size:14px;
}

.smallActionBtn:hover{
  background:var(--card2);
}

.chatList{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  padding-right:4px;
  max-height: 24vh;
}

.chatRow{
  display:flex;
  align-items:center;
  gap:8px;
}

.chatItem{
  flex:1;
  height:56px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: var(--card);
  cursor:pointer;
  color: var(--text);
  font-size:15px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  text-align:center;
}

.chatItem:hover{
  border-color: var(--stroke2);
  background: var(--card2);
}

.chatItem.active{
  background: var(--folderInactive);
  border-color: var(--stroke2);
}

.chatDelete{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background: var(--card);
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px;
  flex-shrink:0;
}

.chatDelete:hover{
  background: var(--card2);
  border-color: var(--stroke2);
}

/* COURSES */
.courseSearch{
  width:100%;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background: var(--card);
  color: var(--text);
  padding:10px 12px;
  outline:none;
  font-size:15px;
}

.courseSearch::placeholder{
  color: rgba(0,0,0,.35);
}

.folderRow{
  display:flex;
  gap:8px;
}

.folderBtn{
  flex:1;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background: var(--folderInactive);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
  font-size:15px;
}

.folderBtn:hover{
  background: var(--folderInactiveHover);
}

.folderBtn.active{
  background: var(--card);
  color: var(--text);
  border-color: var(--stroke2);
}

.courseList{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding-right:4px;
  max-height: 26vh;
}

.courseItem{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: var(--card);
  cursor:pointer;
  text-align:left;
  font-weight:800;
  font-size:15px;
}

.courseItem:hover{
  border-color: var(--stroke2);
  background: var(--card2);
}

.courseEmpty{
  color: rgba(0,0,0,.55);
  font-size: 13px;
  padding: 8px 4px;
}

.courseGrade{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.courseGradeTitle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(0,0,0,.65);
  background: transparent;
  border: none;
  padding: 8px 2px 2px 2px;
  cursor: pointer;
  text-align:left;
}

.courseGradeTitle:hover{
  opacity:.8;
}

.courseGradeTitleStatic{
  font-weight:900;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(0,0,0,.65);
  padding: 8px 2px 2px 2px;
}

.courseGradeChevron{
  font-size:16px;
  line-height:1;
}

/* CUSTOM PROJECTS */
.projectList{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:30vh;
  overflow:auto;
  padding-right:4px;
}

.projectFolder{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.projectFolderHeaderRow{
  display:flex;
  align-items:center;
  gap:6px;
}

.projectFolderHeader{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:none;
  background:transparent;
  color:rgba(0,0,0,.68);
  cursor:pointer;
  text-align:left;
  padding:8px 2px 2px 2px;

  font-weight:900;
  font-size:13px;
  letter-spacing:.07em;
  text-transform:uppercase;

  min-width:0;
}

.projectFolderHeader:hover{
  opacity:.8;
}

.projectChevron{
  font-size:16px;
  line-height:1;
}

.projectDeleteBtn{
  width:28px;
  height:28px;
  border-radius:9px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;
}

.projectDeleteBtn:hover{
  background:var(--card2);
  border-color:var(--stroke2);
}

.projectNewTab{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px dashed var(--stroke2);
  background:var(--card2);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  text-align:left;
}

.projectNewTab:hover{
  background:var(--card);
}

.projectTabRow{
  display:flex;
  align-items:center;
  gap:6px;
}

.projectTab{
  flex:1;
  min-height:42px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  font-weight:750;
  font-size:14px;
  text-align:left;

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.projectTab:hover{
  background:var(--card2);
  border-color:var(--stroke2);
}

.projectTab.active{
  background:var(--folderInactive);
  border-color:var(--stroke2);
}

.projectTabDelete{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:var(--card);
  cursor:pointer;
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;
}

.projectTabDelete:hover{
  background:var(--card2);
  border-color:var(--stroke2);
}

.projectEmpty{
  color:rgba(0,0,0,.55);
  font-size:13px;
  padding:7px 4px;
}

/* TOP BAR */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--stroke);
  background: var(--bg2);
}

.topLeft{
  display:flex;
  align-items:center;
  gap:12px;
}

.topRight{
  display:flex;
  align-items:center;
  gap:10px;
}

.iconBtn{
  padding:10px 14px;
  border-radius:16px;
  border:1px solid var(--stroke2);
  background: var(--card);
  color: var(--text);
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}

.iconBtn:hover{
  background: var(--card2);
}

.aiSettingsBtn{
  font-weight:800;
  gap:4px;
}

.logoutBtn{
  padding:10px 16px;
  border-radius:16px;
  border:1px solid var(--stroke2);
  background: var(--btn);
  color: var(--btnText);
  cursor:pointer;
  font-weight:800;
  min-height:44px;
  font-size:15px;
}

.logoutBtn:hover{
  background: var(--btnHover);
}

/* AI SETTINGS PANEL */
.settingsBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.12);
  z-index:30;
}

.aiSettingsPanel{
  position:fixed;
  top:0;
  right:0;
  width:min(320px, 92vw);
  height:100%;
  background:var(--bg2);
  border-left:1px solid var(--stroke);
  box-shadow:-12px 0 40px rgba(0,0,0,.12);
  z-index:40;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;

  transform:translateX(110%);
  transition:transform .2s ease;
}

.aiSettingsPanel.open{
  transform:translateX(0);
}

.settingsHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.settingsTitle{
  font-weight:900;
  font-size:18px;
}

.settingsSub{
  color:var(--muted);
  font-size:13px;
  margin-top:2px;
}

.settingsClose{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

.settingsClose:hover{
  background:var(--card2);
}

.settingsGroup{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.settingsLabel{
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(0,0,0,.58);
}

.settingsSelect{
  width:100%;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background:var(--card);
  color:var(--text);
  padding:11px 12px;
  outline:none;
  font-size:15px;
}

.settingsNote{
  margin-top:auto;
  padding:12px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--stroke);
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

/* CHAT */
.chat{
  flex:1;
  overflow:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;

  min-width:0;
  overflow-x:hidden;
}

.msg{
  max-width:min(800px, 92%);
  border-radius:16px;
  border:1px solid var(--stroke);
  background: var(--card);
  color: var(--text);
  line-height:1.5;
  font-size:16px;

  overflow-wrap:anywhere;
  word-break:break-word;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);

  padding:11px 13px;
}

.msg.user{
  margin-left:auto;
  border-color: var(--stroke2);
  background: var(--card);
  color: var(--text);

  width: fit-content;
  max-width: min(580px, 82%);
  text-align: left;
}

.msg.ai{
  margin-right:auto;
  position:relative;

  padding:11px 46px 11px 13px;
  text-align: left;
}

.msg p{
  margin:7px 0;
}

.msg ul,
.msg ol{
  margin:7px 0 7px 20px;
}

.msg pre{
  white-space:pre-wrap;
  word-break:break-word;
}

/* MathJax overflow safety */
.msg mjx-container[jax="CHTML"][display="true"]{
  margin: 10px 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.msg mjx-container{
  max-width: 100%;
}

/* COPY */
.copyBtn{
  position:absolute;
  top:10px;
  right:10px;

  width:30px;
  height:30px;

  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.70);
  color:#111;

  cursor:pointer;
  font-weight:800;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:1;
  transition: transform .15s ease, background .15s ease;
}

.copyBtn:hover{
  transform: translateY(-1px);
  background:rgba(255,255,255,.92);
}

.copyToast{
  position:absolute;
  top:10px;
  right:48px;

  padding:6px 10px;
  border-radius:10px;

  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.78);
  color:#fff;
  font-size:12px;
  font-weight:700;
}

/* IMAGES */
.msg.user img.chat-image{
  display:block;
}

.msg.user:has(img.chat-image){
  padding:8px;
  max-width:300px;
  width:auto;
}

.msg.user:has(img.chat-image) + .msg{
  margin-top:6px;
}

.chat-image{
  width:100%;
  max-width:280px;
  border-radius:10px;
  border:1px solid var(--stroke);
}

/* QUIZ */
.reveal-btn{
  margin-top:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background: var(--btn);
  color: var(--btnText);
  cursor:pointer;
  font-weight:800;
  font-size:15px;
}

.reveal-btn:hover{
  background: var(--btnHover);
}

.answer-box{
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: var(--card2);
}

/* PRINTABLE TEST CARD — COMPACT VIEW */
.testCard{
  width:min(920px, 100%);
  max-width:min(920px, 98%);
  margin-right:auto;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:14px;
  color:var(--text);
}

.testHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  border-bottom:1px solid var(--stroke);
  padding-bottom:10px;
  margin-bottom:10px;
}

.testTitle{
  font-size:19px;
  font-weight:950;
  line-height:1.1;
}

.testMeta{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}

.testActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.testActionBtn{
  padding:7px 10px;
  border-radius:11px;
  border:1px solid var(--stroke2);
  background:var(--card2);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}

.testActionBtn.primary{
  background:var(--btn);
  color:var(--btnText);
}

.testActionBtn:hover{
  filter:brightness(.98);
}

.testInstructions{
  background:var(--card2);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:10px;
  margin-bottom:10px;
  font-size:14px;
  line-height:1.35;
}

.testInstructions p{
  margin:5px 0;
}

.testSection{
  border-top:1px solid var(--stroke);
  padding-top:10px;
  margin-top:10px;
}

.testSectionTitle{
  font-weight:950;
  font-size:16px;
  margin-bottom:6px;
}

.testQuestion{
  padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
}

.testQuestionTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}

.testQuestionNumber{
  font-weight:950;
  font-size:14px;
}

.testPoints{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.testPrompt{
  font-size:14px;
  line-height:1.35;
}

.testPrompt p{
  margin:4px 0;
}

.testChoices{
  margin-top:5px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.testChoice{
  padding-left:8px;
  font-size:14px;
  line-height:1.3;
}

.testChoice p{
  display:inline;
  margin:0;
}

.answerLines{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.answerLine{
  height:13px;
  border-bottom:1px solid rgba(0,0,0,.28);
}

/* INLINE ANSWERS UNDER QUESTIONS */
.inlineAnswer{
  display:none;
  margin-top:8px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:var(--card2);
  font-size:14px;
  line-height:1.35;
}

.inlineAnswer.open{
  display:block;
}

.inlineAnswerTitle{
  font-weight:950;
  margin-bottom:4px;
}

.inlineAnswerSteps{
  margin:6px 0 0 18px;
}

.inlineAnswerSteps li{
  margin:3px 0;
}

/* Old answer key container stays hidden now because answers are inline */
.answerKeyWrap{
  display:none !important;
}

/* COMPOSER */
.composer{
  border-top:1px solid var(--stroke);
  padding:9px 14px;
  background: var(--bg2);
}

.composerInner{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.inputBubble{
  flex:1;
  min-width:0;
  min-height:46px;
  max-height:150px;

  display:flex;
  align-items:center;
  gap:8px;

  border-radius:18px;
  border:1px solid var(--stroke2);
  background:var(--card);
  padding:6px 8px;
}

.plusUploadBtn{
  width:32px;
  height:32px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;
  border:none;
  background:transparent;
  color:var(--text);

  font-size:26px;
  font-weight:400;
  line-height:0;
  padding-bottom:3px;
  cursor:pointer;
  user-select:none;
}

.plusUploadBtn:hover{
  background:var(--card2);
}

.bubbleMode{
  flex:0 0 auto;
  width:132px;
  height:34px;
  border:none;
  background:var(--card2);
  color:var(--text);
  border-radius:13px;
  padding:0 10px;
  outline:none;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  text-align:center;
}

.input{
  flex:1;
  width:100%;
  min-width:0;
  resize:none;

  height:32px;
  max-height:130px;

  padding:5px 8px;
  border:none;
  background: transparent;
  color: var(--text);
  outline:none;
  font-size:16px;

  text-align:left;

  overflow-y:auto;
  overflow-x:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.input::placeholder{
  color: rgba(0,0,0,.35);
  text-align:center;
}

.sendBtn{
  padding:10px 20px;
  min-height:46px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.20);
  background: var(--btn);
  color: var(--btnText);
  cursor:pointer;
  font-weight:900;
  font-size:16px;
  flex:0 0 auto;
}

.sendBtn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.sendBtn:hover{
  background: var(--btnHover);
}

/* IMAGE PREVIEW */
.imagePreview{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
}

.imageThumb{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--stroke);
}

.imageMeta{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.imageName{
  color:var(--muted);
  font-size:13px;
}

.clearImage{
  width:fit-content;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background: var(--card);
  color: var(--text);
  cursor:pointer;
  font-weight:800;
}

.clearImage:hover{
  background: var(--card2);
}

/* CLERK SIGN-IN */
#signIn{
  width: 100%;
  display: grid;
  place-items: center;
}

#signIn .cl-rootBox,
#signIn [class*="cl-rootBox"]{
  width: 100%;
  display: grid;
  place-items: center;
}

#signIn .cl-card,
#signIn [class*="cl-card"]{
  width: min(420px, 100%);
  margin: 0 auto !important;
}

/* FIRST LOGIN ONBOARDING TOUR */
.introOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.48);
  backdrop-filter: blur(2px);
}

.introSpotlight{
  position:fixed;
  border-radius:18px;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.48),
    0 16px 45px rgba(0,0,0,.28),
    0 0 0 7px rgba(255,255,255,.18);
  pointer-events:none;
  transition:
    top .22s ease,
    left .22s ease,
    width .22s ease,
    height .22s ease,
    border-radius .22s ease;
}

.introCard{
  position:fixed;
  width:min(360px, calc(100vw - 28px));
  background:var(--card);
  color:var(--text);
  border:1px solid var(--stroke2);
  border-radius:20px;
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  padding:16px;
  z-index:10000;
  transition:
    top .22s ease,
    left .22s ease,
    transform .22s ease;
}

.introTopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.introStepCount{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.introSkipBtn{
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
  font-weight:900;
  padding:6px 8px;
  border-radius:10px;
}

.introSkipBtn:hover{
  background:var(--card2);
  color:var(--text);
}

.introTitle{
  font-size:20px;
  line-height:1.15;
  font-weight:950;
  margin-bottom:8px;
}

.introText{
  font-size:15px;
  line-height:1.45;
  color:var(--muted);
}

.introActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

.introBackBtn,
.introNextBtn{
  min-height:40px;
  padding:9px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  font-size:14px;
}

.introBackBtn{
  border:1px solid var(--stroke2);
  background:var(--card);
  color:var(--text);
}

.introBackBtn:hover{
  background:var(--card2);
}

.introBackBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.introNextBtn{
  border:1px solid rgba(0,0,0,.20);
  background:var(--btn);
  color:var(--btnText);
}

.introNextBtn:hover{
  background:var(--btnHover);
}

.introTourActive .introTarget{
  position:relative;
  z-index:10001 !important;
}

/* RESPONSIVE */
@media (max-width: 760px){
  .sidebar{
    width:260px;
    min-width:260px;
  }

  .sidebarTab{
    left:260px;
  }

  .appScreen.sidebarClosed .sidebarTab{
    left:0;
  }

  .topbar{
    padding:12px;
  }

  .brandSub{
    display:none;
  }

  .aiSettingsBtn{
    padding:10px 12px;
  }

  .logoutBtn{
    padding:10px 12px;
  }

  .composer{
    padding:8px 10px;
  }

  .composerInner{
    gap:8px;
  }

  .inputBubble{
    min-height:44px;
    border-radius:16px;
    gap:6px;
    padding:5px 7px;
  }

  .plusUploadBtn{
    width:32px;
    height:32px;
    font-size:26px;
  }

  .bubbleMode{
    width:112px;
    padding:0 7px;
    font-size:12px;
  }

  .input{
    height:30px;
    font-size:15px;
  }

  .sendBtn{
    min-height:44px;
    padding:10px 14px;
  }

  .msg{
    font-size:15px;
  }

  .testCard{
    max-width:100%;
    padding:12px;
  }

  .testHeader{
    flex-direction:column;
  }

  .testActions{
    justify-content:flex-start;
  }

  .introCard{
    width:calc(100vw - 24px);
    left:12px !important;
    right:12px !important;
    transform:none !important;
  }

  .introTitle{
    font-size:18px;
  }

  .introText{
    font-size:14px;
  }
}