/* ============================================================
   Material Icons – size normalization
   ============================================================ */

.material-icons {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Rail buttons */
.rail-btn .material-icons {
    font-size: 22px;
}

/* Header back button */
.back-btn .material-icons {
    font-size: 18px;
}

/* ============================================================
   Color Primitives
   ============================================================ */
:root {
    /* Neutral */
    --neutral-0: #ffffff;
    --neutral-100: #f5f7f9;
    --neutral-200: #eceff3;
    --neutral-300: #d9dee5;
    --neutral-400: #c2cad3;
    --neutral-500: #9aa6b2;
    --neutral-600: #6f7d8c;
    --neutral-700: #354052;
    --neutral-750: #25313e;
    --neutral-800: #1f2933;

    /* Green */
    --green-100: #d4f7ef;
    --green-200: #a9efe0;
    --green-300: #75e1cb;
    --green-400: #45d0b4;
    --green-500: #00b894;
    --green-600: #009f7f;
    --green-700: #00785f;
    --green-800: #005443;

    /* Blue */
    --blue-100: #e5f1fd;
    --blue-200: #c7e2fa;
    --blue-300: #98cbf5;
    --blue-400: #6fb3ef;
    --blue-500: #0984e3;
    --blue-600: #076ab4;
    --blue-700: #054f85;
    --blue-800: #00365a;

    /* Purple */
    --purple-100: #f3efff;
    --purple-200: #e3d8fd;
    --purple-300: #c7bcfa;
    --purple-400: #a79bf4;
    --purple-500: #6c5ce7;
    --purple-600: #5246b5;
    --purple-700: #3a3385;
    --purple-800: #262255;

    /* Yellow */
    --yellow-100: #fff7e3;
    --yellow-200: #ffeab8;
    --yellow-300: #fddc8d;
    --yellow-400: #fdcb6e;
    --yellow-500: #fdb833;
    --yellow-600: #f0a500;
    --yellow-700: #e09100;
    --yellow-800: #c97c00;

    /* Orange */
    --orange-100: #fff3e8;
    --orange-200: #fedcc0;
    --orange-300: #f8bc8d;
    --orange-400: #f39a58;
    --orange-500: #e66a11;
    --orange-600: #c85a0e;
    --orange-700: #9f460c;
    --orange-800: #74300a;

    /* Red */
    --red-100: #fcebed;
    --red-200: #f9d3d7;
    --red-300: #f1a9b1;
    --red-400: #e77882;
    --red-500: #cd2e3a;
    --red-600: #b0242e;
    --red-700: #861a23;
    --red-800: #621319;
}

/* ============================================================
   Semantic Color Tokens
   ============================================================ */
:root {
    /* Text */
    --text-primary: var(--neutral-700);
    --text-secondary: var(--neutral-600);
    --text-tertiary: var(--neutral-500);
    --text-disabled: var(--neutral-400);
    --text-placeholder: var(--text-tertiary);
    --text-inverse: var(--neutral-0);
    --text-inverse-muted: var(--neutral-500);
    --text-inverse-subtle: var(--neutral-600);

    /* Background */
    --bg-canvas: var(--neutral-0);
    --bg-canvas-hover: var(--neutral-100);
    --bg-surface: var(--neutral-200);
    --bg-surface-raised: var(--neutral-300);
    --skeleton-base: var(--neutral-200);
    --skeleton-highlight: var(--neutral-300);
    --skeleton-ai-base: var(--purple-100);
    --skeleton-ai-highlight: var(--purple-200);
    --bg-inverse: var(--neutral-800);
    --bg-inverse-hover: var(--neutral-700);
    --bg-inverse-active: var(--neutral-600);
    --bg-rail: var(--neutral-750);

    /* Border */
    --border-subtle: var(--neutral-300);
    --border-default: var(--neutral-400);
    --border-strong: var(--neutral-500);
    --border-inverse: var(--neutral-0);
    --border-inverse-subtle: var(--neutral-600);

    /* Action / Primary (Green) */
    --action-primary-default: var(--green-500);
    --action-primary-hover: var(--green-600);
    --action-primary-active: var(--green-700);
    --action-primary-disabled: var(--neutral-300);
    --action-primary-surface: var(--green-100);
    --action-on-primary: var(--neutral-0);

    /* Action / Secondary (Blue) */
    --action-secondary-default: var(--blue-500);
    --action-secondary-hover: var(--blue-600);
    --action-secondary-active: var(--blue-700);
    --action-secondary-disabled: var(--neutral-300);
    --action-secondary-surface: var(--blue-100);
    --action-on-secondary: var(--neutral-0);

    /* Focus */
    --focus-ring: var(--blue-400);

    /* Selection */
    --selection-surface: var(--green-100);
    --selection-text: var(--green-700);
    --selection-border: var(--green-500);

    /* Feedback / Success */
    --feedback-success-surface: var(--green-100);
    --feedback-success-text: var(--green-700);
    --feedback-success-border: var(--green-400);

    /* Feedback / Warning */
    --feedback-warning-surface: var(--yellow-100);
    --feedback-warning-text: var(--yellow-700);
    --feedback-warning-border: var(--yellow-400);

    /* Feedback / Danger */
    --feedback-danger-surface: var(--red-100);
    --feedback-danger-text: var(--red-700);
    --feedback-danger-border: var(--red-500);

    /* Feedback / Info */
    --feedback-info-surface: var(--neutral-100);
    --feedback-info-text: var(--neutral-700);
    --feedback-info-border: var(--neutral-400);

    /* Status / Success */
    --status-success-surface: var(--green-100);
    --status-success-surface-hover: var(--green-200);
    --status-success-border: var(--green-400);
    --status-success-text: var(--green-700);
    --status-success-icon: var(--green-500);

    /* Status / Warning */
    --status-warning-surface: var(--yellow-100);
    --status-warning-surface-hover: var(--yellow-200);
    --status-warning-border: var(--yellow-400);
    --status-warning-text: var(--yellow-700);
    --status-warning-icon: var(--yellow-500);

    /* Status / Danger */
    --status-danger-surface: var(--red-100);
    --status-danger-surface-hover: var(--red-200);
    --status-danger-border: var(--red-500);
    --status-danger-text: var(--red-700);
    --status-danger-icon: var(--red-500);

    /* Status / Highlight (Blue) */
    --status-highlight-surface: var(--blue-100);
    --status-highlight-surface-hover: var(--blue-200);
    --status-highlight-border: var(--blue-400);
    --status-highlight-text: var(--blue-700);
    --status-highlight-icon: var(--blue-500);

    /* Status / AI (Purple) */
    --status-ai-surface: var(--purple-100);
    --status-ai-surface-hover: var(--purple-200);
    --status-ai-border: var(--purple-400);
    --status-ai-text: var(--purple-700);
    --status-ai-icon: var(--purple-500);

    /* Status / Neutral */
    --status-neutral-surface: var(--neutral-100);
    --status-neutral-surface-hover: var(--neutral-200);
    --status-neutral-border: var(--neutral-400);
    --status-neutral-text: var(--neutral-700);
    --status-neutral-icon: var(--neutral-500);

    /* Layout */
    --rail-width: 60px;
    --header-height: 104px;

    --font-family:
        "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   Typography Foundation Tokens
   ============================================================ */
:root {
    --font-family-base: var(--font-family);

    --font-size-xxs: 10px;
    --font-size-xs: 12px;
    --font-size-s: 14px;
    --font-size-m: 16px;
    --font-size-l: 20px;
    --font-size-xl: 24px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --line-height-s: 20px;
    --line-height-m: 24px;
    --line-height-l: 28px;
    --line-height-xl: 32px;

    --letter-spacing-none: 0px;
    --letter-spacing-tight: 0.1px;
    --letter-spacing-normal: 0.15px;
    --letter-spacing-wide: 0.5px;
}

/* ============================================================
   Typography Styles
   ============================================================ */
.heading-1 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-xl);
    letter-spacing: var(--letter-spacing-none);
}

