:root {
    /* Status Colors */
    --status-success: oklch(0.7 0.18 160);
    --status-error: oklch(0.53 0.19 25.13);
    --status-warning: oklch(0.78 0.15 75);
    --status-info: oklch(0.65 0.15 245);

    /* Transcription colors */
    --keyword-bg: var(--primary-bg);
    --keyword-text: var(--primary);
    --command-bg: var(--secondary-bg);
    --command-text: var(--secondary);
    --code-bg: var(--primary-bg);
    --code-text: var(--primary);
    
    --ff: "Figtree", system-ui, sans-serif;
    --ff-display: "Cormorant", Georgia, serif;
    --h1: 700 1.5rem/1.2em var(--ff);
    --h2: 600 1.25rem/1.4em var(--ff);
    --h3: 600 1.1rem/1.4em var(--ff);
    --p: 400 0.9rem/1.65em var(--ff);
    --small: 400 0.75rem/1.6em var(--ff);

    --transition: 0.2s ease-in-out;

    /* accent-colors */
    --accent: oklch(0.52 0.29 261.59);
    --accent-hover: oklch(51.254% 0.27298 263.505 / 0.842);
    --accent-green: oklch(0.72 0.18 155);
    --primary: oklch(0.66 0.2 262.83);
    --primary-bg: oklch(0.52 0.29 261.55 / 0.2);
    --secondary: oklch(0.64 0.23 300.93);
    --secondary-bg: oklch(0.71 0.22 337.71 / 0.15);

    /* bg-colors */
    --bg-dark: oklch(0.1 0.012 280);
    --bg-slightly-dark: oklch(0.14 0.01 280);
    --bg: oklch(0.17 0.01 280);
    --bg-slightly-light: oklch(0.21 0.008 280);
    --bg-light: oklch(0.26 0.008 280);
    --bg-active: oklch(0.33 0.006 280);

    /* text-colors */
    --text: oklch(0.93 0.008 80);
    --text-muted: oklch(0.58 0.015 270);
    --waveform-disabled: oklch(0.45 0 0);

    /* shadows */
    --shadow-s: inset 0 1px 2px #ffffff30, /* top highlight */ 0 1px 2px #00000030,
        /* dark shadow */ 0 2px 4px #00000015; /* soft shadow */
    --shadow-m: inset 0 1px 2px #ffffff50, /* top highlight */ 0 2px 4px #00000030,
        /* dark shadow */ 0 4px 8px #00000015; /* soft shadow */
    --shadow-l: inset 0 1px 2px #ffffff70, /* top highlight */ 0 4px 6px #00000030,
        /* dark shadow */ 0 6px 10px #00000015; /* soft shadow */

    /* 1. Elevation: Light border on top (inset), dark shadow on bottom */
    --shadow-card: inset 0 1px 2px #ffffff50, /* top highlight */ 0 2px 4px #00000030,
        /* dark shadow */ 0 4px 8px #00000015; /* soft shadow */

    /* 2. Recessed: Dark shadow on top (inset), light glow on bottom (inset) */
    --shadow-inset: 
        inset 0 1px 2px rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);

    --border-color: transparent; /* We rely on shadows/shades in dark mode */

        /* Glow effects */
    --glow-accent: 0 0 20px oklch(0.16 0.05 253.93);
    --glow: oklch(0.66 0.2 262.83 / 0.15);
}

body.no-transition,
body.no-transition * {
    transition: none !important;
}

body.light {
    /* Status Colors */
    --status-success: oklch(0.7 0.18 160);
    --status-error: oklch(0.69 0.22 24.02);
    --status-warning: oklch(0.78 0.15 75);
    --status-info: oklch(0.65 0.15 245);


    /* accent-colors */
    --accent-green: oklch(0.55 0.2 155);
    --primary: oklch(0.52 0.29 261.59);
    --primary-bg: oklch(0.52 0.29 261.59 / 0.15);
    --secondary: oklch(0.52 0.29 291.89);
    --secondary-bg: oklch(0.58 0.29 305 / 0.15);

    /* bg-colors */
    --bg-dark: oklch(0.92 0 264);
    --bg-slightly-dark: oklch(0.94 0 264);
    --bg: oklch(0.96 0 264);
    --bg-slightly-light: oklch(0.98 0 264);
    --bg-light: oklch(1 0 264);
    --bg-active: oklch(1 0 264);

    /* text-colors */
    --text: oklch(14.958% 0.00002 271.152 / 0.904);
    --text-muted: oklch(0.4 0 264);
    --waveform-disabled: oklch(0.72 0 0);

    /* Transcription colors */
    --keyword-bg: var(--primary-bg);
    --keyword-text: var(--primary);
    --command-bg: var(--secondary-bg);
    --command-text: var(--secondary);
    --code-bg: var(--primary-bg);
    --code-text: var(--primary);

    --glow: oklch(0.52 0.29 261.59 / 0.12);
}

* { box-sizing: border-box; }

/* --- CUSTOM SCROLLBARS --- */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-light);
    border-radius: 5px;
    border: 2px solid var(--bg-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-active);
}

::-webkit-scrollbar-corner {
    background: var(--bg-dark);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-light) var(--bg);
}

body {
    margin: 0;
    font-family: var(--ff);
    height: 100vh;
    height: 100dvh;
    display: flex;
    overflow: hidden;
    transition: var(--transition);
    background: var(--bg-dark);
    font: var(--p);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font: var(--h1);
    color: var(--text);
}
h2 {
    font: var(--h2);
    color: var(--text);
}
h3 {
    font: var(--h3);
    color: var(--text);
}
p {
    font: var(--p);
    color: var(--text);
    margin-block-start: 0em;
    margin-block-end: 0em;
}
.small,
small {
    font: var(--small);
}
a {
    color: var(--text);
    text-decoration: none;
    background: var(--bg-light);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}
