/* ==========================================================================
   AxonSheet AI Assistant - Enhanced UI Styles (taskpane.css)
   Based on Fluent UI v9 Inspired Template and Original Styles
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 0. Root Variables & Base Styles (From Template, slightly adapted)
/* -------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Font Families (Original, mapped to template concept) */
    --font-family-base: 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; /* Merged */
    --font-family-monospace: 'SF Mono', SFMono-Regular, Consolas, monospace;

    /* Fluent UI v9 Design Tokens (Primary Source) */
    --colorNeutralForeground1: #242424;
    --colorNeutralForeground2: #424242;
    --colorNeutralForeground3: #616161; /* Mapped to original --color-text-muted, --color-text-secondary */
    --colorNeutralBackground1: #ffffff; /* Mapped to original --color-white */
    --colorNeutralBackground2: #fafafa;
    --colorNeutralBackground3: #f5f5f7; /* Mapped to original --color-background-body */
    --colorNeutralBackground4: #e0e0e0; /* Mapped to original --color-background-progress-track */
    --colorNeutralStroke1: #d1d1d1;     /* Mapped to original --color-border-button-secondary */
    --colorNeutralStroke2: #e0e0e0;     /* Mapped to original --color-border-subtle */
    
    --colorBrandBackground: #0078d4;    /* Mapped to original --color-link, --color-accent-primary */
    --colorBrandBackgroundHover: #106ebe; /* Mapped to original --color-accent-primary-hover */
    --colorBrandBackgroundPressed: #005a9e;
    --colorBrandForeground1: #0078d4;
    --colorBrandForeground2: #106ebe;
    
    --colorStatusSuccessBackground1: #dff6dd; /* Mapped to original --color-background-success-highlight */
    --colorStatusSuccessForeground1: #107c10; /* Mapped to original --color-accent-success */
    --colorStatusSuccessForeground2: #347d39; /* Mapped to original --color-text-success-dark */
    --colorStatusSuccessBackground2: rgba(52, 199, 89, 0.15); /* From --color-background-success-filled */


    --colorStatusDangerBackground1: #fde7e9;  /* Mapped to original --color-background-destructive-light */
    --colorStatusDangerForeground1: #d13438;  /* Mapped to original --color-accent-destructive */
    --colorStatusDangerForeground2: #cc2c23;  /* Mapped to original --color-text-destructive-dark-hover */

    --colorStatusWarningBackground1: #fff4ce;  /* Mapped to original --color-background-warning-highlight */
    --colorStatusWarningForeground1: #ff9500;  /* Mapped to original --color-accent-warning */
    --colorStatusWarningBackground2: rgba(255, 149, 0, 0.1); /* From --color-background-warning-subtle-highlight */


    --colorStatusInfoBackground1: rgba(0, 122, 255, 0.08); /* From --color-background-info-highlight */
    --colorStatusInfoForeground1: #007aff; /* From --color-accent-info */
    
    /* Typography */
    --fontFamilyBase: var(--font-family-base); /* Referencing the merged one */
    --fontSizeBase100: 9px; /* Approx --font-size-xx-small (11px) */
    --fontSizeBase200: 11px; /* Approx --font-size-x-small (12px) */
    --fontSizeBase300: 13px; /* Approx --font-size-standard (14px) */
    --fontSizeBase400: 14px; /* Approx --font-size-medium (15px) */
    --fontSizeBase500: 18px; /* Approx --font-size-x-large (20px) */
    --fontSizeBase600: 22px; /* Approx --font-size-xx-large (28px is larger, but this is closest) */
    
    --fontWeightRegular: 400; /* normal */
    --fontWeightMedium: 500;
    --fontWeightSemibold: 600;
    --fontWeightBold: 700; /* bold */
    
    /* Spacing */
    --spacingHorizontalXXS: 2px; /* Approx original 2px paddings for model-badge */
    --spacingHorizontalXS: 3px;  /* Approx --spacing-xxs */
    --spacingHorizontalSNudge: 5px; /* Approx --spacing-xs */
    --spacingHorizontalS: 6px;   /* Approx --spacing-s */
    --spacingHorizontalMNudge: 8px; /* Approx --spacing-s-alt */
    --spacingHorizontalM: 10px;  /* Approx --spacing-m-alt */
    --spacingHorizontalL: 14px;  /* Approx --spacing-m */
    --spacingHorizontalXL: 18px; /* Approx --spacing-l */
    --spacingHorizontalXXL: 22px;
    --spacingHorizontalXXXL: 28px; /* Approx --spacing-xl */
    
    --spacingVerticalXXS: 2px;
    --spacingVerticalXS: 3px;
    --spacingVerticalSNudge: 5px;
    --spacingVerticalS: 6px;
    --spacingVerticalMNudge: 8px;
    --spacingVerticalM: 10px;
    --spacingVerticalL: 14px;
    --spacingVerticalXL: 18px;
    --spacingVerticalXXL: 22px;
    --spacingVerticalXXXL: 28px;
    
    /* Border Radius */
    --borderRadiusNone: 0;      /* --border-radius-sharp */
    --borderRadiusSmall: 4px;   /* --border-radius-small */
    --borderRadiusMedium: 6px;  /* --border-radius-medium */
    --borderRadiusLarge: 8px;   /* --border-radius-standard */
    --borderRadiusXLarge: 8px;  /* No direct map, using Large */
    --borderRadiusCircular: 50%;
    
    /* Shadows */
    --shadow2: 0px 1px 2px rgba(0, 0, 0, 0.06); /* Mix of original --shadow-opacity variables */
    --shadow4: 0px 2px 4px rgba(0, 0, 0, 0.08); /* Approx --shadow-card */
    --shadow8: 0px 4px 8px rgba(0, 0, 0, 0.1);  /* Approx --shadow-standard */
    --shadow16: 0px 8px 16px rgba(0, 0, 0, 0.12); /* Approx --shadow-standard-hover */
    
    /* Animation */
    --durationUltraFast: 50ms;
    --durationFaster: 100ms;
    --durationFast: 150ms;     /* Approx --transition-duration-fast (0.2s) */
    --durationNormal: 200ms;
    --durationGentle: 250ms;   /* Approx --transition-duration-medium (0.3s) */
    --durationSlow: 300ms;
    --durationSlower: 400ms;
    --durationUltraSlow: 500ms;
    
    --curveAccelerateMax: cubic-bezier(1, 0, 1, 1);
    --curveAccelerateMid: cubic-bezier(0.7, 0, 1, 0.5);
    --curveAccelerateMin: cubic-bezier(0.8, 0, 0.78, 1);
    --curveDecelerateMax: cubic-bezier(0, 0, 0, 1);
    --curveDecelerateMid: cubic-bezier(0.1, 0.9, 0.2, 1);
    --curveDecelerateMin: cubic-bezier(0.33, 0, 0.1, 1);
    --curveEasyEaseMax: cubic-bezier(0.8, 0, 0.2, 1);
    --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1); /* Default ease */
    --curveLinear: cubic-bezier(0, 0, 1, 1);

    /* Original variables that need careful mapping or direct use if unique */
    --color-text-placeholder-dim: #666; /* Used in previews */
    --color-text-dark-gray: #333; /* Used in research output */
    --color-text-header-table: #3c3c43; /* Used in preview table headers */

    --color-background-header-original: rgba(255, 255, 255, 0.9); /* Original header bg */
    --color-background-card-original: rgba(255, 255, 255, 0.98); /* Original card bg */
    --color-background-container-translucent-original: rgba(255, 255, 255, 0.8);
    --color-background-codeblock: #f0f0f0;
    --color-background-preview-area-original: rgba(240, 240, 245, 0.5);
    --color-background-container-light-gray-original: #f9f9f9;

    --color-border-standard-original: rgba(0, 0, 0, 0.08);
    --color-border-light-original: rgba(0, 0, 0, 0.05);
    --color-border-focus-original: rgba(0, 0, 0, 0.12);
    --color-border-button-original: rgba(0, 0, 0, 0.1);
    --color-border-success-light-original: rgba(0, 128, 0, 0.1);
    --color-border-medium-gray-original: #ccc;
    --color-border-table-cell-original: #ddd;
    --color-border-warning-highlight-original: rgba(255, 149, 0, 0.2);
    --color-border-info-highlight-original: rgba(0, 122, 255, 0.15);
    --color-border-destructive-light-original: #ffb2ad;

    --color-accent-primary-selected-bg-original: rgba(0, 102, 204, 0.1);

    --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
    --color-scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.2);

    --color-icon-info-original: #8e8e93;

    /* Heights & Widths (Original, some might be overridden by template component styles) */
    --input-height-standard: 32px;
    --input-min-height-textarea: 54px;
    --button-height-standard: 36px; /* Template .ms-button has min-height: 40px */
    --icon-size-standard: 16px; /* Approx template font-size for icons */
    --progress-bar-track-height: 8px; /* Matches template .enhanced-progress height */
    --scrollbar-size: 6px;

    /* Select Arrow (Original) - Template uses SVG */
    --select-arrow-icon-fill: var(--colorNeutralForeground1);
    --select-arrow-icon-original: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231d1d1f%22%20d%3D%22M287%2C197.9L159.3%2C69.2c-4.7-4.7-12.3-4.7-17%2C0L5.4%2C197.9c-4.7%2C4.7-4.7%2C12.3%2C0%2C17l19.6%2C19.6c4.7%2C4.7%2C12.3%2C4.7%2C17%2C0l108.8-108.8l108.8%2C108.8c4.7%2C4.7%2C12.3%2C4.7%2C17%2C0l19.6-19.6C291.7%2C210.2%2C291.7%2C202.6%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E');
    --select-arrow-size: 12px;
    --select-arrow-position: right var(--spacingHorizontalS) center;

    /* Border widths (Original) */
    --border-width-standard: 1px;
    --border-width-accent: 2px;
    --border-width-strong: 3px;

    /* Blur (Original) */
    --blur-medium: blur(10px); /* Reduced blur from original for performance/subtlety */
    --blur-large: blur(15px);
}

/* Dark theme variable overrides */
[data-theme="dark"] {
    --colorNeutralForeground1: #ffffff;
    --colorNeutralForeground2: #f0f0f0;
    --colorNeutralForeground3: #c7c7c7;
    --colorNeutralBackground1: #1e1e1e;
    --colorNeutralBackground2: #282828;
    --colorNeutralBackground3: #2e2e2e;
    --colorNeutralBackground4: #404040;
    --colorNeutralStroke1: #484848;
    --colorNeutralStroke2: #3d3d3d;
    
    --colorBrandBackground: #479ef5;
    --colorBrandBackgroundHover: #62abf5;
    --colorBrandBackgroundPressed: #2e89e5;
    --colorBrandForeground1: #479ef5;
    --colorBrandForeground2: #62abf5;

    --colorStatusSuccessBackground1: #2a3a2a; 
    --colorStatusSuccessForeground1: #6ccb5f; 
    --colorStatusSuccessForeground2: #9fdf97;
    --colorStatusSuccessBackground2: rgba(108, 203, 95, 0.15);


    --colorStatusDangerBackground1: #4d292c;  
    --colorStatusDangerForeground1: #f57171;  
    --colorStatusDangerForeground2: #ff9797;

    --colorStatusWarningBackground1: #4d3c1d; 
    --colorStatusWarningForeground1: #ffc107; 
    --colorStatusWarningBackground2: rgba(255, 193, 7, 0.1);

    --colorStatusInfoBackground1: rgba(71, 158, 245, 0.1);
    --colorStatusInfoForeground1: #479ef5;

    --color-text-placeholder-dim: #999;
    --color-text-dark-gray: #ccc;
    --color-text-header-table: #e0e0e0;

    --color-background-header-original: rgba(30, 30, 30, 0.9);
    --color-background-card-original: rgba(40, 40, 40, 0.98);
    --color-background-container-translucent-original: rgba(40, 40, 40, 0.8);
    --color-background-codeblock: #2b2b2b;
    --color-background-preview-area-original: rgba(45, 45, 50, 0.5);
    --color-background-container-light-gray-original: #333333;

    --color-border-standard-original: rgba(255, 255, 255, 0.12);
    --color-border-light-original: rgba(255, 255, 255, 0.08);
    --color-border-focus-original: rgba(255, 255, 255, 0.18);
    --color-border-button-original: rgba(255, 255, 255, 0.15);
    --color-border-success-light-original: rgba(108, 203, 95, 0.2);
    --color-border-medium-gray-original: #555;
    --color-border-table-cell-original: #444;
    --color-border-warning-highlight-original: rgba(255, 193, 7, 0.25);
    --color-border-info-highlight-original: rgba(71, 158, 245, 0.2);
    --color-border-destructive-light-original: #7c3232;

    --color-accent-primary-selected-bg-original: rgba(71, 158, 245, 0.15);

    --color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
    --color-scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.2);

    --color-icon-info-original: #b0b0b0;
}

