/*
  style.css — The Look and Feel of the Entire App
  ================================================
  This one file controls the visual appearance of everything you see.

  It's organized in sections:
    1. Color variables (the "palette" — change these to retheme the whole app)
    2. Reset & base styles (sensible defaults for all HTML elements)
    3. Auth screens (login and setup pages)
    4. App layout (sidebar + main content area)
    5. Navigation sidebar
    6. Panel styles (the shared look for each screen)
    7. Dashboard panel
    8. Chat panel
    9. Calendar panel
   10. Tasks panel
   11. Shopping panel
   12. Notes panel
   13. Weather panel
   14. Floating mic button + voice status bar
   15. Toast notifications
   16. Reusable utility classes (buttons, forms, etc.)
   17. Mobile / phone overrides (applied when screen is narrow)
*/


/* ============================================================
  1. COLOR VARIABLES
  ============================================================
  Defining colors here as "variables" means we can use them
  by name everywhere below. If you ever want to change the
  accent color from blue to green, you only change it once here.
*/
:root {
  /* Backgrounds — deep purple-dark theme */
  --bg-app:       #1a1625;   /* The deepest background behind everything */
  --bg-sidebar:   #211d32;   /* The sidebar background */
  --bg-card:      #2a2542;   /* Cards, panels, and elevated surfaces */
  --bg-input:     #1a1625;   /* Input fields */
  --bg-hover:     #342e50;   /* What things look like when you hover over them */
  --bg-overlay:   rgba(10, 8, 20, 0.7); /* The semi-transparent backdrop behind modal forms */

  /* Text colors */
  --text-primary:   #e8e2f8;   /* Main readable text — soft lavender white */
  --text-secondary: #a89cc8;   /* Dimmer text for labels, timestamps, hints */
  --text-muted:     #5c5280;   /* Very dim — placeholders, disabled */

  /* Brand accent — violet purple, the main "action" color */
  --accent:       #a78bfa;
  --accent-hover: #8b5cf6;
  --accent-dim:   rgba(167, 139, 250, 0.15); /* Light tint for backgrounds */

  /* Status colors */
  --success: #34d399;   /* Teal green — task done, item saved */
  --warning: #fbbf24;   /* Amber — watch out */
  --danger:  #f87171;   /* Soft red — delete, error */
  --danger-hover: #ef4444;

  /* Borders and dividers */
  --border: #3d3560;
  --border-subtle: #2a2542;

  /* Priority colors for tasks */
  --priority-low:    #3fb950;
  --priority-normal: #d29922;
  --priority-high:   #f85149;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", Consolas, "Courier New", monospace;

  /* Spacing */
  --sidebar-width: 220px;
  --header-height: 64px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition: 0.18s ease;
}


/* ============================================================
  2. RESET & BASE STYLES
  ============================================================
  Browsers have built-in styles that vary and cause inconsistencies.
  This section overrides them with sensible, predictable defaults.
*/
*, *::before, *::after {
  box-sizing: border-box;   /* Makes width/height calculations intuitive */
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;  /* Smoother text on Mac/iOS */
  overflow: hidden;  /* The app handles its own scrolling in each panel */
}

/* Make images not overflow their containers */
img { max-width: 100%; display: block; }

/* Remove the default dot styling from lists used for navigation */
ul[role="list"] { list-style: none; }

/* Make buttons and inputs inherit the font — browsers don't do this by default */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Remove the default blue outline and replace with our own focus style */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ============================================================
  3. AUTH SCREENS (Login & Setup)
  ============================================================
  The full-screen centered card shown when you're not logged in.
*/
.auth-screen {
  position: fixed;
  inset: 0;           /* Shorthand for top:0 right:0 bottom:0 left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--bg-app);
  z-index: 1000;
}

/* Without this rule, "display: flex" above would override the browser's
   built-in hidden behaviour, making BOTH auth screens visible at once. */
.auth-screen[hidden] { display: none; }

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-logo-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.auth-logo h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.auth-logo p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.error-message {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}


/* ============================================================
  4. APP LAYOUT
  ============================================================
  The overall structure when you're logged in:
  sidebar on the left, main content area on the right.
*/
#app {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#content {
  flex: 1;             /* Takes up all the remaining space after the sidebar */
  overflow: hidden;    /* Individual panels handle their own scrolling */
  display: flex;
  flex-direction: column;
}


/* ============================================================
  5. SIDEBAR NAVIGATION
  ============================================================
*/
#sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;       /* Don't let the sidebar shrink if space is tight */
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition);
}