header{
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

/* Greeting */
.greeting {
    font-family: var(--ff-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.greeting:empty { display: none; }

/* Stats Banner */
.stats-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}

.stats-banner:has(.stats-island:empty) {
    justify-content: flex-end;
}

/* Stats Island: inline pill */
.stats-island {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-slightly-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 20px;
    box-shadow: var(--shadow-card);
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.stats-island:empty { display: none; }

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.stat-item strong {
    color: var(--text);
    font-weight: 600;
}

/* Theme toggle: pill with text */
.stats-banner .theme-toggle {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--bg-slightly-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-card);
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 8px 16px;
    margin: 0;
    margin-left: auto;
}

/* Sun icon in dark mode, moon icon in light mode */
.theme-icon-light { display: none; }
.theme-icon-dark { display: block; }
body.light .theme-icon-light { display: block; }
body.light .theme-icon-dark { display: none; }
.power-icon {
    width: 1.25rem;
    stroke: var(--text-muted);
}
button {
    cursor: pointer;
    border: none;
    border-radius: 1rem;
    background: var(--bg);
    padding: 0.24rem 0.5rem 0.12rem 0.5rem;
    margin-left: auto;
    transition: var(--transition);
}
button:hover {
    background: var(--bg-light);
    transition: var(--transition);
}
button:focus {
    outline: none;
}
/* shadows */
.shadows {
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

  padding: 1rem;
  gap: 1rem;
  margin: 2rem 0 4rem 0;
  border-radius: 1.5rem;
}
.shadows div {
  background: var(--bg-light);
  padding: 2rem;
  border-radius: 1rem;
}

.shadow-s {
  box-shadow: var(--shadow-s);
}
.shadow-m {
  box-shadow: var(--shadow-m);
}
.shadow-l {
  box-shadow: var(--shadow-l);
}

/* --- SIDEBAR --- */
aside {
    width: 260px;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    padding: 20px;
    /* In Light mode, we use a border. In Dark mode, the color difference creates the edge. */
    border-right: 1px solid var(--border-color); 
    z-index: 10;
}

.logo {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

.logo .logo-icon { 
    color: var(--primary);
    margin-bottom: 5px; 
}
.logo .logo-text { color: var(--text); }

.badge {
    font-size: 0.65rem;
    background: var(--bg-light);
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

nav ul { list-style: none; padding: 0; margin: 0; }
nav li { margin-bottom: 6px; }

nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: var(--text-muted);
    border-radius: 10px;
    transition: all 0.2s ease;
    font-weight: 500;
    /* box-shadow: var(--shadow-s); */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

nav a:hover {
    background-color: var(--bg-active);
    color: var(--text);
}

/* Active State - Uses the Inset "Pressed" Look in Dark Mode */
nav a.active {
    background-color: var(--bg-slightly-dark);
    color: var(--text);
    box-shadow: var(--shadow-inset), inset 3px 0 0 var(--accent);
}

.sidebar-footer { margin-top: auto; }

.pro-card {
    background: var(--bg-dark);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 20px;
    /* Applying the "Elevation" Shadow */
    box-shadow: var(--shadow-card); 
    border: 1px solid var(--border-color);
}

.pro-card h4 { margin: 0 0 6px 0; font-size: 0.9rem; color: var(--text); }
.pro-card p { margin: 0 0 16px 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }

.btn-pro {
    background: var(--bg-light);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.05);
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    /* font-size: 0.85rem; */
    font-weight: 600;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-pro:hover { 
    background: var(--bg-active); 
    transform: translateY(1px);
}

/* --- MAIN AREA --- */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
}

.flexbox-main {
}

/* Toggle Switch — see .stats-banner .theme-toggle */

h1 {
    font-size: 1.8rem;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
    line-height: 1;
}

/* Old stats-island / stat-pill rules removed — see .stats-banner above */

/* UPDATE BANNER */
.update-banner {
    background: linear-gradient(135deg, oklch(0.35 0.12 262) 0%, oklch(0.30 0.10 280) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 16px;
    transition: opacity 0.3s ease;
}
.update-banner.hidden {
    display: none;
}
.update-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font: var(--small);
    color: rgba(255, 255, 255, 0.9);
}
.update-banner-icon {
    flex-shrink: 0;
    display: flex;
    color: var(--primary);
}
#update-banner-text {
    flex: 1;
}
.update-banner-progress {
    flex: 1;
    max-width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
.update-banner-progress.hidden {
    display: none;
}
.update-banner-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.update-banner-btn {
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 5px 14px;
    border-radius: 6px;
    font: var(--small);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.update-banner-btn:hover {
    background: var(--accent);
    transform: scale(1.03);
}
.update-banner-btn.hidden {
    display: none;
}
.update-banner-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    display: flex;
    transition: color var(--transition);
}
.update-banner-dismiss:hover {
    color: rgba(255, 255, 255, 0.9);
}
.light .update-banner {
    background: linear-gradient(135deg, oklch(0.92 0.04 262) 0%, oklch(0.94 0.03 280) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.light .update-banner-content {
    color: var(--text);
}
.light .update-banner-progress {
    background: rgba(0, 0, 0, 0.08);
}
.light .update-banner-dismiss {
    color: rgba(0, 0, 0, 0.35);
}
.light .update-banner-dismiss:hover {
    color: rgba(0, 0, 0, 0.7);
}

/* HERO CARD - Quick Start Guide */
.hero-card {
    background: linear-gradient(200deg, var(--bg-slightly-light) 0%, var(--bg) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 28px 32px;
    border-radius: 20px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hero-card.hidden {
    display: none;
}

/* Subtle glow effect */
.hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
}

/* Accent corner glow */
.hero-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: 0.04;
    pointer-events: none;
}

/* Header section */
.hero-header {
    margin-bottom: 24px;
}

.hero-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.hero-card h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.hero-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.hero-dismiss-btn {
    background: transparent;
    border: none;
    padding: 6px;
    margin: -6px -6px -6px 0;
    border-radius: 8px;
    color: var(--text-muted);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-dismiss-btn:hover {
    opacity: 1;
    background: var(--bg-light);
}

/* Steps container */
.hero-steps {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.hero-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.25s ease;
}

.hero-step:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.hero-step-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--bg-light) 50%, transparent 100%);
    flex-shrink: 0;
    display: none; /* Hidden for now, using gap instead */
}

/* Step icons */
.hero-step-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    position: relative;
}

.hero-step-icon svg {
    position: relative;
    z-index: 1;
}

.hero-step-icon-record {
    background: linear-gradient(200deg, #4dd9d9 0%, oklch(0.64 0.13 161.93) 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--status-success) 30%, transparent);
}

.hero-step-icon-record svg {
    color: white;
}

.hero-step-icon-stop {
    background: linear-gradient(200deg, var(--primary) 0%, oklch(0.48 0.25 270) 100%);
    box-shadow: 0 4px 12px oklch(0.52 0.29 261.59 / 0.3);
}

.hero-step-icon-stop svg {
    color: white;
}

.hero-step-icon-command {
    background: linear-gradient(200deg, var(--secondary) 0%, oklch(0.55 0.20 320) 100%);
    box-shadow: 0 4px 12px oklch(0.64 0.23 300.93 / 0.3);
}

.hero-step-icon-command svg {
    color: white;
}

/* Step content */
.hero-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hero-step-content h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px 0;
}

.hero-step-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

/* Keyboard and voice hints */
.hero-card kbd {
    display: inline-block;
    color: var(--text);
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 3px 7px;
    background: var(--bg-light);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: middle;
}

.hero-card voicehint {
    display: inline-block;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 2px 8px;
    background: var(--primary-bg);
    border-radius: 12px;
    vertical-align: middle;
}

.hero-card voicehint#keyword-hint-fullstop {
    color: var(--accent-green);
    background: oklch(0.7 0.2 145 / 0.15);
}

/* --- HERO BUTTONS --- */

.btn-hero {
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 8px;
    margin-right: 8px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-s);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-light);
    color: var(--text-muted);
    min-width: 11rem; /* ~130px fixed width for recording control buttons */
    /* font-size: 0.85rem; */
}

.btn-hero .btn-icon-wrapper {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-hero .btn-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 50%;
}

.btn-hero .btn-icon-light {
    display: block;
}

.btn-hero .btn-icon-dark {
    display: none;
}

body.light .btn-hero .btn-icon-dark {
    display: block;
}
body.light .btn-hero .btn-icon-light {
    display: none;
}

.btn-hero:hover:not(:disabled) {
    background-color: var(--bg-active);
    box-shadow: var(--shadow-card);
}

.btn-hero:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.btn-hero:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Start Button - Green icon background */
.btn-hero.btn-start .btn-icon-wrapper {
    background-color: var(--status-success);
}

/* Stop Button - Red icon background */
.btn-hero.btn-stop .btn-icon-wrapper {
    background-color: var(--status-error);
}

/* Pause Button - White icon background */
.btn-hero.btn-pause .btn-icon-wrapper {
    background-color: white;
}

/* --- TRANSCRIPTION FEED --- */
.date-group-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 12px;
    margin-left: 4px;
    font-weight: 700;
}

.transcription-group {
    background: linear-gradient(200deg, var(--bg-slightly-light) 0%, var(--bg) 100%);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    margin-bottom: 40px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.transcription-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.03); /* Very subtle divider */
    transition: background 0.2s;
}
/* Light mode divider override */
[data-theme="light"] .transcription-item { border-bottom: 1px solid var(--border-color); }

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

/* LLM Processing spinner on transcription item */
.transcription-item.llm-processing::after {
    content: '';
    position: absolute;
    top: 26px;
    right: 50px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--bg-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: item-spinner 0.8s linear infinite;
}

@keyframes item-spinner {
    to { transform: rotate(360deg); }
}

.transcription-item:hover {
    background-color: var(--bg-slightly-light);
}

.timestamp {
    min-width: 90px;
    flex-shrink: 0;
    /* font-size: 0.85rem; */
    font-weight: 600;
    color: var(--text-muted);
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.text-content {
    flex: 1;
    min-width: 0;
    margin-right: 60px;
    max-height: 376px;
    overflow-y: auto;
}

.text-content.content-hidden {
    display: none;
}

/* iOS-style toggle switch - positioned right */
.view-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-dark);
    border-radius: 20px;
    transition: 0.3s;
    box-shadow: var(--shadow-inset); 
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-muted);
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
    background-color: white;
}

.text-content strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

/* --- MODAL & SETTINGS STYLES --- */
.modal-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

