/* static-frontend/public/styles/design-system.css */
/* Design System CSS Variables - Final Color Definitions */

:root {
  /* === NEW COLOUR PALETTE === */
  /* Light Mode */
  --new-bg-colour-1-light: #ffffff;
  --new-bg-colour-2-light: #E6E6E6;
  --new-bg-colour-3-light: rgba(230, 230, 230, 0.75);
  --new-accent-colour-1: #7BFF00;
  --new-accent-colour-2: #072E3E;
  
  /* Dark Mode */
  --new-bg-colour-1-dark: #072E3E;
  --new-bg-colour-2-dark: #154861;
  --new-bg-colour-3-dark: rgba(9, 76, 108, 0.7);
  --new-bg-colour-4-dark: #C8C8CD;
  --new-contrast-bg-colour-1: rgba(230, 230, 230, 0.75);
  
  /* === ORIGINAL PALETTE (kept for compatibility) === */
  /* Brand Colors */
  --brand-colour-1: hsl(237, 85%, 31%);
  --brand-colour-2: #8685A2;
  --brand-accent-colour: hsl(96, 56%, 54%);
  
  /* Main Background */
  --main-background: hsl(240, 23%, 76%);
  
  /* Element Backgrounds and Borders */
  --elem-bg-border-colour-1: #AEAEC9;
  --elem-bg-border-colour-2: #9090AD;
  --elem-bg-border-colour-3: #8685A2;
  --elem-bg-border-colour-4: #706E84;
  --elem-bg-border-colour-5: #343742;
  --elem-bg-border-colour-6: #7C7C8F;
  
  /* Text Colors */
  --text-colour-1: hsl(240, 6%, 17%);
  --text-colour-2: #AEAEC9;
  --text-colour-3: #706E84;
  --text-white: #ffffff;
  
  /* Secondary Color */
  --secondary-colour: hsl(245, 41%, 16%);
  
  /* Semantic Colors */
  --semantic-warning-error: #F1B52A;
  --semantic-success: var(--text-colour-2);
  --semantic-info: var(--text-colour-3);
  
  /* Typography - Font Sizes */
  --font-size-sm: 0.750rem;
  --font-size-base: 1rem;
  --font-size-xl: 1.333rem;
  --font-size-2xl: 1.777rem;
  --font-size-3xl: 2.369rem;
  --font-size-4xl: 3.158rem;
  --font-size-5xl: 4.210rem;
  
  /* Typography - Letter Spacing */
  --letter-spacing-sm: 0.01em;
  --letter-spacing-base: 0;
  --letter-spacing-xl: -0.01em;
  --letter-spacing-2xl: -0.02em;
  --letter-spacing-3xl: -0.03em;
  --letter-spacing-4xl: -0.04em;
  --letter-spacing-5xl: -0.05em;
  
  /* Typography - Font Families */
  --font-family-heading: 'Noto Sans', sans-serif;
  --font-family-body: 'Montserrat', sans-serif;
  
  /* Typography - Font Weights */
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  /* Spacing System */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* Menu Component - Calculated from spacing + typography */
  --menu-container-padding: var(--spacing-sm);
  --menu-item-padding-y: var(--spacing-sm);
  --menu-item-padding-x: var(--spacing-md);
  --menu-item-gap: var(--spacing-sm);
  --menu-height: calc((var(--font-size-base) * 1.5) + (var(--menu-item-padding-y) * 2) + (var(--menu-container-padding) * 2));
  --menu-item-height: calc((var(--font-size-base) * 1.5) + (var(--menu-item-padding-y) * 2));
  
  /* Filter Component */
  --filter-gap-sm: 8px;
  --filter-gap-md: 16px;

  /* Fixed header (new header layout) - content scrolls under it */
  --header-height: 88px;
}

/* ============================================
   MENU COMPONENT STYLES
   ============================================ */

/* Sliding pill background */
.menu-slider {
    position: absolute;
    background-color: var(--new-bg-colour-1-dark);
    border-radius: 9999px;
    transition: left 0.3s ease, width 0.3s ease;
    z-index: 0;
}