/* Logo area at the top of the sidebar */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.2rem 1rem;
  border-bottom: 1px solid var(--border);
  min-height: var(--header-height);
}

.sidebar-logo-icon { font-size: 1.6rem; }

.sidebar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

/* The list of navigation links */
.nav-links {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
  list-style: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  border-radius: var(--radius);
  margin: 0.1rem 0.4rem;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  user-select: none;
}

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

/* The currently active/selected navigation item gets an accent highlight */
.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 500;
}

.nav-icon { font-size: 1.1rem; flex-shrink: 0; }
.nav-label { font-size: 0.9rem; white-space: nowrap; }

/* Sign out button at the very bottom */
.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}


/* ============================================================
  6. PANEL STYLES (shared across all screens)
  ============================================================
*/
.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;  /* Lets the form-overlay cover the whole panel */
}

.panel[hidden] { display: none; }

/* The title bar at the top of each panel */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  min-height: var(--header-height);
  flex-shrink: 0;
  background: var(--bg-card);
}

.panel-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
}

.panel-subtitle {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: 0.1rem;
}

/* A row of action buttons on the right side of the panel header */
.panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Scrollable content area inside a panel */
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

/* A list of items (events, tasks, etc.) */
.items-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

/* Shown when a list is empty */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-secondary);
}


/* ============================================================
  7. DASHBOARD PANEL
  ============================================================
*/
#panel-dashboard {
  overflow-y: auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

/* A single card on the dashboard */
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* The "wide" card (Quick Chat) spans the full grid width */
.dash-card-wide {
  grid-column: 1 / -1;
}

.dash-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.dash-card-body {
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* The quick chat message history area */
.dash-chat-messages {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* The quick chat input row */
.dash-chat-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.dash-chat-form input {
  flex: 1;
}

/* A single event or task shown on the dashboard */
.dash-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

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

.dash-item-title { font-weight: 500; }
.dash-item-meta  { color: var(--text-secondary); font-size: 0.8rem; }


/* ============================================================
  8. CHAT PANEL
  ============================================================
*/
#panel-chat {
  height: 100%;
}

/* The scrollable message history */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: smooth;
}

/* A single chat message bubble */
.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  gap: 0.2rem;
}

/* User's messages sit on the right side */
.chat-message.user {
  align-self: flex-end;
  align-items: flex-end;
}

/* AI's messages sit on the left side */
.chat-message.assistant {
  align-self: flex-start;
  align-items: flex-start;
}

/* Font-size toggle buttons in the chat panel header */
.chat-font-size-btns {
  display: flex;
  gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.chat-font-btn {
  padding: 0.2rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
  line-height: 1;
}
.chat-font-btn:nth-child(1) { font-size: 0.72rem; }
.chat-font-btn:nth-child(2) { font-size: 0.85rem; }
.chat-font-btn:nth-child(3) { font-size: 1rem; }
.chat-font-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.chat-font-btn.active { background: var(--accent); color: #fff; }

/* The bubble itself — font-size is controlled by a data attribute on #chat-messages */
.chat-bubble {
  padding: 0.65rem 0.9rem;
  border-radius: 14px;
  line-height: 1.55;
  font-size: var(--chat-font-size, 0.95rem);
  word-break: break-word;
  white-space: pre-wrap;
}

/* The three size options set the variable on the messages container */
#chat-messages[data-font="small"]  { --chat-font-size: 0.8rem;  }
#chat-messages[data-font="medium"] { --chat-font-size: 0.95rem; }
#chat-messages[data-font="large"]  { --chat-font-size: 1.15rem; }

.chat-message.user .chat-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-message.assistant .chat-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.chat-message-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0 0.25rem;
}

/* A "..." typing indicator while waiting for the AI to respond */
.chat-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0.65rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  background: var(--text-secondary);
  border-radius: 50%;
  animation: bounce 1.2s infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-6px); }
}

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

/* Expiry warning banner — shown when a chat is within 7 days of auto-deletion */
.chat-expiry-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.5rem 0.75rem 0.25rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-size: 0.82rem;
  background: color-mix(in srgb, #f59e0b 15%, var(--bg-card));
  border: 1px solid #f59e0b;
  color: var(--text-primary);
  line-height: 1.4;
}
.chat-expiry-warning--urgent {
  background: color-mix(in srgb, #ef4444 15%, var(--bg-card));
  border-color: #ef4444;
}
.chat-expiry-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 0.2rem;
  line-height: 1;
}
.chat-expiry-dismiss:hover { color: var(--text-primary); }

/* The input bar pinned to the bottom of the chat panel */
.chat-input-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