.modal-window {
    width: 900px;
    height: 600px;
    background-color: var(--bg); /* Uses card color */
    border-radius: 16px;
    display: flex;
    overflow: hidden;
    /* Deep elevation shadow for the floating window */
    box-shadow: 0 20px 50px rgba(0,0,0,0.3), var(--shadow-card);
    border: 1px solid var(--border-color);
    
    /* Scale animation */
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-backdrop.open .modal-window {
    transform: scale(1);
}

/* Small Modal (for confirmations) */
.modal-window.modal-small {
    width: 400px;
    height: auto;
    max-width: 90%;
}

.modal-message {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    width: 100%;
}

.btn-delete {
    background: var(--status-error);
    color: var(--text);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-delete:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

body.light .btn-delete {
    color: white;
}

/* -- Download Modal -- */
.download-options {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.download-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
}

.download-option:hover {
    background: var(--bg-sidebar);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.download-option svg {
    width: 32px;
    height: 32px;
    opacity: 0.8;
}

.download-option:hover svg {
    opacity: 1;
}

.download-option span {
    font-size: 0.85rem;
    font-weight: 500;
}

.download-option.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.download-version {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 16px;
}

/* -- Modal Sidebar -- */
.modal-sidebar {
    width: 240px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.modal-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 12px;
    margin-top: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.modal-section-label:first-child { margin-top: 0; }

.modal-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 2px;
}

.modal-nav-item:hover { background-color: var(--bg-light); }
.modal-nav-item.active {
    background-color: var(--bg-dark);
    font-weight: 500;
    /* "Recessed" active state for dark mode depth */
    box-shadow: var(--shadow-inset);
}

.modal-version {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* -- Modal Content Area -- */
.modal-main {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
    /* background-color: var(--bg-slightly-dark); */ 
}

.modal-title {
    font-family: var(--ff-display);
    font-size: 1.6rem;
    margin: 0 0 24px 0;
    font-weight: 400;
}

/* Settings Tab Content */
.settings-tab-content {
    display: none;
}

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

/* The Settings Group (Keyboard, Mic, etc) */
.settings-group {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background-color: var(--bg-slightly-light);
}

/* Dark Mode: Recessed "Well" look | Light Mode: Light Gray Card */
[data-theme="dark"] .settings-group {
    border: 1px solid transparent;
    
}
[data-theme="light"] .settings-group {
    border: 1px solid var(--border-color);
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}
.settings-row:last-child { border-bottom: none; }

.setting-info h5 { margin: 0 0 4px 0; font-size: 0.95rem; font-weight: 500; }
.setting-info p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.setting-info a { color: var(--text); text-decoration: none; font-weight: 600; }

.btn-change {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 6px 16px;
    border-radius: 6px;
}
.btn-change:hover {
    background-color: var(--bg-active);
}

.settings-select {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: var(--shadow-card);
    min-width: 180px;
    width: 205px
}
.settings-select:hover {
    background-color: var(--bg-active);
}
.settings-select:focus {
    outline: none;
    border-color: var(--bg-active);
}

.settings-input {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: 0.2s;
    box-shadow: var(--shadow-card);
    min-width: 180px;
    width: 205px;
}
.settings-input:hover {
    background-color: var(--bg-active);
}
.settings-input:focus {
    outline: none;
    border-color: var(--accent);
}
.settings-input::placeholder {
    color: var(--text-muted);
}

#account-email-input,
#mobile-account-email-input {
    box-shadow: none;
}

/* Settings Actions (Save/Cancel button container) */
.settings-actions {
    position: sticky;
    bottom: -40px;
    margin-top: 24px;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: -40px;
    padding: 16px 40px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--bg);
    border-top: 1px solid var(--border-color);
    z-index: 1;
}

.btn-cancel {
    background-color: var(--bg-light);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-left: 0px;
    box-shadow: var(--shadow-card);
}

.btn-cancel:hover {
    background-color: var(--bg-active);

}

.btn-save {
    background-color: var(--accent);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s, box-shadow 0.2s, transform 0.15s ease;
}

.btn-save:hover:not(:disabled) {
    background-color: var(--accent-hover, #4f46e5);
    box-shadow: 0 0 20px var(--glow);
    transform: translateY(-1px);
}

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

.btn-link-external {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    box-shadow: var(--shadow-card);
}

.btn-link-external:hover {
    background-color: var(--bg-active);
    color: var(--accent);
    text-decoration: none;
}

/* Keyboard Shortcuts Configuration */
.settings-row-shortcuts-header {
    padding: 12px 20px 8px 20px;
    border-bottom: none;
}

.settings-row-shortcuts-header .setting-info h5 {
    margin: 0;
}

.btn-reset-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.btn-reset-link:hover {
    color: var(--text);
}

.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
    flex-wrap: wrap;
}

.shortcut-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.shortcut-value-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.shortcut-value {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: monospace;
    text-align: right;
    min-width: 100px;
    cursor: default;
    transition: 0.2s;
}

.shortcut-value.recording {
    border-color: var(--status-warning);
    background-color: var(--bg-slightly-dark);
    color: var(--status-warning);
    animation: pulse-border 1s infinite;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3); }
}

.shortcut-edit-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcut-edit-btn:hover {
    color: var(--text);
    background-color: var(--bg-light);
}

.shortcut-edit-btn.recording {
    color: var(--status-warning);
}

.shortcut-error {
    font-size: 0.75rem;
    color: var(--status-error);
    width: 100%;
    text-align: right;
    padding-right: 28px;
}

.shortcut-error:empty {
    display: none;
}

/* Animations */
@keyframes slideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.animate-entry { animation: slideIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

/* --- TEXT STATE STYLES --- */

/* Speculative text (still updating, may change) */
.speculative {
    opacity: 0.6;
    color: var(--text-muted);
}

/* Command keyword styling */
.keyword {
    color: var(--keyword-text);
    background: var(--keyword-bg);
    padding: 0px 6px;
    border-radius: 4px;
    margin: 0 0px;
    display: inline-block;
}

/* Speculative keyword */
.speculative .keyword {
    opacity: 0.75;
}

/* Full stop keyword styling */
.keyword-fullstop {
    background: oklch(0.7 0.2 145 / 0.15);
    border-color: oklch(0.7 0.2 145 / 0.3);
    color: var(--accent-green);
    padding: 0px 6px;
    border-radius: 4px;
    margin: 0 0px;
    display: inline-block;
}

.speculative .keyword-fullstop {
    opacity: 0.75;
}

/* Command block content */
.command {
    color: var(--command-text);
    background: var(--command-bg);
    padding: 0px 0px;
    margin: 0 2px;
    display: inline-block;
    border-radius: 4px;
}

/* Speculative command block */
.speculative .command {
    opacity: 0.75;
}

/* Terminal-style delete highlight */
.delete-highlight {
    display: inline;
    background: oklch(0.52 0.29 261.59 / 0.4);
    border-radius: 2px;
    animation: delete-select 0.15s ease-out forwards;
}

@keyframes delete-select {
    from { background: transparent; }
    to { background: oklch(0.52 0.29 261.59 / 0.4); }
}

/* Collapse phase */
.delete-highlight.collapsing {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
    animation: delete-collapse 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes delete-collapse {
    0% { opacity: 1; transform: scaleX(1); }
    40% { opacity: 0.7; background: oklch(0.65 0.15 20 / 0.3); }
    100% { opacity: 0; max-width: 0; transform: scaleX(0); padding: 0; margin: 0; }
}

/* GPT-4o refinement marker */
.refined { /* Intentionally no visual change - marker is the indicator */ }

.refinement-marker {
    display: inline-block;
    width: 3px;
    height: 1.1em;
    vertical-align: text-bottom;
    background: var(--primary);
    opacity: 0.7;
    border-radius: 1px;
    margin: 0 2px;
    box-shadow: 0 0 4px var(--primary);
    animation: refinement-pulse 1.5s ease-in-out infinite;
}

@keyframes refinement-pulse {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 2px var(--primary); }
    50% { opacity: 0.9; box-shadow: 0 0 6px var(--primary); }
}

/* Refinement highlight — flash on new refined text that fades out */
.refine-highlight {
    display: inline;
    border-radius: 2px;
    animation: refine-flash 0.5s ease-out forwards;
}

@keyframes refine-flash {
    from { background: oklch(0.52 0.29 261.59 / 0.3); }
    to { background: transparent; }
}

/* Inline code styling */
.text-content code {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em; 
}

/* --- STATUS INDICATOR --- */

.status-indicator {
    background: var(--bg-light);
    padding: 8px 16px;
    border-radius: 30px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-left: 0px;
    margin-right: auto;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    margin-top: 20px;
    /* font-size: 0.85rem; */
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text);
    transition: all 0.2s ease;
}

/* Status States */
.status-indicator.listening {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: var(--primary);
}

