/* Personal Assistant - Component Styles */

/* ============================================================================
   Sidebar
   ============================================================================ */

.sidebar-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
}

/* Mood Badge */
.mood-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.mood-badge::before {
  content: '\00B7';
  margin: 0 5px;
  color: var(--text-muted);
  opacity: 0.5;
}

.mood-badge.hidden {
  display: none;
}

.mood-badge.mood-changing {
  opacity: 0;
  transform: translateY(-2px);
}


.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-primary);
}

.sidebar-section {
  margin-bottom: var(--space-4);
}

.sidebar-section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3);
}

/* ============================================================================
   Sidebar Navigation
   ============================================================================ */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-1);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: var(--space-3);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  width: 100%;
  text-align: left;
  position: relative;
}

.sidebar-nav-item:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-nav-item.active {
  background: var(--bg-active);
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.sidebar-nav-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-nav-icon svg {
  width: 16px;
  height: 16px;
}

.sidebar-nav-label {
  flex: 1;
  font-size: var(--text-sm);
}

.sidebar-nav-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 1px var(--space-2);
  background: var(--accent);
  color: white;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

.sidebar-nav-soon {
  font-size: 9px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px var(--space-2);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border-radius: var(--radius-full);
}

/* New Chat Button */
.new-chat-btn {
  width: 100%;
  padding: var(--space-3);
  background: var(--accent);
  color: white;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  transition: background var(--transition-fast);
  margin-bottom: var(--space-4);
}

.new-chat-btn:hover {
  background: var(--accent-hover);
}

/* Conversation List */
.conversation-list {
  list-style: none;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}

.conversation-item:hover {
  background: var(--bg-hover);
}

.conversation-item.active {
  background: var(--bg-active);
}

.conversation-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.conversation-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.conversation-item-actions {
  display: flex;
  gap: var(--space-1);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.conversation-item:hover .conversation-item-actions {
  visibility: visible;
  opacity: 1;
}

.conversation-item-btn {
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  opacity: 0.7;
}

.conversation-item-btn:hover {
  background: var(--bg-tertiary);
  opacity: 1;
}

/* ============================================================================
   Header
   ============================================================================ */

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.menu-toggle {
  display: none;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.menu-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Show menu toggle when sidebar is collapsed (any screen size) */
.sidebar.collapsed ~ .main .menu-toggle {
  display: flex;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }
}

/* User Menu */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.user-menu-trigger:hover {
  background: var(--bg-hover);
}

.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.user-menu-dropdown.hidden {
  display: none;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  text-align: left;
  transition: background var(--transition-fast);
}

.user-menu-item:hover {
  background: var(--bg-hover);
}

.user-menu-divider {
  height: 1px;
  background: var(--border-primary);
  margin: var(--space-1) 0;
}

/* ============================================================================
   Chat Interface
   ============================================================================ */

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

.chat-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
  max-width: 120px;
  max-height: 120px;
}

.chat-empty-icon .avatar {
  width: 120px;
  height: 120px;
  font-size: 2rem;
}

.chat-empty-icon img {
  width: 120px;
  height: 120px;
  max-width: 120px;
  max-height: 120px;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.chat-empty-name {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.chat-empty-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.chat-empty-description {
  color: var(--text-secondary);
  max-width: 400px;
}

/* Message Bubble */
.message {
  display: flex;
  gap: var(--space-3);
  max-width: 85%;
}

.message.user {
  flex-direction: row-reverse;
  margin-left: auto;
}

.message-avatar {
  flex-shrink: 0;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  line-height: var(--leading-relaxed);
  overflow-wrap: break-word;
  word-break: break-word;
}

.message.assistant .message-bubble {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-bottom-left-radius: var(--radius-sm);
}

.message.user .message-bubble {
  background: var(--accent);
  color: white;
  border-bottom-right-radius: var(--radius-sm);
  white-space: pre-wrap;
}

/* ---- Markdown typography inside assistant message bubbles ---- */
.message.assistant .message-bubble > *:first-child {
  margin-top: 0;
}

.message.assistant .message-bubble > *:last-child {
  margin-bottom: 0;
}

.message.assistant .message-bubble h1,
.message.assistant .message-bubble h2,
.message.assistant .message-bubble h3,
.message.assistant .message-bubble h4,
.message.assistant .message-bubble h5,
.message.assistant .message-bubble h6 {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  margin: 1em 0 0.5em;
}

.message.assistant .message-bubble h1 { font-size: 1.4em; }
.message.assistant .message-bubble h2 { font-size: 1.25em; }
.message.assistant .message-bubble h3 { font-size: 1.1em; }
.message.assistant .message-bubble h4 { font-size: 1em; }

.message.assistant .message-bubble p {
  margin: 0.5em 0;
}

.message.assistant .message-bubble ul,
.message.assistant .message-bubble ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.message.assistant .message-bubble ul {
  list-style: disc;
}

.message.assistant .message-bubble ol {
  list-style: decimal;
}

.message.assistant .message-bubble li {
  margin: 0.5em 0;
  line-height: 1.6;
}

.message.assistant .message-bubble li > p {
  margin: 0.5em 0;
}

.message.assistant .message-bubble li > p:first-child {
  margin-top: 0;
}

.message.assistant .message-bubble li > p:last-child {
  margin-bottom: 0;
}

.message.assistant .message-bubble li > ul,
.message.assistant .message-bubble li > ol {
  margin: 0.5em 0;
}

.message.assistant .message-bubble blockquote {
  border-left: 3px solid var(--accent);
  margin: 0.75em 0;
  padding: 0.25em 0 0.25em 1em;
  color: var(--text-secondary);
  font-style: italic;
}

.message.assistant .message-bubble blockquote p {
  margin: 0.25em 0;
}

.message.assistant .message-bubble strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.message.assistant .message-bubble a {
  color: var(--accent);
  text-decoration: none;
}

.message.assistant .message-bubble a:hover {
  text-decoration: underline;
}

.message.assistant .message-bubble hr {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: 1em 0;
}

/* Inline code */
.message.assistant .message-bubble code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 0.875em;
  background: var(--bg-tertiary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

/* Code blocks */
.message.assistant .message-bubble pre {
  position: relative;
  margin: 0.75em 0;
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.5;
}

.message.assistant .message-bubble pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.85em;
  color: var(--text-secondary);
  white-space: pre;
  display: block;
}

/* Code block copy button */
.code-copy-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border-primary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

pre:hover .code-copy-btn {
  opacity: 1;
}

.code-copy-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Tables */
.message.assistant .message-bubble table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75em 0;
  font-size: 0.9em;
}

.message.assistant .message-bubble th,
.message.assistant .message-bubble td {
  border: 1px solid var(--border-primary);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.message.assistant .message-bubble th {
  background: var(--bg-tertiary);
  font-weight: var(--font-semibold);
}

.message.assistant .message-bubble tr:nth-child(even) {
  background: var(--bg-tertiary);
}

/* ---- Message meta & actions ---- */

/* ---- Emote / Spoken segments (persona RP mode) ---- */
.message.assistant .message-bubble .emote {
  display: inline;
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.95em;
  opacity: 0.7;
}

.message.assistant .message-bubble .spoken {
  display: inline;
}

/* ---- End emote / spoken ---- */

.message-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.message.user .message-meta {
  justify-content: flex-end;
}

.message-actions {
  display: flex;
  gap: var(--space-1);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.message:hover .message-actions {
  visibility: visible;
  opacity: 1;
}

.message-action-btn {
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  gap: var(--space-3);
  max-width: 85%;
}

.typing-dots {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
}

.typing-dot {
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Chat Input */
.chat-input-container {
  padding: var(--space-4);
  border-top: none;
  background: var(--bg-primary);
}

.chat-input-wrapper {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chat-input-wrapper:focus-within {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--space-2);
  resize: none;
  min-height: 24px;
  max-height: 200px;
  line-height: var(--leading-normal);
}

.chat-input:focus {
  outline: none;
}

.chat-send-btn {
  padding: var(--space-2);
  background: var(--accent);
  color: white;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.chat-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   Auth Pages - Modern Asymmetrical Design
   ============================================================================ */

/* Auth page - full-screen asymmetrical layout */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

/* Left side - Visual/Brand area */
.auth-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-12);
  overflow: hidden;
}

/* Animated gradient background */
.auth-gradient {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 40% 20%, rgba(2, 132, 199, 0.08) 0%, transparent 50%);
  animation: auth-gradient-shift 20s ease-in-out infinite;
}

@keyframes auth-gradient-shift {
  0%, 100% { 
    background-position: 0% 0%, 100% 100%, 50% 0%;
    opacity: 1;
  }
  33% { 
    background-position: 100% 50%, 0% 50%, 100% 100%;
    opacity: 0.8;
  }
  66% { 
    background-position: 50% 100%, 50% 0%, 0% 50%;
    opacity: 1;
  }
}

/* Floating orbs */
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  animation: auth-orb-float 25s ease-in-out infinite;
}

.auth-orb-1 {
  width: 300px;
  height: 300px;
  background: rgba(14, 165, 233, 0.2);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.auth-orb-2 {
  width: 200px;
  height: 200px;
  background: rgba(56, 189, 248, 0.15);
  top: 60%;
  left: 60%;
  animation-delay: -8s;
  animation-duration: 30s;
}

.auth-orb-3 {
  width: 150px;
  height: 150px;
  background: rgba(125, 211, 252, 0.1);
  top: 30%;
  left: 70%;
  animation-delay: -15s;
  animation-duration: 35s;
}

@keyframes auth-orb-float {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
  }
  25% { 
    transform: translate(30px, -40px) scale(1.1);
  }
  50% { 
    transform: translate(-20px, 30px) scale(0.95);
  }
  75% { 
    transform: translate(40px, 20px) scale(1.05);
  }
}

/* Flowing lines */
.auth-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.4;
}

.auth-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent);
  animation: auth-line-flow 8s linear infinite;
}