.chat-input-bar input { flex: 1; }


/* ============================================================
  9. CALENDAR PANEL
  ============================================================
*/
/* A single calendar event row */
.calendar-event {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
}

.event-color-bar {
  width: 4px;
  align-self: stretch;
  border-radius: 4px;
  flex-shrink: 0;
}

.event-body { flex: 1; }

.event-title {
  font-weight: 600;
  font-size: 0.925rem;
  margin-bottom: 0.2rem;
}

.event-time, .event-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.event-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}


/* Calendar grid — month view */
.cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cal-month-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Outer wrapper — provides outer border + rounded corners */
.cal-grid {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Day-name header row (Sun–Sat) */
.cal-grid-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}

.cal-day-hd {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.3rem 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The 7-column grid of day cells */
.cal-grid-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);  /* Gap becomes the grid line */
}

/* A single day square */
.cal-cell {
  background: var(--bg-card);
  min-height: 70px;
  padding: 3px 4px;
  cursor: pointer;
  transition: background var(--transition);
  overflow: hidden;
}

.cal-cell:hover { background: var(--bg-hover); }

/* Days from outside the current month */
.cal-cell--empty {
  background: var(--bg-app);
  cursor: default;
  min-height: 70px;
}
.cal-cell--empty:hover { background: var(--bg-app); }

/* Today's date — day number gets a filled circle */
.cal-cell--today .cal-day-num {
  background: var(--accent);
  color: #1a1625;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Clicked / selected day */
.cal-cell--selected {
  background: var(--accent-dim);
}
.cal-cell--selected:hover { background: var(--accent-dim); }

/* The day number in the top-left of each cell */
.cal-day-num {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 20px;
  width: 20px;
  text-align: center;
  margin-bottom: 2px;
}

/* A colored pill showing an event title */
.cal-event-pill {
  font-size: 0.64rem;
  line-height: 1.35;
  color: #fff;
  border-radius: 3px;
  padding: 1px 3px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* "+2 more" overflow label */
.cal-more {
  font-size: 0.62rem;
  color: var(--text-muted);
  padding-left: 2px;
}

/* Section label between the grid and the event list */
.cal-events-header {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0 0.6rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}


/* ============================================================
  10. TASKS PANEL
  ============================================================
*/
.task-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  transition: opacity var(--transition);
}

/* Completed tasks look faded */
.task-item.done {
  opacity: 0.5;
}

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

/* The checkbox to mark a task done */
.task-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--success);
}

.task-body { flex: 1; }

.task-title {
  font-weight: 500;
  font-size: 0.925rem;
}

.task-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

/* The colored priority badge */
.priority-badge {
  padding: 0.1rem 0.45rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.priority-low    { background: rgba(63,185,80,.15);  color: var(--priority-low);    }
.priority-normal { background: rgba(210,153,34,.15); color: var(--priority-normal); }
.priority-high   { background: rgba(248,81,73,.15);  color: var(--priority-high);   }

.task-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}


/* ============================================================
  11. SHOPPING PANEL
  ============================================================
*/
/* Two-column layout: list names on left, items on right */
.shopping-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* The narrow left sidebar listing your shopping list names */
.shopping-lists-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
  background: var(--bg-sidebar);
}

.shopping-lists-nav { display: flex; flex-direction: column; gap: 0.2rem; }

/* A single shopping list name in the sidebar */
.shopping-list-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  transition: background var(--transition), color var(--transition);
}

.shopping-list-btn:hover,
.shopping-list-btn.active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.shopping-list-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.shopping-list-count {
  font-size: 0.72rem;
  background: var(--bg-hover);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}

/* The right area where items appear */
.shopping-items-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shopping-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.shopping-header-actions { display: flex; gap: 0.5rem; }

/* A single shopping item row */
.shopping-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: opacity var(--transition);
}

.shopping-item.checked { opacity: 0.45; }
.shopping-item.checked .shopping-item-text { text-decoration: line-through; }

.shopping-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--success);
}

.shopping-item-text { flex: 1; font-size: 0.9rem; }

.shopping-item-qty {
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-hover);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}

.shopping-item-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  transition: color var(--transition);
}

.shopping-item-delete:hover { color: var(--danger); }

/* The "add item" form pinned to the bottom */
.inline-add-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
}

.inline-add-form input { flex: 1; }
.qty-input { max-width: 90px !important; }


/* ============================================================
  12. NOTES PANEL
  ============================================================
*/
/* Two-column layout: note list on left, editor on right */
.notes-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* The narrow list of note titles */
.notes-list-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
  background: var(--bg-sidebar);
}