.heading-2,
.project-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-l);
    letter-spacing: var(--letter-spacing-normal);
}

.heading-3,
.modal-title,
.preview-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-m);
    letter-spacing: var(--letter-spacing-normal);
}

.heading-4 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-m);
    letter-spacing: var(--letter-spacing-normal);
}

.body-1 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-m);
    letter-spacing: var(--letter-spacing-none);
}

.body-2,
body,
.modal-body-text,
.editor-body,
.compose-body,
.ai-bubble,
.compose-field-label,
.compose-field-input {
    font-family: var(--font-family-base);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-none);
}

.body-3,
.meta-row,
.timeline-item-timing {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-none);
}

.label-1,
.tab-btn,
.timeline-title,
.add-view-title,
.header-btn,
.status-badge {
    font-family: var(--font-family-base);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-wide);
}

.label-2,
.modal-btn,
.add-btn,
.editor-action-btn,
.channel-indicator {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-wide);
}

.label-3,
.audience-chip,
.template-var-chip {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-wide);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden],
.hidden {
    display: none !important;
}

body {
    background: var(--bg-canvas);
    color: var(--text-primary);
    height: 100vh;
    padding-top: var(--pinpoint-toolbar-height, 49px);
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

input {
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
}

/* ============================================================
   App Rail (Left Nav)
   ============================================================ */
.app-rail {
    width: var(--rail-width);
    background: var(--bg-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    flex-shrink: 0;
    z-index: 20;
}

.rail-top,
.rail-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.rail-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse-muted);
    transition:
        background 0.15s,
        color 0.15s;
}

.rail-btn:hover {
    background: var(--bg-inverse-hover);
    color: var(--text-inverse);
}

.rail-btn--add {
    background: var(--bg-canvas);
    color: var(--text-primary);
    width: 100%;
    border-radius: var(--radius-md);
}

.rail-btn--add:hover {
    background: var(--bg-surface);
}

.rail-btn--active {
    background: var(--bg-canvas);
    color: var(--text-primary);
    width: 100%;
    border-radius: var(--radius-md);
}

.rail-btn--active:hover {
    background: var(--bg-surface);
}

.rail-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* ============================================================
   Main Wrapper
   ============================================================ */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ============================================================
   Project Header
   ============================================================ */