.auth-line:nth-child(1) {
  top: 20%;
  left: -100%;
  width: 60%;
  animation-delay: 0s;
}

.auth-line:nth-child(2) {
  top: 45%;
  left: -100%;
  width: 80%;
  animation-delay: -2s;
  animation-duration: 10s;
}

.auth-line:nth-child(3) {
  top: 70%;
  left: -100%;
  width: 50%;
  animation-delay: -4s;
  animation-duration: 12s;
}

.auth-line:nth-child(4) {
  top: 85%;
  left: -100%;
  width: 70%;
  animation-delay: -6s;
  animation-duration: 9s;
}

@keyframes auth-line-flow {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100%)); opacity: 0; }
}

/* Subtle grid pattern */
.auth-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(14, 165, 233, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: auth-grid-move 40s linear infinite;
}

@keyframes auth-grid-move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* Brand content */
.auth-brand {
  position: relative;
  z-index: 1;
  text-align: center;
  animation: auth-brand-enter 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes auth-brand-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animated mark */
.auth-mark {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto var(--space-8);
}

.auth-mark-outer {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 50%;
  animation: auth-mark-spin 30s linear infinite;
}

.auth-mark-outer::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--color-primary-400);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 20px var(--color-primary-400);
}

.auth-mark-middle {
  position: absolute;
  inset: 15px;
  border: 1px dashed rgba(56, 189, 248, 0.15);
  border-radius: 50%;
  animation: auth-mark-spin 20s linear infinite reverse;
}