body {
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase300);
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground1); /* Was --colorNeutralBackground3, template uses 1 */
    line-height: 1.4;
    margin: 0;
    padding: 0; /* Body padding handled by content area or specific elements */
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background-color var(--durationNormal) var(--curveEasyEase);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--colorBrandBackground);
    color: white;
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    text-decoration: none;
    border-radius: var(--borderRadiusMedium);
    z-index: 10000; /* Ensure above everything */
    font-weight: var(--fontWeightMedium);
    transition: top var(--durationFast) var(--curveEasyEase);
}
.skip-link:focus { top: 6px; }

/* -------------------------------------------------------------------------- */
/* 1. Header & Command Bar (From Template)
/* -------------------------------------------------------------------------- */
.theme-toggle {
    background: none; border: 1px solid transparent;
    border-radius: var(--borderRadiusMedium); width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--colorNeutralForeground2); transition: all var(--durationFast) var(--curveEasyEase);
    position: relative; overflow: hidden;
    /* margin-left: auto; Removed here, moved to Settings button */
}
.theme-toggle:hover {
    background: var(--colorNeutralBackground3);
    color: var(--colorBrandForeground1);
}
.theme-toggle:focus-visible { outline: 2px solid var(--colorBrandForeground1); outline-offset: 2px; }
.theme-toggle::before { content: ''; display: none; } /* Remove old emoji */
[data-theme="dark"] .theme-toggle::before { content: ''; transform: none; } /* Remove old emoji */

.theme-icon {
    width: 18px; /* Adjust size as needed, increased */
    height: 18px;
    object-fit: contain;
    fill: currentColor; /* Allow SVG fill to inherit parent color */
    position: absolute; /* Position them absolutely to overlay */
    transition: opacity var(--durationNormal) var(--curveEasyEase), transform var(--durationNormal) var(--curveEasyEase);
    opacity: 0;
    transform: scale(0.8);
}

.theme-icon-sun {
    /* Always ensure the sun is the default and moon transitions in */
}

.theme-icon-moon {
    /* Initially hidden, will be shown on dark theme */
}

body[data-theme="light"] .theme-icon-sun {
    opacity: 1;
    transform: scale(1);
}

body[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
    transform: scale(1);
}


.ms-command-bar {
    background: var(--colorNeutralBackground2);
    border-bottom: 1px solid var(--colorNeutralStroke1);
    padding: 0 var(--spacingHorizontalM);
    display: flex; gap: var(--spacingHorizontalXS);
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    flex-shrink: 0; position: relative;
    align-items: flex-end;
    height: 48px;
}
.ms-command-bar::-webkit-scrollbar { display: none; }
.ms-command-bar::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px;
    background: linear-gradient(to left, var(--colorNeutralBackground2), transparent);
    pointer-events: none; z-index: 1;
}
.ms-command-button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--spacingVerticalXXS);
    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalS);
    border: none; border-radius: var(--borderRadiusSmall);
    background: transparent; cursor: pointer; transition: color var(--durationFast) var(--curveEasyEase), background-color var(--durationFast) var(--curveEasyEase);
    min-width: 60px; text-align: center; font-family: inherit;
    font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2);
    flex-shrink: 0; position: relative; user-select: none;
    letter-spacing: 0.02em;
}
.ms-command-button:hover {
    color: var(--colorBrandForeground1);
}
.ms-command-button:focus-visible { outline: 2px solid var(--colorBrandForeground1); outline-offset: 2px; }
.ms-command-button:active { transform: none; }
.ms-command-button.active {
    color: var(--colorBrandForeground2);
    font-weight: var(--fontWeightSemibold);
}
.ms-command-button.active:hover {
    color: var(--colorBrandBackgroundHover);
}
.ms-command-button.ms-command-button-icon-only {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    overflow: hidden;
    border: 1px solid transparent; /* Match theme-toggle box styling */
    border-radius: var(--borderRadiusMedium); /* Match theme-toggle roundness */
    margin-left: auto; /* Push this and following buttons (Theme Toggle) to the right */
}
.ms-command-button.ms-command-button-icon-only .ms-command-label {
    display: none; /* Hide the label for icon-only buttons */
}
.ms-command-button.ms-command-button-icon-only .ms-command-indicator {
    display: none; /* Hide indicator for icon-only buttons */
}
.ms-command-button.ms-command-button-icon-only:hover { /* Add hover effect */
    background: var(--colorNeutralBackground3);
    color: var(--colorBrandForeground1);
}
.ms-command-icon {
    /* font-size: var(--fontSizeBase400); */ /* Removed: no longer applies to img */
    line-height: 1; /* Ensure proper vertical alignment for content */
    display: flex; /* Use flex to center the icon */
    align-items: center;
    justify-content: center;
    color: inherit; /* Inherit color from button state */
}
.ms-command-icon img {
    width: 18px; /* Standard icon size, increased */
    height: 18px; /* Standard icon size, increased */
    object-fit: contain;
    fill: currentColor;
}
.ms-command-indicator {
    width: 100%; height: 3px; border-radius: 999px;
    background: transparent; transition: background-color var(--durationFast) var(--curveEasyEase), transform var(--durationFast) var(--curveEasyEase);
    transform-origin: center;
    transform: scaleX(0);
}
.ms-command-button.active .ms-command-indicator {
    background: var(--colorBrandBackground);
    transform: scaleX(1);
}
.ms-command-button:hover:not(.active) .ms-command-indicator {
    background: rgba(16, 110, 190, 0.25);
    transform: scaleX(1);
}

/* -------------------------------------------------------------------------- */
/* 2. Main Content Area & Feature Sections (From Template)
/* -------------------------------------------------------------------------- */
.ms-content {
    flex: 1;
    overflow-y: auto; /* Let the main content area scroll if needed */
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    padding-bottom: 100px; /* Add padding to avoid content being hidden by the sticky footer */
    position: relative;
    background: var(--colorNeutralBackground1); position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalL);
}
.ms-content::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
.ms-content::-webkit-scrollbar-track { background: transparent; }
.ms-content::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb-bg); border-radius: var(--borderRadiusSmall); } /* Was scrollbar-thumb */
.ms-content::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover-bg); }

.feature-section {
    display: none; animation: fadeInUp var(--durationNormal) var(--curveEasyEase);
    max-width: 800px; margin: 0 auto;
    width: 100%;
}
.feature-section.active {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXL);
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); } /* Reduced Y */
    to { opacity: 1; transform: translateY(0); }
}

.feature-header {
    display: flex; align-items: flex-start; gap: var(--spacingHorizontalL);
    margin-bottom: var(--spacingVerticalL); /* Was XXL */
    padding-bottom: var(--spacingVerticalM); /* Was L */
    border-bottom: 1px solid var(--colorNeutralStroke1); position: relative;
}
.feature-header::after {
    content: ''; position: absolute; bottom: -1px; left: 0; height: 2px; width: 60px;
    background: var(--colorBrandBackground); border-radius: var(--borderRadiusSmall);
}
.feature-icon-large {
    width: 32px; height: 32px; /* Reduced from 40px */
    background: linear-gradient(135deg, var(--colorBrandBackground), var(--colorBrandBackgroundPressed));
    border-radius: var(--borderRadiusMedium); /* Was Large */
    display: flex; align-items: center; justify-content: center; color: white;
    font-size: var(--fontSizeBase400); /* Was 500 */
    flex-shrink: 0; box-shadow: var(--shadow4); /* Was 8 */
    position: relative; overflow: hidden;
}
.feature-icon-large::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%); /* Subtler gradient */
}
.feature-icon-large img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}
.feature-icon-logo {
    width: 140px; height: 48px;
    background: transparent; box-shadow: none;
    border-radius: var(--borderRadiusSmall);
}
.feature-icon-logo::before {
    content: none;
}
.feature-title { /* Maps to original .ms-font-xl */
    font-size: var(--fontSizeBase500); /* Approx --font-size-x-large */
    font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground1);
    margin: 0 0 var(--spacingVerticalXS) 0; line-height: 1.2;
    letter-spacing: -0.02em; /* From original */
}
.feature-description {
    font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground2);
    margin: 0; line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* 3. Collapsibles (From Template, with original logic in mind)
/* -------------------------------------------------------------------------- */
.collapsible {
    background: var(--colorNeutralBackground1); /* Was --color-background-card-original */
    border: var(--border-width-standard) solid var(--colorNeutralStroke1); /* Was --color-border-light-original */
    border-radius: var(--borderRadiusMedium); /* Was --border-radius-standard */
    margin-bottom: var(--spacingVerticalM); /* Default margin for cards/sections */
    box-shadow: var(--shadow2); /* Was --shadow-card */
}
.collapsible-header {
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    background: var(--colorNeutralBackground2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacingHorizontalL);
    transition: background-color var(--durationFast) var(--curveEasyEase), border-radius var(--durationNormal) var(--curveEasyEase);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border: none;
    width: 100%;
    text-align: left;
    min-height: 36px;
    /* font-weight, color, font-size, letter-spacing are now handled by child .quick-action-content elements */
}
.collapsible-header:hover {
    background: var(--colorNeutralBackground3); /* Was --color-background-button-secondary */
}
.collapsible-header:focus-visible { outline: 2px solid var(--colorBrandForeground1); outline-offset: -2px; }