.project-header {
    background: var(--bg-inverse-hover);
    color: var(--text-inverse);
    padding: 24px 24px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.header-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-btn {
    color: var(--text-inverse-muted);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition:
        background 0.15s,
        color 0.15s;
}

.back-btn:hover {
    background: var(--bg-inverse-hover);
    color: var(--text-inverse);
}

.project-title {
    color: var(--text-inverse);
}

.status-badge {
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: var(--radius-sm);
}

.status-badge--on-track {
    background: var(--status-highlight-surface);
    color: var(--status-highlight-text);
}

.status-badge--draft {
    background: var(--status-warning-surface);
    color: var(--status-warning-text);
}

/* ============================================================
   Header Actions (Save Draft, Publish)
   ============================================================ */
.header-actions {
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: center;
}

.header-saved-text {
    color: var(--text-inverse-muted);
}

.header-btn {
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-btn--outline {
    background: transparent;
    color: var(--text-inverse);
    border: 1px solid var(--border-inverse-subtle);
}
.header-btn--outline:hover {
    background: var(--bg-inverse-hover);
}

.header-btn--primary {
    background: var(--action-primary-default);
    color: var(--action-on-primary);
    border: none;
}
.header-btn--primary:hover {
    background: var(--action-primary-hover);
}

.header-btn--primary .material-icons {
    font-size: 16px;
}

/* ============================================================
   Project Tabs
   ============================================================ */
.project-tabs {
    display: flex;
    gap: 0;
    border-bottom: none;
}

.tab-btn {
    color: var(--text-inverse-muted);
    padding: 10px 24px;
    border-bottom: 3px solid transparent;
    transition:
        color 0.15s,
        border-color 0.15s;
    white-space: nowrap;
}

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

.tab-btn--active {
    color: var(--text-inverse);
    border-bottom-color: var(--text-inverse);
    font-weight: var(--font-weight-semibold);
}


/* ============================================================
   Content Area
   ============================================================ */
.content-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    background: var(--bg-surface);
}

/* ============================================================
   Automations Container
   ============================================================ */
.automations-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-canvas);
    border-radius: 12px;
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
    margin: 16px;
}

/* ============================================================
   Timeline Panel (left)
   ============================================================ */
.timeline-panel {
    width: 291px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border-default);
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.timeline-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    /* label-1 typography */
}

.timeline-title .material-icons {
    font-size: 18px;
    color: var(--text-secondary);
}

.add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--action-primary-default);
}

.add-btn .material-icons {
    font-size: 16px;
}

/* ============================================================
   Timeline List — card style
   ============================================================ */
.timeline-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* "Project is published" / "Bid due date" labels */
.timeline-label {
    text-align: center;
    padding: 6px 16px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: var(--line-height-s);
}

/* Vertical line connecting cards */
.timeline-connector {
    width: 0;
    height: 24px;
    border-left: 1px solid var(--border-subtle);
    align-self: center;
    flex-shrink: 0;
}

/* Container for cards that share the same timing */
.timeline-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 16px;
}

/* Automation card */
.timeline-item {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s;
    margin: 0 16px;
}

/* Inside a group the group handles the margin */
.timeline-group .timeline-item {
    margin: 0;
}

.timeline-item:hover {
    background: var(--bg-surface-raised);
}

.timeline-item.active {
    background: var(--action-primary-default);
}

/* Channel icon */
.timeline-item-icon-wrap {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.8;
}

.timeline-item.active .timeline-item-icon-wrap {
    opacity: 1;
}

.timeline-item-icon {
    font-size: 16px;
    color: var(--text-secondary);
}

.timeline-item.active .timeline-item-icon {
    color: var(--text-inverse);
}

/* Text content */
.timeline-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-item-timing {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--line-height-s);
}

.timeline-item.active .timeline-item-timing {
    color: rgba(255, 255, 255, 0.7);
}

.timeline-item-title {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--line-height-s);
}

.timeline-item.active .timeline-item-title {
    color: var(--text-inverse);
}

/* ============================================================
   Editor Panel (right)
   ============================================================ */
.editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

.editor-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-tertiary);
    position: relative;
}

.editor-empty .material-icons {
    font-size: 40px;
    color: var(--border-default);
}

/* ============================================================
   Blueprint Background — AI creation flow
   ============================================================ */

.blueprint-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

#editorPanel[data-preview-state] .blueprint-canvas {
    opacity: 1;
}

#editorPanel[data-preview-state="resolving"] .blueprint-canvas {
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* ============================================================
   AI Preview Skeleton
   ============================================================ */

/* Hide icon+text when preview state is active */
#editorPanel[data-preview-state] .editor-empty > .material-icons,
#editorPanel[data-preview-state] .editor-empty > p { display: none; }

/* Skeleton base — hidden by default */
.preview-skeleton {
    display: none;
    flex-direction: column;
    width: 460px;
    opacity: 0;
}

#editorPanel[data-preview-state] .preview-skeleton {
    display: flex;
}