/* Menu container */
.menu-container {
    background-color: var(--elem-bg-border-colour-4);
    border-radius: 9999px;
    padding: var(--menu-container-padding);
    display: flex;
    gap: var(--menu-item-gap);
    width: fit-content;
    position: relative;
}

/* Menu item base styles */
.menu-item {
    position: relative;
    z-index: 1;
    color: var(--text-colour-2) !important;
    background-color: transparent;
    border: none;
    border-radius: 9999px;
    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Menu item hover - Accent 1 */
.menu-item:hover {
    color: var(--new-accent-colour-1) !important;
}

/* Menu item hover background (inactive only) */
.menu-item:not(.active):hover {
    background-color: #8685A2 !important;
}

/* Menu item active state */
.menu-item.active {
    color: var(--new-accent-colour-1) !important;
    font-weight: normal !important;
    pointer-events: none;
}

/* ============================================
   SETTINGS MENU STYLES
   ============================================ */

/* Settings menu container */
.settings-menu-container {
    background-color: var(--elem-bg-border-colour-4);
    border-radius: 9999px;
    padding: var(--menu-container-padding);
    display: flex;
    gap: var(--menu-item-gap);
    width: fit-content;
    position: relative;
    overflow: hidden;
    transition: max-width 0.3s ease;
}

.settings-menu-container.collapsed {
    max-width: var(--menu-item-height);
}

.settings-menu-container.expanded {
    max-width: var(--settings-menu-expanded-width, 1000px);
}

/* Settings menu item base - match .menu-item visual appearance */
.settings-menu-container .settings-menu-item {
    position: relative;
    z-index: 1;
    color: var(--text-colour-2) !important;
    background-color: transparent;
    border: none;
    border-radius: 9999px;
    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
}

/* Settings menu item hover */
.settings-menu-container .settings-menu-item:hover {
    color: var(--new-accent-colour-1) !important;
}

.settings-menu-container .settings-menu-item:not(.active):hover {
    background-color: #8685A2 !important;
}

/* Settings menu item active */
.settings-menu-container .settings-menu-item.active {
    color: var(--new-accent-colour-1) !important;
    font-weight: normal !important;
    background-color: var(--new-bg-colour-1-dark) !important;
}

/* Cog icon */
.settings-cog-icon {
    color: var(--text-colour-2) !important;
    transition: transform 0.3s ease;
}

/* Cog rotation */
.settings-menu-container.collapsed .settings-cog-icon {
    transform: rotate(0deg);
}

.settings-menu-container.expanded .settings-cog-icon {
    transform: rotate(-180deg);
}

/* Cog wrapper - outer layer */
.settings-cog-wrapper {
    width: var(--menu-height);
    height: var(--menu-height);
    border-radius: 50%;
    background-color: var(--elem-bg-border-colour-4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

/* Cog inner circle */
.settings-cog-inner-circle {
    width: calc(var(--menu-item-height) - 4px);
    height: calc(var(--menu-item-height) - 4px);
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-cog-wrapper:hover .settings-cog-inner-circle {
    background-color: var(--elem-bg-border-colour-4);
}

/* Cog spacer (maintains space for the absolute positioned cog) */
.settings-cog-spacer {
    min-width: var(--menu-item-height);
    width: var(--menu-item-height);
    height: var(--menu-item-height);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    flex-shrink: 0;
}

/* ============================================
   NEW HEADER LAYOUT
   ============================================ */

.new-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-height);
    box-sizing: border-box;
    background-color: var(--new-bg-colour-1-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: var(--spacing-md) 20px var(--spacing-md) 0;
}

.new-header-logo {
    height: var(--menu-height);
    width: auto;
    flex-shrink: 0;
    margin-left: 20px;
}

.new-header-menu-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
}

/* ============================================
   FILTER SIDEBAR STYLES
   ============================================ */

.filter-container {
    background-color: var(--elem-bg-border-colour-4);
    border-radius: 0 25px 25px 0; /* Left corners square, right corners 25px to match input container */
    padding: var(--menu-container-padding) var(--menu-container-padding) var(--menu-container-padding) 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%; /* Fill parent width */
}

.filter-item {
    position: relative;
    background-color: var(--new-contrast-bg-colour-1);
    border-radius: 0 9999px 9999px 0; /* Asymmetric - RHS pill, LHS square */
    padding: var(--menu-container-padding) var(--menu-container-padding) var(--menu-container-padding) 0;
    margin-bottom: var(--filter-gap-sm);
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Right-align label */
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.filter-container > .filter-item:last-child {
    margin-bottom: 0;
}

/* Extra spacing after Archived (before Live section title) */
.filter-container > .filter-item:nth-child(6) {
    margin-bottom: var(--filter-gap-md);
}

/* Extra spacing after Setups (before final separator) */
.filter-container > .filter-item:nth-child(11) {
    margin-bottom: var(--filter-gap-md);
}

/* Filter item slider */
.filter-item-slider {
    position: absolute;
    background-color: var(--new-bg-colour-1-dark);
    border-radius: 9999px;
    transition: left 0.3s ease, width 0.3s ease;
    z-index: 0;
    left: -1000px;
    width: 0;
    height: 0;
}

/* Filter item label */
.filter-item-label {
    position: relative;
    z-index: 1;
    background-color: transparent;
    color: var(--new-bg-colour-1-dark) !important;
    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
}

.filter-item .filter-item-label:hover {
    color: var(--new-accent-colour-1) !important;
}

.filter-item:not(.active) .filter-item-label:hover {
    background-color: #8685A2 !important;
}

.filter-item.active .filter-item-label {
    color: var(--new-accent-colour-1) !important;
    font-weight: normal !important;
}

/* Filter section title */
.filter-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--new-contrast-bg-colour-1);
    padding-left: var(--menu-container-padding);
    line-height: 1;
    margin-bottom: var(--filter-gap-md);
}

/* Filter separator */
.filter-separator {
    height: 2px;
    background-color: var(--new-bg-colour-1-dark);
    border-radius: 1px;
    margin-bottom: var(--filter-gap-md);
}

/* Filter search pill */
.filter-search-pill {
    background: white;
    border-radius: 9999px;
    height: 46px;
    padding-left: var(--menu-item-padding-x);
    padding-right: var(--menu-item-padding-x);
    margin-bottom: var(--filter-gap-md);
    margin-left: var(--menu-container-padding);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.filter-search-pill input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: var(--font-size-base);
    outline: none;
    padding: 0;
    color: var(--text-colour-1);
}

.filter-search-pill input::placeholder {
    color: var(--text-colour-3);
    opacity: 1;
}

/* ============================================
   AI INPUT CONTAINER STYLES
   ============================================ */

@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes glow-rotate {
    to { --glow-angle: 360deg; }
}

.ai-input-container {
    width: 100%;
    background-color: transparent;
    border: none;
    position: relative;
    border-radius: 25px;
    padding: var(--menu-container-padding);
    box-sizing: border-box;
}

/* Glow border - ::before */
.ai-input-container::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 26px;
    background: conic-gradient(from var(--glow-angle), var(--new-accent-colour-1), transparent 35%, transparent 65%, var(--new-accent-colour-1));
    filter: blur(1px);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ai-input-container:hover::before {
    opacity: 1;
    animation: glow-rotate 5.5s linear infinite;
}

/* Inner fill - ::after */
.ai-input-container::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 24px;
    background-color: var(--new-bg-colour-4-dark);
    z-index: 1;
    pointer-events: none;
}