.status-indicator.listening .status-dot {
    background: var(--primary);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-indicator.success {
    background: rgba(16, 185, 129, 0.15); /* Green with opacity */
    color: var(--status-success);
    border-color: rgba(16, 185, 129, 0.3);
}

.status-indicator.success .status-dot {
    background: var(--status-success);
}

.status-indicator.error {
    background: rgba(239, 68, 68, 0.15); /* Red with opacity */
    color: var(--status-error);
    border-color: rgba(239, 68, 68, 0.3);
}

.status-indicator.error .status-dot {
    background: var(--status-error);
}

.status-indicator.paused {
    background: var(--bg-light);
    color: var(--text);
    border-color: var(--border-color);
    opacity: 0.8;
}

.status-indicator.paused .status-dot {
    background: var(--text);
}

.status-indicator.connecting {
    background: rgba(59, 130, 246, 0.15); /* Blue with opacity */
    color: var(--status-info);
    border-color: rgba(59, 130, 246, 0.3);
}

.status-indicator.connecting .status-dot {
    background: var(--status-info);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- VOICE ACTIVITY INDICATOR (WAVEFORM) --- */

.voice-activity-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 20px;
    background: var(--bg-light);
    border-radius: 30px;
    width: fit-content;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.voice-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}

.voice-bar {
    width: 3px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Idle State - Minimal flat bars */
.voice-activity-container.idle .voice-bar {
    background: var(--waveform-disabled);
    opacity: 0.3;
    height: 4px;
}

/* Connecting State - Greyed out / inactive */
.voice-activity-container.connecting {
    background: var(--bg-light);
    border-color: var(--border-color);
}

.voice-activity-container.connecting .voice-bar {
    background: var(--waveform-disabled);
    animation: pulse-bar 1.5s ease-in-out infinite;
}

/* Waiting State - Gentle wave (listening but no speech) */
.voice-activity-container.waiting {
    background: var(--primary-bg);
    border-color: var(--primary);
}

.voice-activity-container.waiting .voice-bar {
    background: var(--primary);
    animation: gentle-wave 2s ease-in-out infinite;
}

/* Active State - Strong oscillating wave (speaking) */
.voice-activity-container.active {
    background: var(--primary-bg);
    border-color: var(--primary);
}

.voice-activity-container.active .voice-bar {
    background: var(--primary);
    animation: active-wave 0.6s ease-in-out infinite;
}

/* Paused State - Static medium bars */
.voice-activity-container.paused {
    background: var(--bg-light);
    border-color: var(--border-color);
    opacity: 0.7;
}

.voice-activity-container.paused .voice-bar {
    background: var(--text-muted);
    height: 8px;
}

/* Finalizing State - Purple pulsing to indicate processing */
.voice-activity-container.finalizing {
    background: var(--primary-bg);
    border-color: var(--primary);
}

.voice-activity-container.finalizing .voice-bar {
    background: var(--primary);
    animation: finalizing-pulse 1s ease-in-out infinite;
}

@keyframes finalizing-pulse {
    0%, 100% {
        height: 6px;
        opacity: 0.5;
    }
    50% {
        height: 10px;
        opacity: 1;
    }
}

/* Muted State - Static with lower opacity */
.voice-activity-container.muted {
    background: var(--bg-light);
    border-color: var(--border-color);
    opacity: 0.5;
}

.voice-activity-container.muted .voice-bar {
    background: var(--text-muted);
    height: 10px;
}

/* Error State - Red with subtle animation */
.voice-activity-container.error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.voice-activity-container.error .voice-bar {
    background: var(--status-error);
    animation: error-pulse 2s ease-in-out infinite;
}

/* Waveform Animations */

/* Gentle wave for waiting state */
@keyframes gentle-wave {
    0%, 100% {
        height: 6px;
    }
    50% {
        height: 12px;
    }
}

.voice-activity-container.waiting .voice-bar:nth-child(1) {
    animation-delay: 0s;
}
.voice-activity-container.waiting .voice-bar:nth-child(2) {
    animation-delay: 0.1s;
}
.voice-activity-container.waiting .voice-bar:nth-child(3) {
    animation-delay: 0.2s;
}
.voice-activity-container.waiting .voice-bar:nth-child(4) {
    animation-delay: 0.3s;
}
.voice-activity-container.waiting .voice-bar:nth-child(5) {
    animation-delay: 0.4s;
}

/* Active wave for speaking state */
@keyframes active-wave {
    0% {
        height: 4px;
    }
    25% {
        height: 20px;
    }
    50% {
        height: 8px;
    }
    75% {
        height: 16px;
    }
    100% {
        height: 4px;
    }
}

.voice-activity-container.active .voice-bar:nth-child(1) {
    animation-delay: 0s;
}
.voice-activity-container.active .voice-bar:nth-child(2) {
    animation-delay: 0.08s;
}
.voice-activity-container.active .voice-bar:nth-child(3) {
    animation-delay: 0.16s;
}
.voice-activity-container.active .voice-bar:nth-child(4) {
    animation-delay: 0.24s;
}
.voice-activity-container.active .voice-bar:nth-child(5) {
    animation-delay: 0.32s;
}

/* Pulse animation for connecting state */
@keyframes pulse-bar {
    0%, 100% {
        height: 8px;
        opacity: 0.5;
    }
    50% {
        height: 14px;
        opacity: 1;
    }
}

/* Error pulse animation */
@keyframes error-pulse {
    0%, 100% {
        height: 6px;
        opacity: 0.7;
    }
    50% {
        height: 10px;
        opacity: 1;
    }
}

/* --- RECORDING ISLAND --- */

.recording-island {
    z-index: 10000;
    position: fixed;
    bottom: 24px;
    /* Center relative to main content area (account for 260px sidebar) */
    left: calc(50% + 130px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-slightly-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    
}

/* Override voice-activity-container styles when inside island */
.recording-island .voice-activity-container {
    margin-top: 0;
    padding: 8px 12px;
    background: transparent;
    border: none;
    box-shadow: none;
}

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

.island-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.island-btn .btn-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.island-btn:hover:not(:disabled) {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.island-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.island-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Start button - Green */
.island-btn-start {
    background: var(--status-success);
}

.island-btn-start:hover:not(:disabled) {
    background: #16a34a; /* Slightly darker green */
}

/* Cancel button - Neutral/Gray */
.island-btn-cancel {
    background: var(--bg-active);
}

.island-btn-cancel:hover:not(:disabled) {
    background: var(--text-muted);
}

body.light .island-btn-cancel {
    background: oklch(0.55 0 264);
}

body.light .island-btn-cancel:hover:not(:disabled) {
    background: oklch(0.45 0 264);
}

/* Stop button - Red */
.island-btn-stop {
    background: var(--status-error);
}

.island-btn-stop:hover:not(:disabled) {
    background: #dc2626; /* Slightly darker red */
}

/* --- Island State Visibility --- */

/* Loading state: show grey start button, hide cancel/stop */
.recording-island.loading #record-btn {
    display: flex;
    background: var(--text-muted);
    pointer-events: none;
}

.recording-island.loading #cancel-recording-btn,
.recording-island.loading #stop-recording-btn {
    display: none;
}

/* Idle state: show only start button, hide cancel */
.recording-island.idle #record-btn {
    display: flex;
}

.recording-island.idle #cancel-recording-btn,
.recording-island.idle #stop-recording-btn {
    display: none;
}

/* Recording state: show cancel (left) and stop (right), hide start */
.recording-island.recording #record-btn {
    display: none;
}

.recording-island.recording #cancel-recording-btn,
.recording-island.recording #stop-recording-btn {
    display: flex;
}

/* Finalizing state: show cancel and stop disabled, hide start */
.recording-island.finalizing #record-btn {
    display: none;
}

.recording-island.finalizing #cancel-recording-btn,
.recording-island.finalizing #stop-recording-btn {
    display: flex;
    opacity: 0.5;
    pointer-events: none;
}

/* State-aware glow accents */
.recording-island.idle {
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2),
        0 0 20px rgba(0, 185, 100, 0.25), 0 0 40px rgba(0, 185, 100, 0.10);
}

.recording-island.recording {
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2),
        0 0 20px rgba(190, 50, 40, 0.25), 0 0 40px rgba(190, 50, 40, 0.10);
}

.recording-island.finalizing {
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2),
        0 0 20px rgba(80, 120, 240, 0.20), 0 0 40px rgba(80, 120, 240, 0.08);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .recording-island {
        bottom: 16px;
        /* Center on viewport when sidebar is hidden on mobile */
        left: 50%;
        padding: 6px 10px;
        gap: 8px;
    }

    .island-btn {
        width: 40px;
        height: 40px;
    }

    .island-btn .btn-icon {
        width: 20px;
        height: 20px;
    }

    .recording-island .voice-activity-container {
        padding: 6px 8px;
    }
}

/* --- ACTIVE RECORDING ITEM --- */

/* Special styling for the active item in the list */
.transcription-item.active-recording {
    position: relative;
    padding-left: 21px; /* Compensate for the border width to align text if needed, or just let it sit */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); /* Slight highlight on top */
}

/* Live Badge in Timestamp Column */
.live-indicator-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--status-error);
    font-weight: 700;
    font-size: 0.7rem;
    margin-top: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--status-error);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

/* Content Wrapper to hold copy button */
.active-content-wrapper {
    position: relative;
    width: 100%;
}

.streaming-text {
    /* Optional: Special font or cursor effect for streaming text */
    min-height: 24px;
}