.collapsible-header:not(.expanded) {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.collapsible-content {
    padding: var(--spacingVerticalM) var(--spacingHorizontalM); /* Default content padding */
    /* display: none; JS will handle max-height and opacity */
    border-top: 1px solid var(--colorNeutralStroke1);
    overflow: hidden; /* This is necessary for the max-height animation */
    /* Animation properties are in the JS-added style tag */
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.collapsible-header.expanded + .collapsible-content { /* JS adds .expanded to header */
    /* display: block; JS will handle */
}
/* Styles for new elements within .collapsible-header to mimic .quick-action */
.collapsible-header .quick-action-icon {
   width: 24px; /* Smaller icon */
   height: 24px; /* Smaller icon */
   background: transparent;
   color: var(--colorNeutralForeground1);
   border-radius: var(--borderRadiusMedium); /* Adjusted radius */
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: var(--fontWeightSemibold);
   font-size: var(--fontSizeBase100); /* Smaller font in icon */
   flex-shrink: 0;
   box-shadow: none;
}

.collapsible-header .quick-action-content {
   flex: 1; /* Allows content to grow and pushes chevron to the right */
}

.collapsible-header .quick-action-content h4 {
   font-size: var(--fontSizeBase400);
   font-weight: var(--fontWeightSemibold);
   color: var(--colorNeutralForeground1);
   margin: 0 0 var(--spacingVerticalS) 0; /* Matches .quick-action h4 */
   line-height: 1.3;
}

.collapsible-header .quick-action-content p {
   font-size: var(--fontSizeBase300);
   color: var(--colorNeutralForeground2);
   margin: 0;
   line-height: 1.4;
}


/* -------------------------------------------------------------------------- */
/* 4. Form Controls (Inputs, Textareas, Selects, Labels - Merged)
/* -------------------------------------------------------------------------- */
.ms-form-group {
    margin-bottom: var(--spacingVerticalM); /* Was XL, adjusted */
}

.form-group-horizontal {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalM);
}

.form-group-horizontal .ms-label {
    margin-bottom: 0;
    flex-basis: 150px; /* Give labels a consistent width */
    flex-shrink: 0;
}

.form-group-horizontal .ms-input {
    flex-grow: 1;
}
.ms-label { /* Combines .input-label */
    display: block; font-size: var(--fontSizeBase300); font-weight: var(--fontWeightMedium);
    color: var(--colorNeutralForeground1); margin-bottom: var(--spacingVerticalS);
    letter-spacing: -0.01em; /* From .input-label */
    line-height: 1.3; /* From .input-label */
}
.ms-label-required::after { content: ' *'; color: var(--colorStatusDangerForeground1); }

.ms-input, .ms-textarea, .ms-select { /* Base for .prompt-input, .json-input, .api-key-input etc. */
    width: 100%;
    padding: var(--spacingVerticalM) var(--spacingHorizontalM); /* Default padding */
    border: var(--border-width-standard) solid var(--colorNeutralStroke1); /* Was --color-border-standard-original */
    border-radius: var(--borderRadiusMedium); /* Was sharp for most, but template uses medium */
    font-family: inherit; font-size: var(--fontSizeBase300);
    color: var(--colorNeutralForeground1);
    background: var(--colorNeutralBackground1); /* Was --color-background-input */
    transition: border-color var(--durationFast) var(--curveEasyEase), box-shadow var(--durationFast) var(--curveEasyEase);
    outline: none; position: relative;
    min-height: var(--input-height-standard); /* From original */
}
.ms-input:focus, .ms-textarea:focus, .ms-select:focus {
    border-color: var(--colorBrandForeground1); /* Was --color-border-focus-original */
    box-shadow: 0 0 0 1px var(--colorBrandForeground1);
}
.ms-input:hover:not(:focus), .ms-textarea:hover:not(:focus), .ms-select:hover:not(:focus) {
    border-color: var(--colorNeutralStroke2);
}
.ms-input:disabled, .ms-textarea:disabled, .ms-select:disabled {
    background: var(--colorNeutralBackground4); color: var(--colorNeutralForeground3);
    cursor: not-allowed;
}
.ms-input::placeholder, .ms-textarea::placeholder { /* From original prompt-input::placeholder */
    color: var(--colorNeutralForeground3); /* Was --color-text-muted */
    opacity: 1; transition: opacity var(--durationGentle) var(--curveEasyEase);
}
.ms-input:focus::placeholder, .ms-textarea:focus::placeholder { opacity: 0.5; }

/* Specifics for Textarea */
.ms-textarea {
    resize: vertical;
    min-height: var(--input-min-height-textarea); /* From original */
    line-height: 1.5; /* Common for textareas */
    padding: var(--spacingHorizontalS); /* From original prompt-input padding */
}
/* For JSON specific inputs */
.ms-input[type="text"].json-input-text, /* If it's a single line */
.ms-textarea.json-input-area { /* If it's a textarea */
    font-family: var(--font-family-monospace);
    font-size: var(--fontSizeBase200); /* Was --font-size-small */
    line-height: 1.5;
}
.ms-textarea.json-input-area {
    min-height: var(--input-min-height-textarea); /* Default, or original --textarea-min-height-large */
}


/* Specifics for Select */
.ms-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23616161' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--spacingHorizontalM) center;
    background-repeat: no-repeat; background-size: 16px;
    padding-right: calc(var(--spacingHorizontalM) + 20px + var(--spacingHorizontalS)); /* Ensure space for arrow */
    cursor: pointer;
}
[data-theme="dark"] .ms-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23c7c7c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Input Wrappers & Notes (From Original, adapted) */
.input-label-wrapper {
    display: flex; align-items: center; gap: var(--spacingHorizontalXS);
    margin-bottom: var(--spacingVerticalS);
}
.input-label-wrapper .ms-label { margin-bottom: 0; } /* Override default label margin */

.input-note {
    font-size: var(--fontSizeBase200); /* Was --font-size-x-small */
    color: var(--colorNeutralForeground3); /* Was --color-text-muted */
    margin-top: var(--spacingVerticalXS); /* Was --spacing-xxs */
    letter-spacing: -0.01em;
}
.char-counter { /* From original */
    color: var(--colorNeutralForeground3); font-weight: var(--fontWeightMedium);
}

/* Checkbox specific styling (from original structure) */
.ms-input[type="checkbox"] { /* Style custom checkboxes if needed */
    width: auto; /* Don't make checkboxes full width */
    min-height: auto;
    margin-right: var(--spacingHorizontalS);
    vertical-align: middle;
}
/* Input field specifically for model search (from original) */
.model-search-input { /* Used by gptModelSearch, globalOcrModelSearch */
    /* .ms-input provides base. This class is for specific query if needed later */
}

/* -------------------------------------------------------------------------- */
/* 5. Buttons (From Template, merged with original .ms-Button variants)
/* -------------------------------------------------------------------------- */
.ms-button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--spacingHorizontalS);
    padding: var(--spacingHorizontalM) var(--spacingHorizontalL); /* Horizontal M for less wide default buttons */
    border: var(--border-width-standard) solid var(--colorNeutralStroke1); /* Was --color-border-button-original */
    border-radius: var(--borderRadiusMedium); /* Was --border-radius-standard */
    background: var(--colorNeutralBackground1); /* Was --color-background-button */
    color: var(--colorNeutralForeground1);
    font-family: inherit; font-size: var(--fontSizeBase300); font-weight: var(--fontWeightMedium);
    cursor: pointer; transition: all var(--durationFast) var(--curveEasyEase);
    text-decoration: none; outline: none; position: relative; overflow: hidden;
    user-select: none; min-height: var(--button-height-standard);
    line-height: normal; /* From original */
    width: 100%; /* Default from original, can be overridden */
    margin-bottom: var(--spacingVerticalS); /* Default margin from original */
}
.ms-button:hover {
    background: var(--colorNeutralBackground2); /* Was --color-background-button-hover */
    border-color: var(--colorNeutralStroke2);
    transform: translateY(-1px); box-shadow: var(--shadow4);
}
.ms-button:focus-visible { outline: 2px solid var(--colorBrandForeground1); outline-offset: 2px; }
.ms-button:active { transform: scale(0.98); /* From original */ box-shadow: var(--shadow2); }
.ms-button:disabled {
    background: var(--colorNeutralBackground4); border-color: var(--colorNeutralStroke1);
    color: var(--colorNeutralForeground3); cursor: not-allowed;
    transform: none; box-shadow: none; opacity: 0.6; /* From original */
}
/* Auto-width buttons */
.ms-button.ms-button-auto-width { width: auto; }

/* Primary Button */
.ms-button-primary {
    background: var(--colorBrandBackground); /* Was --color-accent-primary */
    border-color: var(--colorBrandBackground);
    color: white; /* Was --color-white */
}
.ms-button-primary:hover {
    background: var(--colorBrandBackgroundHover); /* Was --color-accent-primary-hover */
    border-color: var(--colorBrandBackgroundHover);
}
.ms-button-primary:disabled { background: var(--colorBrandBackground); opacity: 0.6; }

/* Destructive/Stop Button */
.ms-button-danger { /* Covers .ms-Button--destructive, .ms-Button--stop */
    background: var(--colorStatusDangerForeground1); /* Was --color-accent-destructive */
    border-color: var(--colorStatusDangerForeground1);
    color: white;
}
.ms-button-danger:hover {
    background: #c12e32; /* Darker red, was --color-accent-destructive-hover */
    border-color: #c12e32;
}
.ms-button-danger:disabled { background: var(--colorStatusDangerForeground1); opacity: 0.6; }

/* Confirm/Success Button */
.ms-button-confirm { /* Covers .ms-Button--confirm */
    background: var(--colorStatusSuccessForeground1); /* Was --color-accent-success */
    border-color: var(--colorStatusSuccessForeground1);
    color: white;
}
.ms-button-confirm:hover {
    background: #0e6e0e; /* Darker green, was --color-accent-success-hover */
    border-color: #0e6e0e;
}
.ms-button-confirm:disabled { background: var(--colorStatusSuccessForeground1); opacity: 0.6; }

/* Small Icon Button (e.g., remove field buttons) */
.ms-button-small-icon { /* For rp-remove-simple-field-button, table-gen-remove-column-button */
    min-width: 32px; width: 32px; height: 32px; /* Was --button-size-small-icon */
    padding: 0; font-size: var(--fontSizeBase300); /* Was --font-size-standard */
    font-weight: var(--fontWeightBold);
    color: var(--colorStatusDangerForeground1);
    background-color: var(--colorStatusDangerBackground1); /* Was --color-background-destructive-light */
    border: var(--border-width-standard) solid var(--colorStatusDangerForeground1); /* Was --color-border-destructive-light-original */
    border-radius: var(--borderRadiusMedium);
    margin-bottom: 0; line-height: 1; flex-shrink: 0;
}
.ms-button-small-icon:hover {
    background-color: rgba(209, 52, 56, 0.2); /* Darken background-destructive-light */
    border-color: var(--colorStatusDangerForeground1); /* Darken border-destructive-light */
    color: var(--colorStatusDangerForeground2);
}

/* Secondary Button (e.g., Add Field) */
.ms-button-secondary { /* For #rpAddSimpleOutputFieldButton */
    background-color: var(--colorNeutralBackground3); /* Was --color-background-button-secondary */
    color: var(--colorNeutralForeground1);
    border-color: var(--colorNeutralStroke1); /* Was --color-border-button-secondary */
    width: auto; /* From original */
    padding: 0 var(--spacingHorizontalM); /* From original */
    height: var(--input-height-standard); /* From original */
}
.ms-button-secondary:hover {
    background-color: var(--colorNeutralBackground4); /* Was --color-background-button-secondary-hover */
    border-color: var(--colorNeutralStroke2); /* Was --color-border-button-secondary-hover */
}

.button-group { /* From original */
    display: flex; gap: var(--spacingHorizontalS); width: 100%;
}
.button-group .ms-button { flex: 1; width: auto; /* Allow flex to size */ margin-bottom: 0; } /* Override some .ms-button defaults */

.button-group-row {
    display: flex;
    gap: var(--spacingHorizontalS);
    width: 100%;
}
.button-group-row .ms-button {
    flex: 1;
    width: auto;
    margin-bottom: 0;
}

/* Keep Cell Filler action buttons aligned; inherit adaptive sizing from .button-group */
#cellFillerActionButtons { align-items: center; }

/* -------------------------------------------------------------------------- */
/* 6. Messages & Notifications (From Template, merged with original .user-message)
/* -------------------------------------------------------------------------- */
.ms-message { /* Base for .user-message */
    padding: var(--spacingVerticalM) var(--spacingHorizontalL); /* Approx --spacing-s-alt and --spacing-m-alt */
    border-radius: var(--borderRadiusMedium); /* Was sharp */
    font-size: var(--fontSizeBase300); margin-bottom: var(--spacingVerticalL); /* Was --spacing-m */
    display: flex; /* Was flex, but template uses display:none then JS shows */
    align-items: flex-start; gap: var(--spacingHorizontalM);
    border: var(--border-width-standard) solid; position: relative; overflow: hidden;
    word-wrap: break-word; white-space: pre-wrap; /* From original */
}
.ms-message::before { /* Side accent from template */
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: currentColor;
}
.ms-message-icon { font-size: var(--fontSizeBase400); flex-shrink: 0; }
.ms-message-content { flex: 1; line-height: 1.5; }
.ms-message-title { font-weight: var(--fontWeightSemibold); margin-bottom: var(--spacingVerticalXS); }

