:root {
  /* Standard Color Schema - All components must use these exact colors */
  --bg-main: #1E1E1E;        /* Background */
  --bg-primary: #1E1E1E;     /* Primary background */
  --bg-secondary: #252526;   /* Cards/Content */
  --bg-tertiary: #2D2D2D;    /* Nested elements, inputs - from post-implementation-docs.html */
  --bg-hover: #3C3C3C;       /* Hover states - from post-implementation-docs.html */
  --card-bg: #252526;        /* Card background */
  --text-primary: #D4D4D4;   /* Text Primary - updated to match approved style */
  --text-secondary: #808080; /* Text Secondary - updated to match approved style */
  --text-muted: #6A6A6A;     /* Muted/disabled text */
  --border-color: #404040;   /* Border - updated to match approved style */
  --btn-bg: #3E3E42;         /* Button Background */
  --btn-hover: #505050;      /* Button Hover */
  --hover-color: #505050;    /* Hover state */
  --accent-primary: #569CD6; /* Accent/Links */
  --accent-blue: #569CD6;    /* Primary actions, links */
  --accent-secondary: #CE9178; /* Secondary accent */
  --accent-green: #4EC9B0;   /* Success, positive actions */
  --accent-orange: #CE9178;  /* Warnings, caution */
  --accent-purple: #C586C0;  /* Special indicators */
  --accent-yellow: #DCDCAA;  /* Highlights */
  --accent-red: #F44747;     /* Errors, danger, delete */
  --success: #4EC9B0;        /* Success */
  --danger: #F48771;         /* Error */
  --warning: #DCDCAA;        /* Warning */

  /* Legacy color mappings for backward compatibility */
  --quickwin: #569CD6;
  --highpriority: #F48771;
  --medium: #CE9178;
  --advanced: #569CD6;
  --special: #CE9178;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-primary);
    min-height: 100vh;
    color: var(--text-primary);
}

.dashboard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    background: var(--bg-secondary);
    padding: 15px 30px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
}

.header-content {
    flex: 1;
}

.header-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.header-content h1 i {
    color: var(--accent-blue);
    margin-right: 1rem;
}

/* Beta Badge - Indicates this is not an official release */
.beta-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-green);
    background: rgba(78, 201, 176, 0.15);
    border: 1.5px solid rgba(78, 201, 176, 0.5);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    margin-left: 1rem;
    vertical-align: middle;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    animation: beta-pulse 3s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(78, 201, 176, 0.2);
}

/* Temporary Free Badge - For modules with limited-time free access */
.temp-free-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--success);
    background: rgba(78, 201, 176, 0.15);
    border: 1.5px solid rgba(78, 201, 176, 0.5);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Subtle animation to draw attention */
@keyframes beta-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(78, 201, 176, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(78, 201, 176, 0.4);
    }
}

/* Version text - Matches BETA badge color */
.app-footer__version {
    color: var(--accent-orange);
}