.notes-nav { display: flex; flex-direction: column; gap: 0.2rem; }

/* A single note in the sidebar list */
.note-list-item {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}

.note-list-item:hover         { background: var(--bg-hover); }
.note-list-item.active        { background: var(--accent-dim); }
.note-list-item.active .note-list-title { color: var(--accent); }

.note-list-title {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}

.note-list-preview {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The full note editor on the right */
.notes-editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#notes-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.75rem;
  overflow: hidden;
}

/* The note title input at the top of the editor */
.note-title-input {
  font-size: 1.2rem;
  font-weight: 600;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  width: 100%;
  color: var(--text-primary);
}

.note-title-input:focus { outline: none; border-bottom-color: var(--accent); }

/* The main text body of the note */
.note-content-input {
  flex: 1;
  background: transparent;
  border: none;
  resize: none;
  color: var(--text-primary);
  font-size: 0.925rem;
  line-height: 1.7;
  overflow-y: auto;
}

.note-content-input:focus { outline: none; }

.note-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}


/* ============================================================
  13. WEATHER PANEL
  ============================================================
*/
.weather-current {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 1.25rem 1.5rem 1rem;
}

.weather-temp {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1;
}

.weather-icon { font-size: 3rem; }

.weather-details { flex: 1; }

.weather-condition {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.weather-extra {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* The row of forecast day cards */
.weather-forecast {
  display: flex;
  gap: 0.75rem;
  padding: 0 1.5rem 1.5rem;
  overflow-x: auto;
}

.forecast-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  text-align: center;
  min-width: 90px;
  flex-shrink: 0;
}

.forecast-day-name {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.forecast-icon { font-size: 1.6rem; margin-bottom: 0.4rem; }

.forecast-temp {
  font-size: 0.875rem;
  font-weight: 500;
}

.forecast-temp-low {
  font-size: 0.8rem;
  color: var(--text-secondary);
}


/* ============================================================
  14. FLOATING MIC BUTTON + VOICE STATUS BAR
  ============================================================
*/
/* The circular button that floats in the bottom-right corner */
.mic-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(79, 142, 247, 0.4);
  transition: background var(--transition), transform var(--transition);
  z-index: 100;
}

.mic-btn:hover { background: var(--accent-hover); transform: scale(1.07); }

/* When actively listening, the button pulses */
.mic-btn.listening {
  background: var(--danger);
  animation: mic-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(248, 81, 73, 0.5);
}

/* When the AI is speaking, the button shows a different state */
.mic-btn.speaking {
  background: var(--success);
  box-shadow: 0 4px 16px rgba(63, 185, 80, 0.5);
}

@keyframes mic-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 4px 16px rgba(248,81,73,.5); }
  50%       { transform: scale(1.08); box-shadow: 0 4px 24px rgba(248,81,73,.7); }
}

/* The banner that slides up at the bottom to show voice status */
.voice-status {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  z-index: 99;
  animation: slide-up 0.2s ease;
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.voice-status[hidden] { display: none; }

#voice-status-icon { font-size: 1rem; }


/* ============================================================
  15. TOAST NOTIFICATIONS
  ============================================================
  Small pop-up messages that appear in the top-right corner
  and automatically disappear after a few seconds.
*/
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
  pointer-events: none;  /* Doesn't block clicks on things behind it */
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  min-width: 240px;
  max-width: 340px;
  pointer-events: all;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  animation: toast-in 0.25s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toast.success { border-left: 4px solid var(--success); }
.toast.error   { border-left: 4px solid var(--danger);  }
.toast.info    { border-left: 4px solid var(--accent);  }

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


/* ============================================================
  16. UTILITY CLASSES — Buttons, Forms, Helpers
  ============================================================
*/

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition),
              opacity var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

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

/* Blue filled button — primary actions */
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

/* Outlined / secondary button */
.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }

/* Ghost — no visible border at rest, just text -->*/
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Red danger button for destructive actions */
.btn-danger {
  background: rgba(248,81,73,.12);
  color: var(--danger);
  border-color: transparent;
}
.btn-danger:hover:not(:disabled) { background: rgba(248,81,73,.22); }

/* Small version of any button */
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* Makes a button fill 100% of its container's width */
.btn-full { width: 100%; justify-content: center; }

/* --- Form elements --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* All text-like inputs share the same base style */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="datetime-local"],
textarea,
select.select-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--transition);
}

input:focus,
textarea:focus,
select.select-input:focus {
  border-color: var(--accent);
  outline: none;
}