/* Variants based on original .user-message--* */
.ms-message-info { /* Covers .user-message--info, .user-message--loading */
    background: var(--colorStatusInfoBackground1); color: var(--colorStatusInfoForeground1);
    border-color: var(--colorStatusInfoForeground1); /* Was --color-border-info-highlight-original */
}
[data-theme="dark"] .ms-message-info {
    background: linear-gradient(135deg, #2c3a47, #384c5e);
}
.ms-message-success { /* Covers .user-message--success */
    background: var(--colorStatusSuccessBackground1); color: var(--colorStatusSuccessForeground1);
    border-color: var(--colorStatusSuccessForeground1); /* Was --color-border-success-highlight */
}
.ms-message-warning { /* Covers .user-message--warning */
    background: var(--colorStatusWarningBackground2); color: var(--colorStatusWarningForeground1);
    border-color: var(--colorStatusWarningForeground1); /* Was --color-border-warning-highlight-original */
}
.ms-message-danger { /* Covers .user-message--error */
    background: var(--colorStatusDangerBackground1); color: var(--colorStatusDangerForeground1);
    border-color: var(--colorStatusDangerForeground1); /* Was --color-border-error-highlight */
}
/* Close button for messages (from original user-message__close-btn) */
.ms-message-close-btn {
    position: absolute; top: var(--spacingVerticalS); right: var(--spacingHorizontalM); /* Approx original */
    background: none; border: none;
    font-size: var(--fontSizeBase400); /* Was --font-size-large (18px) */
    line-height: 1; color: inherit; opacity: 0.6; cursor: pointer; padding: 0;
    transition: opacity var(--durationFast) ease;
}
.ms-message-close-btn:hover { opacity: 1; }

.user-message__close-btn {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.05);
    border: none;
    border-radius: 50%;
    color: var(--colorNeutralForeground3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    transition: all var(--durationFast) var(--curveEasyEase);
    z-index: 2;
}

.user-message__close-btn:hover {
    background: rgba(0,0,0,0.1);
    color: var(--colorNeutralForeground1);
    transform: translateY(-50%) scale(1.1);
}

/* -------------------------------------------------------------------------- */
/* 7. Progress Indicators (From Template's enhanced, merged with original)
/* -------------------------------------------------------------------------- */
.enhanced-progress-container { /* Replaces .progress-indicator */
    margin: var(--spacingVerticalL) 0; /* From original */
    background: var(--colorNeutralBackground2); /* Was --color-background-subtle */
    border-radius: var(--borderRadiusLarge); /* Was --border-radius-standard */
    padding: var(--spacingVerticalM); /* Was --spacing-m-alt */
    border: var(--border-width-standard) solid var(--colorNeutralStroke1); /* Was --color-border-subtle */
    position: relative; /* For close button */
}
/* Close button for progress indicator (from original progress-indicator__close-btn) */
.enhanced-progress-close-btn {
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.05);
    border: none;
    border-radius: 50%;
    color: var(--colorNeutralForeground3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    transition: all var(--durationFast) var(--curveEasyEase);
    flex-shrink: 0;
}

.enhanced-progress-close-btn:hover {
    background: rgba(0,0,0,0.1);
    color: var(--colorNeutralForeground1);
    transform: scale(1.1);
}

.enhanced-progress-close-btn:focus-visible {
    outline: 2px solid var(--colorBrandForeground1);
    outline-offset: 1px;
}

[data-theme="dark"] .enhanced-progress-close-btn {
    background: rgba(255,255,255,0.1);
    color: var(--colorNeutralForeground3);
}

[data-theme="dark"] .enhanced-progress-close-btn:hover {
    background: rgba(255,255,255,0.2);
    color: var(--colorNeutralForeground1);
}

.enhanced-progress-header { /* Houses title and percentage/subtext */
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--spacingVerticalS); /* Was gap in original .progress-indicator */
}
.enhanced-progress-title { /* Was .progress-text */
    font-weight: var(--fontWeightMedium); color: var(--colorNeutralForeground1);
    font-size: var(--fontSizeBase300); /* Approx original */
}
.enhanced-progress-percentage, .enhanced-progress-subtext { /* Combines .progress-details (percentage & subtext) */
    font-size: var(--fontSizeBase200); /* Was --font-size-x-small */
    color: var(--colorNeutralForeground2);
}
.enhanced-progress-subtext { text-align: right; }

.enhanced-progress { /* Replaces .progress-bar-container */
    background: var(--colorNeutralBackground4); /* Was --color-background-progress-track */
    border-radius: var(--borderRadiusXLarge); /* Was --border-radius-small */
    height: var(--progress-bar-track-height);
    overflow: hidden; position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.enhanced-progress-bar { /* Replaces .progress-bar */
    height: 100%; border-radius: var(--borderRadiusXLarge); /* Match track */
    transition: width var(--durationGentle) var(--curveEasyEase), background-color var(--durationGentle) var(--curveEasyEase);
    position: relative; overflow: hidden;
    background: var(--colorBrandBackground); /* Default/Info, was --color-accent-info */
}
.enhanced-progress-bar::after { /* Shimmer, from template */
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: progressShimmer 2s infinite;
}
[data-theme="dark"] .enhanced-progress-bar::after {
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}
@keyframes progressShimmer { 0% { left: -100%; } 100% { left: 100%; } }

/* Indeterminate state (from original .progress-bar--indeterminate) */
.enhanced-progress-bar-indeterminate {
    width: 100% !important;
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.3) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent
    );
    /* background-size: var(--progress-indeterminate-bg-size); from original, use fixed size */
    background-size: 40px 40px;
    animation: progress-indeterminate 1s linear infinite; /* Was --animation-duration-progress-indeterminate */
}
[data-theme="dark"] .enhanced-progress-bar-indeterminate {
    background-image: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.3) 25%, transparent 25%,
      transparent 50%, rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.3) 75%, transparent 75%, transparent
    );
}
@keyframes progress-indeterminate {
    from { background-position: 40px 0; }
    to { background-position: 0 0; }
}

/* Error state (from original .progress-bar--error) */
.enhanced-progress-bar-danger {
    background: var(--colorStatusDangerForeground1); /* Was --color-accent-destructive */
    width: 100% !important;
}
.enhanced-progress-bar-success { /* Add success state if needed */
    background: var(--colorStatusSuccessForeground1);
    width: 100% !important;
}

.progress-text-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--spacingVerticalXS);
    min-width: 0; /* Prevent flexbox overflow from pushing out the close button */
}

.progress-title-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacingHorizontalS);
}

/* Ensure title and subtext don't overflow and push out other elements */
.enhanced-progress-header .enhanced-progress-title,
.enhanced-progress-header .enhanced-progress-subtext {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.enhanced-progress-header .enhanced-progress-title {
    flex-shrink: 1; /* Allow title to shrink if needed */
}

.enhanced-progress-header .enhanced-progress-percentage {
    flex-shrink: 0; /* Keep percentage from shrinking */
}

/* For the subtext inside the new container, remove old inline styles */
.progress-text-container .enhanced-progress-subtext {
    text-align: left;
    margin-top: 0;
}


/* -------------------------------------------------------------------------- */
/* 8. AI Status & Quick Actions (From Template)
/* -------------------------------------------------------------------------- */
.ai-status {
    background: linear-gradient(135deg, var(--colorStatusInfoBackground1), var(--colorNeutralBackground3)); /* Adjusted for subtlety */
    border: 1px solid var(--colorBrandForeground1);
    border-radius: var(--borderRadiusLarge); padding: var(--spacingVerticalL);
    margin-bottom: var(--spacingVerticalXL); display: flex; align-items: center;
    gap: var(--spacingHorizontalM);
}
[data-theme="dark"] .ai-status {
    background: linear-gradient(135deg, #2c3a47, #384c5e);
}
.ai-status-icon {
    width: 24px; height: 24px; background: var(--colorBrandBackground);
    border-radius: var(--borderRadiusCircular); display: flex; align-items: center;
    justify-content: center; color: white; font-size: var(--fontSizeBase200);
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.ai-status-text { flex: 1; color: var(--colorBrandForeground1); font-weight: var(--fontWeightMedium); }

.quick-actions { display: grid; gap: var(--spacingVerticalL); margin-bottom: var(--spacingVerticalXXL); }
.quick-action {
    background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge); padding: var(--spacingVerticalL);
    cursor: pointer; transition: all var(--durationFast) var(--curveEasyEase);
    display: flex; align-items: flex-start; gap: var(--spacingHorizontalL);
    position: relative; overflow: hidden; text-decoration: none; color: inherit;
}
.quick-action::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--colorBrandBackground) 0%, transparent 50%);
    opacity: 0; transition: opacity var(--durationFast) var(--curveEasyEase);
}
.quick-action:hover {
    border-color: var(--colorBrandForeground1); box-shadow: var(--shadow8);
    transform: translateY(-2px);
}
.quick-action:hover::before { opacity: 0.02; }
.quick-action:focus-visible { outline: 2px solid var(--colorBrandForeground1); outline-offset: 2px; }
.quick-action:active { transform: translateY(0); box-shadow: var(--shadow4); }
.quick-action-number {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--colorBrandBackground), var(--colorBrandBackgroundPressed));
    color: white; border-radius: var(--borderRadiusLarge);
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300);
    flex-shrink: 0; box-shadow: var(--shadow4);
}

.quick-action-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-action-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.quick-action-content { flex: 1; position: relative; z-index: 1; }
.quick-action-content h4 {
    font-size: var(--fontSizeBase400); font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1); margin: 0 0 var(--spacingVerticalS) 0;
    line-height: 1.3;
}
.quick-action-content p {
    font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground2);
    margin: 0; line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* 9. Model Selector (Custom - Merged original with template's "enhanced" ideas)
/* -------------------------------------------------------------------------- */
.enhanced-model-selector {
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
    overflow: hidden;
    box-shadow: var(--shadow2);
    margin-top: var(--spacingVerticalS);
    background-color: var(--colorNeutralBackground2);
}

.model-selector-title {
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    background-color: var(--colorNeutralBackground3);
    border-bottom: 1px solid var(--colorNeutralStroke1);
    margin: -1px -1px 0 -1px; /* Overlap the container border */
}

.model-count-container {
    padding: var(--spacingVerticalS) var(--spacingHorizontalL);
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground2);
    background-color: var(--colorNeutralBackground2);
    border-bottom: 1px solid var(--colorNeutralStroke1);
}

.enhanced-model-search-container {
    position: relative;
    border-bottom: 1px solid var(--colorNeutralStroke1);
    background-color: var(--colorNeutralBackground2); /* Make search stand out */
}

.enhanced-model-search {
    width: 100%;
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    padding-left: calc(var(--spacingHorizontalL) + 24px); /* Space for icon on left */
    border: none;
    font-family: inherit;
    font-size: var(--fontSizeBase300);
    background: transparent; /* Transparent to show container color */
    color: var(--colorNeutralForeground1);
    outline: none;
    min-height: var(--input-height-standard);
}

.enhanced-model-search-icon {
    position: absolute;
    left: var(--spacingHorizontalM); /* Icon on the left */
    top: 50%;
    transform: translateY(-50%);
    color: var(--colorNeutralForeground2);
    pointer-events: none;
    font-size: var(--fontSizeBase300); /* Adjusted size */
}

.enhanced-models-list {
    max-height: 280px; /* Increased height */
    overflow-y: auto;
}

.enhanced-models-list::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
.enhanced-models-list::-webkit-scrollbar-track { background: transparent; }
.enhanced-models-list::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb-bg); border-radius: var(--borderRadiusSmall); }
.enhanced-models-list::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover-bg); }

.enhanced-model-item {
    border-bottom: 1px solid var(--colorNeutralStroke2);
    position: relative;
    background-color: var(--colorNeutralBackground1);
}

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