/* Shared bar style */
.skeleton-label,
.skeleton-chip,
.skeleton-val-line,
.skeleton-body-line {
    background: linear-gradient(90deg,
        var(--skeleton-ai-base) 25%,
        var(--skeleton-ai-highlight) 50%,
        var(--skeleton-ai-base) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
}

/* Meta rows */
.skeleton-header { display: flex; flex-direction: column; }

.skeleton-meta-row {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-subtle);
    opacity: 0;
}

.skeleton-meta-row:last-child { border-bottom: none; }

.skeleton-label { height: 11px; width: 36px; }
.skeleton-chip  { height: 28px; width: 148px; border-radius: var(--radius-full); }

.skeleton-val-line       { height: 13px; }
.skeleton-val-line--full { width: 88%; }
.skeleton-val-line--wide { width: 72%; }

/* Divider */
.skeleton-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 12px 0 16px;
    opacity: 0;
}

/* Body lines */
.skeleton-body-rows { display: flex; flex-direction: column; gap: 12px; }

.skeleton-body-line               { height: 13px; opacity: 0; }
.skeleton-body-line--full         { width: 100%; }
.skeleton-body-line--three-quarters { width: 75%; }
.skeleton-body-line--two-thirds   { width: 66%; }
.skeleton-body-line--half         { width: 50%; }

/* ── listening: hide skeleton entirely, show planbot idle orb ── */
#editorPanel[data-preview-state="listening"] .preview-skeleton { display: none; }

.planbot-idle {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

#editorPanel[data-preview-state="listening"] .planbot-idle {
    display: flex;
}

.planbot-idle-orb {
    position: relative;
    width: 100px;
    height: 100px;
}

.planbot-idle-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
    border: 1.5px solid var(--status-ai-border);
    animation: planbot-idle-ring-pulse 2.4s ease-out infinite;
}

.planbot-idle-ring:nth-child(2) {
    animation-delay: 0.8s;
}

.planbot-idle-icon {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-ai-surface);
    border-radius: 50%;
    border: 1.5px solid var(--status-ai-border);
}

.planbot-idle-icon .material-icons {
    font-size: 28px;
    color: var(--status-ai-icon);
}

.planbot-idle-label {
    font-size: var(--font-size-s);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-medium);
    animation: planbot-label-pulse 2.4s ease-in-out infinite;
}

@keyframes planbot-ring-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    60%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

@keyframes planbot-idle-ring-pulse {
    0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.5; }
    70%  { transform: translate(-50%, -50%) scale(1.6);  opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1.6);  opacity: 0; }
}

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

/* ── intent / collapsing: skeleton hidden while channel orb is showing ── */
#editorPanel[data-preview-state="intent"] .preview-skeleton,
#editorPanel[data-preview-state="collapsing"] .preview-skeleton { display: none; }

/* No channel detected yet — keep showing the idle orb */
#editorPanel[data-preview-state="intent"]:not([data-channel]) .planbot-idle { display: flex; }

/* Channel detected — hide idle orb, show channel animation */
#editorPanel[data-preview-state="intent"][data-channel] .planbot-idle { display: none; }
#editorPanel[data-preview-state="intent"][data-channel] .planbot-channel { display: flex; }

/* Keep channel visual alive during collapse so the orb-absorb animation plays */
#editorPanel[data-preview-state="collapsing"][data-channel] .planbot-idle { display: none; }
#editorPanel[data-preview-state="collapsing"][data-channel] .planbot-channel { display: flex; }

/* ── Channel animation ── */
.planbot-channel {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: planbot-channel-in 0.35s ease forwards;
}

@keyframes planbot-channel-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

.planbot-channel-visual {
    position: relative;
    width: 100px;
    height: 100px;
}

/* Single pulse ring — radiates outward to suggest receiving energy */
.planbot-channel-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--status-ai-border);
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: planbot-ring-pulse 2.4s ease-out infinite;
}

/* Only show one ring — hide any extras that JS may have added */
.planbot-channel-ring ~ .planbot-channel-ring {
    display: none;
}

@keyframes planbot-ring-pulse {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
    70%  { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

.planbot-channel-icon {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-ai-surface);
    border: 1.5px solid var(--status-ai-border);
    animation: planbot-icon-breathe 2.4s ease-in-out infinite;
}

@keyframes planbot-icon-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 rgba(100, 130, 200, 0.15); }
    50%      { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 16px 4px rgba(100, 130, 200, 0.15); }
}

.planbot-channel-icon .material-icons {
    font-size: 28px;
    color: var(--status-ai-icon);
    display: none;
}

/* Icon visibility per channel */
#editorPanel[data-channel="email"] .planbot-channel-icon-email { display: block; }
#editorPanel[data-channel="text"]  .planbot-channel-icon-text  { display: block; }
#editorPanel[data-channel="call"]  .planbot-channel-icon-call  { display: block; }

.planbot-channel-label {
    font-size: var(--font-size-s);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    animation: planbot-label-pulse 2s ease-in-out infinite;
}

/* ── assembling: body rows stagger in, full shimmer ── */
#editorPanel[data-preview-state="assembling"] .preview-skeleton { opacity: 1; }
#editorPanel[data-preview-state="assembling"] .skeleton-meta-row { opacity: 1; }
#editorPanel[data-preview-state="assembling"] .skeleton-divider  { opacity: 1; }

