/* Tema único: Dark */
:root {
  --sidebar-width: 330px;
  --c-scroll: #475569; /* cor do scroll sempre dark */
}

html, body { overscroll-behavior: contain; }
body { font-feature-settings: "cv02","cv03","cv04","cv11"; }

.app-header { height: 60px; position: sticky; top: 0; }
.app-shell { min-height: calc(100vh - 60px); }
.sidebar { position: relative; transition: transform .35s cubic-bezier(.4,0,.2,1); }

/* Mobile overlay behavior */
@media (max-width: 1023px){
  .sidebar { position: fixed; inset: 60px auto 0 0; height: calc(100vh - 60px); z-index:40; box-shadow: 0 10px 30px -5px rgba(15,23,42,.25); width: var(--sidebar-width); background: #0f172a; transform: translateX(-100%); }
  .sidebar[data-open="true"] { transform: translateX(0); }
  body[data-sidebar-open="true"]::before { content:""; position: fixed; inset:0; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); z-index:30; }
}

/* Chat form sticks to bottom inside panel when content overflows */
.chat-form { position: sticky; bottom: 0; }

/* Message bubbles refinement */
#messages > div { line-height: 1.4; animation: fadeIn .3s ease; word-break: break-word; }
#messages > div.teacher { background: linear-gradient(135deg,#1e293b,#0f172a); border:1px solid rgba(99,102,241,.25); }
#messages > div.student { background: linear-gradient(135deg,#4f46e5,#6366f1); border:1px solid rgba(255,255,255,.2); }
#messages > div.teacher.has-evidence { position: relative; }
#messages > div.teacher.has-evidence::after { content: '\25BC'; position: absolute; top:4px; right:8px; font-size:10px; opacity:.4; transition: transform .25s, opacity .25s; }
#messages > div.teacher.has-evidence:hover::after { opacity:.7; }

/* Objective chips popup styles if added dynamically */
.popup-chip { animation: slideIn .4s ease, fadeIn .4s ease; }
@keyframes slideIn { from { transform: translateY(-6px); } to { transform: translateY(0); } }

/* Smooth focus ring enhancement */
:focus-visible { outline: 2px solid #6366f1; outline-offset:2px; }

/* (Removido modo claro; apenas dark) */

/* Scroll area shadows (gradient masks) */
.scroll-mask-y { -webkit-mask: linear-gradient(#000, #000 calc(100% - 12px), rgba(0,0,0,0)); mask: linear-gradient(#000, #000 calc(100% - 12px), rgba(0,0,0,0)); }

/* Utility animations */
.fade-scale { animation: fadeScale .35s ease; }
@keyframes fadeScale { from { opacity:0; transform: scale(.97); } to { opacity:1; transform: scale(1); } }

/* Simple rotate utility (in case Tailwind not processing dynamic class) */
.rotate-90 { transform: rotate(90deg); }

/* Scroll to bottom button */
#scrollToBottom { transition: opacity .2s, transform .2s; }
#scrollToBottom.hidden { opacity:0; pointer-events:none; transform: translateY(4px); }