.model-item-header {
    display: flex;
    align-items: center;
    padding: var(--spacingVerticalM);
    cursor: pointer;
    transition: background-color var(--durationFast);
    position: relative; /* For the selection indicator */
    gap: var(--spacingHorizontalS);
}

.model-item-header:hover {
    background-color: var(--colorNeutralBackground2);
}

/* --- New Selection Style --- */
.model-item-header.selected {
    background-color: var(--color-accent-primary-selected-bg-original); /* A light blue tint */
    color: var(--colorNeutralForeground1); /* Keep text color normal */
}

.model-item-header.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    background-color: var(--colorBrandBackground);
    border-radius: 0 var(--borderRadiusMedium) var(--borderRadiusMedium) 0;
}

.model-item-header.selected .enhanced-model-name {
    font-weight: var(--fontWeightSemibold); /* Make selected text bolder */
    color: var(--colorBrandForeground1);
}

.enhanced-model-name {
    font-weight: var(--fontWeightMedium);
    flex-grow: 1;
}

/* --- Free Badge --- */
.model-free-badge {
    background-color: var(--colorStatusSuccessBackground1);
    color: var(--colorStatusSuccessForeground2);
    padding: var(--spacingHorizontalXXS) var(--spacingHorizontalS);
    border-radius: var(--borderRadiusMedium);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    margin-left: var(--spacingHorizontalS);
    border: 1px solid var(--colorStatusSuccessForeground1);
}

.model-select-arrow {
    font-size: 12px;
    transition: transform var(--durationNormal) var(--curveEasyEase);
    color: var(--colorNeutralForeground2);
}

.enhanced-model-item.details-visible .model-select-arrow {
    transform: rotate(90deg);
}

.model-details-grid {
    display: none;
    padding: var(--spacingVerticalM);
    padding-top: 0;
    background-color: var(--colorNeutralBackground1);
}

.enhanced-model-item.details-visible .model-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--spacingVerticalM) var(--spacingHorizontalL);
    border-top: 1px solid var(--colorNeutralStroke2);
    margin: 0 var(--spacingVerticalM);
    padding-top: var(--spacingVerticalM);
    padding-left: 0;
    padding-right: 0;
}

.detail-row {
    display: flex;
    flex-direction: column;
    font-size: var(--fontSizeBase200);
}

.detail-label {
    color: var(--colorNeutralForeground3);
    margin-bottom: 2px;
    font-size: var(--fontSizeBase100);
    text-transform: uppercase;
}

.detail-value {
    color: var(--colorNeutralForeground1);
    font-weight: var(--fontWeightMedium);
}

.enhanced-selected-model-info-box {
    display: none !important; /* Hide the separate info box as per new design */
}

.currently-selected-model-container {
    padding: var(--spacingVerticalM);
    background-color: var(--colorBrandBackground);
    color: white;
    border-top: 1px solid var(--colorBrandBackgroundPressed);
}

[data-theme="dark"] .currently-selected-model-container {
    background-color: var(--colorBrandBackgroundPressed);
    border-top-color: var(--colorBrandBackground);
}

.currently-selected-model-container .current-model-header {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    margin-bottom: var(--spacingVerticalM);
}

.currently-selected-model-container .current-model-title {
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    text-transform: uppercase;
    flex-shrink: 0;
}

.currently-selected-model-container .enhanced-model-name {
    font-weight: var(--fontWeightSemibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.currently-selected-model-container .model-free-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

.currently-selected-model-container .model-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--spacingVerticalM) var(--spacingHorizontalL);
    margin-top: var(--spacingVerticalM);
    background-color: rgba(0,0,0,0.1);
    padding: var(--spacingVerticalS);
    border-radius: var(--borderRadiusMedium);
}

.currently-selected-model-container .detail-label {
    color: rgba(255, 255, 255, 0.7);
}

.currently-selected-model-container .detail-value {
    color: white;
}

/* -------------------------------------------------------------------------- */
/* 10. Preview Table (Custom - Merged original with template's "enhanced" ideas)
/* -------------------------------------------------------------------------- */
.enhanced-preview-message {
    color: var(--colorNeutralForeground2);
    margin-bottom: var(--spacingVerticalM);
    font-size: var(--fontSizeBase300);
}
.enhanced-preview-table-wrapper { /* For scrolling the table itself */
    overflow: auto; /* Handles both X and Y scroll */
    max-height: 300px; /* Original --container-max-height-standard */
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge);
    /* max-width: 100%; Ensured by parent */
}
.enhanced-preview-table { /* The table element */
    width: auto; /* Allow table to be wider than container for horizontal scroll */
    min-width: 100%; /* Ensure it fills container if narrower */
    border-collapse: collapse;
    margin-top: 0; /* Table is direct child, no top margin needed */
    font-size: var(--fontSizeBase200); /* Original --font-size-x-small */
    background-color: var(--colorNeutralBackground1); /* Original --color-white */
    /* border, border-radius, box-shadow handled by .enhanced-preview-container */
}
.enhanced-preview-table th,
.enhanced-preview-table td {
    border: var(--border-width-standard) solid var(--colorNeutralStroke2); /* Original --color-border-table-cell-original or --color-border-standard */
    padding: var(--spacingVerticalXS) var(--spacingHorizontalS); /* Original 4px 6px */
    text-align: left; vertical-align: top; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 150px; /* Original */
}
.enhanced-preview-table th {
    background-color: var(--colorNeutralBackground3); /* Original --color-background-subtle */
    font-weight: var(--fontWeightSemibold); /* Original */
    color: var(--color-text-header-table); /* Original */
    position: sticky; top: 0; z-index: 1; /* Keep headers visible on scroll */
}
.enhanced-preview-table th.new-header { /* From original */
    background-color: var(--colorStatusSuccessBackground1);
    color: var(--colorStatusSuccessForeground2);
}
.enhanced-preview-table th.editor-original-header,
.enhanced-preview-table th.editor-new-header,
.enhanced-preview-table th.editor-context-header {
    background-color: var(--colorNeutralBackground3); /* Default for editor headers */
}

.enhanced-preview-table td.original-data { color: var(--colorNeutralForeground2); } /* Original */
.enhanced-preview-table td.new-data { /* Original, adapted with new vars */
    font-weight: var(--fontWeightMedium);
    color: var(--colorNeutralForeground1);
    background-color: var(--colorStatusInfoBackground1); /* Was --color-background-info-subtle-highlight */
}
/* Cell Filler Specific Preview Styles */
.enhanced-preview-table td.cell-to-fill {
  background-color: var(--colorStatusWarningBackground2); /* Was --color-background-warning-highlight */
  font-style: italic;
  color: var(--color-text-placeholder-dim); /* Kept original as it's specific */
}
.enhanced-preview-table td.filled-value {
  background-color: var(--colorStatusSuccessBackground2); /* Was --color-background-success-filled */
  font-weight: var(--fontWeightMedium);
  color: var(--colorStatusSuccessForeground1); /* Was --color-text-success-strong */
}
.enhanced-preview-table td.original-context-cell { /* From original (CellFiller) */
    font-style: normal;
    font-weight: var(--fontWeightRegular);
    color: var(--colorNeutralForeground2);
}
.enhanced-preview-table td.original-data-in-filled-column { /* From original (CellFiller) */
    background-color: var(--colorNeutralBackground1);
}
/* Table Editor Specific Preview Styles */
.enhanced-preview-table td.editor-original-value { color: var(--colorNeutralForeground2); }
.enhanced-preview-table td.editor-new-value { /* Base, no specific style unless changed */ }
.enhanced-preview-table td.preview-cell--changed {
    background-color: var(--colorStatusWarningBackground1); font-weight: var(--fontWeightMedium);
}
.enhanced-preview-table td.editor-context-value {
    color: var(--colorNeutralForeground2); background-color: var(--colorNeutralBackground1);
}

.enhanced-preview-actions { /* Container for Apply/Cancel buttons below preview */
    display: flex;
    gap: var(--spacingHorizontalS); /* Space between buttons */
    justify-content: flex-end; /* Align buttons to the right */
    margin-top: var(--spacingVerticalM);
}
/* Styling for apply/cancel buttons is handled by .ms-button-confirm and .ms-button-danger */

/* -------------------------------------------------------------------------- */
/* 11. Debug Log (Original, adapted with new vars)
/* -------------------------------------------------------------------------- */
.debug-log-container {
    white-space: pre-wrap; word-wrap: break-word;
    background: var(--colorNeutralBackground2); /* Was --color-background-subtle */
    border: 1px solid var(--colorNeutralStroke1); /* Was --color-border-medium-gray-original */
    padding: var(--spacingVerticalS);
    border-radius: var(--borderRadiusMedium); /* Was --border-radius-standard */
    max-height: 300px; min-height: 120px; overflow-y: auto;
    font-size: var(--fontSizeBase100); /* Was --font-size-xx-small */
    line-height: 1.4;
    /* font-family: var(--font-family-monospace); Applied to spans inside */
}
.debug-log-container:empty::before {
    content: "No log entries yet. Log entries will appear here as you use the add-in.";
    color: var(--colorNeutralForeground3); font-style: italic;
}
.debug-log-container span { /* For individual log entries for monospace font */
    font-family: var(--font-family-monospace);
}
.log-info-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--spacingVerticalXS) var(--spacingHorizontalS);
    background: var(--colorNeutralBackground3); /* Was --color-background-container-light-gray-original */
    border: 1px solid var(--colorNeutralStroke2); /* Was --color-border-light-gray - assumed similar to subtle */
    border-radius: var(--borderRadiusMedium); /* Was --border-radius-standard */
    font-size: var(--fontSizeBase100); /* Was --font-size-xx-small */
    gap: var(--spacingHorizontalS); margin-bottom: var(--spacingVerticalS);
}
.log-memory-info {
    color: var(--colorNeutralForeground2); font-weight: var(--fontWeightMedium);
    font-family: var(--font-family-monospace);
}
.log-help-text { color: var(--colorNeutralForeground3); flex: 1; text-align: right; }

.log-error { color: var(--colorStatusDangerForeground1); font-weight: var(--fontWeightMedium); }
.log-warn { color: var(--colorStatusWarningForeground1); }
.log-info { color: var(--colorNeutralForeground1); } /* Default text color */
.log-debug { color: var(--colorNeutralForeground2); } /* Secondary text color */

/* -------------------------------------------------------------------------- */
/* 12. Miscellaneous Original Styles (Adapted)
/* -------------------------------------------------------------------------- */
/* Instruction Text / Banners (Original .instruction-text) */
.instruction-text { /* Can be used as a general info box */
    color: var(--colorNeutralForeground1); line-height: 1.6;
    margin: 0 0 var(--spacingVerticalL) 0; /* Was --spacing-m */
    font-size: var(--fontSizeBase300); /* Was --font-size-standard */
    padding: var(--spacingVerticalM); /* Was --spacing-m-alt */
    background: var(--colorNeutralBackground2); /* Was --color-background-subtle */
    border-radius: var(--borderRadiusMedium); /* Was sharp */
    border: var(--border-width-standard) solid var(--colorNeutralStroke2); /* Was --color-border-subtle */
    box-shadow: none;
}
/* For .instruction-text.expandable-instruction (from original HTML script) */
.instruction-text.expandable-instruction .instruction-toggle {
    color: var(--colorBrandForeground1); text-decoration: none; cursor: pointer;
    font-weight: var(--fontWeightMedium); margin-left: var(--spacingHorizontalXXS);
}
.instruction-text.expandable-instruction .instruction-full { display: none; }