#editorPanel[data-preview-state="assembling"] .skeleton-body-line:nth-child(1) {
    animation: skeleton-fade-in 0.25s 0ms ease forwards;
}
#editorPanel[data-preview-state="assembling"] .skeleton-body-line:nth-child(2) {
    animation: skeleton-fade-in 0.25s 80ms ease forwards;
}
#editorPanel[data-preview-state="assembling"] .skeleton-body-line:nth-child(3) {
    animation: skeleton-fade-in 0.25s 160ms ease forwards;
}
#editorPanel[data-preview-state="assembling"] .skeleton-body-line:nth-child(4) {
    animation: skeleton-fade-in 0.25s 240ms ease forwards;
}
#editorPanel[data-preview-state="assembling"] .skeleton-body-line:nth-child(5) {
    animation: skeleton-fade-in 0.25s 320ms ease forwards;
}
#editorPanel[data-preview-state="assembling"] .skeleton-body-line:nth-child(6) {
    animation: skeleton-fade-in 0.25s 400ms ease forwards;
}
#editorPanel[data-preview-state="assembling"] .skeleton-chip,
#editorPanel[data-preview-state="assembling"] .skeleton-val-line,
#editorPanel[data-preview-state="assembling"] .skeleton-body-line {
    animation: skeleton-shimmer 1.6s linear infinite;
}

/* ── collapsing: nodes fade, orb swells, wires stay ── */
#editorPanel[data-preview-state="collapsing"] .planbot-channel-ring {
    animation: none !important;
    opacity: 0 !important;
}

/* Orb absorbs energy from converging nodes — subtle pulse then fade */
#editorPanel[data-preview-state="collapsing"] .planbot-channel-icon {
    animation: planbot-orb-absorb 0.5s ease forwards;
}

@keyframes planbot-orb-absorb {
    0%   { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 rgba(100, 130, 200, 0.15); }
    50%  { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 14px 6px rgba(100, 130, 200, 0.25); }
    100% { transform: translate(-50%, -50%) scale(0);    opacity: 0; box-shadow: 0 0 0 0 rgba(100, 130, 200, 0); }
}

/* Hide the label during collapse */
#editorPanel[data-preview-state="collapsing"] .planbot-channel-label {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Hide channel visual and blueprint during assembling/resolving */
#editorPanel[data-preview-state="assembling"] .planbot-channel,
#editorPanel[data-preview-state="resolving"] .planbot-channel {
    display: none !important;
}

/* ── resolving: dissolve out ── */
#editorPanel[data-preview-state="resolving"] .preview-skeleton {
    opacity: 1;
    animation: skeleton-dissolve 0.45s ease forwards;
}

/* ============================================================
   AI Ingredient Nodes (Schematic Style)
   ============================================================ */

.ai-ingredients {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

#editorPanel[data-preview-state] .ai-ingredients {
    display: block;
}

.ai-ingredient-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    background: var(--bg-canvas);
    border: 1.5px solid rgba(80, 110, 180, 0.6);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.92);
    animation: node-appear 0.3s ease forwards;
    box-shadow: 0 1px 6px rgba(80, 110, 180, 0.18);
    pointer-events: auto;
}

.ai-ingredient-node .material-icons {
    font-size: 15px;
    color: rgba(80, 110, 180, 0.85);
}

/* Connector dot — sits on the edge of the node facing the center */
.ai-ingredient-node::before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(80, 110, 180, 0.6);
    border: 1.5px solid rgba(80, 110, 180, 0.8);
}

/* Left-side nodes: connector on right edge */
.ai-ingredient-node[data-side="left"]::before {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

/* Right-side nodes: connector on left edge */
.ai-ingredient-node[data-side="right"]::before {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.ingredient-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    transition: background 0.15s ease, color 0.15s ease;
    pointer-events: auto;
}

.ingredient-remove-btn:hover {
    background: rgba(80, 110, 180, 0.25);
    color: var(--text-primary);
}

.ingredient-remove-btn .material-icons {
    font-size: 12px;
    color: inherit;
}

/* Node positions — 3 left (~25%), 3 right (~75%), staggered vertically */
.ai-ingredient-node:nth-child(1) { top: calc(50% - 100px); left: 10%; }
.ai-ingredient-node:nth-child(2) { top: calc(50% - 100px); right: 10%; }
.ai-ingredient-node:nth-child(3) { top: calc(50% - 10px);  left: 8%; }
.ai-ingredient-node:nth-child(4) { top: calc(50% - 10px);  right: 8%; }
.ai-ingredient-node:nth-child(5) { top: calc(50% + 80px);  left: 10%; }
.ai-ingredient-node:nth-child(6) { top: calc(50% + 80px);  right: 10%; }

@keyframes node-appear {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Collapsing state: nodes animated by JS (no CSS transitions to fight it) ── */
#editorPanel[data-preview-state="collapsing"] .ai-ingredient-node {
    animation: none !important;
    transition: none !important;
}

/* ── assembling / resolving: hide nodes ── */
#editorPanel[data-preview-state="assembling"] .ai-ingredient-node,
#editorPanel[data-preview-state="resolving"] .ai-ingredient-node {
    animation: none !important;
    opacity: 0 !important;
    pointer-events: none;
}