/* Inline Copy Button */
.btn-copy-inline {
    position: absolute;
    top: -4px;
    right: 0;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.05s ease;
    background: var(--bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

.transcription-item.active-recording:hover .btn-copy-inline {
    opacity: 1;
    transform: translateX(0);
}

.btn-copy-inline:hover {
    background-color: var(--bg-light);
    color: var(--text);
    transform: scale(1.05);
}

/* Light mode override for inline button bg if needed */
[data-theme="light"] .btn-copy-inline {
    background: white;
}

/* Empty state for feed */
.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
    font: var(--p);
    text-align: center;
}

/* Placeholder text for recording items */
.placeholder-text {
    color: var(--text-muted);
    font-style: italic;
}

/* LLM response inline within transcription item */
.llm-response-inline {
    flex-basis: 100%;
    margin-top: 1rem;
    margin-left: 90px; /* Align with text-content (same as timestamp min-width) */
    padding: 0.75rem 1rem;
    background: var(--bg-slightly-dark);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}

.llm-response-label {
    font: var(--small);
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.llm-response-content {
    font: var(--p);
    color: var(--text);
    padding-right: 22px; /* alignment with text area in edit mode*/
}

.llm-response-content p {
    margin: 0;
    line-height: 1.6em;
}

/* --- ITEM ACTION BUTTONS --- */
.item-actions {
    position: absolute;
    top: 20px;
    right: 85px;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
    background: var(--bg-slightly-light);
    padding-left: 5px;
    padding-right: 5px;
}

.transcription-item:hover .item-actions {
    opacity: 1;
    pointer-events: auto;
}

.item-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: var(--bg-slightly-light);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.item-action-btn.copied {
    background: var(--status-success);
    color: var(--text);
}

.item-action-btn-delete:hover {
    background: var(--status-error);
    color: var(--text);
}

.item-action-btn-edit:hover:not(:disabled) {
    background: var(--primary);
    color: var(--text);
}

.item-action-btn-resume:hover:not(:disabled) {
    background: var(--primary);
    color: var(--text);
}

.item-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.item-action-btn:disabled:hover {
    background: transparent;
    color: var(--text-muted);
}

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

/* Light mode overrides */
[data-theme="light"] .item-action-btn {
    background: var(--bg-slightly-dark);
}

/* --- MAIN VIEW SYSTEM --- */
.main-view {
    display: none;
    padding: 40px 60px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.main-view.active {
    display: block;
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

.view-header h1 {
    margin: 0 0 8px 0;
}

.view-description {
    color: var(--text-muted);
    margin: 0;
}

.view-header-content h1 {
    font-family: var(--ff-display);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.btn-add-new {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-card);
    margin-left: 0;
}

.btn-add-new:hover {
    box-shadow: var(--shadow-card), 0 0 20px var(--glow);
    transform: translateY(-1px);
}

.btn-add-new:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

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

/* --- DICTIONARY VIEW STYLES --- */
.dictionary-card {
    background-image: linear-gradient(to bottom left, var(--bg-slightly-light), var(--bg));
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.notes-item:not(.editing),
.instructions-item:not(.editing),
.snippets-item:not(.editing),
.dictionary-item:not(.editing) {
    cursor: pointer;
}

.dictionary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

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

.dictionary-item:hover {
    background: var(--bg-slightly-light);
}

.dictionary-item-text {
    flex: 1;
    color: var(--text);
    font-size: 0.95rem;
}

.dictionary-item-input {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.95rem;
    font-family: var(--ff);
    outline: none;
}

.dictionary-item-input:focus {
    box-shadow: 0 0 0 2px var(--primary-bg);
}

.dictionary-item-actions {
    display: flex;
    gap: 8px;
    margin-left: 16px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dictionary-item:hover .dictionary-item-actions {
    opacity: 1;
}

.dictionary-item.editing .dictionary-item-actions {
    opacity: 1;
}

.dictionary-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 0;
}

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

.dictionary-action-btn.btn-delete:hover {
    background: var(--status-error);
    color: white;
}

.dictionary-action-btn.btn-save {
    background: var(--status-success);
    color: white;
}

.dictionary-action-btn.btn-save:hover {
    background: var(--status-success);
    opacity: 0.9;
}

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

.btn-add-keyterm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin-top: 16px;
    background: var(--bg-light);
    border: 1px dashed var(--text-muted);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-keyterm:hover {
    background: var(--bg-active);
    border-color: var(--text);
    color: var(--text);
}

.dictionary-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
}

/* --- SNIPPETS VIEW STYLES --- */
.snippets-card {
    background-image: linear-gradient(to bottom left, var(--bg-slightly-light), var(--bg));
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.snippets-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

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

.snippets-item:hover {
    background: var(--bg-slightly-light);
}

.snippets-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.snippets-item-key {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.snippets-item-arrow {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.snippets-item-value {
    color: var(--text);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snippet-newline {
    display: inline-block;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
}

.snippets-item-fields {
    display: flex;
    gap: 12px;
    flex: 1;
}

.snippets-item-input {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.95rem;
    font-family: var(--ff);
    outline: none;
}

.snippets-item-input:focus {
    box-shadow: 0 0 0 2px var(--primary-bg);
}

.snippets-key-input {
    max-width: 200px;
}

.snippets-value-input {
    flex: 2;
}

.snippets-item-actions {
    display: flex;
    gap: 8px;
    margin-left: 16px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.snippets-item:hover .snippets-item-actions {
    opacity: 1;
}

.snippets-item.editing .snippets-item-actions {
    opacity: 1;
}

.snippets-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 0;
}

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

.snippets-action-btn.btn-delete:hover {
    background: var(--status-error);
    color: white;
}

.snippets-action-btn.btn-save {
    background: var(--status-success);
    color: white;
}

.snippets-action-btn.btn-save:hover {
    background: var(--status-success);
    opacity: 0.9;
}

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

.snippets-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
}

/* --- INSTRUCTIONS VIEW STYLES --- */
.instructions-card {
    background-image: linear-gradient(to bottom left, var(--bg-slightly-light), var(--bg));
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.instructions-item {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s ease;
}

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

.instructions-item:hover {
    background: var(--bg-slightly-light);
}

.instructions-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.instructions-item-name {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.instructions-item-preview {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.instructions-name-input {
    flex: 1;
    max-width: 300px;
    background: var(--bg-dark);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.95rem;
    font-family: var(--ff);
    outline: none;
}

.instructions-name-input:focus {
    box-shadow: 0 0 0 2px var(--primary-bg);
}

.instructions-content-input {
    width: 100%;
    min-height: 72px;
    background: var(--bg-dark);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 12px;
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--ff);
    line-height: 1.6;
    outline: none;
    resize: none;
    overflow-y: auto;
}

.instructions-content-input:focus {
    box-shadow: 0 0 0 2px var(--primary-bg);
}

.instructions-item-actions {
    display: flex;
    gap: 8px;
    margin-left: 16px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.instructions-item:hover .instructions-item-actions {
    opacity: 1;
}

.instructions-item.editing .instructions-item-actions {
    opacity: 1;
}

.instructions-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 0;
}

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

.instructions-action-btn.btn-delete:hover {
    background: var(--status-error);
    color: white;
}

.instructions-action-btn.btn-save {
    background: var(--status-success);
    color: white;
}

.instructions-action-btn.btn-save:hover {
    background: var(--status-success);
    opacity: 0.9;
}

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

.instructions-empty {
    padding: 32px;
    text-align: center;
    color: var(--text);
}

/* --- NOTES VIEW STYLES --- */
.notes-card {
    background-image: linear-gradient(to bottom left, var(--bg-slightly-light), var(--bg));
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Shared card flair */
.dictionary-card,
.snippets-card,
.instructions-card,
.notes-card {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Top edge highlight (same as hero-card::before) */
.dictionary-card::before,
.snippets-card::before,
.instructions-card::before,
.notes-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    z-index: 1;
}

/* Corner glow (same as hero-card::after) */
.dictionary-card::after,
.snippets-card::after,
.instructions-card::after,
.notes-card::after {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: 0.04;
    pointer-events: none;
}

/* Light mode: softer edge highlight */
body.light .dictionary-card::before,
body.light .snippets-card::before,
body.light .instructions-card::before,
body.light .notes-card::before {
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 50%, transparent 100%);
}

.notes-item {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s ease;
}

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

.notes-item:hover {
    background: var(--bg-slightly-light);
}

.notes-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.notes-item-name {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.notes-item-content {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.6;
    max-height: 240px;
    overflow-y: auto;
}

.notes-item-content p {
    margin: 0 0 8px 0;
}

.notes-item-content p:last-child {
    margin-bottom: 0;
}

.notes-item-content code {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
}

.notes-item-content pre {
    background: var(--code-bg);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 8px 0;
}

.notes-item-content pre code {
    background: none;
    padding: 0;
}

.notes-item-content ul,
.notes-item-content ol {
    margin: 8px 0;
    padding-left: 24px;
}

.notes-item-content strong {
    font-weight: 600;
}

.notes-name-input {
    flex: 1;
    max-width: 300px;
    background: var(--bg-dark);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 0.95rem;
    font-family: var(--ff);
    outline: none;
}

.notes-name-input:focus {
    box-shadow: 0 0 0 2px var(--primary-bg);
}

.notes-content-input {
    width: 100%;
    min-height: 72px;
    background: var(--bg-dark);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 12px;
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--ff);
    line-height: 1.6;
    outline: none;
    resize: none;
    overflow-y: auto;
}

.notes-content-input:focus {
    box-shadow: 0 0 0 2px var(--primary-bg);
}

.notes-item-actions {
    display: flex;
    gap: 8px;
    margin-left: 16px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.notes-item:hover .notes-item-actions {
    opacity: 1;
}

.notes-item.editing .notes-item-actions {
    opacity: 1;
}

.notes-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 0;
}

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

.notes-action-btn.btn-delete:hover {
    background: var(--status-error);
    color: white;
}

.notes-action-btn.btn-copy.copied {
    background: var(--status-success);
    color: var(--text);
}

.notes-action-btn.btn-save {
    background: var(--status-success);
    color: white;
}

.notes-action-btn.btn-save:hover {
    background: var(--status-success);
    opacity: 0.9;
}

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

.notes-empty {
    padding: 32px;
    text-align: center;
    color: var(--text);
}

/* --- MOBILE MENU --- */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin: 0;
    background: var(--bg);
    border: none;
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: all 0.2s ease;
}

.mobile-menu-toggle:hover {
    background: var(--bg-light);
}

.mobile-menu-toggle .close-icon {
    display: none;
}

.mobile-menu-toggle.open .menu-icon {
    display: none;
}

.mobile-menu-toggle.open .close-icon {
    display: block;
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

/* --- MOBILE RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-overlay {
        display: block;
    }

    aside {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
        padding-top: 80px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

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

    aside .sidebar-footer {
        margin-top: auto;
        flex-shrink: 0;
        padding-bottom: 20px;
    }

    aside .pro-card {
        display: none;
    }

    #nav-download-app {
        display: none;
    }

    aside nav ul {
        flex-shrink: 0;
    }

    main {
        width: 100%;
    }

    .main-view {
        padding: 80px 20px 40px 20px;
    }

    .notes-item .notes-item-actions {
        opacity: 1;
    }

    .greeting {
        font-size: 1.05rem;
        margin-bottom: 16px;
    }

    /* Stats banner mobile */
    .stats-banner {
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
    .stats-island {
        font-size: 0.78rem;
        padding: 6px 14px;
        gap: 10px;
    }
    .stats-banner .theme-toggle {
        font-size: 0.78rem;
        padding: 6px 12px;
    }
    .stats-banner .theme-toggle span {
        display: none;
    }

    .hero-card {
        padding: 20px;
    }

    .hero-header {
        margin-bottom: 16px;
    }

    .hero-subtitle {
        display: none;
    }

    .hero-steps {
        flex-direction: column;
        gap: 12px;
    }

    .hero-step {
        flex-direction: row;
        text-align: left;
        padding: 14px 16px;
        gap: 14px;
    }

    .hero-step-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .hero-step-icon svg {
        width: 20px;
        height: 20px;
    }

    .hero-step-content h3 {
        font-size: 0.85rem;
        margin-bottom: 2px;
    }

    .hero-step-content p {
        font-size: 0.75rem;
    }

    .btn-hero {
        width: 100%;
        justify-content: center;
        margin-right: 0;
    }

    .view-header {
        flex-direction: column;
        gap: 16px;
    }

    .btn-add-new {
        width: 100%;
        justify-content: center;
    }

    .modal-window {
        width: 95%;
        height: 90%;
        flex-direction: column;
    }

    .modal-sidebar {
        width: 100%;
        max-height: 40vh;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 16px;
        flex-shrink: 0;
    }

    .modal-sidebar .modal-version {
        display: none;
    }

    .modal-nav-item {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .modal-section-label {
        margin-top: 16px;
        margin-bottom: 8px;
    }

    .modal-main {
        padding: 20px;
        flex: 1;
        overflow-y: auto;
    }

    .settings-input {
        width: 100%;
        min-width: unset;
    }

    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .settings-select {
        width: 100%;
    }

    .transcription-item {
        padding: 16px;
    }

    .timestamp {
        min-width: 70px;
        font-size: 0.8rem;
    }

    .text-content {
        margin-right: 40px;
    }

    .view-toggle {
        top: 16px;
        right: 16px;
    }

    /* LLM Processing spinner - move right on mobile */
    .transcription-item.llm-processing::after {
        right: 30px;
    }

    /* Force pointer-events off on mobile to override sticky :hover */
    .item-actions {
        top: 10px;
        right: 80px;
        pointer-events: none !important;
    }

    /* Only enable when explicitly selected via JS */
    .transcription-item.selected .item-actions {
        opacity: 1;
        pointer-events: auto !important;
    }

    /* Visual feedback for selected state */
    .transcription-item.selected {
        background: var(--bg-slightly-light);
    }

    .llm-response-inline {
        margin-left: 70px;
    }
}

/* --- EDIT MODE STYLES --- */

/* Transcription item in edit mode */
.transcription-item.editing {
    background-color: var(--bg-slightly-dark);
}

.transcription-item.editing .item-actions {
    display: none;
}

.transcription-item.editing .text-content {
    overflow-y: visible;
    max-height: none;
}

/* Edit textarea */
.edit-textarea {
    width: 100%;
    min-height: 24px;
    max-height: 400px;
    padding: 10px 0px 10px 10px;  /*no padding right due to scroll bar*/
    margin-top: -12px;
    margin-left: -10px;
    margin-bottom: -20px;
    border: 1px solid var(--bg-light);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text);
    font-family: var(--ff);
    font-size: 0.9rem;
    line-height: 1.6;
    resize: none;
    outline: none;
    overflow-y: auto;
}

.edit-textarea::placeholder {
    color: var(--text-muted);
}

/* Edit mode action buttons */
.edit-actions {
    position: absolute;
    top: 20px;
    right: 115px;
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.edit-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.edit-action-btn.btn-save {
    background: var(--status-success);
    color: white;
}

.edit-action-btn.btn-save:hover {
    opacity: 0.9;
}

.edit-action-btn.btn-cancel {
    background: var(--bg-active);
    color: var(--text-muted);
}

.edit-action-btn.btn-cancel:hover {
    background: var(--status-error);
    color: white;
}

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

@media (max-width: 768px) {
    .edit-actions {
        top: 10px;
        right: 80px;
    }
}

/* --- EDIT MODE HIGHLIGHT OVERLAY SYSTEM --- */

/* Highlight container - always present for dictation content */
.edit-highlight-container {
    position: relative;
    width: 100%;
}

/* Highlight layer - always visible, shows styled text */
.edit-highlight-layer {
    /* Positioning for overlay alignment */
    width: 100%;
    min-height: 24px;

    /* Typography - must match textarea exactly */
    font-family: var(--ff);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);

    /* Whitespace handling for plain text */
    white-space: pre-wrap;
    word-wrap: break-word;

    /* Layer behind textarea when editing */
    z-index: 0;

    padding-right: 22px; /*alignment with textarea edit mode*/
}

/* Edit mode: position layers for overlay */
.transcription-item.editing .edit-highlight-container {
    position: relative;
    /* Apply the negative margins at container level */
    margin-top: -12px;
    margin-left: -10px;
    margin-bottom: -20px;
}

.transcription-item.editing .edit-highlight-layer {
    /* Match textarea exactly for perfect overlay */
    box-sizing: border-box;
    padding: 10px 0px 10px 10px;
    border: 1px solid transparent; /* Match textarea border width */
    border-radius: 8px;
    pointer-events: none;
    /* Ensure identical text rendering */
    font-family: var(--ff);
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.transcription-item.editing .edit-textarea {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Reset margins - container handles positioning */
    margin: 0;
    box-sizing: border-box;
    /* Transparent text, visible caret */
    color: transparent;
    caret-color: var(--text);
    background: transparent;
    border: 1px solid var(--bg-light);
    border-radius: 8px;
    /* Ensure identical text rendering */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Keyword/command styles in highlight layer (non-edit mode) - can have padding for nice appearance */
.edit-highlight-layer .keyword {
    color: var(--keyword-text);
    background: var(--keyword-bg);
    padding: 0px 0px;
    border-radius: 4px;
    margin: 0 0px;
    display: inline;
}

.edit-highlight-layer .keyword-fullstop {
    color: var(--accent-green);
    background: oklch(0.7 0.2 145 / 0.15);
    padding: 0px 0px;
    border-radius: 4px;
    margin: 0 0px;
    display: inline;
}

.edit-highlight-layer .command {
    color: var(--command-text);
    background: var(--command-bg);
    padding: 0px 0px;
    margin: 0 0px;
    display: inline;
    border-radius: 4px;
}

/* Edit mode: Remove ALL padding/margin from spans to match textarea character positions exactly */
.transcription-item.editing .edit-highlight-layer .keyword,
.transcription-item.editing .edit-highlight-layer .keyword-fullstop,
.transcription-item.editing .edit-highlight-layer .command {
    padding: 0;
    margin: 0;
    border-radius: 2px;
}

/* Speculative text in highlight layer */
.edit-highlight-layer .speculative {
    opacity: 0.6;
}

/* Placeholder text styling */
.edit-highlight-layer .placeholder-text {
    color: var(--text-muted);
    font-style: italic;
}

/* --- SLASH COMMAND DROPDOWN --- */

.slash-dropdown {
    position: fixed;
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
    max-height: 250px;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-l);
    display: none;
}

.slash-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

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

.slash-dropdown-item:hover,
.slash-dropdown-item.selected {
    background: var(--bg-slightly-light);
}

.slash-dropdown-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.slash-dropdown-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slash-dropdown-item-type {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-light);
    color: var(--text-muted);
}

.slash-dropdown-type-replacement {
    background: var(--primary-bg);
    color: var(--primary);
}

.slash-dropdown-type-template {
    background: var(--secondary-bg);
    color: var(--secondary);
}

.slash-dropdown-type-note {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-success);
}

.slash-dropdown-item-preview {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slash-dropdown-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Light mode overrides for dropdown */
body.light .slash-dropdown {
    background: var(--bg-light);
    border-color: var(--border-color);
}

body.light .slash-dropdown-item:hover,
body.light .slash-dropdown-item.selected {
    background: var(--bg);
}

/* --- MOBILE SETTINGS MENU --- */

.mobile-settings {
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    z-index: 10001;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0.3s;
    visibility: hidden;
    pointer-events: none;
}

.mobile-settings.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.mobile-settings-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.mobile-settings-view.active {
    transform: translateX(0);
}

.mobile-settings-view.slide-out-left {
    transform: translateX(-100%);
}

.mobile-settings-view.slide-in-from-left {
    transform: translateX(-100%);
}

.mobile-settings-view.no-transition {
    transition: none !important;
}

/* Mobile Settings Header */
.mobile-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.mobile-settings-back {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
}

.mobile-settings-back:hover {
    background: var(--bg-light);
}

.mobile-settings-title {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.mobile-settings-search {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
}

.mobile-settings-search:hover {
    background: var(--bg-light);
}

.mobile-settings-placeholder {
    width: 40px;
    height: 40px;
}

/* Mobile Settings Content */
.mobile-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.mobile-settings-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 20px 20px 12px 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--bg-dark);
}

.mobile-settings-section-label:first-child {
    padding-top: 12px;
}

/* Settings Menu Item */
.mobile-settings-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s;
}

.mobile-settings-item:active {
    background: var(--bg-slightly-light);
}

.mobile-settings-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-light);
    border-radius: 10px;
    color: var(--text);
    flex-shrink: 0;
}

.mobile-settings-item-label {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
}

.mobile-settings-item-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Settings Field */
.mobile-settings-field {
    padding: 20px 20px;
    background: var(--bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.mobile-settings-field-label {
    display: block;
    margin-bottom: 12px;
}

.mobile-settings-field-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}

.mobile-settings-field-description {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Mobile Settings Input */
.mobile-settings-input {
    width: 100%;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--ff);
    transition: 0.2s;
}

.mobile-settings-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-active);
}

.mobile-settings-input::placeholder {
    color: var(--text-muted);
}

/* Mobile Settings Select */
.mobile-settings-select {
    width: 100%;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--ff);
    cursor: pointer;
    transition: 0.2s;
}

.mobile-settings-select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-active);
}

/* Mobile Shortcut Fields */
.mobile-shortcut-value-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-shortcut-value {
    flex: 1;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: monospace;
    text-align: left;
    cursor: default;
    transition: 0.2s;
}

.mobile-shortcut-value.recording {
    border-color: var(--status-warning);
    background-color: var(--bg-slightly-dark);
    color: var(--status-warning);
    animation: pulse-border 1s infinite;
}

.mobile-shortcut-edit-btn {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 12px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-shortcut-edit-btn:hover {
    color: var(--text);
    background: var(--bg-active);
}

.mobile-shortcut-edit-btn.recording {
    color: var(--status-warning);
    border-color: var(--status-warning);
}

.mobile-shortcut-error {
    display: block;
    font-size: 0.8rem;
    color: var(--status-error);
    margin-top: 8px;
}

.mobile-shortcut-error:empty {
    display: none;
}

/* Mobile Settings Actions */
.mobile-settings-actions {
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-btn-save {
    width: 100%;
    background: var(--accent);
    border: none;
    color: white;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

.mobile-btn-save:hover:not(:disabled) {
    background: var(--accent-hover, #4f46e5);
}

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

.mobile-btn-reset {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

.mobile-btn-reset:hover {
    background: var(--bg-light);
}

/* Light mode overrides for mobile settings */
[data-theme="light"] .mobile-settings-item {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .mobile-settings-field {
    border-bottom: 1px solid var(--border-color);
}

/* ========================================
   Toastify Overrides
   ======================================== */

.toastify {
    font-family: var(--ff);
    font-weight: 500;
    box-shadow: var(--shadow-card);
    background-color: var(--bg-dark);
}

/* Mobile positioning - right aligned */
@media (max-width: 768px) {
    .toastify {
        max-width: calc(100% - 40px);
        left: auto !important;
        right: 20px !important;
        margin-left: 0 !important;
    }
}

/* ========================================
   Auth Styles
   ======================================== */

/* Auth user section in sidebar */
.auth-user-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    margin-top: 6px;
    background: var(--bg);
    border-radius: 10px;
    gap: 12px;
    box-shadow: var(--shadow-s);
    transition: all 0.2s ease;
}

.auth-user-section:hover {
    background-color: var(--bg-active);
}

.auth-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    overflow: hidden;
}

.auth-user-info svg {
    flex-shrink: 0;
    stroke: currentColor;
}

#auth-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-signout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: auto;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-signout-btn:hover {
background: var(--bg-light);
color: var(--status-error);
}

/* Auth modal - full screen opaque backdrop */
#auth-modal.modal-backdrop {
background: var(--bg-dark);
backdrop-filter: none;
z-index: 10001; /* Above recording island (10000) */
transition: none;
flex-direction: column;
}

#auth-modal .modal-window {
max-width: 400px;
background: var(--bg);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-l);
transition: none;
transform: scale(1);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), var(--glow-accent);
}