.ai-input-container > * {
    position: relative;
    z-index: 2;
}

/* White pill input wrapper - fixed height of 46px to match search pill */
.ai-input-field-wrapper {
    height: 46px;
    background-color: white;
    border-radius: 9999px;
    padding-left: var(--menu-item-padding-x);
    padding-right: var(--menu-item-padding-x);
    display: flex;
    align-items: center;
    position: relative;
}

.ai-input-field {
    width: 100%;
    border: none;
    background: transparent;
    font-size: var(--font-size-base);
    color: var(--text-colour-1);
    outline: none;
}

/* Fake placeholder for wriggle */
.ai-input-placeholder-label {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: var(--menu-item-padding-x);
    pointer-events: none;
    font-size: var(--font-size-base);
    color: var(--text-colour-2);
}

/* Footer */
.ai-input-footer {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--menu-item-gap);
    padding: var(--menu-container-padding) var(--menu-item-padding-x) 0;
}

.ai-input-counter {
    font-size: var(--font-size-sm);
    color: var(--text-colour-1);
}

.ai-input-new-button {
    border: none;
    background-color: var(--new-accent-colour-1);
    color: var(--elem-bg-border-colour-4);
    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
    border-radius: 9999px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ai-input-new-button:hover {
    color: var(--new-accent-colour-1);
    background-color: var(--elem-bg-border-colour-4);
}

/* Wriggle text chars */
.wriggle-text-container .wriggle-char {
    display: inline-block;
}
.wriggle-text-container .wriggle-char--space {
    min-width: 0.25em;
}

/* Divider below AI input */
.ai-input-divider {
    height: 2px;
    width: calc(100% - var(--menu-container-padding));
    margin-left: var(--menu-container-padding);
    background-color: var(--elem-bg-border-colour-4);
    margin-top: var(--menu-container-padding);
    margin-bottom: var(--menu-container-padding);
}

/* ============================================
   ENTITY CARD STYLES (Collapsed Draft View)
   ============================================ */

.entity-card {
    background-color: var(--new-bg-colour-4-dark);
    border: none;
    border-radius: 50px 10px 10px 50px; 
    height: var(--menu-height); /* Matches menu height */
    padding: var(--menu-container-padding) calc(var(--menu-container-padding) + var(--menu-item-padding-x)) var(--menu-container-padding) var(--menu-container-padding);
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: none; /* Full width in conversation list */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 8px;
    cursor: pointer;
}

.entity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Mask 1 (::before) - Bordered Circle */
.entity-card::before {
    content: '';
    position: absolute;
    width: var(--menu-height);
    height: var(--menu-height);
    border-radius: 50%;
    border: none;
    background-color: var(--new-bg-colour-1-dark);
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Mask 2 (::after) - Dark Circle behind icon */
.entity-card::after {
    content: '';
    position: absolute;
    width: calc(var(--menu-height) + 1px);
    height: calc(var(--menu-height) + 1px);
    border-radius: 50px;
    border: none;
    background-color: var(--new-bg-colour-1-dark);
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

/* Circular icon container */
.entity-card-icon {
    width: var(--menu-item-height);
    height: var(--menu-item-height);
    border-radius: 50%;
    background-color: var(--elem-bg-border-colour-4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: -2px;
    z-index: 4;
    flex-shrink: 0;
}

.entity-card-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    color: var(--text-colour-2);
}

/* Card content wrapper - horizontal flex layout */
.entity-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: var(--menu-item-padding-x);
    margin-left: calc(var(--menu-item-height) / 2);
    min-width: 0;
}

.entity-card-title {
    font-size: var(--font-size-base);
    color: var(--new-bg-colour-1-dark);
    font-weight: var(--font-weight-bold);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-card-info {
    font-size: var(--font-size-base);
    color: var(--text-colour-1);
    margin-left: auto;
    margin-right: var(--menu-item-padding-x);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status indicator - green dot */
.entity-card-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22C55E;
    flex-shrink: 0;
}

/* Action buttons container */
.entity-card-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.entity-card-edit-btn,
.entity-card-delete-btn {
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-colour-1);
}

.entity-card-edit-btn:hover,
.entity-card-delete-btn:hover {
    color: var(--new-accent-colour-1);
}

.entity-card-edit-btn svg,
.entity-card-delete-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ============================================
   DRAFT CARD STYLES (Expanded Draft View)
   ============================================ */

.draft-card {
    width: 100%;
    max-width: none; /* Full width in conversation list */
    background-color: var(--new-bg-colour-4-dark); /* #C8C8CD */
    border: none; /* No border on wrapper; section borders build the outline */
    border-radius: 25px;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 8px;
    --draft-card-pad: var(--menu-container-padding); /* 8px */
    --draft-card-pad-lg: var(--menu-item-padding-x); /* 16px */
    --draft-card-overlap: 25px; /* Amount sections overlap */
}

/* Header row */
.draft-card-header {
    height: var(--menu-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--menu-container-padding) var(--draft-card-pad-lg);
    box-sizing: border-box;
    background-color: var(--new-bg-colour-4-dark);
    border-bottom: 2px solid var(--elem-bg-border-colour-4); /* Divider to context */
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    cursor: pointer;
}

.draft-card-header-left {
    display: flex;
    align-items: center;
    gap: var(--menu-item-gap);
    min-width: 0;
}

.draft-card-badge {
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    background-color: var(--new-bg-colour-1-dark);
    color: var(--new-bg-colour-4-dark);
    flex-shrink: 0;
}

.draft-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--new-bg-colour-1-dark);
    flex-shrink: 0;
}