/* Custom date/time input color fix for dark theme */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

/* Force the dropdown options to match the dark theme background.
   Without this the OS renders them with a white popup even though the
   select box itself is dark. */
select.select-input option {
  background: var(--bg-input);
  color: var(--text-primary);
}

textarea { resize: vertical; min-height: 70px; }

.optional {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* A row of action buttons at the bottom of a form */
.form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

/* Search input with rounded ends */
.search-input {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
}

/* The semi-transparent backdrop behind modal forms */
.form-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
  animation: fade-in 0.15s ease;
}

.form-overlay[hidden] { display: none; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The white card inside the overlay */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.form-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

/* Checkbox styled to match the dark theme */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
}

/* Shows/hides done-task toggle in the tasks panel */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Dim helper text */
.muted-text { color: var(--text-muted); font-size: 0.875rem; }

/* Icon-only button used for edit/delete actions on list items */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}
.icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.icon-btn.danger:hover { color: var(--danger); }


/* ============================================================
  17. MOBILE / PHONE OVERRIDES
  ============================================================
  When the screen is narrower than 700px (a typical phone),
  we switch from the sidebar layout to a bottom tab bar,
  and adjust spacing so everything fits comfortably.
*/
@media (max-width: 700px) {

  /* The sidebar transforms into a bottom navigation bar */
  #sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--border);
    z-index: 200;
  }

  /* Hide the logo and sign-out button in the mobile bottom bar */
  .sidebar-header,
  .sidebar-footer {
    display: none;
  }

  /* Nav links become a horizontal row */
  .nav-links {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    gap: 0;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .nav-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.5rem 0.4rem;
    margin: 0;
    border-radius: 0;
    flex: 1;
    min-width: 56px;
  }

  .nav-icon { font-size: 1.2rem; }
  .nav-label { font-size: 0.62rem; }

  .nav-item.active {
    background: transparent;
    border-top: 2px solid var(--accent);
  }

  /* Push the main content up so the bottom nav doesn't cover it */
  #content {
    padding-bottom: 60px;
  }

  /* The voice status bar spans the full width on mobile */
  .voice-status {
    left: 0;
  }

  /* Move the mic button up so it doesn't overlap the bottom nav */
  .mic-btn {
    bottom: 5rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  /* On mobile, the shopping and notes layouts stack vertically */
  .shopping-layout,
  .notes-layout {
    flex-direction: column;
  }

  .shopping-lists-sidebar,
  .notes-list-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 150px;
    padding: 0.4rem;
  }

  .shopping-lists-nav,
  .notes-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.3rem;
  }

  .shopping-list-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Two-column form rows go single-column on phones */
  .form-row { grid-template-columns: 1fr; }

  /* Chat bubbles take up more width on small screens */
  .chat-message { max-width: 90%; }

  .dashboard-grid {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .panel-header {
    padding: 0.75rem 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .items-list { padding: 0.75rem 1rem; }

  .weather-current {
    margin: 0.75rem 1rem;
    flex-wrap: wrap;
  }

  .weather-forecast {
    padding: 0 1rem 1rem;
  }

  .chat-input-bar { padding: 0.5rem 0.75rem; }

  /* Stocks cards go single-column on phones */
  .stocks-holdings-grid { grid-template-columns: 1fr; }
  .stocks-add-form-row { flex-direction: column; }
}


/* ============================================================
  18. STOCKS PANEL
  ============================================================
  A stock portfolio tracker with live prices, gain/loss,
  and a price history chart.
*/

/* The holdings are displayed as a grid of cards */
.stocks-holdings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 0 1.5rem 1.5rem;
}

/* One stock card */
.stock-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  transition: border-color var(--transition);
}
.stock-card:hover { border-color: var(--accent); }

.stock-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.stock-ticker {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 0.4rem;
}

.stock-name {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.stock-price {
  font-size: 1.15rem;
  font-weight: 600;
}

.stock-change {
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 0.15rem;
}
.stock-change.positive { color: var(--success); }
.stock-change.negative { color: var(--danger); }

/* Stats grid inside the card body */
.stock-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
}

.stock-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.stock-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Footer with status indicator and action buttons */
/* ---- Fundamentals row: yield / P/E / market cap ---- */
.stock-fundamentals {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.fund-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .45rem .2rem;
  gap: .1rem;
  border-right: 1px solid var(--border-subtle);
  min-width: 0;
}

.fund-item:last-child { border-right: none; }

/* Highlight the yield cell when the stock pays a dividend */
.fund-item-highlight { background: rgba(52,211,153,.04); }