#auth-form .form-group {
margin-bottom: 16px;
}

#auth-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text);
    font-size: 0.9rem;
}

#auth-form .settings-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
}

#auth-form .form-group.hidden {
    display: none;
}

.auth-error {
    padding: 10px 12px;
    margin-bottom: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.85rem;
}

.auth-error.hidden {
    display: none;
}

.auth-toggle {
    text-align: center;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.auth-toggle a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.auth-toggle a:hover {
    text-decoration: underline;
}

#auth-submit-btn {
    width: 100%;
}

/* Auth modal actions */
#auth-modal .modal-actions {
    margin-top: 20px;
}

/* OAuth button */
.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    background: oklch(0.25 0.005 260 / 0.5);
    border: 1px solid oklch(0.5 0 0 / 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-oauth:hover:not(:disabled) {
    background: oklch(0.3 0.005 260 / 0.6);
    border-color: oklch(0.6 0 0 / 0.25);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.15);
}

.btn-oauth:active:not(:disabled) {
    transform: scale(0.985);
}

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

.btn-oauth svg {
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.btn-oauth:hover:not(:disabled) svg {
    opacity: 1;
}

/* OAuth divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: lowercase;
}

/* OAuth section hidden state */
#auth-oauth-section.hidden {
    display: none;
}