.editor-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.editor-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.7;
}

.channel-indicator .material-icons {
    font-size: 16px;
    color: var(--text-secondary);
}

.editor-title {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    letter-spacing: var(--letter-spacing-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.editor-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--action-primary-default);
}

.editor-action-btn .material-icons {
    font-size: 16px;
}

.editor-action-btn--danger {
    color: var(--feedback-danger-text);
}

.editor-action-btn--ai {
    color: var(--status-ai-text);
}

/* ============================================================
   Editor Meta Section
   ============================================================ */
.editor-meta {
    padding: 0 18px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}

.editor-meta .meta-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.editor-meta .meta-row:last-child {
    border-bottom: none;
}

.editor-meta .meta-key {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    align-self: center;
}

.editor-meta .meta-val {
    color: var(--text-primary);
    font-size: var(--font-size-s);
    min-width: 0;
    line-height: var(--line-height-s);
}

.editor-meta .meta-input {
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
    color: var(--text-primary);
    padding: 0;
}
.editor-meta .meta-input::placeholder {
    color: var(--text-placeholder);
}

/* ============================================================
   Audience Chips
   ============================================================ */
.audience-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 2px 0;
}

.audience-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--action-primary-surface);
    color: var(--action-primary-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.audience-chip:hover {
    background: var(--status-success-surface-hover);
}

.audience-chip .material-icons {
    font-size: 14px;
}

.audience-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: var(--action-primary-active);
    cursor: pointer;
    transition: background 0.1s;
}

.audience-chip-remove:hover {
    background: var(--action-primary-default);
    color: var(--action-on-primary);
}

.audience-chip-remove .material-icons {
    font-size: 12px;
}

.audience-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--action-primary-default);
    border: 1px dashed var(--action-primary-default);
    transition: background 0.15s;
    cursor: pointer;
}

.audience-add-btn:hover {
    background: var(--action-primary-surface);
}

.audience-add-btn .material-icons {
    font-size: 14px;
}

/* ============================================================
   Audience Dropdown
   ============================================================ */
.audience-dropdown {
    position: fixed;
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
    min-width: 240px;
    width: 280px;
    z-index: 200;
    overflow-y: auto;
    padding: 4px 0;
}

.audience-dropdown-section {
    padding: 4px 0;
}

.audience-dropdown-section + .audience-dropdown-section {
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
    padding-top: 8px;
}

.audience-dropdown-section-label {
    padding: 4px 12px 6px;
    font-size: var(--typography-font-size-xxs);
    font-weight: var(--typography-font-weight-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1;
}

.audience-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: var(--typography-font-size-s);
    color: var(--text-primary);
    width: 100%;
    text-align: left;
    border-radius: 0;
    line-height: var(--typography-font-line-height-s);
}

.audience-dropdown-item:hover {
    background: var(--bg-canvas-hover);
}

.audience-dropdown-item:focus-visible {
    outline: 2px solid var(--action-primary-default);
    outline-offset: -2px;
}

.audience-dropdown-item .material-icons {
    font-size: 18px;
    color: var(--icon-subtle);
    flex-shrink: 0;
}

.audience-dropdown-item-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.audience-dropdown-item--active {
    background: var(--action-primary-surface);
    color: var(--action-primary-default);
}

.audience-dropdown-item--active .material-icons {
    color: var(--action-primary-default);
}

/* ============================================================
   Template Variables Bar
   ============================================================ */
.template-vars-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    overflow-x: auto;
}

.template-vars-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.template-var-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--status-ai-surface);
    color: var(--status-ai-text);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: var(--font-size-xxs);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
}

.template-var-chip:hover {
    background: var(--status-ai-surface-hover);
}

/* ============================================================
   Compose Toolbar (reused in email editor)
   ============================================================ */
.compose-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    overflow: hidden;
    max-height: 40px;
    transition: max-height 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
}

.compose-toolbar.compose-toolbar--hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}

.compose-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background 0.1s, color 0.1s;
    cursor: pointer;
}

.compose-tool-btn:hover {
    background: var(--bg-canvas-hover);
    color: var(--text-primary);
}

.compose-tool-btn .material-icons {
    font-size: 16px;
}

.compose-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--border-subtle);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ============================================================
   Compose Fields (reused in editor meta rows)
   ============================================================ */
.compose-fields {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 18px;
}

.compose-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
}

.compose-field-row:last-child {
    border-bottom: none;
}

.compose-field-label {
    width: 52px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.compose-field-input {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    padding: 0;
}

.compose-field-input::placeholder {
    color: var(--text-placeholder);
}

.compose-field-input[readonly] {
    color: var(--text-secondary);
}

/* ============================================================
   Editor Body (email body textarea)
   ============================================================ */
.email-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.editor-body-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.editor-body {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    resize: none;
    padding: 16px 18px;
    font-family: inherit;
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
    color: var(--text-primary);
    background: transparent;
}

.editor-body::placeholder {
    color: var(--text-placeholder);
}


/* ============================================================
   Text Editor (for SMS)
   ============================================================ */
.text-editor-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
}