.fund-label {
  font-size: .63rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.fund-value {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.fund-sub {
  font-size: .65rem;
  color: var(--text-muted);
}

.fund-na {
  color: var(--text-muted);
  font-weight: 400;
}

.stock-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.1);
}

/* Add holding form — compact card style */
.stocks-add-section {
  padding: 0 1.5rem 1.25rem;
}

.stocks-add-section h3 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The form sits inside a subtle card */
#stocks-add-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .65rem .85rem;
}

.stocks-add-form-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.stocks-add-form-row .form-group {
  margin-bottom: 0;
  flex: 0 0 auto; /* don't stretch — each field is its natural width */
}

/* Smaller labels inside the add form */
.stocks-add-form-row .form-group label {
  font-size: .72rem;
  margin-bottom: .2rem;
}

/* Compact inputs — shorter height, smaller text, fixed widths */
.stocks-add-form-row input[type="text"],
.stocks-add-form-row input[type="number"] {
  padding: .32rem .55rem;
  font-size: .82rem;
  height: 32px;
  width: auto;
}

.stocks-ticker-field     { width: 130px; position: relative; }
#stocks-shares-group     { width: 110px; }
#stocks-buy-price-group  { width: 150px; }

/* Force inputs inside those groups to fill their parent width */
.stocks-ticker-field input,
#stocks-shares-group input,
#stocks-buy-price-group input { width: 100%; }

/* Auto-complete dropdown for ticker search */
#stocks-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#stocks-search-results[hidden] { display: none; }

/* Chart modal overlay */
.stocks-chart-modal {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 200;
  animation: fade-in 0.15s ease;
}
.stocks-chart-modal[hidden] { display: none; }

.stocks-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
}

.stocks-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.stocks-chart-header h3 { font-size: 1rem; font-weight: 600; }

/* Period toggle buttons (1mo / 3mo / 6mo / 1y) */
.stocks-period-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.stocks-period-btn {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
}
.stocks-period-btn:hover,
.stocks-period-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* Positive / negative text helpers used in stocks */
.positive { color: var(--success); }
.negative { color: var(--danger); }

/* Stocks panel needs its own scroll since content can exceed the viewport */
#panel-stocks {
  overflow-y: auto;
}

/* ================================================================
   NEWS FEED SECTION
   ================================================================ */

/* Outer wrapper — sits below watchlist, matches panel padding */
.stocks-news-section {
  padding: 0 1.5rem 2rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: .25rem;
}

/* ---- Section header ---- */
.stocks-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 .85rem;
}

.stocks-news-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.news-last-updated {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--transition);
}

.news-last-updated.just-updated {
  animation: updated-flash 2s ease-out forwards;
}

/* ---- News card ---- */
.news-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  padding: .9rem 1rem;
  text-decoration: none;
  color: inherit;
  margin-bottom: .5rem;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.news-card:last-child { margin-bottom: 0; }

.news-card:hover {
  border-left-color: var(--accent);
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* ---- Text body ---- */
.news-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.news-headline {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card:hover .news-headline { color: var(--accent); }

/* Bottom meta row */
.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .5rem;
}

.news-publisher {
  font-size: .71rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.news-dot  { font-size: .65rem; color: var(--border); }
.news-time { font-size: .71rem; color: var(--text-muted); }

/* Badges row — sits below meta */
.news-badges {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

/* "NEW" flash badge */
.news-new-badge {
  font-size: .61rem;
  font-weight: 800;
  padding: .08rem .35rem;
  border-radius: 4px;
  background: rgba(248,113,113,.13);
  border: 1px solid rgba(248,113,113,.25);
  color: var(--danger);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Per-ticker badge */
.news-ticker-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .08rem .38rem;
  border-radius: 4px;
  background: var(--accent-dim);
  color: var(--accent);
  letter-spacing: .02em;
}

/* ---- Thumbnail ---- */
.news-thumb {
  width: 76px;
  height: 76px;
  border-radius: calc(var(--radius) - 1px);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  opacity: .92;
  transition: opacity var(--transition);
}

.news-card:hover .news-thumb { opacity: 1; }

/* ---- Loading state ---- */
.news-loading {
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-muted);
  font-size: .82rem;
}

/* ---- Ticker filter chips ---- */
.news-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .75rem;
}

.news-filter-chip {
  padding: .22rem .65rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--transition);
  letter-spacing: .02em;
}

.news-filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.news-filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- News search bar ---- */
.news-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: .75rem;
}

.news-search-icon {
  position: absolute;
  left: .65rem;
  font-size: .8rem;
  pointer-events: none;
  line-height: 1;
}