/* Auth form hidden state */
#auth-form.hidden {
    display: none;
}

/* Auth toggle section hidden */
#auth-toggle-section.hidden {
    display: none;
}

/* Email Verification Section */
.auth-verify-section.hidden {
    display: none;
}

.auth-verify-message {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.auth-verify-message strong {
    color: var(--text);
}

.auth-verify-input {
    text-align: center;
    letter-spacing: 0.3em;
    font-size: 1.2rem !important;
    font-weight: 600;
}

#auth-verify-btn {
    width: 100%;
}

/* ========================================
   APP LOADING SCREEN
   ======================================== */

.app-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-loading-screen.hidden {
    display: none;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.loading-logo {
    color: var(--primary);
    animation: pulse-logo 2s ease-in-out infinite;
}

.loading-logo svg {
    width: 48px;
    height: 48px;
}

@keyframes pulse-logo {
    0%, 100% {
        opacity: 0.6;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bg-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Streaming cursor for LLM response */
.streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: var(--primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.8s step-end infinite;
}

@keyframes cursor-blink {
    50% { opacity: 0; }
}

/* ========================================
   Feed Search, Filter & Pagination
   ======================================== */

.feed-toolbar {
    margin-bottom: 20px;
}

.feed-search-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-slightly-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-card);
}

.feed-search-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px oklch(0.52 0.29 261.59 / 0.15);
}