.draft-card-timestamp {
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--text-colour-1);
    white-space: nowrap;
    flex-shrink: 0;
}

.draft-card-header-right {
    display: flex;
    align-items: center;
    gap: var(--menu-item-gap);
}

.draft-card-duplicate-btn {
    background: transparent;
    border: none;
    padding: 4px 0;
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--text-colour-1);
    cursor: pointer;
    transition: color 0.2s ease;
}

.draft-card-duplicate-btn:hover {
    color: var(--new-accent-colour-1);
}

.draft-card-delete-btn {
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-colour-1);
    transition: color 0.2s ease;
}

.draft-card-delete-btn:hover {
    color: var(--new-accent-colour-1);
}

.draft-card-delete-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Context section (Mode 1: before input, Mode 2/3: before transcript) */
.draft-card-context {
    padding: var(--draft-card-pad-lg);
    padding-bottom: calc(var(--draft-card-pad-lg) + var(--draft-card-overlap)); /* Extra for overlap */
    min-height: calc(var(--menu-height) * 2);
    background-color: white;
    font-size: var(--font-size-base);
    color: var(--text-colour-1);
    box-sizing: border-box;
    transition: max-height 0.2s ease, padding-bottom 0.2s ease, background-color 0.2s ease;
}

/* Collapsed context state (Mode 2 & 3 only - cards with transcript) */
.draft-card.draft-card--has-transcript.draft-card--context-collapsed .draft-card-context {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    overflow: hidden;
}