.news-search-input {
  width: 100%;
  padding: .45rem .65rem .45rem 2rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-sidebar);
  color: var(--text-primary);
  font-size: .8rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

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

.news-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.news-search-clear {
  position: absolute;
  right: .6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .78rem;
  padding: .15rem .3rem;
  border-radius: 50%;
  line-height: 1;
  transition: color var(--transition);
}

.news-search-clear:hover { color: var(--text-primary); }

/* ---- Clickable ticker on stock cards ---- */
.stock-ticker-link {
  cursor: pointer;
  transition: color var(--transition);
}

.stock-ticker-link:hover {
  color: var(--accent);
  text-decoration: underline dotted;
}


/* ---- Scrolling ticker tape ---- */
.ticker-bar {
  overflow: hidden;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .35rem 0;
  margin-top: .75rem;
  margin-bottom: 1rem;
  cursor: default;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll linear infinite;
}

/* Pause on hover so you can actually read it */
.ticker-bar:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* move exactly one copy's width */
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0 1.25rem;
  font-size: .8rem;
  white-space: nowrap;
}

.ticker-symbol {
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .02em;
}

.ticker-price {
  color: var(--text-secondary);
}

.ticker-change {
  font-size: .75rem;
  font-weight: 600;
}

.ticker-dot {
  color: var(--border);
  font-size: 1rem;
}


/* Prospects ticker strip — same scroll mechanic, slightly different background */
.prospects-ticker-bar .ticker-bar {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-sidebar));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  margin-top: 0;
  margin-bottom: 0;
}
.prospects-ticker-bar .ticker-item {
  padding: 0 2rem;
  gap: .65rem;
}
.prospects-ticker-bar {
  margin-bottom: 1rem;
}

/* ---- Summary bar (value + donut) ---- */
.stocks-summary-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin: 1rem 1.5rem 1rem;
  position: relative;
}

.stocks-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  flex: 1;
}

.stocks-summary-item { display: flex; flex-direction: column; gap: .15rem; }
.stocks-summary-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.stocks-summary-value { font-size: 1.15rem; font-weight: 600; }

.stocks-delayed-note {
  position: absolute;
  bottom: .4rem;
  right: .75rem;
  font-size: .68rem;
  color: var(--text-muted);
}

/* "Updated X ago" label in the panel header */
.stocks-last-updated {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--transition);
}

/* Pulse green briefly right after a refresh */
@keyframes updated-flash {
  0%   { color: var(--success); }
  100% { color: var(--text-muted); }
}

.stocks-last-updated.just-updated {
  animation: updated-flash 2s ease-out forwards;
}

/* Jump navigation — sticky strip of section shortcuts */
.stocks-jump-nav {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.stocks-jump-nav::-webkit-scrollbar { display: none; }

.stocks-jump-btn {
  flex-shrink: 0;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.stocks-jump-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--accent);
}
.stocks-jump-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Donut container */
.stocks-donut-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Legend below the stats (same row as the donut) */
.stocks-donut-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  align-items: center;
  font-size: .78rem;
  color: var(--text-secondary);
  width: 100%;
  margin-top: .1rem;
}
.stocks-legend-item {
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ---- Watchlist section — no side padding; the inner grid handles it ---- */
#stocks-watchlist-section {
  padding: 0;
  margin-top: .25rem;
}

/* ---- Section title (Watchlist heading) ---- */
.stocks-section-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 0 .6rem;
  margin: 0;
}
.stocks-watchlist-header {
  padding: .5rem 1.5rem .1rem;
  border-top: 1px solid var(--border-subtle);
  margin-bottom: .75rem;
}

/* ---- Add-type selector (Portfolio / Watchlist / Prospect) ---- */
.stocks-add-type-row {
  display: flex;
  gap: .3rem;
  margin-bottom: .65rem;
}

.stocks-type-btn {
  padding: .25rem .75rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition);
  user-select: none;
}

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

.stocks-type-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.stock-conviction-select {
  padding: .35rem .6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: .82rem;
  width: 100%;
}

/* ---- Prospect card ---- */
.stock-card-prospect { border-left: 3px solid rgba(167,139,250,.4); }
.prospect-hidden { display: none !important; }

.stock-card-prospect.in-buy-zone {
  border-left-color: var(--success);
  box-shadow: 0 0 0 1px rgba(52,211,153,.2), 0 4px 14px rgba(52,211,153,.08);
}