.feed-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.feed-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 10px 10px;
    font-size: 0.9rem;
    font-family: var(--ff);
    outline: none;
}

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

.feed-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px;
    margin: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.feed-search-clear:hover {
    color: var(--text);
    background: var(--bg-active);
}

.feed-search-clear.hidden {
    display: none;
}

.feed-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 6px;
    margin: 0;
    margin-left: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.feed-filter-toggle:hover {
    color: var(--text);
    background: var(--bg-active);
}

.feed-filter-toggle.active {
    color: var(--accent);
}

.feed-result-count {
    display: block;
    font: var(--small);
    color: var(--text-muted);
    margin-top: 8px;
    padding-left: 4px;
}

.feed-result-count.hidden {
    display: none;
}

/* Filter panel - collapsible */
.feed-filter-panel {
    display: none;
    padding: 14px 0 0 0;
    gap: 12px;
    flex-direction: column;
}

.feed-filter-panel.open {
    display: flex;
}

.feed-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feed-filter-label {
    font: var(--small);
    color: var(--text-muted);
    min-width: 90px;
    flex-shrink: 0;
}

.feed-filter-select {
    background: var(--bg-slightly-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: var(--ff);
    cursor: pointer;
    transition: 0.2s;
}

.feed-filter-select:focus {
    outline: none;
    border-color: var(--accent);
}

.feed-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feed-filter-date {
    background: var(--bg-slightly-light);
    border: 1px solid var(--border-color);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: var(--ff);
    transition: 0.2s;
    color-scheme: dark;
}

body.light .feed-filter-date {
    color-scheme: light;
}

.feed-filter-date:focus {
    outline: none;
    border-color: var(--accent);
}

.feed-date-separator {
    font: var(--small);
    color: var(--text-muted);
}

/* Search highlight */
mark.search-highlight {
    background: oklch(0.78 0.15 75 / 0.3);
    color: inherit;
    padding: 1px 0;
    border-radius: 2px;
}

body.light mark.search-highlight {
    background: oklch(0.78 0.15 75 / 0.4);
}

/* Load more */
.feed-load-more-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px 0 10px;
}

.feed-load-more-wrapper.hidden {
    display: none;
}

.feed-load-more-btn {
    background: var(--bg-slightly-light);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 10px 32px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--ff);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-card);
}

.feed-load-more-btn:hover {
    background: var(--bg-active);
    color: var(--text);
}

/* Mobile responsive for feed toolbar */
@media (max-width: 768px) {
    .feed-filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .feed-filter-label {
        min-width: unset;
    }

    .feed-filter-select {
        width: 100%;
    }

    .feed-date-range {
        width: 100%;
    }

    .feed-filter-date {
        flex: 1;
        min-width: 0;
    }
}

/* --- USAGE DASHBOARD STYLES --- */
.usage-month-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.usage-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--bg-slightly-light);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-s);
    margin-left: 0px;
}

.usage-nav-btn:hover:not(:disabled) {
    background: var(--bg-light);
}

.usage-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.usage-month-label {
    font: var(--h2);
    color: var(--text);
    min-width: 180px;
    text-align: center;
}

.usage-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.usage-stat-card {
    background-image: linear-gradient(200deg, var(--bg-slightly-light) 0%, var(--bg) 100%);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.usage-stat-icon {
    width: 20px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usage-stat-value {
    font: var(--h1);
    font-size: 1.75rem;
    color: var(--text);
    line-height: 1;
}

.usage-stat-label {
    font: var(--small);
    color: var(--text-muted);
}

.usage-chart-card {
    background-image: linear-gradient(200deg, var(--bg-slightly-light) 0%, var(--bg) 100%);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    padding: 24px;
}

.usage-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.usage-chart-header h3 {
    font: var(--h3);
    color: var(--text);
    margin: 0;
}

.usage-metric-select {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--bg-light);
    background: var(--bg);
    color: var(--text);
    font: var(--small);
    cursor: pointer;
    outline: none;
}

.usage-metric-select:focus {
    border-color: var(--primary);
}

.usage-daily-chart {
    min-height: 200px;
}

.usage-chart-bars {
    display: flex;
    align-items: flex-end;
    height: 200px;
    gap: 2px;
}

.usage-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

.usage-bar {
    width: 100%;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
    min-width: 0;
    transition: height 0.3s ease;
}

.usage-bar-today {
    background: var(--accent);
}

.usage-bar-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1;
}

/* Show only odd day labels on desktop to avoid crowding */
.usage-bar-col:nth-child(even) .usage-bar-label {
    visibility: hidden;
}

.usage-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font: var(--p);
}

/* Responsive: tablet */
@media (max-width: 768px) {
    .usage-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .usage-chart-bars {
        height: 150px;
    }

    .usage-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .usage-month-label {
        min-width: 140px;
        font-size: 1.1rem;
    }
}

/* Responsive: mobile */
@media (max-width: 360px) {
    .usage-summary-cards {
        grid-template-columns: 1fr;
    }

    /* Show every 3rd day label on mobile */
    .usage-bar-col .usage-bar-label {
        visibility: hidden;
    }

    .usage-bar-col:nth-child(3n+1) .usage-bar-label {
        visibility: visible;
    }
}

/* =============================================================================
   Plan Banner & Quota Bars
   ============================================================================= */

.usage-plan-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-slightly-light);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font: var(--small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plan-basic {
    background: var(--bg-active);
    color: var(--text-muted);
}

.plan-pro {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.plan-reset-label {
    font: var(--small);
    color: var(--text-muted);
}

.btn-upgrade {
    margin-left: auto;
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--accent);
    color: white;
    font: var(--small);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s ease;
}

.btn-upgrade:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 0 20px var(--glow);
    transform: translateY(-1px);
}

.usage-quota-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.usage-quota-card {
    padding: 1rem;
    background: var(--bg-slightly-light);
    border-radius: 0.75rem;
}

.quota-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font: var(--small);
    color: var(--text);
}

.quota-values {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.quota-bar {
    height: 8px;
    background: var(--bg-active);
    border-radius: 999px;
    overflow: hidden;
}

.quota-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width 0.3s ease, background 0.3s ease;
}

.quota-bar-fill.quota-warning {
    background: var(--status-warning);
}

.quota-bar-fill.quota-exceeded {
    background: var(--status-error);
}

/* Plans & Billing settings tab */
.settings-plan-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-slightly-light);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.settings-plan-banner-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.settings-plan-banner-label {
    font: var(--h3);
    color: var(--text);
}

.settings-quota-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.settings-plan-upgrade-card {
    text-align: center;
    padding: 2rem;
    background: var(--bg-slightly-light);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}

.settings-plan-upgrade-card h3 {
    font: var(--h2);
    color: var(--text);
    margin-bottom: 0.5rem;
}

.settings-plan-upgrade-card p {
    font: var(--p);
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

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

/* Refund offer card */
.settings-refund-card {
    text-align: center;
    padding: 2rem;
    background: var(--bg-slightly-light);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.settings-refund-card h3 {
    font: var(--h2);
    color: var(--text);
    margin-bottom: 0.5rem;
}

.settings-refund-card p {
    font: var(--p);
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.btn-refund {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    font: var(--p);
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-bottom: 1.25rem;
}

.btn-refund:hover {
    opacity: 0.85;
}

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

.refund-feedback-nudge {
    font: var(--small);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.btn-feedback-link {
    font: var(--small);
    color: var(--text-muted);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.btn-feedback-link:hover {
    color: var(--text);
}

/* Clerk auth container — isolate from app styles */
.clerk-modal {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    overflow: visible;
}

#clerk-auth-container {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-back-link {
    display: block;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-dim, var(--text-muted));
    font: var(--small);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity var(--transition), color var(--transition);
}
.auth-back-link:hover {
    opacity: 1;
    color: var(--text-muted);
}

/* Reset all app styles leaking into Clerk components */
#clerk-auth-container a,
#pricing-container a {
    all: revert;
}

#clerk-auth-container *,
#pricing-container * {
    font: revert;
    letter-spacing: revert;
}

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

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

    .usage-plan-banner {
        flex-wrap: wrap;
    }
}

/* Feedback Form */
.feedback-form .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 10px 0;
    border-bottom: none;
}

.feedback-form .settings-select,
.feedback-form .settings-input {
    width: 100%;
    min-width: unset;
    box-sizing: border-box;
}

.feedback-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: var(--ff);
}

.feedback-form + .modal-actions {
    justify-content: flex-end;
    margin-top: 8px;
}