/* Input section - EMPHASIZED with full rounded border */
.draft-card-input-section {
    padding: var(--draft-card-pad);
    display: flex;
    flex-direction: column;
    background-color: var(--new-bg-colour-4-dark);
    box-sizing: border-box;
    border: 2px solid var(--elem-bg-border-colour-4); /* Full rounded border for emphasis */
    border-radius: 25px;
    margin-top: calc(var(--draft-card-overlap) * -1); /* Pull up into previous section */
    position: relative;
    z-index: 1;
}

.draft-card-input-wrapper {
    height: 46px;
    background-color: white;
    border-radius: 9999px;
    padding-left: var(--menu-item-padding-x);
    padding-right: var(--menu-item-padding-x);
    display: flex;
    align-items: center;
}

.draft-card-input-wrapper .draft-card-input {
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: var(--font-size-base);
    color: var(--text-colour-1);
    outline: none;
    resize: none;
    min-height: auto;
    max-height: none;
    padding: 0;
    flex: 1;
}

.draft-card-input-wrapper .draft-card-input::placeholder {
    color: var(--text-colour-2);
}

.draft-card-input-wrapper .draft-card-input:focus {
    border: none;
    outline: none;
}

.draft-card-input-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--menu-item-gap);
    padding: var(--menu-container-padding) var(--menu-container-padding) 0;
}

.draft-card-counter {
    font-size: var(--font-size-sm);
    color: var(--text-colour-1);
}