.auth-mark-inner {
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(125, 211, 252, 0.1);
  border-radius: 50%;
  animation: auth-mark-spin 15s linear infinite;
}

.auth-mark-core {
  position: absolute;
  inset: 38px;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-400));
  border-radius: 50%;
  box-shadow: 
    0 0 30px rgba(14, 165, 233, 0.4),
    0 0 60px rgba(14, 165, 233, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  animation: auth-core-breathe 4s ease-in-out infinite;
}

@keyframes auth-mark-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes auth-core-breathe {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 
      0 0 30px rgba(14, 165, 233, 0.4),
      0 0 60px rgba(14, 165, 233, 0.2),
      inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
  50% { 
    transform: scale(1.08);
    box-shadow: 
      0 0 40px rgba(14, 165, 233, 0.5),
      0 0 80px rgba(14, 165, 233, 0.25),
      inset 0 0 25px rgba(255, 255, 255, 0.15);
  }
}

.auth-brand-name {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.auth-brand-tagline {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 280px;
  line-height: 1.6;
}

/* Right side - Form area */
.auth-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-12);
  position: relative;
}

/* Form header */
.auth-header {
  margin-bottom: var(--space-10);
  animation: auth-form-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes auth-form-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.auth-subtitle {
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 360px;
  animation: auth-form-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  opacity: 0;
  transform: translateY(20px);
}

.auth-form .input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-form .input-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.auth-form .input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-primary);
  border-radius: 0;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}

.auth-form .input::placeholder {
  color: var(--text-muted);
}

.auth-form .input:focus {
  border-color: var(--accent);
  box-shadow: 0 2px 0 0 var(--accent);
  outline: none;
}

/* Override browser autofill styling to match dark theme */
.auth-form .input:-webkit-autofill,
.auth-form .input:-webkit-autofill:hover,
.auth-form .input:-webkit-autofill:focus,
.auth-form .input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  border-bottom-color: var(--border-primary);
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--text-primary);
}

/* Submit button */
.auth-submit {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}

.auth-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.auth-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(14, 165, 233, 0.35);
}

.auth-submit:hover::before {
  opacity: 1;
}

.auth-submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.25);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Footer */
.auth-footer {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
  animation: auth-form-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  opacity: 0;
  transform: translateY(20px);
}

.auth-footer span {
  margin-right: var(--space-1);
}

.auth-link {
  color: var(--accent);
  font-weight: var(--font-medium);
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
}

.auth-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-link:hover {
  color: var(--accent-hover);
}