/* Row Processor Simple Output Field / Table Gen Column Defs (dynamic parts) */
.rp-simple-output-field-wrapper, .table-gen-column-field-wrapper {
    display: flex; align-items: center; gap: var(--spacingHorizontalS);
    margin-bottom: var(--spacingVerticalS); /* Original was on wrapper or last-child */
}
.rp-simple-output-field-wrapper .ms-input, /* Textarea part */
.table-gen-column-field-wrapper .ms-input {
    flex-grow: 1; min-height: var(--input-height-standard); /* Shorter, from original */
    height: auto; padding: var(--spacingVerticalXS) var(--spacingHorizontalS); /* Compact padding */
    margin-bottom: 0; /* Override from .ms-input's default margin if any */
    line-height: 1.4;
}
/* Remove button already covered by .ms-button-small-icon */

/* Prompt Preview Box (Row Processor) */
.prompt-preview-box {
    background-color: var(--colorNeutralBackground2); /* Was --color-background-codeblock */
    border: var(--border-width-standard) solid var(--colorNeutralStroke1); /* Was --color-border-standard-original */
    border-radius: var(--borderRadiusMedium); /* Was --border-radius-small */
    padding: var(--spacingVerticalS);
    font-family: var(--font-family-monospace);
    font-size: var(--fontSizeBase200); /* Was --font-size-small */
    line-height: 1.5; min-height: 80px; max-height: 200px;
    overflow-y: auto; white-space: pre-wrap; word-break: break-all;
    color: var(--colorNeutralForeground1);
}
.prompt-preview-box span { display: inline; }
.prompt-segment--prefix { color: var(--colorBrandForeground1); }
.prompt-segment--row-content { color: var(--colorNeutralForeground1); }
.prompt-segment--rowCellKey { color: var(--colorStatusSuccessForeground1); font-weight: var(--fontWeightMedium); }
.prompt-segment--rowCellValue { color: var(--colorNeutralForeground2); }
.prompt-segment--rowSeparator { color: var(--colorNeutralForeground3); }
.prompt-segment--suffix { color: var(--colorBrandBackgroundPressed); } /* Slightly different blue */
.prompt-segment--multiOutputInstruction { color: var(--colorStatusWarningForeground1); font-style: italic; }
.prompt-segment--error { color: var(--colorStatusDangerForeground1); font-weight: var(--fontWeightSemibold); }

.prompt-navigation {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: var(--spacingVerticalS);
}
.prompt-navigation .ms-button { /* Style for Prev/Next buttons in prompt preview */
    width: auto; min-width: 60px; height: var(--input-height-standard);
    margin-bottom: 0;
}
#rpSampleInfo { /* Text between Prev/Next */
    font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2);
    text-align: center; flex-grow: 1;
}
#rpRefreshPreviewButton.ms-button { /* Original centering logic */
    width: auto; display: block; margin: var(--spacingVerticalS) auto 0 auto;
}
.prompt-legend { /* Original legend styles */
    margin-top: var(--spacingVerticalM); font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
    border-top: var(--border-width-standard) solid var(--colorNeutralStroke2); /* Was --color-border-light-original */
    padding-top: var(--spacingVerticalS); line-height: 1.6;
}
.prompt-legend strong { color: var(--colorNeutralForeground2); }
.prompt-legend span[class*="prompt-segment--"] {
    padding: 1px 3px; border-radius: var(--borderRadiusSmall); margin: 0 2px;
}
.prompt-legend .prompt-segment--prefix { background-color: var(--colorBrandForeground1); color: white; }
.prompt-legend .prompt-segment--rowCellKey { background-color: var(--colorStatusSuccessForeground1); color: white; }
.prompt-legend .prompt-segment--rowCellValue { background-color: var(--colorNeutralForeground2); color: white; }
.prompt-legend .prompt-segment--suffix { background-color: var(--colorBrandBackgroundPressed); color: white; }
.prompt-legend .prompt-segment--multiOutputInstruction { background-color: var(--colorStatusWarningForeground1); color: var(--colorNeutralForeground1); font-style: normal; }

/* JSON Schema Output (pre tag) */
#jsonProcSchemaOutput { /* Used for pre tag output */
    white-space: pre-wrap; word-wrap: break-word;
    background: var(--colorNeutralBackground2); /* Was --color-background-codeblock */
    padding: var(--spacingVerticalS); /* Was --spacing-s-alt */
    border-radius: var(--borderRadiusMedium); /* Was sharp */
    max-height: 300px; /* Was --container-max-height-standard */
    overflow-y: auto;
    font-family: var(--font-family-monospace);
    font-size: var(--fontSizeBase200); /* Was --font-size-small */
}

/* Unified Styling for Document/Research output snippet textareas */
#tableGenDocumentOutput, #appendRowsDocumentOutput, #structurerDocumentOutput,
#cellfiller-document-output, #tableeditor-doc-output, #tablereviewer-doc-output,
#tableGenResearchOutput, #appendRowsResearchOutput, #structurerResearchOutput,
#cellFillerResearchOutputTextElement, #tableEditorResearchOutputTextElement,
#tableReviewerResearchOutputTextElement {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: var(--colorNeutralBackground1); /* Ensures white background */
    padding: var(--spacingHorizontalS);
    border-radius: var(--borderRadiusMedium);
    max-height: 150px; /* A consistent height for all */
    overflow-y: auto;
    font-size: var(--fontSizeBase300); /* Match standard textarea */
    line-height: 1.5;
    color: var(--colorNeutralForeground1); /* Standard text color */
    border: var(--border-width-standard) solid var(--colorNeutralStroke1); /* Standard border */
    resize: vertical;
    min-height: 80px; /* Give it some initial height */
}

/* Cell Filler Column Selector Container (original styling adapted) */
#cellFillerColumnSelectorContainer {
  max-height: 150px; /* Was --container-max-height-small */
  overflow-y: auto;
  border: var(--border-width-standard) solid var(--colorNeutralStroke1); /* Was --color-border-medium-gray-original */
  padding: var(--spacingVerticalM); /* Was --spacing-s-alt */
  margin-top: var(--spacingVerticalS);
  border-radius: var(--borderRadiusMedium); /* Was sharp */
  background-color: var(--colorNeutralBackground2); /* Was --color-background-container-light-gray-original */
  /* display: none; JS controlled */
}
#cellFillerColumnSelectorContainer label.ms-label { /* Labels for checkboxes inside */
  display: block; margin-bottom: var(--spacingVerticalXS); font-weight: var(--fontWeightRegular);
}
#cellFillerColumnSelectorContainer input[type="checkbox"].ms-input {
  margin-right: var(--spacingHorizontalS);
}

/* Hide specific original buttons if replaced by PreviewService buttons */
/* #tableGeneratorPreviewButtons:not(:empty) + div #stopTableGenButton { display: none !important; } */
/* This needs to be handled by JS logic now: if preview buttons are shown, hide the main stop button. */


/* Visually Hidden (from template, useful utility) */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Loading Spinner (from template) */
.loading { display: inline-flex; align-items: center; gap: var(--spacingHorizontalS); }
.loading-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--colorNeutralStroke1);
    border-top-color: var(--colorBrandForeground1); /* Only top border colored for spinner effect */
    border-radius: var(--borderRadiusCircular);
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Responsive Adjustments (from template) */
@media (max-width: 768px) {
    .ms-header-content { gap: var(--spacingHorizontalS); }
    .ms-header-title { font-size: var(--fontSizeBase300); }
    .ms-content { padding: var(--spacingVerticalL); }
    .feature-icon-large { width: 32px; height: 32px; font-size: var(--fontSizeBase400); }
    .feature-title { font-size: var(--fontSizeBase500); }
    .quick-action { padding: var(--spacingVerticalM); gap: var(--spacingHorizontalM); }
    .button-group:not(.horizontal-group) { flex-direction: column; } /* Allow specific groups to stay horizontal */
    .button-group:not(.horizontal-group) .ms-button { width: 100%; }
}

/* High Contrast (from template) */
@media (prefers-contrast: high) {
    .ms-button, .ms-input, .ms-select, .collapsible, .quick-action, .enhanced-preview-container, .debug-log-container {
        border-width: 2px;
        border-color: windowText; /* Or appropriate system color */
    }
    .ms-button-primary { background: windowText; color: canvas; }
    /* Add more high-contrast specific overrides as needed */
}
/* View-switching styles for collapsible sections */
.feature-section.in-focus-mode > .collapsible {
    display: none; /* Hide all collapsibles in a focused section */
}

.feature-section.in-focus-mode > .collapsible.focus-active {
    display: flex; /* was block */
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden; /* Contain child with overflow:auto */
}
.feature-section.in-focus-mode > .feature-header {
    display: none;
}

.feature-section.in-focus-mode {
    max-width: none; /* Allow focused features to use full width */
    margin: 0; /* Remove auto margin to prevent centering */
    flex-grow: 1;
}
/* --- Toggle Switch Styles --- */
.ms-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: var(--spacingVerticalS) 0;
    width: 100%;
}
.ms-form-group > .input-label-wrapper {
    margin-bottom: 0;
}

.ms-toggle > span:first-child {
    flex-grow: 1;
    padding-right: var(--spacingHorizontalM);
}

.ms-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ms-toggle .ms-toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.ms-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--colorNeutralBackground4);
    transition: .4s;
    border-radius: 24px;
}

.ms-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ms-toggle-checkbox:checked + .ms-toggle-slider {
    background-color: var(--colorBrandBackground);
}

.ms-toggle-checkbox:focus-visible + .ms-toggle-slider {
    outline: 2px solid var(--colorBrandBackground);
    outline-offset: 2px;
}

.ms-toggle-checkbox:checked + .ms-toggle-slider:before {
    transform: translateX(20px);
}

/* Special handling for toggles inside headers */
.collapsible-header .ms-toggle {
    padding: 0;
    width: auto;
    margin-left: auto;
}

.collapsible-header .ms-toggle > span:first-child {
    display: none; /* Hide text label when it's already in the header */
}
/* --- Feature Description Tooltip Styles --- */
.feature-header-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    width: 100%;
}

.feature-title-container {
    flex-grow: 1;
}
.feature-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

.close-feature-button {
    width: 24px;
    height: 24px;
    font-size: 18px; /* Make the 'x' larger */
    line-height: 24px; /* Center the 'x' */
    padding: 0;
    color: var(--colorNeutralForeground2);
    border-radius: var(--borderRadiusMedium);
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--durationFast) var(--curveEasyEase);
}

.close-feature-button:hover {
    background-color: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground1);
    transform: scale(1.1);
}

.settings-feature-button {
    width: 24px;
    height: 24px;
    font-size: 16px; /* Smaller icon size */
    line-height: 24px;
    padding: 0;
    color: var(--colorNeutralForeground2);
    border-radius: var(--borderRadiusMedium);
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--durationFast) var(--curveEasyEase);
}

.settings-feature-button:hover {
    background-color: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground1);
    transform: scale(1.1);
}

.settings-feature-button.active {
    background-color: var(--colorBrandBackground);
    color: white;
    border-color: var(--colorBrandBackground);
}
.collapsible-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

.focus-active .collapsible-header-actions {
    display: flex; /* Shown only when the feature is active */
}

.collapsible-toggle-button {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS); /* Reduced gap */
    flex-grow: 1;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    color: inherit;
}

.collapsible-toggle-button:focus-visible {
    outline: 2px solid var(--colorBrandForeground1);
    outline-offset: -2px; /* Inside to avoid layout shift */
    border-radius: var(--borderRadiusMedium);
}

.close-feature-button:focus-visible {
    outline: 2px solid var(--colorBrandForeground1);
    outline-offset: 2px;
}

.feature-description-tooltip {
    position: relative;
    display: inline-block;
    margin-left: var(--spacingHorizontalS);
    flex-shrink: 0; /* Prevent the icon from shrinking */
}

.feature-description-tooltip .info-icon-trigger {
    font-family: "Segoe UI", "Apple SD Gothic Neo", "Helvetica Neue", "Arial", sans-serif;
    font-size: var(--fontSizeBase200); /* Smaller font */
    font-weight: bold;
    color: var(--colorBrandForeground1);
    border: 1px solid var(--colorBrandForeground1);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
    user-select: none;
}