.draft-card-action-btn {
    border: 2px solid var(--elem-bg-border-colour-4);
    background-color: transparent;
    color: var(--elem-bg-border-colour-4);
    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
    border-radius: 9999px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.draft-card-action-btn:hover {
    color: var(--new-accent-colour-1);
    background-color: var(--elem-bg-border-colour-4);
}

.draft-card-submit-btn {
    width: var(--menu-item-height);
    height: var(--menu-item-height);
    border-radius: 50%;
    border: none;
    background-color: var(--new-accent-colour-1);
    color: var(--elem-bg-border-colour-4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

.draft-card-submit-btn:hover {
    color: var(--new-accent-colour-1);
    background-color: var(--elem-bg-border-colour-4);
}

.draft-card-submit-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Transcript section (Mode 2 & 3) */
.draft-card-transcript {
    padding: var(--draft-card-pad-lg);
    padding-bottom: calc(var(--draft-card-pad-lg) + var(--draft-card-overlap)); /* Extra for overlap */
    min-height: calc(var(--menu-height) * 2);
    max-height: 500px;
    overflow-y: auto;
    background-color: white;
    border-top: 2px solid var(--elem-bg-border-colour-4); /* Divider from context */
    box-sizing: border-box;
    position: relative;
}

/* When context is collapsed in modes 2 & 3, remove the transcript top border to avoid double border */
.draft-card.draft-card--has-transcript.draft-card--context-collapsed .draft-card-transcript {
    border-top: none;
}

.draft-card .draft-card-messages {
    display: flex;
    flex-direction: column;
    gap: var(--menu-container-padding);
    padding: 0;
    background: transparent;
}

.draft-card-message {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

.draft-card-message--user {
    align-self: flex-end;
}

.draft-card-message--assistant {
    align-self: flex-start;
}

.draft-card-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: var(--font-size-base);
    line-height: 1.45;
    word-wrap: break-word;
}

.draft-card-message--user .draft-card-bubble {
    background-color: var(--new-bg-colour-1-dark);
    color: var(--new-bg-colour-4-dark);
    border-bottom-right-radius: 4px;
}

.draft-card-message--assistant .draft-card-bubble {
    background-color: var(--elem-bg-border-colour-4);
    color: var(--new-bg-colour-1-dark);
    border-bottom-left-radius: 4px;
}

.draft-card-msg-timestamp {
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--text-colour-1);
    margin-top: var(--spacing-xs);
}

.draft-card-message--user .draft-card-msg-timestamp {
    text-align: right;
}

/* Ready section (Mode 2) - overlaps under input */
.draft-card .draft-card-ready-section {
    padding: 8px 16px;
    padding-top: 32px;
    background-color: var(--new-bg-colour-4-dark);
    box-sizing: border-box;
    border: none;
    border-radius: 0 0 25px 25px; /* Only bottom corners rounded */
    margin-top: calc(var(--draft-card-overlap) * -1); /* Overlap under input */
    position: relative;
    z-index: 0; /* Below input section */
    min-height: auto;
    /* Override old .commit-preview-container flex styles */
    display: block;
}

.draft-card .draft-card-ready-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--menu-item-gap);
    flex-wrap: nowrap;
}