.auth-link:hover::after {
  width: 100%;
}

/* Error message */
.auth-error {
  padding: var(--space-3) var(--space-4);
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-error);
  border-left: 3px solid var(--color-error);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  animation: auth-error-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes auth-error-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Mobile responsive - stack vertically */
@media (max-width: 900px) {
  .auth-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh; /* dynamic viewport height — respects mobile browser chrome */
  }
  
  .auth-visual {
    padding: var(--space-6) var(--space-6);
    min-height: unset;
  }
  
  .auth-mark {
    width: 60px;
    height: 60px;
    margin-bottom: var(--space-3);
  }
  
  .auth-mark-outer::before {
    width: 6px;
    height: 6px;
    top: -3px;
  }
  
  .auth-mark-middle { inset: 10px; }
  .auth-mark-inner { inset: 20px; }
  .auth-mark-core { inset: 26px; }
  
  .auth-brand-name {
    font-size: var(--text-base);
  }
  
  .auth-brand-tagline {
    display: none;
  }
  
  .auth-content {
    padding: var(--space-6) var(--space-6);
    justify-content: flex-start;
    overflow-y: auto;
  }
  
  .auth-header {
    margin-bottom: var(--space-6);
  }
  
  .auth-title {
    font-size: var(--text-xl);
  }
  
  .auth-form {
    max-width: 100%;
    gap: var(--space-4);
  }

  .auth-submit {
    margin-top: var(--space-2);
  }

  .auth-footer {
    margin-top: var(--space-6);
    padding-bottom: var(--space-4);
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .auth-visual {
    padding: var(--space-4) var(--space-4);
  }
  
  .auth-content {
    padding: var(--space-4) var(--space-4);
  }

  .auth-form {
    gap: var(--space-3);
  }
}

/* ============================================================================
   Modals
   ============================================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: var(--z-modal);
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-primary);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.modal-close {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-primary);
}

/* ============================================================================
   Toast Notifications
   ============================================================================ */

.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease;
}

.toast.success {
  border-left: 3px solid var(--color-success);
}

.toast.error {
  border-left: 3px solid var(--color-error);
}

.toast.warning {
  border-left: 3px solid var(--color-warning);
}

@keyframes toast-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ============================================================================
   Settings / Persona Pages
   ============================================================================ */

.settings-page {
  padding: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
  overflow-y: auto;
}

.settings-header {
  margin-bottom: var(--space-4);
}

.settings-section {
  margin-bottom: var(--space-8);
}

.settings-section-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-primary);
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.persona-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.persona-card:hover {
  border-color: var(--accent);
}

.persona-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-muted);
}

.persona-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.persona-emoji {
  font-size: var(--text-2xl);
}

.persona-name {
  font-weight: var(--font-semibold);
  flex: 1;
}

.persona-badge {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--accent-muted);
  color: var(--accent);
  border-radius: var(--radius-full);
}

.persona-prompt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.persona-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-primary);
}