.feature-description-tooltip:hover .info-icon-trigger {
    background-color: var(--colorBrandBackgroundHover);
    color: var(--colorNeutralBackground1); /* White text on hover */
    border-color: var(--colorBrandBackgroundHover);
    transform: scale(1.1);
}

.feature-description-tooltip .tooltip-text {
    visibility: hidden;
    width: 280px; /* Wider tooltip */
    background-color: var(--colorNeutralBackground2); /* Slightly off-white */
    color: var(--colorNeutralForeground1);
    text-align: left;
    border-radius: var(--borderRadiusMedium); /* Was M */
    padding: var(--spacingVerticalM);
    position: absolute;
    z-index: 100;
    bottom: 130%; /* Position the tooltip above the icon */
    right: -10px; /* Align to the right of the icon */
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s var(--curveEasyEase);
    box-shadow: var(--shadow8); /* Was M */
    border: 1px solid var(--colorNeutralStroke1);
    font-size: var(--fontSizeBase300);
    line-height: 1.5;
    transform: translateY(5px); /* Start slightly lower */
    pointer-events: none; /* Prevent tooltip from capturing mouse events */
}

.feature-description-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Move to final position */
}

/* Arrow for the tooltip */
.feature-description-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 10px; /* Position arrow on the right */
    border-width: 6px;
    border-style: solid;
    border-color: var(--colorNeutralBackground2) transparent transparent transparent;
}

[data-theme="dark"] .feature-description-tooltip .tooltip-text::after {
     border-color: var(--colorNeutralBackground2) transparent transparent transparent;
}

/* Smaller tooltip variant for settings toggles */
.feature-description-tooltip.tooltip-small .info-icon-trigger {
    font-size: var(--fontSizeBase200); /* Smaller font size */
    width: 18px; /* Smaller width */
    height: 18px; /* Smaller height */
    line-height: 18px; /* Center the 'i' */
}

.feature-description-tooltip.tooltip-small .tooltip-text {
    font-size: var(--fontSizeBase200); /* Smaller font size for the tooltip text */
    padding: var(--spacingVerticalXS) var(--spacingHorizontalS); /* Tighter padding */
    width: 220px; /* Adjust width if necessary */
}

/* --- Sticky Footer & Scrolling Content Enhancements --- */
.ms-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--colorNeutralBackground2);
    border-top: 1px solid var(--colorNeutralStroke1);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    box-shadow: 0 -4px 12px -4px rgba(0,0,0,0.1);
    z-index: 200;
    transition: background-color var(--durationNormal) var(--curveEasyEase);
}

[data-theme="dark"] .ms-footer {
    background: var(--colorNeutralBackground3);
    box-shadow: 0 -4px 12px -4px rgba(0,0,0,0.25);
}

.footer-content > .ms-message,
.footer-content > .enhanced-progress-container {
    margin-bottom: var(--spacingVerticalM);
}

.footer-content > *:last-child {
    margin-bottom: 0;
}

.collapsible.focus-active {
    /* Remove the card-like appearance when a feature is active */
    border: none;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
}

.collapsible.focus-active > .collapsible-header {
    display: none; /* Header is cloned into the top bar */
}

.collapsible.focus-active > .collapsible-content {
    flex-grow: 1;
    overflow-y: auto;
    max-height: initial !important;
    position: relative;
    padding: var(--spacingVerticalM) 0 100px 0; /* Add padding to avoid content being hidden by the sticky footer */
    border: none;
    background-color: transparent;
    /* No top border needed, as the active-feature-header has a bottom border */
}

/* --- Active Feature Header --- */
.active-feature-header {
    display: none; /* Hidden by default, shown by JS */
    background: var(--colorNeutralBackground2);
    border-bottom: 1px solid var(--colorNeutralStroke1);
    padding: 0 var(--spacingHorizontalL);
    width: 100%;
    flex-shrink: 0;
}

.active-feature-header .collapsible-header {
    background: transparent;
    padding: var(--spacingVerticalS) var(--spacingHorizontalL);
    border-radius: 0;
    min-height: auto;
    cursor: default;
    width: 100%;
}

.active-feature-header .collapsible-toggle-button {
    cursor: pointer;
}

.active-feature-header .quick-action-icon {
    width: 20px;
    height: 20px;
    font-size: var(--fontSizeBase300);
}

.active-feature-header .quick-action-content h4 {
    margin-bottom: 0;
    font-weight: var(--fontWeightMedium);
    font-size: var(--fontSizeBase300);
}

.active-feature-header .quick-action-content p {
    display: none;
}

.active-feature-header .collapsible-header-actions {
    display: flex;
}

/* Hide description and adjust title in focused feature header for a compact look */
.collapsible.focus-active .quick-action-content p {
    display: none;
}

.collapsible.focus-active .quick-action-content h4 {
    margin-bottom: 0;
    font-weight: var(--fontWeightMedium); /* Make it slightly less bold */
    font-size: var(--fontSizeBase300); /* Match smaller title size */
}
/* ==========================================================================
   Dynamic List Component
   ========================================================================== */

.dynamic-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalS);
    padding: var(--spacingVerticalM);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--colorNeutralBackground2);
}

.dynamic-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacingVerticalS);
}

.dynamic-list-items-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalS);
}

.dynamic-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    animation: fadeIn 0.3s var(--curveEasyEase);
}

.dynamic-list-item-fields {
    display: flex;
    flex-direction: row;
    gap: var(--spacingHorizontalS);
    flex-grow: 1;
    align-items: flex-end;
}

.dynamic-list-item .ms-form-group {
    margin-bottom: 0;
    flex-grow: 1; /* Default to equal growth */
}

.dynamic-list-item .dynamic-list-field-description {
    flex-grow: 3; /* Make description field three times as large */
}

.dynamic-list-item .ms-label {
    font-size: var(--fontSizeBase200);
    margin-bottom: var(--spacingVerticalXS);
    font-weight: var(--fontWeightRegular);
    color: var(--colorNeutralForeground2);
    display: none;
}

.dynamic-list-add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacingHorizontalS);
    width: fit-content;
    align-self: flex-start;
    margin-top: var(--spacingVerticalS);
}

.dynamic-list-remove-button {
    color: var(--colorNeutralForeground2);
}

.dynamic-list-remove-button:hover {
    color: var(--colorPaletteRedForeground1);
    background-color: var(--colorPaletteRedBackground2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* === Layout Selector (SVG Grid) === */
.layout-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacingHorizontalS);
    margin-top: var(--spacingVerticalS);
}

.layout-selector-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacingVerticalS);
    padding: var(--spacingVerticalM);
    border: 2px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--colorNeutralBackground2);
    cursor: pointer;
    transition: all var(--durationFast) var(--curveEasyEase);
    text-align: center;
    position: relative;
}

.layout-selector-item:hover {
    border-color: var(--colorBrandForeground2);
    background-color: var(--colorNeutralBackground3);
    transform: translateY(-2px);
    box-shadow: var(--shadow4);
}

.layout-selector-item:focus-visible {
    outline: 2px solid var(--colorBrandForeground1);
    outline-offset: 2px;
}

.layout-selector-item[aria-checked="true"] {
    border-color: var(--colorBrandBackground);
    background-color: var(--color-accent-primary-selected-bg-original);
    box-shadow: var(--shadow8);
    transform: translateY(-2px);
}

.layout-selector-item[aria-checked="true"] svg {
    color: var(--colorBrandBackground);
}

.layout-selector-item[aria-checked="true"] span {
    color: var(--colorBrandForeground1);
    font-weight: var(--fontWeightSemibold);
}

.layout-selector-item svg {
    width: 48px;
    height: 36px;
    color: var(--colorNeutralForeground2);
    transition: color var(--durationFast) var(--curveEasyEase);
}

.layout-selector-item span {
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground1);
    font-weight: var(--fontWeightMedium);
    line-height: 1.2;
}
.dynamic-list-item.dragging {
    opacity: 0.5;
    background: var(--colorNeutralBackground4);
}

.dynamic-list-drag-handle {
    cursor: move;
    color: var(--colorNeutralForeground2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacingHorizontalS);
    align-self: stretch;
    background-color: var(--colorNeutralBackground3);
    border-right: 1px solid var(--colorNeutralStroke1);
}

.dynamic-list-drag-handle:hover {
    background-color: var(--colorNeutralBackground4);
    color: var(--colorNeutralForeground1);
}
.dynamic-list-static-header {
    display: flex;
    gap: var(--spacingHorizontalS);
    padding: 0 var(--spacingHorizontalS) var(--spacingVerticalS) calc(var(--spacingHorizontalS) * 2 + 16px);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground2);
    border-bottom: 1px solid var(--colorNeutralStroke2);
    margin-bottom: var(--spacingVerticalS);
}

.dynamic-list-header-name,
.dynamic-list-field-name {
    flex: 1;
}

.dynamic-list-header-description,
.dynamic-list-field-description {
    flex: 3;
}
/* === Section Header for Define Output === */
.section-header {
    padding-bottom: var(--spacingVerticalM);
    margin-bottom: var(--spacingVerticalL);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.section-title {
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
    margin: 0;
}

/* === Table Definition Group === */
.table-definition-group {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge);
    margin-bottom: var(--spacingVerticalL);
    overflow: hidden;
    animation: fadeIn 0.3s var(--curveEasyEase);
    transition: all 0.2s ease-in-out;
}

.table-definition-group.collapsed .dynamic-list {
    display: none;
}

.table-definition-group-header {
    display: flex;
    align-items: center;
    padding: var(--spacingVerticalS) var(--spacingHorizontalL);
    background: var(--colorNeutralBackground2);
    border-bottom: 1px solid var(--colorNeutralStroke1);
    gap: var(--spacingHorizontalM);
}

.table-definition-group.collapsed .table-definition-group-header {
    border-bottom: none;
}

.table-definition-group-order-controls {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

.table-definition-group-number {
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground2);
    font-size: 14px;
    min-width: 20px;
    text-align: center;
}

.table-definition-group-button-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.table-definition-group-move-button {
    background: none;
    border: 1px solid var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground2);
    cursor: pointer;
    width: 22px;
    height: 16px;
    border-radius: var(--borderRadiusSmall);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all var(--durationFaster) var(--curveEasyEase);
}

.table-definition-group-move-button:hover {
    background-color: var(--colorNeutralBackground3);
    color: var(--colorBrandForeground1);
    border-color: var(--colorBrandForeground1);
}

.table-definition-group-move-button:disabled {
    color: var(--colorNeutralStroke2);
    cursor: not-allowed;
    background-color: transparent;
    border-color: var(--colorNeutralStroke2);
}

.table-definition-group-name-input {
    flex-grow: 1;
}

.per-table-layout-selector {
    display: flex;
    gap: var(--spacingHorizontalXS);
    background-color: var(--colorNeutralBackground2);
    border-radius: var(--borderRadiusMedium);
    padding: var(--spacingHorizontalXS);
    flex-shrink: 0;
}

.per-table-layout-item {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--borderRadiusSmall);
    cursor: pointer;
    width: 32px;
    height: 28px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--durationFaster) var(--curveEasyEase);
}

.per-table-layout-item svg {
   width: 100%;
   height: 100%;
   color: var(--colorNeutralForeground2);
   transition: color var(--durationFaster) var(--curveEasyEase);
}

.per-table-layout-item:hover svg {
    color: var(--colorNeutralForeground1);
}

.per-table-layout-item:hover {
   background-color: var(--colorNeutralBackground3);
}

.per-table-layout-item[aria-checked="true"] {
    background-color: var(--colorBrandBackground);
    border-color: var(--colorBrandStroke1);
}

.per-table-layout-item[aria-checked="true"] svg {
   color: var(--colorNeutralForegroundOnBrand);
}

.table-definition-group-actions {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
    margin-left: auto;
}