.draft-card .draft-card-ready-text {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--new-bg-colour-1-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-card .draft-card-ready-actions {
    display: flex;
    align-items: center;
    gap: var(--menu-item-gap);
    flex-shrink: 0;
    flex-wrap: nowrap;
    margin-left: auto; /* Right-align within draft-card-ready-row when no preview text */
}

/* Commit button (last action button) - accent styling */
.draft-card-ready-actions .draft-card-action-btn:last-child,
.draft-card-bottom-actions .draft-card-action-btn:last-child {
    border: none;
    background-color: var(--new-accent-colour-1);
    color: var(--elem-bg-border-colour-4);
}

.draft-card-ready-actions .draft-card-action-btn:last-child:hover,
.draft-card-bottom-actions .draft-card-action-btn:last-child:hover {
    color: var(--new-accent-colour-1);
    background-color: var(--elem-bg-border-colour-4);
}

/* Title section (Mode 3) - overlaps under input */
.draft-card-title-section {
    padding: var(--draft-card-pad) var(--draft-card-pad-lg);
    padding-top: calc(var(--draft-card-pad) + var(--draft-card-overlap)); /* Extra for overlap */
    background-color: var(--new-bg-colour-4-dark);
    box-sizing: border-box;
    border-bottom: 2px solid var(--elem-bg-border-colour-4); /* Divider to code section */
    margin-top: calc(var(--draft-card-overlap) * -1); /* Overlap under input */
    position: relative;
    z-index: 0; /* Below input section */
}

/* Code section (Mode 3) */
.draft-card-code-section {
    padding: var(--draft-card-pad-lg);
    background-color: white;
    box-sizing: border-box;
    border-bottom: 2px solid var(--elem-bg-border-colour-4);
}

.draft-card-code-group {
    margin-bottom: var(--spacing-lg);
}

.draft-card-code-group:last-child {
    margin-bottom: 0;
}

.draft-card-code-label {
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--text-colour-1);
    margin-bottom: var(--spacing-sm);
}

.draft-card-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    background-color: white;
    color: var(--text-colour-1);
    padding: var(--menu-container-padding) var(--menu-item-padding-x);
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.draft-card-json {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    background-color: white;
    color: var(--text-colour-1);
    padding: var(--menu-container-padding) var(--menu-item-padding-x);
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

/* Bottom buttons section (Mode 3) */
.draft-card .draft-card-bottom-actions {
    padding: var(--draft-card-pad) var(--draft-card-pad-lg);
    background-color: var(--new-bg-colour-4-dark);
    box-sizing: border-box;
    border: none;
    border-top: none;
    border-radius: 0 0 25px 25px; /* Only bottom corners rounded */
    display: flex;
    justify-content: flex-end;
    gap: var(--menu-item-gap);
    margin-top: 0;
    padding-top: var(--draft-card-pad);
}

/* Mode 2/3: Context before transcript (shorter, no overlap needed here) */
.draft-card--has-transcript .draft-card-context {
    padding-bottom: var(--draft-card-pad-lg); /* Normal padding, no overlap */
    min-height: calc(var(--menu-height) * 1.5);
}

/* Context textarea styling within draft card */
.draft-card-context-textarea {
    width: 100%;
    min-height: 60px;
    padding: var(--spacing-sm);
    border: 1px solid var(--elem-bg-border-colour-4);
    border-radius: 8px;
    font-size: var(--font-size-base);
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
    color: var(--text-colour-1);
}

.draft-card-context-textarea::placeholder {
    color: var(--text-colour-2);
}

.draft-card-context-textarea:focus {
    outline: none;
    border-color: var(--new-accent-colour-1);
}

.draft-card-context-label {
    font-size: var(--font-size-sm);
    color: var(--text-colour-1);
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-bold);
}

.draft-card-context-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xs);
}

/* Context collapse header and toggle */
.draft-card-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.draft-card-context-toggle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background-color: var(--elem-bg-border-colour-4);
    color: var(--text-colour-1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.draft-card-context-toggle:hover {
    background-color: var(--new-bg-colour-1-dark);
    color: var(--new-accent-colour-1);
}

.context-toggle-icon {
    transition: transform 0.2s ease;
}

.draft-card-context-body {
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    overflow: hidden;
}

/* Context collapsed state */
.draft-card-context.draft-card-context--collapsed .draft-card-context-body {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

.draft-card-context.draft-card-context--collapsed {
    padding-bottom: var(--spacing-sm);
    min-height: auto;
}

.draft-card-context-saved {
    font-size: var(--font-size-sm);
    color: #22C55E;
    opacity: 0;
    transition: opacity 0.3s;
}

.draft-card-context-saved.visible {
    opacity: 1;
}

/* Ready placeholder styling */
.draft-card-ready-placeholder {
    color: var(--text-colour-3);
    font-style: italic;
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) 0;
}