/* Target price info strip */
.prospect-target-info {
  margin: .35rem 1rem;
  padding: .35rem .6rem;
  border-radius: var(--radius);
  background: rgba(251,191,36,.07);
  border: 1px solid rgba(251,191,36,.2);
  font-size: .76rem;
  color: var(--warning);
}

/* Buy zone highlight strip */
.prospect-buy-zone {
  margin: .35rem 1rem;
  padding: .35rem .6rem;
  border-radius: var(--radius);
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.3);
  font-size: .76rem;
  font-weight: 600;
  color: var(--success);
  animation: buy-zone-pulse 2s ease-in-out infinite;
}

@keyframes buy-zone-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .7; }
}


/* Auto-suggestion strip (above the decision bar) */
.prospect-suggestion {
  margin: .3rem 1rem .1rem;
  padding: .3rem .65rem;
  border-radius: var(--radius);
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.prospect-suggestion--buy {
  background: rgba(52,211,153,.1);
  border-color: rgba(52,211,153,.35);
  color: var(--success);
}

.prospect-suggestion--hold {
  background: rgba(251,191,36,.08);
  border-color: rgba(251,191,36,.35);
  color: var(--warning);
}

.prospect-suggestion--no {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.3);
  color: var(--danger);
}

/* BUY / HOLD / NO decision bar */
.prospect-decision-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem .35rem;
  flex-wrap: wrap;
}

.prospect-decision-label {
  font-size: .72rem;
  color: var(--text-muted);
  margin-right: .15rem;
  flex-shrink: 0;
}

.prospect-decision-btn {
  font-size: .72rem;
  font-weight: 600;
  padding: .28rem .65rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  line-height: 1;
}

.prospect-decision-btn:hover {
  transform: translateY(-1px);
}

.prospect-decision-btn.buy:hover,
.prospect-decision-btn.buy.active {
  background: rgba(52,211,153,.15);
  border-color: var(--success);
  color: var(--success);
}

.prospect-decision-btn.hold:hover,
.prospect-decision-btn.hold.active {
  background: rgba(251,191,36,.15);
  border-color: var(--warning);
  color: var(--warning);
}

.prospect-decision-btn.no:hover,
.prospect-decision-btn.no.active {
  background: rgba(239,68,68,.15);
  border-color: var(--danger);
  color: var(--danger);
}

.prospect-decision-btn.active {
  font-weight: 700;
}

/* Conviction badge */
.prospect-conviction-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  padding: .08rem .4rem;
  border-radius: 4px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  margin-left: .3rem;
  vertical-align: middle;
}

/* Watchlist badge on card */
.stock-watch-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  padding: .05rem .35rem;
  margin-left: .35rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Watchlist card subtle left border */
.stock-card-watch {
  border-left: 3px solid var(--accent);
}

/* ---- Notes area inside each card ---- */
.stock-notes-area {
  padding: .6rem 1rem .75rem;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.08);
}
.stock-notes-input {
  width: 100%;
  padding: .45rem .6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: .82rem;
  resize: vertical;
  min-height: 60px;
}
.stock-notes-input:focus { border-color: var(--accent); outline: none; }

/* ---- Inline edit form inside portfolio cards ---- */
.stock-edit-form {
  border-top: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.08);
}

.stock-edit-form-inner {
  padding: .75rem 1rem;
}

.stock-edit-row {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.stock-edit-input {
  width: 100%;
  padding: .4rem .6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: .82rem;
}

.stock-edit-input:focus { border-color: var(--accent); outline: none; }

/* ---- Inline buy form inside watchlist cards ---- */
.stock-buy-form { background: rgba(0,0,0,0.08); }
.watch-buy-input {
  padding: .35rem .5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: .82rem;
  width: 100%;
}
.watch-buy-input:focus { border-color: var(--accent); outline: none; }

/* ---- Ticker search autocomplete ---- */
.stock-search-result {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  padding: .45rem .7rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: .85rem;
  cursor: pointer;
  text-align: left;
}
.stock-search-result:hover { background: var(--bg-hover); }
.stock-search-result:last-child { border-bottom: none; }
.stock-search-name { color: var(--text-secondary); font-size: .8rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-search-exchange { color: var(--text-muted); font-size: .72rem; flex-shrink: 0; }

/* Mobile adjustments for stocks */
@media (max-width: 700px) {
  .stocks-summary-bar { margin: 0 .75rem 1rem; flex-direction: column; align-items: flex-start; }
  .stocks-donut-wrap { display: none; }  /* hide donut on tiny screens to save space */
  .stocks-add-section { padding: 0 .75rem 1rem; }
  .stocks-holdings-grid { padding: 0 .75rem 1rem; }
}