.table-definition-group-collapse-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorNeutralForeground2);
    border-radius: var(--borderRadiusSmall);
    width: 24px;
    height: 24px;
    transition: all var(--durationFaster) var(--curveEasyEase);
}

.table-definition-group-collapse-button:hover {
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground3);
}

.table-definition-group-collapse-button svg {
    transition: transform 0.2s ease-in-out;
}

.table-definition-group-remove-button {
    background: none;
    border: none;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: var(--borderRadiusSmall);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: var(--fontWeightRegular);
    line-height: 1;
    transition: all var(--durationFast) var(--curveEasyEase);
}

.table-definition-group-remove-button:hover {
    background-color: var(--colorStatusDangerBackground1);
    color: var(--colorStatusDangerForeground1);
    transform: scale(1.1);
}

.table-definition-group .dynamic-list {
    border: none;
    padding: var(--spacingVerticalL);
    background-color: transparent;
}

/* === Button Improvements === */
#table-gen-add-table-button {
    width: 100%;
    margin-top: 0;
    justify-content: center;
}

#rpAddSimpleOutputFieldButton {
    width: 100%;
    justify-content: center;
}
 
.ms-button .ms-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Fallback for font icons */
}

.ms-button .ms-button-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.ms-button-primary .ms-button-icon {
    color: white;
}

.ms-button-danger .ms-button-icon {
    color: white;
}

.ms-button-secondary .ms-button-icon {
    color: var(--colorNeutralForeground1);
}

.ms-button-icon.icon-char {
    font-size: 20px;
    line-height: 1;
}
/* === Use Case Selector === */
.use-case-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacingHorizontalS);
    margin-bottom: var(--spacingVerticalL);
}

.use-case-selector input[type="radio"] {
    display: none; /* Hide the actual radio button */
}

.use-case-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacingHorizontalM);
    padding: var(--spacingVerticalM);
    border: 2px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--colorNeutralBackground2);
    cursor: pointer;
    transition: all var(--durationFast) var(--curveEasyEase);
    text-align: left;
    position: relative;
    min-height: 60px;
}

.use-case-item:hover {
    border-color: var(--colorBrandForeground2);
    background-color: var(--colorNeutralBackground3);
    transform: translateY(-2px);
    box-shadow: var(--shadow4);
}

.use-case-selector input[type="radio"]:checked + .use-case-item {
    border-color: var(--colorBrandBackground);
    background-color: var(--color-accent-primary-selected-bg-original);
    box-shadow: var(--shadow8);
    transform: translateY(-2px);
}

.use-case-selector input[type="radio"]:focus-visible + .use-case-item {
    outline: 2px solid var(--colorBrandForeground1);
    outline-offset: 2px;
}

.use-case-icon {
    width: 32px;
    height: 32px;
    color: var(--colorNeutralForeground2);
    transition: color var(--durationFast) var(--curveEasyEase);
    flex-shrink: 0;
}

.use-case-selector input[type="radio"]:checked + .use-case-item .use-case-icon {
    color: var(--colorBrandBackground);
}

.use-case-text {
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground1);
    font-weight: var(--fontWeightMedium);
    line-height: 1.2;
}

.use-case-selector input[type="radio"]:checked + .use-case-item .use-case-text {
    color: var(--colorBrandForeground1);
    font-weight: var(--fontWeightSemibold);
}
/* --- New Table Generator Workflow Styling --- */
.generator-workflow {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Increased space between steps */
}

.workflow-step {
    background-color: transparent; /* Make steps blend with the main content area background */
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge);
    padding: var(--spacingHorizontalL);
    box-shadow: var(--shadow4);
    transition: box-shadow 0.2s ease-in-out;
}

.workflow-step:focus-within {
    border-color: var(--colorBrandForeground1);
    box-shadow: var(--shadow8);
}

.workflow-step-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fontSizeBase500);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
    margin: 0 0 var(--spacingVerticalL) 0;
    padding-bottom: var(--spacingVerticalM);
    border-bottom: 1px solid var(--colorNeutralStroke1);
}

.step-number {
    background-color: var(--colorBrandBackground);
    color: white;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightBold);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Container for subsections like document processing or research */
.workflow-step-info-only {
    padding-top: var(--spacingVerticalS);
    padding-bottom: var(--spacingVerticalS);
    text-align: center;
}

.workflow-step-info-only .workflow-step-title {
    margin-bottom: var(--spacingVerticalS);
}

.workflow-step-info-only p {
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightMedium);
    color: var(--colorNeutralForeground1);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}
.sub-section-container {
    display: none; /* Initially hidden, controlled by JS toggle */
    padding: var(--spacingVerticalM); 
    border: 1px solid var(--colorNeutralStroke1); 
    border-radius: var(--borderRadiusMedium); 
    background: var(--colorNeutralBackground2); 
    margin-top: var(--spacingVerticalM);
    animation: fadeIn 0.3s ease-in-out;
}

/* Tweak the on-demand context buttons for better alignment and size */
#table-generator-start-document-extraction-button,
#table-generator-start-deep-research-button {
    width: auto; /* Make button fit its content */
    margin-top: var(--spacingVerticalS);
}

/* Ensure the AI planning button has an icon and is styled nicely */
#planTablesButton {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    width: auto;
}
/* Flatten the UI for the Row Processor's Plan Output section */
#rp-step-2-plan #rpSimpleModeContainer .dynamic-list {
    border: none;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}
/* Flatten the UI for the Row Processor's Plan Output section */
#rp-step-2-plan #rpMultipleOutputsConfigContainer,
#rp-step-2-plan #rpSimpleModeContainer.dynamic-list {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}
/* State management for Document Content sections */
.document-content-manager .document-content-present-state {
    display: none;
}

.document-content-manager.has-content .document-upload-state {
    display: none;
}

.document-content-manager.has-content .document-content-present-state {
    display: block;
}

/* ==========================================================================
   Research Content Manager Component
   ========================================================================== */

/* By default, the results state is hidden */
.research-content-manager .research-results-state {
    display: none;
}

/* When the manager has results, hide the input state */
.research-content-manager.has-results .research-input-state {
    display: none;
}

/* When the manager has results, show the results state */
.research-content-manager.has-results .research-results-state {
    display: block;
}

/* === Selection Context Display === */
.selection-context-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalS);
    background-color: var(--colorNeutralBackground2);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    padding: var(--spacingVerticalM);
    margin-top: var(--spacingVerticalS);
}

.selection-context-item {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    background-color: var(--colorNeutralBackground1);
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    border-radius: var(--borderRadiusSmall);
    border: 1px solid var(--colorNeutralStroke2);
    font-size: var(--fontSizeBase200);
    animation: fadeIn 0.3s var(--curveEasyEase);
}

.selection-sheet-name {
    font-weight: var(--fontWeightSemibold);
    color: var(--colorBrandForeground1);
    flex-shrink: 0;
}

.selection-range-address {
    font-family: var(--font-family-monospace);
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground3);
    padding: 2px var(--spacingHorizontalS);
    border-radius: var(--borderRadiusSmall);
}
.column-selector-container {
    margin-bottom: var(--spacingVerticalM);
    padding: var(--spacingVerticalS);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--colorNeutralBackground2);
}

.column-selector-group {
    max-height: 180px;
    overflow-y: auto;
    padding-right: var(--spacingHorizontalS);
}

.column-selector-item {
    display: block;
    margin-bottom: var(--spacingVerticalS);
}

.column-selector-item .ms-label {
    display: flex;
    align-items: center;
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    border-radius: var(--borderRadiusSmall);
    transition: background-color var(--durationFast) ease-in-out;
    cursor: pointer;
}

.column-selector-item .ms-label:hover {
    background-color: var(--colorNeutralBackground3);
}

.column-selector-item .ms-checkbox {
    margin-right: var(--spacingHorizontalM);
}

.column-selector-item.all-selector {
    border-bottom: 1px solid var(--colorNeutralStroke1);
    padding-bottom: var(--spacingVerticalS);
    margin-bottom: var(--spacingVerticalS);
}
/* ==========================================================================
   13. Enhanced Table Editor Preview Styles
   ========================================================================== */

.enhanced-preview-table th.preview-row-index-header {
    background-color: var(--colorNeutralBackground4);
    color: var(--colorNeutralForeground1);
    font-weight: var(--fontWeightSemibold);
    min-width: 50px;
    text-align: center;
}

.enhanced-preview-table td.preview-row-index {
    background-color: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground2);
    font-weight: var(--fontWeightMedium);
    text-align: center;
    font-family: var(--font-family-monospace);
}

.enhanced-preview-table th.editor-original-header,
.enhanced-preview-table th.editor-new-header {
    background-color: var(--colorNeutralBackground3);
}

.enhanced-preview-table th.editor-original-header {
    color: var(--colorNeutralForeground2);
}

.enhanced-preview-table th.editor-new-header {
    color: var(--colorNeutralForeground1);
    background-color: var(--colorStatusInfoBackground1);
}

.enhanced-preview-table td.editor-original-value {
    background-color: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground2);
}

.enhanced-preview-table td.editor-new-value {
    background-color: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
}

.enhanced-preview-table td.preview-cell--changed {
    background-color: var(--colorStatusWarningBackground1) !important;
    font-weight: var(--fontWeightMedium);
    color: var(--colorNeutralForeground1) !important;
}

.enhanced-preview-table td.editor-context-value {
    background-color: var(--colorNeutralBackground2);
    font-weight: var(--fontWeightRegular);
}
/* ==========================================================================
   AI Planning Control Group (Table Generator)
   ========================================================================== */

.ai-planning-control-group {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: stretch; /* Stretch items to fill width */
    gap: var(--spacingVerticalM); /* Use vertical spacing */
    margin-bottom: var(--spacingVerticalM);
}

.ai-planning-control-group .ms-button {
    width: 100%; /* Make button full width */
    justify-content: center; /* Center button content */
}

.table-layout-counters {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    background-color: var(--colorNeutralBackground2);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    padding: var(--spacingHorizontalXS);
}

.layout-counter {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
    background-color: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusSmall);
    padding: 2px 4px;
}

.layout-counter svg {
    width: 20px;
    height: 20px;
    color: var(--colorNeutralForeground2);
}

.layout-count-input {
    width: 36px; /* Compact width */
    height: 24px;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: inherit;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
    outline: none;
    -moz-appearance: textfield; /* Hide spinners in Firefox */
}

.layout-count-input::-webkit-outer-spin-button,
.layout-count-input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide spinners in Chrome, Safari, etc. */
    margin: 0;
}
.layout-stepper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stepper-btn {
    background: none;
    border: 1px solid var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground2);
    cursor: pointer;
    width: 22px;
    height: 12px;
    border-radius: var(--borderRadiusSmall);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    transition: all var(--durationFaster) var(--curveEasyEase);
}

.stepper-btn:hover {
    background-color: var(--colorNeutralBackground3);
    color: var(--colorBrandForeground1);
    border-color: var(--colorBrandForeground1);
}
/* ==========================================================================
   14. Table Generator - Table Definition Enhancements
   ========================================================================== */

/* The new body container now only handles layout (padding and spacing) */
.table-definition-group-body {
    padding: var(--spacingVerticalL) var(--spacingHorizontalL);
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalL); /* This creates the space between the description and the column list */
}

.table-definition-group.collapsed .table-definition-group-body {
    display: none;
}

/* Specific styling for the new description group */
.table-description-group {
    margin-bottom: 0; /* Override default form group margin */
}

/* Style the label to match the screenshot's appearance */
.table-description-group .ms-label {
    font-weight: var(--fontWeightSemibold);
    font-size: var(--fontSizeBase300);
    margin-bottom: var(--spacingVerticalS);
}

.table-definition-description-input {
    min-height: 60px;
    resize: vertical;
    font-size: var(--fontSizeBase300);
    line-height: 1.5;
}

/* Ensure the column list inside the body doesn't have extra padding or borders */
.table-definition-group-body .dynamic-list {
    padding: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
}