.text-editor-body {
    flex: 1;
    width: 100%;
    min-height: 100px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    outline: none;
    resize: none;
    padding: 12px;
    font-family: inherit;
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
    color: var(--text-primary);
    background: var(--bg-canvas);
}

.text-editor-body:focus {
    border-color: var(--action-primary-default);
}

.char-count {
    text-align: right;
    padding-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.char-count--warning {
    color: var(--status-warning-text);
}

.char-count--danger {
    color: var(--feedback-danger-text);
}

/* ============================================================
   Call Editor
   ============================================================ */
.call-editor-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    gap: 12px;
}

.call-script-title {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.call-script-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: 8px 12px;
    background: var(--feedback-info-surface);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.call-script-note .material-icons {
    font-size: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 1px;
}

.call-script-body {
    flex: 1;
    width: 100%;
    min-height: 200px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    outline: none;
    resize: none;
    padding: 12px;
    font-family: inherit;
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
    color: var(--text-primary);
    background: var(--bg-canvas);
}

.call-script-body:focus {
    border-color: var(--action-primary-default);
}

/* ============================================================
   Editor Footer
   ============================================================ */

/* ============================================================
   Add View (replaces timeline when creating/editing)
   ============================================================ */
.add-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.add-view-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.add-view-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.add-view-back:hover {
    background: var(--bg-canvas-hover);
    color: var(--text-primary);
}

.add-view-back .material-icons {
    font-size: 18px;
}

.add-view-title {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.add-view-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================================
   Mode Toggle (AI / Manual segmented control)
   ============================================================ */
.mode-toggle {
    --editor-gutter: 16px;
    display: flex;
    margin: 10px var(--editor-gutter) 0;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 3px;
    flex-shrink: 0;
}

.mode-toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.mode-toggle-btn:hover {
    color: var(--text-primary);
}

.mode-toggle-btn--active {
    background: var(--bg-canvas);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mode-toggle-btn .material-icons {
    font-size: 14px;
}

/* ============================================================
   AI Chat
   ============================================================ */
.ai-chat {
    --editor-gutter: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px var(--editor-gutter) 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-message {
    display: flex;
    gap: 10px;
    max-width: 100%;
}

.ai-message--assistant {
    align-self: stretch;
}

.ai-message--user {
    align-self: flex-end;
    max-width: min(560px, 92%);
}

.ai-message-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ai-message--assistant .ai-message-content {
    flex: 1;
    align-items: flex-start;
}

.ai-message-content--user {
    align-items: flex-end;
}

.ai-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--status-ai-surface);
    color: var(--status-ai-icon);
}

.ai-avatar .material-icons {
    font-size: 16px;
}

.ai-bubble {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
    max-width: min(560px, 100%);
}

.ai-message--assistant .ai-bubble {
    background: var(--status-ai-surface);
    color: var(--status-ai-text);
    border-bottom-left-radius: var(--radius-sm);
}

.ai-message--user .ai-bubble {
    background: var(--status-ai-icon);
    color: var(--neutral-0);
    border-bottom-right-radius: var(--radius-sm);
}

.ai-example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
    justify-content: flex-start;
    align-content: flex-start;
}

.ai-example-chip {
    padding: 10px 12px;
    border-radius: var(--radius-full);
    text-align: left;
    background: var(--bg-canvas);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ai-example-chip:hover {
    background: var(--status-ai-surface);
    border-color: var(--status-ai-border);
    color: var(--status-ai-text);
}

.ai-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px var(--editor-gutter) 16px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.ai-input {
    flex: 1;
    min-height: 40px;
    max-height: 100px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-family: inherit;
    font-size: var(--font-size-s);
    color: var(--text-primary);
    outline: none;
    resize: none;
    background: var(--bg-canvas);
    line-height: var(--line-height-s);
}

.ai-input:focus {
    border-color: var(--action-primary-default);
}

.ai-input::placeholder {
    color: var(--text-placeholder);
}

.ai-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--action-primary-default);
    color: var(--action-on-primary);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ai-send-btn:hover {
    background: var(--action-primary-hover);
}

.ai-send-btn .material-icons {
    font-size: 18px;
}

/* Typing indicator */
.ai-typing {
    display: flex;
    gap: 4px;
    padding: 12px 14px;
    align-items: center;
}

.typing-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
    animation: typing-bounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

@keyframes skeleton-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes skeleton-dissolve {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.02); }
}

/* ============================================================
   Manual Form
   ============================================================ */
.manual-form {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-label--sub {
    margin-top: 4px;
    text-transform: none;
}

.channel-selector {
    display: flex;
    gap: 8px;
}

.channel-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-canvas);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.channel-btn:hover {
    border-color: var(--action-primary-default);
    color: var(--text-primary);
}

.channel-btn--active {
    background: var(--action-primary-surface);
    border-color: var(--action-primary-default);
    color: var(--action-primary-active);
}

.channel-btn .material-icons {
    font-size: 16px;
}

.form-select {
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-s);
    color: var(--text-primary);
    background: var(--bg-canvas);
    outline: none;
    cursor: pointer;
}