/* Add Persona Card */
.persona-add-card {
  border: 2px dashed var(--border-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 160px;
  color: var(--text-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.persona-add-card:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
}

.theme-toggle-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.theme-toggle-btn.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* LLM Config Form */
.llm-config-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
}

.llm-provider-select {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.llm-provider-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.llm-provider-btn:hover {
  border-color: var(--accent);
}

.llm-provider-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Loading Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-primary);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================================
   Persona Avatar (replaces emoji for custom/generated avatars)
   ============================================================================ */

.persona-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.persona-avatar img,
.persona-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-avatar--sm {
  width: 32px;
  height: 32px;
}

.persona-avatar--lg {
  width: 64px;
  height: 64px;
}

.persona-avatar--xl {
  width: 96px;
  height: 96px;
}

/* Avatar upload area in persona modal */
.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.avatar-upload-preview {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.avatar-upload-preview:hover {
  border-color: var(--accent);
}

.avatar-upload-preview img,
.avatar-upload-preview svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-actions {
  display: flex;
  gap: var(--space-2);
}

/* ============================================================================
   Capability Badges (for model capabilities)
   ============================================================================ */

.capability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.capability-badge svg {
  width: 12px;
  height: 12px;
}

.capability-badge--vision {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.capability-badge--tools {
  background: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
}

.capability-badge--streaming {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Model info display in chat header */
.model-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.model-info-name {
  font-weight: var(--font-medium);
}

.model-info-badges {
  display: flex;
  gap: var(--space-1);
}

/* ============================================================================
   Theme Picker (color swatches)
   ============================================================================ */

.theme-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  background: transparent;
}

.theme-swatch:hover {
  border-color: var(--border-secondary);
  background: var(--bg-hover);
}

.theme-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-muted);
}

.theme-swatch-color {
  width: 100%;
  height: 18px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid rgba(128, 128, 128, 0.15);
}

.theme-swatch-label {
  font-size: 0.65rem;
  font-weight: var(--font-medium);
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

/* Theme color previews - bg left, accent right */
/* Defaults */
.theme-swatch--dark .theme-swatch-color { background: linear-gradient(135deg, #0f172a 50%, #0ea5e9 50%); }
.theme-swatch--light .theme-swatch-color { background: linear-gradient(135deg, #f8fafc 50%, #0ea5e9 50%); }
.theme-swatch--system .theme-swatch-color { background: linear-gradient(135deg, #0f172a 25%, #f8fafc 25%, #f8fafc 75%, #0f172a 75%); }
/* Light themes */
.theme-swatch--github-light .theme-swatch-color { background: linear-gradient(135deg, #ffffff 50%, #0969da 50%); }
.theme-swatch--one-light .theme-swatch-color { background: linear-gradient(135deg, #fafafa 50%, #4078f2 50%); }
.theme-swatch--nord-light .theme-swatch-color { background: linear-gradient(135deg, #eceff4 50%, #5e81ac 50%); }
.theme-swatch--solarized-light .theme-swatch-color { background: linear-gradient(135deg, #fdf6e3 50%, #268bd2 50%); }
.theme-swatch--gruvbox-light .theme-swatch-color { background: linear-gradient(135deg, #fbf1c7 50%, #af3a03 50%); }
.theme-swatch--catppuccin-latte .theme-swatch-color { background: linear-gradient(135deg, #eff1f5 50%, #8839ef 50%); }
.theme-swatch--material-light .theme-swatch-color { background: linear-gradient(135deg, #fafafa 50%, #0089a1 50%); }
.theme-swatch--ayu-light .theme-swatch-color { background: linear-gradient(135deg, #fcfcfc 50%, #ff9940 50%); }
.theme-swatch--tokyo-light .theme-swatch-color { background: linear-gradient(135deg, #d5d6db 50%, #2e7de9 50%); }
.theme-swatch--paper .theme-swatch-color { background: linear-gradient(135deg, #f5f0eb 50%, #6b7280 50%); }
/* Dark themes */
.theme-swatch--tokyo-night .theme-swatch-color { background: linear-gradient(135deg, #1a1b26 50%, #7aa2f7 50%); }
.theme-swatch--dracula .theme-swatch-color { background: linear-gradient(135deg, #282a36 50%, #ff79c6 50%); }
.theme-swatch--one-dark .theme-swatch-color { background: linear-gradient(135deg, #282c34 50%, #61afef 50%); }
.theme-swatch--nord .theme-swatch-color { background: linear-gradient(135deg, #2e3440 50%, #88c0d0 50%); }
.theme-swatch--gruvbox-dark .theme-swatch-color { background: linear-gradient(135deg, #282828 50%, #fe8019 50%); }
.theme-swatch--catppuccin-mocha .theme-swatch-color { background: linear-gradient(135deg, #1e1e2e 50%, #cba6f7 50%); }
.theme-swatch--material-dark .theme-swatch-color { background: linear-gradient(135deg, #212121 50%, #89ddff 50%); }
.theme-swatch--ayu-dark .theme-swatch-color { background: linear-gradient(135deg, #0b0e14 50%, #ffb454 50%); }
.theme-swatch--github-dark .theme-swatch-color { background: linear-gradient(135deg, #0d1117 50%, #58a6ff 50%); }
.theme-swatch--monokai .theme-swatch-color { background: linear-gradient(135deg, #272822 50%, #f92672 50%); }

/* ============================================================================
   Image Preview (for chat attachments)
   ============================================================================ */

.image-preview {
  position: relative;
  display: inline-block;
  margin: var(--space-2) 0;
}

.image-preview img {
  max-width: 300px;
  max-height: 200px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--bg-secondary);
}

.image-preview-remove {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  padding: var(--space-1);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: var(--radius-full);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.image-preview:hover .image-preview-remove {
  opacity: 1;
}

/* Image upload button in chat input */
.image-upload-btn {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.image-upload-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.image-upload-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============================================================================
   Knowledge List (persona knowledge management)
   ============================================================================ */

.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.knowledge-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  transition: border-color var(--transition-fast);
}

.knowledge-item:hover {
  border-color: var(--accent);
}

.knowledge-item-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.knowledge-item-content {
  flex: 1;
  min-width: 0;
}

.knowledge-item-title {
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
}

.knowledge-item-preview {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.knowledge-item-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.knowledge-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 2px dashed var(--border-secondary);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.knowledge-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Knowledge empty state */
.knowledge-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-muted);
}

.knowledge-empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-2);
}

/* ============================================================================
   Role Selector (persona role dropdown)
   ============================================================================ */

.role-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.role-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.role-option:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.role-option.active {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.role-option-icon {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
}

.role-option.active .role-option-icon {
  color: var(--accent);
}

.role-option-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: capitalize;
}

/* ============================================================================
   Mode Toggle (default vs persona mode)
   ============================================================================ */

.mode-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}

.mode-toggle-btn {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  text-align: center;
}

.mode-toggle-btn.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   Tabs (for persona modal sections)
   ============================================================================ */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--space-4);
}

.tab {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ============================================================================
   Role Select Container (for persona modal dropdown + add button)
   ============================================================================ */

.role-select-container {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.role-select-container select {
  flex: 1;
}

.role-select-actions {
  display: flex;
  gap: var(--space-1);
}

/* ============================================================================
   Mobile Responsive
   ============================================================================ */

@media (max-width: 768px) {
  /* Settings page padding */
  .settings-page {
    padding: var(--space-4);
  }
  
  /* Persona grid single column */
  .persona-grid {
    grid-template-columns: 1fr;
  }
  
  /* Message width */
  .message {
    max-width: 95%;
  }
  
  /* Header adjustments */
  .header-title {
    font-size: var(--text-base);
  }
  
  /* Chat empty state smaller on mobile */
  .chat-empty-icon .avatar {
    width: 60px;
    height: 60px;
  }
}

/* ============================================================================
   Feature Pages (Tasks, Notes, Reminders, Habits)
   ============================================================================ */

.feature-page {
  padding: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
  overflow-y: auto;
  width: 100%;
  flex: 1;
}

@media (max-width: 768px) {
  .feature-page {
    padding: var(--space-4);
  }
}

/* ============================================================================
   Task View
   ============================================================================ */

.task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

.task-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.task-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.task-stats {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.task-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.task-stat-count {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Quick Add */
.task-quick-add {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.task-quick-add-input {
  flex: 1;
  padding: var(--space-3);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.task-quick-add-input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.task-quick-add-input::placeholder {
  color: var(--text-muted);
}

/* Filter Bar */
.task-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.task-filter-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.task-filter-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.task-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Task List */
.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.task-list-empty {
  text-align: center;
  padding: var(--space-12);
  color: var(--text-muted);
}

.task-list-empty-icon {
  margin-bottom: var(--space-3);
}

.task-list-empty-icon svg {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.task-list-empty p {
  font-size: var(--text-sm);
}

/* Task Item */
.task-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.task-item:hover {
  border-color: var(--border-primary);
  box-shadow: var(--shadow-sm);
}

.task-item.done {
  opacity: 0.6;
}

.task-item.done .task-item-title {
  text-decoration: line-through;
}

.task-item.overdue {
  background: rgba(251, 146, 60, 0.08);
  border-color: rgba(251, 146, 60, 0.3);
}

.task-item.overdue:hover {
  border-color: rgba(251, 146, 60, 0.5);
}

/* Task Checkbox */
.task-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  margin-top: 2px;
}

.task-checkbox:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.task-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.task-checkbox.checked svg {
  width: 14px;
  height: 14px;
}

/* Task Content */
.task-item-content {
  flex: 1;
  min-width: 0;
}

.task-item-title {
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
  word-break: break-word;
}

.task-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
}

.task-item-due {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.task-item-due.overdue {
  color: rgb(251, 146, 60);
  font-weight: var(--font-semibold);
}

.task-item-due.today {
  color: var(--color-warning);
  font-weight: var(--font-medium);
}

.task-item-due svg {
  width: 12px;
  height: 12px;
}

/* Priority Indicator */
.task-priority {
  width: 4px;
  border-radius: var(--radius-full);
  align-self: stretch;
  flex-shrink: 0;
}

.task-priority--urgent {
  background: var(--color-error);
}

.task-priority--high {
  background: var(--color-warning);
}

.task-priority--medium {
  background: var(--accent);
}

.task-priority--low {
  background: var(--text-muted);
}

/* Task Tags */
.task-tags {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.task-tag {
  font-size: 10px;
  padding: 0 var(--space-2);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
}

/* Task Status Indicator */
.task-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.task-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}

.task-status--todo {
  background: rgba(107, 114, 128, 0.1);
  color: rgb(107, 114, 128);
}

.task-status--todo .task-status-dot {
  background: rgb(107, 114, 128);
}

.task-status--in_progress {
  background: rgba(251, 146, 60, 0.15);
  color: rgb(251, 146, 60);
}

.task-status--in_progress .task-status-dot {
  background: rgb(251, 146, 60);
}

.task-status--done {
  background: rgba(34, 197, 94, 0.15);
  color: rgb(34, 197, 94);
}

.task-status--done .task-status-dot {
  background: rgb(34, 197, 94);
}

.task-status:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

/* Recurrence Badge */
.task-recurrence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  background: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
}

.task-recurrence svg {
  width: 10px;
  height: 10px;
}

/* Task Actions */
.task-item-actions {
  display: none;
  gap: var(--space-1);
  flex-shrink: 0;
}

.task-item:hover .task-item-actions {
  display: flex;
}

.task-action-btn {
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.task-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Task Section Divider */
.task-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
}

/* Section Mini-Dashboard */
.section-dashboard {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   margin-bottom: var(--space-4);
   font-size: var(--text-sm);
   color: var(--text-secondary);
 }

.section-dashboard-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.section-dashboard-value {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-size: var(--text-base);
}

.section-dashboard-separator {
  width: 1px;
  height: 16px;
  background: var(--border-secondary);
}

/* ============================================================================
   Dashboard Widgets (chat empty state)
   ============================================================================ */

.dashboard-widgets {
  width: 100%;
  max-width: 700px;
  margin-top: var(--space-6);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.dashboard-widget {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  text-align: left;
}

.dashboard-widget:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.dashboard-widget-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.dashboard-widget-icon {
  display: flex;
  color: var(--accent);
}

.dashboard-widget-icon svg {
  width: 18px;
  height: 18px;
}

.dashboard-widget-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.dashboard-widget-body {
  font-size: var(--text-sm);
}

.dashboard-stat-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dashboard-stat-num {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.dashboard-stat-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.dashboard-stat-alert {
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
}

.dashboard-stat-ok {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.dashboard-mini-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dashboard-mini-list li {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-habit-dots {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.dashboard-habit-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 2px solid var(--border-secondary);
  transition: all var(--transition-fast);
}

.dashboard-habit-dot.done {
  background: var(--color-success);
  border-color: var(--color-success);
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Habits View
   ============================================================================ */

.habit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  overflow-y: auto;
}

/* Center empty state */
.habit-grid:has(.task-list-empty) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.habit-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.habit-card.completed {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.05);
}

.habit-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.habit-card-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
}

.habit-card-actions {
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.habit-card:hover .habit-card-actions {
  visibility: visible;
  opacity: 1;
}

.habit-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.habit-card-streak {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.habit-streak-icon {
  color: var(--color-warning);
  display: flex;
}

.habit-streak-icon svg {
  width: 18px;
  height: 18px;
}

.habit-streak-count {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.habit-streak-label {
  color: var(--text-muted);
}

.habit-best-streak {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.habit-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-primary);
}

.habit-check-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  transition: all var(--transition-fast);
}

.habit-check-btn:hover {
  border-color: var(--color-success);
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.1);
}

.habit-check-btn.checked {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.habit-check-btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .habit-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Reminders View
   ============================================================================ */

.reminder-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.reminder-item:hover {
  border-color: var(--border-primary);
  box-shadow: var(--shadow-sm);
}

.reminder-item--overdue {
  border-left: 3px solid var(--color-error);
}

.reminder-item--fired {
  border-left: 3px solid var(--color-warning);
  opacity: 0.8;
}

.reminder-item--dismissed {
  opacity: 0.5;
}

.reminder-item--snoozed {
  border-left: 3px solid var(--accent);
}

.reminder-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent-muted);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reminder-item-icon svg {
  width: 18px;
  height: 18px;
}

.reminder-item--overdue .reminder-item-icon,
.reminder-item--fired .reminder-item-icon {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error);
}

.reminder-item-content {
  flex: 1;
  min-width: 0;
}

.reminder-item-message {
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
  word-break: break-word;
}

.reminder-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
}

.reminder-item-time {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.reminder-item-time svg {
  width: 12px;
  height: 12px;
}

.reminder-status-label {
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
}

.reminder-status--overdue {
  color: var(--color-error);
}

.reminder-status--fired {
  color: var(--color-warning);
}

.reminder-status--snoozed {
  color: var(--accent);
}

.reminder-status--dismissed {
  color: var(--text-muted);
}

.reminder-item-actions {
  display: none;
  gap: var(--space-1);
  flex-shrink: 0;
  align-items: center;
}

.reminder-item:hover .reminder-item-actions {
  display: flex;
}

/* ============================================================================
   Notes View
   ============================================================================ */

/* Notes layout: list and editor as siblings, one visible at a time */
.notes-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ---- Notes list view ---- */
.notes-list-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.notes-list-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-4);
   flex-shrink: 0;
 }

 .notes-list-header h2 {
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   margin: 0;
 }

.notes-toolbar {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   margin-bottom: var(--space-4);
   flex-shrink: 0;
 }

.notes-search-input {
  flex: 1;
  max-width: 360px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.notes-search-input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.notes-search-input::placeholder {
  color: var(--text-muted);
}

.notes-tags-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  flex-shrink: 0;
}

.notes-scroll-area {
  flex: 1;
  overflow-y: auto;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.note-card {
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  min-height: 140px;
}

.note-card:hover {
  border-color: var(--border-primary);
  box-shadow: var(--shadow-sm);
}

.note-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.note-card.pinned {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.note-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.note-pin-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.note-pin-icon svg {
  width: 14px;
  height: 14px;
}

.note-card-title {
  flex: 1;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-card-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.note-card:hover .note-card-actions {
  visibility: visible;
  opacity: 1;
}

.note-card-content {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
}

.note-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
}

.note-card-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---- Notes editor view ---- */
.notes-editor-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.notes-editor-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-primary);
}

.notes-editor-back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.notes-editor-back:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.notes-editor-back svg {
  width: 16px;
  height: 16px;
}

.notes-editor-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.notes-editor-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-6);
  gap: var(--space-4);
}

.notes-editor-title {
  width: 100%;
  background: transparent;
  border: none;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  padding: 0;
  outline: none;
}

.notes-editor-title::placeholder {
  color: var(--text-muted);
}

.notes-editor-content {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  padding: 0;
  outline: none;
  font-family: inherit;
  overflow-y: auto;
  min-height: 200px;
}

/* Contenteditable placeholder */
.notes-editor-content:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

/* Rich text formatting styles */
.notes-editor-content p {
  margin: 0 0 var(--space-3) 0;
}

.notes-editor-content ul,
.notes-editor-content ol {
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-6);
}

.notes-editor-content li {
  margin-bottom: var(--space-1);
}

.notes-editor-content strong {
  font-weight: var(--font-semibold);
}

.notes-editor-content em {
  font-style: italic;
}

.notes-editor-content u {
  text-decoration: underline;
}

/* Toolbar */
.notes-editor-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--space-3);
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: var(--space-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toolbar-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.toolbar-btn:active {
  background: var(--bg-active);
}

.toolbar-btn svg {
  width: 16px;
  height: 16px;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: var(--border-primary);
  margin: 0 var(--space-1);
}

.notes-editor-content::placeholder {
  color: var(--text-muted);
}

.notes-editor-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  flex-shrink: 0;
  border-top: 1px solid var(--border-primary);
  background: var(--bg-secondary);
}

.notes-editor-tags-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-1) 0;
  outline: none;
}

.notes-editor-tags-input::placeholder {
  color: var(--text-muted);
}

.notes-editor-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

.notes-editor-status {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
}

.notes-editor-status.saving {
  color: var(--accent);
}

.notes-editor-status.saved {
  color: var(--color-success);
}

/* ---- Mobile responsive ---- */
@media (max-width: 768px) {
  .note-grid {
    grid-template-columns: 1fr;
  }

  .notes-list-header {
    padding: var(--space-3) var(--space-4);
  }

  .notes-toolbar {
    padding: var(--space-3) var(--space-4);
  }

  .notes-scroll-area {
    padding: var(--space-3) var(--space-4);
  }

  .notes-editor-header {
    padding: var(--space-3) var(--space-4);
  }

  .notes-editor-body {
    padding: var(--space-4);
  }

  .notes-editor-footer {
    padding: var(--space-3) var(--space-4);
  }
}

/* ============================================================================
   Notification Center
   ============================================================================ */

.notification-menu {
  position: relative;
}

.notification-bell {
  position: relative;
}

.notification-bell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-bell-icon svg {
  width: 20px;
  height: 20px;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-error);
  color: white;
  font-size: 10px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notification-badge.hidden {
  display: none;
}

.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  width: 360px;
  max-height: 480px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notification-dropdown.hidden {
  display: none;
}

.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}

.notification-dropdown-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.notification-dropdown-list {
  overflow-y: auto;
  max-height: 400px;
}

.notification-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.notification-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  transition: background var(--transition-fast);
  cursor: pointer;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: var(--bg-hover);
}

.notification-item.unread {
  background: var(--accent-muted);
}

.notification-item.unread:hover {
  background: var(--bg-hover);
}

.notification-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.notification-item-icon svg {
  width: 16px;
  height: 16px;
}

.notification-item-icon--reminder {
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent);
}

.notification-item-icon--task {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}

.notification-item-icon--habit {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}

.notification-item-content {
  flex: 1;
  min-width: 0;
}

.notification-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: 2px;
}

.notification-item-message {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-item-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.notification-item-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .notification-dropdown {
    width: 300px;
    right: -40px;
  }
}