:root {
  --app-height: 100dvh;
  --viewport-offset-top: 0px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
a { color: var(--blue-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
textarea { font: inherit; resize: none; }
input { font: inherit; }

.hidden { display: none !important; }

/* Scrollbar — only show inside #chat-messages */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

/* Hide scrollbars globally except inside the chat messages container */
html, body, #app, #main, .sidebar,
#welcome-view, .welcome-view, #chat-view,
.bottom-input-bar, .bottom-input-wrap,
.bottom-textarea-wrap, .settings-pane {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
#main::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
#welcome-view::-webkit-scrollbar,
.welcome-view::-webkit-scrollbar,
.bottom-input-bar::-webkit-scrollbar,
.bottom-input-wrap::-webkit-scrollbar,
.bottom-textarea-wrap::-webkit-scrollbar {
  display: none;
}

/* Only show scrollbar inside the actual chat messages container */
#chat-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
#chat-messages::-webkit-scrollbar { width: 10px; height: 10px; display: block; }

/* Also keep scrollbar in modals and sidebar session list */
.modal-box { scrollbar-width: thin; }
.modal-box::-webkit-scrollbar { display: block; width: 10px; }

/* Focus visible */
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-full);
  background: var(--yellow); color: #111; font-weight: 600; font-size: 14px;
  transition: opacity var(--transition), transform var(--transition);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--radius-full);
  border: 1px solid var(--border-bright);
  color: var(--text-dim); font-size: 14px;
  transition: background var(--transition), color var(--transition);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--radius-full);
  background: rgba(220, 60, 60, 0.12); border: 1px solid rgba(220,60,60,0.3);
  color: #f07070; font-size: 14px;
  transition: background var(--transition);
}
.btn-danger:hover { background: rgba(220,60,60,0.22); }

/* Toggle switch */
.toggle-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 36px; height: 20px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--bg-active); border-radius: var(--radius-full);
  transition: background var(--transition);
  cursor: pointer;
}
.toggle-thumb {
  position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; transition: transform var(--transition);
  pointer-events: none;
}
.toggle-switch input:checked + .toggle-track { background: var(--yellow); }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(16px); }

/* Notification */
.notifications {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: var(--z-notify); pointer-events: none;
}
.notification {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px 10px 14px; border-radius: var(--radius-md);
  background: var(--bg-raised); border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-md);
  max-width: 360px; font-size: 13px; color: var(--text);
  pointer-events: auto;
  animation: slideInRight 0.22s ease;
  position: relative;
}
.notification.warning { border-color: rgba(229,200,70,0.4); }
.notification.error { border-color: rgba(220,60,60,0.4); }
.notification.success { border-color: rgba(45,212,166,0.4); }
.notification .notif-close {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--text-muted); font-size: 15px;
  background: none; border: none; cursor: pointer;
  line-height: 1; padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}
.notification .notif-close:hover {
  color: var(--text); background: var(--bg-hover);
}

/* Share banner */
.share-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: linear-gradient(90deg, #1a1b20, #22242b);
  border-bottom: 1px solid var(--border-bright);
  padding: 10px 20px;
}
.share-banner-inner {
  display: flex; align-items: center; gap: 12px; max-width: 800px; margin: 0 auto;
  font-size: 14px;
}
.share-icon { font-size: 18px; }

/* Markdown bullet points — proper indentation */
.msg-assistant ul,
.msg-assistant ol,
.msg-user ul,
.msg-user ol {
  padding-left: 1.6em;
  margin: 6px 0;
}
.msg-assistant li,
.msg-user li {
  margin-bottom: 2px;
  padding-left: 0.2em;
}
.msg-assistant ul li::marker,
.msg-user ul li::marker {
  color: var(--text-dim);
}

/* Animations */
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

:root {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

textarea,
.media-rich-editor,
.media-text-editor,
.modal-box,
#chat-messages,
#media-list,
#sidebar-trash-list,
.session-list {
  scrollbar-width: thin;
}

textarea::-webkit-scrollbar,
.media-rich-editor::-webkit-scrollbar,
.media-text-editor::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
#chat-messages::-webkit-scrollbar,
#media-list::-webkit-scrollbar,
#sidebar-trash-list::-webkit-scrollbar,
.session-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  display: block;
}

textarea::-webkit-scrollbar-track,
.media-rich-editor::-webkit-scrollbar-track,
.media-text-editor::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track,
#chat-messages::-webkit-scrollbar-track,
#media-list::-webkit-scrollbar-track,
#sidebar-trash-list::-webkit-scrollbar-track,
.session-list::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

textarea::-webkit-scrollbar-thumb,
.media-rich-editor::-webkit-scrollbar-thumb,
.media-text-editor::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
#chat-messages::-webkit-scrollbar-thumb,
#media-list::-webkit-scrollbar-thumb,
#sidebar-trash-list::-webkit-scrollbar-thumb,
.session-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}