.form-select:focus {
    border-color: var(--action-primary-default);
}

.timing-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-input--small {
    width: 60px;
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-s);
    color: var(--text-primary);
    background: var(--bg-canvas);
    outline: none;
    text-align: center;
}

.form-input--small:focus {
    border-color: var(--action-primary-default);
}

.timing-unit {
    font-size: var(--font-size-s);
    color: var(--text-secondary);
}

.audience-sources {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.audience-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-s);
    color: var(--text-primary);
    cursor: pointer;
}

.audience-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--action-primary-default);
    cursor: pointer;
}

.continue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--action-primary-default);
    color: var(--action-on-primary);
    border: none;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 0.15s;
    margin-top: auto;
}

.continue-btn:hover {
    background: var(--action-primary-hover);
}

.continue-btn .material-icons {
    font-size: 16px;
}

/* ============================================================
   Preview Panel (always-visible right column)
   ============================================================ */
.preview-panel {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--border-default);
    background: var(--bg-canvas);
}

.automations-container.adding .preview-panel {
    display: none;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.preview-title {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}


.preview-frame {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-canvas);
}

.preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--text-tertiary);
    text-align: center;
}

.preview-empty .material-icons {
    font-size: 36px;
    color: var(--border-default);
}

.preview-empty p {
    font-size: var(--font-size-s);
    margin: 0;
}

/* Email preview — Figma "Private ITB Email" layout */

.preview-email {
    background: var(--bg-canvas);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #354052;
}

/* White body section */
.preview-email-body-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: var(--bg-canvas);
}

/* GC logo */
.preview-email-logo {
    display: block;
    height: 48px;
    margin: 0 auto;
}

/* Greeting + body text, separated from project block by a bottom border */
.preview-email-intro {
    font-size: var(--font-size-m);
    line-height: 1.5;
    color: #354052;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.preview-email-intro p {
    margin: 0;
}

/* Project name + address/date rows */
.preview-email-project-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-email-project-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin: 0;
    color: #354052;
}

.preview-email-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-email-meta-icon {
    font-size: 16px;
    color: #354052;
    flex-shrink: 0;
}

.preview-email-meta-text {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semibold);
    color: #354052;
}

/* "View Project" CTA */
.preview-email-cta-row {
    display: flex;
    justify-content: center;
}

.preview-email-cta-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--action-primary-default);
    color: var(--action-on-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    letter-spacing: 0.5px;
}

/* Info modules (About + Project Details) */
.preview-email-module {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.preview-email-module-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-canvas);
    border-bottom: 1px solid var(--border-default);
}

.preview-email-module-icon {
    font-size: 16px;
    color: #354052;
    flex-shrink: 0;
}

.preview-email-module-title {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-semibold);
    color: #354052;
    letter-spacing: 0.1px;
}

.preview-email-module-body {
    padding: 16px;
}

.preview-email-module-body p {
    margin: 0;
    font-size: var(--font-size-s);
    line-height: 1.5;
    color: #354052;
}

/* Project Details key/value rows */
.preview-email-module-details {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-email-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-s);
    color: #354052;
    line-height: 1.4;
}

.preview-email-detail-key {
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.5px;
}

.preview-email-detail-val {
    font-weight: var(--font-weight-regular);
    text-align: right;
}

/* Bid intent buttons */
.preview-email-bid-intent {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-email-bid-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.5px;
    cursor: default;
    background: transparent;
}

.preview-email-bid-btn .material-icons {
    font-size: 16px;
}

.preview-email-bid-btn--decline {
    border: 1px solid var(--status-danger-border);
    color: var(--status-danger-text);
}

.preview-email-bid-btn--secondary {
    border: 1px solid var(--action-primary-default);
    color: var(--action-primary-default);
}

/* Footer — teal tint background */
.preview-email-footer {
    background: #e6f8f4;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: var(--font-size-s);
    line-height: 1.4;
    color: #354052;
}

.preview-email-footer p {
    margin: 0;
}

.preview-email-footer a {
    color: #354052;
    text-decoration: underline;
}

/* ============================================================
   Modal
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    /* Semi-transparent dark scrim — no semantic token for this */
    background: rgba(31, 41, 51, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card {
    background: var(--bg-canvas);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 300px;
    box-shadow: 0 8px 32px var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-title {
    color: var(--text-primary);
    margin: 0;
}

.modal-body-text {
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.modal-btn {
    padding: 7px 18px;
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.modal-btn--cancel {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.modal-btn--cancel:hover {
    background: var(--bg-canvas-hover);
}

.modal-btn--confirm {
    background: var(--action-primary-default);
    color: var(--action-on-primary);
    border: 1px solid transparent;
}

.modal-btn--confirm:hover {
    background: var(--action-primary-hover);
}

.modal-btn--outline {
    background: transparent;
    color: var(--action-primary-default);
    border: 1px solid var(--action-primary-default);
}

.modal-btn--outline:hover {
    background: var(--action-primary-surface);
}

/* ============================================================
   Toast Notification
   ============================================================ */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 10px 20px;
    background: var(--bg-inverse);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    z-index: 2000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ============================================================
   Scrollbars (WebKit)
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}