.header-content p {
    font-size: 1.35rem;
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.status-indicators {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* User Profile Section */
/* Issue 1 Fix (2026-01-06): Enhanced Safari compatibility */
.user-profile {
    display: -webkit-flex;  /* Safari fallback */
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    /* Safari visibility fix - ensure smooth transitions */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Safari-specific visibility state for profile when shown */
.user-profile.profile-visible {
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Gap fallback for Safari < 14.1 */
.user-profile > * {
    margin-right: 0.5rem;
}
.user-profile > *:last-child {
    margin-right: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-info i {
    font-size: 2rem;
    color: var(--accent-blue);
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-email {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.user-tier {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    background: rgba(78, 201, 176, 0.2);
    border-radius: 4px;
    display: inline-block;
}

.user-tier.tier-free {
    background: rgba(78, 201, 176, 0.2);
    color: var(--accent-green);
}

.user-tier.tier-professional {
    background: rgba(86, 156, 214, 0.2);
    color: var(--accent-blue);
}

.user-tier.tier-enterprise {
    background: rgba(220, 220, 170, 0.2);
    color: var(--accent-yellow);
}

.user-tier.tier-admin {
    background: rgba(244, 71, 71, 0.2);
    color: var(--accent-red);
}

.logout-btn {
    background: rgba(128, 128, 128, 0.15);
    color: var(--text-secondary, #808080);
    border: 1px solid rgba(128, 128, 128, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logout-btn:hover {
    background: rgba(128, 128, 128, 0.25);
    border-color: rgba(128, 128, 128, 0.5);
    color: var(--text-primary, #D4D4D4);
    transform: translateY(-2px);
}

.upgrade-btn {
    background: rgba(86, 156, 214, 0.15);
    color: var(--accent-blue);
    border: 1px solid rgba(86, 156, 214, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

.upgrade-btn:hover {
    background: rgba(86, 156, 214, 0.25);
    border-color: rgba(86, 156, 214, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(86, 156, 214, 0.2);
}

.upgrade-btn i {
    color: var(--accent-yellow);
}

/* Locked Module Overlay */
.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent; /* Fully transparent - no overlay background */
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: flex-end; /* Align to right */
    padding: 0.75rem; /* Padding from edges */
    border-radius: 12px;
    z-index: 10;
    pointer-events: none; /* Allow clicks to pass through to button */
}

.lock-icon {
    text-align: center;
    background: rgba(30, 30, 30, 0.9); /* Dark background for the icon badge */
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(244, 135, 113, 0.4);
    animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 25px;
    border: 1px solid var(--border-color);
}

.status-green {
    color: var(--accent-green);
}

.status-yellow {
    color: var(--accent-orange);
    animation: pulse 2s ease-in-out infinite;
}

.status-red {
    color: var(--accent-red);
    animation: pulse 1.5s ease-in-out infinite;
}

.status-gray {
    color: var(--text-secondary);
}

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

/* Status Toggle Icon */
.status-toggle-icon {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.status-toggle-icon.expanded {
    transform: rotate(180deg);
}

/* Status Details Collapse */
.status-details-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.status-details-collapse.expanded {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}

.status-details-content {
    padding: 1.5rem 2rem;
}

.status-details-content h3 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-details-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.status-detail-item {
    background: var(--bg-primary);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-detail-item.critical {
    border-left-color: var(--accent-red);
}

.status-detail-item.warning {
    border-left-color: var(--accent-orange);
}

.status-detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.status-detail-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-detail-badge.critical {
    background: rgba(244, 71, 71, 0.2);
    color: var(--accent-red);
}

.status-detail-badge.warning {
    background: rgba(206, 145, 120, 0.2);
    color: var(--accent-orange);
}

.status-detail-error {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
    padding-left: 1rem;
}

.status-summary {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-summary-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.main-content {
    padding: 2rem;
    padding-top: 3rem;
    padding-bottom: 0.25rem; /* Minimal bottom padding to bring footer closer */
    position: relative;
}

/* Subtle separator between Hero and Tools */
.main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(86, 156, 214, 0.3) 50%,
        transparent 100%);
}

.tool-category {
    margin-bottom: 3rem;
}

/* Remove margin from last section to reduce gap before footer */
.tool-category:last-of-type {
    margin-bottom: 0 !important;
}

.tool-category h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-subtitle {
    color: var(--accent-blue);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    margin-top: -0.25rem;
    opacity: 1;
    padding: 0.5rem 1rem;
    background: rgba(86, 156, 214, 0.08);
    border-left: 3px solid var(--accent-blue);
    border-radius: 4px;
    display: inline-block;
}

.tools-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: stretch;
    padding-top: 8px; /* Add space for hover lift effect */
}

.tool-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--advanced);
}

.tool-card:hover {
    border-color: #569CD6;
    transform: translateY(-2px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(86, 156, 214, 0.3);
}

.priority-high::before {
    background: var(--highpriority);
}

.priority-medium::before, .category-medium::before {
    background: var(--medium);
}

.priority-low::before, .category-quickwin::before {
    background: var(--quickwin);
}

.priority-high.tool-card:hover {
    border: 1px solid var(--highpriority);
}

.priority-medium.tool-card:hover, .category-medium.tool-card:hover {
    border: 1px solid var(--medium);
}

.priority-low.tool-card:hover, .category-quickwin.tool-card:hover {
    border: 1px solid var(--quickwin);
}

.tool-icon {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-align: center;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.tool-card:hover .tool-icon {
    transform: translateY(-2px);
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(86, 156, 214, 0.3));
}

.priority-high .tool-icon {
    color: #EDEDED;
}

.priority-medium .tool-icon, .category-medium .tool-icon {
    color: #EDEDED;
}

.tool-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.tool-card p {
    color: #C5C5C5;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.tool-btn {
    width: 100%;
    padding: 0.8rem 1.5rem;
    background: var(--quickwin);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tool-btn:hover {
    background: var(--quickwin);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.priority-high .tool-btn {
    background: var(--quickwin);
    color: #FFFFFF;
}

.priority-high .tool-btn:hover {
    background: var(--quickwin);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(47, 174, 149, 0.3);
}

.priority-medium .tool-btn, .category-medium .tool-btn {
    background: var(--quickwin);
    color: #FFFFFF;
}

.priority-medium .tool-btn:hover, .category-medium .tool-btn:hover {
    background: var(--quickwin);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(47, 174, 149, 0.3);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
}

.modal-content {
    background: var(--bg-primary);
    margin: 2% auto;
    padding: 0;
    border-radius: 4px;
    width: 95%;
    max-width: 1400px;
    height: 90%;
    position: relative;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Ensure Testing Framework modal matches AI Assistant width */
.modal-content.testing-framework-modal {
    width: 95%;
    max-width: 1400px;
    min-width: 800px;
}

.close {
    color: #EDEDED;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1001;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--quickwin);
    transform: translateY(-2px);
    border: 1px solid #6D6D6D;
    transition: all 0.3s ease;
}

.close:hover {
    background: #6D6D6D;
    color: #EDEDED;
}

#tool-content {
    height: 100%;
    padding: 2rem;
    overflow-y: auto;
    color: #EDEDED;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1rem;
    }

    .header-content h1 {
        font-size: 1.5rem;
    }

    .header-content p {
        font-size: 0.85rem;
    }

    /* Responsive beta badge for mobile devices */
    .beta-badge {
        font-size: 0.55rem;
        padding: 0.25rem 0.5rem;
        margin-left: 0.5rem;
        display: inline-block;
    }

    /* Stack header right section vertically on mobile */
    .header-right {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        align-items: stretch;
    }

    /* Status indicators full width on mobile */
    .status-indicators {
        width: 100%;
        justify-content: center;
    }

    .status-item {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* User profile section responsive */
    .user-profile {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        width: 100%;
    }

    .user-info {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        width: 100%;
    }

    .user-info i {
        font-size: 2rem;
    }

    .user-details {
        align-items: center;
        gap: 0.25rem;
    }

    .user-email {
        font-size: 0.85rem;
        word-break: break-all;
    }

    .user-tier {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Make buttons stack and full width on mobile */
    .upgrade-btn,
    .logout-btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .upgrade-btn {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .tools-row {
        grid-template-columns: 1fr;
    }

    .main-content {
        padding: 1rem;
    }

    .modal-content {
        width: 95%;
        height: 95%;
        margin: 2.5% auto;
    }
}

/* Make Testing Framework modal even larger */
.modal-content .full-size {
    min-height: 800px;
}

.testing-framework-interface {
    min-height: 700px;
}

/* Ensure modal content fills available space */
#tool-content {
    height: 100%;
    max-height: none;
    overflow-y: auto;
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 0.85rem;
    color: #EDEDED;
    opacity: 0.8;
}

.error {
    background: rgba(211, 106, 94, 0.15);
    color: #D36A5E;
    border: 1px solid rgba(211, 106, 94, 0.3);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #f5c6cb;
    margin: 1rem 0;
}

.tool-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-weight: 500;
}

.tool-status.active {
    background: rgba(78, 204, 163, 0.15);
    color: #4ECCA3;
    border: 1px solid rgba(78, 204, 163, 0.4);
}

.tool-status.active i {
    color: #4ECCA3;
}

.tool-description {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(77, 171, 247, 0.15);
    border-radius: 8px;
    border-left: 4px solid #4DABF7;
    color: #EDEDED;
}

.feature-list {
    margin: 1rem 0;
}

.feature-list h4 {
    color: #EDEDED;
    margin-bottom: 0.5rem;
}

.feature-list ul {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feature-list li i {
    color: #FFA94D;
    font-size: 0.8rem;
}

.tool-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #3E3E55;
}

.tool-actions .tool-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #6D6D6D;
    border-radius: 4px;
    overflow: hidden;
    margin: 1rem 0;
}

.progress {
    height: 100%;
    background: var(--quickwin);
    transform: translateY(-2px);
    transition: width 0.3s ease;
}

.progress-text {
    text-align: center;
    color: #EDEDED;
    opacity: 0.8;
    font-size: 0.9rem;
}

.tool-interface h2 {
    color: #EDEDED;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tool-interface h2 i {
    color: #EDEDED;
}

/* AI Workspace Styles */
.ai-workspace {
    margin-top: 1.5rem;
}

.workspace-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #6D6D6D;
    padding-bottom: 0.5rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #EDEDED;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: #3E3E42;
    color: #CCCCCC;
    border: 1px solid #569CD6;
    opacity: 1;
    font-weight: 600;
    transition: 0.2s;
}

.tab-btn:hover:not(.active) {
    background: #555;
    color: #EDEDED;
    opacity: 1;
}

.workspace-tab {
    display: none;
    padding: 1.5rem;
    background: #1E1E2E;
    border-radius: 8px;
    border: 1px solid #3A3A3A;
    color: #EDEDED;
}

.workspace-tab.active {
    display: block;
}

.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #EDEDED;
}

.input-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #3A3A3A;
    border-radius: 6px;
    font-family: 'Consolas', 'Segoe UI Mono', 'Courier New', monospace;
    font-size: 1.0rem;
    resize: vertical;
    margin-bottom: 1rem;
    background: #2A2A2A;
    color: #EDEDED;
}

.input-group textarea:focus {
    outline: none;
    border-color: #4ECCA3;
    box-shadow: 0 0 0 2px rgba(78, 204, 163, 0.2);
}

.code-output {
    background: #2A2A2A;
    border: 1px solid #3A3A3A;
    border-radius: 4px;
    padding: 3rem 1rem 1rem 1rem; /* Extra top padding for Copy Code button */
    position: relative;
}

.code-output pre {
    margin: 0;
    overflow-x: auto;
}

.code-output code {
    color: #EDEDED;
    font-family: 'Consolas', 'Segoe UI Mono', 'Courier New', monospace;
    font-size: 1.0rem;
    line-height: 1.5;
    white-space: pre;          /* Preserve code formatting - no wrapping */
    word-wrap: normal;         /* No word wrapping for code blocks */
    overflow-wrap: normal;     /* No overflow wrapping for code blocks */
    display: block;
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #3E3E42;
    color: #CCCCCC;
    border: 1px solid #555;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: #4A4A4F;
    border-color: #666;
}

.ai-chat {
    background: #2A2A2A;
    border-radius: 4px;
    border: 1px solid #3A3A3A;
    height: 600px;
    display: flex;
    flex-direction: column;
}

/* Make AI Chat even taller in larger viewports */
@media (min-height: 800px) {
    .ai-chat {
        height: 700px;
    }
}

@media (min-height: 1000px) {
    .ai-chat {
        height: 800px;
    }
}

/* Question summary styling for AI Chat responses */
.question-summary {
    background: #3A3A3A;
    border-left: 3px solid #4ECCA3;
    padding: 1.2rem; /* Increased from 0.8rem */
    margin-bottom: 1rem;
    border-radius: 4px;
    min-height: 80px; /* Ensure minimum height for better visibility */
}

.question-summary h5 {
    color: #4ECCA3;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.question-summary p {
    color: #B0B0B0;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background: transparent;
}

.ai-message, .user-message {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}

.user-message {
    flex-direction: row-reverse;
}

.ai-message i, .user-message i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.ai-message i {
    background: #6D6D6D;
    color: #EDEDED;
}

.user-message i {
    background: #4ECCA3;
    color: #1E1E2E;
}

.message-content {
    background: #1F1F1F;
    color: #EDEDED !important;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    border: 1px solid #6D6D6D;
    max-width: 85%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Ensure all text in chat messages is visible */
.ai-message .message-content,
.ai-message .message-content *,
.ai-message .message-content p,
.ai-message .message-content div,
.ai-message .message-content span,
.ai-message .message-content li,
.user-message .message-content,
.user-message .message-content * {
    color: #EDEDED !important;
}

.user-message .message-content {
    background: #6D6D6D;
    color: #EDEDED;
    border: 1px solid #6D6D6D;
}

/* Wider message content for AI responses with code blocks */
.ai-message .message-content:has(.ai-code-block),
.ai-message .message-content:has(.code-output),
.ai-message .message-content:has(pre) {
    max-width: 95%;
}

/* Typing/thinking indicator - compact and professional */
.ai-message.typing {
    margin-bottom: 0.5rem;
}

.ai-message.typing .message-content {
    padding: 0.5rem 0.75rem;
    background: rgba(86, 156, 214, 0.1);
    border: 1px solid rgba(86, 156, 214, 0.3);
    font-size: 0.9rem;
    max-width: fit-content;
}

.ai-message.typing .message-content p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #569CD6;
    font-weight: 500;
}

.ai-message.typing .fa-spinner {
    font-size: 0.9rem;
}

.quick-questions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.quick-btn {
    background: #444;
    color: #EDEDED;
    border: 1px solid #3A3A3A;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-btn:hover {
    background: #555;
    color: #EDEDED;
    border-color: #555;
}

.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid #6D6D6D;
    background: #1F1F1F;
}

.chat-input input,
.chat-input textarea {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #3A3A3A;
    border-radius: 6px;
    outline: none;
    background: #2A2A2A;
    color: #EDEDED;
    font-family: inherit;
    line-height: 1.4;
}

.chat-input textarea {
    min-height: 50px;
    max-height: 150px;
    resize: vertical;
}

.chat-input input:focus,
.chat-input textarea:focus {
    border-color: #4ECCA3;
    box-shadow: 0 0 0 2px rgba(78, 204, 163, 0.2);
}

.chat-input button {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    background: #3E3E42;
    color: #CCCCCC;
    border: 1px solid #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: 500;
}

.chat-input button:hover {
    background: #4A4A4F;
    border-color: #666;
    transform: translateY(-1px);
}

.optimization-results {
    background: rgba(30, 30, 46, 0.95);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #3E3E55;
    color: #EDEDED;
}

.score-display {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #4DABF7, #4ECCA3);
    color: white;
    border-radius: 8px;
}

.score {
    font-size: 2rem;
    font-weight: bold;
}

.issues ul {
    list-style: none;
    padding: 0;
}

.issues li {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 4px solid;
    border-radius: 0 4px 4px 0;
}

.issue-critical {
    background: rgba(211, 106, 94, 0.15);
    border-color: #D36A5E;
    color: #EDEDED;
}

.issue-high {
    background: rgba(255, 169, 77, 0.15);
    border-color: #FFA94D;
    color: #EDEDED;
}

.issue-medium {
    background: rgba(77, 171, 247, 0.15);
    border-color: #4DABF7;
    color: #EDEDED;
}

.optimization-card {
    background: rgba(78, 204, 163, 0.15);
    border: 1px solid rgba(78, 204, 163, 0.4);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.optimization-card h6 {
    color: #4ECCA3;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.workspace-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #3E3E55;
    text-align: center;
}

.tool-btn.secondary, .category-specialized .tool-btn {
    background: var(--quickwin);
    color: #FFFFFF;
}

.tool-btn.secondary:hover, .category-specialized .tool-btn:hover {
    background: var(--quickwin);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(47, 174, 149, 0.3);
}

.success {
    color: #4ECCA3;
    font-weight: 600;
}

.code-explanation {
    margin-top: 1rem;
    padding: 1rem;
    background: #252526;
    border-radius: 8px;
    border-left: 4px solid #4EC9B0;
    color: #D4D4D4;
}

/* Code Review Styles */
.code-review {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(78, 204, 163, 0.15);
    border-radius: 8px;
    border-left: 4px solid #4ECCA3;
    color: #EDEDED;
}

.code-review h5 {
    color: #4ECCA3;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.code-review h5 i {
    margin-right: 0.5rem;
}

.review-score {
    font-weight: bold;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: #4ECCA3;
    color: white;
}

.review-issues {
    margin-top: 1rem;
}

.review-issues h6 {
    color: #FF6B6B;
    margin-bottom: 0.5rem;
}

.review-issues ul {
    margin-left: 1rem;
}

.review-issues li {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
}

.issue-high {
    background: rgba(255, 107, 107, 0.15);
    border-left: 3px solid #FF6B6B;
}

.issue-medium {
    background: rgba(255, 169, 77, 0.15);
    border-left: 3px solid #FFA94D;
}

.issue-low {
    background: rgba(77, 171, 247, 0.15);
    border-left: 3px solid #4DABF7;
}

.review-improvements {
    margin-top: 1rem;
}

.review-improvements h6 {
    color: #4ECCA3;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.review-improvements ul {
    margin-left: 1rem;
}

.review-improvements li {
    margin-bottom: 0.3rem;
    color: #4ECCA3;
}

.review-improvements i {
    margin-right: 0.5rem;
}

.original-code {
    margin-top: 1rem;
    border: 1px solid #3E3E55;
    border-radius: 4px;
}

.original-code summary {
    padding: 0.5rem;
    background: rgba(30, 30, 46, 0.8);
    color: #EDEDED;
    cursor: pointer;
    font-weight: bold;
}

.original-code pre {
    margin: 0;
    padding: 1rem;
    background: rgba(30, 30, 46, 0.9);
    color: #EDEDED;
}

.original-code-output {
    position: relative;
    background: rgba(244, 135, 113, 0.06);
    border: 1px solid rgba(244, 135, 113, 0.15);
    border-radius: 6px;
    overflow-x: auto;
    margin-top: 0.5rem;
}

.original-code-output pre {
    margin: 0;
    padding: 1rem;
    background: transparent;
    color: #CCCCCC;
    font-family: 'Consolas', 'Segoe UI Mono', 'Courier New', monospace;
    font-size: 1.0rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;          /* Preserve code formatting - no wrapping */
}

.original-code-output code {
    color: #CCCCCC;
    font-family: 'Consolas', 'Segoe UI Mono', 'Courier New', monospace;
    font-size: 1.0rem;
    line-height: 1.6;
    display: block;
    white-space: pre;          /* Preserve code formatting - no wrapping */
    word-wrap: normal;         /* No word wrapping for code blocks */
    overflow-wrap: normal;     /* No overflow wrapping for code blocks */
}

/* Enhanced Copy Button for Original Code */
.original-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(244, 135, 113, 0.7);
    color: #1E1E1E;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    z-index: 10;
}

.original-copy-btn:hover {
    background: #F48771;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(244, 135, 113, 0.3);
}

.original-copy-btn:active {
    transform: translateY(0);
}

.code-review-error {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 107, 107, 0.15);
    border-radius: 8px;
    border-left: 4px solid #FF6B6B;
    color: #FF6B6B;
}

/* Improved Code Output Styling - Code Optimizer */
.improved-code-output {
    position: relative;
    background: rgba(78, 201, 176, 0.08);
    border: 1px solid rgba(78, 201, 176, 0.2);
    border-radius: 6px;
    overflow-x: auto;
    margin-top: 0.5rem;
}

.improved-code-output pre {
    margin: 0;
    padding: 1rem;
    background: transparent;
    color: #CCCCCC;
    font-family: 'Consolas', 'Segoe UI Mono', 'Courier New', monospace;
    font-size: 1.0rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;          /* Preserve code formatting - no wrapping */
}

.improved-code-output code {
    color: #CCCCCC;
    font-family: 'Consolas', 'Segoe UI Mono', 'Courier New', monospace;
    font-size: 1.0rem;
    line-height: 1.6;
    display: block;
    white-space: pre;          /* Preserve code formatting - no wrapping */
    word-wrap: normal;         /* No word wrapping for code blocks */
    overflow-wrap: normal;     /* No overflow wrapping for code blocks */
}

/* Enhanced Copy Button for Improved Code */
.improved-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(78, 201, 176, 0.8);
    color: #1E1E1E;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    z-index: 10;
}

.improved-copy-btn:hover {
    background: #4EC9B0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(78, 201, 176, 0.3);
}

.improved-copy-btn:active {
    transform: translateY(0);
}

/* AI Assistant Chat Formatting Styles */
.ai-code-block {
    margin: 1rem 0;
    background: #252526;
    border-radius: 8px;
    border: 1px solid #3E3E42;
    overflow: hidden;
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    background: #1E1E1E;
    color: #CCCCCC;
    border-bottom: 1px solid #3E3E42;
    font-size: 0.95rem;
}

.code-language {
    font-weight: 600;
    text-transform: capitalize;
    color: #569CD6;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.ai-code-block .copy-btn {
    background: #3E3E42;
    color: #CCCCCC;
    border: 1px solid #555;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: static !important;
    top: auto !important;
    right: auto !important;
}

.ai-code-block .copy-btn:hover {
    background: #4A4A4F;
    border-color: #666;
}

.ai-code-block .code-output {
    position: relative;
    background: #1E1E1E;
    color: #CCCCCC;
}

.ai-code-block pre {
    margin: 0;
    padding: 1.25rem;
    overflow-x: auto;
    white-space: pre;
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 1.0rem;
    line-height: 1.6;
}

.ai-code-block code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: inherit;
    color: #CCCCCC;
    display: block;
}

/* Line number styling with arrow indicator */
.ai-code-block pre code {
    display: block;
    white-space: pre;
    counter-reset: line-numbering;
}

/* Inline code styling */
.inline-code {
    background: rgba(30, 30, 46, 0.8);
    color: #4DABF7;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    border: 1px solid #3E3E55;
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.95em;
    font-weight: 600;
}

/* Enhanced message content formatting */
.ai-message .message-content h4 {
    color: #EDEDED;
    margin: 0.75rem 0 0.5rem 0;
    font-weight: 600;
    font-size: 1.1em;
    border-bottom: 2px solid #3E3E55;
    padding-bottom: 0.25rem;
}

.ai-message .message-content h5 {
    color: #EDEDED;
    margin: 0.5rem 0 0.25rem 0;
    font-weight: 600;
    font-size: 1em;
    opacity: 0.8;
}

.ai-message .message-content ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.ai-message .message-content li {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.ai-message .message-content strong {
    color: #EDEDED;
    font-weight: 600;
}

/* Category-based coloring classes */
.category-advanced::before {
    background: var(--advanced);
}

.category-advanced .tool-icon {
    color: #EDEDED;
}

.category-advanced .tool-btn {
    background: var(--quickwin);
    color: #FFFFFF;
}

.category-advanced .tool-btn:hover {
    background: var(--quickwin);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(47, 174, 149, 0.3);
}

.category-specialized::before {
    background: var(--special);
}

.category-specialized .tool-icon {
    color: #EDEDED;
}

.category-quickwin .tool-icon {
    color: #EDEDED;
}

.category-quickwin .tool-btn {
    background: var(--quickwin);
    color: #FFFFFF;
}

.category-quickwin .tool-btn:hover {
    background: var(--quickwin);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Primary and Secondary Button Styles (as per TASK.md requirements) */
.btn-generate {
    background: #4ECCA3 !important;
    color: #1E1E2E !important;
    font-weight: 600;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-generate:hover {
    background: #5EDAB5 !important;
    transform: translateY(-2px);
}

/* Tool button secondary - follows approved standards */
.tool-btn.secondary {
    background: var(--bg-tertiary, #2D2D2D);
    color: var(--text-primary, #D4D4D4);
    border: 1px solid var(--border-color, #404040);
    border-radius: 4px;
    transition: all 0.2s;
}

.tool-btn.secondary:hover {
    background: var(--bg-hover, #3C3C3C);
}

/* Auto-completion and Intelligent Suggestions Styles */

.input-container {
    position: relative;
}

.code-editor-container {
    position: relative;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.suggestion-item, .code-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(77, 171, 247, 0.1);
}

.suggestion-item:hover, .code-suggestion:hover {
    background: rgba(77, 171, 247, 0.1);
}

.suggestion-item:last-child, .code-suggestion:last-child {
    border-bottom: none;
}

.code-suggestion {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.suggestion-label {
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 1.0rem;
}

.suggestion-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

.suggestion-active {
    background: rgba(77, 171, 247, 0.2);
}

/* Quick Templates Styles */
.quick-templates {
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.template-btn {
    background: rgba(77, 171, 247, 0.1);
    color: #4DABF7;
    border: 1px solid rgba(77, 171, 247, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-btn:hover {
    background: rgba(77, 171, 247, 0.2);
    border-color: rgba(77, 171, 247, 0.5);
    transform: translateY(-1px);
}

/* Editor Toolbar Styles */
.editor-toolbar {
    margin: 0.75rem 0;
    display: flex;
    gap: 0.5rem;
}

.editor-toolbar .tool-btn {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

/* Alternative Approaches Styles */
#code-alternatives {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(30, 30, 46, 0.8);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

#code-alternatives h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#code-alternatives h5::before {
    content: '💡';
    font-size: 1.2rem;
}

.alternative-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(77, 171, 247, 0.05);
    border-radius: 6px;
    border-left: 3px solid #4DABF7;
}

.alternative-item:last-child {
    margin-bottom: 0;
}

.alternative-item h6 {
    color: #4DABF7;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.alternative-item p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.alternative-item pre {
    margin: 0;
    background: rgba(30, 30, 46, 0.9);
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.95rem;
}

.alternative-item code {
    color: var(--text-primary);
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Toast Notification Styles */
.toast {
    animation: slideInFromRight 0.3s ease-out;
}

.toast.toast-error {
    border-left-color: var(--accent-red) !important;
}

.toast.toast-success {
    border-left-color: var(--quickwin) !important;
}

.toast.toast-warning {
    border-left-color: var(--accent-secondary) !important;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Enhanced Input Styling */
.input-container textarea,
.code-editor-container textarea {
    border-radius: 4px 4px 0 0;
    transition: border-color 0.2s ease;
}

.input-container textarea:focus,
.code-editor-container textarea:focus {
    border-color: #4DABF7;
    box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.2);
}

.input-container textarea:focus + .autocomplete-suggestions,
.code-editor-container textarea:focus + .autocomplete-suggestions {
    border-color: #4DABF7;
}

/* Code Editor Enhancements */
#code-input, #nl-input {
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 1.0rem;
    line-height: 1.5;
    resize: vertical;
}

#code-input {
    min-height: 200px;
}

/* Syntax Highlighting Hints */
.code-editor-container textarea {
    background: rgba(30, 30, 46, 0.9);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Loading States */
.generating-code {
    opacity: 0.7;
    pointer-events: none;
}

.generating-code::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #4DABF7;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ai-code-block {
        margin: 0.75rem 0;
    }

    .code-header {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .ai-code-block pre {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .ai-code-block .copy-btn {
        padding: 0.4rem;
        font-size: 0.9rem;
    }

    .quick-templates {
        flex-direction: column;
    }

    .template-btn {
        flex: 1;
        text-align: center;
    }

    .editor-toolbar {
        flex-direction: column;
    }

    .editor-toolbar .tool-btn {
        flex: 1;
        text-align: center;
    }

    .autocomplete-suggestions {
        max-height: 150px;
    }
}

/* Enhanced Code Generation UI */
.suggestion-context {
    background: #252526;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border: 1px solid #3E3E42;
}

.complexity-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.complexity-low {
    background: rgba(46, 204, 113, 0.2);
    color: #2ECC71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.complexity-medium {
    background: rgba(241, 196, 15, 0.2);
    color: #F1C40F;
    border: 1px solid rgba(241, 196, 15, 0.4);
}

.complexity-high {
    background: rgba(231, 76, 60, 0.2);
    color: #E74C3C;
    border: 1px solid rgba(231, 76, 60, 0.4);
}

.recommendations, .best-practices {
    margin-top: 1rem;
}

.recommendations h6, .best-practices h6 {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.recommendations ul, .best-practices ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommendations li, .best-practices li {
    padding: 0.4rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    position: relative;
    padding-left: 1.5rem;
}

.recommendations li::before {
    content: '💡';
    position: absolute;
    left: 0;
    font-size: 0.9rem;
}

.best-practices li::before {
    content: '⭐';
    position: absolute;
    left: 0;
    font-size: 0.9rem;
}

.approach-badge {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0.5rem 0;
    text-transform: capitalize;
}

.approach-functional {
    background: rgba(156, 39, 176, 0.2);
    color: #569CD6;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

.approach-imperative {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.approach-synchronous {
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.approach-asynchronous {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.use-alternative-btn {
    background: rgba(77, 171, 247, 0.1);
    color: #4DABF7;
    border: 1px solid rgba(77, 171, 247, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.use-alternative-btn:hover {
    background: rgba(77, 171, 247, 0.2);
    border-color: rgba(77, 171, 247, 0.5);
    transform: translateY(-1px);
}

/* Code Explanation UI */
.explanation-container {
    background: rgba(30, 30, 46, 0.8);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

.code-info {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.code-type-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #2D2D2D;
    color: #D4D4D4;
    border: 1px solid #404040;
}

.type-business_rule {
    background: #2D2D2D;
    color: #D4D4D4;
    border: 1px solid #404040;
}

.type-client_script {
    background: #2D2D2D;
    color: #CE9178;
    border: 1px solid #404040;
}

.type-script_include {
    background: #2D2D2D;
    color: #4EC9B0;
    border: 1px solid #404040;
}

.type-database_query {
    background: #2D2D2D;
    color: #D4D4D4;
    border: 1px solid #404040;
}

.explanation-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.explanation-text h3 {
    font-size: 1.3rem;
    color: #E0E0E0;
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #3E3E42;
}

.explanation-text h4 {
    font-size: 1.1rem;
    color: #D4D4D4;
    margin: 1.25rem 0 0.75rem 0;
    font-weight: 600;
}

.explanation-text h5 {
    font-size: 1rem;
    color: #B0B0B0;
    margin: 1rem 0 0.5rem 0;
    font-weight: 600;
}

.explanation-text p {
    margin-bottom: 1rem;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    color: #D4D4D4;
}

.explanation-text code {
    background: #1E1E1E;
    color: #CE9178;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    border: 1px solid #333;
}

.explanation-text pre {
    background: #1E1E1E;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.explanation-text pre code {
    background: none;
    padding: 0;
    color: #D4D4D4;
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
    border: none;
}

.explanation-text hr {
    border: none;
    border-top: 1px solid #3E3E42;
    margin: 1.5rem 0;
}

.explanation-text strong {
    color: #E0E0E0;
    font-weight: 600;
}

.explanation-text ul, .explanation-text ol {
    margin: 0.5rem 0 1rem 1.5rem;
}

.explanation-text li {
    margin-bottom: 0.5rem;
}

.key-terms {
    margin-bottom: 1.5rem;
}

.key-terms h6 {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.terms-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.term-badge {
    background: #2D2D2D;
    color: #D4D4D4;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #404040;
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.related-docs {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.related-docs h6 {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.related-docs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-docs li {
    padding: 0.4rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    position: relative;
    padding-left: 1.5rem;
}

.related-docs li::before {
    content: '📚';
    position: absolute;
    left: 0;
    font-size: 0.9rem;
}

/* Error states */
.error {
    background: rgba(231, 76, 60, 0.1);
    color: #E74C3C;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid rgba(231, 76, 60, 0.3);
    font-size: 0.9rem;
}

/* Loading animations */
.loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    justify-content: center;
}

.loading i {
    color: #4DABF7;
}

/* 3-Solution Format Styling */
.solution-section {
    margin: 1.5rem 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(30, 30, 46, 0.6);
}

.solution-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.config-solution .solution-header {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.1));
    color: #3498db;
    border-bottom: 1px solid rgba(52, 152, 219, 0.3);
}

.hybrid-solution .solution-header {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(155, 89, 182, 0.1));
    color: #9b59b6;
    border-bottom: 1px solid rgba(155, 89, 182, 0.3);
}

.script-solution .solution-header {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(46, 204, 113, 0.1));
    color: #2ecc71;
    border-bottom: 1px solid rgba(46, 204, 113, 0.3);
}

.solution-content {
    padding: 1rem;
    line-height: 1.6;
}

.solution-subsection {
    margin: 1rem 0 0.5rem 0;
    padding: 0.5rem;
    background: rgba(77, 171, 247, 0.1);
    border-left: 3px solid #4dabf7;
    border-radius: 4px;
}

.not-achievable {
    padding: 0.75rem 1rem;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 6px;
    color: #e74c3c;
    font-style: italic;
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.solution-content pre {
    margin: 1rem 0;
    background: rgba(30, 30, 46, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
}

.solution-content code {
    background: rgba(30, 30, 46, 0.8);
    color: #ededed;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Script Code Block Styling */
.script-code-block {
    margin: 1rem 0;
    background: rgba(30, 30, 46, 0.95);
    border-radius: 8px;
    border: 1px solid #3E3E55;
    overflow: hidden;
}

.script-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(30, 30, 46, 0.95);
    border-bottom: 1px solid #3E3E55;
}

.script-code-header .copy-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    background: #3E3E42;
    color: #CCCCCC;
    border: 1px solid #555;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.script-code-header .copy-btn:hover {
    background: #4A4A4F;
    border-color: #666;
}

.script-code-output {
    position: relative;
    background: rgba(30, 30, 46, 0.9);
    color: #EDEDED;
}

.script-code-output pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    white-space: pre;
    font-family: 'Consolas', 'Courier New', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 1.0rem;
    line-height: 1.4;
    background: transparent;
}

.script-code-output code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: 'Consolas', 'Courier New', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    color: #EDEDED;
    display: block;
    white-space: pre;
    font-size: 1.0rem;
    line-height: 1.4;
}

.script-line {
    display: block;
    font-family: 'Consolas', 'Courier New', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: rgba(30, 30, 46, 0.8);
    color: #EDEDED;
    padding: 0.25rem 0.5rem;
    margin: 0.1rem 0;
    border-radius: 3px;
    white-space: pre;
    font-size: 1.0rem;
    line-height: 1.4;
    border-left: 2px solid #4dabf7;
}

/* AI Chat Quick Templates Styling */
.ai-suggestions {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.ai-suggestions h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.quick-templates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.template-group {
    background: rgba(77, 171, 247, 0.05);
    border: 1px solid rgba(77, 171, 247, 0.15);
    border-radius: 6px;
    padding: 0.75rem;
}

.template-group h5 {
    color: var(--accent-blue);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.template-group button {
    display: block;
    width: 100%;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-group button:last-child {
    margin-bottom: 0;
}

.template-group button:hover {
    background: var(--hover-color);
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}

.template-group .sample-btn {
    background: rgba(255, 169, 77, 0.1);
    color: var(--accent-secondary);
    border-color: rgba(255, 169, 77, 0.3);
    font-style: italic;
}

.template-group .sample-btn:hover {
    background: rgba(255, 169, 77, 0.15);
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
}

/* AI Model Selection Styles */
.model-selection-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.model-selection-container label {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

#ai-model-select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    min-width: 180px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#ai-model-select:hover {
    border-color: var(--accent-blue);
    background: var(--hover-color);
}

#ai-model-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.2);
}

#ai-model-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.5rem;
}

/* Model Status Indicators */
.model-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.model-status.success {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.model-status.loading {
    background: rgba(77, 171, 247, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(77, 171, 247, 0.3);
}

.model-status.error {
    background: rgba(255, 107, 107, 0.1);
    color: var(--accent-red);
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.model-status.pending {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.model-status.active {
    background: rgba(86, 156, 214, 0.1);
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
}

.model-status.completed {
    background: rgba(78, 201, 176, 0.1);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

/* Responsive adjustments for model selection */
@media (max-width: 768px) {
    .model-selection-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    #ai-model-select {
        min-width: auto;
        width: 100%;
    }

    .model-status {
        text-align: center;
        justify-content: center;
    }
}

/* Chat Welcome Section */
.chat-welcome {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.chat-welcome .ai-message {
    margin: 0;
    padding: 0;
}

/* File Attachment Styles */
.model-selection-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.model-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.model-dropdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.model-dropdown label {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.model-dropdown select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 0.5rem;
    font-size: 0.9rem;
    min-width: 150px;
}

.model-dropdown select:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.file-attachment {
    display: flex;
    align-items: center;
}

.attach-file-btn {
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.attach-file-btn:hover {
    background: #3a8fd8;
    transform: translateY(-1px);
}

.attach-file-btn i {
    font-size: 0.9rem;
}

.attached-files {
    animation: slideDown 0.3s ease;
}

.attached-files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.clear-all-btn {
    background: var(--accent-red);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.clear-all-btn:hover {
    background: #e55555;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.file-item:hover {
    background: var(--hover-color);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.file-info i {
    color: var(--accent-secondary);
    font-size: 1rem;
    flex-shrink: 0;
}

.file-name {
    color: var(--text-primary);
    font-weight: 500;
    truncate: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
}

.file-size {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.remove-file-btn {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: 4px;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.remove-file-btn:hover {
    background: var(--accent-red);
    color: white;
}

.message-attachments {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(77, 171, 247, 0.1);
    border: 1px solid var(--accent-blue);
    border-radius: 6px;
    font-size: 0.85rem;
}

.attachments-header {
    color: var(--accent-blue);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.attachment-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--accent-blue);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.attachment-tag i {
    font-size: 0.7rem;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design for file attachments */
@media (max-width: 768px) {
    .model-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .model-dropdown {
        justify-content: space-between;
    }

    .file-attachment {
        justify-content: center;
    }

    .file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .file-info {
        width: 100%;
    }

    .remove-file-btn {
        align-self: flex-end;
    }
}

/* AI Suggestions Layout */
.ai-suggestions {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* Collapsible Section Styles for Code Optimizer */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(77, 171, 247, 0.1);
    border: 1px solid rgba(77, 171, 247, 0.3);
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    user-select: none;
}

.section-header:hover {
    background: rgba(77, 171, 247, 0.15);
    border-color: rgba(77, 171, 247, 0.4);
    transform: translateY(-1px);
}

.section-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1;
}

.chevron-icon {
    color: var(--accent-blue);
    font-size: 1rem;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.section-content {
    overflow: hidden;
    transition: all 0.4s ease;
    margin-bottom: 1rem;
}

.section-content.collapsed {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    padding: 0;
}

.section-content.expanded {
    max-height: 2000px;
    opacity: 1;
    padding: 1rem;
    background: rgba(30, 30, 46, 0.3);
    border: 1px solid rgba(77, 171, 247, 0.2);
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-top: -0.5rem;
}

.section-header.collapsed .chevron-icon {
    transform: rotate(-90deg);
}

.section-header.expanded .chevron-icon {
    transform: rotate(0deg);
}

/* Enhanced optimization results styling */
.optimization-section {
    margin-bottom: 1.5rem;
}

.optimization-section:last-child {
    margin-bottom: 0;
}

/* Optimized code section specific styling */
.optimized-code {
    position: relative;
    background: rgba(20, 20, 30, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.optimized-code pre {
    margin: 0;
    padding: 1rem;
    background: transparent;
}

.optimized-copy-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-top: 1rem;
    margin-left: auto;
    width: auto;
    max-width: 200px;
    background: var(--bg-tertiary, #2D2D2D) !important;
    color: var(--text-primary, #D4D4D4) !important;
    border: 1px solid var(--border-color, #404040) !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.optimized-copy-btn:hover {
    background: var(--bg-hover, #3C3C3C) !important;
    border-color: var(--accent-green, #4EC9B0) !important;
}

/* AI Chat Fallback Notification Styles */
.fallback-notification {
    background: linear-gradient(135deg, rgba(255, 169, 77, 0.1), rgba(255, 169, 77, 0.05));
    border: 1px solid rgba(255, 169, 77, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    animation: slideInNotification 0.3s ease-out;
}

.fallback-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-secondary);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.fallback-alert i {
    color: var(--accent-secondary);
}

.fallback-notification p {
    margin: 0.25rem 0;
    color: var(--text-primary);
}

.fallback-reason {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
}

@keyframes slideInNotification {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Modern Snippet Manager Styles
   ======================================== */

.snippet-manager-modern {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1.5rem;
}

/* Header Section */
.snippet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.header-left h2 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.75rem;
}

.subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

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

/* Toolbar */
.snippet-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.search-container {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 2.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

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

.filter-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.category-select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
}

.category-select option {
    background: #1e1e1e;
    color: #ffffff;
    padding: 0.5rem;
}

.category-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Statistics Cards */
.snippet-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.3s ease;
}

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

.stat-card i {
    font-size: 2rem;
    color: var(--primary-color);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

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

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Snippets Grid */
.snippet-content {
    flex: 1;
    overflow: hidden;
}

.snippets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1.5rem;
    padding: 0.5rem;
    max-height: calc(100vh - 450px);
    overflow-y: auto;
}

/* Snippet Card Modern */
.snippet-card-modern {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.snippet-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.snippet-card-modern.copied {
    animation: pulseGreen 0.5s ease;
}

@keyframes pulseGreen {
    0%, 100% { border-color: var(--border-color); }
    50% { border-color: #10b981; box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
}

.snippet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.snippet-title-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.snippet-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.snippet-category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
}

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

.btn-icon-sm {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-sm:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-icon-sm.btn-danger:hover {
    background: #fee;
    color: #dc2626;
    border-color: #dc2626;
}

.snippet-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.snippet-code-container {
    background: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
}

.snippet-code-container pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    background: transparent !important;
}

.snippet-code-container code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

.snippet-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.snippet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tag {
    padding: 0.25rem 0.6rem;
    background: var(--hover-bg);
    color: var(--text-secondary);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.snippet-meta {
    display: flex;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.usage-count {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.created-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.created-date i {
    color: var(--accent-blue);
}

/* Snippet Download Dropdown */
.download-dropdown-container {
    position: relative;
    display: inline-block;
}

.snippet-download-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    min-width: 100px;
    overflow: hidden;
}

.snippet-download-menu.active {
    display: block;
    animation: fadeIn 0.15s ease;
}

.snippet-download-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.snippet-download-menu button:hover {
    background: var(--bg-tertiary);
}

.snippet-download-menu button i {
    width: 16px;
    color: var(--accent-blue);
}

.snippet-download-menu button:first-child i {
    color: var(--accent-yellow);
}

.snippet-download-menu button:nth-child(2) i {
    color: var(--accent-purple);
}

.snippet-download-menu button:last-child i {
    color: var(--text-secondary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal */
.snippet-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
}

.snippet-modal .modal-content {
    position: relative;
    background: var(--bg-primary);
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    max-height: 92vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close:hover {
    background: rgba(244, 71, 71, 0.15);
    color: #F44747;
}

.btn-close:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.btn-close i {
    pointer-events: none;
}

.modal-body {
    padding: 1.5rem;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.form-group label i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.form-input,
.form-textarea,
.form-select,
.form-code {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.form-select option {
    background: #1e1e1e;
    color: #ffffff;
    padding: 0.5rem;
}

.form-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.form-code:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

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

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Buttons - Approved standards from post-implementation-docs.html */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: var(--accent-blue, #569CD6);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
}

.btn-primary:hover {
    background: #4A8BC2;
}

.btn-primary:focus {
    outline: 2px solid var(--accent-blue, #569CD6);
    outline-offset: 2px;
}

.btn-secondary {
    background: var(--bg-tertiary, #2D2D2D);
    color: var(--text-primary, #D4D4D4);
    border: 1px solid var(--border-color, #404040);
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
}

.btn-secondary:hover {
    background: var(--bg-hover, #3C3C3C);
}

.btn-secondary:focus {
    outline: 2px solid var(--accent-blue, #569CD6);
    outline-offset: 2px;
}

.btn-danger {
    background: var(--accent-red, #F44747);
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #D93636;
    box-shadow: 0 4px 12px rgba(244, 71, 71, 0.4);
}

.btn-icon {
    padding: 0.75rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-icon:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-icon.spinning i {
    animation: spin 1s linear;
}

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

/* Download Button Container and Dropdown */
.download-btn-container {
    position: relative;
    display: inline-block;
}

.download-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #2D2D30;
    border: 1px solid #555;
    border-radius: 4px;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    overflow: visible;
    height: auto !important;
    max-height: none !important;
}

.download-dropdown button {
    width: 100%;
    padding: 10px 16px;
    background: #2D2D30 !important;
    color: #CCCCCC !important;
    border: none;
    border-bottom: 1px solid #3E3E42;
    text-align: left;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.download-dropdown button:last-child {
    border-bottom: none;
}

.download-dropdown button:hover {
    background: #3E3E42;
}

.download-dropdown button i {
    width: 16px;
    text-align: center;
    color: #999;
}

/* Copy and Download Buttons (for code blocks) - Approved style from post-implementation-docs.html */
.copy-code-btn,
.download-code-btn {
    background: var(--bg-tertiary, #2D2D2D) !important;
    color: var(--text-primary, #D4D4D4) !important;
    border: 1px solid var(--border-color, #404040) !important;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.copy-code-btn:hover,
.download-code-btn:hover {
    background: var(--bg-hover, #3C3C3C) !important;
    border-color: var(--accent-green, #4EC9B0) !important;
}

.copy-code-btn i,
.download-code-btn i {
    font-size: 0.85rem;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-secondary);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state h3 {
    margin: 0.5rem 0;
    color: var(--text-primary);
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.loading-spinner i {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: spin 1s linear infinite;
}

/* Error Message */
.error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
    text-align: center;
}

.error-message i {
    font-size: 3rem;
    color: #dc2626;
    margin-bottom: 1rem;
}

.error-message h3 {
    color: var(--text-primary);
    margin: 0.5rem 0;
}

.error-message p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 10001;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    border-left: 4px solid #10b981;
}

.toast-success i {
    color: #10b981;
    font-size: 1.25rem;
}

.toast-error {
    border-left: 4px solid #dc2626;
}

.toast-error i {
    color: #dc2626;
    font-size: 1.25rem;
}

.toast span {
    color: #1f2937;
    font-weight: 500;
}

/* ========================================
   Modern Tool Interfaces (Shared Styles)
   ======================================== */

.tool-modern {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

/* AI Usage Limit Banner */
.usage-limit-banner {
    background: linear-gradient(135deg, rgba(86, 156, 214, 0.1) 0%, rgba(78, 201, 176, 0.1) 100%);
    border: 1px solid #569CD6;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usage-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #CCCCCC;
    font-size: 14px;
}

.usage-info i {
    color: #569CD6;
    font-size: 16px;
}

.usage-progress {
    width: 100%;
    height: 6px;
    background: #3E3E42;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #4EC9B0;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 3px;
}

.tool-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card.stat-success i {
    color: #10b981;
}

.stat-card.stat-warning i {
    color: #f59e0b;
}

.stat-card.stat-error i {
    color: #ef4444;
}

.tool-content-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.tool-content-section h3 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.check-list-modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.check-item-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.check-item-modern:hover {
    transform: translateX(4px);
    border-color: var(--primary-color);
}

.check-item-modern i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.check-item-modern.check-success i {
    color: #10b981;
}

.check-item-modern.check-warning i {
    color: #f59e0b;
}

.check-item-modern.check-error i {
    color: #ef4444;
}

.check-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.check-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .snippet-header,
    .tool-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .snippet-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container {
        min-width: 100%;
    }

    .filter-container {
        width: 100%;
    }

    .category-select {
        flex: 1;
    }

    .snippet-stats,
    .tool-stats {
        grid-template-columns: 1fr;
    }

    .snippets-grid {
        grid-template-columns: 1fr;
    }

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

    .toast {
        left: 1rem;
        right: 1rem;
    }
}

/* ===================================
   AI Copilot Modern Interface
   =================================== */
.ai-interface-modern {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.ai-chat-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    height: 600px;
}

.chat-messages-modern {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 0.5rem;
}

.chat-messages-modern::-webkit-scrollbar {
    width: 8px;
}

.chat-messages-modern::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.chat-messages-modern::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.chat-messages-modern::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.ai-message-modern {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: linear-gradient(145deg, var(--bg-primary) 0%, rgba(30, 30, 30, 0.9) 100%);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-message-modern {
    background: linear-gradient(145deg, rgba(46, 204, 113, 0.1) 0%, rgba(39, 174, 96, 0.05) 100%);
    border-color: rgba(46, 204, 113, 0.3);
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #569CD6 0%, #4A90D9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.message-avatar i {
    color: white;
    font-size: 1.2rem;
}

.user-message-modern .message-avatar {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.message-content-modern {
    flex: 1;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    min-width: 0;
}

.message-content-modern p {
    margin: 0.5rem 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.message-content-modern ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.message-content-modern li {
    margin: 0.25rem 0;
}

.message-content-modern pre {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.message-content-modern code {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.chat-input-modern {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.chat-input-modern textarea {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.chat-input-modern textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(86, 156, 214, 0.15);
}

.chat-input-modern textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

.chat-input-modern button {
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
}

.ai-sidebar-modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-sidebar-modern h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-sidebar-modern h4 i {
    color: #f39c12;
}

.quick-templates-modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.template-group-modern {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.template-group-modern h5 {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-group-modern h5 i {
    font-size: 0.85rem;
    opacity: 0.7;
}

.template-btn-modern {
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.template-btn-modern:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: #569CD6;
    transform: translateX(4px);
}

.template-btn-modern i {
    font-size: 0.85rem;
    opacity: 0.7;
}

@media (max-width: 1200px) {
    .ai-interface-modern {
        grid-template-columns: 1fr;
    }

    .ai-sidebar-modern {
        order: -1;
    }

    .quick-templates-modern {
        flex-direction: row;
        overflow-x: auto;
    }

    .template-group-modern {
        min-width: 200px;
    }
}

/* ===================================
   AI Workspace Modern Tabs
   =================================== */
.modern-tabs-container {
    margin-top: 1.5rem;
}

.modern-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.modern-tabs::-webkit-scrollbar {
    height: 6px;
}

.modern-tabs::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.modern-tabs::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.modern-tab-btn {
    padding: 0.75rem 1.5rem;
    background: #2D2D2D !important;
    border: 1px solid #404040 !important;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #D4D4D4 !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.modern-tab-btn:hover {
    background: #3C3C3C !important;
    color: #E0E0E0 !important;
    border-bottom-color: var(--accent-blue) !important;
}

.modern-tab-btn.active {
    background: #252526 !important;
    color: #4EC9B0 !important;
    border-color: #404040 !important;
    border-bottom-color: #4EC9B0 !important;
    font-weight: 600;
}

.modern-tab-btn i {
    font-size: 13px;
}

.modern-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   AI COPILOT MOBILE RESPONSIVE STYLES
   ========================================= */

/* ServiceNow Config Row - Base Styles */
.sn-config-row {
    display: grid;
    gap: 12px;
    align-items: end;
}

/* Retrieve Columns - Base Styles */
.retrieve-columns {
    display: grid;
    gap: 24px;
}

/* Enhancement Modes - Base Styles */
.enhancement-modes {
    display: grid;
    gap: 12px;
}

.enhancement-mode-card {
    transition: all 0.3s ease;
}

/* Mobile - Tablet breakpoint */
@media (max-width: 1024px) {
    .sn-config-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .sn-config-row > button {
        grid-column: 1 / -1;
    }

    .enhancement-modes {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .modern-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .modern-tab-btn {
        flex-shrink: 0;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
}

/* Mobile - Phone breakpoint */
@media (max-width: 768px) {
    /* Tab navigation - scrollable horizontal */
    .modern-tabs {
        gap: 0.25rem;
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
    }

    .modern-tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        border-radius: 6px 6px 0 0;
    }

    .modern-tab-btn i {
        font-size: 0.75rem;
    }

    /* Instance Configuration - Stack vertically */
    .sn-config-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .sn-config-row > div,
    .sn-config-row > button {
        width: 100% !important;
        min-width: auto !important;
    }

    .sn-config-row > button {
        margin-top: 8px;
    }

    /* Retrieve Columns - Stack on mobile */
    .retrieve-columns {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Two-column grids - Stack on mobile */
    .two-column-grid,
    [style*="grid-template-columns: 1fr 1fr"] {
        display: block !important;
    }

    [style*="grid-template-columns: 1fr 1fr"] > div {
        margin-bottom: 16px;
    }

    /* Modern input sections */
    .modern-input-section {
        padding: 15px !important;
        margin-bottom: 12px;
    }

    /* Buttons full width on mobile */
    .modern-input-section button,
    .modern-input-section .btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Model selection container */
    .model-selection-container {
        flex-direction: column !important;
        gap: 0.75rem;
    }

    /* Chat input workspace */
    .chat-input-workspace {
        flex-direction: column;
        gap: 12px;
    }

    .chat-input-workspace > div {
        flex-direction: column !important;
        width: 100%;
    }

    .chat-input-workspace textarea {
        width: 100%;
        min-height: 100px;
    }

    .chat-input-workspace button,
    .chat-input-workspace .btn-primary {
        width: 100%;
    }

    /* File attachment wrapper */
    .file-attach-wrapper {
        width: 100%;
    }

    .file-attach-wrapper button {
        width: 100%;
        justify-content: center;
    }

    /* Code editor containers */
    .code-editor-container,
    .modern-textarea {
        min-height: 150px;
    }

    /* Quick templates - Stack */
    .quick-templates {
        flex-direction: column;
        gap: 8px;
    }

    .template-btn {
        width: 100%;
        text-align: center;
    }

    /* ServiceNow sub-tabs */
    .sn-tabs,
    .sn-sub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Results section */
    .modern-result-section {
        padding: 12px;
    }

    /* Enhancement mode cards - Stack */
    .enhancement-modes {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .enhancement-mode-card,
    .mode-card {
        width: 100% !important;
    }
}

/* Mobile - Small phone breakpoint */
@media (max-width: 480px) {
    .modern-tabs {
        gap: 0.15rem;
    }

    .modern-tab-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }

    .modern-tab-btn span {
        display: none;
    }

    .modern-tab-btn i {
        margin: 0;
    }

    /* Header actions */
    .header-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .header-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Sidebar cards */
    .sidebar-card {
        padding: 12px;
    }

    .sidebar-card h3 {
        font-size: 0.9rem;
    }

    /* Reduce padding on sections */
    .modern-input-section {
        padding: 12px !important;
    }

    /* Code blocks */
    .ai-code-block pre {
        font-size: 0.8rem;
        padding: 10px;
    }

    /* Documentation modal */
    .docs-modal {
        width: 95%;
        max-height: 90vh;
        margin: 5vh auto;
    }

    .docs-modal-body {
        padding: 12px !important;
    }

    /* Optimization summary grids */
    .optimization-summary [style*="grid-template-columns"] {
        display: block !important;
    }

    /* Code comparison - Stack */
    .code-comparison [style*="grid-template-columns: 1fr 1fr"] {
        display: block !important;
    }

    .code-comparison [style*="grid-template-columns: 1fr 1fr"] > div {
        margin-bottom: 20px;
    }
}

/* Utility class for mobile-only stacking */
@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-hide {
        display: none !important;
    }
}

.tab-content-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.tab-content-header h3 {
    color: var(--text-primary);
    font-size: 1.4rem;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tab-content-header h3 i {
    color: #569CD6;
}

.tab-content-header p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.95rem;
}

.modern-input-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.modern-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modern-label i {
    color: var(--accent-blue);
    font-size: 0.9rem;
}

/* Modern Input Fields - Black background with white text (Task 1-3) */
.modern-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    height: 44px;
}

.modern-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(86, 156, 214, 0.15);
}

.modern-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Modern Select Fields - Black background with white text */
.modern-select {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
    height: 44px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.modern-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(86, 156, 214, 0.15);
}

.modern-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 8px;
}

.modern-textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    min-height: 120px;
}

.modern-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(86, 156, 214, 0.15);
}

.modern-textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

.modern-textarea.code-editor {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

.quick-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.quick-template-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(45, 45, 45, 0.8) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quick-template-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #569CD6, #4EC9B0);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.quick-template-card:hover {
    background: linear-gradient(145deg, rgba(86, 156, 214, 0.15) 0%, rgba(78, 201, 176, 0.1) 100%);
    border-color: #569CD6;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(86, 156, 214, 0.2);
}

.quick-template-card:hover::before {
    transform: scaleX(1);
}

.quick-template-card:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(86, 156, 214, 0.15);
}

.quick-template-card i {
    font-size: 2rem;
    color: #569CD6;
    transition: transform 0.3s ease, color 0.3s ease;
}

.quick-template-card:hover i {
    transform: scale(1.1);
    color: #4EC9B0;
}

.quick-template-card span {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-large {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    border-radius: 6px;
}

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

.btn-large:active {
    transform: translateY(0);
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Templates Section Header */
.templates-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #858585;
    margin: 1.25rem 0 0.75rem 0;
    padding: 0;
    letter-spacing: 0.3px;
    line-height: 1.4;
    animation: fadeSlideIn 0.6s ease-out;
}

/* Icon styling within header */
.templates-header i {
    font-size: 0.95rem;
    color: #569CD6;
    opacity: 0.9;
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Fade and slide in animation for header */
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle pulse glow animation for icon */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Responsive: Adjust header for mobile */
@media (max-width: 768px) {
    .templates-header {
        font-size: 0.75rem;
        gap: 0.375rem;
        margin: 1rem 0 0.5rem 0;
    }

    .templates-header i {
        font-size: 0.85rem;
    }
}

/* Button Group - Right Aligned */
.button-group-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

/* Enhanced button styling for primary actions */
.button-group-right .btn-primary {
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-group-right .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.4);
    transform: translateY(-2px);
}

.button-group-right .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.25);
}

/* Responsive: Full width on mobile */
@media (max-width: 768px) {
    .button-group-right {
        justify-content: stretch;
    }

    .button-group-right .btn-large {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Code Optimizer Toolbar - Enhanced Styles
   ============================================ */

.editor-toolbar-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Toolbar Groups */
.toolbar-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.toolbar-group-secondary {
    flex: 0 0 auto;
}

.toolbar-group-primary {
    flex: 0 0 auto;
    margin-left: auto; /* Push to right */
}

/* Enhanced Button Styles */
.toolbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    min-height: 44px;
}

/* Secondary Buttons */
.editor-toolbar-modern .btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.editor-toolbar-modern .btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Primary Button - Accent Blue */
.editor-toolbar-modern .btn-primary {
    background: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    color: white;
    box-shadow: 0 2px 4px rgba(86, 156, 214, 0.2);
}

.editor-toolbar-modern .btn-primary:hover {
    background: #4A8BC2;
    border-color: #4A8BC2;
    box-shadow: 0 4px 12px rgba(86, 156, 214, 0.4);
    transform: translateY(-2px);
}

.editor-toolbar-modern .toolbar-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Button Icon Animation */
.editor-toolbar-modern .toolbar-btn i {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.editor-toolbar-modern .toolbar-btn:hover i {
    transform: scale(1.1);
}

/* Focus State (Accessibility) */
.editor-toolbar-modern .toolbar-btn:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Disabled State */
.editor-toolbar-modern .toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Loading State */
.editor-toolbar-modern .toolbar-btn.is-loading {
    pointer-events: none;
    opacity: 0.8;
}

/* Responsive Design - Mobile & Tablet */
@media (max-width: 1023px) {
    .editor-toolbar-modern {
        gap: 0.75rem;
    }

    .toolbar-btn {
        padding: 9px 16px;
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .editor-toolbar-modern {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .toolbar-group-secondary,
    .toolbar-group-primary {
        width: 100%;
        margin-left: 0;
    }

    .toolbar-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .toolbar-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* Primary button appears first on mobile */
    .toolbar-group-primary {
        order: -1;
    }
}

/* High Contrast Mode (Accessibility) */
@media (prefers-contrast: high) {
    .editor-toolbar-modern .toolbar-btn {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion (Accessibility) */
@media (prefers-reduced-motion: reduce) {
    .editor-toolbar-modern .toolbar-btn,
    .editor-toolbar-modern .toolbar-btn i {
        transition: none;
        animation: none;
    }
}

/* ============================================================================
 * Button State Management Styles
 * Purpose: Visual feedback for loading, success, and error states
 * Author: iDevOpsLLC
 * Date: 2025-11-21
 * ============================================================================ */

/* Loading State */
.btn-loading {
    opacity: 0.7;
    cursor: wait !important;
    pointer-events: none;
}

.btn-loading i {
    animation: spin 1s linear infinite;
}

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

/* Success State - Approved standards from post-implementation-docs.html */
.btn-success {
    background: var(--success, #4EC9B0);
    color: white;
    border: none;
}

.btn-success:hover {
    background: #3CB39E;
}

.btn-success i {
    color: white;
}

/* Error State - Approved standards */
.btn-error {
    background: var(--accent-red, #F44747);
    color: white;
    border: none;
}

.btn-error:hover {
    background: #D93636;
    box-shadow: 0 4px 12px rgba(244, 71, 71, 0.4);
}

.btn-error i {
    color: white;
}

/* Disabled State Enhancement */
.toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.toolbar-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.modern-result-section {
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(37, 37, 38, 0.95) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: fadeInUp 0.3s ease;
    overflow: visible !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    overflow: visible !important;
    position: relative;
    z-index: 10;
}

.result-header h4 {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.result-header h4 i {
    color: var(--accent-green, #4EC9B0);
}

.result-header .button-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Global button group - right aligned for all code blocks */
.button-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    overflow: visible !important;
    position: relative;
}

.code-output-modern {
    background: #252526;
    border: 1px solid #3E3E42;
    border-radius: 8px;
    overflow: visible;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.code-output-modern pre {
    margin: 0;
    padding: 1.25rem;
    overflow-x: auto;
    background: #1E1E1E;
    white-space: pre;          /* Preserve code formatting - no wrapping */
}

.code-output-modern code {
    font-family: 'Consolas', 'Segoe UI Mono', 'Courier New', monospace;
    font-size: 1.0rem;
    line-height: 1.6;
    color: #CCCCCC;
    display: block;
    white-space: pre;          /* Preserve code formatting - no wrapping */
    word-wrap: normal;         /* No word wrapping for code blocks */
    overflow-wrap: normal;     /* No overflow wrapping for code blocks */
}

.code-output-modern code.code-loading {
    font-size: 1rem;
    color: var(--accent-blue);
    font-style: italic;
    opacity: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    animation: pulse 2s ease-in-out infinite;
}

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

.result-content-modern {
    color: var(--text-primary);
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* AI Chat Workspace Styles */
.model-selection-modern {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.model-select-wrapper {
    flex: 1;
}

.modern-select {
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

.modern-select:focus {
    outline: none;
    border-color: #569CD6;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modern-select option {
    background: #1e1e1e;
    color: #ffffff;
    padding: 0.5rem;
}

.file-attach-wrapper {
    display: flex;
    align-items: flex-end;
}

.attached-files-modern {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.ai-chat-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
    overflow: hidden;
}

.chat-messages-workspace {
    min-height: 500px;
    max-height: calc(100vh - 180px);  /* Increased from 350px to give MORE conversation space - 2026-01-09 */
    max-height: calc(100dvh - 180px); /* Modern browsers - prevents mobile viewport jank - 2026-01-09 */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(30, 30, 30, 0.95) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chat-messages-workspace::-webkit-scrollbar {
    width: 8px;
}

.chat-messages-workspace::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.chat-messages-workspace::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.chat-input-workspace {
    display: flex;
    flex-direction: column;  /* Stack vertically like Code Generator - 2026-01-09 */
    gap: 1rem;
    padding: 0.5rem;
    background: rgba(30, 30, 30, 0.5);
    border-radius: 12px;
}

.chat-input-workspace textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 80px;  /* Match Code Generator textarea - 2026-01-09 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-input-workspace textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px rgba(86, 156, 214, 0.15);
    background: rgba(30, 30, 30, 0.95);
}

.chat-input-workspace textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.chat-quick-actions {
    padding: 1.25rem;
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(45, 45, 45, 0.9) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.quick-actions-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0 0 1rem 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-actions-label::before {
    content: '⚡';
}

.quick-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.quick-action-btn {
    padding: 10px 18px;
    background: linear-gradient(145deg, #3E3E42 0%, #333336 100%);
    border: 1px solid #555;
    border-radius: 8px;
    color: #CCCCCC;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.quick-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(86, 156, 214, 0.2), transparent);
    transition: left 0.5s ease;
}

.quick-action-btn:hover {
    background: linear-gradient(145deg, #4A4A4F 0%, #3E3E42 100%);
    border-color: #569CD6;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(86, 156, 214, 0.2);
}

.quick-action-btn:hover::before {
    left: 100%;
}

.quick-action-btn:active {
    transform: translateY(0);
}

.quick-action-btn i {
    color: #569CD6;
    transition: transform 0.3s ease;
}

.quick-action-btn:hover i {
    transform: scale(1.1);
}

/* Collapsible AI Message Content */
.ai-message-collapsible {
    position: relative;
}

.ai-message-content-wrapper {
    max-height: none;
    overflow: visible;
    transition: max-height 0.3s ease;
    position: relative;
    color: #EDEDED !important;
}

/* Ensure all text inside message wrapper is visible */
.ai-message-content-wrapper,
.ai-message-content-wrapper *,
.ai-message-content-wrapper p,
.ai-message-content-wrapper div,
.ai-message-content-wrapper span,
.ai-message-content-wrapper li,
.ai-message-content-wrapper h1,
.ai-message-content-wrapper h2,
.ai-message-content-wrapper h3,
.ai-message-content-wrapper h4,
.ai-message-content-wrapper h5,
.ai-message-content-wrapper strong {
    color: #EDEDED !important;
}

.ai-message-content-wrapper.collapsed {
    max-height: 400px;
    overflow: hidden;
}

.ai-message-content-wrapper.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent 0%, var(--bg-primary) 100%);
    pointer-events: none;
}

.ai-message-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.btn-expand-collapse {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-expand-collapse:hover {
    background: rgba(86, 156, 214, 0.1);
    border-color: #569CD6;
    color: #569CD6;
}

.btn-view-modal {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-view-modal:hover {
    background: rgba(78, 201, 176, 0.1);
    border-color: #4EC9B0;
    color: #4EC9B0;
}

/* AI Response Modal */
.ai-response-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    padding: 2rem;
    overflow-y: auto;
}

.ai-response-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-response-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;       /* CRITICAL: Include border in width calculation */
    overflow: hidden;             /* CRITICAL: Prevent child overflow */
}

.ai-response-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 12px 12px 0 0;
}

.ai-response-modal-header h3 {
    margin: 0;
    color: #569CD6;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.modal-header-buttons .copy-code-btn,
.modal-header-buttons .download-code-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.ai-response-modal .download-dropdown {
    z-index: 10001; /* Higher than modal (10000) */
}

.ai-response-modal-close {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.ai-response-modal-close:hover {
    background: #F48771;
    border-color: #F48771;
    color: #1E1E1E;
}

/* ============================================================================
   AI RESPONSE MODAL BODY - Professional Text Wrapping Solution
   Author: iDevOpsLLC
   Date: 2025-11-22 (Updated)

   DESIGN PRINCIPLES:
   1. Code blocks preserve formatting with their OWN horizontal scroll
   2. Regular text wraps naturally to prevent horizontal scrolling
   3. Modal body uses vertical scroll ONLY (no horizontal scroll on container)
   4. Proper box-sizing prevents width overflow from padding
   ============================================================================ */

.ai-response-modal-body {
    padding: 2rem;
    overflow-y: auto;      /* Vertical scroll for long content */
    overflow-x: hidden;    /* CRITICAL: NO horizontal scroll on modal body */
    flex: 1;
    box-sizing: border-box;  /* CRITICAL: Include padding in width calculation */
    min-width: 0;            /* CRITICAL: Allow flex item to shrink below content size */
    /* NO word-wrap/overflow-wrap on container - let children decide */
}

/* Custom scrollbar styling */
.ai-response-modal-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;         /* Add height for horizontal scrollbar */
}

.ai-response-modal-body::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 5px;
}

.ai-response-modal-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

.ai-response-modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================================================
   CODE BLOCKS - NEVER WRAP, PRESERVE FORMATTING
   ============================================================================ */

/* Code blocks (multi-line code with syntax highlighting) */
.ai-response-modal-body pre,
.ai-response-modal-body .code-block,
.ai-response-modal-body .ai-code-block,
.ai-response-modal-body .code-output pre {
    background: #1E1E1E;
    border: 1px solid #3E3E42;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    overflow-x: auto;             /* Enable horizontal scroll for long lines */
    overflow-y: auto;             /* Enable vertical scroll for many lines */
    white-space: pre;             /* CRITICAL: Preserve formatting, NO wrapping */
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 100%;              /* Prevent overflow beyond modal width */
    width: 100%;                  /* CRITICAL: Force code block to respect container width */
    box-sizing: border-box;       /* CRITICAL: Include padding/border in width calculation */
    word-wrap: normal;            /* CRITICAL: Override any inherited wrapping */
    overflow-wrap: normal;        /* CRITICAL: Override any inherited wrapping */
}

/* Code inside pre tags */
.ai-response-modal-body pre code,
.ai-response-modal-body .code-block code {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    white-space: pre;             /* CRITICAL: Preserve formatting */
    word-wrap: normal;            /* NO wrapping */
    overflow-wrap: normal;        /* NO wrapping */
    display: block;
    font-family: inherit;
    color: inherit;
}

/* Inline code (backtick code in text) */
.ai-response-modal-body code:not(pre code):not(.code-block code) {
    background: #2D2D30;
    color: #CE9178;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    border: 1px solid #3E3E42;
    font-family: 'Consolas', 'Segoe UI Mono', 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
    white-space: normal;          /* Allow inline code to wrap naturally */
    word-wrap: break-word;        /* Break long inline code at word boundaries */
    overflow-wrap: break-word;
}

/* ============================================================================
   REGULAR TEXT - NATURAL WRAPPING
   ============================================================================ */

/* Paragraphs and text content */
.ai-response-modal-body p,
.ai-response-modal-body div:not(.code-block):not(.ai-code-block),
.ai-response-modal-body span:not(pre span):not(code span) {
    word-wrap: break-word;        /* Wrap long words */
    overflow-wrap: break-word;    /* Modern browsers */
    white-space: normal;          /* Allow natural text wrapping */
    max-width: 100%;              /* Prevent overflow */
}

/* Headers */
.ai-response-modal-body h1,
.ai-response-modal-body h2,
.ai-response-modal-body h3,
.ai-response-modal-body h4,
.ai-response-modal-body h5,
.ai-response-modal-body h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

/* Lists */
.ai-response-modal-body ul,
.ai-response-modal-body ol,
.ai-response-modal-body li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Blockquotes */
.ai-response-modal-body blockquote {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    padding-left: 1rem;
    border-left: 3px solid #569CD6;
    margin: 1rem 0;
    color: #CCCCCC;
}

/* Tables - prevent overflow but allow horizontal scroll */
.ai-response-modal-body table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    border-collapse: collapse;
}

/* Images - responsive sizing */
.ai-response-modal-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem 0;
}

/* Links - allow wrapping but preserve functionality */
.ai-response-modal-body a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #569CD6;
    text-decoration: underline;
}

/* Strong and emphasis - inherit parent wrapping */
.ai-response-modal-body strong,
.ai-response-modal-body em {
    word-wrap: inherit;
    overflow-wrap: inherit;
}

/* Chat History Styles */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.analytics-card {
    background: #1E1E1E;
    border: 1px solid #3E3E42;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.analytics-card:hover {
    border-color: #569CD6;
    box-shadow: 0 4px 12px rgba(86, 156, 214, 0.2);
}

.analytics-card .value {
    font-size: 32px;
    font-weight: bold;
    color: #569CD6;
    margin: 10px 0;
}

.analytics-card .label {
    color: #858585;
    font-size: 14px;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: #1E1E1E;
}

.history-table th {
    background: #252526;
    color: #CCCCCC;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #3E3E42;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.history-table td {
    padding: 12px;
    border-bottom: 1px solid #3E3E42;
    color: #CCCCCC;
}

.history-table tr:hover {
    background: #2D2D30;
}

.action-btn {
    background: #3E3E42;
    color: #CCCCCC;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 5px;
    transition: all 0.3s;
}

.action-btn:hover {
    background: #569CD6;
    color: #FFF;
}

.action-btn.danger {
    background: #F48771;
    color: #000;
}

.action-btn.danger:hover {
    background: #E65D4D;
    color: #FFF;
}

.quick-action-btn i {
    font-size: 0.85rem;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .modern-tabs {
        gap: 0.25rem;
    }

    .modern-tab-btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .quick-templates-grid {
        grid-template-columns: 1fr;
    }

    .model-selection-modern {
        flex-direction: column;
    }

    .editor-toolbar-modern {
        flex-direction: column;
    }

    .editor-toolbar-modern button {
        width: 100%;
    }
}
/* ===================================
   Security Scanner File Upload Styles
   =================================== */
.file-upload-area {
    margin-top: 1rem;
}

.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: #569CD6;
    background: rgba(102, 126, 234, 0.05);
    transform: scale(1.01);
}

.upload-zone i {
    font-size: 3rem;
    color: #569CD6;
    margin-bottom: 1rem;
}

.upload-zone h4 {
    color: var(--text-primary);
    margin: 1rem 0 0.5rem 0;
}

.upload-zone p {
    color: var(--text-secondary);
    margin: 0.25rem 0;
}

.file-size-limit {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.selected-files-list {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.selected-files-list h4 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#files-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.file-item:hover {
    border-color: #569CD6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-item i {
    color: #569CD6;
    font-size: 1.2rem;
}

.file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.file-name {
    color: var(--text-primary);
    font-weight: 500;
}

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

.upload-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.security-results-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.security-summary {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.security-summary h4 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.summary-item {
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.summary-item strong {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
}

.score-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1rem;
}

.score-excellent {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.score-good {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.score-warning {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.score-critical {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.file-results,
.vulnerability-breakdown,
.action-plan {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.file-results h4,
.vulnerability-breakdown h4,
.action-plan h4 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.file-result-item i {
    color: #569CD6;
}

.file-badge {
    padding: 0.25rem 0.5rem;
    background: rgba(102, 126, 234, 0.1);
    color: #569CD6;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-left: auto;
}

.error-badge {
    padding: 0.25rem 0.5rem;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border-radius: 4px;
    font-size: 0.85rem;
}

.vulnerability-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vulnerability-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.vulnerability-item i {
    color: #e74c3c;
}

.vuln-type {
    flex: 1;
    color: var(--text-primary);
}

.vuln-count {
    padding: 0.25rem 0.625rem;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

.action-phase {
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.action-phase.action-critical {
    border-left-color: #e74c3c;
}

.action-phase.action-high {
    border-left-color: #f39c12;
}

.action-phase.action-medium {
    border-left-color: #f1c40f;
}

.action-phase.action-low {
    border-left-color: #3498db;
}

.action-phase h5 {
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.action-phase ul {
    margin: 0;
    padding-left: 1.5rem;
}

.action-phase li {
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

.loading-spinner {
    text-align: center;
    padding: 3rem;
}

.loading-spinner i {
    font-size: 3rem;
    color: #569CD6;
    margin-bottom: 1rem;
}

.loading-spinner p {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .upload-zone {
        padding: 2rem 1rem;
    }

    .upload-zone i {
        font-size: 2rem;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .upload-actions {
        flex-direction: column;
    }

    .upload-actions button {
        width: 100%;
    }
}

/* ===================================
   Security Scanner File Upload Styles
   =================================== */

.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: #569CD6;
    background: rgba(102, 126, 234, 0.05);
    transform: scale(1.01);
}

.upload-zone i {
    font-size: 3rem;
    color: #569CD6;
    margin-bottom: 1rem;
    display: block;
}

.upload-zone h4 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

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

.upload-zone input[type="file"] {
    display: none;
}

/* Drag and Drop Styles */
.drop-zone-enabled {
    position: relative;
    transition: all 0.3s ease;
}

.drop-zone-enabled:hover {
    border-color: var(--primary-color);
    background: rgba(86, 156, 214, 0.05);
}

.drop-zone-enabled.drag-over {
    border-color: var(--primary-color);
    background: rgba(86, 156, 214, 0.15);
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(86, 156, 214, 0.3);
}

.drop-zone-enabled.drag-over::after {
    content: '📁 Drop files here';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    pointer-events: none;
    z-index: 10;
    background: var(--bg-secondary);
    padding: 1rem 2rem;
    border-radius: 8px;
    border: 2px dashed var(--primary-color);
}

.drop-zone-file-info {
    font-size: 0.875rem;
    color: var(--primary-color);
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(86, 156, 214, 0.1);
    border-radius: 4px;
    word-break: break-all;
}

.selected-files {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.file-item:last-child {
    margin-bottom: 0;
}

.file-item-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.file-item-info i {
    color: #569CD6;
}

.file-item-remove {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
}

.file-item-remove:hover {
    color: #c0392b;
}

.security-summary {
    background: linear-gradient(135deg, #569CD6 0%, #4A90D9 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.security-summary h4 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.summary-grid > div {
    background: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
}

.score-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.score-excellent {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

.score-good {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid #3498db;
}

.score-warning {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid #f1c40f;
}

.score-critical {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.file-results-section {
    margin-bottom: 2rem;
}

.file-result-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.file-result-card h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-result-card h5 i {
    color: #569CD6;
}

.file-stats {
    display: flex;
    gap: 2rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.file-stats span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.vulnerability-breakdown {
    margin-bottom: 2rem;
}

.vulnerability-breakdown h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.vulnerability-list {
    display: grid;
    gap: 0.75rem;
}

.vulnerability-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.vulnerability-item:hover {
    transform: translateX(4px);
    border-color: #569CD6;
}

.severity-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 80px;
    text-align: center;
}

.severity-critical {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.severity-high {
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
}

.severity-medium {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.severity-low {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.action-plan {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.action-plan h4 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.action-phases {
    display: grid;
    gap: 1.5rem;
}

.action-phase {
    border-left: 4px solid;
    padding-left: 1.5rem;
}

.action-phase.action-critical {
    border-left-color: #e74c3c;
}

.action-phase.action-high {
    border-left-color: #f39c12;
}

.action-phase.action-medium {
    border-left-color: #f1c40f;
}

.action-phase.action-low {
    border-left-color: #3498db;
}

.action-phase h5 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.action-items {
    list-style: none;
    padding: 0;
}

.action-items li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.action-items li:before {
    content: "→";
    color: #569CD6;
    font-weight: bold;
}

.scan-progress {
    text-align: center;
    padding: 2rem;
}

.scan-progress .spinner {
    border: 4px solid var(--border-color);
    border-top: 4px solid #569CD6;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .upload-zone {
        padding: 2rem 1rem;
    }

    .upload-zone i {
        font-size: 2rem;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .file-stats {
        flex-direction: column;
        gap: 0.5rem;
    }

    .vulnerability-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-phase {
        padding-left: 1rem;
    }
}

/* ===================================
   Performance Profiler Styles
   =================================== */

.performance-summary {
    background: linear-gradient(135deg, #569CD6 0%, #4A90D9 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.performance-summary h4 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.script-analysis-section {
    margin-top: 2rem;
}

.script-analysis-section h4 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.performance-script-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

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

.script-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.script-header h5 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.1rem;
}

.script-meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.script-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.issues-section,
.optimizations-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.issues-section h6,
.optimizations-section h6 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.issue-list {
    display: grid;
    gap: 0.75rem;
}

.issue-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
}

.issue-details {
    flex: 1;
}

.issue-details strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.issue-details p {
    color: var(--text-secondary);
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.issue-details small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.optimization-list {
    list-style: none;
    padding: 0;
}

.optimization-list li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.optimization-list li:before {
    content: "💡";
    margin-right: 0.5rem;
}

.analysis-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.text-warning {
    color: #f39c12 !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .script-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .script-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .issue-item {
        flex-direction: column;
    }
}

/* ===================================
   AI Toggle Styles
   =================================== */

.upload-options {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.ai-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.ai-toggle-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #569CD6;
}

.ai-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-toggle-text i {
    color: #569CD6;
    margin-right: 0.5rem;
}

.ai-toggle-text small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ai-toggle-label:hover .ai-toggle-text {
    color: #569CD6;
}

/* Mode Badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.mode-badge.static {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.mode-badge.ai-enhanced {
    background: rgba(102, 126, 234, 0.1);
    color: #569CD6;
}

.mode-badge i {
    font-size: 1rem;
}


/* ===================================================================
   Testing Framework Tabbed Interface Styles
   =================================================================== */

.tool-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
    padding-bottom: 0;
}

.tab-btn {
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-btn i {
    margin-right: 0.5rem;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

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

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-group label i {
    margin-right: 0.5rem;
    color: var(--primary);
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

textarea.form-input {
    resize: vertical;
    min-height: 100px;
    font-family: 'Courier New', monospace;
}

textarea.code-textarea {
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

select.form-input {
    cursor: pointer;
}

/* Upload Zone - Drag and Drop */
.upload-zone {
    position: relative;
    padding: 3rem;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: var(--primary);
    background: rgba(102, 126, 234, 0.05);
}

.upload-zone.drag-over {
    border-color: var(--primary);
    background: rgba(102, 126, 234, 0.1);
    transform: scale(1.02);
}

.upload-zone i.fa-cloud-upload-alt {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

/* Test Suite List */
.suite-list {
    display: grid;
    gap: 1rem;
}

.suite-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.suite-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.suite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.suite-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.suite-header i {
    margin-right: 0.5rem;
    color: var(--primary);
}

.suite-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.suite-meta i {
    margin-right: 0.5rem;
}

.suite-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Coverage Stats */
.coverage-stats {
    margin-bottom: 2rem;
}

.coverage-chart {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Code Display */
.code-display {
    background: #1a1a1a;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    overflow-x: auto;
}

.code-display pre {
    margin: 0;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #e0e0e0;
}

.code-display code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Test Selector */
.test-selector {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    min-height: 150px;
}

/* Error Messages */
.error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: var(--accent-red);
}

.error-message i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Data Setup Result */
.data-setup-result {
    display: grid;
    gap: 1rem;
}

.code-section h5 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.code-section h5 i {
    margin-right: 0.5rem;
    color: var(--primary);
}

/* Loading States */
.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.loading i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .tool-tabs {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        font-size: 12px;
        padding: 0.6rem 1rem;
    }

    .suite-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .coverage-stats {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   Design Components Styles
   =================================== */

/* Design Component Cards */
.design-component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.component-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.component-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(86, 156, 214, 0.15);
}

.component-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.component-header h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.component-header h3 i {
    color: var(--accent-blue);
}

.component-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.component-badge.active {
    background: rgba(78, 201, 176, 0.15);
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.component-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Theme Preview Styles */
.theme-preview {
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.preview-colors {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.color-swatch {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    transition: transform 0.2s;
}

.color-swatch:hover {
    transform: scale(1.1);
    border-color: var(--accent-blue);
}

.preview-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-text span {
    font-size: 0.9rem;
}

/* Branding Preview Styles */
.branding-preview {
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
}

.branding-logo {
    text-align: center;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.branding-logo i {
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.branding-logo p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0.5rem 0 0 0;
}

.branding-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.branding-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.branding-item .label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.branding-item .value {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

.color-display {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
}

/* Design Token Styles */
.token-categories {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.token-category {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.token-category h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.token-category h3 i {
    color: var(--accent-blue);
}

.token-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.token-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

.token-item:hover {
    border-color: var(--accent-blue);
    background: var(--hover-color);
}

.token-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.token-name {
    color: var(--accent-blue);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 600;
}

.token-value {
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.token-preview {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
}

/* Layout Preview Styles */
.layout-preview {
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
}

.layout-wireframe {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 1rem;
    min-height: 120px;
}

.wireframe-header {
    height: 20px;
    background: var(--accent-blue);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.wireframe-body {
    display: flex;
    gap: 0.5rem;
    height: 80px;
}

.wireframe-sidebar {
    width: 30%;
    background: var(--accent-blue);
    border-radius: 4px;
    opacity: 0.4;
}

.wireframe-content {
    flex: 1;
    background: var(--accent-blue);
    border-radius: 4px;
    opacity: 0.3;
}

.wireframe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    height: 80px;
}

.wireframe-item {
    background: var(--accent-blue);
    border-radius: 4px;
    opacity: 0.4;
}

.wireframe-single {
    height: 80px;
    background: var(--accent-blue);
    border-radius: 4px;
    opacity: 0.4;
}

.wireframe-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    height: 80px;
}

.wireframe-col {
    background: var(--accent-blue);
    border-radius: 4px;
    opacity: 0.4;
}

.layout-details {
    display: flex;
    gap: 1rem;
}

.layout-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.layout-item i {
    color: var(--accent-blue);
}

/* Design Component Card Styling */
.tool-card.design-component {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.tool-card.design-component:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px rgba(86, 156, 214, 0.15);
}

.tool-card.design-component .tool-icon {
    background: rgba(86, 156, 214, 0.15);
    color: var(--accent-blue);
}

/* Responsive Design for Components */
@media (max-width: 1200px) {
    .design-component-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .design-component-grid {
        grid-template-columns: 1fr;
    }

    .component-actions {
        flex-direction: column;
    }

    .component-actions button {
        width: 100%;
    }
}

/* Collapsible Section Styles */
.collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.collapsible-header:hover {
    color: var(--accent-blue);
}

.collapsible-header span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-icon {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 0;
}

.tool-category.collapsed .collapsible-content {
    max-height: 0;
}

/* Reduce margin for collapsed sections to minimize dead space */
.tool-category.collapsed {
    margin-bottom: 0;
}

/* Remove extra space below last collapsed section before footer */
.tool-category.collapsed:last-of-type {
    margin-bottom: 0 !important;
}

/* Remove margin from tools-row when collapsed */
.tool-category.collapsed .tools-row {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Remove extra margins from collapsed section headers */
.tool-category.collapsed h2 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* Ensure toggle icon doesn't add spacing when collapsed */
.tool-category.collapsed .toggle-icon {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

/* Ensure collapsed header span doesn't add spacing */
.tool-category.collapsed .collapsible-header span {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide subtitles in collapsed sections */
.tool-category.collapsed .category-subtitle {
    display: none;
}

/* ============================================================================
 * Marketing Header Component Styles
 * Author: iDevOpsLLC
 * Date: 2025-11-18
 * ============================================================================ */

/* Marketing Header Container */
.marketing-header {
    background: linear-gradient(135deg,
        rgba(86, 156, 214, 0.05) 0%,
        rgba(78, 201, 176, 0.03) 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 2rem 2rem 2rem;
    position: relative;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
}

/* Subtle animated background effect */
.marketing-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(86, 156, 214, 0.03) 0%,
        transparent 50%
    );
    animation: pulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.8;
    }
}

.marketing-header-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Main Headline */
.marketing-headline {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    position: relative;
}

.marketing-headline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(86, 156, 214, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: -1;
}

/* Workflow Steps Container */
.workflow-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0 1rem;
    position: relative;
}

/* Animated AI flow line behind workflow steps */
.workflow-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(86, 156, 214, 0.3) 25%,
        rgba(78, 201, 176, 0.4) 50%,
        rgba(86, 156, 214, 0.3) 75%,
        transparent 100%);
    background-size: 200% 100%;
    transform: translateY(-50%);
    z-index: 0;
    animation: flowLine 3s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes flowLine {
    0% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
}

/* Individual Workflow Step */
.workflow-step {
    background: var(--bg-secondary);
    border: 1px solid transparent;
    background-image: linear-gradient(var(--bg-secondary), var(--bg-secondary)),
                      linear-gradient(135deg, rgba(86, 156, 214, 0.3), rgba(78, 201, 176, 0.2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 20px;
    padding: 0.75rem 1.125rem;
    transition: all 0.3s ease;
    position: relative;
}

.workflow-step:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(86, 156, 214, 0.25),
                0 0 20px rgba(86, 156, 214, 0.15);
    filter: brightness(1.1);
}

.step-text {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Workflow Arrows */
.workflow-arrow {
    color: var(--accent-blue);
    font-size: 1.125rem;
    opacity: 0.85;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease;
}

.workflow-arrow i {
    filter: drop-shadow(0 0 8px rgba(86, 156, 214, 0.4));
}

/* Key Metric Section */
.key-metric {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.metric-text {
    color: var(--text-primary);
    font-weight: 400;
}

.metric-highlight {
    color: var(--accent-green);
    font-weight: 700;
    font-size: 1.5rem;
    padding: 0 0.3rem;
    position: relative;
    display: inline-block;
}

/* Highlight effect */
.metric-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
    border-radius: 2px;
}

/* Supporting Text */
.supporting-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 400;
}

/* Responsive Design - Tablet */
@media (max-width: 1024px) {
    .marketing-header {
        padding: 2.5rem 1.5rem;
    }

    .marketing-headline {
        font-size: 2.75rem;
    }

    .workflow-steps {
        gap: 0.75rem;
    }

    .workflow-step {
        padding: 0.6rem 1.2rem;
    }

    .step-text {
        font-size: 0.9rem;
    }

    .key-metric {
        font-size: 1.3rem;
    }

    .metric-highlight {
        font-size: 1.6rem;
    }

    .supporting-text {
        font-size: 1rem;
    }
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    .marketing-header {
        padding: 2rem 1rem;
    }

    .marketing-headline {
        font-size: 1.75rem;
    }

    .workflow-steps {
        flex-direction: column;
        gap: 0.5rem;
    }

    .workflow-arrow {
        transform: rotate(90deg);
    }

    .workflow-step {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    .key-metric {
        font-size: 1.1rem;
    }

    .metric-highlight {
        font-size: 1.4rem;
        display: block;
        margin: 0.25rem 0;
    }

    .supporting-text {
        font-size: 0.95rem;
    }
}

/* Hero Separator */
.hero-separator {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(86, 156, 214, 0.3) 20%,
        rgba(78, 201, 176, 0.3) 50%,
        rgba(86, 156, 214, 0.3) 80%,
        transparent 100%
    );
    margin: 0 2rem;
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .workflow-step {
        border-width: 2px;
    }

    .metric-highlight {
        text-decoration: underline;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .marketing-header::before {
        animation: none;
    }

    .workflow-step {
        transition: none;
    }

    .workflow-step:hover {
        transform: none;
    }
}

/* ============================================================================
 * AI Usage Limit Banner Styles
 * ============================================================================ */

/* Usage Limit Banner Container */
.usage-limit-banner {
    background: linear-gradient(135deg,
        rgba(86, 156, 214, 0.08) 0%,
        rgba(78, 201, 176, 0.05) 100%);
    border: 1px solid rgba(86, 156, 214, 0.3);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.usage-limit-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(86, 156, 214, 0.05) 50%,
        transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
}

.usage-limit-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.usage-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
}

.usage-text i {
    color: #569CD6;
    font-size: 1.1rem;
}

.usage-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.usage-progress-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.usage-progress-bar {
    height: 100%;
    background: #4EC9B0;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
}

.usage-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.usage-upgrade-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, #569CD6 0%, #4EC9B0 100%);
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(86, 156, 214, 0.3);
}

.usage-upgrade-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(86, 156, 214, 0.4);
    background: linear-gradient(135deg, #4EC9B0 0%, #569CD6 100%);
}

.usage-upgrade-link i {
    font-size: 1rem;
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    .usage-limit-banner {
        flex-direction: column;
        padding: 1rem;
        margin: 1rem;
    }

    .usage-upgrade-link {
        width: 100%;
        justify-content: center;
    }

    .usage-text {
        font-size: 0.85rem;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .usage-limit-banner {
        animation: none;
    }

    .usage-limit-banner::before,
    .usage-progress-bar::after {
        animation: none;
    }

    .usage-upgrade-link:hover {
        transform: none;
    }
}

/* ============================================================================
 * Enhanced Rate Limit Banner with Countdown - 2025-12-10
 * Author: iDevOpsLLC
 * Features: Progress bar, countdown timer, color-coded status
 * ============================================================================ */

/* Banner Layout */
.usage-limit-banner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    margin: 0 0 20px 0;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.usage-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.usage-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.usage-right {
    display: flex;
    align-items: center;
}

/* Usage Icon */
.usage-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.usage-icon.good {
    background: rgba(78, 201, 176, 0.15);
    color: #4EC9B0;
}

.usage-icon.moderate {
    background: rgba(220, 220, 170, 0.15);
    color: #DCDCAA;
}

.usage-icon.warning {
    background: rgba(206, 145, 120, 0.15);
    color: #CE9178;
}

.usage-icon.critical {
    background: rgba(244, 71, 71, 0.15);
    color: #F44747;
    animation: pulse 1.5s ease-in-out infinite;
}

.usage-icon.unlimited {
    background: rgba(86, 156, 214, 0.15);
    color: #569CD6;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Usage Details */
.usage-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.usage-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.usage-text strong {
    color: var(--text-primary);
}

.usage-count {
    font-weight: 700;
    font-size: 1.1rem;
}

.usage-limit {
    font-weight: 600;
    color: var(--text-secondary);
}

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

.usage-reset {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Unlimited Badge */
.unlimited-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(86, 156, 214, 0.2);
    color: #569CD6;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Countdown Timer */
.usage-countdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.countdown-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.countdown-timer {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-tertiary);
    padding: 6px 12px;
    border-radius: 6px;
    min-width: 130px;
    text-align: center;
}

.countdown-timer.urgent {
    color: #F44747;
    background: rgba(244, 71, 71, 0.1);
    animation: urgentPulse 1s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Progress Bar Container */
.usage-progress-container {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: visible;
}

.usage-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.3s ease;
    box-shadow: 0 0 10px rgba(78, 201, 176, 0.3);
}

/* Progress Markers */
.usage-progress-markers {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.usage-progress-markers .marker {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--text-muted);
}

.usage-progress-markers .marker.warning {
    color: #CE9178;
}

/* Banner Status Colors */
.usage-limit-banner.good {
    background: linear-gradient(135deg, rgba(78, 201, 176, 0.08) 0%, rgba(86, 156, 214, 0.05) 100%);
    border: 1px solid rgba(78, 201, 176, 0.3);
}

.usage-limit-banner.moderate {
    background: linear-gradient(135deg, rgba(220, 220, 170, 0.08) 0%, rgba(78, 201, 176, 0.05) 100%);
    border: 1px solid rgba(220, 220, 170, 0.3);
}

.usage-limit-banner.warning {
    background: linear-gradient(135deg, rgba(206, 145, 120, 0.08) 0%, rgba(220, 220, 170, 0.05) 100%);
    border: 1px solid rgba(206, 145, 120, 0.3);
}

.usage-limit-banner.critical {
    background: linear-gradient(135deg, rgba(244, 71, 71, 0.1) 0%, rgba(206, 145, 120, 0.05) 100%);
    border: 1px solid rgba(244, 71, 71, 0.4);
}

.usage-limit-banner.unlimited {
    background: linear-gradient(135deg, rgba(86, 156, 214, 0.08) 0%, rgba(78, 201, 176, 0.05) 100%);
    border: 1px solid rgba(86, 156, 214, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .usage-banner-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .usage-right {
        width: 100%;
    }

    .usage-countdown {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: 100%;
        justify-content: space-between;
    }

    .countdown-timer {
        min-width: auto;
    }

    .usage-progress-markers {
        display: none;
    }
}

/* ============================================================================
 * Collapsible Rate Limit Banner Styles - 2025-12-10
 * Author: iDevOpsLLC
 * ============================================================================ */

/* Collapsed View */
.usage-limit-banner.collapsed {
    padding: 10px 16px;
    cursor: pointer;
}

.usage-collapsed-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.usage-collapsed-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usage-mini-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.usage-mini-icon.good {
    background: rgba(78, 201, 176, 0.15);
    color: #4EC9B0;
}

.usage-mini-icon.moderate {
    background: rgba(220, 220, 170, 0.15);
    color: #DCDCAA;
}

.usage-mini-icon.warning {
    background: rgba(206, 145, 120, 0.15);
    color: #CE9178;
}

.usage-mini-icon.critical {
    background: rgba(244, 71, 71, 0.15);
    color: #F44747;
    animation: pulse 1.5s ease-in-out infinite;
}

.usage-mini-icon.unlimited {
    background: rgba(86, 156, 214, 0.15);
    color: #569CD6;
}

.usage-mini-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.usage-mini-timer {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.usage-mini-timer.urgent {
    color: #F44747;
    background: rgba(244, 71, 71, 0.1);
}

.usage-expand-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.usage-collapsed-view:hover .usage-expand-btn {
    background: var(--accent-blue);
    color: white;
}

/* Expanded View */
.usage-limit-banner.expanded {
    padding: 16px 20px;
}

.usage-expanded-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.usage-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    margin-top: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.usage-collapse-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Status-based collapsed banner styles */
.usage-limit-banner.collapsed[data-status="good"] {
    background: linear-gradient(90deg, rgba(78, 201, 176, 0.08) 0%, transparent 100%);
    border-left: 3px solid #4EC9B0;
}

.usage-limit-banner.collapsed[data-status="moderate"] {
    background: linear-gradient(90deg, rgba(220, 220, 170, 0.08) 0%, transparent 100%);
    border-left: 3px solid #DCDCAA;
}

.usage-limit-banner.collapsed[data-status="warning"] {
    background: linear-gradient(90deg, rgba(206, 145, 120, 0.08) 0%, transparent 100%);
    border-left: 3px solid #CE9178;
}

.usage-limit-banner.collapsed[data-status="critical"] {
    background: linear-gradient(90deg, rgba(244, 71, 71, 0.1) 0%, transparent 100%);
    border-left: 3px solid #F44747;
}

.usage-limit-banner.collapsed[data-status="unlimited"] {
    background: linear-gradient(90deg, rgba(86, 156, 214, 0.08) 0%, transparent 100%);
    border-left: 3px solid #569CD6;
}

/* Responsive for collapsed view */
@media (max-width: 576px) {
    .usage-mini-timer {
        display: none;
    }

    .usage-mini-text {
        font-size: 0.85rem;
    }
}

/* ============================================================================
 * Pay-Per-Story Banner Styles (Phase 1 Release)
 * Purpose: Display credit balance and story pricing for pay-per-story users
 * Author: iDevOpsLLC
 * Date: 2025-12-14
 * ============================================================================ */

/* Pricing display in expanded view */
.usage-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.pricing-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-green);
}

/* Stories info section */
.usage-stories-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-top: 12px;
}

.stories-count {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stories-count i {
    color: var(--accent-blue);
}

.stories-count span {
    font-weight: 600;
    color: var(--text-primary);
}

/* Add Credits button */
.btn-add-credits {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent-green) 0%, #3BA395 100%);
    color: #1E1E1E;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-credits:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(78, 201, 176, 0.3);
}

.btn-add-credits:active {
    transform: translateY(0);
}

/* Credit amount status colors */
.credit-amount {
    font-weight: 600;
    font-size: 1.1rem;
}

.credit-amount.good {
    color: var(--accent-green);
}

.credit-amount.moderate {
    color: var(--accent-yellow);
}

.credit-amount.warning {
    color: var(--accent-orange);
}

.credit-amount.critical {
    color: var(--accent-red);
}

/* Pay-per-story mode specific banner styling */
.usage-limit-banner[data-mode="pay-per-story"] {
    background: linear-gradient(135deg, rgba(78, 201, 176, 0.08) 0%, rgba(86, 156, 214, 0.05) 100%);
    border: 1px solid rgba(78, 201, 176, 0.3);
}

.usage-limit-banner[data-mode="pay-per-story"][data-status="critical"] {
    background: linear-gradient(135deg, rgba(244, 71, 71, 0.1) 0%, rgba(206, 145, 120, 0.05) 100%);
    border: 1px solid rgba(244, 71, 71, 0.4);
}

.usage-limit-banner[data-mode="pay-per-story"][data-status="warning"] {
    background: linear-gradient(135deg, rgba(206, 145, 120, 0.08) 0%, rgba(220, 220, 170, 0.05) 100%);
    border: 1px solid rgba(206, 145, 120, 0.3);
}

/* Responsive adjustments for pay-per-story */
@media (max-width: 768px) {
    .usage-stories-info {
        flex-direction: column;
        gap: 12px;
    }

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

    .usage-pricing {
        align-items: center;
    }
}

/* ============================================================================
 * SNLab Code Copilot Documentation Styles
 * Purpose: Professional technical documentation formatting
 * Author: iDevOpsLLC
 * Date: 2025-11-21
 * ============================================================================ */

:root {
  --doc-bg-elevated: #2D2D30;
  --doc-border-subtle: #3C3C3C;
  --doc-text-muted: #9E9E9E;
  --doc-text-strong: #FFFFFF;
  --doc-info: #4FC1FF;
  --doc-info-soft: rgba(79, 193, 255, 0.18);
  --doc-success-soft: rgba(78, 201, 176, 0.18);
  --doc-code-bg: #1B1B1B;
  --doc-code-border: #3A3D41;
  --doc-font-mono: 'Fira Code', Consolas, monospace;
  --doc-font-size-xs: 0.75rem;
  --doc-font-size-sm: 0.875rem;
  --doc-font-size-md: 1rem;
  --doc-font-size-lg: 1.125rem;
  --doc-font-size-xl: 1.375rem;
  --doc-font-size-xxl: 1.75rem;
  --doc-line-height-base: 1.7;
  --doc-letter-spacing-base: 0.01em;
  --doc-space-xs: 0.25rem;
  --doc-space-sm: 0.5rem;
  --doc-space-md: 0.75rem;
  --doc-space-lg: 1rem;
  --doc-space-xl: 1.5rem;
  --doc-space-xxl: 2rem;
  --doc-border-radius-sm: 3px;
  --doc-border-radius-md: 4px;
  --doc-border-radius-lg: 6px;
}

.documentation-section h1,
.documentation-section h2,
.documentation-section h3,
.documentation-section h4,
.documentation-section h5,
.documentation-section h6 {
  font-weight: 600;
  color: var(--doc-text-strong);
  margin-top: var(--doc-space-xl);
  margin-bottom: var(--doc-space-sm);
  line-height: 1.3;
}

.documentation-section h1 {
  font-size: var(--doc-font-size-xxl);
  margin-top: 0;
  margin-bottom: var(--doc-space-lg);
}

.documentation-section h2,
.documentation-section h4 {
  font-size: var(--doc-font-size-xl);
  border-bottom: 1px solid var(--doc-border-subtle);
  padding-bottom: var(--doc-space-xs);
  margin-top: var(--doc-space-xxl);
  margin-bottom: var(--doc-space-md);
}

.documentation-section h3,
.documentation-section h5 {
  font-size: var(--doc-font-size-lg);
  margin-top: var(--doc-space-xl);
  margin-bottom: var(--doc-space-sm);
}

.documentation-section p {
  margin-top: 0;
  margin-bottom: var(--doc-space-md);
  line-height: var(--doc-line-height-base);
  letter-spacing: var(--doc-letter-spacing-base);
}

.documentation-section ul,
.documentation-section ol {
  margin: 0 0 var(--doc-space-md) var(--doc-space-lg);
  padding: 0;
}

.documentation-section li {
  margin-bottom: var(--doc-space-xs);
  line-height: var(--doc-line-height-base);
}

.documentation-section strong {
  color: var(--doc-text-strong);
  font-weight: 600;
}

.documentation-section {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--doc-border-radius-lg);
  padding: var(--doc-space-xxl);
  margin-bottom: var(--doc-space-xxl);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.doc-section {
  background-color: var(--doc-bg-elevated);
  border-left: 3px solid rgba(86, 156, 214, 0.25);
  border-radius: var(--doc-border-radius-md);
  padding: var(--doc-space-lg);
  margin-top: var(--doc-space-lg);
  margin-bottom: var(--doc-space-lg);
}

.documentation-section .doc-section {
  margin-left: var(--doc-space-md);
}

.doc-section > h4,
.doc-section > h5 {
  margin-top: 0;
}

.alert {
  position: relative;
  margin: var(--doc-space-md) 0;
  padding: var(--doc-space-md) var(--doc-space-lg);
  border-radius: var(--doc-border-radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--doc-bg-elevated);
  color: var(--text-primary);
  font-size: var(--doc-font-size-sm);
  line-height: var(--doc-line-height-base);
}

.alert-info {
  border-color: var(--doc-info);
  background-color: var(--doc-info-soft);
}

.alert-success {
  border-color: var(--accent-green);
  background-color: var(--doc-success-soft);
}

.documentation-section code {
  font-family: var(--doc-font-mono);
  font-size: 0.95em;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 0 0.125rem;
  border-radius: var(--doc-border-radius-sm);
}

.documentation-section pre {
  font-family: var(--doc-font-mono);
  font-size: 0.95em;
  line-height: 1.6;
  background-color: var(--doc-code-bg);
  color: var(--text-primary);
  border-radius: var(--doc-border-radius-md);
  border: 1px solid var(--doc-code-border);
  padding: var(--doc-space-md) var(--doc-space-lg);
  margin: 0 0 var(--doc-space-lg);
  overflow-x: auto;
}

@media (max-width: 768px) {
  .documentation-section {
    padding: var(--doc-space-lg);
  }
  .doc-section {
    margin-left: 0;
  }
}

/* Mobile Responsiveness for Chat Input Buttons */
@media (max-width: 480px) {
    .chat-input-workspace > div {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .file-attach-wrapper,
    .btn-primary {
        width: 100% !important;
    }

    .file-attach-wrapper button,
    .chat-input-workspace .btn-primary {
        width: 100% !important;
        justify-content: center;
    }
}

@media print {
  .documentation-section {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   n8n-Style Workflow Connectors - Consistent Across All Modules
   ============================================================ */

.n8n-connector {
    display: flex;
    align-items: center;
    color: var(--accent-green);
}

.n8n-connector-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, transparent 50%, var(--accent-green) 50%, var(--accent-green) 100%);
    background-size: 8px 2px;
    animation: n8n-dash 1s linear infinite;
}

.n8n-connector-arrow {
    font-size: 16px;
    margin-left: -2px;
}

.n8n-connector-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--accent-green);
    height: 30px;
}

.n8n-connector-line-vertical {
    width: 2px;
    height: 25px;
    background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--accent-green) 50%, var(--accent-green) 100%);
    background-size: 2px 8px;
    animation: n8n-dash-vertical 1s linear infinite;
}

/* Blue variant for Fast Mode workflows */
.n8n-connector.blue {
    color: var(--accent-blue);
}

.n8n-connector.blue .n8n-connector-line {
    background: linear-gradient(90deg, transparent 0%, transparent 50%, var(--accent-blue) 50%, var(--accent-blue) 100%);
    background-size: 8px 2px;
    animation: n8n-dash 1s linear infinite;
}

.n8n-connector-vertical.blue {
    color: var(--accent-blue);
}

.n8n-connector-vertical.blue .n8n-connector-line-vertical {
    background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--accent-blue) 50%, var(--accent-blue) 100%);
    background-size: 2px 8px;
    animation: n8n-dash-vertical 1s linear infinite;
}

/* Split connectors for parallel workflows */
.n8n-split-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}

.n8n-split-line {
    width: 2px;
    height: 15px;
    background: var(--accent-green);
}

.n8n-split-horizontal {
    display: flex;
    align-items: center;
    gap: 0;
}

.n8n-split-branch {
    height: 2px;
    width: 60px;
    background: var(--accent-green);
}

.n8n-merge-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}

.n8n-step-label {
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    margin: 10px 0;
    padding: 4px 12px;
    background: rgba(78, 201, 176, 0.1);
    border-radius: 12px;
    display: inline-block;
}

@keyframes n8n-dash {
    to {
        background-position: 8px 0;
    }
}

@keyframes n8n-dash-vertical {
    to {
        background-position: 0 8px;
    }
}

/* ===========================================
   Credit Balance Banner (replaces old usage-limit-banner)
   =========================================== */

.credit-balance-banner {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.credit-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
}

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

.credit-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(86, 156, 214, 0.15);
    color: var(--accent-blue);
}

.credit-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.credit-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

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

.credit-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* State variations */
.credit-balance-banner.admin {
    border-color: rgba(197, 134, 192, 0.4);
    background: linear-gradient(135deg, rgba(197, 134, 192, 0.08) 0%, rgba(86, 156, 214, 0.05) 100%);
}

.credit-balance-banner.admin .credit-icon {
    background: rgba(197, 134, 192, 0.15);
    color: var(--accent-purple);
}

.credit-balance-banner.has-credits {
    border-color: rgba(78, 201, 176, 0.4);
    background: linear-gradient(135deg, rgba(78, 201, 176, 0.08) 0%, rgba(86, 156, 214, 0.05) 100%);
}

.credit-balance-banner.has-credits .credit-icon {
    background: rgba(78, 201, 176, 0.15);
    color: var(--accent-green);
}

.credit-balance-banner.no-credits {
    border-color: rgba(206, 145, 120, 0.4);
    background: linear-gradient(135deg, rgba(206, 145, 120, 0.1) 0%, rgba(244, 71, 71, 0.05) 100%);
}

.credit-balance-banner.no-credits .credit-icon {
    background: rgba(206, 145, 120, 0.15);
    color: var(--accent-orange);
}

.buy-credits-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent-green) 0%, #3DA891 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.buy-credits-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.buy-credits-btn i {
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .credit-balance-banner {
        padding: 10px 12px;
    }

    .credit-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .credit-right {
        width: 100%;
    }

    .buy-credits-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
 * Full Code Modal - View Complete Code
 * ============================================================================ */
.full-code-modal-overlay {
    display: flex;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.full-code-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.full-code-modal {
    background: #252526;
    border: 1px solid #569CD6;
    border-radius: 12px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.full-code-modal-overlay.active .full-code-modal {
    transform: scale(1);
}

.full-code-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #3E3E42;
    background: #1E1E1E;
    border-radius: 12px 12px 0 0;
}

.full-code-modal-header h3 {
    font-size: 1.3em;
}

.full-code-modal-close {
    background: transparent;
    border: 1px solid #3E3E42;
    color: #858585;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}

.full-code-modal-close:hover {
    background: #F44747;
    border-color: #F44747;
    color: #FFFFFF;
}

.full-code-modal-body {
    padding: 20px;
    overflow: auto;
    flex: 1;
}

.full-code-modal-body pre {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

.full-code-modal-body code {
    font-family: inherit;
}

/* Responsive adjustments for full code modal */
@media (max-width: 768px) {
    .full-code-modal {
        width: 95%;
        max-height: 95vh;
    }

    .full-code-modal-header {
        padding: 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .full-code-modal-header h3 {
        font-size: 1.1em;
    }

    .full-code-modal-body {
        padding: 15px;
    }

    .full-code-modal-body pre {
        font-size: 12px;
    }
}

/* ================================================================
   AI COPILOT - CONSOLIDATED FIXES (All Tabs)
   Author: iDevOpsLLC
   Date: 2025-12-27
   Purpose: Fix overflow, backgrounds, and colors across all tabs
   ================================================================ */

/* AGGRESSIVE overflow prevention - NO horizontal scroll */
html, body {
    overflow-x: hidden !important;
}

.modern-tab-content {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.modern-tab-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Main content containers - clip overflow */
.main-content, .content-area, .tab-content,
.result-container, .result-modern, .result-content-modern,
.code-generator-container, .dev-chat-container,
.optimizer-container, .explainer-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Force dark background on ALL code elements - NO SCROLL */
pre, code, .code-output-modern, .code-output-modern pre,
.code-output-modern code, #code-result, #optimized-code {
    background: #1E1E1E !important;
    color: #D4D4D4 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Analysis sections - consistent styling */
.servicenow-analysis, .code-review, .optimization-result,
[class*="analysis"], [class*="suggestion"] {
    background: #252526 !important;
    border: 1px solid #3E3E42 !important;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}

/* Explanation container - neutral theme (no blue) */
.explanation-container {
    background: #252526 !important;
    border: 1px solid #3E3E42 !important;
    border-left: 4px solid #4EC9B0 !important;
    max-width: 100%;
    overflow: hidden;
}

/* Message content - FORCE no overflow */
.message-content-modern, .message-content-modern p,
.explanation-text, .explanation-text p,
.result-content-modern, .chat-message, .message-bubble,
.ai-message, .user-message, .assistant-message {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* Chat containers - clip all overflow */
.chat-container, .chat-messages, .messages-container,
.chat-area, .chat-content, #chat-messages, #chatMessages {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Simplified syntax highlighting - VS Code theme */
.token { color: #D4D4D4 !important; }
.token.keyword { color: #569CD6 !important; }
.token.string { color: #CE9178 !important; }
.token.comment { color: #6A9955 !important; }
.token.function, .token.class-name { color: #DCDCAA !important; }
.token.number { color: #B5CEA8 !important; }

/* Button groups - keep buttons on ONE line */
.button-group, .result-header {
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
}

/* Download button container - keep inline with Copy Code */
.download-btn-container {
    display: inline-flex;
    position: relative;
}

/* Inline code styling */
code:not(pre code) {
    background: rgba(30, 30, 30, 0.9) !important;
    color: #CE9178 !important;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* UNIVERSAL CATCH-ALL - Force ALL content to respect boundaries */
.ai-copilot-page *,
.modern-layout *,
[class*="modern-"] *,
[class*="result"] *,
[class*="output"] *,
[class*="content"] * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tables and long text - force wrap */
table, th, td, tr {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Images and media - constrain */
img, video, iframe, svg, canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* ================================================================
   UI/UX FIXES - Generated Code & Code Review
   Author: iDevOpsLLC
   Date: 2025-12-27
   ================================================================ */

/* Generated Code Section - Better Layout */
.result-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: #252526 !important;
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 1px solid #3E3E42 !important;
    margin-bottom: 0 !important;
}

.result-header h4 {
    margin: 0 !important;
    font-size: 1rem !important;
    color: #4EC9B0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.result-header .button-group {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-left: auto !important;  /* Push buttons to the RIGHT */
}

/* Ensure Download container stays inline */
.result-header .button-group .download-btn-container {
    display: inline-flex !important;
    position: relative;
}

/* Hide button group during loading */
.result-header .button-group.hidden,
.button-group.loading-hidden {
    display: none !important;
}

/* Code Review Results - FLATTEN nested panels */
.code-review {
    background: #1E1E1E !important;
    border: 1px solid #3E3E42 !important;
    border-left: 3px solid #4EC9B0 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-top: 16px !important;
}

.code-review h5 {
    color: #4EC9B0 !important;
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #3E3E42 !important;
}

/* Quality Score - inline badge */
.quality-score {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.review-score {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* Summary - clean text */
.review-summary {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    color: #D4D4D4 !important;
    line-height: 1.5 !important;
}

/* Issues List - FLAT design, no nested boxes */
.review-issues {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.review-issues h6 {
    color: #F44747 !important;
    font-size: 0.95rem !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.review-issues ul,
.issues-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual Issues - simple rows, NOT nested cards */
.review-issues li,
.issues-list li {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    padding: 10px 0 10px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #2D2D2D !important;
}

.review-issues li:last-child,
.issues-list li:last-child {
    border-bottom: none !important;
}

/* Issue severity colors - just the left border */
.review-issues li.issue-security,
.review-issues li.issue-high,
.review-issues li.issue-critical {
    border-left-color: #F44747 !important;
}

.review-issues li.issue-performance,
.review-issues li.issue-medium,
.review-issues li.issue-warning {
    border-left-color: #CE9178 !important;
}

.review-issues li.issue-best-practice,
.review-issues li.issue-low,
.review-issues li.issue-info {
    border-left-color: #569CD6 !important;
}

/* Suggestion - inline, subtle styling */
.suggestion {
    display: block !important;
    background: rgba(86, 156, 214, 0.1) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    color: #9CDCFE !important;
    font-style: italic !important;
}

.suggestion i {
    color: #DCDCAA !important;
    margin-right: 4px !important;
}

/* Line info - subtle */
.line-info {
    display: inline-block !important;
    background: transparent !important;
    color: #6A6A6A !important;
    font-size: 0.85rem !important;
    margin-top: 4px !important;
}

/* Improvements - clean list */
.review-improvements {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 16px !important;
}

.review-improvements h6 {
    color: #4EC9B0 !important;
    margin-bottom: 8px !important;
}

.review-improvements ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.review-improvements li {
    padding: 6px 0 !important;
    color: #D4D4D4 !important;
    border-bottom: 1px solid #2D2D2D !important;
}

.review-improvements li:last-child {
    border-bottom: none !important;
}

/* Original Code details - clean toggle */
details.original-code,
details.improved-code,
details.after-review-code {
    background: #252526 !important;
    border: 1px solid #3E3E42 !important;
    border-radius: 6px !important;
    margin-top: 12px !important;
}

details summary {
    padding: 10px 14px !important;
    cursor: pointer !important;
    color: #D4D4D4 !important;
    font-weight: 500 !important;
    background: #2D2D2D !important;
    border-radius: 6px !important;
}

details[open] summary {
    border-radius: 6px 6px 0 0 !important;
    border-bottom: 1px solid #3E3E42 !important;
}

details .original-code-output,
details .improved-code-output,
details .after-review-code-output {
    padding: 12px !important;
    background: #1E1E1E !important;
}

/* ================================================================
   CODE OPTIMIZER - FLATTEN nested panels
   Author: iDevOpsLLC
   Date: 2025-12-27
   ================================================================ */

/* Main optimization results container */
.optimization-results {
    background: transparent !important;
    padding: 0 !important;
}

/* Score display - clean inline */
.optimization-results .score-display {
    background: #252526 !important;
    border: 1px solid #3E3E42 !important;
    border-left: 3px solid #4EC9B0 !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
}

.optimization-results .score-display h4 {
    margin: 0 !important;
    color: #D4D4D4 !important;
    font-size: 1rem !important;
}

.optimization-results .score {
    color: #4EC9B0 !important;
    font-weight: 600 !important;
}

/* Summary - simple text */
.optimization-results .summary {
    background: transparent !important;
    border: none !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #3E3E42 !important;
}

.optimization-results .summary p {
    margin: 0 !important;
    color: #D4D4D4 !important;
    line-height: 1.5 !important;
}

/* Collapsible sections - clean toggle */
.collapsible-section {
    background: transparent !important;
    border: none !important;
    margin-bottom: 12px !important;
}

.section-header {
    background: #252526 !important;
    border: 1px solid #3E3E42 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.section-header:hover {
    background: #2D2D2D !important;
}

.section-header h4 {
    margin: 0 !important;
    color: #D4D4D4 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.section-header .chevron-icon {
    transition: transform 0.2s ease !important;
    font-size: 0.8rem !important;
    color: #808080 !important;
}

.section-header:not(.collapsed) .chevron-icon {
    transform: rotate(90deg) !important;
}

.section-content {
    background: #1E1E1E !important;
    border: 1px solid #3E3E42 !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    padding: 12px !important;
    margin-top: -1px !important;
}

.section-content.collapsed {
    display: none !important;
}

/* Optimizations container - NO nested cards */
.optimizations {
    background: transparent !important;
    padding: 0 !important;
}

/* Individual optimization items - FLAT list, not cards */
.optimization-card {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid #CE9178 !important;
    padding: 10px 0 10px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #2D2D2D !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.optimization-card:last-child {
    border-bottom: none !important;
}

.optimization-card h6 {
    margin: 0 0 8px 0 !important;
    color: #CE9178 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

.optimization-card p {
    margin: 4px 0 !important;
    color: #D4D4D4 !important;
    line-height: 1.4 !important;
}

.optimization-card p strong {
    color: #9CDCFE !important;
}

.optimization-card em {
    color: #9CDCFE !important;
    font-style: italic !important;
}

/* Code examples in optimization cards */
.optimization-card .code-example {
    background: #1E1E1E !important;
    border: 1px solid #3E3E42 !important;
    border-radius: 4px !important;
    padding: 8px !important;
    margin-top: 8px !important;
}

.optimization-card .code-example pre {
    margin: 0 !important;
    background: transparent !important;
}

/* Optimized code section */
.optimized-code {
    background: #1E1E1E !important;
    border-radius: 4px !important;
    position: relative !important;
}

.optimized-code pre {
    margin: 0 !important;
    padding: 12px !important;
    background: #1E1E1E !important;
}

/* Success message */
.optimization-results .success {
    background: rgba(78, 201, 176, 0.1) !important;
    border: 1px solid rgba(78, 201, 176, 0.3) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    color: #4EC9B0 !important;
}

/* Error severity colors for optimization cards */
.optimization-card .text-critical,
.optimization-card .text-high {
    color: #F44747 !important;
}

.optimization-card .text-warning,
.optimization-card .text-medium {
    color: #CE9178 !important;
}

.optimization-card .text-info,
.optimization-card .text-low {
    color: #569CD6 !important;
}

/* ================================================================
   DEV CHAT - MODERN MINIMAL DESIGN (Less Colors)
   Author: iDevOpsLLC
   Date: 2025-12-27
   Design: Clean, neutral, ChatGPT/Claude inspired
   ================================================================ */

/* Chat container - clean background */
.chat-messages-modern,
.chat-messages,
.dev-chat-container .chat-area {
    background: #1E1E1E !important;
    border: none !important;
}

/* AI Message - subtle, no heavy colors */
.ai-message-modern,
.ai-message {
    background: #252526 !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}

/* User Message - slightly different shade, no green */
.user-message-modern,
.user-message {
    background: #2D2D2D !important;
    border: 1px solid #404040 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}

/* Welcome message - remove heavy blue, make subtle */
.chat-welcome,
.welcome-message,
.ai-message-modern:first-child {
    background: #252526 !important;
    border: 1px solid #3E3E42 !important;
    border-left: 3px solid #569CD6 !important;
}

/* Message avatars - neutral gray, not colorful */
.message-avatar {
    width: 32px !important;
    height: 32px !important;
    background: #404040 !important;
    border-radius: 6px !important;
}

.message-avatar i {
    color: #D4D4D4 !important;
    font-size: 1rem !important;
}

/* User avatar - same neutral style */
.user-message-modern .message-avatar,
.user-message .message-avatar {
    background: #4A4A4A !important;
}

/* Message content - clean typography */
.message-content-modern,
.message-content {
    color: #D4D4D4 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

.message-content-modern p:first-child,
.message-content p:first-child {
    margin-top: 0 !important;
}

/* Loading indicator - subtle, not red/orange */
.typing-indicator,
.ai-message.typing,
[class*="cooking"],
[class*="generating"] {
    color: #808080 !important;
}

.ai-message.typing .message-content,
.typing-indicator span {
    background: #252526 !important;
    color: #808080 !important;
    border: 1px solid #333 !important;
}

/* Override any bright loading colors */
.fa-spinner,
.fa-circle-notch {
    color: #808080 !important;
}

/* Quick samples - neutral pills */
.quick-samples button,
[class*="quick-sample"] {
    background: #2D2D2D !important;
    border: 1px solid #404040 !important;
    color: #D4D4D4 !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
}

.quick-samples button:hover,
[class*="quick-sample"]:hover {
    background: #3C3C3C !important;
    border-color: #569CD6 !important;
}

/* Chat input - clean */
.chat-input-container,
.chat-input-modern {
    background: #252526 !important;
    border: 1px solid #404040 !important;
    border-radius: 8px !important;
}

.chat-input-container textarea,
.chat-input-modern textarea,
.chat-input {
    background: transparent !important;
    border: none !important;
    color: #D4D4D4 !important;
}

.chat-input-container textarea:focus,
.chat-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Send button - only accent color */
.send-btn,
.chat-send-btn,
button[class*="send"] {
    background: #569CD6 !important;
    border: none !important;
    color: white !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
}

.send-btn:hover,
.chat-send-btn:hover {
    background: #4A8BC9 !important;
}

/* Attach file button - neutral */
.attach-btn,
button[class*="attach"] {
    background: #2D2D2D !important;
    border: 1px solid #404040 !important;
    color: #D4D4D4 !important;
}

/* Model selector - clean dropdown */
.model-selector,
.ai-model-selector {
    background: #252526 !important;
    border: 1px solid #404040 !important;
    color: #D4D4D4 !important;
}

/* Remove all gradients in chat area */
.dev-chat-container *,
.chat-messages-modern *,
#dev-chat * {
    background-image: none !important;
}

/* Code blocks in chat - dark */
.message-content-modern pre,
.message-content-modern code,
.ai-message pre,
.ai-message code {
    background: #1E1E1E !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
}

/* Collaboration header - clean */
.collaboration-header,
[class*="chat-header"] {
    background: transparent !important;
    border-bottom: 1px solid #333 !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

/* Icons in chat - muted */
.chat-messages i,
.message-avatar i,
.dev-chat-container i:not(.fa-paper-plane) {
    color: #808080 !important;
}

/* ================================================================
   CODE EXPLAINER - REMOVE ALL BLUE, NEUTRAL COLORS ONLY
   Author: iDevOpsLLC
   Date: 2025-12-27
   ================================================================ */

/* Explanation container - neutral background */
.explanation-container,
.explanation-text,
#explainer-result,
[class*="explanation"] {
    background: #252526 !important;
    border: 1px solid #3E3E42 !important;
    border-radius: 8px !important;
}

/* REMOVE ALL BLUE - Force all text to neutral */
.explanation-container *,
.explanation-text *,
#explainer-result * {
    color: #D4D4D4 !important;
}

/* Main title - white, NOT blue */
.explanation-text h3,
.explanation-container h3,
#explainer-result h3 {
    color: #E0E0E0 !important;
    border-bottom: 1px solid #3E3E42 !important;
}

/* Section headers - gray, NOT blue */
.explanation-text h4,
.explanation-container h4,
#explainer-result h4 {
    color: #D4D4D4 !important;
}

/* Sub-headers - muted gray */
.explanation-text h5,
.explanation-container h5,
#explainer-result h5 {
    color: #B0B0B0 !important;
}

/* Strong/bold text - white, NOT blue */
.explanation-text strong,
.explanation-container strong,
#explainer-result strong {
    color: #E0E0E0 !important;
}

/* Links - muted gray, NOT blue */
.explanation-text a,
.explanation-container a,
#explainer-result a {
    color: #B0B0B0 !important;
    text-decoration: underline !important;
}

/* Ensure Code Explainer header is NOT blue */
#explainer .tab-content-header h3,
#explainer .modern-result-section h4,
.code-explanation h3,
.code-explanation h4 {
    color: #E0E0E0 !important;
}

/* Inline code - orange like VS Code strings, NOT blue */
.explanation-text code,
.explanation-container code,
#explainer-result code {
    background: #1E1E1E !important;
    color: #CE9178 !important;
    border: 1px solid #333 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

/* Code blocks - dark background, NOT blue tint */
.explanation-text pre,
.explanation-container pre,
#explainer-result pre {
    background: #1E1E1E !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    padding: 12px !important;
}

.explanation-text pre code,
.explanation-container pre code,
#explainer-result pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #D4D4D4 !important;
}

/* Badges - neutral gray */
.code-type-badge,
.complexity-badge,
[class*="badge"] {
    background: #2D2D2D !important;
    color: #D4D4D4 !important;
    border: 1px solid #404040 !important;
}

/* Labels like "Trigger Point:", "Execution Flow:", "Key Method:" */
.explanation-text em,
.explanation-container em,
#explainer-result em {
    color: #B0B0B0 !important;
    font-style: normal !important;
}

/* Override any remaining blue variables */
.explanation-container,
.explanation-text,
#explainer-result {
    --accent-blue: #D4D4D4 !important;
    --text-accent: #D4D4D4 !important;
}

/* AGGRESSIVE BLUE REMOVAL - Target ALL elements in Code Explainer */
#explainer-result h1, #explainer-result h2, #explainer-result h3,
#explainer-result h4, #explainer-result h5, #explainer-result h6,
.explanation-container h1, .explanation-container h2, .explanation-container h3,
.explanation-container h4, .explanation-container h5, .explanation-container h6,
.explanation-text h1, .explanation-text h2, .explanation-text h3,
.explanation-text h4, .explanation-text h5, .explanation-text h6,
.code-explanation h1, .code-explanation h2, .code-explanation h3,
.code-explanation h4, .code-explanation h5, .code-explanation h6 {
    color: #E0E0E0 !important;
    background: none !important;
}

/* Force ALL text inside explanation to neutral */
#explainer-result p, #explainer-result span, #explainer-result div,
#explainer-result li, #explainer-result td, #explainer-result th,
.explanation-container p, .explanation-container span, .explanation-container div,
.explanation-container li, .explanation-container td, .explanation-container th,
.explanation-text p, .explanation-text span, .explanation-text div,
.explanation-text li, .explanation-text td, .explanation-text th,
.code-explanation p, .code-explanation span, .code-explanation div,
.code-explanation li, .code-explanation td, .code-explanation th {
    color: #D4D4D4 !important;
}

/* Remove blue left border - use green accent instead */
.code-explanation,
.explanation-container,
#explainer-result > div {
    border-left: 4px solid #4EC9B0 !important;
}

/* ================================================================
   AGGRESSIVE BLUE REMOVAL - Code Explainer Section
   Override ALL inline styles and nested elements
   Author: iDevOpsLLC
   ================================================================ */

/* Force ALL links in Code Explainer to gray - NO BLUE */
#explainer a,
#explainer-result a,
.code-explanation a,
.explanation-container a,
#explainer [style*="color"],
#explainer-result [style*="color"],
.code-explanation [style*="color"] {
    color: #B0B0B0 !important;
}

/* Override inline color styles on ANY element */
#explainer *[style*="blue"],
#explainer *[style*="#569CD6"],
#explainer *[style*="#4FC1FF"],
#explainer *[style*="#4EC9B0"],
#explainer *[style*="cyan"],
#explainer *[style*="teal"],
#explainer-result *[style*="blue"],
#explainer-result *[style*="#569CD6"],
#explainer-result *[style*="#4FC1FF"],
#explainer-result *[style*="#4EC9B0"],
#explainer-result *[style*="cyan"],
#explainer-result *[style*="teal"] {
    color: #D4D4D4 !important;
}

/* Target Configuration-Only Solution and similar headers */
#explainer h1, #explainer h2, #explainer h3, #explainer h4, #explainer h5, #explainer h6,
#explainer-result h1, #explainer-result h2, #explainer-result h3,
#explainer-result h4, #explainer-result h5, #explainer-result h6 {
    color: #E0E0E0 !important;
}

/* Target ALL spans, divs, paragraphs with potential blue */
#explainer span, #explainer div, #explainer p,
#explainer-result span, #explainer-result div, #explainer-result p {
    color: #D4D4D4 !important;
}

/* Underlined text that looks like links */
#explainer u, #explainer [style*="underline"],
#explainer-result u, #explainer-result [style*="underline"] {
    color: #B0B0B0 !important;
}

/* Override green/teal for main title - keep it neutral white */
#explainer-result > div > h1,
#explainer-result > div > h2,
#explainer-result > div > h3,
.code-explanation > h1,
.code-explanation > h2,
.code-explanation > h3 {
    color: #FFFFFF !important;
}

/* NUCLEAR OPTION: Force ALL colors in Code Explainer to neutral */
#explainer *,
#explainer-result *,
#explanation-content *,
.explanation-container *,
.explanation-text *,
.code-explanation * {
    color: #D4D4D4 !important;
}

/* Exception: Headings should be white */
#explainer h1, #explainer h2, #explainer h3, #explainer h4, #explainer h5, #explainer h6,
#explainer-result h1, #explainer-result h2, #explainer-result h3, #explainer-result h4,
#explanation-content h1, #explanation-content h2, #explanation-content h3, #explanation-content h4,
.explanation-container h1, .explanation-container h2, .explanation-container h3, .explanation-container h4,
#explainer strong, #explainer-result strong, #explanation-content strong, .explanation-container strong {
    color: #E0E0E0 !important;
}

/* Exception: Links should be muted gray */
#explainer a, #explainer-result a, #explanation-content a, .explanation-container a {
    color: #B0B0B0 !important;
}

/* Exception: Code should be orange */
#explainer code, #explainer-result code, #explanation-content code, .explanation-container code {
    color: #CE9178 !important;
}

/* FINAL NUCLEAR OVERRIDE - Force ALL text in explanation to neutral */
#explanation-content,
#explanation-content *,
#explanation-content h1,
#explanation-content h2,
#explanation-content h3,
#explanation-content h4,
#explanation-content h5,
#explanation-content h6,
#explanation-content p,
#explanation-content span,
#explanation-content div,
#explanation-content li,
#explanation-content strong,
#explanation-content b,
#explanation-content em,
#explanation-content i,
.explanation-text,
.explanation-text *,
.explanation-text h1,
.explanation-text h2,
.explanation-text h3,
.explanation-text h4,
.explanation-text p,
.explanation-text span,
.explanation-text div {
    color: #D4D4D4 !important;
}

/* Headings slightly brighter */
#explanation-content h1,
#explanation-content h2,
#explanation-content h3,
.explanation-text h1,
.explanation-text h2,
.explanation-text h3 {
    color: #E0E0E0 !important;
}

/* Links muted gray */
#explanation-content a,
.explanation-text a {
    color: #B0B0B0 !important;
}

/* ================================================================
   UI TIGHTENING - Reduce padding, compact layout
   Author: iDevOpsLLC
   Date: 2025-12-27
   ================================================================ */

/* Quick Template Cards - more compact */
.quick-templates-grid {
    gap: 0.75rem !important;
    margin: 0.75rem 0 !important;
}

.quick-template-card {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
    border-radius: 8px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
}

.quick-template-card i {
    font-size: 1.25rem !important;
}

.quick-template-card span {
    font-size: 0.8rem !important;
}

.quick-template-card:hover {
    transform: translateY(-2px) !important;
}

/* Generate Code button - standard sizing */

/* Button group right - align better */
.button-group-right {
    margin-top: 1rem !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* Result header - tight alignment */
.result-header {
    padding: 10px 12px !important;
    gap: 12px !important;
    width: 100% !important;
}

.result-header h4 {
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
}

.result-header .button-group {
    gap: 6px !important;
    margin-left: auto !important;  /* Push to RIGHT */
    flex-shrink: 0 !important;
}

/* Copy/Download buttons - smaller */
.copy-code-btn,
.download-code-btn {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 4px !important;
}

/* Modern result section - reduce spacing */
.modern-result-section {
    margin-top: 1rem !important;
    padding: 0 !important;
}

/* Code output - tighter */
.code-output-modern {
    padding: 0 !important;
}

.code-output-modern pre {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 0 0 8px 8px !important;
}

/* Tab content header - compact */
.tab-content-header {
    margin-bottom: 1rem !important;
}

.tab-content-header h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
}

.tab-content-header p {
    font-size: 0.85rem !important;
    margin: 0 !important;
}

/* Model selection - compact */
.model-selection-modern {
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

/* Modern input section - tighter */
.modern-input-section {
    padding: 0 !important;
}

.modern-textarea {
    min-height: 80px !important;
}

/* Templates header - smaller */
.templates-header {
    font-size: 0.9rem !important;
    margin: 1rem 0 0.5rem 0 !important;
}

/* Form sections - reduce padding */
.form-section {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

/* Modern labels - compact */
.modern-label {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
}

/* ================================================================
   FIX: REMOVE SCROLLBARS FROM INDIVIDUAL CHAT MESSAGES
   Author: iDevOpsLLC
   Date: 2025-12-27
   Purpose: Ensure messages expand naturally without per-message scrollbars
   ================================================================ */

/* Remove height constraints from message containers */
.ai-message,
.user-message,
.ai-message-modern,
.user-message-modern {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

/* Message content - no scrollbars, expand naturally */
.message-content,
.message-content-modern {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

/* AI message content wrapper - remove static height */
.ai-message-content-wrapper {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

/* Only collapsed messages have height limit */
.ai-message-content-wrapper.collapsed {
    max-height: 400px !important;
    overflow: hidden !important;
}

/* Chat workspace container - this is the ONLY element with scrollbar */
.chat-messages-workspace,
.chat-messages-modern,
.chat-messages {
    overflow-y: auto !important;
}

/* Ensure child messages don't inherit scrollbar behavior */
.chat-messages-workspace > .ai-message,
.chat-messages-workspace > .user-message,
.chat-messages-modern > .ai-message-modern,
.chat-messages-modern > .user-message-modern,
#ai-messages > .ai-message,
#ai-messages > .user-message {
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
}