/* ================================================================
   USER DOMAINS — selection checkbox styling
   ================================================================ */
.user-domain-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color 0.15s ease, background 0.15s ease,
                box-shadow 0.15s ease, transform 0.1s ease;
    position: relative;
    flex-shrink: 0;
    margin: 0;
}
.user-domain-cb:hover {
    border-color: #1a73e8;
}
.user-domain-cb:active {
    transform: scale(0.92);
}
.user-domain-cb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}
.user-domain-cb:checked {
    background: #1a73e8;
    border-color: #1a73e8;
}
.user-domain-cb:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    border-radius: 0.5px;
    /* Translate first to centre the checkmark's bounding box, then rotate
       around its geometric centre. The -55% Y offset compensates for the
       checkmark's natural asymmetry (right leg longer than the left) so it
       reads visually centred in the circle. */
    transform: translate(-50%, -55%) rotate(45deg);
}
.user-domain-cb:indeterminate {
    background: #1a73e8;
    border-color: #1a73e8;
}
.user-domain-cb:indeterminate::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

/* ================================================================
   AUTH OVERLAY — LOGIN / REGISTER
   ================================================================ */
/* Modal close button — circular with background */
.modal-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f2f2f2;
    color: #636363;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.modal-close-btn:hover {
    background: #e5e5e5;
    color: #1a1a1a;
}
.modal-close-btn svg {
    width: 18px;
    height: 18px;
}

/* Connect Analytics modal — scrollbar: thumb only, no track background */
.connect-modal-body::-webkit-scrollbar { width: 4px; background: transparent; }
.connect-modal-body::-webkit-scrollbar-track { background: transparent; }
.connect-modal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.connect-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
.connect-modal-body { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }

.auth-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
    background: #fff;
    display: flex;
}
/* Left: the form side (fills half, centers the form). */
.auth-formside {
    flex: 1 1 50%; display: flex; align-items: center; justify-content: center;
    padding: 40px 32px; overflow-y: auto;
}
.auth-card {
    background: #fff; border-radius: 0; padding: 0;
    width: 100%; max-width: 380px; box-shadow: none;
}
/* Right: brand / product panel — ink background so the colorful build
   screenshots pop; hidden on narrow screens (form goes full width). */
.auth-visual {
    flex: 1 1 50%; position: relative; overflow: hidden;
    background: #0e1119; color: #fff;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px;
}
.auth-visual::before {
    content: ''; position: absolute; inset: -30% -10% auto -10%; height: 60%;
    background: radial-gradient(50% 60% at 30% 0%, rgba(26,115,232,.35), transparent 70%);
    pointer-events: none;
}
.auth-visual .av-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; margin-bottom: 26px; position: relative; }
.auth-visual .av-logo svg { width: 30px; height: 30px; }
.auth-visual h2 { font-size: 34px; line-height: 1.12; letter-spacing: -.02em; margin: 0 auto 14px; font-weight: 800; max-width: 16ch; position: relative; }
.auth-visual p { font-size: 16px; color: rgba(255,255,255,.82); margin: 0 auto 30px; max-width: 34ch; position: relative; }
.auth-visual .av-points { list-style: none; margin: 0 auto 30px; padding: 0; position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; }
.auth-visual .av-points li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.9); font-size: 15px; margin: 10px 0; }
.auth-visual .av-points li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: rgba(255,255,255,.14) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/10px no-repeat; }
.auth-visual .av-shots { display: flex; gap: 14px; position: relative; }
.auth-visual .av-shots img { width: 168px; aspect-ratio: 16/11; object-fit: cover; border-radius: 13px; box-shadow: 0 24px 54px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14); }
.auth-visual .av-shots img:nth-child(1) { transform: rotate(-4deg) translateY(14px); }
.auth-visual .av-shots img:nth-child(2) { transform: rotate(2deg) translateY(-4px); }
.auth-visual .av-shots img:nth-child(3) { transform: rotate(4deg) translateY(10px); }
@media (max-width: 900px) { .auth-visual { display: none; } .auth-formside { flex-basis: 100%; } }
.auth-header { text-align: center; margin-bottom: 32px; }
.auth-header h1 { margin: 12px 0 4px; font-size: 24px; color: #374151; }
.auth-header p { color: #717171; font-size: 14px; margin: 0; }
.auth-form-group { margin-bottom: 16px; }
.auth-form-group label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.auth-form-group input {
    width: 100%; padding: 12px 20px; border: 1px solid #d1d5db; border-radius: 9999px;
    font-size: 14px; background: #f9fafb; box-sizing: border-box;
    transition: border-color 0.15s;
}
.auth-form-group input:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
.auth-error { color: #c13515; font-size: 13px; margin-bottom: 12px; padding: 8px 12px; background: rgba(193,53,21,0.08); border-radius: 9999px; }
.auth-btn {
    width: 100%; padding: 12px; border: none; border-radius: 9999px; font-size: 14px;
    font-weight: 600; cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 8px; transition: background 0.15s;
}
.auth-btn-primary { background: #1a73e8; color: #fff; }
.auth-btn-primary:hover { background: #1557b0; }
.auth-btn-google { background: #fff; color: #374151; border: 1px solid #d1d5db; margin-top: 12px; }
.auth-btn-google:hover { background: #f3f4f6; }
.auth-divider {
    display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #9ca3af; font-size: 13px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
.auth-toggle { text-align: center; margin-top: 20px; font-size: 13px; color: #6b7280; }
.auth-toggle a { color: #1a73e8; text-decoration: none; font-weight: 600; }
@media (max-width: 480px) {
    .auth-card { margin: 16px; padding: 24px; }
}

/*
 * SEO AI Tools Platform Styles
 * =============================
 * Modern, responsive dashboard for SEO tools and deployment monitoring
 * Updated: November 9, 2025
 */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    /* Was #f5f7fa (light grey canvas); trying full white to match the
     * sidebar + top navbar for a uniform shell. If cards lose visual
     * separation against this background, revert to #f5f7fa. */
    background: #ffffff;
    color: #333;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   SIDEBAR NAVIGATION
   ============================================================================ */

.sidebar {
    position: fixed; 
    left: 0;
    top: 60px;
    width: 280px;
    height: calc(100vh - 60px);
    background: white;
    color: #374151;
    overflow-y: auto;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

.sidebar.collapsed {
    width: 70px;
    /* Still scroll vertically when the icon list is taller than the viewport —
       overflow-y:hidden trapped the bottom icons (e.g. GA4 guide) out of reach.
       The scrollbar stays hidden via the rules below. */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide scrollbar completely in both expanded and collapsed states */
.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.sidebar.collapsed::-webkit-scrollbar {
    display: none;
}

.sidebar.collapsed {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.sidebar-header {
    display: none; /* Hidden on desktop - logo/burger in top navbar */
    padding: 25px 15px;
    border-bottom: 1px solid #e5e7eb;
    flex-direction: row-reverse;
}

/* Legacy styles kept for reference but header is hidden */
.sidebar-header h2 {
    font-size: 1.3em;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    text-align: left;
    flex: 1;
}

.sidebar.collapsed .sidebar-header h2 {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 25px 0;
    flex-direction: row;
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: #3b82f6;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    transition: all 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}

.sidebar-toggle:hover {
    color: #2563eb;
    transform: scale(1.1);
}

.sidebar-toggle:active {
    transform: scale(0.95);
}

.sidebar-nav {
    padding: 25px 0 20px 0; /* Added top padding since header is hidden */
}

.nav-section {
    margin-bottom: 20px;
}

.nav-section:first-child {
    margin-top: 0; /* Reset since we have padding on sidebar-nav */
}

.nav-section-title {
    padding: 12px 20px 8px 20px;
    font-size: 0.6875em;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #80868b;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .nav-section-title {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    margin: 4px 12px;
    color: #5f6368;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    gap: 16px;
    border-radius: 25px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.nav-item:visited,
.nav-item:hover,
.nav-item:focus,
.nav-item:active,
.nav-item:focus-visible {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.nav-item *,
.nav-item::before,
.nav-item::after {
    text-decoration: none !important;
    border-bottom: none !important;
}
.nav-item .nav-text,
.nav-item .nav-icon {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}
.nav-item::-moz-focus-inner { border: 0 !important; }
/* Belt-and-suspenders: force no focus ring on any state */
a.nav-item:focus { outline: 0 !important; outline: none !important; box-shadow: none !important; border: 0 !important; }
a.nav-item:-webkit-any-link:focus { outline: 0 !important; }

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px 0;
    margin: 4px 0;
    border-radius: 0;
    gap: 0;
}

.nav-item:hover {
    background: #f1f3f4;
    color: #202124;
}

.nav-item.active,
a.nav-item.active,
.nav-item.active:visited,
.nav-item.active:hover,
.nav-item.active:focus {
    background: #e8f0fe !important;
    color: #3b82f6 !important;
    font-weight: 500;
}

.nav-item.active .nav-icon,
a.nav-item.active .nav-icon {
    color: #3b82f6 !important;
}

/* Collapsed sidebar active state */
.sidebar.collapsed .nav-item.active {
    background: #e8f0fe;
    border-radius: 0;
}

.nav-icon {
    font-size: 20px;
    min-width: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.2s ease;
    color: inherit;
}

/* Material Icons styling */
.nav-icon.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 20;
}

.nav-item.active .nav-icon.material-symbols-outlined {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20;
}

/* Ensure icons are perfectly centered in collapsed sidebar */
.sidebar.collapsed .nav-icon {
    margin: 0 auto;
}

.nav-text {
    font-size: 0.875em;
    font-weight: 400;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    letter-spacing: 0.01em;
}

.sidebar.collapsed .nav-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.nav-badge {
    margin-left: auto;
    background: #e5e7eb;
    color: #6b7280;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: 700;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .nav-badge {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* ============================================================================
   SIDEBAR SUB-NAVIGATION
   ============================================================================ */

.nav-item-group {
    display: flex;
    flex-direction: column;
}

.nav-item.has-submenu {
    position: relative;
}

.nav-submenu-arrow {
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.3s ease;
    color: #9ca3af;
}

.nav-item.has-submenu.expanded .nav-submenu-arrow {
    transform: rotate(180deg);
    color: #3b82f6;
}

.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 0;
    background: #f8fafc;
}

.nav-submenu.expanded {
    max-height: 300px;
    opacity: 1;
}

.nav-subitem {
    display: flex;
    align-items: center;
    padding: 10px 16px 10px 48px;
    color: #64748b;
    text-decoration: none;
    font-size: 0.85em;
    transition: all 0.2s ease;
    cursor: pointer;
    gap: 10px;
    border-left: 3px solid transparent;
}

.nav-subitem:hover {
    background: #e2e8f0;
    color: #334155;
    border-left-color: #cbd5e1;
}

.nav-subitem.active {
    background: #e0f2fe;
    color: #0284c7;
    border-left-color: #0284c7;
    font-weight: 500;
}

.nav-subitem-icon {
    font-size: 16px;
    color: inherit;
}

.nav-subitem-text {
    white-space: nowrap;
}

/* Collapsed sidebar - hide submenu */
.sidebar.collapsed .nav-submenu {
    display: none;
}

.sidebar.collapsed .nav-submenu-arrow {
    display: none;
}

/* ============================================================================
   MAIN CONTENT AREA
   ============================================================================ */

.main-content {
    margin-left: 280px;
    margin-top: 60px;
    padding: 30px;
    transition: margin-left 0.3s ease;
    min-height: calc(100vh - 60px);
    position: relative;
}

.main-content.sidebar-collapsed {
    margin-left: 70px;
}

.page-content {
    display: none;
}

.page-content.active {
    display: block;
}

/* Page Header */
.page-header {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.page-header h1 {
    font-size: 2.2em;
    margin-bottom: 8px;
    color: #1e293b;
}

.page-description {
    font-size: 1em;
    color: #64748b;
    margin-top: 5px;
}

/* Coming Soon Pages */
.coming-soon {
    max-width: 600px;
    margin: 100px auto;
    text-align: center;
    padding: 60px 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.coming-soon-icon {
    font-size: 5em;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.coming-soon h2 {
    font-size: 2em;
    margin-bottom: 15px;
    color: #1e293b;
}

.coming-soon p {
    font-size: 1.1em;
    color: #64748b;
    margin-bottom: 30px;
}

.coming-soon-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.feature-item {
    text-align: left;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    color: #475569;
    font-size: 0.9em;
}

.coming-soon-badge {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9em;
}

/* ============================================================================
   ORIGINAL DASHBOARD STYLES (UPDATED FOR NEW LAYOUT)
   ============================================================================ */

/* Header - Updated for page header */
.header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    padding: 30px 35px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
    margin-bottom: 30px;
}

.header h1 {
    font-size: 2em;
    margin-bottom: 0;
    color: white;
}

/* Statistics Cards */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.stat-card {
    border-radius: 14px;
    padding: 16px 18px;
    text-align: left;
    background: #f6f8fa;
    /* My-Dashboard layout: real DOM — leading icon span, then a column
       with the 24px value above the 13px label. Icons are chosen PER
       CARD in each page's builder (never keyed on the tint class, which
       is styling, not meaning). */
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-card > .material-symbols-outlined {
    font-size: 26px;
    flex: 0 0 auto;
}

.stat-card .stat-body { min-width: 0; }

.stat-card .number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0;
    color: #1c2430;
}

.stat-card .label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0;
}

.stat-card.completed {
    background: #eaf6ec !important;
}

.stat-card.failed {
    background: #fdecec !important;
}

.stat-card.in-progress {
    background: #eef4fe !important;
}

.stat-card.pending {
    background: #f2effe !important;
}

.stat-card.success-rate {
    background: #fdf3e3 !important;
}

.stat-card.avg-time {
    background: #efedfd !important;
}

.stat-card.total {
    background: #f6f8fa !important;
}

.stat-card.cyan {
    background: #e6f7fa !important;
}

/* Filters */
.filters {
    background: white;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    /* Removed sticky positioning - filters will scroll with page */
}

.filter-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-btn {
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    color: #6b7280;
}

.filter-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.filter-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Filter Controls (Sorting and Stage Filter) */
.filter-controls {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.filter-label .material-symbols-outlined {
    font-size: 18px;
    color: #3b82f6;
}

.filter-select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: white;
    color: #374151;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.filter-select:hover {
    border-color: #3b82f6;
    background-color: #f0f9ff;
}

.filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.auto-refresh-toggle {
    color: #6b7280;
    font-size: 0.85em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auto-refresh-toggle label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
}

.auto-refresh-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.refresh-interval-select {
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: white;
    color: #6b7280;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.refresh-interval-select:hover {
    border-color: #3b82f6;
    background-color: #f0f9ff;
}

.refresh-interval-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.custom-interval-input {
    width: 70px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: white;
    color: #6b7280;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
}

.custom-interval-input:hover {
    border-color: #3b82f6;
}

.custom-interval-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.custom-interval-input::placeholder {
    color: #9ca3af;
    font-size: 0.9em;
}

/* Deployment List */
/* Deployment list container - no longer used, kept for compatibility */
.deployment-list {
    display: contents; /* Makes children behave as if container doesn't exist */
}

.deployment-item {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: none;
}

.deployment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.deployment-domain {
    font-size: 1.4em;
    font-weight: bold;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 12px;
}

.website-favicon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    background: transparent;
    padding: 0;
}

.domain-link {
    color: #3b82f6;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.domain-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.deployment-base {
    color: #6b7280;
    font-size: 0.9em;
    margin-top: 5px;
}

.competitor-link {
    color: #3b82f6;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
}

.competitor-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.deployment-status {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-completed {
    background: #d1fae5;
    color: #065f46;
}

.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.status-in_progress {
    background: #dbeafe;
    color: #1e40af;
}

.status-pending {
    background: #e9d5ff;
    color: #6b21a8;
}

/* Progress Bar */
.progress-container {
    margin: 20px 0;
}

.progress-label {
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #6b7280;
    font-weight: 600;
}

.progress-bar-bg {
    background: #e9d5ff;
    height: 30px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: none;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d1fae5 0%, #a7f3d0 100%);
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #065f46;
    font-weight: bold;
    font-size: 0.85em;
    position: relative;
    overflow: hidden;
}

/* Progress bar fill - no animation needed (stages have animation) */
.progress-bar-fill.in-progress {
    background: linear-gradient(90deg, #d1fae5 0%, #a7f3d0 100%);
}

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

/* Spinning icon class for refresh buttons */
.spinning {
    animation: spin 1s linear infinite;
}

/* Stage Pipeline */
.stage-pipeline {
    margin: 25px 0;
}

.stage-pipeline-title {
    font-size: 0.95em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 15px;
}

.stage-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.stage-item {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.stage-item.completed {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.stage-item.in-progress {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}

.stage-item.failed {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.stage-item.pending {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.stage-icon {
    font-size: 1.5em;
    margin-bottom: 8px;
}

.stage-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.stage-name {
    font-size: 0.75em;
    font-weight: 600;
    color: #374151;
    margin-top: 5px;
}

.stage-item.completed .stage-name {
    color: #065f46;
}

.stage-item.in-progress .stage-name {
    color: #1e40af;
}

.stage-item.failed .stage-name {
    color: #991b1b;
}

.stage-item.pending .stage-name {
    color: #7c3aed;
}

/* Metadata */
.deployment-meta {
    display: flex;
    gap: 20px;
    font-size: 0.85em;
    color: #6b7280;
    margin-top: 20px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Error Message */
.error-message {
    background: #fee2e2;
    color: #991b1b;
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    font-size: 0.9em;
    border: none;
    font-weight: 500;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
    align-items: center;
}

/* Deployment Logs Button - Blue */
/* Deployment Logs Button - Gray (Total Deployments) */
/* Deployment Logs Button - Gray (Total Deployments) */
.view-logs-btn {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #374151;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 44px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    white-space: nowrap;
}

.view-logs-btn:hover {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.view-logs-btn:active {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

/* Verify Deployment Button - Green (Completed) */
.verify-btn {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 44px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    white-space: nowrap;
}

.verify-btn:hover {
    background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);
}

.verify-btn:active {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
}

/* Google Indexing Button - Blue (In Progress) */
.check-indexing-btn {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 44px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    white-space: nowrap;
}

.check-indexing-btn:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
}

.check-indexing-btn:active {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
}

.verify-btn:disabled,
.check-indexing-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    background: rgba(0, 0, 0, 0.75);
    z-index: 1002;
    padding: 20px;
    overflow-y: auto;
}

/* [Phase 15] Generic modal-overlay shape used by Publish / Deploy /
   Domain Deploy Settings / Deploy Settings / Publish Logs modals.
   Each JS module appends an element with class="modal-overlay active"
   to <body>; this rule turns it into a full-viewport fixed backdrop
   centering its `.modal` child. Inline `display:flex` + center props
   live in the JS string so the modal is visible immediately even
   before the stylesheet finishes loading. The `.active` qualifier
   is decorative — kept so we can later add fade-in animation
   without touching every JS site. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 5300;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
}
.modal-overlay.active { display: flex; }
/* When .modal sits INSIDE a .modal-overlay we want the standard
   centered-card behavior, not the legacy full-screen backdrop the
   bare .modal class provides. Override the conflicting position +
   background so the content reads as a card on top of the overlay. */
.modal-overlay > .modal {
    display: block;
    position: static;
    top: auto; left: auto;
    width: auto; height: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    padding: 0;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: auto;
}
.modal-overlay > .modal > .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.modal-overlay > .modal > .modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.modal-overlay > .modal > .modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
}

.modal-content {
    background: white;
    max-width: 1000px;
    margin: 20px auto;
    border-radius: 20px;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Default Modal Header */
.modal-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-bottom: 2px solid #10b981;
    color: #ffffff;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Deployment Logs Modal Header - Gray */
#logModal .modal-header {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    border-bottom: 2px solid #6b7280;
}

#logModal .modal-domain {
    color: #e5e7eb;
}

/* Deployment Verification Modal Header - Green */
#verifyModal .modal-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-bottom: 2px solid #10b981;
}

#verifyModal .modal-domain {
    color: #d1fae5;
}

/* Google Indexing Modal Header - Blue */
#indexingModal .modal-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-bottom: 2px solid #3b82f6;
}

#indexingModal .modal-domain {
    color: #dbeafe;
}

/* Search Performance Modal Header - Purple (Pending) */
#performanceModal .modal-header {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border-bottom: 2px solid #a855f7;
}

#performanceModal .modal-domain {
    color: #e9d5ff;
}

/* Google Analytics Modal Header - Amber (Success Rate) */
#analyticsModal .modal-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-bottom: 2px solid #f59e0b;
}

#analyticsModal .modal-domain {
    color: #fef3c7;
}

.modal-header h2 {
    font-size: 1.6em;
    color: #ffffff;
}

.modal-domain {
    font-size: 0.85em;
    color: #d1fae5;
    font-weight: 600;
    display: inline;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.8em;
    cursor: pointer;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
    background: #f9fafb;
}

/* Keep loading messages centered */
.modal-body .loading {
    text-align: center !important;
}

.modal-body .loading * {
    text-align: center !important;
}

/* Keep error messages centered */
.modal-body .error-message {
    text-align: center !important;
}

.modal-body .error-message * {
    text-align: center !important;
}

/* Keep verification result messages centered */
.modal-body > div[style*="text-align: center"] {
    text-align: center !important;
}

/* Left-align specific content elements */
.modal-body h3 {
    text-align: left;
}

.modal-body table {
    text-align: left;
}

.modal-body p {
    text-align: left;
}

.modal-body .log-entry {
    text-align: left;
}

/* Log Entries */
.log-entry {
    padding: 18px;
    margin-bottom: 15px;
    border-radius: 12px;
    background: white;
    border-left: 4px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    text-align: left !important;
}

.log-entry * {
    text-align: left !important;
}

.log-entry:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateX(5px);
}

.log-entry.success {
    border-left-color: #10b981;
    background: linear-gradient(to right, #d1fae5 0%, white 100%);
}

.log-entry.error {
    border-left-color: #ef4444;
    background: linear-gradient(to right, #fee2e2 0%, white 100%);
}

.log-entry.info {
    border-left-color: #3b82f6;
    background: linear-gradient(to right, #dbeafe 0%, white 100%);
}

.log-entry.warning {
    border-left-color: #f59e0b;
    background: linear-gradient(to right, #fef3c7 0%, white 100%);
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
    text-align: left !important;
}

.log-stage {
    font-weight: 600;
    color: #374151;
    font-size: 1em;
    text-align: left !important;
}

.log-time {
    font-size: 0.8em;
    color: #9ca3af;
}

.log-message {
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 0.9em;
    color: #374151;
    line-height: 1.7;
    word-break: break-word;
    white-space: pre-wrap;
    text-align: left !important;
}

.log-message strong {
    text-align: left !important;
}

/* Loading Spinner */
.loading {
    text-align: center !important;
    padding: 60px;
    color: #6b7280;
}

.spinner {
    border: 5px solid #f3f4f6;
    border-top: 5px solid #667eea;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 25px;
}

/* Last Updated */
.footer {
    text-align: center;
    color: #6b7280;
    font-size: 0.9em;
    margin-top: 30px;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Pagination - Airbnb Style */
.pagination {
    background: white;
    padding: 20px 30px;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    position: relative;
}

.last-update-footer {
    background: white;
    padding: 15px 30px;
    border-radius: 0 0 15px 15px;
    text-align: center;
    color: #6b7280;
    font-size: 0.85em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    margin-top: -1px;
}

.pagination-spacer {
    display: none;
}

.pagination-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.pagination-size {
    position: absolute;
    right: 30px;
}

.pagination-btn {
    background: transparent;
    color: #3b82f6;
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 600;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
    background: #e0f2fe;
    color: #0369a1;
    transform: scale(1.04);
    border-radius: 50%;
}

.pagination-btn:disabled {
    background: transparent;
    color: #b0b0b0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Previous/Next arrow buttons - No circle */
.pagination-btn.pagination-prev,
.pagination-btn.pagination-next {
    border: none;
    background: transparent;
    padding: 6px 8px;
    min-width: 32px;
    width: 32px;
    height: 32px;
    color: #3b82f6;
}

.pagination-btn.pagination-prev:hover:not(:disabled),
.pagination-btn.pagination-next:hover:not(:disabled) {
    background: transparent;
    color: #0369a1;
}

.pagination-btn.pagination-prev:disabled,
.pagination-btn.pagination-next:disabled {
    background: transparent;
    color: #d0d0d0;
}

.pagination-arrow {
    font-size: 1.2em;
    font-weight: 700;
    display: inline-block;
}

.pagination-btn.pagination-prev:hover:not(:disabled) .pagination-arrow,
.pagination-btn.pagination-next:hover:not(:disabled) .pagination-arrow {
    transform: scale(1.1);
}

.pagination-current {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.8em;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.pagination-ellipsis {
    color: #717171;
    padding: 6px 4px;
    font-weight: 600;
    font-size: 0.8em;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.pagination-size::before {
    content: 'Show';
    color: #64748b;
    font-size: 0.72em;
    font-weight: 500;
}

.pagination-size::after {
    content: 'per page';
    color: #64748b;
    font-size: 0.72em;
    font-weight: 500;
}

html[lang="zh-CN"] .pagination-size::before {
    content: '显示';
}

html[lang="zh-CN"] .pagination-size::after {
    content: '条/页';
}

.page-size-select {
    padding: 4px 22px 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 0.72em;
    font-weight: 700;
    color: #3b82f6;
    background: white;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%233b82f6' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 9px;
    min-width: 50px;
}

.page-size-select:hover {
    border-color: #3b82f6;
    background-color: #f0f9ff;
}

.page-size-select:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: white;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Performance Modal Styles */
#indexingModal .modal-body,
#indexingModal .modal-body *,
#indexingModal .log-entry,
#indexingModal .log-entry *,
#indexingModal .log-header,
#indexingModal .log-header *,
#indexingModal .log-stage,
#indexingModal .log-message,
#indexingModal .log-message *,
#indexingModal h3,
#indexingModal div,
#indexingModal span,
#indexingModal strong,
#indexingModal p {
    text-align: left !important;
}

.performance-container {
    max-width: 100%;
}

.performance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.perf-card {
    /* No default background - will be set by specific classes */
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

/* Explicitly prevent hover effects on performance cards */
.perf-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.perf-card.clicks {
    background: linear-gradient(135deg, #dbeafe 0%, white 100%);
}

.perf-card.clicks .perf-value {
    color: #3b82f6;
}

.perf-card.impressions {
    background: linear-gradient(135deg, #ede9fe 0%, white 100%);
}

.perf-card.impressions .perf-value {
    color: #8b5cf6;
}

.perf-card.ctr {
    background: linear-gradient(135deg, #d1fae5 0%, white 100%);
}

.perf-card.ctr .perf-value {
    color: #10b981;
}

.perf-card.position {
    background: linear-gradient(135deg, #fef3c7 0%, white 100%);
}

.perf-card.position .perf-value {
    color: #f59e0b;
}

.perf-icon {
    font-size: 2.5em;
    margin-bottom: 12px;
}

.perf-value {
    font-size: 2.2em;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
    text-align: center;
}

.perf-label {
    font-size: 0.9em;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.perf-date-range {
    background: #f3f4f6;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
    color: #374151;
    font-size: 0.95em;
}

/* Performance Chart */
.perf-chart-container {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.perf-chart-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #6b7280;
    font-size: 1.1em;
    font-weight: 400;
}

.chart-canvas-wrapper {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-canvas-wrapper canvas {
    max-height: 300px;
}

.perf-chart-container {
    background: white;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.perf-chart-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #6b7280;
    font-size: 1.2em;
    font-weight: 400;
}

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chart-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chart-label {
    min-width: 100px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9em;
}

.chart-bar-bg {
    flex: 1;
    background: #f3f4f6;
    border-radius: 8px;
    height: 40px;
    position: relative;
    overflow: hidden;
}

.chart-bar {
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    transition: width 0.6s ease;
    min-width: 60px;
}

.chart-bar.clicks-bar {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.chart-bar.impressions-bar {
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

.chart-bar.ctr-bar {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.chart-bar.position-bar {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.chart-value {
    color: white;
    font-weight: 700;
    font-size: 0.9em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.top-pages {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.top-pages h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #374151;
    font-size: 1.2em;
}

.pages-table {
    overflow-x: auto;
}

/* Search Performance Button - Purple */
/* Search Performance Button - Purple (Pending) */
.view-performance-btn {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #6b21a8;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 44px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    white-space: nowrap;
}

.view-performance-btn:hover {
    background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
    box-shadow: 0 4px 8px rgba(168, 85, 247, 0.25);
}

.view-performance-btn:active {
    background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 100%);
}

/* Google Analytics Button - Amber (Success Rate) */
.view-analytics-btn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 44px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    white-space: nowrap;
}

.view-analytics-btn:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.25);
}

.view-analytics-btn:active {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
}

/* Performance Date Selector */
.perf-date-selector {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.date-range-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.search-type-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-range-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-range-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.date-range-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;
}

.perf-date-selector label {
    color: white;
    font-size: 0.95em;
    margin: 0;
    font-weight: 400;
}

.perf-date-selector select {
    padding: 8px 15px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: white;
    color: #6b7280;
    font-weight: 400;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.perf-date-selector select:hover {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.perf-date-selector select:focus {
    outline: none;
    border-color: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Analytics Date Selector - Orange */
.analytics-date-selector {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.analytics-date-selector .date-selector-label {
    color: white;
    font-size: 0.95em;
    margin: 0;
    font-weight: 500;
}

.analytics-date-selector select {
    padding: 8px 15px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: white;
    color: #6b7280;
    font-weight: 400;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.analytics-date-selector select:hover {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.analytics-date-selector select:focus {
    outline: none;
    border-color: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.custom-date-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-date-inputs input[type="date"] {
    padding: 8px 12px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: white;
    color: #6b7280;
    font-size: 0.9em;
    cursor: pointer;
}

.custom-date-inputs span {
    color: white;
    font-size: 0.9em;
}

.custom-date-inputs button {
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid white;
    background: white;
    color: #8b5cf6;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-date-inputs button:hover {
    background: #8b5cf6;
    color: white;
}

/* Analytics Modal - Orange Apply Button */
#analyticsModal .custom-date-inputs button {
    color: #ff6b35;
}

#analyticsModal .custom-date-inputs button:hover {
    background: #ff6b35;
    color: white;
}

.perf-date-info {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85em;
    text-align: right;
    white-space: nowrap;
}

/* Performance Data Tables */
.performance-tabs-nav {
    display: flex;
    gap: 4px;
    padding: 15px 0;
    background: white;
    border-bottom: 2px solid #e5e7eb;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
}

.perf-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.perf-tab:hover {
    background: #f9fafb;
    color: #374151;
}

.perf-tab.active {
    background: transparent;
    color: #8b5cf6;
    border-bottom: 2px solid #8b5cf6;
    font-weight: 600;
}

.perf-tab-content {
    display: none;
}

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

.performance-tables-wrapper {
    background: white;
    border-radius: 0 0 8px 8px; /* Top non-rounded, bottom left and right rounded */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 25px;
    overflow: hidden;
}

.dimension-table-container {
    background: white;
    padding: 20px 25px;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    border-bottom: none;
}

.dimension-table-container:first-of-type {
    padding-top: 20px;
}

.dimension-table-container:last-of-type {
    padding-bottom: 25px;
}

/* Website Health and Pages Indexing specific styling */
.health-table-container,
.indexing-table-container {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dimension-table-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #6b7280;
    font-size: 1.15em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dimension-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 500px;
    margin-bottom: 20px;
    border-radius: 0 0 8px 8px; /* Bottom left and right rounded */
    border: 1px solid #e5e7eb;
    border-top: none; /* Remove top border as it connects to header */
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Hide scrollbar for all browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.dimension-table-wrapper::-webkit-scrollbar {
    display: none;
}

.dimension-table-header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px 8px 0 0; /* Top left and right rounded */
    border: 1px solid #e5e7eb;
    border-bottom: none; /* Remove bottom border as it connects to wrapper */
    /* Hide scrollbar for all browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.dimension-table-header::-webkit-scrollbar {
    display: none;
}

.dimension-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9em;
    background: white;
    table-layout: fixed;
}

/* Column widths for perfect alignment */
.dimension-table .col-dimension {
    width: 22%;
}

/* GA4 dimension tables - optimized widths for 7 columns */
.ga4-dimension-table .col-dimension {
    width: 22%;
}

.ga4-dimension-table .col-metric {
    width: 13%;
}

.dimension-table .col-clicks {
    width: 15%;
}

.dimension-table .col-impressions {
    width: 15%;
}

.dimension-table .col-ctr {
    width: 15%;
}

.dimension-table .col-position {
    width: 15%;
}

.dimension-table thead {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 2px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Round top corners of header */
.dimension-table-header .dimension-table thead tr:first-child th:first-child {
    border-radius: 8px 0 0 0;
}

.dimension-table-header .dimension-table thead tr:first-child th:last-child {
    border-radius: 0 8px 0 0;
}

.dimension-table th {
    padding: 14px 12px;
    text-align: center;
    font-weight: 400;
    color: #6b7280;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    user-select: none;
}

/* Left-align first column header (dimension) */
.dimension-table th:first-child,
.dimension-table th.col-dimension {
    text-align: left !important;
}

.dimension-table th.sortable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 0;
}

.dimension-table th.sortable:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Ensure full background coverage on th cells */
.dimension-table th {
    padding: 14px 12px;
    text-align: center;
    font-weight: 400;
    color: #6b7280;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    user-select: none;
    box-sizing: border-box;
}

.dimension-table th.sorted-asc,
.dimension-table th.sorted-desc {
    background: #f3e8ff;
    color: #7c3aed;
    position: relative;
    z-index: 1;
}

/* Keep sorted column color on hover for aggregate tables */
.dimension-table th.sorted-asc:hover,
.dimension-table th.sorted-desc:hover {
    background: #f3e8ff;
    color: #7c3aed;
}

.dimension-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

.dimension-table tbody tr:hover {
    background: #f9fafb;
}

/* Round bottom corners of last row in data section */
.dimension-table-wrapper .dimension-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 8px;
}

.dimension-table-wrapper .dimension-table tbody tr:last-child td:last-child {
    border-radius: 0 0 8px 0;
}

.dimension-table tbody tr.even {
    background: #fafafa;
}

.dimension-table tbody tr.even:hover {
    background: #f3f4f6;
}

.dimension-table td {
    padding: 12px;
    color: #374151;
    font-size: 0.9em;
    text-align: center;
}

.dimension-table td:first-child {
    text-align: left;
}

.dimension-table td.col-dimension {
    font-weight: 400;
    color: #6b7280;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left !important;
}

.dimension-table td.col-clicks {
    color: #3b82f6;
    font-weight: 400;
}

.dimension-table td.col-impressions {
    color: #8b5cf6;
    font-weight: 400;
}

.dimension-table td.col-ctr {
    color: #10b981;
    font-weight: 400;
}

.dimension-table td.col-position {
    color: #f59e0b;
    font-weight: 400;
}

.dimension-table .page-link {
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dimension-table .page-link:hover {
    color: #374151;
    text-decoration: underline;
}

/* Combined Analytics Table Styles */
.combined-dimension-table {
    table-layout: fixed;
    width: 100%;
}

/* Combined table column widths - dimension column narrower, metrics wider */
.combined-dimension-table .col-dimension {
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

.combined-dimension-table .col-metric {
    font-weight: 400;
    text-align: right;
    width: auto;
    min-width: 60px;
}

.combined-dimension-table td.col-dimension {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combined-dimension-table td.col-metric {
    text-align: right !important;
    padding: 8px 6px;
}

.combined-dimension-table th.col-metric {
    text-align: right !important;
    padding: 8px 6px;
    font-size: 0.8em;
}

/* Group header row styling */
.combined-dimension-table thead tr:first-child th[colspan] {
    padding: 6px 4px;
    font-size: 0.75em;
    font-weight: 600;
}

/* GA4 Dimension Table Metric Column Styles */
.ga4-dimension-table .col-metric {
    font-weight: 400;
    text-align: right;
}

.ga4-dimension-table td.col-metric {
    text-align: right !important;
}

.ga4-dimension-table th.col-metric {
    text-align: right !important;
}

/* Day of Week Table - specific column widths for 8 columns */
.day-of-week-table {
    table-layout: fixed;
}

.day-of-week-table th.col-dimension,
.day-of-week-table td.col-dimension {
    width: 10%;
}

.day-of-week-table th.col-metric,
.day-of-week-table td.col-metric {
    width: 12.8%;
}

/* Outbound Clicks Table Metric Column Styles */
.outbound-dimension-table .col-metric {
    font-weight: 400;
    text-align: right;
}

.outbound-dimension-table td.col-metric {
    text-align: right !important;
}

.outbound-dimension-table th.col-metric {
    text-align: right !important;
}

.no-data {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
    font-size: 1.1em;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #e5e7eb;
}

/* Performance Pagination */
.perf-pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    position: relative;
}

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

.perf-page-number {
    color: #64748b;
    font-weight: 500;
    font-size: 0.72em;
}

.perf-page-btn {
    background: transparent;
    color: #3b82f6;
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 600;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.perf-page-btn:hover:not(:disabled) {
    background: #e0f2fe;
    color: #0369a1;
    transform: scale(1.04);
    border-radius: 50%;
}

.perf-page-btn:disabled {
    background: transparent;
    color: #d0d0d0;
    cursor: not-allowed;
    opacity: 0.6;
}

.perf-page-size {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.perf-page-size::after {
    content: 'per page';
    color: #64748b;
    font-size: 0.72em;
    font-weight: 500;
}

html[lang="zh-CN"] .perf-page-size::after {
    content: '条/页';
}

.perf-page-size label {
    display: none;
}

.perf-page-size select {
    padding: 4px 22px 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 0.72em;
    font-weight: 700;
    color: #3b82f6;
    background: white;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%233b82f6' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 9px;
    min-width: 50px;
}

.perf-page-size select:hover {
    border-color: #3b82f6;
    background-color: #f0f9ff;
}

.perf-page-size select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Performance Data Tables - Tablet */
.performance-tabs-nav {
    padding: 12px 15px;
    gap: 4px;
}

.perf-tab {
    padding: 8px 14px;
    font-size: 0.85em;
}

/* Infinite Scroll Spinner (Mobile) */
.infinite-scroll-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    color: #6b7280;
}

.infinite-scroll-spinner .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}

.infinite-scroll-spinner p {
    font-size: 0.9em;
    margin: 0;
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }
    
    /* Hide pagination on mobile - use infinite scroll instead */
    .pagination {
        display: none !important;
    }
    
    .header {
        padding: 25px 20px;
        border-radius: 15px;
        margin-bottom: 20px;
    }
    
    .header h1 {
        font-size: 1.8em;
        text-align: center;
    }
    
    /* Stats Cards - Tablet */
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .stat-card {
        padding: 16px 18px;
        border-radius: 14px;
    }
    
    .stat-card .number {
        font-size: 24px;
    }
    
    .stat-card .label {
        font-size: 13px;
    }
    
    /* Filters - Tablet */
    .filters {
        padding: 12px !important;
        flex-direction: column !important;
        gap: 10px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .filter-buttons {
        width: 100% !important;
        justify-content: flex-start !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #e5e7eb !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        row-gap: 8px !important;
    }
    
    .filter-btn {
        font-size: 0.85em !important;
        padding: 10px 16px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 25px !important;
    }
    
    /* Filter Controls - Tablet */
    .filter-controls {
        width: 100% !important;
        flex-direction: row !important;
        gap: 10px !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
    }
    
    .filter-group {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .filter-label {
        font-size: 0.7em !important;
        white-space: nowrap !important;
    }
    
    .filter-select {
        font-size: 0.7em !important;
        padding: 6px 8px !important;
        min-width: auto !important;
    }
    
    .auto-refresh-toggle {
        align-self: flex-start !important;
        font-size: 0.75em !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    
    .auto-refresh-toggle label {
        gap: 5px !important;
        white-space: nowrap !important;
    }
    
    .auto-refresh-toggle input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }
    
    .refresh-interval-select {
        font-size: 0.75em !important;
        padding: 5px 8px !important;
        border-radius: 20px !important;
        min-width: auto !important;
    }
    
    .custom-interval-input {
        width: 60px;
        font-size: 0.8em;
        padding: 4px 8px;
        border-radius: 20px;
    }
    
    /* Deployment Items - Tablet */
    .deployment-item {
        padding: 20px !important;
        margin-bottom: 15px !important;
        border-radius: 12px !important;
    }
    
    .deployment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .deployment-domain {
        font-size: 1.2em;
    }
    
    .deployment-base {
        font-size: 0.85em;
    }
    
    .deployment-meta {
        font-size: 0.8em;
        gap: 15px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .deployment-status {
        font-size: 0.8em;
        padding: 8px 16px;
    }
    
    .progress-label {
        font-size: 0.9em;
    }
    
    .stage-pipeline-title {
        font-size: 0.9em;
    }
    
    .domain-title {
        font-size: 1.2em;
    }
    
    .stage-items {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
    
    .stage-item {
        padding: 10px;
    }
    
    /* Action Buttons - Horizontal scroll on mobile (modern app-style) */
    .action-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scroll-behavior: smooth;
        padding-bottom: 5px; /* Space for scrollbar */
    }
    
    /* Hide scrollbar but keep functionality */
    .action-buttons::-webkit-scrollbar {
        height: 4px;
    }
    
    .action-buttons::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .action-buttons::-webkit-scrollbar-thumb {
        background: rgba(59, 130, 246, 0.3);
        border-radius: 2px;
    }
    
    .action-buttons::-webkit-scrollbar-thumb:hover {
        background: rgba(59, 130, 246, 0.5);
    }
    
    .view-logs-btn,
    .verify-btn,
    .check-indexing-btn,
    .view-performance-btn,
    .view-analytics-btn {
        flex: 0 0 auto; /* Don't shrink, don't grow, auto width */
        min-width: 140px; /* Minimum comfortable tap size */
        padding: 12px 20px !important;
        font-size: 0.85em !important;
        text-align: center;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        white-space: nowrap;
    }
    
    .action-btn {
        font-size: 0.8em;
        padding: 7px 14px;
    }
    
    /* Modals - Tablet */
    .modal {
        padding: 10px !important;
    }
    
    .modal-content {
        margin: 10px auto !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        max-height: calc(100vh - 100px) !important;
    }
    
    .modal-header h2 {
        font-size: 1.3em;
    }
    
    .modal-body {
        padding: 20px;
        font-size: 0.9em;
    }
    
    /* Performance Date Selector - Tablet */
    .perf-date-selector {
        padding: 12px 15px;
        gap: 10px;
    }
    
    .perf-date-selector label {
        font-size: 0.85em;
    }
    
    .perf-date-selector select {
        min-width: 130px;
        font-size: 0.85em;
        padding: 6px 12px;
    }
    
    .perf-date-info {
        font-size: 0.75em;
        width: 100%;
        margin-left: 0;
        text-align: right;
    }
    
    /* Custom Date Range Inputs - Stack on Tablet */
    .custom-date-inputs {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .custom-date-inputs input[type="date"],
    .custom-date-inputs button {
        width: 100%;
    }
    
    .custom-date-inputs span {
        text-align: center;
        font-size: 0.8em;
    }
    
    .performance-summary.compact {
        gap: 12px;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .top-pages.compact {
        padding: 15px;
    }
    
    .top-pages.compact h3 {
        font-size: 1em;
    }
    
    /* Performance Data Tables - Tablet */
    .dimension-table-container {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .dimension-table-container h3 {
        font-size: 1.1em;
        margin-bottom: 15px;
    }
    
    .dimension-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .dimension-table {
        font-size: 0.85em;
        min-width: 600px;
    }
    
    .dimension-table th {
        padding: 10px 8px;
        font-size: 0.8em;
    }
    
    .dimension-table td {
        padding: 10px 8px;
        font-size: 0.85em;
    }
    
    .dimension-table td.col-dimension {
        max-width: 250px;
    }
    
    .perf-pagination {
        flex-direction: column;
        gap: 12px;
        padding: 12px 0;
    }
    
    .perf-pagination-controls {
        gap: 12px;
    }
    
    .perf-page-btn {
        padding: 8px 14px;
        font-size: 0.85em;
    }
    
    .perf-page-number {
        font-size: 0.85em;
    }
    
    .perf-page-size {
        position: static;
        gap: 6px;
        justify-content: center;
        right: auto;
    }
    
    .perf-page-size label {
        font-size: 0.85em;
    }
    
    .perf-page-size select {
        padding: 6px 10px;
        font-size: 0.85em;
    }
    
    /* Footer - Tablet */
    .footer {
        font-size: 0.85em;
        padding: 15px;
        border-radius: 12px;
    }
    
    /* Responsive Pagination */
    .pagination {
        padding: 15px 20px !important;
        gap: 12px !important;
        flex-direction: column !important;
        border-radius: 12px 12px 0 0 !important;
        margin-bottom: 0 !important;
    }
    
    .pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px;
    }
    
    .pagination-size {
        position: static !important;
        justify-content: center;
    }
    
    .last-update-footer {
        font-size: 0.75em !important;
        padding: 12px 15px !important;
        border-radius: 0 0 12px 12px !important;
        margin-bottom: 15px !important;
    }
    
    .pagination-btn {
        font-size: 0.75em;
        padding: 5px 8px;
        min-width: 28px;
        height: 28px;
    }
    
    .pagination-btn.pagination-prev,
    .pagination-btn.pagination-next {
        padding: 5px 6px;
        min-width: 28px;
        width: 28px;
        height: 28px;
    }
    
    .pagination-current {
        font-size: 0.75em;
        padding: 5px 8px;
        min-width: 28px;
        height: 28px;
    }
    
    .pagination-ellipsis {
        font-size: 0.75em;
    }
    
    .pagination-size {
        gap: 7px;
        justify-content: center;
        width: auto;
    }
    
    .pagination-size::before {
        font-size: 0.68em;
    }
    
    .pagination-size::after {
        font-size: 0.68em;
    }
    
    .page-size-select {
        font-size: 0.68em;
        padding: 3px 18px 3px 6px;
        min-width: 45px;
    }
}

/* ================================
   TOP NAVIGATION BAR
   ================================ */

.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1001;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.top-navbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 0;
    flex-shrink: 0;
}

.top-navbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, calc(100% - 420px));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.top-navbar-center > * { pointer-events: auto; }

.top-navbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    justify-content: flex-end;
}

.top-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3em;
    font-weight: 700;
    color: #374151;
}

.logo-icon {
    font-size: 1.5em;
    color: #3b82f6;
}

.logo-text {
    display: inline-block;
}

.mobile-menu-btn {
    display: flex; /* Show on all screen sizes */
    background: transparent;
    border: none;
    color: #3b82f6;
    width: 44px;
    height: 44px;
    border-radius: 50%; /* Circular */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
    margin-left: -6px;
}

.mobile-menu-btn:hover {
    background: #f3f4f6; /* Light gray background on hover */
    color: #2563eb;
}

.mobile-menu-btn .material-symbols-outlined {
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1;
}

.top-nav-btn {
    background: transparent;
    border: none;
    color: #6b7280;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.top-nav-btn:hover {
    background: #f3f4f6;
    color: #3b82f6;
}

.top-nav-btn .material-symbols-outlined {
    font-size: 1.3em;
}

.top-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
    justify-content: center;
    position: relative; /* anchors the unread-notifications badge */
}
/* Unread-notifications badge rides the avatar's top-right corner (the
   Notifications entry itself lives in the user dropdown). */
.top-user-menu .notif-bell-badge { top: 0; right: 0; }
.top-user-menu:hover {
    background: #f3f4f6;
}

/* User dropdown menu — positioned fixed so it's independent of parent layout */
.user-dropdown {
    display: none;
    position: fixed;
    top: 56px;
    right: 16px;
    width: 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    z-index: 2000;
    overflow: hidden;
}
.user-dropdown.show { display: block; }
.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}
.user-dropdown-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.user-dropdown-email {
    font-size: 12px;
    color: #717171;
    margin-top: 2px;
}
.user-dropdown-divider {
    height: 1px;
    background: #e5e7eb;
}
.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: none;
    font-size: 14px;
    color: #c13515;
    cursor: pointer;
    transition: background 0.15s;
}
.user-dropdown-item:hover {
    background: #fef2f2;
}
.user-dropdown-item .material-symbols-outlined {
    font-size: 20px;
}
/* Neutral (non-destructive) dropdown entries — the base class carries the
   red logout treatment, so non-logout items opt into gray/blue. */
.user-dropdown-item--neutral { color: #3c4043; }
.user-dropdown-item--neutral:hover { background: #f1f3f4; }
.user-dropdown-count {
    margin-left: auto;
    min-width: 18px;
    padding: 1px 7px;
    border-radius: 9999px;
    background: #c13515;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.top-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}

.top-user-avatar .material-symbols-outlined {
    font-size: 40px;
    color: #3b82f6;
    font-variation-settings:
        'FILL' 1,
        'wght' 300,
        'GRAD' 0,
        'opsz' 48;
}

.top-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.top-user-name {
    font-size: 0.9em;
    font-weight: 600;
    color: #374151;
}

.top-user-role {
    font-size: 0.75em;
    color: #6b7280;
}

/* AI Search Bar (Gmail-style) */
.ai-search-bar {
    width: 100%;
    max-width: 720px;
    height: 44px;
    background: #f1f3f4;
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: all 0.2s ease;
    position: relative;
}

.ai-search-bar:hover {
    background: #e8eaed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ai-search-bar.focused {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ai-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.95em;
    color: #374151;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ai-search-input::placeholder {
    color: #5f6368;
}

.search-clear-btn {
    background: transparent;
    border: none;
    color: #5f6368;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.search-clear-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #374151;
}

.search-clear-btn .material-symbols-outlined {
    font-size: 1.1em;
}

/* ================================
   TOPNAV - RESPONSIVE
   ================================ */

/* Mobile - Compact top nav */
@media (max-width: 768px) {
    .top-navbar {
        padding: 0 0;
        gap: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .top-navbar-left {
        padding-left: 4px;
        gap: 8px;
        flex-shrink: 0;
    }
    
    /* Align burger button properly on mobile */
    .mobile-menu-btn {
        margin-left: 0;
    }
    
    /* Hide BuildMidas text on mobile (shown in sidebar instead) */
    .logo-text {
        display: none;
    }
    
    .top-navbar-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 180px);
        max-width: none;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }
    .top-navbar-center > * { pointer-events: auto; }
    
    .top-navbar-right {
        gap: 8px;
        flex-shrink: 0;
        padding-right: 4px;
    }
    
    /* AI Search Bar - Larger on mobile for better touch target */
    .ai-search-bar {
        height: 48px;
        padding: 0 14px;
        max-width: 100%;
        width: 100%;
    }
    
    .ai-search-input {
        font-size: 1em;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    .search-clear-btn {
        width: 20px;
        height: 20px;
    }
    
    .search-clear-btn .material-symbols-outlined {
        font-size: 1em;
    }
    
    /* Hide user role on mobile */
    .top-user-info {
        display: none;
    }
    
    .top-user-avatar {
        width: 44px;
        height: 44px;
    }
    
    .top-user-avatar .material-symbols-outlined {
        font-size: 44px;
    }
    
    /* Sidebar adjustments for mobile with top nav */
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        z-index: 1003;
        top: 0;
        /* Dynamic viewport height so the drawer is exactly the VISIBLE height on
           mobile. Plain 100vh is taller than the visible area when the URL bar is
           showing, pushing the last items (GA4 Setup Guide) below the fold where
           the drawer can't scroll to them — the page scrolls instead. */
        height: 100vh;
        height: 100dvh;
        /* Keep the drawer's scroll from chaining to the page behind it. */
        overscroll-behavior: contain;
    }
    
    .sidebar-header {
        display: flex !important; /* Show header on mobile */
        padding: 0;
        padding-left: 20px;
        height: 60px;
        align-items: center;
        border-bottom: 1px solid #e5e7eb;
        /* Pin the website name to the top of the drawer — it stays put while the
           nav list scrolls under it (opaque bg so content doesn't show through). */
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }
    
    .sidebar-header h2 {
        display: block !important;
        font-size: 1.3em;
        font-weight: 700;
        color: #374151;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3);
    }
    
    /* Main content adjustments */
    .main-content {
        margin-left: 0 !important;
        margin-top: 60px;
        padding: 8px;
    }
    
    .main-content.sidebar-collapsed {
        margin-left: 0;
    }
}

/* Small Mobile - Compact top nav */
@media (max-width: 480px) {
    .top-navbar {
        padding: 0 8px;
        gap: 6px;
    }
    
    .top-navbar-left {
        gap: 6px;
    }
    
    .top-navbar-center {
        width: calc(100% - 120px);
    }
    
    .top-logo {
        display: none !important; /* Hide logo on mobile - shown in sidebar instead */
    }
    
    .logo-icon {
        font-size: 1.2em;
    }
    
    .logo-text {
        font-size: 0.9em;
    }
    
    /* AI Search Bar - Even more compact and flexible */
    .ai-search-bar {
        height: 36px;
        padding: 0 10px;
        min-width: 100px;
        width: 100%;
    }
    
    .ai-search-input {
        font-size: 14px;
    }
    
    .ai-search-input::placeholder {
        font-size: 13px;
    }
    
    .top-nav-btn {
        width: 36px;
        height: 36px;
    }
    
    .top-user-avatar {
        width: 32px;
        height: 32px;
    }
    
    .top-user-avatar .material-symbols-outlined {
        font-size: 32px;
    }
    
    .top-user-menu {
        padding: 4px 6px;
    }
    
    /* Filters - Phone - Larger touch targets */
    .filters {
        padding: 12px !important;
        gap: 8px !important;
    }
    
    .filter-buttons {
        gap: 8px !important;
        row-gap: 8px !important;
        padding-bottom: 8px !important;
    }
    
    .filter-btn {
        font-size: 0.8em !important;
        padding: 9px 14px !important;
    }
    
    /* Filter Controls - Phone - Larger and more spacing */
    .filter-controls {
        gap: 8px !important;
        padding-bottom: 0 !important;
        flex-wrap: wrap !important;
    }
    
    .filter-group {
        gap: 6px !important;
        white-space: nowrap !important;
    }
    
    .filter-label {
        font-size: 0.75em !important;
        white-space: nowrap !important;
    }
    
    .filter-select {
        font-size: 0.75em !important;
        padding: 7px 9px !important;
        min-width: auto !important;
    }
    
    .auto-refresh-toggle {
        font-size: 0.8em !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    
    .auto-refresh-toggle label {
        gap: 5px !important;
        white-space: nowrap !important;
    }
    
    .auto-refresh-toggle input[type="checkbox"] {
        width: 15px !important;
        height: 15px !important;
        flex-shrink: 0 !important;
    }
    
    .refresh-interval-select {
        font-size: 0.8em !important;
        padding: 6px 8px !important;
        min-width: auto !important;
    }
    
    .custom-interval-input {
        width: 55px !important;
        font-size: 0.8em !important;
        padding: 6px 8px !important;
    }
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ============================================================================
   AI CHATBOT MODAL
   ============================================================================ */

.ai-chat-modal {
    position: fixed;
    top: 60px; /* Below top navbar */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1002; /* Above top navbar */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ai-chat-modal.active {
    display: flex;
}

.ai-chat-container {
    background: white;
    border-radius: 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 100px); /* Account for top navbar + padding */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.ai-chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-chat-title .material-symbols-outlined {
    font-size: 1.5em;
    color: #3b82f6;
}

.ai-chat-title h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #374151;
}

.ai-chat-close {
    background: #f3f4f6;
    border: none;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ai-chat-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.ai-chat-close .material-symbols-outlined {
    font-size: 1.3em;
}

.ai-chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: white;
}

/* Legacy modal message styles — scoped to .ai-chat-modal only */
.ai-chat-modal .ai-message,
.ai-chat-modal .user-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.ai-chat-modal .user-message {
    flex-direction: row-reverse;
}
.ai-chat-modal .message-content {
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px 16px;
    max-width: 80%;
}
.ai-chat-modal .user-message .message-content {
    background: #3b82f6;
    color: white;
}
.ai-chat-modal .message-content p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
}

.ai-chat-input-container {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.ai-chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 20px; /* Pill-shaped like top search bar */
    font-size: 0.95em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.2s ease;
}

.ai-chat-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-chat-send {
    background: #3b82f6;
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%; /* Circular button */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-chat-send:hover {
    background: #2563eb;
}

.ai-chat-send:active {
    transform: scale(0.95);
}

.ai-chat-send .material-symbols-outlined {
    font-size: 1.2em;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ai-chat-modal {
        padding: 10px;
        align-items: flex-start;
        padding-top: 20px;
    }
    
    .ai-chat-container {
        max-height: calc(100vh - 80px); /* More space for top navbar on mobile */
        max-width: 100%;
    }
    
    .ai-chat-header {
        padding: 16px;
    }
    
    .ai-chat-title h3 {
        font-size: 1em;
    }
    
    .ai-chat-messages {
        padding: 15px;
    }
    
    .message-content {
        max-width: 75%;
        font-size: 0.9em;
    }
    
    .ai-chat-input-container {
        padding: 15px;
    }
    
    .ai-chat-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

@media (max-width: 480px) {
    .ai-chat-modal {
        padding: 8px;
        padding-top: 15px;
    }
    
    .ai-chat-container {
        max-height: calc(100vh - 75px);
        border-radius: 10px;
    }
    
    .ai-chat-header {
        padding: 12px 15px;
    }
    
    .ai-chat-title .material-symbols-outlined {
        font-size: 1.3em;
    }
    
    .ai-chat-title h3 {
        font-size: 0.95em;
    }
    
    .ai-chat-close {
        width: 28px;
        height: 28px;
    }
    
    .ai-chat-messages {
        padding: 12px;
        gap: 12px;
    }
    
    .ai-message .material-symbols-outlined,
    .user-message .material-symbols-outlined {
        width: 28px;
        height: 28px;
        font-size: 1.1em;
    }
    
    .message-content {
        max-width: 70%;
        padding: 10px 14px;
        font-size: 0.85em;
    }
    
    .ai-chat-input-container {
        padding: 12px;
        gap: 8px;
    }
    
    .ai-chat-send {
        width: 40px;
        height: 40px;
    }
}

/* Sticky table header with shadow on scroll */
.table-responsive {
    position: relative;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 500px;
    -webkit-overflow-scrolling: touch;
}

.data-table thead::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.table-responsive.scrolled .data-table thead::after {
    opacity: 1;
}

/* ============================================================================
   DEPLOYMENT STATISTICS SECTION
   ============================================================================ */

.deployment-stats-section {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
}

.stats-header h3 {
    font-size: 1.4em;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-header h3 .material-symbols-outlined {
    font-size: 1.2em;
    color: #3b82f6;
}

.stats-period-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stats-period-select {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #6b7280;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
    height: 38px;
}

.stats-period-select:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.stats-period-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.stats-custom-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-custom-dates input[type="date"] {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    font-size: 0.85em;
    color: #6b7280;
}

.stats-custom-dates span {
    color: #9ca3af;
    font-size: 0.85em;
}

.stats-apply-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #3b82f6;
    background: #3b82f6;
    color: white;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stats-apply-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.stats-content {
    min-height: 200px;
}

/* Overview period selector container */
.overview-period-selector-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-bottom: 15px;
}

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

.stats-chart-container {
    margin-top: 30px;
    padding: 20px;
    border-radius: 12px;
    position: relative;
}

.stats-chart-container .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
    flex-wrap: wrap;
}

.stats-chart-container .chart-header h4 {
    margin-bottom: 0;
}

.stats-chart-container h4 {
    font-size: 1.1em;
    color: #374151;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-chart-container h4 .material-symbols-outlined {
    color: #3b82f6;
}

/* Performance Timeline Grid (2x2 layout for domain charts) */
.performance-timeline-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.performance-timeline-grid .stats-chart-container {
    margin-top: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.performance-timeline-grid .stats-chart-container h5 {
    font-size: 1em;
    color: #374151;
    margin-bottom: 15px;
    font-weight: 600;
}

.performance-timeline-grid .stats-chart-container canvas {
    max-height: 300px;
    min-height: 200px;
    width: 100% !important;
    height: auto !important;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .performance-timeline-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    
    .performance-timeline-grid .stats-chart-container {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 20px;
    }
    
    .performance-timeline-grid .stats-chart-container canvas {
        width: 100% !important;
    }
    
    .performance-timeline-grid .stats-chart-container h5 {
        font-size: 1.1em;
    }
}

/* Overview Charts Grid (2x2 layout for pie/bar charts) - matches performance-timeline-grid styling */
.overview-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.overview-charts-grid .stats-chart-container {
    margin-top: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.overview-charts-grid .stats-chart-container h5 {
    font-size: 1em;
    color: #374151;
    margin-bottom: 15px;
    font-weight: 600;
}

.overview-charts-grid .stats-chart-container canvas {
    max-height: 300px;
    min-height: 200px;
    width: 100% !important;
    height: auto !important;
}

/* Responsive: Stack on mobile */
@media (max-width: 992px) {
    .overview-charts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .overview-charts-grid .stats-chart-container {
        padding: 20px;
    }
    
    .overview-charts-grid .stats-chart-container canvas {
        width: 100% !important;
    }
    
    .overview-charts-grid .stats-chart-container h5 {
        font-size: 1.1em;
    }
}

#statsChart {
    max-height: 300px;
}

.stats-chart {
    max-height: 400px;
}

/* Mobile responsive for stats section */
@media (max-width: 768px) {
    .deployment-stats-section {
        padding: 15px;
    }

    .stats-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .stats-period-selector {
        width: 100%;
        justify-content: flex-start;
    }

    .stats-period-select {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }

    .stats-chart-container {
        padding: 15px;
    }

    .overview-period-selector-container {
        justify-content: flex-start;
        margin-top: 15px;
    }
}

/* Deployment stage cards */
.deployment-stage-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.deployment-stage-card h4 {
    font-size: 0.95em;
    color: #374151;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.deployment-stage-card .stage-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.deployment-stage-card .stage-status.success {
    color: #10b981;
}

.deployment-stage-card .stage-status.pending {
    color: #f59e0b;
}

.deployment-stage-card .stage-status.failed {
    color: #ef4444;
}

.deployment-stage-card .stage-detail {
    font-size: 0.85em;
    color: #6b7280;
    margin-top: 5px;
}

/* Performance and Analytics Cards */
.performance-card,
.analytics-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.performance-card h4,
.analytics-card h4 {
    font-size: 0.95em;
    color: #374151;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.performance-card .metric-row,
.analytics-card .metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.performance-card .metric-row:last-child,
.analytics-card .metric-row:last-child {
    border-bottom: none;
}

.performance-card .metric-label,
.analytics-card .metric-label {
    font-size: 0.85em;
    color: #6b7280;
}

.performance-card .metric-value,
.analytics-card .metric-value {
    font-size: 0.9em;
    font-weight: 600;
    color: #374151;
}

/* Info and Error Messages */
.info-message {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

.info-message .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.info-message p {
    font-size: 1.1em;
    margin: 0;
}

.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.error-message strong {
    color: #dc2626;
    display: block;
    margin-bottom: 8px;
}

.error-message p {
    color: #7f1d1d;
    margin: 0;
}

/* Loading State */
.loading {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

.spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

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

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.p-20 {
    padding: 20px;
}

/* Print Styles */
@media print {
    .sidebar,
    .top-navbar,
    .filters,
    .footer,
    button {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
        padding: 20px;
    }

    .deployment-card {
        page-break-inside: avoid;
    }
}

/* ============================================================================
   TOOLTIPS & INFO ICONS (NEW FEATURE - November 2025)
   ============================================================================ */

.info-tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    font-weight: bold;
    cursor: help;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
}

.info-icon:hover {
    background: #3b82f6;
    color: white;
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.info-tooltip {
    position: absolute;
    top: 60px;
    left: 5px;
    right: 5px;
    
    /* Modern styling to match page design */
    background: white;
    color: #374151;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
    
    font-size: 13px;
    line-height: 1.7;
    width: auto;
    max-width: 700px;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.info-tooltip.show {
    opacity: 1;
    visibility: visible;
    top: 55px;
    pointer-events: auto;
}

/* Tooltip arrow - pointing upward, styled to match */
.info-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 40px;
    border: 8px solid transparent;
    border-bottom-color: white;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
}

/* Subtle border arrow for depth */
.info-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 40px;
    border: 9px solid transparent;
    border-bottom-color: #e5e7eb;
    z-index: -1;
}

/* Tooltip for stat cards */
.stat-card .label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.stat-card .label .info-tooltip-container {
    margin-left: 4px;
}

.stat-card .label .info-icon {
    width: 16px;
    height: 16px;
    font-size: 11px;
}

.stat-card .label .info-tooltip {
    min-width: 280px;
    max-width: 380px;
}

/* Tooltip for chart titles */
.stats-chart-container h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.stats-chart-container h4 .chart-title-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    cursor: pointer;
}

.stats-chart-container h4 .info-tooltip-container {
    margin-left: auto;
}

.stats-chart-container h4 .info-icon {
    width: 20px;
    height: 20px;
    font-size: 13px;
}

/* Tooltip content styling - updated for light theme */
.tooltip-title {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 15px;
    color: #374151;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 8px;
}

.tooltip-content {
    font-weight: 400;
    color: #374151;
    margin-bottom: 10px;
    line-height: 1.6;
}

.tooltip-formula {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f0f9ff;
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    line-height: 1.8;
    color: #1e40af;
}

.tooltip-formula strong {
    color: #374151;
    font-weight: 600;
}

.tooltip-example {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .info-tooltip {
        /* Left-aligned with margins */
        position: absolute;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        font-size: 12px;
        padding: 14px 16px;
    }
    
    /* Keep tooltip left-aligned when shown */
    .info-tooltip.show {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    /* Arrow stays on left - white to match new design */
    .info-tooltip::after {
        left: 30px !important;
        right: auto;
        bottom: 100%;
        top: auto;
        border-bottom-color: white !important;
        border-top-color: transparent;
    }
    
    /* Border arrow for mobile */
    .info-tooltip::before {
        left: 30px !important;
        bottom: 100%;
        border-bottom-color: #e5e7eb !important;
    }
    
    .stat-card .label .info-tooltip {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    /* Header tooltip on mobile - ensure it fits */
    .stats-header h3 .info-tooltip {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    .stats-header h3 .info-tooltip.show {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    /* Chart title tooltips - left aligned */
    .stats-chart-container h4 .info-tooltip {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    .stats-chart-container h4 .info-tooltip.show {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    /* Adjust tooltip arrow on mobile - white to match new design */
    .stats-header h3 .info-tooltip::after,
    .stats-chart-container h4 .info-tooltip::after {
        left: 30px !important;
        right: auto;
        bottom: 100%;
        top: auto;
        border-bottom-color: white !important;
        border-top-color: transparent;
    }
    
    /* Border arrow for mobile charts */
    .stats-header h3 .info-tooltip::before,
    .stats-chart-container h4 .info-tooltip::before {
        left: 30px !important;
        border-bottom-color: #e5e7eb !important;
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    .info-tooltip {
        left: 5px;
        right: 5px;
        max-width: 700px;
    }
}

/* Animation for tooltip show/hide */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.info-tooltip.show {
    animation: tooltipFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tooltip for section headers - HOVER TRIGGER */
.stats-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    cursor: pointer;
}

/* Make the entire h3 hoverable for tooltip */
.stats-header h3:hover .info-tooltip {
    opacity: 1;
    visibility: visible;
    top: 55px;
    pointer-events: auto;
}

/* Chart titles - HOVER TRIGGER - only on text, not entire h4 */
.stats-chart-container h4 {
    position: relative;
}

.stats-chart-container h4 .chart-title-text:hover .info-tooltip {
    opacity: 1;
    visibility: visible;
    top: 55px;
    pointer-events: auto;
}

/* ============================================================================
   AGGREGATE PERFORMANCE STYLES
   ============================================================================ */

/* Stats Table */
.stats-table-container {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stats-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 500px;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.stats-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.stats-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s ease;
}

.stats-table tbody tr:hover {
    background: #f9fafb;
}

.stats-table tbody tr:last-child {
    border-bottom: none;
}

.stats-table td {
    padding: 14px 12px;
    font-size: 14px;
    color: #374151;
}

.stats-table td a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.stats-table td a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.stats-table td strong {
    color: #374151;
    font-weight: 600;
}

/* Rank Badge */
.rank-badge {
    display: inline-block;
    background: #e5e7eb;
    color: #6b7280;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}

.rank-badge.top-rank {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.3);
}

/* Domain Link */
.domain-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.domain-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* Sublabel for stat cards */
.stat-card .sublabel {
    font-size: 0.75em;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 4px;
    font-weight: 400;
}

/* ============================================================================
   AGGREGATE PERFORMANCE SECTION (NEW - Phase 1)
   ============================================================================ */

.aggregate-info {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.info-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.info-badge .material-symbols-outlined {
    font-size: 20px;
}

.info-badge strong {
    font-weight: 600;
}

/* Metrics Grid for Aggregate Performance */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.metric-card {
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.metric-card:nth-child(1) {
    background: #eef4fe;
}

.metric-card:nth-child(2) {
    background: #efedfd;
}

.metric-card:nth-child(3) {
    background: #eaf6ec;
}

.metric-card:nth-child(4) {
    background: #fdf3e3;
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-card:nth-child(1) .metric-icon {
    color: #3b82f6;
}

.metric-card:nth-child(2) .metric-icon {
    color: #8b5cf6;
}

.metric-card:nth-child(3) .metric-icon {
    color: #10b981;
}

.metric-card:nth-child(4) .metric-icon {
    color: #f59e0b;
}

.metric-icon .material-symbols-outlined {
    font-size: 32px;
}

.metric-content {
    display: flex;
    /* DOM is label-then-value; the family shows the value on top. */
    flex-direction: column-reverse;
    align-items: flex-start;
}

.metric-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #1c2430;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
    min-height: 200px;
}

.empty-state .material-symbols-outlined {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-state p {
    font-size: 18px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.empty-state small {
    font-size: 14px;
    color: #9ca3af;
}

/* Error Message with Retry */
.error-message .retry-btn {
    margin-top: 16px;
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.error-message .retry-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.error-message .retry-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Data Table Styling */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.data-table thead {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #6b21a8;
}

.data-table thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
}

.data-table thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
}

.data-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s ease;
}

.data-table tbody tr:hover {
    background: #f9fafb;
}

.data-table tbody tr:last-child {
    border-bottom: none;
}

.data-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.data-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.data-table td {
    padding: 14px 12px;
    font-size: 14px;
    color: #374151;
}

.data-table td a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.data-table td a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.data-table td strong {
    color: #374151;
    font-weight: 600;
}

/* Stats Section Headers */
.stats-section h4 {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-section h4 .material-symbols-outlined {
    font-size: 24px;
    color: #667eea;
}

/* Chart Container for Aggregate */
.stats-chart-container {
    background: white;
    border-radius: 16px;
    padding: 24px;
}

.stats-chart-container h4 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.stats-chart-container canvas {
    max-height: 400px;
    min-height: 250px;
}

/* Specific styling for GA4 aggregate chart */
#aggregateAnalyticsChart {
    min-height: 300px !important;
    width: 100% !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .aggregate-info {
        flex-direction: column;
    }
    
    .metric-card {
        padding: 20px;
    }
    
    .metric-value {
        font-size: 24px;
    }
    
    .table-responsive {
        font-size: 13px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-responsive table {
        min-width: 600px;
    }
    
    .data-table th,
    .data-table td {
        padding: 10px 12px;
    }
    
    /* Aggregate Performance by Dimension - Mobile Optimizations */
    .performance-tables-wrapper {
        padding: 0;
    }
    
    .performance-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 10px;
        margin: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .performance-tabs-nav::-webkit-scrollbar {
        display: none;
    }
    
    .performance-tabs-nav .perf-tab {
        font-size: 13px;
        padding: 10px 16px;
        white-space: nowrap;
        min-width: auto;
    }
    
    .dimension-table-container {
        padding: 15px 10px;
    }
    
    .dimension-table-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .dimension-table-wrapper {
        max-height: 400px;
        font-size: 13px;
    }
    
    .dimension-table {
        font-size: 0.85em;
        min-width: 600px;
    }
    
    .dimension-table th {
        padding: 10px 8px;
        font-size: 0.85em;
    }
    
    .dimension-table td {
        padding: 10px 8px;
        font-size: 0.85em;
    }
    
    .dimension-table .col-dimension {
        width: 35%;
        max-width: 200px;
    }
    
    .dimension-table .col-clicks,
    .dimension-table .col-impressions,
    .dimension-table .col-ctr,
    .dimension-table .col-position {
        width: 16%;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile - iPhone SE, etc */
    .performance-tabs-nav {
        padding: 10px 5px;
    }
    
    .performance-tabs-nav .perf-tab {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .dimension-table-container {
        padding: 10px 5px;
    }
    
    .dimension-table-wrapper {
        max-height: 350px;
        font-size: 12px;
    }
    
    .dimension-table {
        font-size: 0.8em;
        min-width: 550px;
    }
    
    .dimension-table th {
        padding: 8px 6px;
        font-size: 0.8em;
    }
    
    .dimension-table td {
        padding: 8px 6px;
        font-size: 0.8em;
    }
    
    .dimension-table .col-dimension {
        width: 30%;
        max-width: 150px;
    }
    
    .dimension-table td.col-dimension {
        font-size: 0.85em;
    }
}

/* Domain Performance Insights Styles */
.insights-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.insight-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.insight-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insight-icon .material-symbols-outlined {
    font-size: 28px;
}

.insight-content {
    flex: 1;
}

.insight-value {
    font-size: 28px;
    font-weight: 700;
    color: #374151;
    line-height: 1;
    margin-bottom: 5px;
}

.insight-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.insight-percentage {
    font-size: 14px;
    font-weight: 600;
    margin-top: 5px;
}

/* Alert Styles */
.alerts-container {
    display: grid;
    gap: 12px;
}

.alert-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid;
}

.alert-card.critical {
    background: #fef2f2;
    border-left-color: #dc2626;
}

.alert-card.warning {
    background: #fefce8;
    border-left-color: #ca8a04;
}

.alert-icon {
    flex-shrink: 0;
    font-size: 24px;
}

.alert-card.critical .alert-icon {
    color: #dc2626;
}

.alert-card.warning .alert-icon {
    color: #ca8a04;
}

.alert-content {
    flex: 1;
}

.alert-content strong {
    color: #374151;
    font-size: 14px;
}

.alert-content p {
    margin: 5px 0 0 0;
    color: #6b7280;
    font-size: 13px;
}

/* Time Categories Grid */
.time-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.time-category-card {
    background: white;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

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

.time-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #374151;
    font-weight: 600;
    font-size: 14px;
}

.time-category-header .material-symbols-outlined {
    font-size: 20px;
    color: #6b7280;
}

.time-category-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.stat-label {
    color: #6b7280;
}

.stat-value {
    font-weight: 600;
    color: #374151;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge .material-symbols-outlined {
    font-size: 14px;
}

.status-badge.critical,
.status-badge.status-error {
    background: #fee2e2;
    color: #dc2626;
}

.status-badge.warning,
.status-badge.status-warning {
    background: #fef3c7;
    color: #ca8a04;
}

.status-badge.new {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.status-success {
    background: #dcfce7;
    color: #16a34a;
}

/* Code Badge (for HTTP status codes) */
.code-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: monospace;
}

.code-badge.code-2xx {
    background: #dcfce7;
    color: #16a34a;
}

.code-badge.code-3xx {
    background: #dbeafe;
    color: #2563eb;
}

.code-badge.code-4xx {
    background: #fef3c7;
    color: #ca8a04;
}

.code-badge.code-5xx {
    background: #fee2e2;
    color: #dc2626;
}

/* Step Badge (for verification steps) */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 11px;
}

.step-badge.step-success {
    background: #dcfce7;
    color: #16a34a;
}

.step-badge.step-error {
    background: #fee2e2;
    color: #dc2626;
}

.steps-container {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Verification Table Styles */
.verification-table {
    width: 100%;
}

/* Health & Indexing Table Styles */
.health-table,
.indexing-table {
    width: 100%;
}

.health-table .domain-link,
.indexing-table .domain-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.health-table .domain-link:hover,
.indexing-table .domain-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.health-table .domain-link .material-symbols-outlined,
.indexing-table .domain-link .material-symbols-outlined {
    font-size: 14px;
    opacity: 0.6;
}

.row-error {
    background: #fef2f2 !important;
}

.row-warning {
    background: #fffbeb !important;
}

.text-success {
    color: #16a34a;
}

.text-error {
    color: #dc2626;
}

.text-warning {
    color: #ca8a04;
}

.text-muted {
    color: #6b7280;
}

.error-hint {
    display: inline-block;
    cursor: help;
    margin-left: 4px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.25);
}

.btn-icon:hover {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35);
    transform: scale(1.05);
}

.btn-icon:active {
    transform: scale(0.95);
}

.btn-icon .material-symbols-outlined {
    font-size: 16px;
    color: #fff;
}

/* Secondary/subtle icon button variant */
.btn-icon-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon-secondary:hover {
    background: #f3f4f6;
    border-color: #6366f1;
}

.btn-icon-secondary:hover .material-symbols-outlined {
    color: #6366f1;
}

.btn-icon-secondary .material-symbols-outlined {
    font-size: 18px;
    color: #6b7280;
}

/* Success variant for icon buttons */
.btn-icon-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

.btn-icon-success:hover {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.empty-state .material-symbols-outlined {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-state h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #374151;
}

.empty-state p {
    margin: 0 0 16px 0;
}

.empty-state code {
    display: inline-block;
    padding: 8px 16px;
    background: #f3f4f6;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
}

/* Zero Impression Details */
.zero-impression-details h5 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.domain-alerts h5 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Optimized Alerts Section */
/* .domain-alerts-optimized - Removed wrapper styling for flush alignment with other sections */

.alerts-summary-header {
    margin-bottom: 20px;
}

.alerts-summary-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.alert-summary-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

.alert-summary-badge.critical {
    background: #fee2e2;
    color: #dc2626;
}

.alert-summary-badge.warning {
    background: #fef3c7;
    color: #ca8a04;
}

.alert-summary-badge .material-symbols-outlined {
    font-size: 20px;
}

.alerts-group {
    /* Removed border and border-radius for cleaner appearance */
    overflow: hidden;
}

.alerts-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 14px;
    border-radius: 8px;
}

.alerts-group-header.critical {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}

.alerts-group-header.warning {
    background: #fefce8;
    border-left: 4px solid #ca8a04;
}

.alerts-group-header:hover {
    opacity: 0.9;
}

.alerts-group-header .material-symbols-outlined {
    font-size: 20px;
}

.alerts-group-header.critical .material-symbols-outlined {
    color: #dc2626;
}

.alerts-group-header.warning .material-symbols-outlined {
    color: #ca8a04;
}

.alerts-group-header .toggle-icon {
    transition: transform 0.2s ease;
    color: #6b7280;
}

.alerts-group-content {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height 0.3s ease;
    /* Hide scrollbar completely to prevent flickering */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.alerts-group-content::-webkit-scrollbar {
    display: none;
}

.alerts-group-content.collapsed {
    max-height: 0;
    overflow: hidden;
}

/* Fix alerts table wrapper to have proper rounded corners and border */
.alerts-group-content .dimension-table-wrapper {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 8px;
    /* Ensure scrollbar behavior doesn't cause flickering during animation */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.alerts-group-content .dimension-table-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.alerts-table {
    font-size: 13px;
}

.alerts-table thead th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}

/* Add rounded corners to the header cells to match wrapper */
.alerts-table thead th:first-child {
    border-top-left-radius: 7px;
}

.alerts-table thead th:last-child {
    border-top-right-radius: 7px;
}

.alerts-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

.alerts-table tbody tr:last-child {
    border-bottom: none;
}

/* Ensure last row bottom cells have rounded corners */
.alerts-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

.alerts-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

.alerts-table tbody tr:hover {
    background: #f9fafb;
}

/* Override sorted column colors for critical alerts table - matches badge styling */
.alerts-group-content.critical .alerts-table th.sorted-asc,
.alerts-group-content.critical .alerts-table th.sorted-desc {
    background: #fee2e2;
    color: #dc2626;
}

.alerts-group-content.critical .alerts-table th.sortable:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Keep sorted column color on hover - critical */
.alerts-group-content.critical .alerts-table th.sorted-asc:hover,
.alerts-group-content.critical .alerts-table th.sorted-desc:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Override sorted column colors for warning alerts table - matches badge styling */
.alerts-group-content.warning .alerts-table th.sorted-asc,
.alerts-group-content.warning .alerts-table th.sorted-desc {
    background: #fef3c7;
    color: #ca8a04;
}

.alerts-group-content.warning .alerts-table th.sortable:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Keep sorted column color on hover - warning */
.alerts-group-content.warning .alerts-table th.sorted-asc:hover,
.alerts-group-content.warning .alerts-table th.sorted-desc:hover {
    background: #fef3c7;
    color: #ca8a04;
}

/* Website Health table - Green sorted columns */
.health-table th.sorted-asc,
.health-table th.sorted-desc {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.health-table th.sortable:hover {
    background: #e5e7eb;
    color: #374151;
}

.health-table th.sorted-asc:hover,
.health-table th.sorted-desc:hover {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

/* Pages Indexed table - Blue sorted columns */
.indexing-table th.sorted-asc,
.indexing-table th.sorted-desc {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.indexing-table th.sortable:hover {
    background: #e5e7eb;
    color: #374151;
}

.indexing-table th.sorted-asc:hover,
.indexing-table th.sorted-desc:hover {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.days-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #f3f4f6;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    color: #374151;
}

.impressions-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #fef3c7;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    color: #92400e;
}

.severity-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-badge.high {
    background: #fee2e2;
    color: #dc2626;
}

.severity-badge.medium {
    background: #fed7aa;
    color: #c2410c;
}

/* Responsive adjustments for insights */
@media (max-width: 768px) {
    .insights-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .time-categories-grid {
        grid-template-columns: 1fr;
    }
    
    .insight-value {
        font-size: 24px;
    }
    
    .alert-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Mobile responsive styles for alert tables */
    .alerts-group-content .dimension-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .alerts-table {
        font-size: 0.75em;
        min-width: 700px; /* Force horizontal scroll on mobile */
        table-layout: auto; /* Allow flexible column widths */
    }
    
    .alerts-table thead th {
        padding: 10px 6px;
        font-size: 0.8em;
        white-space: nowrap; /* Prevent header text wrapping */
    }
    
    .alerts-table tbody td {
        padding: 10px 6px;
        font-size: 0.85em;
    }
    
    /* Adjust specific columns for better mobile display */
    .alerts-table tbody td:first-child {
        /* Domain column - keep reasonable width */
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .alerts-table tbody td:nth-child(2) {
        /* Issue column - allow some wrapping but control width */
        max-width: 200px;
        font-size: 0.75em;
        line-height: 1.4;
    }
    
    .days-badge {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .severity-badge {
        padding: 3px 8px;
        font-size: 9px;
    }
}

/* ============================================================================
   PAGE SECTION LAYOUT (Deployment Dashboard Pages)
   ============================================================================ */

.page-section {
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
}

.page-header {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background: transparent;
    border-bottom: none;
}

.page-header h2 {
    font-size: 1.4em;
    color: #374151;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.page-header h2 .material-symbols-outlined {
    font-size: 1.2em;
    color: #3b82f6;
}

.page-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Loading state for pages */
.page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
    flex: 1;
    min-height: 400px;
}

.page-loading .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 20px;
}

.page-loading p {
    font-size: 1em;
    margin: 0;
    color: #6b7280;
}

/* ============================================================================
   LAZY LOADING SECTIONS
   ============================================================================ */

.lazy-section {
    /* No additional styling - uses existing section styles */
}

.lazy-section-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
    background: #f9fafb;
    border-radius: 12px;
}

.lazy-section-placeholder .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 12px;
    color: #d1d5db;
}

.lazy-section-placeholder p {
    font-size: 1em;
    margin: 0;
    color: #9ca3af;
}

.lazy-section-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
}

.lazy-section-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

.lazy-section-loading p {
    font-size: 0.95em;
    margin: 0;
    color: #6b7280;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .page-section {
        min-height: auto;
        border-radius: 8px;
    }
    
    .page-header {
        padding: 14px 18px;
    }
    
    .page-header h2 {
        font-size: 1.2em;
    }
    
    .page-body {
        padding: 18px;
    }
    
    .lazy-section-placeholder,
    .lazy-section-loading {
        padding: 40px 16px;
    }
}

/* ============================================================================
   COLLAPSIBLE SUBSECTIONS (Legacy - can be removed later)
   ============================================================================ */

.collapsible-section {
    background: white;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.collapsible-section:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.collapsible-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.collapsible-header h3 {
    font-size: 1.3em;
    color: #374151;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.collapsible-header h3 .material-symbols-outlined {
    font-size: 1.2em;
    color: #3b82f6;
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease;
    opacity: 0;
}

.collapsible-section.expanded .collapsible-content {
    max-height: none;
    opacity: 1;
    overflow: visible;
}

/* Full-page section when only one is visible */
.collapsible-section.expanded:only-child,
.collapsible-section.expanded[style*="display"]:not([style*="none"]) {
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
}

.collapsible-section.expanded:only-child .collapsible-content,
.collapsible-section.expanded[style*="display"]:not([style*="none"]) .collapsible-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.collapsible-section.expanded:only-child .collapsible-content-inner,
.collapsible-section.expanded[style*="display"]:not([style*="none"]) .collapsible-content-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.collapsible-content-inner {
    padding: 25px;
    padding-top: 20px;
}

/* Loading state inside collapsible - full height */
.collapsible-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
    flex: 1;
    min-height: calc(100vh - 250px);
}

.collapsible-loading .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 20px;
}

.collapsible-loading p {
    font-size: 0.95em;
    margin: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .collapsible-header {
        padding: 15px 18px;
    }
    
    .collapsible-header h3 {
        font-size: 1.1em;
    }
    
    .collapsible-content-inner {
        padding: 18px;
    }
    
    .maintenance-table-container {
        overflow-x: auto;
    }
    
    .maintenance-table {
        min-width: 800px;
    }
}

/* ============================================================================
   WEEKLY MAINTENANCE TABLE
   ============================================================================ */

.maintenance-table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    max-height: 600px;
    overflow-y: auto;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.maintenance-table-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.maintenance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.maintenance-table thead {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.maintenance-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.maintenance-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.maintenance-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.1);
}

.maintenance-table th .sort-icon {
    display: inline-block;
    margin-left: 6px;
    opacity: 0.5;
    font-size: 12px;
}

.maintenance-table th .sort-icon::after {
    content: '⇅';
}

.maintenance-table th.sort-asc .sort-icon::after {
    content: '↑';
    opacity: 1;
}

.maintenance-table th.sort-desc .sort-icon::after {
    content: '↓';
    opacity: 1;
}

.maintenance-table th.sort-asc .sort-icon,
.maintenance-table th.sort-desc .sort-icon {
    opacity: 1;
}

.maintenance-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s ease;
}

.maintenance-table tbody tr:hover {
    background: #f3f4f6;
}

.maintenance-table td {
    padding: 14px 12px;
    vertical-align: middle;
    font-size: 14px;
    color: #374151;
}

/* Base Domain, Last Comments, Last Article - center aligned */
.maintenance-table th:nth-child(2),
.maintenance-table th:nth-child(3),
.maintenance-table th:nth-child(5),
.maintenance-table td:nth-child(2),
.maintenance-table td:nth-child(3),
.maintenance-table td:nth-child(5) {
    text-align: center;
}

/* Numeric columns - center aligned */
.maintenance-table th:nth-child(4),
.maintenance-table th:nth-child(6),
.maintenance-table td:nth-child(4),
.maintenance-table td:nth-child(6) {
    text-align: center;
}

/* Status column - center aligned */
.maintenance-table th:nth-child(7),
.maintenance-table td:nth-child(7) {
    text-align: center;
}

.maintenance-table .domain-cell {
    font-weight: 600;
    color: #374151;
}

.maintenance-table .domain-cell a {
    color: #374151;
    text-decoration: none;
    transition: color 0.2s ease;
}

.maintenance-table .domain-cell a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

.maintenance-table .base-domain-cell a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.maintenance-table .base-domain-cell a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

.maintenance-table .time-cell {
    color: #6b7280;
    font-size: 13px;
}

.maintenance-table .time-cell .never {
    color: #ef4444;
    font-style: italic;
}

.maintenance-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.maintenance-status-badge.up-to-date {
    background: #d1fae5;
    color: #059669;
}

.maintenance-status-badge.needs-comments {
    background: #fef3c7;
    color: #d97706;
}

.maintenance-status-badge.needs-article {
    background: #fee2e2;
    color: #dc2626;
}

.maintenance-status-badge.needs-both {
    background: #fecaca;
    color: #b91c1c;
}

.loading-cell {
    text-align: center;
    padding: 40px !important;
}

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

/* Recent Activity Section */
.recent-activity-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 16px;
}

.recent-activity-section h3 .material-symbols-outlined {
    font-size: 20px;
    color: #3b82f6;
}

.recent-activity-list {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s ease;
}

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

.activity-item:hover {
    background: #f9fafb;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.comment {
    background: #dbeafe;
    color: #3b82f6;
}

.activity-icon.article {
    background: #d1fae5;
    color: #059669;
}

.activity-info {
    flex: 1;
    min-width: 0;
}

.activity-domain {
    font-weight: 600;
    color: #374151;
    margin-bottom: 2px;
}

.activity-domain a {
    color: #3b82f6;
    text-decoration: none;
}

.activity-domain a:hover {
    text-decoration: underline;
}

.activity-description {
    font-size: 13px;
    color: #6b7280;
}

.activity-time {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

/* ============================================================================
   PERFORMANCE OPTIMIZER
   ============================================================================ */

.optimizer-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0;
}

.optimizer-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
}

.optimizer-tab:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.optimizer-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.optimizer-tab .material-symbols-outlined {
    font-size: 18px;
}

.optimizer-tab-content {
    display: none;
}

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

.optimizer-table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    max-height: 600px;
    overflow-y: auto;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.optimizer-table-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.optimizer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.optimizer-table thead {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.optimizer-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.optimizer-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.optimizer-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.1);
}

.optimizer-table th .sort-icon {
    display: inline-block;
    margin-left: 6px;
    opacity: 0.5;
    font-size: 12px;
}

.optimizer-table th .sort-icon::after {
    content: '⇅';
}

.optimizer-table th.sort-asc .sort-icon::after {
    content: '↑';
    opacity: 1;
}

.optimizer-table th.sort-desc .sort-icon::after {
    content: '↓';
    opacity: 1;
}

.optimizer-table th.sort-asc .sort-icon,
.optimizer-table th.sort-desc .sort-icon {
    opacity: 1;
}

/* Column alignment - Issue Type, Impressions, Clicks, Files, Status, Date columns centered */
.optimizer-table th:nth-child(2),
.optimizer-table th:nth-child(3),
.optimizer-table th:nth-child(4),
.optimizer-table th:nth-child(5),
.optimizer-table th:nth-child(6),
.optimizer-table th:nth-child(7),
.optimizer-table td:nth-child(2),
.optimizer-table td:nth-child(3),
.optimizer-table td:nth-child(4),
.optimizer-table td:nth-child(5),
.optimizer-table td:nth-child(6),
.optimizer-table td:nth-child(7) {
    text-align: center;
}

.optimizer-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    font-size: 14px;
    color: #374151;
}

.optimizer-table tbody tr:hover {
    background: #f9fafb;
}

.optimizer-table tbody tr.status-completed {
    background: transparent;
}

.optimizer-table tbody tr.status-completed:hover {
    background: #f9fafb;
}

.optimizer-table tbody tr.status-failed {
    background: #fef2f2;
}

.optimizer-table tbody tr.status-failed:hover {
    background: #fee2e2;
}

.optimizer-table .domain-cell {
    font-weight: 600;
    color: #374151;
}

.optimizer-table .domain-cell a {
    color: #374151;
    text-decoration: none;
    transition: color 0.2s ease;
}

.optimizer-table .domain-cell a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

.optimizer-table .number-cell {
    text-align: center;
    font-weight: 500;
}

.optimizer-table .date-cell {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.issue-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.issue-badge.issue-zero_impressions {
    background: #fef3c7;
    color: #92400e;
}

.issue-badge.issue-zero_clicks {
    background: #fee2e2;
    color: #991b1b;
}

.issue-badge.issue-zero_clicks_critical {
    background: #7f1d1d;
    color: white;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-completed {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.pending-info-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.pending-info-inline .material-symbols-outlined {
    color: #6366f1;
    font-size: 20px;
    flex-shrink: 0;
}

.pending-info-inline p {
    margin: 0;
    color: #374151;
    font-size: 14px;
    line-height: 1.4;
}

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

.pending-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    flex: 1;
}

.pending-info .material-symbols-outlined {
    color: #3b82f6;
    font-size: 24px;
}

.pending-info p {
    margin: 0;
    color: #1e40af;
    font-size: 14px;
}

.pending-header .filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.optimizer-table .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    vertical-align: middle;
}

.optimizer-table .empty-state .empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.optimizer-table .empty-state .material-symbols-outlined {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 12px;
}

.optimizer-table .empty-state p {
    margin: 0;
    font-size: 14px;
}

#page-performance-optimizer .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
}

#page-performance-optimizer .pagination button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

#page-performance-optimizer .pagination button:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #d1d5db;
}

#page-performance-optimizer .pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#page-performance-optimizer .page-info {
    font-size: 14px;
    color: #6b7280;
}

#page-performance-optimizer .recent-activity-list {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#page-performance-optimizer .recent-activity-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s ease;
}

#page-performance-optimizer .recent-activity-item:last-child {
    border-bottom: none;
}

#page-performance-optimizer .recent-activity-item:hover {
    background: #f9fafb;
}

#page-performance-optimizer .recent-activity-item.success .activity-icon {
    background: #d1fae5;
    color: #059669;
}

#page-performance-optimizer .recent-activity-item.error .activity-icon {
    background: #fee2e2;
    color: #ef4444;
}

#page-performance-optimizer .activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#page-performance-optimizer .activity-content {
    flex: 1;
}

#page-performance-optimizer .activity-domain {
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
}

#page-performance-optimizer .activity-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

#page-performance-optimizer .activity-impressions {
    color: #6b7280;
}

#page-performance-optimizer .activity-time {
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
}

#page-performance-optimizer .header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

#page-performance-optimizer .last-updated {
    font-size: 13px;
    color: #9ca3af;
}

#page-performance-optimizer .btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

#page-performance-optimizer .btn-secondary {
    background: white;
    border: 1px solid #e5e7eb;
    color: #374151;
}

#page-performance-optimizer .btn-secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

#page-performance-optimizer .no-data {
    text-align: center;
    padding: 24px;
    color: #6b7280;
    font-size: 14px;
}

/* ============================================================================
   BACKLINK BUILDER STYLES
   ============================================================================ */

#page-backlink-builder .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

#page-backlink-builder .refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

#page-backlink-builder .refresh-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Backlink Tabs */
.backlink-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0;
}

.backlink-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
}

.backlink-tab:hover {
    color: #3b82f6;
}

.backlink-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.backlink-tab .material-symbols-outlined {
    font-size: 18px;
}

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

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

/* Platform Stats Grid */
.platform-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.platform-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s;
}

.platform-stat-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.platform-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}

.platform-icon .material-symbols-outlined {
    font-size: 24px;
}

.platform-info {
    flex: 1;
}

.platform-name {
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.platform-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
}

.count-item {
    color: #6b7280;
}

.count-item .count-value {
    font-weight: 600;
    color: #374151;
}

.count-item.success .count-value {
    color: #059669;
}

.count-item.today .count-value {
    color: #3b82f6;
}

.platform-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.platform-status.active {
    background: #d1fae5;
    color: #059669;
}

.platform-status.inactive {
    background: #fee2e2;
    color: #ef4444;
}

/* Backlink Table */
.backlink-table-container {
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-top: 16px;
}

.backlink-table {
    width: 100%;
    border-collapse: collapse;
}

.backlink-table th {
    text-align: left;
    padding: 12px 16px;
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    border-bottom: 1px solid #e5e7eb;
}

.backlink-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #374151;
}

.backlink-table tbody tr:last-child td {
    border-bottom: none;
}

.backlink-table tbody tr:hover {
    background: #f9fafb;
}

.backlink-table .domain-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.backlink-table .domain-link:hover {
    text-decoration: underline;
}

.backlink-table .backlink-url {
    color: #3b82f6;
    text-decoration: none;
    font-size: 13px;
}

.backlink-table .backlink-url:hover {
    text-decoration: underline;
}

/* Platform Badges */
.platform-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.platform-badge.platform-reddit {
    background: #fff2e8;
    color: #ff4500;
}

.platform-badge.platform-quora {
    background: #fef3f3;
    color: #b92b27;
}

.platform-badge.platform-medium {
    background: #f5f5f5;
    color: #000;
}

.platform-badge.platform-twitter {
    background: #e8f5fd;
    color: #1da1f2;
}

.platform-badge.platform-linkedin {
    background: #e8f4fc;
    color: #0077b5;
}

.platform-badge.platform-telegram {
    background: #e8f4f9;
    color: #0088cc;
}

.platform-badge.platform-discord {
    background: #eef0fe;
    color: #5865f2;
}

.platform-badge.platform-tumblr {
    background: #f0f4f8;
    color: #35465c;
}

.platform-badge.platform-forums {
    background: #f0f9ff;
    color: #0369a1;
}

/* Status Badges */
.backlink-table .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.backlink-table .status-badge.status-verified,
.backlink-table .status-badge.status-active {
    background: #d1fae5;
    color: #059669;
}

.backlink-table .status-badge.status-pending {
    background: #fef3c7;
    color: #d97706;
}

.backlink-table .status-badge.status-failed,
.backlink-table .status-badge.status-removed,
.backlink-table .status-badge.status-inactive {
    background: #fee2e2;
    color: #ef4444;
}

/* Accounts Table */
.accounts-table-container {
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.accounts-table {
    width: 100%;
    border-collapse: collapse;
}

.accounts-table th {
    text-align: left;
    padding: 12px 16px;
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    border-bottom: 1px solid #e5e7eb;
}

.accounts-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #374151;
}

.accounts-table tbody tr:last-child td {
    border-bottom: none;
}

.accounts-table tbody tr:hover {
    background: #f9fafb;
}

/* Empty State */
#page-backlink-builder .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}

#page-backlink-builder .empty-state .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 16px;
    color: #d1d5db;
}

#page-backlink-builder .empty-state p {
    font-size: 14px;
}

/* Last Update Footer */
#page-backlink-builder .last-update-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 768px) {
    .backlink-tabs {
        flex-wrap: wrap;
    }
    
    .backlink-tab {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .platform-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .backlink-table-container,
    .accounts-table-container {
        overflow-x: auto;
    }
    
    .backlink-table,
    .accounts-table {
        min-width: 600px;
    }
}

/* Language toggle */
.lang-toggle {
    display: flex;
    margin-right: 8px;
    position: relative; /* anchors the language dropdown menu */
}
/* Globe language switcher (N languages — replaces the two-button toggle).
   Styled to match the sidebar nav items: same #5f6368 text, pill hover /
   selected shapes, item spacing, and a hidden scrollbar like the sidebar. */
.lang-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    border-radius: 25px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #5f6368;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-dropdown-trigger:hover { background: #f1f3f4; color: #202124; }
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1300;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    /* App-standard thin scrollbar: no track/trace, rounded thumb only.
       Firefox draws the thumb inside the content box (not over the border). */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Extra right padding reserves a gutter so the webkit scrollbar sits
       INSIDE the rounded list instead of on the border/corner. */
    padding: 8px 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;                         /* vertical spacing between the options */
}
.lang-dropdown-menu::-webkit-scrollbar { width: 6px; }
.lang-dropdown-menu::-webkit-scrollbar-track { background: transparent; }        /* no trace */
.lang-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
.lang-dropdown-menu::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }
.lang-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    border-radius: 25px;              /* pill, like .nav-item */
    padding: 10px 16px;               /* like .nav-item */
    font-size: 13px;
    color: #5f6368;                   /* like .nav-item */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-dropdown-item:hover { background: #f1f3f4; color: #202124; }
.lang-dropdown-item.active { background: #e8f0fe; color: #3b82f6; font-weight: 500; }
/* (legacy two-button .lang-btn styles removed — the globe dropdown's
   .lang-dropdown-item owns the switcher look now) */

/* ================================================================
   AI CHAT PAGE SECTION
   ================================================================ */
.ai-chat-page {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

/* Session sidebar */
.ai-chat-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    border-right: 1px solid #e0e0e0;
    transition: width 0.2s ease, opacity 0.2s ease;
    position: relative;
}
.ai-chat-sidebar.collapsed {
    width: 0;
    border-right: none;
}
.ai-chat-sidebar.collapsed .ai-chat-sidebar-header,
.ai-chat-sidebar.collapsed .ai-chat-sidebar-list {
    opacity: 0;
    pointer-events: none;
    width: 0;
    min-width: 0;
}
/* Collapse toggle — a round icon button INSIDE the sidebar header row,
   beside the New-chat pill (strategy-factory session-bar pattern; replaces
   the old chevron floating in the seam at right:-24px). When the sidebar
   collapses (width 0, header fades) this disappears with it; the sibling
   .ai-chat-sidebar-expand below takes over as the re-open affordance. */
.ai-chat-sidebar-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.ai-chat-sidebar-toggle:hover { background: #e8eaed; }
.ai-chat-sidebar-toggle:hover .material-symbols-outlined { color: #1a73e8; }
.ai-chat-sidebar-toggle .material-symbols-outlined { font-size: 20px; color: #9aa0a6; }
/* Expand affordance — a matching round button sitting at the top-left of the
   content column, visible ONLY while the sidebar is collapsed (adjacent-
   sibling rule). Desktop-only; the ≤768px drawer mode hides it (edge
   handles own that affordance there). */
.ai-chat-sidebar-expand {
    display: none;
    flex-shrink: 0;
    align-self: flex-start;
    margin: 14px 4px 0 6px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.ai-chat-sidebar.collapsed + .ai-chat-sidebar-expand { display: inline-flex; }
.ai-chat-sidebar-expand:hover { background: #e8eaed; }
.ai-chat-sidebar-expand:hover .material-symbols-outlined { color: #1a73e8; }
.ai-chat-sidebar-expand .material-symbols-outlined { font-size: 20px; color: #9aa0a6; }

/* ── Preview panel (Website Generator, right edge) ────────────────
   Mirror of .ai-chat-sidebar on the opposite edge. Hosts the
   generated-site preview iframe + action buttons for the latest
   completed run. Hidden via display:none (by JS) until a run in
   the current chat completes. Collapse via .collapsed class is
   independent of the outer display:none — JS sets display first,
   then toggles collapse per localStorage.                         */
.ai-chat-preview-panel {
    width: 480px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    /* No background — panel blends with the page surface. Version
       cards inside also have transparent backgrounds; they earn
       their card-ness purely from a soft drop shadow. The 1px left
       divider still separates chat from preview visually. */
    background: transparent;
    border-left: 1px solid #e5e7eb;
    transition: width 0.2s ease;
    overflow: visible;
}
.ai-chat-preview-panel.collapsed {
    width: 0;
    border-left: none;
}
.ai-chat-preview-panel.collapsed .ai-chat-preview-body {
    opacity: 0;
    pointer-events: none;
}
.ai-chat-preview-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity 0.15s ease;
    /* Hover-only thin scrollbar — same convention as
       .uf-custom-modal-body / .ws-modal-body. Track stays
       transparent at rest; thumb fades in on container hover. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ai-chat-preview-body:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.ai-chat-preview-body::-webkit-scrollbar { width: 6px; }
.ai-chat-preview-body::-webkit-scrollbar-track { background: transparent; }
.ai-chat-preview-body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 6px;
}
.ai-chat-preview-body:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}
/* CRITICAL — disable flex-shrink on the cards so they don't get
   squeezed to fit the column. Default flex-shrink:1 makes each
   card shrink proportionally as siblings are added; total content
   height never exceeds the body's clientHeight, so overflow-y:auto
   never engages and the user can't scroll. flex-shrink:0 keeps
   each card at its natural height; multiple cards stack and the
   body's scrollbar appears as expected. */
.ai-chat-preview-body > * {
    flex-shrink: 0;
}
/* Mirror of .ai-chat-sidebar-toggle on the opposite edge. Kept
   minimal (flat floating icon, no tab chrome) for symmetry with
   the left sidebar's toggle. */
.ai-chat-preview-toggle {
    /* Round icon button INSIDE the panel's top-left corner (adjacent to the
       chat column) — mirror of the session sidebar's in-header toggle. The
       old seam-float (left:-24px) hung between the columns and was easy to
       miss. When the panel collapses, the sibling .ai-chat-preview-expand
       below takes over as the re-open affordance. */
    position: absolute;
    /* Centered with breathing room in the 31px gutter between the panel's
       left border and the version card's left edge (border x=1120, card
       x=1151). A 28px button touches the card no matter how it's placed, so
       this toggle is 24px: left 3px -> spans x=1124-1148, 3px clear of the
       card and 4px off the border. */
    left: 3px;
    top: 10px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0;
    transition: background 0.15s;
}
.ai-chat-preview-panel.collapsed .ai-chat-preview-toggle { display: none; }
.ai-chat-preview-toggle:hover { background: #e8eaed; }
.ai-chat-preview-toggle:hover .material-symbols-outlined { color: #1a73e8; }
.ai-chat-preview-toggle .material-symbols-outlined { font-size: 18px; color: #9aa0a6; }
/* Expand affordance — appears at the chat column's top-RIGHT edge only while
   the panel is collapsed AND a preview exists (has-preview gates the case
   where the panel is display:none but still carries .collapsed from a prior
   session). Mirror of .ai-chat-sidebar-expand. */
.ai-chat-preview-expand {
    display: none;
    flex-shrink: 0;
    align-self: flex-start;
    margin: 14px 6px 0 4px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
#page-website-factory.has-preview .ai-chat-preview-panel.collapsed + .ai-chat-preview-expand { display: inline-flex; }
.ai-chat-preview-expand:hover { background: #e8eaed; }
.ai-chat-preview-expand:hover .material-symbols-outlined { color: #1a73e8; }
.ai-chat-preview-expand .material-symbols-outlined { font-size: 20px; color: #9aa0a6; }

/* ── Website Generator "+" popover menu ─────────────────────────────
   ChatGPT-style popover anchored above the + button in the input bar.
   Position (top/left) is computed in JS when the menu opens; z-index
   + shadow + rounded chrome live here. Each item is a full-width
   flex button with icon + label. */
.ai-chat-plus-menu {
    position: fixed;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 6000;
    font-size: 13px;
    color: #374151;
}
.ai-chat-plus-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #374151;
    font-size: 13px;
    text-align: left;
}
.ai-chat-plus-item:hover { background: #f3f4f6; }
.ai-chat-plus-item .material-symbols-outlined {
    font-size: 20px;
    color: #6b7280;
    flex-shrink: 0;
}

/* Scope badges — displayed inline on skill list rows, knowledge file
   rows, and the AI image settings modal header to indicate whether
   an item applies to all chats (green) or only the current chat
   (blue). See plan serene-coalescing §F. */
.ws-scope-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
}
.ws-scope-badge.all        { background: #dcfce7; color: #166534; }
.ws-scope-badge.chat       { background: #eff6ff; color: #1d4ed8; }
/* Chat-scoped files pinned to a DIFFERENT chat than the user is
   currently viewing — muted so "this chat" / "all" stand out. */
.ws-scope-badge.chat-other { background: #f3f4f6; color: #6b7280; }

/* Image library — each row shows a small rounded thumbnail. Clicking
   either the thumbnail or the filename opens the full-size lightbox
   (see .ws-image-lightbox below). */
.ws-image-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    flex-shrink: 0;
}
.ws-image-thumb:hover { border-color: #1a73e8; }

/* Fullscreen lightbox preview, above the modal stack. Backdrop click
   or the × button (top-right) closes it. Image itself caps at 90%
   of the viewport so it doesn't overflow on tall shots. */
.ws-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    padding: 32px;
}
.ws-image-lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}
.ws-image-lightbox-caption {
    margin-top: 16px;
    color: #f3f4f6;
    font-size: 13px;
    max-width: 90vw;
    text-align: center;
    word-break: break-all;
}
.ws-image-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ws-image-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
.ws-image-lightbox-close .material-symbols-outlined { font-size: 22px; }

/* Phase 15.12: video preview lightbox — same dark backdrop as image
   lightbox, but with a <video controls> player instead of an <img>. */
.ws-image-lightbox video {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: #000;
    cursor: default;
    outline: none;
}

/* Stacked per-version cards inside .ai-chat-preview-body. Each card
   holds its own header pill + buttons + optional iframe slot. Iframe
   node is preserved across re-renders via capture/restore (see
   website-factory.js::_captureLiveIframes). Latest version gets a
   green border; others neutral grey. */
.ws-version-card {
    border: none;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ws-version-card.is-latest {
    box-shadow: inset 0 0 0 1px #16a34a;
}
.ws-version-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}
.ws-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    /* border-radius + font-size + line-height all match .ws-verify-badge so the
       version number, app-type, and Verified badges are one unified shape —
       same 4px rounded-rect and same row height. */
    border-radius: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: .02em;
}
.ws-version-badge.latest {
    background: #dcfce7;
    color: #166534;
}
.ws-version-badge.inflight {
    background: #fef3c7;
    color: #92400e;
    gap: 4px;
}
.ws-version-badge.inflight.cancelling {
    background: #fee2e2;
    color: #991b1b;
}
.ws-version-badge.error {
    background: #fee2e2;
    color: #991b1b;
}
.ws-version-badge.cancelled {
    background: #f3f4f6;
    color: #374151;
}
.ws-version-badge.autofix {
    background: #ede9fe;
    color: #5b21b6;
}
.ws-version-badge.autofix .material-symbols-outlined {
    color: #7c3aed;
}
/* Type chips (Static Site / Dynamic Site / Installable App / Android App /
   Desktop App / Browser Extension) share ONE neutral style — they're type
   metadata, not status; the per-type icon does the differentiating. Status
   badges (.latest / .error / .cancelled / .autofix) keep their own colors. */
.ws-version-badge.pwa,
.ws-version-badge.dyn,
.ws-version-badge.expo,
.ws-version-badge.static {
    background: #f1f5f9;
    color: #475569;
    border: 0;
}
.ws-version-badge.pwa .material-symbols-outlined,
.ws-version-badge.dyn .material-symbols-outlined,
.ws-version-badge.expo .material-symbols-outlined,
.ws-version-badge.static .material-symbols-outlined {
    color: #64748b;
}
/* "Scan to install" QR modal — scan the signed .apk download onto a device. */
/* Showcase-card "Install app" modal — mirrors the AI Builder install sheet
   (.ws-qr-*): download button(s) per native artifact variant + a scannable QR
   for mobile (.apk). Self-contained so a showcase card can install without
   navigating to the detail page. */
.scd-install-overlay {
    position: fixed; inset: 0; z-index: 6000;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.scd-install-modal {
    position: relative;
    background: #fff; border-radius: 16px;
    padding: 22px 22px 18px;
    width: min(380px, 92vw);
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    text-align: center;
}
.scd-install-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.scd-install-title { margin: 0; font-size: 16px; font-weight: 600; color: #111827; text-align: left; }
.scd-install-btns { display: flex; flex-direction: column; gap: 8px; }
.scd-install-dl {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    padding: 12px 16px;
    background: #1a73e8; color: #fff;
    border: none; border-radius: 9999px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    cursor: pointer;
}
.scd-install-dl:hover { filter: brightness(0.95); }
.scd-install-dl .material-symbols-outlined { font-size: 20px; }
.scd-install-empty { color: #6b7280; font-size: 13px; margin: 8px 0 4px; }
.scd-install-or {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0 12px; color: #9ca3af; font-size: 12px;
}
.scd-install-or::before, .scd-install-or::after {
    content: ""; flex: 1; height: 1px; background: #e5e7eb;
}
.scd-install-qr {
    display: inline-block; margin: 0 auto 14px; padding: 8px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    min-width: 120px; min-height: 120px;
}
.scd-install-qr svg { display: block; width: 216px; height: 216px; }
.scd-install-qr-loading { display: inline-block; padding: 40px 12px; color: #9ca3af; font-size: 12px; }
.scd-install-steps {
    text-align: left; margin: 4px 0 12px; padding-left: 20px;
    color: #374151; font-size: 13px; line-height: 1.6;
}
.scd-install-hint {
    display: flex; gap: 8px; align-items: flex-start;
    background: #f9fafb; border: 1px solid #eef0f2; border-radius: 10px;
    padding: 10px 12px; text-align: left; color: #6b7280; font-size: 12px; line-height: 1.5;
}
.scd-install-hint .material-symbols-outlined { font-size: 18px; color: #9ca3af; flex-shrink: 0; }

.ws-qr-overlay {
    position: fixed; inset: 0; z-index: 6000;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ws-qr-modal {
    position: relative;
    background: #fff; border-radius: 16px;
    padding: 22px 22px 18px;
    width: min(360px, 92vw);
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    text-align: center;
}
.ws-qr-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.ws-qr-title { margin: 0; font-size: 16px; font-weight: 600; color: #111827; text-align: left; }
.ws-qr-download {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    padding: 12px 16px; margin: 0 0 6px;
    background: #1a73e8; color: #fff;
    border: none; border-radius: 9999px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    cursor: pointer;
}
.ws-qr-download:hover { filter: brightness(0.95); }
.ws-qr-download .material-symbols-outlined { font-size: 20px; }
.ws-qr-download-sub { font-size: 12px; color: #6b7280; text-align: center; margin: 0 0 14px; }
.ws-qr-or {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0 12px; color: #9ca3af; font-size: 12px;
}
.ws-qr-or::before, .ws-qr-or::after {
    content: ""; flex: 1; height: 1px; background: #e5e7eb;
}
.ws-qr-code {
    display: inline-block; margin: 0 auto 14px; padding: 8px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
}
/* "Preparing your installer…" state shown in the install modal while the
   artifact build runs (see _openInstallPreparingModal). */
.ws-install-preparing {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 30px 22px 14px; gap: 12px;
}
.ws-install-preparing-spin {
    font-size: 42px; color: #1a73e8; animation: spin 1s linear infinite;
}
.ws-install-preparing-title { font-size: 15px; font-weight: 600; color: #111827; }
.ws-install-preparing-body {
    font-size: 13px; color: #6b7280; line-height: 1.55; max-width: 320px;
}
.ws-qr-code svg { display: block; width: 232px; height: 232px; }
.ws-qr-steps {
    text-align: left; margin: 0 0 10px; padding-left: 20px;
    font-size: 13px; line-height: 1.6; color: #374151;
}
.ws-qr-steps li { margin: 2px 0; }
.ws-qr-hint {
    display: flex; gap: 8px; align-items: flex-start;
    text-align: left; margin: 0 0 10px;
    padding: 10px 12px; border-radius: 10px;
    background: #fef9c3; border: 1px solid #fde68a;
    font-size: 12.5px; line-height: 1.5; color: #854d0e;
}
.ws-qr-hint .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; color: #ca8a04; }
.ws-qr-note { font-size: 12px; color: #9ca3af; }
/* Guided desktop install sheet — per-OS sections (reuses .ws-qr-overlay/modal). */
/* Fixed head + scrollable body (modal chrome standard): the whole modal used
   to scroll, so the "Install on your computer" title slid out of view. */
.ws-install-modal {
    width: min(420px, 94vw); max-height: 88vh; text-align: left;
    display: flex; flex-direction: column; overflow: hidden;
    /* 12px = the gap between the OS sections, so the head divider and the modal
       edge sit the same distance from the content as the sections do from each
       other. */
    padding-bottom: 12px;
}
.ws-install-modal .ws-qr-head {
    flex-shrink: 0; margin-bottom: 0; padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}
/* Inset top only: the modal keeps its own 18px bottom padding, so the scroll
   viewport stops short of the modal edge rather than clipping a card flush
   against it. */
.ws-install-body {
    flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0 0;
    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.ws-install-body::-webkit-scrollbar { width: 7px; }
.ws-install-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
.ws-install-body::-webkit-scrollbar-track { background: transparent; }
.ws-install-os {
    border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 12px 14px; margin: 0 0 12px;
}
.ws-install-os.is-detected { border-color: #1a73e8; background: #f5f9ff; }
.ws-install-os-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: #111827; margin: 0 0 8px;
}
.ws-install-detected {
    font-size: 11px; font-weight: 600; color: #1a73e8;
    background: #e8f0fe; border-radius: 9999px; padding: 2px 8px;
}
.ws-install-os .ws-qr-download { margin: 0 0 8px; }
.ws-install-os .ws-qr-steps { margin: 0; }
/* Phase B — pulse highlight when activity-feed chip routes focus to a
   version card. 1.5s glow then fades back to the resting border.
   Specificity stacked (.ws-version-tpl.ws-version-tpl-focus) so the
   later-defined .ws-version-tpl resting box-shadow doesn't win. */
.ws-version-tpl.ws-version-tpl-focus,
.ws-version-tpl-focus {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35),
                0 4px 12px rgba(124, 58, 237, 0.20);
    transition: box-shadow 200ms ease;
}
/* Phase B — auto-fix start/done chip inside the activity feed. */
.ws-feed-self-correction {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    background: #ede9fe;
    color: #5b21b6;
}
.ws-feed-self-correction[role="button"] { cursor: pointer; }
.ws-feed-self-correction[role="button"]:hover {
    background: #ddd6fe;
}
.ws-feed-self-correction .material-symbols-outlined { font-size: 14px; }
.ws-feed-self-correction.done.ok {
    background: #dcfce7;
    color: #166534;
}
.ws-feed-self-correction.done.warning {
    background: #fef3c7;
    color: #92400e;
}
.ws-feed-self-correction.done.fail {
    background: #fef2f2;
    color: #991b1b;
}
.ws-feed-self-correction.done.error {
    background: #f3f4f6;
    color: #4b5563;
}
.ws-version-title {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-iframe-slot {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    height: 380px;
    background: #fff;
    flex-shrink: 0;
}
.ws-iframe-slot iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/* Open preview fills the visible panel area — the card stretches to
   at least the full body height, and its iframe slot flexes to
   consume whatever vertical space is left after the header + buttons.
   Multiple open cards each claim ~100% (flex-shrink:0), so scrolling
   between them gives side-by-side comparison at full viewport. */
.ws-version-card.has-preview {
    min-height: 100%;
    flex-shrink: 0;
}
.ws-version-card.has-preview > .ws-iframe-slot {
    flex: 1;
    min-height: 0;
    height: auto;
}

/* ── Phase 7 — version card kebab + tab bar + viewport ────── */
.ws-version-card-head .ws-version-kebab {
    margin-left: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: background 120ms ease;
}
.ws-version-card-head .ws-version-kebab:hover {
    background: #f3f4f6;
    color: #374151;
}
.ws-version-card-head .ws-version-kebab .material-symbols-outlined {
    font-size: 18px;
}

.ws-version-tab-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
}
.ws-version-tabs {
    display: flex;
    gap: 4px;
}
.ws-version-tab {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
    border-radius: 0;
}
.ws-version-tab:hover { color: #374151; }
.ws-version-tab.active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
}
.ws-version-viewport-bar {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.ws-vp-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-vp-btn:hover { background: #f9fafb; color: #374151; }
.ws-vp-btn.active {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
}
.ws-vp-btn .material-symbols-outlined { font-size: 16px; }

.ws-iframe-slot.tab-hidden { display: none; }
.ws-iframe-slot.viewport-tablet {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #f3f4f6;
    padding: 12px;
}
.ws-iframe-slot.viewport-tablet > iframe {
    max-width: 768px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-radius: 8px;
    background: #fff;
}
.ws-iframe-slot.viewport-mobile {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #f3f4f6;
    padding: 12px;
}
.ws-iframe-slot.viewport-mobile > iframe {
    max-width: 375px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-radius: 8px;
    background: #fff;
}
.ws-iframe-slot.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
}
.ws-iframe-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 12px;
}

/* Maximize toggle — body class swaps the version card into
   fixed-fullscreen mode. Only one maximized at a time. */
body.ws-maximize-active .ws-version-card {
    /* default cards shrink so nothing under the maximized one
       interferes. */
}

/* ── Phase 7 — activity feed ──────────────────────────────── */
.ws-feed {
    background: #fafafa;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}
.ws-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
/* Polish C — feed search input. Sits between summary span and the
   collapse toggle. Width adapts to available space. */
.ws-feed-search {
    flex: 1;
    min-width: 80px;
    max-width: 200px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #f9fafb;
    color: #374151;
    font-size: 11px;
    font-weight: 400;
    outline: none;
}
.ws-feed-search:focus {
    border-color: #1a73e8;
    background: #fff;
}
.ws-feed-search::placeholder {
    color: #9ca3af;
}
/* Polish C — non-matching feed rows hide under search. */
.ws-feed-row-hidden { display: none !important; }
.ws-feed-toggle {
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 9999px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-feed-toggle:hover { background: #f3f4f6; }
.ws-feed-toggle .material-symbols-outlined { font-size: 16px; }
.ws-feed-cancel {
    background: #fff;
    border: 1px solid #fecaca;
    color: #c13515;
    border-radius: 9999px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.ws-feed-cancel:hover { background: #fee2e2; }
.ws-feed-cancel:disabled {
    opacity: .7;
    cursor: wait;
}

/* SEO Factory task-card delete button — borderless at rest, subtle
   tint on hover. Border 1px transparent reserved so the hover swap
   doesn't shift sibling layout. */
.uf-task-delete:hover {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
}

/* Phase 13 — post-completion follow-up suggestion chips. Renders
   ABOVE the chat input (Lovable / Base44 style). Each chip is a
   one-liner the user can click to drop into the chat input as
   their next message. Anchored to the latest completed run. */
.ws-followup-host {
    flex-shrink: 0;
    padding: 0 16px;
}
.ws-followup-host:empty {
    display: none;
}
.ws-followup-chips {
    margin: 0 0 8px 0;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
}
.ws-followup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    /* Phase 15.26: header is a fat click target for collapse-toggle.
       Standard accordion pattern: cursor: pointer, subtle hover bg
       so users see it's interactive. Inner action buttons (regen +
       chevron) keep their own hover bg via the rule below; their
       onclick handlers call event.stopPropagation() so clicking
       them doesn't also bubble to the header's collapse handler. */
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    margin-left: -6px;
    margin-right: -6px;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.ws-followup-head:hover {
    background: rgba(0, 0, 0, 0.03);
}
.ws-followup-head:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 1px;
}
.ws-followup-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.ws-followup-dismiss,
.ws-followup-toggle,
.ws-followup-regen {
    width: 22px;
    height: 22px;
    border: 0;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease, background 0.12s ease;
}
.ws-followup-dismiss:hover,
.ws-followup-toggle:hover,
.ws-followup-regen:hover:not(:disabled) {
    color: #374151;
    background: rgba(0, 0, 0, 0.05);
}
.ws-followup-regen:disabled {
    cursor: wait;
    color: #1a73e8;
}
/* Right-side action cluster — wraps the regen + collapse buttons
   so the header's space-between layout anchors them tightly to
   the right edge of the strip rather than letting flex distribute
   them with the label. */
.ws-followup-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
/* Hide the regen button when the strip is collapsed — the chip
   rows are gone, regenerating produces an invisible new batch
   the user wouldn't see anyway. Collapsed strip stays tight as
   a one-line label + chevron. */
.ws-followup-chips.is-collapsed .ws-followup-regen {
    display: none;
}
/* While regenerating: chips fade + become non-interactive so the
   user sees they're being replaced and can't accidentally click
   stale items. New batch swaps in when the fetch resolves. */
.ws-followup-chips.is-regenerating .ws-followup-grid {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
/* Collapsed state — hide the chip grid, leave the header bar
   (label + chevron) visible so the user can re-expand. */
.ws-followup-chips.is-collapsed .ws-followup-grid {
    display: none;
}
.ws-followup-chips.is-collapsed .ws-followup-head {
    margin-bottom: 0;
}
.ws-followup-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ws-followup-chip {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.ws-followup-chip:hover {
    border-color: #1a73e8;
    background: #eff6ff;
    color: #1a73e8;
}

/* ── Phase 14: Media sub-tabs + Media search ────────────────────────── */
.ws-media-tab-bar {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: 9999px;
    margin: 0 0 16px 0;
}
.ws-media-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ws-media-tab-btn .material-symbols-outlined { font-size: 16px; }
.ws-media-tab-btn:hover { color: #374151; }
.ws-media-tab-btn.active {
    background: #fff;
    color: #1a73e8;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ws-media-coming-soon {
    padding: 48px 24px;
    text-align: center;
    color: #9ca3af;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px dashed #e5e7eb;
}
.ws-media-coming-soon > .material-symbols-outlined {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 12px;
    display: block;
}
.ws-media-renamed-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 0 12px 0;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e3a8a;
    font-size: 12px;
}
.ws-media-renamed-hint > .material-symbols-outlined { font-size: 16px; }
.ws-media-renamed-hint-dismiss {
    width: 24px; height: 24px;
    border: 0; background: transparent;
    border-radius: 50%;
    color: #1e3a8a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-media-renamed-hint-dismiss:hover { background: rgba(30,58,138,0.08); }
.ws-media-renamed-hint-dismiss .material-symbols-outlined { font-size: 16px; }

.ws-feed-body {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ws-feed-body:hover { scrollbar-color: rgba(0,0,0,0.2) transparent; }
.ws-feed-body::-webkit-scrollbar { width: 6px; }
.ws-feed-body::-webkit-scrollbar-track { background: transparent; }
.ws-feed-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.ws-feed-body:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }

.ws-feed-phase {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
    font-weight: 600;
    color: #374151;
    font-size: 12px;
}
.ws-feed-phase .ws-feed-icon { font-size: 16px; }
.ws-feed-phase.done .ws-feed-icon { color: #008a05; }
.ws-feed-phase.active .ws-feed-icon { color: #1a73e8; animation: spin 1s linear infinite; }
.ws-feed-phase.failed .ws-feed-icon { color: #c13515; }
.ws-feed-phase.pending .ws-feed-icon { color: #d1d5db; }
.ws-feed-phase.pending { color: #9ca3af; font-weight: 500; }
.ws-feed-phase-dur {
    margin-left: auto;
    color: #9ca3af;
    font-weight: 400;
    font-size: 11px;
}
/* Polish 3 — chevron + inline detail panel for phase headers. */
.ws-feed-phase-chevron {
    border: 0;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
}
.ws-feed-phase-chevron:hover { background: rgba(0,0,0,0.05); color: #374151; }
.ws-feed-phase-chevron .material-symbols-outlined { font-size: 18px; }
.ws-feed-phase-detail {
    margin: 4px 0 8px 28px;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ws-feed-phase-detail .ws-feed-detail-key {
    color: #9ca3af;
    text-transform: capitalize;
    margin-right: 8px;
    font-family: -apple-system, sans-serif;
}
.ws-feed-phase-detail .ws-feed-detail-val {
    color: #111827;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.ws-feed-image-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 8px 24px;
}
.ws-feed-image-tile img,
.ws-feed-image-tile video {
    width: 140px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background: #f3f4f6;
    display: block;
}
.ws-feed-image-failed {
    width: 140px;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}
.ws-feed-image-failed .material-symbols-outlined { font-size: 28px; }
.ws-feed-image-meta {
    font-size: 10px;
    color: #6b7280;
    max-width: 140px;
    line-height: 1.4;
}

.ws-feed-file {
    display: block;
    padding-left: 24px;
    color: #374151;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.6;
}
.ws-feed-file-bullet { color: #1a73e8; margin-right: 4px; }
.ws-feed-file-bytes { color: #9ca3af; font-size: 10px; }

.ws-feed-tool {
    display: block;
    padding-left: 24px;
    color: #9ca3af;
    font-style: italic;
    font-size: 11px;
    line-height: 1.6;
}
/* Polish D — interactive tool_use rollup. Clickable; reveals or
   hides the older tool calls. Subtle hover affordance distinguishes
   it from non-interactive .ws-feed-tool lines. */
.ws-feed-tool-overflow {
    cursor: pointer;
    color: #6b7280;
    font-style: normal;
    font-weight: 500;
    user-select: none;
    border-radius: 4px;
    padding: 2px 4px 2px 22px;
    margin-left: -4px;
    transition: background 0.12s ease, color 0.12s ease;
}
.ws-feed-tool-overflow:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1a73e8;
}

/* Phase 12 — expandable activity-event rows. The chevron sits at
   the right edge of the row, the row itself is clickable to toggle.
   The detail panel is a sibling element (not nested) so styling
   stays cleanly separable from the row's flex layout. */
.ws-feed-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.12s ease;
}
.ws-feed-row:hover {
    background: rgba(0, 0, 0, 0.03);
}
.ws-feed-row-main {
    flex: 1;
    min-width: 0;
}
.ws-feed-chevron {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 0;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.12s ease, background-color 0.12s ease;
    margin-top: 2px;
}
.ws-feed-chevron:hover {
    color: #374151;
    background: rgba(0, 0, 0, 0.05);
}
.ws-feed-chevron .material-symbols-outlined {
    font-size: 18px;
}
.ws-feed-detail {
    margin: 4px 0 8px 24px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    font-family: 'SF Mono', Consolas, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #374151;
    max-height: 480px;
    overflow-y: auto;
    box-shadow: inset 0 0 0 1px #f3f4f6;
    /* Hover-only thin scrollbar — matches .ws-feed-body convention. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ws-feed-detail:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.ws-feed-detail::-webkit-scrollbar { width: 6px; }
.ws-feed-detail::-webkit-scrollbar-thumb { background: transparent; }
.ws-feed-detail:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.ws-feed-detail[hidden] { display: none; }
.ws-feed-detail-section {
    margin-top: 8px;
}
.ws-feed-detail-section:first-child { margin-top: 0; }
.ws-feed-detail-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 4px;
}
.ws-feed-detail-image {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    border-radius: 8px;
    margin: 6px 0;
    cursor: zoom-in;
}
.ws-feed-image-tile img,
.ws-feed-image-tile video {
    cursor: zoom-in;
    transition: transform 0.15s ease;
}
.ws-feed-image-tile img:hover,
.ws-feed-image-tile video:hover {
    transform: scale(1.02);
}

/* Phase 12 — Lightbox image preview overlay (independent of the
   Phase 9 #wsVersionOverlay). Z-index 5410 sits above the main
   overlay so users can zoom into a feed thumbnail without dismissing
   the version preview overlay. */
#wsFeedImageOverlay {
    position: fixed;
    inset: 0;
    z-index: 5410;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#wsFeedImageOverlay.active { display: flex; }
/* Bare image rendered directly against the dim backdrop — no
   shell, no padding, no white background, no close button. The
   user dismisses via Esc or backdrop click.
   `width: max-content` anchors rendered size to the image's
   intrinsic pixel width (so a 640px image renders at 640px, not
   stretched to fill 95vw). max-width/max-height STILL cap at the
   viewport so 4K images scale DOWN. flex-shrink:0 prevents the
   parent flex container from squeezing below natural size. End
   result: never upscale beyond native resolution → image stays
   sharp; only downscale when natural size exceeds viewport. */
.ws-img-overlay-img {
    max-width: 95vw;
    max-height: 95vh;
    width: max-content;
    height: auto;
    flex-shrink: 0;
    display: block;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}
/* Polish A — prev/next nav for feed image lightbox. */
.ws-img-overlay-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 5500;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ws-img-overlay-nav.prev { left: 24px; }
.ws-img-overlay-nav.next { right: 24px; }
.ws-img-overlay-nav:hover:not([disabled]) {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}
.ws-img-overlay-nav[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.ws-img-overlay-nav .material-symbols-outlined { font-size: 28px; }
.ws-img-overlay-counter {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    z-index: 5500;
    pointer-events: none;
}

.ws-feed-terminal {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}
.ws-feed-terminal .material-symbols-outlined { font-size: 16px; }
.ws-feed-terminal.error {
    background: rgba(193,53,21,0.08);
    color: #991b1b;
}
.ws-feed-terminal.cancelled {
    background: rgba(245,158,11,0.08);
    color: #92400e;
}

/* ── Phase 7 — Code tab ─────────────────────────────────────── */
.ws-code-tab {
    display: flex;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    height: 480px;
    background: #fff;
    flex-shrink: 0;
}
.ws-version-card.has-preview > .ws-code-tab {
    flex: 1;
    height: auto;
    min-height: 0;
}
.ws-code-tab.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    gap: 8px;
    height: 200px;
}
.ws-code-tree {
    flex: 0 0 280px;
    min-width: 200px;
    max-width: 600px;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    background: #fafafa;
    font-size: 12px;
    padding: 6px 0;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ws-code-tree:hover { scrollbar-color: rgba(0,0,0,0.2) transparent; }
.ws-code-tree::-webkit-scrollbar { width: 6px; }
.ws-code-tree::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.ws-code-tree:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.ws-code-tree-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 2;
    user-select: none;
    background: transparent;
    transition: background 150ms ease;
}
.ws-code-tree-resizer:hover,
.ws-code-tree-resizer.dragging {
    background: rgba(26,115,232,0.2);
}
.ws-code-viewer { flex: 1; min-width: 0; }
.ws-tree-dir, .ws-tree-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 14px;
    font-size: 12px;
    color: #374151;
}
.ws-tree-dir .material-symbols-outlined,
.ws-tree-file .material-symbols-outlined {
    font-size: 14px;
    color: #6b7280;
}
.ws-tree-dir { color: #374151; font-weight: 600; cursor: pointer; }
.ws-tree-file { color: #374151; }
.ws-tree-dir:hover { background: #f3f4f6; }
/* Chevron rotates 90° when the folder is expanded — same affordance
   as the template detail-page tree (.td-chevron). */
.ws-tree-dir .ws-tree-chevron {
    font-size: 14px;
    color: #9ca3af;
    transition: transform 150ms ease;
    flex-shrink: 0;
    width: 14px;
}
.ws-tree-dir.expanded .ws-tree-chevron { transform: rotate(90deg); }
.ws-tree-children.collapsed { display: none; }
.ws-tree-file { cursor: pointer; }
.ws-tree-file:hover { background: #eff6ff; }
.ws-tree-file.active {
    background: #dbeafe;
    color: #1d4ed8;
}
.ws-tree-file.active .material-symbols-outlined { color: #1d4ed8; }
.ws-tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tree-size { font-size: 10px; color: #9ca3af; }

.ws-code-viewer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.ws-code-viewer-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 12px;
    height: 100%;
}
.ws-code-viewer-head {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #6b7280;
    background: #fafafa;
    flex-shrink: 0;
}
.ws-code-viewer-body {
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #374151;
    background: #fff;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ws-code-viewer-body:hover { scrollbar-color: rgba(0,0,0,0.2) transparent; }
.ws-code-viewer-body::-webkit-scrollbar { width: 8px; height: 8px; }
.ws-code-viewer-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.ws-code-viewer-body:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.ws-code-viewer-body.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}
/* Line-numbered code viewer (run overlay Code tab + template detail).
   Two aligned <pre> columns: a sticky gutter + the code. Identical
   font/line-height keeps the numbers aligned with their lines. */
.ws-code-numbered {
    display: flex;
    /* flex-start, NOT stretch: in a flex row, `stretch` caps each column's
       height to the container's VISIBLE box, so the gutter's background
       stopped at the fold and line numbers past it landed on white. flex-start
       lets each <pre> take its full content height so the gutter background
       covers every line; min-height:100% (below) keeps them filling the viewer
       for short files. */
    align-items: flex-start;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ws-code-numbered:hover { scrollbar-color: rgba(0,0,0,0.2) transparent; }
.ws-code-numbered::-webkit-scrollbar { width: 8px; height: 8px; }
.ws-code-numbered::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.ws-code-numbered:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.ws-code-gutter, .ws-code-lines {
    margin: 0;
    padding: 12px 0;
    /* Fill the viewer height for short files (border-box + global reset means
       100% includes the padding, so no phantom overflow scrollbar); taller
       content grows past it and the container scrolls. */
    min-height: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #374151;
    background: #fff;
}
.ws-code-gutter {
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 10px;
    text-align: right;
    color: #9ca3af;
    background: #fafafa;
    border-right: 1px solid #eef0f2;
    user-select: none;
    position: sticky;
    left: 0;
}
.ws-code-lines {
    flex: 1 1 auto;
    padding-left: 12px;
    padding-right: 12px;
    white-space: pre;
}
.ws-code-image-wrap {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background: #f9fafb;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.ws-code-image-wrap img {
    /* Render at intrinsic pixel size (sharp 1:1) up to the wrapper's
       bounds; only scale down when natural size exceeds wrapper.
       Mirrors the lightbox treatment. */
    max-width: 100%;
    max-height: 100%;
    width: max-content;
    height: auto;
    flex-shrink: 0;
    display: block;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Maximized version-card iframe — fixed full-viewport overlay. */
.ws-version-card.maximized {
    position: fixed;
    inset: 0;
    z-index: 5400;
    border-radius: 0;
    background: #fff;
    overflow: auto;
}
.ai-chat-sidebar-header {
    padding: 12px;
    flex-shrink: 0;
    border-bottom: 1px solid #e8e8e8;
    /* Row: [ New-chat pill (flex:1) ][ round collapse toggle ] */
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-chat-sidebar-header .ai-chat-new-btn {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}
.ai-chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ai-chat-sidebar-list:hover {
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.ai-chat-sidebar-list::-webkit-scrollbar { width: 4px; }
.ai-chat-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.ai-chat-sidebar-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.ai-chat-sidebar-list:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.ai-chat-session-item {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    position: relative;
}
.ai-chat-session-item:hover {
    background: #f0f0f0;
}
.ai-chat-session-item.active {
    background: #e8f0fe;
    border-left-color: #1a73e8;
}
.ai-chat-session-item .session-title {
    font-size: 13px;
    font-weight: 500;
    /* Phase 15.30: unified to #374151 (Tailwind gray-700) — same
       canonical body-text tone as the chat thread bubble + plan
       card title/summary + version card title. Was #222. Selector
       covers BOTH AI Assistant + Website Generator sidebars (shared
       .ai-chat-session-item class). */
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 24px;
}
.ai-chat-session-item .session-date {
    font-size: 11px;
    color: #9aa0a6;
    margin-top: 2px;
}
.ai-chat-session-item .session-delete {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #9aa0a6;
}
.ai-chat-session-item .session-delete .material-symbols-outlined { font-size: 16px; }
.ai-chat-session-item:hover .session-delete { display: flex; }
.ai-chat-session-item .session-delete:hover { background: #e0e0e0; color: #c13515; }

/* Chat main area */
.ai-chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* New-chat: a filled full-width pill (strategy-factory session-bar
   pattern) — the primary action of the sidebar, not a thin outline. */
.ai-chat-new-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-radius: 20px;
    color: #3c4043;
    font-size: 13px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ai-chat-new-btn:hover {
    background: #e8eaed;
    color: #1a73e8;
}
.ai-chat-new-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Messages area */
.ai-chat-page-messages {
    flex: 1;
    overflow-y: auto;
    /* Hard-stop horizontal overflow — a stray wide descendant (code
       block, embedded image, oversized table) should not produce a
       scrollbar on the whole column. Children must clip themselves
       (pre has overflow-x: auto; tables get the same if needed). */
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ai-chat-page-messages:hover {
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.ai-chat-page-messages::-webkit-scrollbar { width: 6px; }
.ai-chat-page-messages::-webkit-scrollbar-track { background: transparent; }
.ai-chat-page-messages::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.ai-chat-page-messages:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* Welcome screen */
.ai-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    color: #717171;
    gap: 8px;
    padding: 60px 20px;
}
.ai-chat-welcome h3 {
    color: #374151;
    margin: 8px 0 4px;
    font-size: 20px;
}
.ai-chat-welcome p {
    font-size: 14px;
    max-width: 420px;
}

.ai-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}
.ai-chat-suggest-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    color: #484848;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.ai-chat-suggest-btn:hover {
    border-color: #1a73e8;
    color: #1a73e8;
}

/* User messages */
.ai-chat-page-messages .user-message {
    align-self: flex-end;
    max-width: 80%;
    display: flex;
    gap: 10px;
    flex-direction: row-reverse;
}
.ai-chat-page-messages .user-message .message-content {
    background: #1a73e8;
    color: #fff;
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
}
.ai-chat-page-messages .user-message .message-content p { margin: 0; }
/* AI messages */
/* Phase-1 Assistant handoff card — a one-click CTA the model appends to a
   reply (open the Builder with a prefilled prompt / go to a page). Theme-aware. */
.ai-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 2px;
    padding: 12px 14px;
    border: 1px solid #e2e5ea;
    border-radius: 12px;
    background: #f7f9fc;
}
.ai-action-card .ai-action-icon {
    font-size: 22px;
    color: #1a73e8;
    flex-shrink: 0;
}
.ai-action-card .ai-action-body { flex: 1 1 auto; min-width: 0; }
.ai-action-card .ai-action-cap {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: 2px;
}
.ai-action-card .ai-action-summary {
    font-size: 13.5px;
    color: #1f2430;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.ai-action-card .ai-action-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 9999px;
    background: #1a73e8;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
}
.ai-action-card .ai-action-btn:hover { filter: brightness(0.95); }
/* Phase 2 confirm gate — the button swaps for a consequence note + Confirm/Cancel. */
.ai-action-card .ai-action-confirm { flex: 1 1 auto; min-width: 0; }
.ai-action-card .ai-action-confirm-note {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 8px;
}
.ai-action-card .ai-action-confirm-row { display: flex; gap: 8px; }
.ai-action-card .ai-action-btn-ghost {
    border: 1px solid #d5d9e0;
    border-radius: 9999px;
    background: transparent;
    color: #3a4150;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
}
.ai-action-card .ai-action-btn-ghost:hover { background: rgba(0,0,0,0.04); }
.ai-action-card.ai-action-done .ai-action-icon { color: #008a05; }
@media (prefers-color-scheme: dark) {
    .ai-action-card .ai-action-confirm-note { color: #9aa1ac; }
    .ai-action-card .ai-action-btn-ghost { color: #d6d9de; border-color: rgba(255,255,255,0.18); }
    .ai-action-card .ai-action-btn-ghost:hover { background: rgba(255,255,255,0.06); }
}
:root[data-theme="dark"] .ai-action-card .ai-action-confirm-note { color: #9aa1ac; }
:root[data-theme="dark"] .ai-action-card .ai-action-btn-ghost { color: #d6d9de; border-color: rgba(255,255,255,0.18); }
@media (prefers-color-scheme: dark) {
    .ai-action-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
    .ai-action-card .ai-action-summary { color: #e6e8ec; }
    .ai-action-card .ai-action-cap { color: #9aa1ac; }
}
:root[data-theme="dark"] .ai-action-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .ai-action-card .ai-action-summary { color: #e6e8ec; }
:root[data-theme="dark"] .ai-action-card .ai-action-cap { color: #9aa1ac; }
:root[data-theme="light"] .ai-action-card { background: #f7f9fc; border-color: #e2e5ea; }

.ai-chat-page-messages .ai-message {
    align-self: flex-start;
    max-width: 85%;
    display: flex;
    flex-shrink: 0;
    /* A flex child's default min-width is `auto` (= intrinsic content
       width). Without this, a wide <pre> inside .message-content would
       expand .ai-message beyond its max-width, blowing horizontal
       scroll onto the whole messages column instead of inside the pre.
       See the chat-scroll fix notes in CLAUDE.md. */
    min-width: 0;
}
.ai-chat-page-messages .ai-message .message-content {
    /* Bare assistant response — no bubble. Matches the pattern used by
     * Claude.ai / ChatGPT / Anthropic Console: user message stays in a
     * blue pill (visible above), assistant reply flows as a document so
     * markdown lists / tables / code blocks aren't cramped inside a tight
     * rounded box. Was: background #f7f7f7, padding 12px 16px, radius 18px. */
    background: transparent;
    padding: 4px 0;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.6;
    /* Phase 15.29: unified to #374151 (Tailwind gray-700) to match
       the plan card's title + summary tone. Single canonical text
       color across the chat thread + plan card body. Applies to both
       AI Assistant and Website Generator surfaces (shared selector). */
    color: #374151;
    /* min-width: 0 is required on this flex child so child <pre> blocks
       whose intrinsic width exceeds the column can actually be clipped
       by their own overflow-x: auto rather than blowing out the row.
       max-width: 100% is belt-and-braces against any stray absolute-
       width descendants. */
    min-width: 0;
    max-width: 100%;
}
.ai-chat-page-messages .ai-message .message-content p { margin: 0 0 8px; }
.ai-chat-page-messages .ai-message .message-content p:last-child { margin-bottom: 0; }
.ai-chat-page-messages .ai-message .message-content h3 { font-size: 15px; margin: 12px 0 6px; }
.ai-chat-page-messages .ai-message .message-content h2 { font-size: 16px; margin: 14px 0 8px; }
.ai-chat-page-messages .ai-message .message-content ul,
.ai-chat-page-messages .ai-message .message-content ol { margin: 4px 0; padding-left: 20px; }
.ai-chat-page-messages .ai-message .message-content li { margin-bottom: 4px; }
.ai-chat-page-messages .ai-message .message-content code {
    background: #e8eaed;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.ai-chat-page-messages .ai-message .message-content pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 12px 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 13px;
    margin: 8px 0;
    /* The pre must never outgrow its flex parent, or the whole message
       row overflows horizontally instead of the pre itself scrolling.
       The ancestor chain needs min-width:0 for this to actually work —
       see rules above on .ai-message / .message-content. */
    max-width: 100%;
    white-space: pre;
}
.ai-chat-page-messages .ai-message .message-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}
.ai-chat-page-messages .ai-message .message-content table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 8px 0;
    font-size: 13px;
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}
.ai-chat-page-messages .ai-message .message-content th,
.ai-chat-page-messages .ai-message .message-content td {
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    padding: 8px 12px;
    text-align: left;
}
.ai-chat-page-messages .ai-message .message-content th:last-child,
.ai-chat-page-messages .ai-message .message-content td:last-child {
    border-right: none;
}
.ai-chat-page-messages .ai-message .message-content tr:last-child td {
    border-bottom: none;
}
.ai-chat-page-messages .ai-message .message-content th {
    background: #f1f3f4;
    font-weight: 600;
}
.ai-chat-page-messages .ai-message .message-content strong { font-weight: 600; }
.ai-chat-page-messages .ai-message .message-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
    border: 1px solid #e0e0e0;
}
.ai-chat-chart-container {
    /* Soft tint container so charts sit in a subtle "card" without a hard
     * border line. Background is barely-perceptible against the white body
     * (~2% darker) but enough to delimit the chart from surrounding prose
     * and give Chart.js tooltips a spatial context. Was: background #fff +
     * 1px #e8e8e8 border. */
    background: #fafbfc;
    border-radius: 10px;
    border: none;
    padding: 16px;
    margin: 12px 0;
    max-width: 100%;
}
.ai-chat-chart-container canvas {
    max-height: 350px;
}
.ai-chat-page-messages .ai-message .message-content hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 12px 0;
}

/* Account Settings page — collapse the Profile + Password 2-column row to
   a single column on narrow viewports so form fields don't get cramped. */
@media (max-width: 768px) {
    .user-settings-row {
        grid-template-columns: 1fr !important;
    }
    /* My Dashboard — stack the attention/activity two-column row on mobile. */
    .ud-two-col {
        grid-template-columns: 1fr !important;
    }
}

/* Settings → Profile — exact parity with the tune-agent Settings page (scoped to
   .ta-settings so it can't affect any other buildmidas surface). Values copied
   verbatim from tuneagent/dashboard/css/main.css. */
.ta-settings .card {
    background: #f6f8fa; border-radius: 12px; padding: 24px;
    margin-bottom: 16px;
}
.ta-settings .card h3 {
    margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #1e293b;
    display: flex; align-items: center; gap: 8px;
}
.ta-settings .card h3 .material-symbols-outlined { color: #3b82f6; font-size: 22px; }
.ta-settings .form-row { margin-bottom: 16px; }
.ta-settings .form-row label {
    display: block; margin-bottom: 6px; color: #374151; font-size: 13px; font-weight: 600;
}
.ta-settings .form-row input,
.ta-settings .form-row select {
    /* On the tinted settings cards the white fill IS the affordance —
       transparent border keeps layout stable for the blue focus border. */
    background: #fff; color: #1e293b; border: 1px solid transparent;
    padding: 10px 16px; border-radius: 9999px; font-size: 14px; width: 100%;
    font-family: inherit; transition: border-color 0.15s; box-sizing: border-box;
}
/* Native select chevron + comfortable right padding so the arrow doesn't
   collide with the pill edge — matches the app's input treatment. */
.ta-settings .form-row select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.ta-settings .uf-modal-textarea { border-color: transparent; }
/* Discovery kickoff fields — same states as the settings fields. */
#discRegion { border: 1px solid transparent; }
#discRegion:hover:not(:focus) { border-color: #9ca3af; }
#discRegion:focus { outline: none; border-color: #1a73e8; box-shadow: none; }
#discDirection { border-color: transparent; }
#discDirection:hover:not(:focus) { border-color: #9ca3af; }
#discDirection:focus { outline: none; border-color: #1a73e8; box-shadow: none; }
.ta-settings .form-row input:hover:not(:focus),
.ta-settings .form-row select:hover:not(:focus) { border-color: #9ca3af; }
.ta-settings .form-row input:focus,
.ta-settings .form-row select:focus,
.ta-settings .uf-modal-textarea:focus { outline: none; border-color: #1a73e8; box-shadow: none; }
.ta-settings .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border: 1px solid transparent; border-radius: 9999px;
    background: #1a73e8; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.15s, border-color 0.15s; text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
}
.ta-settings .btn:hover { background: #1557b0; }
.ta-settings .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ta-settings .btn .material-symbols-outlined { font-size: 18px; }
.ta-settings .btn-secondary { background: #fff; color: #374151; border-color: #d1d5db; }
.ta-settings .btn-secondary:hover { background: #f3f4f6; border-color: #9ca3af; }
.ta-settings .btn-danger { background: #ef4444; }
.ta-settings .btn-danger:hover { background: #dc2626; }
.ta-settings .btn-sm { padding: 6px 12px; font-size: 12px; }
.ta-settings .badge {
    display: inline-block; padding: 3px 10px; border-radius: 9999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.ta-settings .badge.completed { background: #d1fae5; color: #065f46; }
.ta-settings .badge.warning   { background: #fef3c7; color: #b45309; }
.ta-settings .badge.info      { background: #dbeafe; color: #1d4ed8; }
.ta-settings .badge.danger    { background: #fecaca; color: #b91c1c; }
.ta-settings .error {
    color: #b91c1c; padding: 10px 14px; background: rgba(239,68,68,0.08);
    border-radius: 8px; font-size: 13px; border: 1px solid rgba(239,68,68,0.2);
}
.ta-settings .success {
    color: #065f46; padding: 10px 14px; background: rgba(16,185,129,0.08);
    border-radius: 8px; font-size: 13px; border: 1px solid rgba(16,185,129,0.2);
}
.ta-settings .row { display: flex; gap: 12px; align-items: center; }
.ta-settings .row.wrap { flex-wrap: wrap; }
.ta-settings .empty { color: #9ca3af; padding: 24px; text-align: center; font-style: italic; font-size: 14px; }

/* Google Accounts list — capped at 400px tall with internal scroll so a
   user with many service accounts doesn't push the rest of the page off
   screen. Matches the thin hover-only scrollbar pattern used elsewhere
   in the dashboard (.user-factory-board-scroll, .ai-chat-page-messages). */
.account-list-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.account-list-scroll:hover { scrollbar-color: rgba(0,0,0,0.15) transparent; }
.account-list-scroll::-webkit-scrollbar { width: 6px; }
.account-list-scroll::-webkit-scrollbar-track { background: transparent; }
.account-list-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.account-list-scroll:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* Thinking indicator inside streaming message */
.ai-chat-thinking {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    color: #9aa0a6;
}

/* Website Generator chat — Lovable-style smoothed streaming.
   While the SSE stream is alive, markdown is rendered incrementally
   (throttled to ≥30 new chars OR ≥100 ms intervals) with a blinking
   caret appended at the end so the user sees formatting appear live.
   Final overwrite at stream end runs the full _md() once with the
   plan-fence stripping path. */
.ws-streaming-md {
    /* Markdown body inherits the bubble's font + color — no extra
       overrides needed. The cursor below is positioned with the
       trailing inline-block + sibling. */
}

/* ─── Copy button + language label on fenced code blocks ────────────
   Injected by chat-stream-smoother.js::attachCopyButtons after every
   markdown render across all three chat surfaces. The <pre> gains
   `position: relative` so absolute children anchor to it; padding-top
   makes room for the buttons. */
pre.ws-code-block {
    position: relative;
    padding-top: 32px;
    /* Cap a long code block's height so it doesn't run off the
       bottom of the viewport. Vertical + horizontal scroll engage
       INSIDE the block as needed; the surrounding chat thread keeps
       its own scroll position. The cap mirrors Claude.ai / Cursor —
       comfortable read window, not punishing on small displays. */
    max-height: min(480px, 60vh);
    overflow: auto;
    /* Hover-only thin scrollbar — matches the rest of the dashboard
       (.claude/rules/website-generator.md). Default fat browser rails read inconsistent. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
pre.ws-code-block:hover {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
pre.ws-code-block::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
pre.ws-code-block::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
pre.ws-code-block:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}
/* Non-scrolling relative wrapper (added by attachCopyButtons) that owns the
   copy button + lang chip so they pin to the top corners and DON'T move with the
   <pre>'s horizontal scroll. Carries the <pre>'s block margin; the <pre> resets
   its own so the pinned controls sit on the code block's top edge. */
.ws-code-wrap { position: relative; margin: 8px 0; }
.ws-code-wrap > pre.ws-code-block { margin: 0 !important; }
.ws-code-wrap > .ws-code-lang {
    /* Absolute-positioned to the non-scrolling wrapper (NOT the scrolling
       <pre>), so it stays pinned top-left when the user scrolls the code. */
    position: absolute;
    top: 6px;
    left: 12px;
    padding: 1px 6px;
    border-radius: 4px;
    /* Opaque chip bg so scrolled code doesn't show through the label. */
    background: rgba(20, 20, 20, 0.85);
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
    pointer-events: none;
    z-index: 1;
}
.ws-code-wrap > .ws-code-copy {
    /* Pinned to the non-scrolling wrapper; stays top-right when the code
       scrolls horizontally. */
    position: absolute;
    top: 4px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    /* Opaque bg so scrolled code can't read through the button. */
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    color: #d4d4d4;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease,
                color 120ms ease;
    user-select: none;
    z-index: 1;
}
.ws-code-wrap > .ws-code-copy:hover {
    background: rgba(40, 40, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.ws-code-wrap > .ws-code-copy.copied {
    background: #008a05;
    border-color: #008a05;
    color: #fff;
}
.ws-streaming-md > :last-child {
    /* Last block's bottom margin would push the cursor onto its own
       line; collapse it so the caret hugs the trailing text. */
    margin-bottom: 0 !important;
}
.ws-stream-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: #1a73e8;
    animation: ws-stream-blink 1s steps(2, end) infinite;
}
@keyframes ws-stream-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Disabled state for send button */
.ai-chat-page-send:disabled {
    cursor: not-allowed;
    background: #9aa0a6;
}
.ai-chat-page-field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* File attachment UI */
.ai-chat-file-preview:empty { display: none; }
.ai-chat-file-preview {
    padding: 0 20px;
}
.ai-chat-file-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f3f4;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 13px;
    color: #484848;
}
.ai-chat-file-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
}
.ai-chat-file-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-chat-file-size {
    color: #9aa0a6;
    font-size: 12px;
}
.ai-chat-file-remove {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #9aa0a6;
}
.ai-chat-file-remove:hover { background: #e0e0e0; color: #c13515; }
.ai-chat-file-remove .material-symbols-outlined { font-size: 16px; }

/* Attach button in input box */
.ai-chat-attach-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #9aa0a6;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.ai-chat-attach-btn:hover { color: #1a73e8; background: #e8f0fe; }
.ai-chat-attach-btn .material-symbols-outlined { font-size: 20px; }

/* Input area */
.ai-chat-page-input {
    padding: 12px 20px 20px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.ai-chat-page-input-box {
    max-width: 680px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f3f4;
    /* Borderless at rest — the gray bg separates the pill from the
       page surface. Border reserved as transparent so the layout
       doesn't shift when :focus-within flips it to #1a73e8. Applied
       to ALL three chat surfaces sharing this class: Website
       Generator, AI Assistant, SEO Factory dispatcher. */
    border: 1px solid transparent;
    border-radius: 24px;
    /* Symmetric 6px padding so the + button sits the same distance
       from the left edge as the send button from the right edge. */
    padding: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-chat-page-input-box:focus-within {
    border-color: #1a73e8;
    box-shadow: none;
    background: #fff;
}
.ai-chat-page-field {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    padding: 8px 0;
    /* Phase 15.32: unified typing color to #374151 (canonical body
       text). Was #222. Selector is shared across all three chat
       surfaces: AI Assistant, Website Generator, and the SEO Factory
       Coordinator (whose dispatcher textarea uses the same class). */
    color: #374151;
    font-family: inherit;
    /* textarea behaviour — no manual resize, wrap long content, scroll
       vertically once we exceed 120px (auto-grow happens in JS via
       _autoGrowChatField). */
    resize: none;
    line-height: 1.4;
    min-height: 22px;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ai-chat-page-field:hover,
.ai-chat-page-field:focus { scrollbar-color: rgba(0,0,0,0.2) transparent; }
.ai-chat-page-field::-webkit-scrollbar { width: 6px; }
.ai-chat-page-field::-webkit-scrollbar-track { background: transparent; }
.ai-chat-page-field::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.ai-chat-page-field:hover::-webkit-scrollbar-thumb,
.ai-chat-page-field:focus::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.ai-chat-page-field::placeholder { color: #9aa0a6; }
/* While the placeholder is showing (empty textarea), keep it on a single
   line and ellipsise on overflow so a long placeholder doesn't wrap into a
   2–3 line block that triggers the textarea's scrollbar before any input.
   The moment the user types a character, :placeholder-shown stops matching
   and the base rules resume for the normal auto-grow + wrap compose UX. */
.ai-chat-page-field:placeholder-shown {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ai-chat-page-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #1a73e8;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.ai-chat-page-send:hover { background: #1557b0; }
.ai-chat-page-send .material-symbols-outlined { font-size: 20px; }
.ai-chat-enhance-btn {
    flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: transparent; color: #1a73e8; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.ai-chat-enhance-btn:hover { background: #eef2ff; }
.ai-chat-enhance-btn .material-symbols-outlined { font-size: 20px; }

/* Chat pages are sealed fixed-height containers — sidebar /
   messages / preview panel scroll INTERNALLY; the outer page
   never scrolls. Multi-pronged constraint to defeat any flow
   contribution that would push body height past 100vh:
   - body itself becomes overflow:hidden when a chat page is
     active (kills the viewport-edge scrollbar at the source).
   - .main-content drops padding + min-height and clamps to
     navbar-offset height with overflow:hidden.
   - chat page fills 100% of the constrained wrapper.
   The `:has()` selector flips all three rules together when
   either chat page becomes .active. */
/* Clamp BOTH the root scroller (html) and body. Clamping body alone left the
   documentElement free to scroll, so a scrollIntoView({block:'center'}) inside a
   sealed page (e.g. prefillNewBuild focusing the bottom composer in a fresh chat)
   scrolled the document ~60px and pushed the page top under the fixed navbar with
   no way to scroll back (overflow:hidden hides the scrollbar). Clamping html kills
   that whole class. */
html:has(#page-ai-chat.active),
html:has(#page-website-factory.active),
body:has(#page-ai-chat.active),
body:has(#page-website-factory.active) {
    overflow: hidden;
    height: 100vh;
}
.main-content:has(#page-ai-chat.active),
.main-content:has(#page-website-factory.active) {
    overflow: hidden;
    height: calc(100vh - 60px);
    min-height: 0;
    padding: 0;
}
#page-ai-chat.active,
#page-website-factory.active {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
}
.ai-chat-page {
    height: 100%;
    overflow: hidden;
}
.ai-chat-main {
    height: 100%;
    overflow: hidden;
}

/* ===================================================================
   AI Assistant floating dock (top-nav "Ask AI")
   Window chrome/layout mirrors the autovalueuae assistant: a right-docked
   rounded panel that slides in; a Max button expands it. The INNER chat
   (.ai-chat-page / messages / input) keeps its existing buildmidas styling
   and text sizes — only the wrapper + header are new.
   =================================================================== */
.ai-assistant-dock {
    position: fixed;
    top: 70px;
    right: 12px;
    width: 400px;
    height: calc(100vh - 90px);
    max-height: calc(100vh - 90px);
    background: #ffffff;
    border: 1px solid #e6e8eb;
    border-radius: 20px;
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1300;
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease,
                width 0.28s ease, height 0.28s ease, top 0.28s ease, right 0.28s ease;
}
.ai-assistant-dock.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
/* Maximized — large window, session sidebar revealed */
.ai-assistant-dock.maximized {
    width: min(1180px, 94vw);
    height: calc(100vh - 84px);
    top: 70px;
    right: max(12px, calc((100vw - 1180px) / 2));
}

/* Header */
.ai-assistant-dock-header {
    flex: 0 0 auto;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 20px;
    border-bottom: 1px solid #eceef1;
    background: #fff;
}
.ai-assistant-dock-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #202124;
    margin: 0;
    line-height: normal;
}
.ai-assistant-dock-actions { display: flex; align-items: center; gap: 2px; }
.ai-assistant-dock-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    color: #5f6368;
    transition: background-color 0.2s;
    padding: 0;
}
.ai-assistant-dock-btn:hover { background: #f1f3f4; }
.ai-assistant-dock-btn .material-symbols-outlined { font-size: 20px; }

/* The existing chat page fills the dock below the header. Overrides the
   global .ai-chat-page/.ai-chat-main height:100% so they flex under the header
   instead of overflowing it. */
.ai-assistant-dock .ai-chat-page {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    width: 100%;
}
.ai-assistant-dock .ai-chat-main {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Docked (small) mode hides the session sidebar; maximized reveals it. */
.ai-assistant-dock:not(.maximized) .ai-chat-sidebar,
.ai-assistant-dock:not(.maximized) .ai-chat-sidebar-toggle,
.ai-assistant-dock:not(.maximized) .ai-chat-sidebar-expand {
    display: none !important;
}

/* Top-nav "Ask AI" button */
/* Ask AI — quiet ghost button: no background fill at rest; brand-blue icon +
   label carry the affordance. Hover = soft blue tint, no lift/animation. */
.ask-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: #1a73e8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ask-ai-btn:hover { background: rgba(26, 115, 232, 0.08); }
.ask-ai-btn:active { background: rgba(26, 115, 232, 0.14); }
.ask-ai-btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
.ask-ai-btn .material-symbols-outlined { font-size: 19px; }

/* Mobile — bottom sheet (buildmidas mobile-modal convention) */
@media (max-width: 640px) {
    .ai-assistant-dock,
    .ai-assistant-dock.maximized {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 88vh;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }
    .ai-assistant-dock.active { transform: translateY(0); }
    /* On phones even the small dock reveals the sessions via the existing
       left-edge drawer handle, so keep the sidebar drawer machinery intact. */
    .ai-assistant-dock:not(.maximized) .ai-chat-sidebar { display: flex !important; }
    .ask-ai-btn-label { display: none; }
    .ask-ai-btn { padding: 0 10px; }
}

/* Mobile-only Chat/Preview tab bar for the AI Builder — hidden on desktop,
   revealed by the max-width:768px rules only when a preview exists. */
/* Mobile-only edge handles that open the sidebar (left) / preview (right)
   drawers — like the desktop collapse toggles, so no top bar steals chat height.
   Hidden on desktop. Positioned by the max-width:768px rules. */
.ai-chat-edge-btn { display: none; }

@media (max-width: 768px) {
    /* Chat pages (AI Assistant / AI Builder) on phones: the chat (messages +
       input) is FULL-SCREEN; the session sidebar becomes a LEFT drawer and the
       preview becomes a RIGHT drawer, both CLOSED by default and slid in over
       the chat with a backdrop (ChatGPT / Claude pattern). The panels keep their
       desktop styling — only their positioning changes. Opened via the edge
       handles below (no top bar — that stole height and hid the input). */
    .ai-chat-page { flex-direction: row; height: 100%; min-height: 0; }
    .ai-chat-main { width: 100%; min-width: 0; }
    /* Symmetric, tighter side padding so cards get more width. */
    .ai-chat-page-messages { padding: 16px 12px !important; }
    /* Sent (user) bubble: shrink to the message content, capped at 95% of the
       column. The wrapper is a flex item (align-self:flex-end) so it already
       shrink-wraps its content; max-width caps a long message at 95%. */
    .ai-chat-page-messages .user-message { max-width: 95%; }
    /* Defeat the legacy bare `.message-content { max-width:70% }` mobile rule
       (from the old modal chat) so a long bubble can fill the wrapper — but do
       NOT force width:100%, or short messages would be stretched to 95%. */
    .ai-chat-page-messages .user-message .message-content { max-width: 100%; box-sizing: border-box; min-width: 0; }
    /* Slightly larger chat text on mobile (14 -> 15px), sent + response,
       both AI Builder (#websiteChatMessages) and AI Assistant (#aiChatMessages)
       — they share .ai-chat-page-messages. */
    .ai-chat-page-messages .user-message .message-content,
    .ai-chat-page-messages .ai-message .message-content { font-size: 15px; }
    .ai-chat-page-messages .ai-message { max-width: 100%; }
    /* The plan card (inline max-width:85%) and the question/clarify card
       (.ws-question-card, CSS max-width:85%) both fill the message column now. */
    .ai-chat-page-messages .website-plan-card,
    .website-plan-card,
    .ai-chat-page-messages .ws-question-card,
    .ws-question-card { max-width: 100% !important; }

    /* Bigger New-app / New-chat button + historical session rows in the chat
       sidebar drawer. */
    .ai-chat-sidebar-header .ai-chat-new-btn {
        padding: 13px 0 !important;
        font-size: 15px !important;
    }
    .ai-chat-session-item { padding: 14px 16px !important; }
    .ai-chat-session-item .session-title { font-size: 15px !important; }
    .ai-chat-session-item .session-date { font-size: 13px !important; }
    .ai-chat-suggestions { flex-direction: column; }
    .ws-followup-grid { max-height: 200px; overflow-y: auto; }
    /* Bigger "Try one of these next" suggestion chips + label on mobile. */
    .ws-followup-chip { font-size: 14px !important; padding: 9px 14px !important; }
    .ws-followup-label { font-size: 12px !important; }
    /* Bigger card kebab (three-dots) button + its dropdown options on mobile.
       The menu (.tpl-kebab-menu / .tpl-kebab-item) is shared by the My Builds
       version cards (.ws-version-kebab) and the Template cards (.tpl-card-kebab). */
    .ws-version-card-head .ws-version-kebab { width: 40px !important; height: 40px !important; }
    .ws-version-card-head .ws-version-kebab .material-symbols-outlined { font-size: 22px !important; }
    .tpl-kebab-menu { min-width: 240px !important; padding: 6px !important; }
    .tpl-kebab-item { font-size: 15px !important; padding: 13px 14px !important; }
    .tpl-kebab-item .material-symbols-outlined { font-size: 22px !important; }
    .ws-kebab-subitem { font-size: 15px !important; padding-left: 42px !important; }

    /* Use the DYNAMIC viewport height for the sealed chat pages so the input
       row stays visible as the mobile URL bar shows/hides (plain 100vh is taller
       than the visible area and pushed the input below the fold). */
    html:has(#page-ai-chat.active),
    html:has(#page-website-factory.active),
    body:has(#page-ai-chat.active),
    body:has(#page-website-factory.active) { height: 100dvh; }
    .main-content:has(#page-ai-chat.active),
    .main-content:has(#page-website-factory.active) { height: calc(100dvh - 60px); }

    /* Edge handles — small tabs on the screen edges, vertically centered. The
       right/preview handle only shows once a build exists. */
    .ai-chat-edge-btn {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 50%; transform: translateY(-50%);
        width: 26px; height: 48px; z-index: 230; padding: 0;
        background: #fff; border: 1px solid #e0e0e0; color: #5f6368;
        cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.16);
    }
    .ai-chat-edge-btn .material-symbols-outlined { font-size: 20px; }
    .ai-chat-edge-left { left: 0; border-left: none; border-radius: 0 12px 12px 0; }
    .ai-chat-edge-right { right: 0; border-right: none; border-radius: 12px 0 0 12px; }
    .ai-chat-edge-preview { display: none; }
    #page-website-factory.has-preview .ai-chat-edge-preview { display: flex; }

    /* Left drawer — session sidebar */
    .ai-chat-sidebar {
        position: fixed; top: 60px; left: 0; bottom: 0;
        width: 82vw; max-width: 320px; max-height: none;
        z-index: 250; transform: translateX(-100%);
        transition: transform .25s ease; box-shadow: 2px 0 18px rgba(0,0,0,.18);
        border-right: 1px solid #e0e0e0; border-bottom: none;
    }
    .ai-chat-sidebar.drawer-open { transform: translateX(0); }
    .ai-chat-sidebar-list { max-height: none; }
    .ai-chat-sidebar-toggle { display: none; }
    /* Drawer mode: the edge handles are the open/close affordance — the
       desktop expand button must not float in the content column (the
       drawer element may still carry the desktop `.collapsed` class). */
    .ai-chat-sidebar.collapsed + .ai-chat-sidebar-expand { display: none; }
    /* Neutralize any desktop `.collapsed` state so the drawer shows its content. */
    .ai-chat-sidebar.collapsed { width: 82vw; }
    .ai-chat-sidebar.collapsed .ai-chat-sidebar-header,
    .ai-chat-sidebar.collapsed .ai-chat-sidebar-list {
        opacity: 1; pointer-events: auto; width: auto; min-width: 0;
    }

    /* Right drawer — preview / version cards (AI Builder). Present as a drawer
       only when a preview exists; display:flex overrides the JS-set inline none. */
    #page-website-factory.has-preview .ai-chat-preview-panel {
        display: flex !important;
        position: fixed; top: 60px; right: 0; bottom: 0; left: auto;
        width: 92vw; max-width: 480px; height: auto !important; max-height: none !important;
        z-index: 250; transform: translateX(100%);
        transition: transform .25s ease; box-shadow: -2px 0 18px rgba(0,0,0,.18);
        border-left: 1px solid #e5e7eb;
        /* Opaque as an overlay drawer (desktop panel is transparent — it blends
           with the page there, but here the dimmed chat would bleed through). */
        background: #fff; padding: 12px;
    }
    #page-website-factory.has-preview .ai-chat-preview-panel.drawer-open { transform: translateX(0); }
    .ai-chat-preview-toggle { display: none; }
    #page-website-factory.has-preview .ai-chat-preview-panel.collapsed + .ai-chat-preview-expand { display: none; }

    /* Backdrop shown behind an open drawer (tap to close). */
    .ai-chat-drawer-backdrop {
        position: fixed; inset: 60px 0 0 0; background: rgba(0,0,0,.4);
        z-index: 240; opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    .ai-chat-drawer-backdrop.show { opacity: 1; pointer-events: auto; }
}

/* ================================================================
   Dialog / auth-form input focus — consistent with the customize
   modal's .uf-cf-input treatment: 1px border shifts to accent blue
   on focus, NO surrounding shadow ring, darker border on hover.
   Scoped to .modal + .auth-form-group descendants so it doesn't
   touch the AI chat input, dispatcher input, or custom .model-dropdown
   buttons (those render their own focus affordances).
   ================================================================ */
/* Website Factory builds its own overlays with inline styles instead of
   using the legacy `.modal` class (that class is a full-screen backdrop
   with position:fixed / top:60px which would conflict). Include the two
   modal IDs in the §17 focus-treatment rules so inputs / selects /
   textareas render with a 1px blue border on focus instead of the
   browser default 2-3px outline. */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal input[type="time"],
.modal input[type="date"],
.modal input[type="url"],
.modal input[type="search"],
.modal select,
.modal textarea,
#websiteSettingsModal input[type="text"],
#websiteSettingsModal input[type="email"],
#websiteSettingsModal input[type="password"],
#websiteSettingsModal input[type="number"],
#websiteSettingsModal input[type="time"],
#websiteSettingsModal input[type="date"],
#websiteSettingsModal input[type="url"],
#websiteSettingsModal input[type="search"],
#websiteSettingsModal select,
#websiteSettingsModal textarea,
#websiteSkillEditor input[type="text"],
#websiteSkillEditor input[type="email"],
#websiteSkillEditor input[type="password"],
#websiteSkillEditor input[type="number"],
#websiteSkillEditor input[type="time"],
#websiteSkillEditor input[type="date"],
#websiteSkillEditor input[type="url"],
#websiteSkillEditor input[type="search"],
#websiteSkillEditor select,
#websiteSkillEditor textarea,
.ws-modal input[type="text"],
.ws-modal input[type="email"],
.ws-modal input[type="password"],
.ws-modal input[type="number"],
.ws-modal input[type="time"],
.ws-modal input[type="date"],
.ws-modal input[type="url"],
.ws-modal input[type="search"],
.ws-modal select,
.ws-modal textarea,
.auth-form-group input,
.auth-form-group select,
.auth-form-group textarea {
    outline: none;
    transition: border-color 0.15s ease;
}
.modal input[type="text"]:focus,
.modal input[type="email"]:focus,
.modal input[type="password"]:focus,
.modal input[type="number"]:focus,
.modal input[type="time"]:focus,
.modal input[type="date"]:focus,
.modal input[type="url"]:focus,
.modal input[type="search"]:focus,
.modal select:focus,
.modal textarea:focus,
#websiteSettingsModal input[type="text"]:focus,
#websiteSettingsModal input[type="email"]:focus,
#websiteSettingsModal input[type="password"]:focus,
#websiteSettingsModal input[type="number"]:focus,
#websiteSettingsModal input[type="time"]:focus,
#websiteSettingsModal input[type="date"]:focus,
#websiteSettingsModal input[type="url"]:focus,
#websiteSettingsModal input[type="search"]:focus,
#websiteSettingsModal select:focus,
#websiteSettingsModal textarea:focus,
#websiteSkillEditor input[type="text"]:focus,
#websiteSkillEditor input[type="email"]:focus,
#websiteSkillEditor input[type="password"]:focus,
#websiteSkillEditor input[type="number"]:focus,
#websiteSkillEditor input[type="time"]:focus,
#websiteSkillEditor input[type="date"]:focus,
#websiteSkillEditor input[type="url"]:focus,
#websiteSkillEditor input[type="search"]:focus,
#websiteSkillEditor select:focus,
#websiteSkillEditor textarea:focus,
.ws-modal input[type="text"]:focus,
.ws-modal input[type="email"]:focus,
.ws-modal input[type="password"]:focus,
.ws-modal input[type="number"]:focus,
.ws-modal input[type="time"]:focus,
.ws-modal input[type="date"]:focus,
.ws-modal input[type="url"]:focus,
.ws-modal input[type="search"]:focus,
.ws-modal select:focus,
.ws-modal textarea:focus,
.auth-form-group input:focus,
.auth-form-group select:focus,
.auth-form-group textarea:focus {
    border-color: #1a73e8 !important;
    box-shadow: none !important;
}
/* New-task (SEO + Advertising) and Schedule modals are custom overlays (not
   .modal), so their fields otherwise show the browser's thick default focus
   outline. Give them the same thin 1px accent-border focus as the rest — no
   ring, no thick outline — for input boxes, dropdowns, and textareas. */
#_userFactoryConfigModal input, #_userFactoryConfigModal select, #_userFactoryConfigModal textarea,
#_userFactoryScheduleModal input, #_userFactoryScheduleModal select, #_userFactoryScheduleModal textarea,
#_adsTaskModal input, #_adsTaskModal select, #_adsTaskModal textarea {
    outline: none; transition: border-color 0.15s ease;
}
#_userFactoryConfigModal input:focus, #_userFactoryConfigModal select:focus, #_userFactoryConfigModal textarea:focus,
#_userFactoryScheduleModal input:focus, #_userFactoryScheduleModal select:focus, #_userFactoryScheduleModal textarea:focus,
#_adsTaskModal input:focus, #_adsTaskModal select:focus, #_adsTaskModal textarea:focus {
    border-color: #1a73e8 !important; box-shadow: none !important;
}
#_userFactoryConfigModal input:hover:not(:focus):not(:disabled), #_userFactoryConfigModal select:hover:not(:focus):not(:disabled), #_userFactoryConfigModal textarea:hover:not(:focus):not(:disabled),
#_userFactoryScheduleModal input:hover:not(:focus):not(:disabled), #_userFactoryScheduleModal select:hover:not(:focus):not(:disabled), #_userFactoryScheduleModal textarea:hover:not(:focus):not(:disabled),
#_adsTaskModal input:hover:not(:focus):not(:disabled), #_adsTaskModal select:hover:not(:focus):not(:disabled), #_adsTaskModal textarea:hover:not(:focus):not(:disabled) {
    border-color: #9ca3af !important;
}
/* Agents-hub + skill modal textareas — match the website-builder skill modal
   textarea (.ws-modal textarea): no resize handle + thin hover-only scrollbar.
   (Customize + .uf-custom-modal also get the thin accent-border focus here.) */
#_adsTaskModal textarea, #_userFactoryConfigModal textarea, #_userFactoryScheduleModal textarea,
#_userFactoryCustomizeModal textarea, .uf-custom-modal textarea {
    resize: none; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
#_adsTaskModal textarea:hover, #_adsTaskModal textarea:focus,
#_userFactoryConfigModal textarea:hover, #_userFactoryConfigModal textarea:focus,
#_userFactoryScheduleModal textarea:hover, #_userFactoryScheduleModal textarea:focus,
#_userFactoryCustomizeModal textarea:hover, #_userFactoryCustomizeModal textarea:focus,
.uf-custom-modal textarea:hover, .uf-custom-modal textarea:focus {
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
#_adsTaskModal textarea::-webkit-scrollbar, #_userFactoryConfigModal textarea::-webkit-scrollbar, #_userFactoryScheduleModal textarea::-webkit-scrollbar, #_userFactoryCustomizeModal textarea::-webkit-scrollbar, .uf-custom-modal textarea::-webkit-scrollbar { width: 6px; height: 6px; }
#_adsTaskModal textarea::-webkit-scrollbar-track, #_userFactoryConfigModal textarea::-webkit-scrollbar-track, #_userFactoryScheduleModal textarea::-webkit-scrollbar-track, #_userFactoryCustomizeModal textarea::-webkit-scrollbar-track, .uf-custom-modal textarea::-webkit-scrollbar-track { background: transparent; }
#_adsTaskModal textarea::-webkit-scrollbar-thumb, #_userFactoryConfigModal textarea::-webkit-scrollbar-thumb, #_userFactoryScheduleModal textarea::-webkit-scrollbar-thumb, #_userFactoryCustomizeModal textarea::-webkit-scrollbar-thumb, .uf-custom-modal textarea::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
#_adsTaskModal textarea:hover::-webkit-scrollbar-thumb, #_adsTaskModal textarea:focus::-webkit-scrollbar-thumb, #_userFactoryConfigModal textarea:hover::-webkit-scrollbar-thumb, #_userFactoryConfigModal textarea:focus::-webkit-scrollbar-thumb, #_userFactoryScheduleModal textarea:hover::-webkit-scrollbar-thumb, #_userFactoryScheduleModal textarea:focus::-webkit-scrollbar-thumb, #_userFactoryCustomizeModal textarea:hover::-webkit-scrollbar-thumb, #_userFactoryCustomizeModal textarea:focus::-webkit-scrollbar-thumb, .uf-custom-modal textarea:hover::-webkit-scrollbar-thumb, .uf-custom-modal textarea:focus::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
#_userFactoryCustomizeModal textarea, .uf-custom-modal textarea { outline: none; transition: border-color 0.15s ease; }
#_userFactoryCustomizeModal textarea:focus, .uf-custom-modal textarea:focus { border-color: #1a73e8 !important; box-shadow: none !important; }
/* Bulk-add domains modal textarea — same no-handle + thin hover scrollbar. */
#bulkAddDomainModal textarea { resize: none; scrollbar-width: thin; scrollbar-color: transparent transparent; }
#bulkAddDomainModal textarea:hover, #bulkAddDomainModal textarea:focus { scrollbar-color: rgba(0,0,0,0.2) transparent; }
#bulkAddDomainModal textarea::-webkit-scrollbar { width: 6px; height: 6px; }
#bulkAddDomainModal textarea::-webkit-scrollbar-track { background: transparent; }
#bulkAddDomainModal textarea::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
#bulkAddDomainModal textarea:hover::-webkit-scrollbar-thumb, #bulkAddDomainModal textarea:focus::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
/* Bulk-add domains preview table (Domain / Site name / Status) — thin scrollbar. */
#bulkAddPreview { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent; }
#bulkAddPreview::-webkit-scrollbar { width: 8px; height: 8px; }
#bulkAddPreview::-webkit-scrollbar-track { background: transparent; }
#bulkAddPreview::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 8px; }
#bulkAddPreview::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }

/* ================================================================
   .uf-modal-textarea — the canonical modal textarea (CLAUDE.md §17).
   Reusable so new modal textareas get the standard look WITHOUT adding
   per-modal id selectors. Mirrors the website-builder skill modal
   (#skEditBody): #e0e0e0 1px border, 12px radius, 10px/14px padding,
   monospace body + sans-serif placeholder, NO resize handle, thin
   hover-only scrollbar, and a thin 1px accent-border focus (no ring,
   no thick browser outline). Apply: <textarea class="uf-modal-textarea">.
   ================================================================ */
.uf-modal-textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #e0e0e0; border-radius: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
    resize: none; outline: none;
    transition: border-color 0.15s ease;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.uf-modal-textarea:hover:not(:focus) { border-color: #9ca3af; }
.uf-modal-textarea:focus { border-color: #1a73e8; box-shadow: none; }
.uf-modal-textarea:hover, .uf-modal-textarea:focus { scrollbar-color: rgba(0,0,0,0.2) transparent; }
.uf-modal-textarea::placeholder { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.uf-modal-textarea::-webkit-scrollbar { width: 6px; height: 6px; }
.uf-modal-textarea::-webkit-scrollbar-track { background: transparent; }
.uf-modal-textarea::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.uf-modal-textarea:hover::-webkit-scrollbar-thumb, .uf-modal-textarea:focus::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.modal input[type="text"]:hover:not(:focus):not(:disabled),
.modal input[type="email"]:hover:not(:focus):not(:disabled),
.modal input[type="password"]:hover:not(:focus):not(:disabled),
.modal input[type="number"]:hover:not(:focus):not(:disabled),
.modal input[type="time"]:hover:not(:focus):not(:disabled),
.modal input[type="date"]:hover:not(:focus):not(:disabled),
.modal input[type="url"]:hover:not(:focus):not(:disabled),
.modal input[type="search"]:hover:not(:focus):not(:disabled),
.modal select:hover:not(:focus):not(:disabled),
.modal textarea:hover:not(:focus):not(:disabled),
#websiteSettingsModal input[type="text"]:hover:not(:focus):not(:disabled),
#websiteSettingsModal input[type="email"]:hover:not(:focus):not(:disabled),
#websiteSettingsModal input[type="url"]:hover:not(:focus):not(:disabled),
#websiteSettingsModal select:hover:not(:focus):not(:disabled),
#websiteSettingsModal textarea:hover:not(:focus):not(:disabled),
#websiteSkillEditor input[type="text"]:hover:not(:focus):not(:disabled),
#websiteSkillEditor textarea:hover:not(:focus):not(:disabled),
.ws-modal input[type="text"]:hover:not(:focus):not(:disabled),
.ws-modal input[type="email"]:hover:not(:focus):not(:disabled),
.ws-modal input[type="password"]:hover:not(:focus):not(:disabled),
.ws-modal input[type="number"]:hover:not(:focus):not(:disabled),
.ws-modal input[type="url"]:hover:not(:focus):not(:disabled),
.ws-modal select:hover:not(:focus):not(:disabled),
.ws-modal textarea:hover:not(:focus):not(:disabled),
.auth-form-group input:hover:not(:focus):not(:disabled),
.auth-form-group select:hover:not(:focus):not(:disabled),
.auth-form-group textarea:hover:not(:focus):not(:disabled) {
    border-color: #9ca3af !important;
}

/* ================================================================
   .uf-custom-modal-body — modal body scrollbar. Matches the
   hover-only thin scrollbar pattern from the user-factory page's
   task board & report body: 6px wide, transparent track, thumb
   only visible on hover. Keeps the modal chrome clean.
   ================================================================ */
.uf-custom-modal-body,
.ws-modal-body { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.uf-custom-modal-body:hover,
.ws-modal-body:hover { scrollbar-color: rgba(0,0,0,0.2) transparent; }
.uf-custom-modal-body::-webkit-scrollbar,
.ws-modal-body::-webkit-scrollbar { width: 6px; height: 6px; }
.uf-custom-modal-body::-webkit-scrollbar-track,
.ws-modal-body::-webkit-scrollbar-track { background: transparent; }
.uf-custom-modal-body::-webkit-scrollbar-thumb,
.ws-modal-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.uf-custom-modal-body:hover::-webkit-scrollbar-thumb,
.ws-modal-body:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }

/* ================================================================
   .uf-detail-* — Per-run detail view (user-factory-detail.js).
   Additive surface: back button + run header, the pipeline stepper
   (reuses .uf-progress-* from user-factory.js), per-agent report
   accordions, and the run's actions table. Kept here (not lazily
   injected) so the view styles correctly even before the factory
   page's lazy <style> runs.
   ================================================================ */
.uf-detail-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.uf-detail-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border: 1px solid #d1d5db; border-radius: 9999px; background: #fff; color: #374151;
    font-size: 13px; font-weight: 600; cursor: pointer; }
.uf-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 14px; color: #374151; }
.uf-detail-run-no { font-weight: 700; }
.uf-detail-sep { color: #d1d5db; }
.uf-detail-config { color: #6b7280; }
.uf-detail-domain { color: #6b7280; }
.uf-detail-trigger { color: #9ca3af; font-size: 13px; }
.uf-detail-started { color: #9ca3af; font-size: 13px; }
.uf-detail-status-badge { display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600;
    text-transform: capitalize; }
.uf-detail-status-dot { width: 7px; height: 7px; border-radius: 50%;
    animation: pulse 1.4s ease-in-out infinite; }
.uf-detail-error { flex-basis: 100%; font-size: 12px; color: #c13515; margin-top: 4px; }

.uf-detail-section { margin: 0 0 24px; }
.uf-detail-section-title { font-size: 13px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px; }

.uf-detail-reports { display: flex; flex-direction: column; gap: 8px; }
.uf-detail-report { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; }
.uf-detail-report-summary { list-style: none; cursor: pointer; padding: 12px 16px;
    font-size: 14px; font-weight: 600; color: #374151; display: flex; align-items: center;
    justify-content: space-between; user-select: none; }
.uf-detail-report-summary::-webkit-details-marker { display: none; }
.uf-detail-report-summary::after { content: 'expand_more'; font-family: 'Material Symbols Outlined';
    font-size: 20px; color: #9ca3af; transition: transform 0.15s ease; }
.uf-detail-report[open] .uf-detail-report-summary::after { transform: rotate(180deg); }
.uf-detail-report-pane { border-top: 1px solid #f3f4f6; padding: 14px 16px;
    max-height: 480px; overflow-y: auto; }
.uf-detail-report-body { font-size: 14px; line-height: 1.7; color: #374151; }
.uf-detail-report-loading { padding: 28px; text-align: center; color: #9ca3af; }

.uf-detail-empty { color: #9ca3af; padding: 24px; text-align: center;
    border: 1px dashed #e5e7eb; border-radius: 12px; }
.uf-detail-empty--inline { padding: 16px; }

.uf-detail-actions-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 10px; }
.uf-detail-actions-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.uf-detail-actions-table th { text-align: left; padding: 8px 12px; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280;
    border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.uf-detail-act-row { border-bottom: 1px solid #f3f4f6; }
.uf-detail-act-row td { padding: 10px 12px; vertical-align: top; }
.uf-detail-act-when { color: #6b7280; white-space: nowrap; }
.uf-detail-act-agent-name { font-weight: 600; color: #374151; }
.uf-detail-act-type { font-size: 11px; color: #6b7280; }
.uf-detail-act-target { color: #1a73e8; word-break: break-all; }
.uf-detail-act-status { white-space: nowrap; }
.uf-detail-act-actions { white-space: nowrap; text-align: right; }
.uf-detail-badge { display: inline-block; padding: 2px 8px; border-radius: 9999px;
    font-size: 11px; font-weight: 600; }
.uf-detail-act-btn { padding: 4px 12px; border-radius: 9999px; font-size: 11px;
    font-weight: 600; cursor: pointer; margin-left: 6px; border: 1px solid #d1d5db; background: #fff; color: #374151; }
.uf-detail-act-btn.uf-btn--primary { border: none; background: #1a73e8; color: #fff; }
.uf-detail-act-btn--danger { border-color: #fecaca; color: #b91c1c; }

/* Section-level Translate toggle — same outline-pill look as .uf-detail-back so
   it reads as a sibling of the detail-view buttons (it previously fell back to a
   bare browser-default button because .uf-btn--outline has no CSS). */
.uf-detail-translate-btn { display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 9999px;
    background: #fff; color: #374151; font-size: 13px; font-weight: 600; cursor: pointer; }
.uf-detail-translate-btn:not(:disabled):hover { border-color: #9ca3af; background: #f9fafb; }
.uf-detail-translate-btn:disabled { opacity: 0.65; cursor: wait; }

/* ================================================================
   .ws-file-list — Website Generator list containers (Knowledge,
   Image library, References URLs/files, Skills). Caps height so
   long lists scroll independently rather than pushing the modal
   beyond the viewport. Same hover-only thin scrollbar as
   .uf-custom-modal-body so the modal chrome stays clean.
   ================================================================ */
.ws-file-list {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ws-file-list:hover { scrollbar-color: rgba(0,0,0,0.2) transparent; }
.ws-file-list::-webkit-scrollbar { width: 6px; }
.ws-file-list::-webkit-scrollbar-track { background: transparent; }
.ws-file-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.ws-file-list:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }

/* ================================================================
   .ws-modal button hover — subtle darkening on any clickable
   button inside a Website Generator modal (Skills, Instructions,
   References, Knowledge base, Image library, AI image settings).
   Universal rule so authors don't have to remember hover on every
   inline-styled button. Excludes disabled buttons.
   ================================================================ */
.ws-modal button:not(:disabled) {
    transition: filter 0.15s ease, background-color 0.15s ease;
}
.ws-modal button:not(:disabled):hover {
    filter: brightness(0.95);
}

/* ================================================================
   .ws-modal textarea scrollbar — hover-only thin scrollbar
   matching .uf-custom-modal-body / .ws-file-list. Hides the
   default grey track for a cleaner look; thumb fades in on hover.
   ================================================================ */
.ws-modal textarea {
    resize: none;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    /* Browsers default <textarea> to a monospace font. Force the
       page's sans-serif so textareas match nearby inputs (Save-as-
       template "About this template" was rendering in monospace
       because of this default). */
    font-family: inherit;
}
.ws-modal textarea:hover,
.ws-modal textarea:focus {
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.ws-modal textarea::-webkit-scrollbar { width: 6px; height: 6px; }
.ws-modal textarea::-webkit-scrollbar-track { background: transparent; }
.ws-modal textarea::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.ws-modal textarea:hover::-webkit-scrollbar-thumb,
.ws-modal textarea:focus::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }

/* Placeholder text inside .ws-modal textareas always renders in the
   system UI font so hints match the rest of the modal chrome — even
   when the textarea's typed content uses a monospace font (skill body,
   code-like rules). Without this, the monospace cascades into the
   placeholder and it looks inconsistent with field labels / tip lines. */
.ws-modal textarea::placeholder,
#_adsTaskModal textarea::placeholder, #_userFactoryConfigModal textarea::placeholder, #_userFactoryScheduleModal textarea::placeholder, #_userFactoryCustomizeModal textarea::placeholder, .uf-custom-modal textarea::placeholder, #bulkAddDomainModal textarea::placeholder {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.ws-modal textarea::-webkit-input-placeholder {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Template description textareas use the system sans font for typed
   content too — they're prose, not code. Browser default for textarea
   is monospace, which would look mismatched against the sans-serif
   Name / Tags inputs sitting right above them. Skills body / instruction
   body keep their explicit inline monospace; only the template
   description fields pick up this rule. */
#tplSaveDesc,
#tplEditDesc,
#tplPageEditDesc {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ================================================================
   .uf-switch — shared toggle-switch component used across the
   dashboard (user factory customize modal, sync schedule modal, etc.)
   36x20 px pill; blue #1a73e8 accent when checked.
   Defined here (not in user-factory.js's lazy CSS inject) so modals
   outside the User Factory page can use it without requiring that
   page to load first.
   ================================================================ */
.uf-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.uf-switch input { opacity: 0; width: 0; height: 0; }
.uf-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #d1d5db; border-radius: 9999px; transition: background 0.15s ease; }
.uf-switch-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.uf-switch input:checked + .uf-switch-slider { background: #1a73e8; }
.uf-switch input:checked + .uf-switch-slider::before { transform: translateX(16px); }
.uf-switch input:focus-visible + .uf-switch-slider { outline: 2px solid rgba(26,115,232,0.4); outline-offset: 2px; }
.uf-switch input:disabled + .uf-switch-slider { opacity: 0.5; cursor: not-allowed; }
/* Smaller variant — e.g. the agent toggles in the New-task modals (compact
   multi-select that reads as on/off per agent). */
.uf-switch--sm { width: 30px; height: 16px; }
.uf-switch--sm .uf-switch-slider::before { width: 12px; height: 12px; }
.uf-switch--sm input:checked + .uf-switch-slider::before { transform: translateX(14px); }

/* ── Website Generator plan card — neutralise global dark <pre> ────
   The global `.ai-message .message-content pre` rule (see above) paints
   code blocks with a dark `#1e1e1e` VS-Code look. That's intentional
   for the AI Assistant code-snippet use case but would look out of
   place inside the plan card (or if raw plan JSON leaked into the
   assistant bubble above). Neutralise it with transparent + no border
   so the plan card's own `#f8fafc` background shows through — the
   card itself provides the visual "set off", no nested box needed. */
.website-plan-card pre,
.website-plan-card details pre {
    background: transparent !important;
    color: #374151 !important;
    border: none !important;
    padding: 0 !important;
}
.website-plan-card details[open] > summary > .material-symbols-outlined {
    transform: rotate(90deg);
}
.website-plan-card details > summary { outline: none; }
.website-plan-card details > summary::-webkit-details-marker { display: none; }

/* ── Phase 4: template card grid + kebab + detail page ─────────── */

/* Card itself — used in BOTH the + menu modal and the dedicated
   Templates page. Click anywhere on the card body navigates to the
   detail page; the kebab button stops propagation. */
.tpl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* No background, no border — matches the version-card treatment.
       Card-ness comes purely from a soft drop shadow at rest, lifted
       on hover. */
    background: transparent;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.tpl-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.tpl-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
}
.tpl-card-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tpl-card-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 12px;
    background: linear-gradient(110deg, #f3f4f6 30%,
                #e5e7eb 50%, #f3f4f6 70%);
    background-size: 200% 100%;
    animation: tpl-shimmer 1.4s ease-in-out infinite;
}
@keyframes tpl-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.tpl-card-body {
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    /* The kebab is absolute-positioned top-right over the thumbnail (matching
       the My Builds card), so the body no longer reserves right-edge room for
       it — the old `padding-right: 48px` was a leftover from its previous
       bottom-right position that left a dead gap in the card body. */
}
.tpl-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpl-card-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 6px;
    align-items: center;
}
.tpl-card-meta > span:empty { display: none; }
.tpl-card-desc {
    font-size: 12px;
    color: #374151;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 33px;
}
.tpl-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.tpl-card-tag {
    background: #eef2ff;
    color: #3730a3;
    border-radius: 9999px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
}
/* Template card: type/style shown as grey badge pills matching the template
   detail page (.td-badge look), replacing the old "industry • style" bullet
   text. Bare .td-badge is only styled inside .td-badges, so restyle here. */
.tpl-card-badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    margin-bottom: 2px;
    /* Single row; scroll horizontally to reach more chips (same as the detail
       page .td-badges), instead of wrapping to a second row. Scrollbar hidden. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tpl-card-badges::-webkit-scrollbar { display: none; }
.tpl-card-badges > * { flex-shrink: 0; }
.tpl-card-badges:empty { display: none; }
.tpl-card-badges .td-badge {
    background: #f3f4f6;
    color: #374151;
    border-radius: 9999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
/* "Start new website" CTA pinned to the bottom of the card body. */
.tpl-card-start {
    margin-top: auto;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #1a73e8;
    background: #1a73e8;
    color: #fff;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
}
.tpl-card-start:hover { filter: brightness(0.95); }

/* Kebab button — top-right of card, matching the My Builds card kebab
   (.ws-version-tpl > .ws-version-kebab): 28px, neutral gray hover. */
.tpl-card-kebab {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0;
    transition: background 150ms ease, color 150ms ease;
}
.tpl-card-kebab:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #374151;
}

/* Floating kebab menu — appended to body, absolutely positioned. */
.tpl-kebab-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    padding: 4px;
    min-width: 220px;
    z-index: 5500;
    display: flex;
    flex-direction: column;
}
.tpl-kebab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #374151;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    width: 100%;
}
.tpl-kebab-item:hover { background: #f3f4f6; }
.tpl-kebab-item.danger { color: #c13515; }
.tpl-kebab-item.danger:hover { background: #fee2e2; }
.tpl-kebab-item:disabled { opacity: 0.5; cursor: not-allowed; }
.tpl-kebab-item:disabled:hover { background: none; }
.tpl-kebab-item .material-symbols-outlined { font-size: 18px; }

/* Kebab nested "Download" submenu — parent toggles open, children indent. */
.ws-kebab-group { display: flex; flex-direction: column; }
.ws-kebab-parent .ws-kebab-caret {
    margin-left: auto;
    font-size: 18px !important;
    transition: transform 0.15s ease;
}
.ws-kebab-group.expanded .ws-kebab-parent .ws-kebab-caret { transform: rotate(180deg); }
.ws-kebab-subitems { display: none; }
.ws-kebab-group.expanded .ws-kebab-subitems { display: flex; flex-direction: column; }
.ws-kebab-subitem { padding-left: 34px; font-size: 13px; }

/* Grids — different column counts for modal vs page. */
.tpl-grid-modal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.tpl-grid-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 1024px) {
    .tpl-grid-page { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tpl-grid-page { grid-template-columns: 1fr; }
    .tpl-grid-modal { grid-template-columns: 1fr; }
    /* Larger sidebar text on mobile (the slide-in drawer) — top-level nav items,
       submenu items, and section headers. Desktop keeps its em-based sizes. */
    .nav-text { font-size: 15px !important; }
    .nav-subitem { font-size: 14px !important; }
    .nav-section-title { font-size: 12px !important; }
}

/* Collect-ads form inputs (Advertising tasks page) are inline-styled page inputs
   (not in a .modal), so they miss the app's dialog-input focus treatment. Give
   them the same 1px blue focus border (no ring / no browser outline) as every
   other input. Applies to both breakpoints. !important beats the inline border. */
#adsCollectForm input:focus {
    border-color: #1a73e8 !important;
    outline: none !important;
    box-shadow: none !important;
}
#adsCollectForm input:hover:not(:focus) { border-color: #9ca3af !important; }
/* The Collect (go) button sits in the same row as the inputs — keep it the same
   height. Without this the global .uf-btn min-height (42px desktop / 46px mobile)
   makes it noticeably taller than the ~33px inputs. */
#adsCollectForm .uf-btn { min-height: 0 !important; border: 1px solid transparent !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Desktop readability parity (min-width: 641px)
   The mobile pass (@media max-width:640px, above/below) enlarged text across
   the app. This block brings the SAME readability increases to desktop —
   text/badges/descriptions only. It deliberately does NOT copy the mobile
   touch-target sizing (44–54px min-height buttons, oversized fields), which
   is correct for phones but clunky with a mouse. Base rules + the ≤640px
   overrides are untouched; this only raises the >640px (desktop) sizes.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 641px) {
    /* Chat — reading surface (AI Assistant + Coordinator + Builder) */
    .ai-chat-page-messages .ai-message .message-content { font-size: 15px !important; }
    .ai-chat-page-messages .user-message .message-content { font-size: 15px !important; }

    /* Sessions list (shared by AI Assistant + AI Builder sidebars) */
    .ai-chat-session-item .session-title { font-size: 14px !important; }
    .ai-chat-session-item .session-date { font-size: 12px !important; }
    /* "New app" / "New chat" button — bigger than the compact base */
    .ai-chat-sidebar-header .ai-chat-new-btn { padding: 10px 14px !important; font-size: 14px !important; }

    /* Chat message + card widths — match the mobile full-width treatment:
       AI response + plan/question cards fill the column, the sent bubble hugs
       its content up to 95% (was AI 85%, cards 85%, bubble uncapped). */
    .ai-chat-page-messages .user-message { max-width: 95% !important; }
    .ai-chat-page-messages .user-message .message-content { max-width: 100% !important; box-sizing: border-box; min-width: 0; }
    .ai-chat-page-messages .ai-message { max-width: 100% !important; }
    .ai-chat-page-messages .website-plan-card,
    .website-plan-card,
    .ai-chat-page-messages .ws-question-card,
    .ws-question-card { max-width: 100% !important; }

    /* Template / Game / Showcase detail pages */
    .td-description { font-size: 15px !important; }
    .td-section h2 { font-size: 13px !important; }
    .td-prompt-sub { font-size: 14px !important; }
    .td-prompt-block { font-size: 14px !important; }
    .td-howto-title { font-size: 15px !important; }
    .td-howto-body { font-size: 14px !important; }
    .td-badges .td-badge { font-size: 13px !important; }
    .td-tags .tpl-card-tag,
    .td-badges .tpl-card-tag { font-size: 13px !important; }

    /* Card grids (Templates / Showcase / My Games / My Builds) */
    .tpl-card-name { font-size: 16px !important; }
    .tpl-card-desc { font-size: 13px !important; }
    .tpl-card-badges .td-badge { font-size: 13px !important; }
    .tpl-card-badges .tpl-card-tag,
    .tpl-card-tags .tpl-card-tag { font-size: 13px !important; }

    /* Sidebar nav — a touch larger than the em-based defaults */
    .nav-text { font-size: 15px !important; }
    .nav-subitem { font-size: 14px !important; }
    .nav-section-title { font-size: 12px !important; }

    /* My Builds / version cards */
    .ws-vt-title { font-size: 15px !important; }
    .ws-vt-meta { font-size: 13px !important; }
    .ws-vt-time { font-size: 12px !important; }

    /* My Games cards */
    .game-card-title { font-size: 16px !important; }
    .game-card-desc { font-size: 13px !important; }

    /* Task / settings forms (SEO + Advertising task pages, agent settings) */
    .ta-settings .card h3 { font-size: 17px !important; }
    .ta-settings .form-row label { font-size: 14px !important; }

    /* SEO / Advertising task pages + Agents hub — section titles, tabs, hints */
    #page-workload-tasks h3[style*="font-size:14px"],
    #page-user-factory h3[style*="font-size:14px"],
    .hub-section-title { font-size: 16px !important; }
    #page-user-factory [data-tab] { font-size: 15px !important; }
    .agents-hub .empty { font-size: 15px !important; }
    #page-agents .hub-suite-tab { font-size: 15px !important; }
    #page-learnings .filter-input,
    #page-learnings .filter-label { font-size: 14px !important; }

    /* Page-intro descriptions that are small inline text (Deploy / AI media /
       Showcase / My Websites / Published). */
    #page-settings-deploy .page-description { font-size: 15px !important; }
    #page-settings-ai-media p[style*="font-size:12px"] { font-size: 14px !important; }
    #page-showcase div[style*="font-size:13px"][style*="line-height:1.5"],
    #page-my-websites div[style*="font-size:13px"][style*="line-height:1.5"],
    #page-published-sites div[style*="font-size:13px"][style*="line-height:1.5"] { font-size: 14px !important; }

    /* Published-builds card rows */
    .ps-pub-row [style*="font-size:14px"] { font-size: 15px !important; }
    .ps-pub-row [style*="font-size:12px"] { font-size: 13px !important; }
    .ps-pub-row [style*="font-size:11px"] { font-size: 13px !important; }

    /* ── Bigger buttons on desktop ────────────────────────────────────────
       Larger than the compact base, but at mouse scale (40–48px) — not the
       44–54px mobile touch targets. Mirrors the mobile button pass. */
    /* Standard page / settings buttons */
    .ta-settings .btn,
    .ta-settings .btn-secondary,
    .page-header .btn, .page-header-actions .btn, .page-header button,
    #page-settings-google .btn, #page-settings-ai-media .btn, #page-settings-deploy .btn,
    #page-settings-deploy button, #page-settings-ai-media button { min-height: 42px !important; }
    /* Card action buttons (Templates / version cards) */
    .tpl-card-actions a.btn,
    .ws-vt-cta { min-height: 40px !important; }
    /* Published-builds card buttons — smaller than the others (they're a dense
       Open/Update/Unpublish/Logs/Rollback cluster). */
    .ps-pub-actions > button { min-height: 32px !important; }
    .tpl-card-start { min-height: 44px !important; }
    /* Onboarding CTA */
    .ud-onboard-cta { min-height: 48px !important; font-size: 15px !important; padding: 12px 30px !important; }
    /* Chat send / attach (base 36px) */
    .ai-chat-attach-btn,
    .ai-chat-page-send { width: 40px !important; height: 40px !important; }
    .ai-chat-page-send .material-symbols-outlined { font-size: 22px !important; }
    /* Modal footer action buttons */
    .modal[style*="align-items: center"] div[style*="justify-content:flex-end"] > button,
    .ws-modal-footer button,
    .uf-custom-modal-footer button { min-height: 44px !important; }
    /* Inputs that sit next to these buttons (visual balance) */
    .ta-settings .form-row input,
    .ta-settings .form-row select,
    #userDomainsSearch { min-height: 42px !important; }

    /* ── Parity batch — remaining mobile size bumps mapped to desktop ────────
       Each mirrors a @media (max-width:640px) rule, sized for desktop. */
    /* Dashboard / analytics stat cards */
    .stat-card .number { font-size: 24px !important; }
    .stat-card .label { font-size: 13px !important; }
    /* Card badges — type / published / deployed / latest / verified */
    .mw-badge, .game-badge, .ws-version-badge, .ws-verify-badge { font-size: 13px !important; }
    .ws-verify-badge .material-symbols-outlined { font-size: 14px !important; }
    /* Game + Showcase detail badges (share .td-badges with template detail) */
    .td-badges .game-badge { font-size: 13px !important; }
    /* Domains table */
    #userDomainsContent table { font-size: 14px !important; }
    #userDomainsContent table button { min-height: 36px !important; font-size: 13px !important; }
    /* Showcase card views / author row */
    #page-showcase .tpl-card-meta[style*="font-size:11px"] { font-size: 12px !important; }
    #page-showcase .tpl-card-meta[style*="font-size:11px"] .material-symbols-outlined { font-size: 14px !important; }
    /* Settings pages (Google / AI media / Deploy render via JS, no .ta-settings) */
    #page-settings-google h3, #page-settings-ai-media h3, #page-settings-deploy h3,
    #page-settings-google h4, #page-settings-ai-media h4, #page-settings-deploy h4 { font-size: 16px !important; }
    #page-settings-google label, #page-settings-ai-media label, #page-settings-deploy label { font-size: 14px !important; }
    #page-settings-google input:not([type="checkbox"]):not([type="radio"]), #page-settings-google select, #page-settings-google textarea,
    #page-settings-ai-media input:not([type="checkbox"]):not([type="radio"]), #page-settings-ai-media select, #page-settings-ai-media textarea, #page-settings-ai-media .ai-key-code,
    #page-settings-deploy input:not([type="checkbox"]):not([type="radio"]), #page-settings-deploy select, #page-settings-deploy textarea { min-height: 42px !important; font-size: 14px !important; }
    /* Page-intro descriptions across hub / workload / settings pages */
    #page-workload-tasks .page-description, #page-agents .page-description, #page-knowledge .page-description,
    #page-skills .page-description, #page-learnings .page-description, #page-schedules .page-description,
    #page-notifications .page-description,
    #page-settings-deploy p[data-i18n="settings.deploy_targets_hint"],
    #page-settings-deploy [data-i18n="settings.deploy_target_empty_body"] { font-size: 14px !important; }
    /* Chat +menu items + input field */
    .ai-chat-plus-item { font-size: 14px !important; }
    .ai-chat-plus-item .material-symbols-outlined { font-size: 22px !important; }
    .ai-chat-page-field { font-size: 15px !important; }
    /* Buttons — primary / factory / card actions / templates filter */
    .btn-primary, .uf-btn { min-height: 42px !important; }
    .game-card-actions .btn, .tpl-card-actions button, .tpl-card-actions a.btn { min-height: 40px !important; }
    /* All filter-bar controls (Type/Category/Style selects AND the search box)
       share one size on desktop — the earlier rule bumped only the search box,
       leaving the selects at their 36px inline height. */
    .templates-filter-bar .tpl-filter-control { height: 42px !important; font-size: 14px !important; }
    .tpl-filter-btn { height: 42px !important; font-size: 14px !important; }
    /* Factory / Schedules / Agents hub — section titles, tabs, chips, hints */
    .agents-hub .hub-section-title { font-size: 16px !important; }
    #page-workload-tasks [data-tab] { font-size: 15px !important; }
    #page-schedules .uf-filter-chip { font-size: 13px !important; padding: 7px 14px !important; }
    #page-schedules .uf-config-action { width: 36px !important; height: 36px !important; font-size: 16px !important; }
    .uf-configs-empty { font-size: 14px !important; }
    /* Section-heading icons */
    .ta-settings .card h3 .material-symbols-outlined { font-size: 22px !important; }
    .ud-onboard-cta .material-symbols-outlined { font-size: 18px !important; }
    /* Modal readability — inline text, footer buttons, inputs (desktop dialogs;
       NOT the mobile bottom-sheet layout, which stays ≤640px only) */
    .ws-modal [style*="font-size:12px"], .modal [style*="font-size:12px"] { font-size: 13px !important; }
    .ws-modal [style*="font-size:13px"], .modal [style*="font-size:13px"] { font-size: 14px !important; }
    .ws-modal div[style*="justify-content:flex-end"] > button,
    .ws-modal div[style*="justify-content:flex-end"] > .btn,
    .modal div[style*="justify-content:flex-end"] > button,
    .modal-overlay > .modal > .modal-footer > button,
    .modal-overlay > .modal > .modal-footer > .btn,
    .modal-overlay > .modal > .modal-footer > a.btn { min-height: 42px !important; }
    .ws-modal input:not([type="checkbox"]):not([type="radio"]), .ws-modal select, .ws-modal textarea { min-height: 42px !important; }
    /* Companion icons for the tabs/labels/actions bumped above */
    #page-agents .hub-suite-tab .material-symbols-outlined,
    #page-schedules .uf-config-action .material-symbols-outlined,
    .tpl-filter-btn .material-symbols-outlined { font-size: 18px !important; }
    #page-learnings .filter-label .material-symbols-outlined { font-size: 20px !important; }
    .ai-chat-attach-btn .material-symbols-outlined { font-size: 22px !important; }
    /* Save-as-template dialog (id-based overlay, not caught by .ws-modal/.modal) */
    #websiteSaveTemplateDialog [style*="font-size:12px"] { font-size: 13px !important; }
    #websiteSaveTemplateDialog [style*="font-size:13px"] { font-size: 14px !important; }
    #websiteSaveTemplateDialog div[style*="justify-content:flex-end"] > button { min-height: 42px !important; }
    #websiteSaveTemplateDialog input:not([type="checkbox"]):not([type="radio"]),
    #websiteSaveTemplateDialog select,
    #websiteSaveTemplateDialog textarea { min-height: 42px !important; }
    /* NOTE: `body { font-size:16px }` is intentionally not mirrored — desktop
       already renders at the browser-default 16px base (the mobile rule only
       prevented phones from shrinking it). */

    /* Detail-page Preview/Code tabs + Max button match the AI Builder version
       overlay (.ws-vo-tabs / .ws-vo-max) on desktop too — grey segmented pill +
       text-only labels + round grey Max, instead of the underline tab bar.
       (Overrides the .td-tabs-group `display:contents` default.) */
    .td-tab-bar { border-bottom: 0 !important; }
    .td-tabs-group {
        display: inline-flex !important;
        gap: 4px !important;
        background: #f3f4f6 !important;
        border-radius: 9999px !important;
        padding: 3px !important;
    }
    .td-tab {
        border-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 9999px !important;
        padding: 6px 14px !important;
        font-weight: 600 !important;
        background: transparent !important;
    }
    .td-tabs-group .td-tab .material-symbols-outlined { display: none !important; }
    .td-tab.active {
        background: #fff !important;
        color: #1a73e8 !important;
        border-bottom-color: transparent !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }
    .td-tab-max {
        background: #f2f2f2 !important;
        color: #374151 !important;
    }
    .td-tab-max:hover { background: #e5e5e5 !important; }

    /* AI Builder preview drawer — tighter version cards (like mobile): the drawer
       body (18px 20px) + card body (12px 14px) stacked a lot of horizontal inset,
       squeezing the content. Trim both so the card content gets more width.
       Scoped to the preview drawer so My Builds / in-chat cards are unaffected. */
    #page-website-factory .ai-chat-preview-body { padding: 10px 10px !important; }
    #page-website-factory .ai-chat-preview-body .ws-vt-body { padding: 10px 10px 10px !important; }

    /* Detail pages: type/category badges + tags share one strip above the
       description. WRAP instead of a hidden-scrollbar single line — the old
       nowrap+hidden-scroll design silently clipped every badge past the
       container edge (a 7-tag template showed 5 badges with no hint more
       existed). Wrapping can never hide content. */
    .td-badges {
        flex-wrap: wrap !important;
        overflow: visible;
    }

    /* ── Workload task modals (New-task / Schedule / Ads / Skill / Coordinator
       filter) — id/class overlays the generic .modal/.ws-modal rules don't reach.
       Bump inline text + controls at desktop (mouse) scale, not the 48–54px
       mobile touch targets. The mobile bottom-sheet layout (.uf-cfg-agent-toggle
       row-reverse, full-width buttons) stays ≤640px only. */
    #_userFactoryConfigModal [style*="font-size:12px"], #_userFactoryScheduleModal [style*="font-size:12px"],
    #_adsTaskModal [style*="font-size:12px"], .uf-cf-sheet [style*="font-size:12px"] { font-size: 13px !important; }
    #_userFactoryConfigModal [style*="font-size:13px"], #_userFactoryScheduleModal [style*="font-size:13px"],
    #_adsTaskModal [style*="font-size:13px"], .uf-cf-sheet [style*="font-size:13px"] { font-size: 14px !important; }
    #_userFactoryConfigModal [style*="font-size:14px"], #_userFactoryScheduleModal [style*="font-size:14px"],
    #_adsTaskModal [style*="font-size:14px"], .uf-cf-sheet [style*="font-size:14px"] { font-size: 15px !important; }
    #_userFactoryConfigModal [style*="font-size:16px"], #_userFactoryScheduleModal [style*="font-size:16px"],
    #_adsTaskModal [style*="font-size:16px"], .uf-cf-sheet [style*="font-size:16px"] { font-size: 17px !important; }
    #_userFactoryConfigModal input:not([type="checkbox"]):not([type="radio"]), #_userFactoryConfigModal select, #_userFactoryConfigModal textarea,
    #_userFactoryScheduleModal input:not([type="checkbox"]):not([type="radio"]), #_userFactoryScheduleModal select, #_userFactoryScheduleModal textarea,
    #_adsTaskModal input:not([type="checkbox"]):not([type="radio"]), #_adsTaskModal select, #_adsTaskModal textarea,
    #_hubSkillModal input:not([type="checkbox"]):not([type="radio"]), #_hubSkillModal select, #_hubSkillModal textarea,
    .uf-custom-modal input:not([type="checkbox"]):not([type="radio"]), .uf-custom-modal select, .uf-custom-modal textarea,
    .uf-cf-sheet input:not([type="checkbox"]):not([type="radio"]), .uf-cf-sheet select, .uf-cf-sheet textarea { min-height: 42px !important; font-size: 14px !important; }
    #_userFactoryConfigModal div[style*="justify-content:flex-end"] > button,
    #_userFactoryScheduleModal div[style*="justify-content:flex-end"] > button,
    #_adsTaskModal div[style*="justify-content:flex-end"] > button,
    #_hubSkillModal div[style*="justify-content:flex-end"] > button,
    .uf-cf-sheet div[style*="justify-content:flex-end"] > button { min-height: 42px !important; }
    #_hubSkillModal .row > .btn { min-height: 44px !important; }

    /* "Agents to run" in the New-task modals (SEO + Advertising) — same tidy
       layout as mobile: a 2-column grid of settings rows (name on the LEFT,
       switch on the RIGHT via row-reverse, thin divider) instead of the cramped
       inline [switch] Label pairs. No mobile touch-scale on the switch here. */
    #_userFactoryConfigModal .uf-cfg-agents,
    #_adsTaskModal .uf-cfg-agents {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 2px 20px;
        margin-top: 4px;
    }
    #_userFactoryConfigModal .uf-cfg-agent-toggle,
    #_adsTaskModal .uf-cfg-agent-toggle {
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 12px !important;
        margin: 0 !important;
        padding: 9px 2px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f3f4f6;
    }

    /* New-skill modal footer — match the standard modal footer on desktop:
       right-aligned, Cancel then primary. The .agents-hub .row default is
       left-aligned with Save first; flip it here (mobile keeps its stacked
       column-reverse layout). */
    #_hubSkillModal .row { justify-content: flex-end !important; }
    #_hubSkillModal .row #_hsCancel { order: -1 !important; }

    /* Learnings search box — enlarge the box itself (not just the font) to match
       the mobile bump; base padding was a cramped 6px 12px. */
    #page-learnings .filter-input { padding: 9px 16px !important; }

    /* AI Builder "+" menu options — roomier, like mobile (font + icon were
       already bumped above; add the item padding + menu width). */
    .ai-chat-plus-menu { min-width: 240px !important; padding: 6px !important; }
    .ai-chat-plus-item { padding: 12px 14px !important; }

    /* Card three-dots (kebab) button + menu options — bigger, matching mobile.
       Shared by My Builds version cards + Template/Game/Showcase cards. */
    .ws-version-card-head .ws-version-kebab { width: 34px !important; height: 34px !important; }
    .ws-version-card-head .ws-version-kebab .material-symbols-outlined { font-size: 20px !important; }
    .tpl-kebab-menu { min-width: 220px !important; padding: 6px !important; }
    .tpl-kebab-item { font-size: 14px !important; padding: 11px 14px !important; }
    .tpl-kebab-item .material-symbols-outlined { font-size: 20px !important; }
    .ws-kebab-subitem { font-size: 14px !important; padding-left: 40px !important; }

    /* "Try one of these next" follow-up chips — larger, like mobile (base was
       12px chip / 11px label). */
    .ws-followup-chip { font-size: 13px !important; padding: 8px 14px !important; }
    .ws-followup-label { font-size: 12px !important; }

    /* Images/Videos media switch — match the AI media PAGE across the modals:
       (a) button height (page buttons are 42px via #page-settings-ai-media
       button; modal buttons were base ~30px), and (b) the tab-BAR must hug its
       content like the page (inline pill) instead of stretching full-width — the
       modal bar is a flex child that otherwise stretches; the align-self fix was
       ≤640-only, so mirror it on desktop. */
    .ws-media-tab-btn { min-height: 42px !important; }
    .ws-modal .ws-media-tab-bar,
    .uf-custom-modal .ws-media-tab-bar { align-self: flex-start !important; }

    /* My Domains search box spans the full content width on desktop — drop the
       340px cap on its flex:1 wrapper so it fills the row. */
    #page-user-domains [style*="max-width:340px"] { max-width: none !important; }
}

/* Board Game Builder — Games library cards (reuse .tpl-grid-page grid). */
.game-card {
    display: flex; flex-direction: column;
    /* Match .tpl-card (Showcase): borderless, soft drop shadow at rest,
       lifted on hover — no border/white-fill treatment. */
    border: none; border-radius: 12px; overflow: hidden;
    background: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow .15s ease, transform .15s ease;
}
.game-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
.game-card--clickable { cursor: pointer; }

/* ── Game detail — click-to-play overlay ────────────────────────────
   The Preview tab shows the game's thumbnail with a big centered Play
   button; clicking it swaps in the live game iframe. */
.gd-play-overlay {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: #0b0f1a; overflow: hidden; cursor: default;
}
.gd-play-overlay .gd-play-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.55; filter: blur(1px);
}
.gd-play-overlay.gd-play-overlay--empty {
    background: linear-gradient(135deg, #1f2430, #12958a22);
}
.gd-play-btn {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border: none; border-radius: 9999px; cursor: pointer;
    background: #1a73e8; color: #fff; font-size: 16px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform .12s ease, background .12s ease;
}
.gd-play-btn:hover { background: #1666d0; transform: scale(1.04); }
.gd-play-btn .material-symbols-outlined { font-size: 26px; }
/* Compact related-game cards on the detail page (reuse .tpl-card chrome). */
.gd-related-card { cursor: pointer; }
.game-card-thumb {
    display: block; aspect-ratio: 16 / 9; background: #f3f4f6;
    background-size: cover; background-position: center; overflow: hidden;
}
.game-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card-thumb--empty {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1f2430, #12958a22);
}
/* flex: 1 → body fills the equal-height (grid-stretched) card, so the
   margin-top:auto on .game-card-actions actually has room to push the buttons
   to the card BOTTOM. Without it the body is only as tall as its content and a
   1-line vs 2-line description leaves the action row at different heights. */
.game-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }
.game-card-title {
    font-size: 15px; font-weight: 600; color: #374151; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Description slot — mirrors .tpl-card-desc (Showcase card). */
.game-card-desc {
    font-size: 12px; color: #374151; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-badge {
    font-size: 11px; font-weight: 600; color: #374151;
    background: #f3f4f6; border-radius: 9999px; padding: 2px 10px; line-height: 18px;
}
.game-badge--pub { color: #067647; background: #ecfdf3; }
/* Actions pinned to the card bottom (like the Showcase card's margin-top:auto),
   with the same blue pill treatment: primary = filled, secondary = outlined. */
.game-card-actions { margin-top: auto; padding-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.game-card-actions .btn {
    flex: 1 1 auto; min-width: 0; justify-content: center;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9999px;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: filter .12s ease;
}
.game-card-actions .btn:hover { filter: brightness(0.96); }
.game-card-actions .btn .material-symbols-outlined { font-size: 16px; }
.game-card-actions .btn-primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.game-card-actions .game-copy-btn { background: #fff; color: #1a73e8; border-color: #1a73e8; }
.game-card-actions .game-unpub-btn { background: #fff; color: #6b7280; border-color: #e5e7eb; }

/* Phase 11 — Templates page filter bar focus treatment.
   Mirrors the .ws-modal input/select:focus rule (CLAUDE.md §17):
   1px blue border on focus, no shadow ring, no native outline.
   The page is NOT inside .ws-modal so the global rule doesn't reach
   it — scope this rule to the templates filter bar specifically.
   `!important` is required to beat the inline `border:1px solid
   #ededed` set on each control's `style="…"` attribute (specificity
   of inline styles beats class-level rules without !important). */
/* The filter bars sit directly on the page — no gray box. The controls are
   already borderless/transparent (.tpl-filter-control), so drop the container's
   fill / border / rounded-box padding for a cleaner, flush look. Keeps the flex
   row layout. `!important` beats the inline `background`/`border` on the bar. */
.templates-filter-bar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Filter controls (<select> + search <input>) adopt the top-navbar search
   palette so the section toolbars match the global search: a soft gray pill at
   rest (#f1f3f4), a touch darker + faint shadow on hover (#e8eaed), and a white
   surface + stronger shadow on focus. Shared across Showcase, My Games,
   Templates, My Builds, and Published (all use `.tpl-filter-control` inside
   `.templates-filter-bar`). `!important` beats each control's inline
   border/background; the inline height/padding/radius/font stay so sizing is
   unchanged. The `.templates-filter-bar select/input` rules are kept in the
   selector list because their (0,2,1) specificity would otherwise re-win over
   `.tpl-filter-control` (0,2,0) on hover/focus. */
.tpl-filter-control {
    border: 0 !important;
    background: #f1f3f4 !important;
}
.templates-filter-bar select,
.templates-filter-bar input {
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
}
.templates-filter-bar select:hover:not(:focus),
.templates-filter-bar input:hover:not(:focus),
.tpl-filter-control:hover:not(:focus) {
    background: #e8eaed !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.templates-filter-bar select:focus,
.templates-filter-bar input:focus,
.tpl-filter-control:focus {
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-color: transparent !important;
}

/* ── Detail page (#page-template-detail) ───────────────────────── */
.td-shell {
    display: flex;
    flex-direction: column;
    /* Phase 5 — sections (Highlights / About / Related) live BELOW
       .td-body, so the shell now grows with content instead of
       being bounded to the viewport. Min-height keeps the preview
       row tall on short pages; tall content makes the page itself
       scroll naturally. The .td-body keeps its own bounded height
       (70vh) so the iframe + Code tab still scroll internally. */
    min-height: calc(100vh - 60px - 60px);
    padding: 24px;
    gap: 16px;
}
.td-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.td-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    color: #6b7280;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
}
.td-back:hover { background: #f3f4f6; color: #374151; }
.td-back .material-symbols-outlined { font-size: 18px; }
.td-breadcrumb { color: #9ca3af; font-size: 13px; }
.td-breadcrumb #tdName { color: #374151; font-weight: 500; }
.td-body {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    /* Bounded to ~70% of the visible viewport so the preview iframe
       + Code tab always scroll inside this fixed area. Sections
       below get their own scroll via the page itself. */
    height: calc(100vh - 60px - 60px - 48px - 48px);
    min-height: 540px;
    max-height: calc(100vh - 60px - 60px - 48px - 48px);
}
.td-preview-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
/* Viewport buttons are the shared `.pf-vp` toggles (from
   preview-frame.css) — do NOT override their look, so the detail
   pages match the AI Builder version overlay exactly. They live in the
   tab-bar tools cluster (`.td-tab-tools`) alongside the maximize button. */
.td-preview-frame {
    /* No inset container background — the iframe IS the preview.
       Iframe owns its own scrolling; we inject a thin hover-only
       scrollbar into the iframe document via the shared helper
       (WebsiteChat._styleIframeScrollbar) — same trick as the
       website-generator preview pane. */
    background: transparent;
    border-radius: 12px;
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    min-height: 540px;
    position: relative;
    overflow: hidden;
}
.td-preview-frame iframe {
    width: 100%;
    /* Iframe fills the column (flex parent stretches it). Floor
       at 540px so a tall page gives the preview meaningful room
       even if .td-preview-col happens to compute shorter. */
    height: 100%;
    min-height: 540px;
    border: 0;
    background: #fff;
    /* 12px radius matches the wrapper: in desktop mode the iframe
       is flush with the wrapper so the wrapper's overflow:hidden
       clips the corners; in tablet (max-width 768px) and mobile
       (max-width 375px) the iframe is narrower than the wrapper
       and stands alone, where its own border-radius gives the
       same rounded look. The previous box-shadow was offset-y:2px
       which caused asymmetric top vs. bottom corners on some
       templates — keep the radius, drop the shadow. */
    border-radius: 12px;
    box-shadow: none;
    display: block;
    transition: max-width 200ms ease;
}
.td-preview-frame.tablet iframe { max-width: 768px; }
.td-preview-frame.mobile iframe { max-width: 375px; }

/* Fitted device frames (pf-desktop / pf-phone / pf-extension) hold their
   NATURAL layout width — the `.pf-fit` transform:scale() does all the
   fitting. Without this, the wide desktop frame (1280px) is a flex child
   in a centered flex host, so it first flex-shrinks to the pane width and
   THEN gets scaled again by pf-fit → a double-shrunk, tiny desktop preview.
   flex-shrink:0 keeps it at 1280 so the single scale fills the pane.
   (Browser frames have no .pf-fit and still flex to width:100%.) */
.td-preview-frame .pf-fit { flex-shrink: 0; }

/* Maximized desktop fills the viewport like a website (matches the AI Builder
   overlay `.ws-vo-shell.maxed .pf-desktop`). The JS drops .pf-fit for a maxed
   desktop frame, so it flexes here instead of staying a fixed 1280×800 window
   scaled + centered. Phone/extension keep their device frame (scaled up,
   centered) — only desktop flexes. */
.td-preview-frame.maximized .pf-desktop {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    border: 0;
    flex-shrink: 1;
}

/* Maximized — pin to viewport, fill it, hide everything else.
   Matches the AI Builder version overlay (`.ws-vo-shell.maxed`):
   light-gray backdrop + centered, so a capped-width (tablet/mobile)
   app is centered rather than stretched. */
.td-preview-frame.maximized {
    position: fixed;
    inset: 0;
    z-index: 5800;
    border-radius: 0;
    padding: 0;
    background: #f3f4f6;
    min-height: 100vh;
    align-items: center;
}
.td-preview-frame.maximized iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
}
.td-preview-frame.maximized.tablet iframe { max-width: 768px; }
.td-preview-frame.maximized.mobile iframe { max-width: 375px; }
/* Framed (device-frame) previews center when maxed. */
.td-preview-frame.maximized .pf-fit { transform-origin: center center; }
/* Files (Code) pane maximized — same light backdrop, fills the viewport. */
.td-files-pane.maximized {
    position: fixed;
    inset: 0;
    z-index: 5800;
    background: #f3f4f6;
    margin: 0;
    border-radius: 0;
}
.td-maximize-exit {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 5810;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.95);
    color: #374151;
    border: 0;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.td-maximize-exit.is-visible { display: inline-flex; }
.td-maximize-exit:hover { background: #fff; }
.td-maximize-exit .material-symbols-outlined { font-size: 16px; }

.td-meta-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding-right: 4px;
    min-height: 0;
}
/* Phase 5 — full-width sections below the preview row. */
.td-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
}
.td-meta-col h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #374151;
}
.td-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.td-badges .ws-scope-badge,
.td-badges .td-badge {
    background: #f3f4f6;
    color: #374151;
    border-radius: 9999px;
    padding: 3px 10px;
    font-size: 12px;
}
.td-description {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
}
.td-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
/* Detail-page meta (Author / Views / Published, Size / Created …) — the
   hairline-separated list from the public showcase detail page
   (dashboard/showcase-detail.html `.meta-list`): muted label left, bold value
   right. Shared by the showcase, game and template detail pages so the same
   three facts don't read three different ways. */
.td-stats {
    display: block;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
}
.td-stats > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    min-width: 0;
    padding: 11px 0;
    border-bottom: 1px solid #e5e7eb;
}
.td-stats dt {
    font-size: 14.5px;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
.td-stats dd {
    font-size: 14.5px;
    color: #1c2430;
    font-weight: 600;
    text-align: right;
    margin: 0;
    word-break: break-word;
}
.td-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.td-cta-primary {
    padding: 12px 16px;
    background: #1a73e8;
    color: #fff;
    border: 0;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.td-cta-primary:hover { background: #1557b0; }
.td-cta-secondary {
    padding: 12px 16px;
    background: #fff;
    color: #1a73e8;
    border: 1px solid #1a73e8;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.td-cta-secondary:hover { background: #eff6ff; }

/* Showcase detail — native-app install buttons + placeholder.
   The action slot reserves a wrapper (#scdArtifactBtns) whose children are
   <a> anchors; without an explicit flex layout they render inline and overlap. */
.scd-artifact-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.scd-install-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.scd-artifact-loading,
.scd-artifact-none {
    font-size: 12px;
    color: #6b7280;
    padding: 4px 0;
}
/* Type icon anchoring the native-app preview pane when no snapshot exists. */
.scd-native-icon {
    font-size: 72px;
    color: #c4c9d4;
    line-height: 1;
}

/* Edit / Download / Delete stack one per line at the same size as the
   `.td-cta-primary` "Start new app" button above them — they were a row of
   three small pills, which read as a different (lesser) class of control. */
.td-actions-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.td-actions-row button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.td-actions-row button:hover { background: #f3f4f6; }
.td-action-danger {
    color: #c13515 !important;
    border-color: #fecaca !important;
}
.td-action-danger:hover { background: #fee2e2 !important; }
@media (max-width: 1024px) {
    /* Stack to a single column. Crucially, release the fixed ~70vh height /
       max-height (which only makes sense for the side-by-side layout, where
       each column fills that height and scrolls internally). Stacked, that
       bounded height crams the preview + meta rows into 70vh and the meta
       column (title / badges / description / stats) collided behind the
       preview. height:auto lets the page grow and the two rows stack cleanly;
       the preview frame keeps its own min-height:540px so it still shows. */
    .td-body {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        max-height: none;
    }
    /* Grid item must be allowed to shrink below its content's min-width so a
       fixed-size device frame (e.g. the 1280px desktop preview) is contained
       and scaled-to-fit by _applyFitScale instead of expanding the column and
       overflowing the page horizontally on phones. `minmax(0, 1fr)` above
       makes the track shrinkable (matching the desktop `minmax(0, 3fr)`);
       `min-width: 0` here overrides the grid item's default `min-width: auto`
       (= content min-width = 1280px). Pairs with .td-preview-frame overflow:hidden. */
    .td-preview-col { min-width: 0; }
}

/* Published-sites card rows are inline-styled horizontal flex (content +
   flex-shrink:0 action buttons). On phones the non-breaking public URL forces
   the content min-width past the viewport, so content + buttons overflowed
   ~84px. Let the URL wrap, and stack the row (content over full-width actions)
   on narrow screens. !important overrides the element's inline flex styles. */
.ps-pub-url { overflow-wrap: anywhere; }

/* Mobile filter sheet (mobile-filters.js) — desktop hides the Filters button;
   the bottom-sheet itself only ever opens on phones. */
.tpl-filter-btn { display: none; }
.mf-sheet { display: none; position: fixed; inset: 0; z-index: 5600; }
.mf-sheet.open { display: block; }
.mf-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.mf-sheet-card {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    max-height: 85vh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
    animation: mfSlideUp 0.22s ease;
}
@keyframes mfSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mf-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid #eef0f2; flex-shrink: 0;
}
.mf-sheet-title { font-size: 16px; font-weight: 700; color: #111827; }
.mf-sheet-body {
    padding: 14px 18px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
}
.mf-sheet-body label { font-size: 12px; color: #6b7280; margin-top: 8px; }
.mf-sheet-body select.tpl-filter-control {
    /* !important beats the filter bar's inline height:36px/font-size:13px so
       the sheet controls read at a comfortable touch size. */
    width: 100% !important; height: 52px !important; padding: 0 20px !important;
    border: 1px solid #ededed; border-radius: 9999px !important; background: #fff;
    font-size: 15px !important; box-sizing: border-box;
}
.mf-sheet-foot { padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #f3f4f6; flex-shrink: 0; }
.mf-sheet-done {
    width: 100%; height: 54px; border: 0; border-radius: 9999px;
    background: #1a73e8; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.mf-sheet-done:active { background: #1557b0; }
body.mf-open { overflow: hidden; }

@media (max-width: 640px) {
    .ps-pub-row { flex-direction: column !important; align-items: stretch !important; }
    /* Keep the card actions (Open / Update / Unpublish / Logs / Roll back) on a
       SINGLE row that scrolls horizontally on phones — mobile-app convention —
       instead of wrapping to several lines. Buttons hold their natural width;
       the row scrolls to reveal the rest. Scrollbar hidden for a clean look. */
    .ps-pub-actions {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ps-pub-actions::-webkit-scrollbar { display: none; }
    .ps-pub-actions > * { flex-shrink: 0 !important; }

    /* ===== Bigger card buttons + text on phones ===== */
    /* Catalog card action buttons (Published / Games / Showcase / My Websites /
       Templates / version cards) — taller touch size + bigger label. */
    .ps-pub-actions > button {
        min-height: 36px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
    /* Published-build card text — title / URL / meta / badges (all inline-sized). */
    .ps-pub-row [style*="font-size:14px"] { font-size: 16px !important; }
    .ps-pub-row [style*="font-size:12px"] { font-size: 14px !important; }
    .ps-pub-row [style*="font-size:11px"] { font-size: 13px !important; }
    .game-card-actions .btn,
    .tpl-card-actions button,
    .tpl-card-actions a.btn {
        min-height: 42px !important;
        font-size: 14px !important;
    }
    .ws-vt-cta {
        min-height: 44px !important;
        font-size: 14px !important;
    }
    /* Dashboard / analytics stat cards — bigger numbers + labels. */
    .stat-card .number { font-size: 24px !important; }
    .stat-card .label { font-size: 13px !important; }
    /* My-Domains table rows — bigger text + taller action buttons; keep the wide
       table horizontally scrollable so it never pushes the page past the edge. */
    #userDomainsTableSlot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #userDomainsContent table { font-size: 15px !important; }
    #userDomainsContent table button {
        min-height: 38px !important;
        font-size: 14px !important;
    }

    /* Showcase card views + author row (visibility icon + count + handle). */
    #page-showcase .tpl-card-meta[style*="font-size:11px"] { font-size: 13px !important; }
    #page-showcase .tpl-card-meta[style*="font-size:11px"] .material-symbols-outlined { font-size: 16px !important; }
    /* Bigger card TEXT + badges on phones across the four card grids — My Builds
       (.ws-vt-*), My Games (.game-card-*), Templates + Showcase (.tpl-card-*).
       Titles 17, descriptions 15, badges 13. */
    .ws-vt-title,
    .game-card-title,
    .tpl-card-name { font-size: 17px !important; }
    .ws-vt-meta,
    .game-card-desc,
    .tpl-card-desc { font-size: 15px !important; }
    .ws-vt-time { font-size: 12px !important; }
    /* Card badges (type / published / deployed / latest / verified) — match size
       across all badge types (the Verified badge was smaller). Radius left at
       each badge's original value. */
    .mw-badge,
    .game-badge,
    .ws-version-badge,
    .ws-verify-badge { font-size: 13px !important; }
    .mw-badge,
    .game-badge { padding: 3px 12px !important; }
    /* Boxy version + verify badges: tighter box (line-height 18px, padding 2px 10px)
       so their HEIGHT matches the type/published pills — their base line-height:1.6
       + icon otherwise made them taller than the neighbors. */
    .ws-version-badge,
    .ws-verify-badge { padding: 2px 10px !important; line-height: 18px !important; }
    .ws-verify-badge .material-symbols-outlined { font-size: 15px !important; }

    /* Profile page — Account Settings: enlarge the inputs / labels / buttons /
       section headers to match the website's mobile control sizing. */
    .ta-settings .card h3 { font-size: 18px !important; }
    .ta-settings .card h3 .material-symbols-outlined { font-size: 24px !important; }
    .ta-settings .form-row label { font-size: 15px !important; }
    .ta-settings .form-row input,
    .ta-settings .form-row select {
        min-height: 50px !important;
        font-size: 15px !important;
        padding: 0 18px !important;
    }
    .ta-settings .btn {
        min-height: 50px !important;
        font-size: 15px !important;
        padding: 0 22px !important;
    }

    /* Other settings pages (Google accounts / AI media / Deploy) render their
       content via JS and don't carry .ta-settings, so enlarge their inputs /
       selects / buttons / headers directly on phones — same treatment as
       Profile. (App Stores already has .ta-settings.) */
    #page-settings-google input:not([type="checkbox"]):not([type="radio"]),
    #page-settings-google select, #page-settings-google textarea,
    #page-settings-ai-media input:not([type="checkbox"]):not([type="radio"]),
    #page-settings-ai-media select, #page-settings-ai-media textarea,
    #page-settings-ai-media .ai-key-code,
    #page-settings-deploy input:not([type="checkbox"]):not([type="radio"]),
    #page-settings-deploy select, #page-settings-deploy textarea {
        min-height: 48px !important;
        font-size: 15px !important;
    }
    /* AI media generation modal (AI Builder + menu): the filled key box misses
       the page-scoped rule above, so match it to the modal's provider selector
       height (46px). Same size + shape; grey fill retained. */
    #websiteAiImageModal .ai-key-code { min-height: 46px !important; }
    #page-settings-google .btn, #page-settings-ai-media .btn, #page-settings-deploy .btn {
        min-height: 48px !important;
        font-size: 15px !important;
    }
    /* Deploy page action buttons are inline-styled (Add target / Create first /
       card Edit-Delete), not .btn — size them for touch. */
    #page-settings-deploy button { min-height: 46px !important; font-size: 15px !important; }
    /* Deploy page descriptions (targets hint + empty-state body) — bigger. */
    #page-settings-deploy p[data-i18n="settings.deploy_targets_hint"],
    #page-settings-deploy [data-i18n="settings.deploy_target_empty_body"],
    #page-settings-deploy .page-description { font-size: 15px !important; }
    /* AI media page provider/model hint description — bigger (matches Deploy). */
    #page-settings-ai-media p[style*="font-size:12px"] { font-size: 15px !important; }
    /* Builder + Workload section page descriptions — 15px (matches Deploy).
       Workload/hub pages use .page-description; the Builder grid pages
       (Showcase / My Builds / Published) use an inline header desc div. */
    #page-workload-tasks .page-description,
    #page-agents .page-description,
    #page-knowledge .page-description,
    #page-skills .page-description,
    #page-learnings .page-description,
    #page-schedules .page-description,
    #page-notifications .page-description,
    #page-showcase div[style*="font-size:13px"][style*="line-height:1.5"],
    #page-my-websites div[style*="font-size:13px"][style*="line-height:1.5"],
    #page-published-sites div[style*="font-size:13px"][style*="line-height:1.5"] { font-size: 15px !important; }
    #page-settings-google h3, #page-settings-ai-media h3, #page-settings-deploy h3,
    #page-settings-google h4, #page-settings-ai-media h4, #page-settings-deploy h4 {
        font-size: 18px !important;
    }
    #page-settings-google label, #page-settings-ai-media label, #page-settings-deploy label {
        font-size: 15px !important;
    }

    /* Taller, rounder chat input box (AI Builder + AI Assistant + Coordinator)
       — full pill to match the site's rounded controls. */
    .ai-chat-page-input-box { padding: 9px 12px !important; border-radius: 9999px !important; }
    .ai-chat-page-field { font-size: 16px !important; min-height: 26px !important; }
    /* Bigger attach (+) and send buttons inside the taller input pill. */
    .ai-chat-attach-btn, .ai-chat-page-send {
        width: 44px !important;
        height: 44px !important;
    }
    .ai-chat-attach-btn .material-symbols-outlined,
    .ai-chat-page-send .material-symbols-outlined { font-size: 24px !important; }

    /* Bigger + button options window (plus menu) + its items. */
    .ai-chat-plus-menu { min-width: 260px !important; padding: 8px !important; }
    .ai-chat-plus-item { padding: 14px 14px !important; font-size: 15px !important; }
    .ai-chat-plus-item .material-symbols-outlined { font-size: 24px !important; }

    /* Page-level action buttons (page headers / toolbars — the SEO-factory
       New-task / Coordinator / Customize / Schedule, domain Add/Bulk, etc.)
       match the 48px filter/search sizing. Non-important so the explicit
       card/modal button sizes (which use !important) still win. */
    .btn-primary, .uf-btn,
    .page-header .btn, .page-header-actions .btn, .page-header button {
        min-height: 46px;
        font-size: 15px;
    }

    /* Onboarding "Go to Domain Management" CTA (My Dashboard / Search Performance
       / Google Analytics empty states) — bigger, easier tap target. */
    .ud-onboard-cta { min-height: 52px !important; font-size: 16px !important; padding: 14px 34px !important; }
    .ud-onboard-cta .material-symbols-outlined { font-size: 20px !important; }

    /* My-Domains page search box — match the 48px catalog search size (the
       catalog / My-Websites searches are already 48px via .tpl-filter-control). */
    #userDomainsSearch { min-height: 48px !important; font-size: 15px !important; }

    /* AI media page — the API-key Edit / Clear + provider buttons are inline-
       styled (not .btn), so size them directly. */
    #page-settings-ai-media button {
        min-height: 44px !important;
        font-size: 14px !important;
    }
    /* Put the API key on its own line and the Edit/Clear buttons on the line
       below (they were all cramped on one row). */
    #page-settings-ai-media .ai-key-right,
    #websiteAiImageModal .ai-key-right { flex-wrap: wrap !important; row-gap: 10px !important; }
    #page-settings-ai-media .ai-key-code,
    #websiteAiImageModal .ai-key-code { flex: 1 1 100% !important; }

    /* Tighter version cards in the AI Builder preview drawer so the content gets
       more width (the drawer + card padding stacked ~24px of inset). */
    #page-website-factory.has-preview .ai-chat-preview-panel { padding: 6px !important; }
    .ai-chat-preview-body { padding: 8px 6px !important; }
    .ws-vt-body { padding: 10px 10px 10px !important; }

    /* Navbar: pull the burger (left) and account (right) buttons out to the same
       ~edge inset as the page content (~6px) so everything lines up vertically,
       and make both buttons bigger. The .top-navbar's own 8px padding was the
       extra inset. */
    .top-navbar { padding: 0 4px !important; }
    .top-navbar-left { padding-left: 2px !important; }
    .top-navbar-right { padding-right: 2px !important; gap: 6px !important; }
    /* Hide the centered AI search box on mobile — it crowds the logo + avatar on
       a phone. Desktop keeps it. (Search is also reachable in-app.) */
    .top-navbar-center { display: none !important; }
    .mobile-menu-btn { width: 48px !important; height: 48px !important; }
    .mobile-menu-btn .material-symbols-outlined { font-size: 30px !important; }
    .top-user-avatar { width: 48px !important; height: 48px !important; }
    .top-user-avatar .material-symbols-outlined { font-size: 44px !important; }

    /* Filter bars (Showcase / My Games / Templates / My Builds / Published) are
       a flat flex-wrap row of label,select,…,search,count. On phones, collapse
       to a single row: [search][Filters button]. The labels + <select> controls
       are hidden inline and shown inside a bottom-sheet the Filters button opens
       (mobile-filters.js moves them live). count is dropped to keep one clean
       row. */
    .templates-filter-bar {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .templates-filter-bar > label,
    .templates-filter-bar > select.tpl-filter-control { display: none !important; }
    .templates-filter-bar > input[type="search"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        height: 48px !important;
        padding: 0 18px !important;
        font-size: 15px !important;
    }
    .templates-filter-bar > span[id$="Count"],
    .templates-filter-bar > span[id$="count"] { display: none !important; }
    /* The Filters button (injected by mobile-filters.js) — match the taller
       search box. */
    .tpl-filter-btn {
        display: inline-flex; align-items: center; gap: 6px;
        flex: 0 0 auto;
        height: 48px; padding: 0 18px;
        border: 1px solid #ededed; border-radius: 9999px;
        background: #fff; color: #374151;
        font-size: 15px; line-height: 20px; cursor: pointer;
    }
    .tpl-filter-btn .material-symbols-outlined { font-size: 20px; }
    .tpl-filter-btn:active { background: #f3f4f6; }

    /* Bottom-sheet dialogs on phones (mobile-app convention). The standard
       .modal-overlay > .modal card system (Publish / Deploy / Domain deploy /
       Publish logs / Published-sites) slides up from the bottom, full-width,
       rounded top corners. (.ws-modal + menu sheets and the filter sheet are
       already bottom-anchored in their own rules.) */
    .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .modal-overlay > .modal {
        width: 100% !important;
        max-width: none !important;
        max-height: 92vh !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25) !important;
        animation: mfSlideUp 0.22s ease;
    }
    /* Stack the footer actions full-width, one button per line. Extra bottom
       padding clears the phone's home-indicator / gesture bar. */
    .modal-overlay > .modal > .modal-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .modal-overlay > .modal > .modal-footer > button,
    .modal-overlay > .modal > .modal-footer > .btn,
    .modal-overlay > .modal > .modal-footer > a.btn {
        width: 100% !important;
        margin: 0 !important;
        justify-content: center;
    }

    /* ===== Every other modal system → bottom-sheet + stacked buttons =====
       These overlays center their card via inline align-items:center; override
       to anchor the card to the bottom, full-width, rounded top. Covers the
       website +menu (id-based) / deploy / publish (.ws-modal), the user-factory
       customize / schedule / config / ads / hub-skill overlays, and the legacy
       Connect GSC/GA4 dialog. height/top override beats the legacy .modal base
       `height:calc(100%-60px)` so the sheet reaches the true viewport bottom.
       !important beats the inline styles. */
    .ws-modal,
    #websiteAiImageModal, #websiteImageLibraryModal, #websiteInstructionsModal,
    #websiteKnowledgeModal, #websiteReferencesModal, #websiteSaveTemplateDialog,
    #websiteSkillsModal, #websiteTemplatesModal,
    .uf-cf-overlay,
    #connectAnalyticsModal,
    #_userFactoryScheduleModal, #_userFactoryConfigModal,
    #_adsTaskModal, #_hubSkillModal,
    #websiteConfirmOverlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        top: 0 !important;
        height: 100dvh !important;
    }
    /* The card is each overlay's direct child — full-width, rounded top, slide up. */
    .ws-modal > *,
    #websiteAiImageModal > *, #websiteImageLibraryModal > *, #websiteInstructionsModal > *,
    #websiteKnowledgeModal > *, #websiteReferencesModal > *, #websiteSaveTemplateDialog > *,
    #websiteSkillsModal > *, #websiteTemplatesModal > *,
    .uf-cf-overlay > *,
    #connectAnalyticsModal > *,
    #_userFactoryScheduleModal > *, #_userFactoryConfigModal > *,
    #_adsTaskModal > *, #_hubSkillModal > *,
    #websiteConfirmOverlay > * {
        width: 100% !important;
        max-width: none !important;
        max-height: 92vh !important;
        border-radius: 18px 18px 0 0 !important;
        animation: mfSlideUp 0.22s ease;
    }
    /* Images/Videos switch inside the +menu media modals (AI media generation,
       Media library): match the AI media page. In the modal body's flex column
       the inline-flex pill stretched full-width, stranding both buttons at the
       left with a big empty gap. align-self:flex-start makes it hug its content
       like the page, and the button size matches the page (44px tall, 14px). */
    .ws-modal .ws-media-tab-bar { align-self: flex-start; }
    .ws-media-tab-btn { min-height: 44px; font-size: 14px; }
    /* Footer button rows (inline display:flex; justify-content:flex-end) stack
       full-width, one per line. Headers use space-between, so they're untouched. */
    .ws-modal div[style*="justify-content:flex-end"],
    .uf-custom-modal div[style*="justify-content:flex-end"],
    #websiteAiImageModal div[style*="justify-content:flex-end"],
    #websiteImageLibraryModal div[style*="justify-content:flex-end"],
    #websiteKnowledgeModal div[style*="justify-content:flex-end"],
    #websiteReferencesModal div[style*="justify-content:flex-end"],
    #websiteSkillsModal div[style*="justify-content:flex-end"],
    #websiteInstructionsModal div[style*="justify-content:flex-end"],
    #websiteTemplatesModal div[style*="justify-content:flex-end"],
    #websiteSaveTemplateDialog div[style*="justify-content:flex-end"],
    #connectAnalyticsModal div[style*="justify-content:flex-end"],
    #websiteConfirmOverlay div[style*="justify-content:flex-end"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .ws-modal div[style*="justify-content:flex-end"] > button,
    .ws-modal div[style*="justify-content:flex-end"] > .btn,
    .uf-custom-modal div[style*="justify-content:flex-end"] > button,
    #websiteAiImageModal div[style*="justify-content:flex-end"] > button,
    #websiteImageLibraryModal div[style*="justify-content:flex-end"] > button,
    #websiteKnowledgeModal div[style*="justify-content:flex-end"] > button,
    #websiteReferencesModal div[style*="justify-content:flex-end"] > button,
    #websiteSkillsModal div[style*="justify-content:flex-end"] > button,
    #websiteInstructionsModal div[style*="justify-content:flex-end"] > button,
    #websiteTemplatesModal div[style*="justify-content:flex-end"] > button,
    #websiteSaveTemplateDialog div[style*="justify-content:flex-end"] > button,
    #connectAnalyticsModal div[style*="justify-content:flex-end"] > button,
    #websiteConfirmOverlay div[style*="justify-content:flex-end"] > button {
        width: 100% !important;
        margin: 0 !important;
    }

    /* ===== Catch-all for the remaining modals =====
       (a) Any `.modal` overlay that centers its card via inline align-items:center
           — every static domain / deploy / schedule / bulk dialog. This does NOT
           match `.modal-overlay > .modal` cards (align-items:center lives on the
           .modal-overlay parent, not the card) nor legacy `.modal`+.modal-content.
       (b) Legacy analytics popups (`.modal > .modal-content`) — anchor the card to
           the bottom via absolute positioning (their `.modal` stays block-flow).
       (c) QR / install overlays created by JS (.ws-qr-overlay / .scd-install-overlay).
       Adding a NEW modal? If it's a `.modal` with align-items:center inline it's
       already covered; otherwise add its overlay selector here. */
    /* NB: match BOTH `align-items:center` (as authored) and `align-items: center`
       (the CSSOM re-serializes the style attr the moment JS toggles .style.display,
       inserting a space after the colon). */
    .modal[style*="align-items:center"],
    .modal[style*="align-items: center"],
    .ws-qr-overlay,
    .scd-install-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        top: 0 !important;
        height: 100dvh !important;
    }
    .modal[style*="align-items:center"] > *,
    .modal[style*="align-items: center"] > *,
    .ws-qr-overlay > *,
    .scd-install-overlay > * {
        width: 100% !important;
        max-width: none !important;
        max-height: 92vh !important;
        border-radius: 18px 18px 0 0 !important;
        animation: mfSlideUp 0.22s ease;
    }
    /* Legacy .modal + .modal-content (analytics/performance/indexing popups):
       .modal-content only exists in this pattern, so scoping to it is safe. Its
       .modal parent is position:fixed, so absolute-bottom anchors the sheet. */
    .modal > .modal-content {
        position: absolute !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        margin: 0 !important;
        width: 100% !important; max-width: none !important;
        max-height: calc(100dvh - 60px) !important;
        border-radius: 18px 18px 0 0 !important;
    }
    /* Footer button rows (justify-content:flex-end) in ANY .modal / qr / install
       stack full-width, one per line. Headers use space-between → untouched. */
    .modal div[style*="justify-content:flex-end"],
    .ws-qr-overlay div[style*="justify-content:flex-end"],
    .scd-install-overlay div[style*="justify-content:flex-end"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .modal div[style*="justify-content:flex-end"] > button,
    .modal div[style*="justify-content:flex-end"] > .btn,
    .ws-qr-overlay div[style*="justify-content:flex-end"] > button,
    .scd-install-overlay div[style*="justify-content:flex-end"] > button {
        width: 100% !important;
        margin: 0 !important;
    }

    /* ===== New-task / Customize-agents / Schedule / Ads modals =====
       These render their card as `.uf-cf-sheet` (customize) or an id-based
       overlay (config / schedule / ads / hub-skill) — the generic .uf-custom-modal
       / .modal rules above miss their footers. Stack their action buttons AND
       enlarge the form controls + footer buttons to match the filter sheet's
       comfortable mobile touch sizes. */
    .uf-cf-sheet div[style*="justify-content:flex-end"],
    #_userFactoryConfigModal div[style*="justify-content:flex-end"],
    #_userFactoryScheduleModal div[style*="justify-content:flex-end"],
    #_adsTaskModal div[style*="justify-content:flex-end"],
    #_hubSkillModal div[style*="justify-content:flex-end"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .uf-cf-sheet div[style*="justify-content:flex-end"] > button,
    #_userFactoryConfigModal div[style*="justify-content:flex-end"] > button,
    #_userFactoryScheduleModal div[style*="justify-content:flex-end"] > button,
    #_adsTaskModal div[style*="justify-content:flex-end"] > button,
    #_hubSkillModal div[style*="justify-content:flex-end"] > button {
        width: 100% !important;
        margin: 0 !important;
    }
    /* Larger touch targets + bigger content across the New-task / Customize /
       Schedule / Ads modals AND the My-Domains dialogs (.modal overlays that
       center via inline align-items — both spacings, see the note above). */
    .uf-cf-sheet input:not([type="checkbox"]):not([type="radio"]),
    .uf-cf-sheet select, .uf-cf-sheet textarea,
    #_userFactoryConfigModal input:not([type="checkbox"]):not([type="radio"]),
    #_userFactoryConfigModal select, #_userFactoryConfigModal textarea,
    #_userFactoryScheduleModal input:not([type="checkbox"]):not([type="radio"]),
    #_userFactoryScheduleModal select, #_userFactoryScheduleModal textarea,
    #_adsTaskModal input:not([type="checkbox"]):not([type="radio"]),
    #_adsTaskModal select, #_adsTaskModal textarea,
    #_hubSkillModal input:not([type="checkbox"]):not([type="radio"]),
    #_hubSkillModal select, #_hubSkillModal textarea,
    .uf-custom-modal input:not([type="checkbox"]):not([type="radio"]),
    .uf-custom-modal select, .uf-custom-modal textarea,
    .modal[style*="align-items:center"] input:not([type="checkbox"]):not([type="radio"]),
    .modal[style*="align-items:center"] select, .modal[style*="align-items:center"] textarea,
    .modal[style*="align-items: center"] input:not([type="checkbox"]):not([type="radio"]),
    .modal[style*="align-items: center"] select, .modal[style*="align-items: center"] textarea {
        min-height: 48px !important;
        font-size: 15px !important;
    }
    .uf-cf-sheet textarea, #_userFactoryConfigModal textarea,
    #_userFactoryScheduleModal textarea, #_adsTaskModal textarea,
    #_hubSkillModal textarea, .uf-custom-modal textarea,
    .modal[style*="align-items:center"] textarea,
    .modal[style*="align-items: center"] textarea { min-height: 96px !important; }
    .uf-cf-sheet div[style*="justify-content:flex-end"] > button,
    #_userFactoryConfigModal div[style*="justify-content:flex-end"] > button,
    #_userFactoryScheduleModal div[style*="justify-content:flex-end"] > button,
    #_adsTaskModal div[style*="justify-content:flex-end"] > button,
    #_hubSkillModal div[style*="justify-content:flex-end"] > button,
    .modal[style*="align-items:center"] div[style*="justify-content:flex-end"] > button,
    .modal[style*="align-items: center"] div[style*="justify-content:flex-end"] > button {
        min-height: 50px !important;
        font-size: 15px !important;
    }
    /* Bigger CONTENT overall — bump the common inline text sizes and enlarge the
       toggle switches so the whole modal reads at a comfortable mobile size (not
       just the buttons). Inline font-sizes (authored in the HTML string, never
       touched by .style) keep their no-space form, so the attribute match holds. */
    .uf-cf-sheet [style*="font-size:12px"], #_userFactoryConfigModal [style*="font-size:12px"],
    #_userFactoryScheduleModal [style*="font-size:12px"], #_adsTaskModal [style*="font-size:12px"],
    .modal[style*="align-items:center"] [style*="font-size:12px"],
    .modal[style*="align-items: center"] [style*="font-size:12px"] { font-size: 14px !important; }
    .uf-cf-sheet [style*="font-size:13px"], #_userFactoryConfigModal [style*="font-size:13px"],
    #_userFactoryScheduleModal [style*="font-size:13px"], #_adsTaskModal [style*="font-size:13px"],
    .modal[style*="align-items:center"] [style*="font-size:13px"],
    .modal[style*="align-items: center"] [style*="font-size:13px"] { font-size: 15px !important; }
    .uf-cf-sheet [style*="font-size:14px"], #_userFactoryConfigModal [style*="font-size:14px"],
    #_userFactoryScheduleModal [style*="font-size:14px"], #_adsTaskModal [style*="font-size:14px"],
    .modal[style*="align-items:center"] [style*="font-size:14px"],
    .modal[style*="align-items: center"] [style*="font-size:14px"] { font-size: 16px !important; }
    .uf-cf-sheet [style*="font-size:16px"], #_userFactoryConfigModal [style*="font-size:16px"],
    #_userFactoryScheduleModal [style*="font-size:16px"], #_adsTaskModal [style*="font-size:16px"],
    .modal[style*="align-items:center"] [style*="font-size:16px"],
    .modal[style*="align-items: center"] [style*="font-size:16px"] { font-size: 18px !important; }
    /* Toggle switches scaled up (they carry fixed px dimensions). */
    .uf-cf-sheet .uf-switch, #_userFactoryConfigModal .uf-switch,
    #_userFactoryScheduleModal .uf-switch, #_adsTaskModal .uf-switch,
    .modal[style*="align-items:center"] .uf-switch,
    .modal[style*="align-items: center"] .uf-switch {
        transform: scale(1.3);
        transform-origin: right center;
    }

    /* New-task "Agents to run" — the toggles were a cramped inline-flex wrap
       (~3 per row). Lay them out as a clean 2-column grid, each a full-width
       row (switch + label) with a light divider. */
    #_userFactoryConfigModal .uf-cfg-agents,
    #_adsTaskModal .uf-cfg-agents {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 2px 14px;
        margin-top: 4px;
    }
    #_userFactoryConfigModal .uf-cfg-agent-toggle,
    #_adsTaskModal .uf-cfg-agent-toggle {
        display: flex !important;
        /* name on the LEFT, switch on the RIGHT (settings-row convention) — the
           switch is first in the DOM, so row-reverse flips it to the right. */
        flex-direction: row-reverse !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 14px !important;
        margin: 0 !important;
        padding: 10px 2px !important;
        font-size: 15px !important;
        border-bottom: 1px solid #f3f4f6;
    }
    #_userFactoryConfigModal .uf-cfg-agent-toggle .uf-switch,
    #_adsTaskModal .uf-cfg-agent-toggle .uf-switch {
        transform: scale(1.3);
        transform-origin: right center;
        flex-shrink: 0;
    }

    /* Bump the base body font so text across the whole site reads bigger on
       phones (no !important, so elements with explicit sizes are unaffected —
       this only lifts inherited text). */
    body { font-size: 16px; }

    /* Reduce the edge padding on phones so content gets close to full width. */
    .main-content { padding: 4px !important; }
    .page-body { padding: 12px 4px !important; }
    .templates-page-body { padding: 0 4px 14px !important; }
    .page-header { padding-left: 4px; padding-right: 4px; }

    /* Extend the enlarged-content treatment to the rest of the modal family —
       the website +menu sheets (Skills / Knowledge / References / AI media /
       Image library / Instructions / Templates / Save-template), Deploy/Publish
       (.ws-modal) and the Customize overlay — so every modal matches the filter
       sheet's comfortable sizing, not just the New-task / My-Domains ones. */
    #websiteSkillsModal input:not([type="checkbox"]):not([type="radio"]),
    #websiteSkillsModal select, #websiteSkillsModal textarea,
    #websiteKnowledgeModal input:not([type="checkbox"]):not([type="radio"]),
    #websiteKnowledgeModal select, #websiteKnowledgeModal textarea,
    #websiteReferencesModal input:not([type="checkbox"]):not([type="radio"]),
    #websiteReferencesModal select, #websiteReferencesModal textarea,
    #websiteAiImageModal input:not([type="checkbox"]):not([type="radio"]),
    #websiteAiImageModal select, #websiteAiImageModal textarea,
    #websiteImageLibraryModal input:not([type="checkbox"]):not([type="radio"]),
    #websiteImageLibraryModal select, #websiteImageLibraryModal textarea,
    #websiteInstructionsModal input:not([type="checkbox"]):not([type="radio"]),
    #websiteInstructionsModal select, #websiteInstructionsModal textarea,
    #websiteTemplatesModal input:not([type="checkbox"]):not([type="radio"]),
    #websiteTemplatesModal select, #websiteTemplatesModal textarea,
    #websiteSaveTemplateDialog input:not([type="checkbox"]):not([type="radio"]),
    #websiteSaveTemplateDialog select, #websiteSaveTemplateDialog textarea,
    .ws-modal input:not([type="checkbox"]):not([type="radio"]),
    .ws-modal select, .ws-modal textarea {
        min-height: 46px !important;
        font-size: 15px !important;
    }
    #websiteSkillsModal [style*="font-size:13px"], #websiteKnowledgeModal [style*="font-size:13px"],
    #websiteReferencesModal [style*="font-size:13px"], #websiteAiImageModal [style*="font-size:13px"],
    #websiteImageLibraryModal [style*="font-size:13px"], #websiteInstructionsModal [style*="font-size:13px"],
    #websiteTemplatesModal [style*="font-size:13px"], #websiteSaveTemplateDialog [style*="font-size:13px"],
    .ws-modal [style*="font-size:13px"], #connectAnalyticsModal [style*="font-size:13px"] { font-size: 15px !important; }
    #websiteSkillsModal [style*="font-size:12px"], #websiteKnowledgeModal [style*="font-size:12px"],
    #websiteReferencesModal [style*="font-size:12px"], #websiteAiImageModal [style*="font-size:12px"],
    #websiteImageLibraryModal [style*="font-size:12px"], #websiteInstructionsModal [style*="font-size:12px"],
    #websiteTemplatesModal [style*="font-size:12px"], #websiteSaveTemplateDialog [style*="font-size:12px"],
    .ws-modal [style*="font-size:12px"], #connectAnalyticsModal [style*="font-size:12px"] { font-size: 14px !important; }
    /* Stacked footer buttons in these modals get the taller touch size too. */
    #websiteSkillsModal div[style*="justify-content:flex-end"] > button,
    #websiteKnowledgeModal div[style*="justify-content:flex-end"] > button,
    #websiteReferencesModal div[style*="justify-content:flex-end"] > button,
    #websiteAiImageModal div[style*="justify-content:flex-end"] > button,
    #websiteImageLibraryModal div[style*="justify-content:flex-end"] > button,
    #websiteInstructionsModal div[style*="justify-content:flex-end"] > button,
    #websiteTemplatesModal div[style*="justify-content:flex-end"] > button,
    #websiteSaveTemplateDialog div[style*="justify-content:flex-end"] > button,
    .ws-modal div[style*="justify-content:flex-end"] > button,
    #websiteConfirmOverlay div[style*="justify-content:flex-end"] > button,
    #connectAnalyticsModal button[style*="width:100%"] {
        min-height: 54px !important;
        font-size: 16px !important;
    }
    /* Agents-hub Skills-page new-skill modal: its footer is a `.row` (class),
       NOT an inline justify-content:flex-end div, so the generic stacking above
       missed it and the Create/Cancel buttons stayed side-by-side. Stack them
       full-width, one per row, 54px. column-reverse puts Cancel on top / the
       primary Create on the bottom, matching the other modals. */
    #_hubSkillModal .row {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    #_hubSkillModal .row > .btn {
        width: 100% !important;
        min-height: 54px !important;
        font-size: 16px !important;
        justify-content: center !important;
    }
    /* Add/Bulk-add domain modals: the primary submit buttons are standalone
       full-width buttons (not in a flex-end footer), so size them here too, and
       give the inputs a taller touch size. */
    .modal[style*="align-items:center"] button[style*="width:100%"],
    .modal[style*="align-items: center"] button[style*="width:100%"] {
        min-height: 54px !important;
        font-size: 16px !important;
    }
    .modal[style*="align-items:center"] input:not([type="checkbox"]):not([type="radio"]),
    .modal[style*="align-items: center"] input:not([type="checkbox"]):not([type="radio"]) {
        min-height: 54px !important;
        font-size: 16px !important;
    }

    /* Center the label in EVERY stacked modal button — full-width inline-flex
       buttons otherwise left-align their content. */
    .modal-overlay > .modal > .modal-footer > button,
    .modal div[style*="justify-content:flex-end"] > button,
    .modal div[style*="justify-content:flex-end"] > .btn,
    .ws-modal div[style*="justify-content:flex-end"] > button,
    .ws-modal-body div[style*="justify-content:flex-end"] > button,
    .uf-custom-modal div[style*="justify-content:flex-end"] > button,
    .uf-cf-sheet div[style*="justify-content:flex-end"] > button,
    .uf-cf-overlay div[style*="justify-content:flex-end"] > button,
    #_userFactoryConfigModal div[style*="justify-content:flex-end"] > button,
    #_userFactoryScheduleModal div[style*="justify-content:flex-end"] > button,
    #_adsTaskModal div[style*="justify-content:flex-end"] > button,
    #_hubSkillModal div[style*="justify-content:flex-end"] > button,
    .ws-qr-overlay div[style*="justify-content:flex-end"] > button,
    .scd-install-overlay div[style*="justify-content:flex-end"] > button,
    #websiteAiImageModal div[style*="justify-content:flex-end"] > button,
    #websiteImageLibraryModal div[style*="justify-content:flex-end"] > button,
    #websiteKnowledgeModal div[style*="justify-content:flex-end"] > button,
    #websiteReferencesModal div[style*="justify-content:flex-end"] > button,
    #websiteSkillsModal div[style*="justify-content:flex-end"] > button,
    #websiteInstructionsModal div[style*="justify-content:flex-end"] > button,
    #websiteTemplatesModal div[style*="justify-content:flex-end"] > button,
    #websiteSaveTemplateDialog div[style*="justify-content:flex-end"] > button {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Page headers pair a title with action buttons via
       `justify-content:space-between` (often inline). On phones the title got
       squeezed into a narrow column and wrapped awkwardly beside the buttons.
       Stack title-over-actions. !important beats the inline align-items. */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }

    /* Connect GSC/GA4 modal card headers put icon + title + "Setup Guide" link
       and a status badge on one `justify-content:space-between` row, squeezing
       the title (e.g. "GSC — Google Search Console") into a 4-line wrap on
       phones. Let the header + its inner group wrap so the badge / setup-guide
       drop below and the title keeps a full line. */
    .conn-card-head { flex-wrap: wrap; row-gap: 8px; }
    .conn-card-head-main { flex-wrap: wrap; row-gap: 4px; min-width: 0; }

    /* Publish modal slug row is `display:flex;overflow:hidden` with a flex:1
       input + a ".buildmidas.com" suffix span. The input's default
       min-width:auto (sized to its long slug value) pushed the suffix past the
       container edge, where overflow:hidden clipped it to ".buildmidas.cor".
       Let the input shrink so the suffix stays fully visible. */
    #_pubSlug { min-width: 0; }

    /* AI media modal's Provider + Model selects sit in a 2-col grid; on phones
       each column is ~160px, so the native Model <select> truncates its long
       option (e.g. "GPT Image 1.5 (standard)"). Stack to one column so each
       select spans the modal width and shows its full label. */
    .ai-media-pm-grid { grid-template-columns: 1fr !important; }

    /* Customize Agents modal → bottom sheet on phones: slide the full-width
       panel to the bottom edge with a rounded top, like a native mobile sheet.
       !important beats the overlay/wrapper inline styles set in JS. */
    .uf-cf-overlay { align-items: flex-end !important; padding: 0 !important; }
    .uf-cf-sheet {
        width: 100% !important;
        max-width: none !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 92vh !important;
    }
}

/* Customize Agents modal — the agent-name tab strip is a flex row that
   overflowed off the right on narrow screens with no way to reach the hidden
   agents. Make it horizontally scrollable and keep each tab at natural width. */
.uf-cf-tabstrip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.uf-cf-tabstrip::-webkit-scrollbar { height: 0; display: none; }
.uf-cf-tabstrip > button { flex-shrink: 0; white-space: nowrap; }

/* ── Tabs (Preview / Files) ─────────────────────────────────────── */
.td-tab-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
/* Wrapper around the Preview/Code tabs. `display: contents` on desktop so the
   buttons act as direct children of .td-tab-bar (underline tabs unchanged); on
   mobile it becomes the grey segmented-pill container matching the AI Builder
   version overlay (.ws-vo-tabs) — see the @media (max-width:640px) block. */
.td-tabs-group { display: contents; }
.td-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
}
.td-tab .material-symbols-outlined { font-size: 16px; }
.td-tab:hover { color: #374151; }
.td-tab.active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
}
/* Tab-bar tools cluster — viewport toggles + notes + maximize, grouped
   and right-aligned. The viewport group hides on the Code tab; the
   maximize button stays visible on both. */
.td-tab-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.td-viewport-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Maximize toggle — 36×36 round, borderless, transparent at rest with a
   subtle gray hover (matches the shared `.pf-vp:hover`). Visible on BOTH
   Preview + Code tabs. */
.td-tab-max {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.td-tab-max:hover { background: #f3f4f6; }
.td-tab-max .material-symbols-outlined { font-size: 20px; }
.td-preview-pane,
.td-files-pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Floor lives on .td-shell now; inner panes flex-fill the
       column so they stay within the viewport-bound shell. */
    min-height: 0;
}

/* Files tab — tree on left, viewer on right. */
.td-files-pane {
    flex-direction: row !important;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    /* Inherits flex:1 from the base rule — fills the column. The
       shell caps height so internal scrollers stay bounded. */
    min-height: 0 !important;
}
.td-file-tree {
    width: 280px;
    flex-shrink: 0;
    min-width: 200px;
    max-width: 600px;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    background: #f9fafb;
    padding: 8px 0;
    position: relative;
}
.td-file-tree-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 2;
    user-select: none;
    background: transparent;
    transition: background 150ms ease;
}
.td-file-tree-resizer:hover,
.td-file-tree-resizer.dragging {
    background: rgba(26,115,232,0.2);
}

/* Hover-only thin scrollbar on tree, viewer, and inner <pre> —
   matches the .uf-custom-modal-body pattern (CLAUDE.md §17) so the
   Code tab feels visually consistent with the Preview iframe. */
.td-file-tree,
.td-file-viewer,
.td-file-viewer pre {
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}
.td-file-tree:hover,
.td-file-viewer:hover,
.td-file-viewer pre:hover {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.td-file-tree::-webkit-scrollbar,
.td-file-viewer::-webkit-scrollbar,
.td-file-viewer pre::-webkit-scrollbar { width: 0; height: 0; }
.td-file-tree:hover::-webkit-scrollbar,
.td-file-viewer:hover::-webkit-scrollbar,
.td-file-viewer pre:hover::-webkit-scrollbar { width: 6px; height: 6px; }
.td-file-tree::-webkit-scrollbar-track,
.td-file-viewer::-webkit-scrollbar-track,
.td-file-viewer pre::-webkit-scrollbar-track { background: transparent; }
.td-file-tree::-webkit-scrollbar-thumb,
.td-file-viewer::-webkit-scrollbar-thumb,
.td-file-viewer pre::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
.td-file-tree:hover::-webkit-scrollbar-thumb,
.td-file-viewer:hover::-webkit-scrollbar-thumb,
.td-file-viewer pre:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
}
.td-file-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-file-tree-item:hover { background: #f3f4f6; }
.td-file-tree-item.active {
    background: #eff6ff;
    color: #1a73e8;
    border-left-color: #1a73e8;
    font-weight: 500;
}
.td-file-tree-item .material-symbols-outlined {
    font-size: 14px;
    color: #9ca3af;
    flex-shrink: 0;
}
.td-file-tree-item.active .material-symbols-outlined { color: #1a73e8; }

/* Folder rows — bolder text, rotating chevron, click-to-toggle. */
.td-file-tree-item.td-dir-row {
    color: #374151;
    font-weight: 500;
}
.td-file-tree-item.td-dir-row:hover { background: #f3f4f6; }
.td-file-tree-item .td-chevron {
    font-size: 14px;
    color: #9ca3af;
    transition: transform 150ms ease;
    flex-shrink: 0;
    width: 14px;
}
.td-file-tree-item.td-dir-row.expanded .td-chevron {
    transform: rotate(90deg);
}
.td-file-tree-children.collapsed { display: none; }
.td-file-tree-empty {
    padding: 16px;
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
}
.td-file-viewer {
    flex: 1;
    /* Outer viewer never scrolls — the <pre> below owns the scroll.
       Otherwise nested scrollers fight and the page-level scroll
       wins on tall files. */
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.td-file-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
    background: #fafafa;
    font-size: 12px;
    color: #6b7280;
}
.td-file-viewer-header .td-file-path {
    font-family: 'SF Mono', Consolas, Monaco, 'Courier New', monospace;
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-file-viewer pre {
    margin: 0;
    padding: 14px 18px;
    font-family: 'SF Mono', Consolas, Monaco, 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: #374151;
    background: #fff;
    white-space: pre;
    /* Pre is the scrollable region — fills remaining viewer height
       and scrolls vertically + horizontally as needed. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
/* Image preview — wrapper owns the scroll so the full image is
   always visible (no cropping, no compression). The image fits
   horizontally via max-width:100%; vertical overflow scrolls. */
.td-file-image-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    background: #fafafa;
}
.td-file-image-wrap img.td-file-image-preview {
    /* Render at intrinsic pixel size (sharp 1:1) up to the wrapper's
       bounds; only scale down when natural size exceeds wrapper.
       Mirrors the lightbox treatment. */
    max-width: 100%;
    max-height: 100%;
    width: max-content;
    height: auto;
    flex-shrink: 0;
    display: block;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* Hover-only thin scrollbar — matches tree/viewer pattern. */
.td-file-image-wrap {
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}
.td-file-image-wrap:hover {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.td-file-image-wrap::-webkit-scrollbar { width: 0; height: 0; }
.td-file-image-wrap:hover::-webkit-scrollbar { width: 6px; height: 6px; }
.td-file-image-wrap::-webkit-scrollbar-track { background: transparent; }
.td-file-image-wrap::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
.td-file-image-wrap:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
}
.td-file-empty {
    padding: 60px 24px;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
}
.td-file-binary {
    padding: 40px 24px;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

/* Deploy status strip — same visual language as the run-deploy
   chip: blue while in flight, green completed, red error. */
.td-deploy-strip {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.td-deploy-strip .material-symbols-outlined { font-size: 16px; }
.td-deploy-strip.queued,
.td-deploy-strip.running {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}
.td-deploy-strip.completed {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.td-deploy-strip.error {
    background: rgba(220,38,38,0.08);
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* ── Phase 5: detail-page sections (Highlights / About / Related) ─ */
.td-section {
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid #f3f4f6;
}
.td-section h2 {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}
.td-highlights-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Phase 5 — sections moved below .td-body so they have full
       page width. 3 cols at desktop reads richer; collapses to 2
       at <1024px and 1 at <640px via media queries below. */
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 18px;
}
.td-highlights-grid li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
}
.td-highlights-grid li .material-symbols-outlined {
    font-size: 16px;
    color: #1a73e8;
    flex-shrink: 0;
    margin-top: 1px;
}
@media (max-width: 1024px) {
    .td-highlights-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .td-highlights-grid { grid-template-columns: 1fr; }
    /* Detail-page description (Template / Showcase / Game — shared .td-*). */
    .td-description { font-size: 16px !important; }
    /* "Original prompt" section — its title (.td-section h2, shared by all
       section headings), description (.td-prompt-sub) + prompt block. */
    .td-section h2 { font-size: 14px !important; }
    .td-prompt-sub { font-size: 15px !important; }
    .td-prompt-block { font-size: 15px !important; }
    /* "How to use this template" step content — step titles + bodies. */
    .td-howto-title { font-size: 16px !important; }
    .td-howto-body { font-size: 15px !important; }
    /* Tag chips match the type/category badges (.td-badge): 11px -> 12px,
       padding 2px 8px -> 3px 10px, and bold (600) text. */
    .td-tags .tpl-card-tag,
    .td-badges .tpl-card-tag { font-size: 14px !important; padding: 3px 10px !important; font-weight: 600 !important; }
    /* Template card badges/tags match the detail page size on mobile (14px). */
    .tpl-card-badges .td-badge,
    .tpl-card-badges .tpl-card-tag { font-size: 14px !important; padding: 3px 10px !important; }
    .tpl-card-start { font-size: 14px !important; padding: 11px 14px !important; }
    /* Type/category badges match the tags (both grow to 14px, bold, on detail pages).
       .td-badge = template detail; .game-badge = game + showcase detail (they share
       the .td-badges container). Scoped to .td-badges so the card grids stay 13px. */
    .td-badges .td-badge,
    .td-badges .game-badge { font-size: 14px !important; font-weight: 600 !important; }
    /* Type/category badges + tags: single scrollable row instead of wrapping,
       so more chips are reachable without eating vertical space (mobile-app
       chip-carousel convention, same as .ps-pub-actions). Scrollbar hidden. */
    .td-badges, .td-tags {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .td-badges::-webkit-scrollbar, .td-tags::-webkit-scrollbar { display: none; }
    .td-badges > *, .td-tags > * { flex-shrink: 0 !important; }
    /* Preview / Code / Max controls on the Game / Template / Showcase detail
       pages match the AI Builder version overlay (.ws-vo-tabs / .ws-vo-max):
       a grey segmented pill for the tabs + a round grey Max button, instead of
       the underline tab bar. */
    .td-tab-bar { border-bottom: 0 !important; }
    .td-tabs-group {
        display: inline-flex !important;
        gap: 4px !important;
        background: #f3f4f6 !important;
        border-radius: 9999px !important;
        padding: 3px !important;
    }
    .td-tab {
        border-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 9999px !important;
        padding: 6px 14px !important;
        font-weight: 600 !important;
        background: transparent !important;
    }
    /* Text-only labels, exactly like the AI Builder tabs (no leading icon). */
    .td-tabs-group .td-tab .material-symbols-outlined { display: none !important; }
    .td-tab.active {
        background: #fff !important;
        color: #1a73e8 !important;
        border-bottom-color: transparent !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }
    /* Round grey Max button — matches .ws-vo-max. */
    .td-tab-max {
        background: #f2f2f2 !important;
        color: #374151 !important;
    }
    .td-tab-max:hover { background: #e5e5e5 !important; }
}
.td-about-body {
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
    margin: 0;
    white-space: pre-wrap;
}
/* Prompt section — the build's generating prompt, shown capped-height with a
   thin hover-only internal scroll (same family as .uf-custom-modal-body). */
.td-prompt-sub {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 10px;
    line-height: 1.5;
}
.td-prompt-block {
    margin: 0 0 12px;
    max-height: 260px;
    overflow: auto;
    background: #f6f8fa;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-word;
    /* Thin hover-only scrollbar — matches the detail page convention. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.td-prompt-block:hover {
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.td-prompt-block::-webkit-scrollbar { width: 6px; height: 6px; }
.td-prompt-block::-webkit-scrollbar-track { background: transparent; }
.td-prompt-block::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.td-prompt-block:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.td-prompt-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Horizontal scroller for related templates — hover-only thin
   scrollbar mirrors the rest of the detail page. */
.td-related-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}
.td-related-row:hover {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.td-related-row::-webkit-scrollbar { height: 0; width: 0; }
.td-related-row:hover::-webkit-scrollbar { height: 6px; }
.td-related-row::-webkit-scrollbar-track { background: transparent; }
.td-related-row::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.td-related-row:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }

/* Compact variant of .tpl-card for the related row — fixed-width
   horizontal cells, no kebab, no description / tag chrome. */
.td-related-row .tpl-card.compact {
    flex: 0 0 280px;
    min-width: 280px;
}
.td-related-row .tpl-card.compact .tpl-card-kebab { display: none; }
.td-related-row .tpl-card.compact .tpl-card-body {
    padding: 12px 14px;
}
.td-related-row .tpl-card.compact .tpl-card-name { font-size: 14px; }
.td-related-row .tpl-card.compact .tpl-card-desc { display: none; }
/* Buttons never wrap their own text; in the narrow related/compact cards the
   Open + Use-as-template pair stacks vertically (full-width) so "Use as template"
   stays on one line instead of breaking across two. The wide grid keeps them
   side-by-side. */
.tpl-card-actions button { white-space: nowrap; }
/* Related-builds cards are narrow (~280px) — stack Open + Use-as-template in two
   full-width rows so neither button's label wraps or overflows. The wide main
   grid keeps them side-by-side. */
.td-related-row .tpl-card-actions { flex-direction: column; }
.td-related-row .tpl-card.compact .tpl-card-tags,
.td-related-row .tpl-card.compact .tpl-card-badges .tpl-card-tag { display: none; }

/* Showcase "Related builds" reuses WebsiteShowcase._renderCard, which emits a
   full (non-compact) .tpl-card. Give those a fixed horizontal cell width so the
   row scrolls rather than squeezing cards. */
.td-related-row > .tpl-card {
    flex: 0 0 280px;
    min-width: 280px;
}

/* How-to list — numbered steps with icon + title + 1-line body.
   Always rendered (static content; no per-template data). */
.td-howto-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.td-howto-list li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    background: #f6f8fa;
    border-radius: 12px;
}
.td-howto-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eff6ff;
    color: #1a73e8;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.td-howto-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.td-howto-title .material-symbols-outlined {
    font-size: 18px;
    color: #1a73e8;
}
.td-howto-body {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}
.td-howto-body em {
    color: #374151;
    font-style: normal;
    font-weight: 600;
}

/* ── Phase 6: welcome-screen template chip with seed/reference toggle ─ */
.ws-seed-chip {
    background: #eff6ff;
    border: none;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ws-seed-chip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1a73e8;
    font-weight: 600;
    font-size: 13px;
}
.ws-seed-chip-header em {
    font-style: italic;
    color: #1a73e8;
}
/* Subhint under the chip header explaining the upcoming choice. */
.ws-seed-chip-subhint {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    margin-top: -4px;
}
.ws-template-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ws-template-mode-toggle button {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms ease, background 150ms ease;
}
.ws-template-mode-toggle button:hover:not(:disabled) {
    background: #f9fafb;
}
.ws-template-mode-toggle button.active {
    border-color: #1a73e8;
    background: #eff6ff;
}
.ws-template-mode-toggle button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ws-template-mode-toggle button .row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.ws-template-mode-toggle button .row .material-symbols-outlined {
    font-size: 16px;
    color: #1a73e8;
}
.ws-template-mode-toggle button .hint {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}
@media (max-width: 640px) {
    .ws-template-mode-toggle { grid-template-columns: 1fr; }
}
.ws-seed-chip-remove {
    padding: 6px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    background: #fff;
    color: #1a73e8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ws-seed-chip-remove:hover { background: #eff6ff; }

/* Phase 6: green confirmation chip after user attaches as reference.
   Two-line layout: row 1 = icon + main message, row 2 = next-step
   hint indented under the message. */
.ws-reference-confirm-chip {
    background: #ecfdf5;
    border: none;
    color: #065f46;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    line-height: 1.5;
}
.ws-reference-confirm-chip .row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ws-reference-confirm-chip .next-hint {
    font-size: 11px;
    opacity: 0.85;
    margin-left: 26px;  /* aligns under the icon's text column */
    line-height: 1.4;
}
.ws-reference-confirm-chip .material-symbols-outlined {
    font-size: 18px;
    color: #065f46;
    flex-shrink: 0;
}
/* Blue variant for the parallel seed-confirmation chip — same shape
   as the green reference one but uses the seed-mode (blue) palette
   so the two states visually distinguish at a glance. */
.ws-reference-confirm-chip.seed {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}
.ws-reference-confirm-chip.seed .material-symbols-outlined {
    color: #1a73e8;
}
/* Neutral gray variant for the remove-confirmation chip — signals
   the action was taken without using a destructive color (red).
   Same chip shape as the green/blue siblings. */
.ws-reference-confirm-chip.removed {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #374151;
}
.ws-reference-confirm-chip.removed .material-symbols-outlined {
    color: #6b7280;
}

/* ── Phase 9 — Version tile (template-card-shaped) + centered overlay ── */

/* Compact thumbnail-first tile in the chat preview panel. Shape mirrors
   `.tpl-card` from the Templates page; the body holds CTA pills instead
   of meta/desc/tags. */
.ws-version-tpl {
    position: relative;
    display: flex;
    flex-direction: column;
    /* No background — card blends with the (also transparent) panel
       surface. Card-ness comes purely from the drop shadow. */
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    /* Centered + larger max-width so the card has more presence in
       the 480px-wide preview panel without stretching edge-to-edge.
       Multiple cards stack vertically, all at the same width. */
    width: 100%;
    max-width: 420px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    /* No outer max-height cap. Earlier versions capped each card
       to "panel-height minus 2x padding" (via --ws-version-card-max-h)
       to make a single card visually balanced with the panel
       gaps. With multi-version stacks (v1 + v2 + v3 + …) that cap
       broke scrolling: each card filled the panel, sibling cards
       got clipped, and the panel body never overflowed enough for
       its overflow-y:auto to engage. Cards now grow to their
       natural content height; the panel body scrolls when the
       cumulative height exceeds the available column height. */
}
/* Keep the body row at natural height when the feed is present
   so the feed (the most data-dense part) doesn't get squeezed.
   :has() — modern browsers only. */
.ws-version-tpl:has(.ws-feed) .ws-vt-body {
    flex: 0 0 auto;
}
.ws-version-tpl .ws-feed {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Activity feed inside a card keeps its own 360 px scroll cap so
   one chatty in-flight run can't push every other card off-screen.
   Long event histories scroll WITHIN the feed body. */
.ws-version-tpl .ws-feed-body {
    max-height: 360px;
}
.ws-version-tpl:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.ws-vt-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
}
.ws-vt-thumb > img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 250ms ease;
}
.ws-vt-thumb.clickable { cursor: pointer; }
.ws-vt-thumb.clickable:hover > img { transform: scale(1.02); }
.ws-vt-body {
    padding: 12px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.ws-vt-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ws-vt-time {
    margin-left: auto;
    color: #9ca3af;
    font-size: 11px;
}
.ws-vt-title {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-vt-meta {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}
.ws-vt-ctas {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.ws-vt-cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #1a73e8;
    border-radius: 9999px;
    background: #fff;
    color: #1a73e8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.ws-vt-cta:hover { background: #eff6ff; }
/* My Builds grid: make cards fill their row height and bottom-anchor the
   Preview/Code CTAs so they line up across a row regardless of how many xref
   badges (Published / Template / Deployed) a card carries — a variable badges
   row otherwise pushes the CTAs to different heights. Scoped to .mw-card in the
   grid so the in-chat .ws-version-tpl cards (stacked vertically, centered at
   max-width) keep their content-height layout. */
.tpl-grid-page .ws-version-tpl.mw-card { align-self: stretch; }
.mw-card .ws-vt-ctas { margin-top: auto; }
/* Ghost variant for the on-card "Install app" button — no filled background so it
   blends into the green "ready" strip instead of reading as a white box; keeps the
   blue outline + text and the subtle hover tint. */
.ws-vt-cta--ghost { background: transparent; }
.ws-vt-cta.primary {
    background: #1a73e8;
    color: #fff;
}
.ws-vt-cta.primary:hover { background: #1557b0; }
.ws-vt-cta .material-symbols-outlined { font-size: 16px; }
.ws-vt-deploy {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 8px;
    line-height: 1.4;
}
.ws-vt-deploy.ok    { background: rgba(22,163,74,0.08); color: #166534; }
/* Install-only built strip: the green "ready" tint + strip padding are vestigial
   now that the strip holds only the Install button (the "Ready" text was removed).
   Strip them so the button sits flush like the Preview/Code CTA row. */
.ws-vt-deploy.ws-vt-deploy--bare { background: transparent; padding: 0; }
.ws-vt-deploy.busy  { background: rgba(245,158,11,0.08); color: #92400e; }
.ws-vt-deploy.err   { background: rgba(220,38,38,0.08); color: #991b1b; }
.ws-vt-deploy .material-symbols-outlined { font-size: 13px; vertical-align: middle; }
.ws-vt-deploy a { color: inherit; text-decoration: underline; }
/* [Stage 4b] phase strip extras — header row + live agent-log lines + spin */
.ws-vt-deploy-head { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.ws-vt-deploy-spin { animation: ws-vt-spin 1.2s linear infinite; }
@keyframes ws-vt-spin { to { transform: rotate(360deg); } }
.ws-vt-deploy-log {
    margin-top: 4px;
    padding-left: 19px;          /* aligns under the head text past the icon */
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: rgba(146,64,14,0.85);
    line-height: 1.5;
}
/* Polish G — per-file progress line surgically inserted into the
   deploy strip while files are uploading. Sits between the head
   row and the streaming agent log (when present). */
.ws-vt-deploy-progress {
    margin-top: 4px;
    padding-left: 19px;
    font-size: 11px;
    color: #c77700;
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}
.ws-vt-deploy-progress-counter {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 600;
    color: #92400e;
    flex-shrink: 0;
}
.ws-vt-deploy-progress-path {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-vt-deploy-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-vt-deploy-detail {
    display: block;
    margin-top: 2px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: rgba(153,27,27,0.85);
    white-space: pre-wrap;
}

/* [Phase A] Browser-verify strip on the version tile. Matches the
   deploy-strip footprint above but lives below it (deploy is the
   higher-priority verb; verify is a follow-up diagnostic). */
.ws-vt-verify {
    font-size: 11px;
    border-radius: 8px;
    line-height: 1.4;
    overflow: hidden;
}
.ws-vt-verify.ok      { background: rgba(22,163,74,0.08); color: #166534; }
.ws-vt-verify.warning { background: rgba(234,179,8,0.10); color: #854d0e; }
.ws-vt-verify.fail    { background: rgba(220,38,38,0.08); color: #991b1b; }
.ws-vt-verify.busy    { background: rgba(59,130,246,0.08); color: #1e40af; padding: 6px 10px; }
.ws-vt-verify.error   { background: rgba(156,163,175,0.12); color: #4b5563; padding: 6px 10px; }
.ws-vt-verify.busy .material-symbols-outlined,
.ws-vt-verify.error .material-symbols-outlined { font-size: 13px; vertical-align: middle; }
.ws-vt-verify-spin { animation: ws-vt-spin 1.2s linear infinite; }
.ws-vt-verify-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.ws-vt-verify-head:hover { background: rgba(0,0,0,0.04); }
.ws-vt-verify-icon { font-size: 14px; }
.ws-vt-verify-msg { flex: 1; }
.ws-vt-verify-caret { font-size: 16px; opacity: 0.6; }
.ws-vt-verify-detail { opacity: 0.75; font-style: italic; }

.ws-vt-verify-body {
    padding: 4px 10px 10px;
}
.ws-vt-verify-shots {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
}
.ws-vt-verify-shot {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
    text-decoration: none;
    color: inherit;
    position: relative;
}
.ws-vt-verify-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #f9fafb;
}
.ws-vt-verify-shot-label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 10px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.ws-vt-verify-shot-label .material-symbols-outlined { font-size: 12px; }
/* [Unified deploy] note under the "Live at" line when the deploy landed
   on a different host than the nominal domain (occupied-apex case). */
.ws-vt-deploy-note {
    margin-top: 3px;
    padding-left: 19px;
    font-size: 10.5px;
    color: rgba(22,101,52,0.85);
    line-height: 1.5;
}
/* [Deploy versions] revert affordances under the "Live at" line —
   History (full version list) + one-click revert-to-previous. */
.ws-vt-deploy-actions {
    margin-top: 5px;
    padding-left: 19px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ws-vt-deploy-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 0;
    background: none;
    padding: 0;
    font-size: 11px;
    color: #166534;
    cursor: pointer;
    text-decoration: underline;
}
.ws-vt-deploy-link:hover { opacity: 0.75; }
.ws-vt-deploy-link .material-symbols-outlined { font-size: 13px; }
/* Non-interactive busy variant — shown while a one-click revert runs. */
.ws-vt-deploy-link-busy,
.ws-vt-deploy-link-busy:hover {
    cursor: default;
    text-decoration: none;
    opacity: 0.85;
}
/* [Unified deploy] needs_input question block on the version card */
.ws-vt-deploy.ask { background: rgba(26,115,232,0.06); color: #1a4480; }
.ws-vt-deploy-question {
    margin: 6px 0 8px;
    font-size: 12px;
    color: #1f2937;
    line-height: 1.45;
}
.ws-vt-deploy-answers { display: flex; flex-direction: column; gap: 6px; }
.ws-vt-deploy-answer {
    display: flex; flex-direction: column; gap: 2px;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid #c7d2e8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.ws-vt-deploy-answer:hover { border-color: #1a73e8; background: #f5f9ff; }
.ws-vt-answer-label { font-size: 12px; font-weight: 600; color: #111827; }
.ws-vt-answer-desc { font-size: 10.5px; color: #6b7280; line-height: 1.4; }
.ws-vt-deploy-answer:disabled { cursor: default; opacity: 0.55; }
.ws-vt-deploy-answer.is-loading { border-color: #1a73e8; background: #f5f9ff; opacity: 1; }
.ws-vt-deploy-answer.is-loading .ws-vt-answer-label {
    color: #1a73e8; display: inline-flex; align-items: center; gap: 6px;
}
.ws-vt-deploy-answer.is-loading .ws-vt-answer-label::before {
    content: ""; width: 11px; height: 11px; flex: 0 0 auto;
    border: 2px solid #1a73e8; border-top-color: transparent;
    border-radius: 50%; display: inline-block;
    animation: spin 0.7s linear infinite;
}

/* Tile kebab — flat 3-dot icon, no pill chrome. Hover surfaces a
   subtle gray tint as the only affordance. */
.ws-version-tpl > .ws-version-kebab,
.game-card > .ws-version-kebab {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0;
    transition: background 150ms ease, color 150ms ease;
}
.ws-version-tpl > .ws-version-kebab:hover,
.game-card > .ws-version-kebab:hover {
    background: rgba(0,0,0,0.06);
    color: #374151;
}

/* Multi-tile grid in the right preview column. */
.ws-version-strip,
.ws-preview-panel-body {
    /* Allow either flex-column (existing layout) or this grid via
       a child override. We don't change the existing container; this
       block is here for future migration. */
}

/* ── Centered overlay (#wsVersionOverlay) — Preview/Code shell. ── */
body.ws-overlay-active {
    overflow: hidden;
}
#wsVersionOverlay {
    position: fixed;
    inset: 0;
    z-index: 5400;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
/* When the inner shell goes maximized it position:fixed-escapes the
   overlay's flex-padding, but the overlay's dimmed backdrop is still
   visible BEHIND the fully-opaque maxed shell. That's wasted paint —
   strip the backdrop bg + padding so the maxed shell IS the surface. */
#wsVersionOverlay:has(.ws-vo-shell.maxed) {
    background: transparent;
    padding: 0;
}
.ws-vo-shell {
    width: min(95vw, 1600px);
    height: min(95vh, 1080px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 200ms ease, height 200ms ease, border-radius 200ms ease;
}
/* Maximized: match the template detail page's `.td-preview-frame.maximized`
   chrome — fixed-positioned to escape the overlay backdrop's padding,
   fill 100vw/100vh on a dark background, hide all chrome, expose only
   the iframe + a floating "Exit fullscreen" pill. */
.ws-vo-shell.maxed {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    /* Light canvas matching the normal preview — the phone/tablet device
       bezels are black, so a black canvas hid their edges. */
    background: #f3f4f6;
    box-shadow: none;
    z-index: 5800;
}
.ws-vo-shell.maxed > .ws-vo-head { display: none; }
.ws-vo-shell.maxed > .ws-vo-body {
    padding: 0;
    background: #f3f4f6;
    flex: 1;
    height: 100vh;
}
/* Desktop app in fullscreen fills the viewport like a website (no fixed
   1280×800 window scaled+centered). _voFitFrame skips pf-fit for desktop
   when maxed, so the frame flexes to fill here. */
.ws-vo-shell.maxed .pf-desktop {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    border: 0;
}
.ws-vo-shell.maxed .ws-vo-iframe-slot {
    padding: 0;
    width: 100vw;
    height: 100vh;
}
.ws-vo-shell.maxed .ws-vo-iframe-slot iframe {
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    /* Fill the iframe's own screen, NOT the viewport. The iframe is nested
       inside a fixed-size device frame (pf-phone/pf-desktop/...) whose
       pf-screen is shorter than 100vh and clips overflow — forcing 100vh
       pushed the app's bottom (e.g. a mobile bottom-nav bar) below the
       clip. height:100% fills pf-screen for framed previews and still
       fills the slot for any bare iframe. */
    height: 100%;
    min-height: 0;
}
/* Mobile / tablet viewport modifiers still cap the iframe width
   inside the maxed shell (matches template page behavior). */
.ws-vo-shell.maxed .ws-vo-iframe-slot.viewport-tablet iframe { max-width: 768px; }
.ws-vo-shell.maxed .ws-vo-iframe-slot.viewport-mobile iframe { max-width: 375px; }
/* Center the scaled device-framed preview (phone/desktop/extension) on
   both axes — in the normal overlay AND fullscreen. Scoped to framed
   previews via :has(.pf-fit) so flexing browser frames (no pf-fit, used
   by websites) still stretch to fill the area. transform-origin center
   so the scaled box centers on its layout box rather than top-anchoring.
   Scoped to .ws-vo-body so the template-detail page's pf-fit is untouched. */
.ws-vo-body .ws-vo-iframe-slot:has(.pf-fit) { align-items: center; }
.ws-vo-body .pf-fit { transform-origin: center center; }
/* When Code tab is open in maxed mode, give it the full viewport. */
.ws-vo-shell.maxed .ws-code-tab {
    width: 100vw;
    height: 100vh;
}
.ws-vo-max-exit {
    position: fixed;
    top: 24px;
    right: 32px;
    z-index: 5810;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.95);
    color: #374151;
    border: 0;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.ws-vo-max-exit:hover { background: #fff; }
.ws-vo-max-exit .material-symbols-outlined { font-size: 16px; }
#wsVersionOverlay .ws-vo-shell.maxed ~ .ws-vo-max-exit,
.ws-vo-shell.maxed + .ws-vo-max-exit { display: inline-flex; }
.ws-vo-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.ws-vo-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    /* Phase 15.31: unified overlay-chrome primary text to #374151
       (was #111827) — same canonical body-text tone as the chat
       thread bubble + plan card + sidebar session titles. */
    color: #374151;
    min-width: 0;
}
.ws-vo-title .ws-version-badge {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
}
.ws-vo-tabs {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    border-radius: 9999px;
    padding: 3px;
}
.ws-vo-tabs button {
    background: transparent;
    border: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.ws-vo-tabs button:hover { color: #374151; }
.ws-vo-tabs button.active {
    background: #fff;
    color: #1a73e8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ws-vo-tools {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.ws-vo-vp {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}
.ws-vo-vp.active {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
}
.ws-vo-vp .material-symbols-outlined { font-size: 18px; }
.ws-vo-max {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #f2f2f2;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-vo-max:hover { background: #e5e5e5; }
.ws-vo-max .material-symbols-outlined { font-size: 20px; }
/* Close button — desktop hides it (backdrop click is the exit); the
   max-width:640px block reveals it for full-screen phone overlays. */
.ws-vo-close {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #f2f2f2;
    color: #374151;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ws-vo-close:hover { background: #e5e5e5; }

/* Plan card buttons — hover affordance.
   Inline styles can't carry :hover pseudo-rules, so the buttons get a
   class hook and real hover lives here. !important beats the inline
   background color set by the JS markup. */
.ws-btn-approve {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.ws-btn-approve:not(:disabled):hover {
    background: #1557b0 !important;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.25);
}
.ws-btn-revise {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ws-btn-revise:not(:disabled):hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}
.ws-vo-body {
    flex: 1;
    min-height: 0;
    display: flex;
    background: #f3f4f6;
    overflow: hidden;
}
.ws-vo-iframe-slot {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    position: relative;
    transition: padding 200ms ease;
}
.ws-vo-iframe-slot iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: max-width 200ms ease;
}
/* Phase 9 — loading overlay covers the iframe area while content
   loads (initial open OR in-iframe link navigation). Toggled via
   `.hidden` class which fades it out cleanly. */
.ws-vo-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 180ms ease;
    border-radius: 8px;
}
.ws-vo-loading.hidden { opacity: 0; }
.ws-vo-loading .material-symbols-outlined {
    font-size: 32px;
    color: #1a73e8;
    animation: spin 1s linear infinite;
}
/* Maximize mode: dark loader bg matches the dark canvas so it
   doesn't flash bright white on top of the maximize backdrop. */
.ws-vo-shell.maxed .ws-vo-loading {
    background: #fff;
    color: #6b7280;
    border-radius: 0;
}
.ws-vo-shell.maxed .ws-vo-loading .material-symbols-outlined {
    color: #93c5fd;
}
.ws-vo-iframe-slot.viewport-tablet iframe { max-width: 768px; }
.ws-vo-iframe-slot.viewport-mobile iframe { max-width: 375px; }

/* Code tab inside the overlay — overrides the Phase 7 `.ws-code-tab`
   sizing rules so the tree+viewer fill the entire overlay body. */
.ws-vo-body .ws-code-tab {
    flex: 1;
    min-height: 0;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: #fff;
}

@media (max-width: 640px) {
    /* Full-bleed preview overlay on phones — 100dvh so it tracks the mobile
       URL bar the same way the sealed chat pages do. */
    #wsVersionOverlay { padding: 0; }
    .ws-vo-shell:not(.maxed) { width: 100vw; height: 100dvh; border-radius: 0; }
    /* Keep the head on ONE compact row. It used to `flex-wrap` into three rows
       (title / tabs / viewport-tools) ~140px tall, which pushed the site
       preview down and clipped its bottom. Hide the redundant title (the
       preview's own browser-frame URL bar already shows it), shrink the
       controls, and keep tabs + tools + maximize + close inline. */
    .ws-vo-head { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; }
    .ws-vo-title { display: none; }
    .ws-vo-tabs button { padding: 6px 12px; }
    .ws-vo-tools { order: 0; width: auto; gap: 2px; }
    .ws-vo-vp { width: 30px; height: 30px; }
    .ws-vo-max { width: 32px; height: 32px; }
    /* Reveal the close button — the full-screen shell has no backdrop to tap. */
    .ws-vo-close { display: inline-flex; width: 32px; height: 32px; }

    /* Code tab: stack the file tree ABOVE the viewer on phones. The tree is a
       fixed 280px side column on desktop (inline flex:0 0 280px), which on a
       390px screen leaves the code viewer ~110px wide — unusable. Stacked, the
       tree gets a scrollable strip on top and the viewer fills the full width
       below. The divider between them is a DRAGGABLE row-resize bar so the user
       can give the tree or the viewer more room (height stored in
       --ws-code-tree-h; JS clamps + persists it). */
    .ws-vo-body .ws-code-tab { flex-direction: column; }
    .ws-vo-body .ws-code-tree {
        flex: 0 0 var(--ws-code-tree-h, 50%) !important;  /* beat inline flex:0 0 280px; 50% centers the split */
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 72px;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    /* Reposition the desktop col-resize handle as a full-width row-resize bar
       pinned to the bottom edge of the tree (the divider with the viewer). */
    .ws-vo-body .ws-code-tree-resizer {
        display: block;
        top: auto; bottom: 0; left: 0; right: 0;
        width: auto; height: 12px;
        cursor: row-resize;
        touch-action: none;
    }
    .ws-vo-body .ws-code-tree-resizer::after {
        content: '';
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 40px; height: 4px;
        border-radius: 2px;
        background: #cbd5e1;
    }
    .ws-vo-body .ws-code-tree-resizer:active::after,
    .ws-vo-body .ws-code-tree-resizer.dragging::after { background: #1a73e8; }
    .ws-vo-body .ws-code-viewer { width: 100%; min-height: 0; }

    /* Template / Showcase / Game detail — Files view parity with the AI Builder
       Code tab on phones. The shared td-* classes cover all three detail pages.
       Give the pane a sealed height so the tree stacks ABOVE the viewer with a
       draggable row-resize divider (height in --td-tree-h; JS clamps/persists),
       matching the overlay. Default 50% = centered split. */
    .td-files-pane {
        flex-direction: column !important;
        height: 70vh;
        min-height: 0 !important;
    }
    /* Maximized fills the whole viewport — override the 70vh sealed height so
       the fixed inset:0 pane isn't capped to 70% of the screen. */
    .td-files-pane.maximized {
        height: 100dvh !important;
    }
    .td-file-tree {
        width: 100% !important;
        min-width: 0;
        max-width: none;
        flex: 0 0 var(--td-tree-h, 50%) !important;
        min-height: 72px;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    .td-file-tree-resizer {
        top: auto; bottom: 0; left: 0; right: 0;
        width: auto; height: 12px;
        cursor: row-resize;
        touch-action: none;
    }
    .td-file-tree-resizer::after {
        content: '';
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 40px; height: 4px;
        border-radius: 2px;
        background: #cbd5e1;
    }
    .td-file-tree-resizer:active::after,
    .td-file-tree-resizer.dragging::after { background: #1a73e8; }
    .td-file-viewer { width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; }
}

/* Phase 15B — My Websites page badges. Worn at the bottom of each
   .tpl-card to cross-reference Template / Published / Deployed state. */
.mw-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.mw-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}
.mw-badge-template  { background: #eef2ff; color: #3730a3; }
.mw-badge-published { background: #dcfce7; color: #166534; }
.mw-badge-deployed  { background: #fef3c7; color: #92400e; }
.mw-card .tpl-card-meta { min-height: 0; }

/* Phase 15B — My Websites mw-card uses .ws-version-tpl shape for full
   visual parity with the in-chat version card. Adds two extras: the
   chat-context line under the title, and the cross-reference badges
   row (Template / Published / Deployed). The base ws-version-tpl rule
   pins max-width: 420px because it was designed for the narrow chat
   preview pane; on the My Websites grid we want each card to fill its
   3-col cell, so undo those size constraints. */
.mw-card.ws-version-tpl {
    max-width: none;
    align-self: stretch;
    margin-left: 0;
    margin-right: 0;
}
.mw-card .mw-chat-line {
    color: #6b7280;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.mw-card .mw-chat-line .material-symbols-outlined {
    font-size: 13px;
    color: #9ca3af;
}
.mw-card .mw-badges {
    margin-top: 6px;
}

/* Phase 15B — My Websites toolbar: hint on the left, search on the
   right, single horizontal row. Wraps to two rows under ~640px so the
   search input doesn't get crushed against the hint copy. */
.mw-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.mw-hint {
    flex: 1 1 auto;
    min-width: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}
.mw-count {
    flex: 0 0 auto;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.mw-search-row {
    position: relative;
    flex: 1 1 auto;
}
@media (max-width: 640px) {
    .mw-search-row {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }
}
.mw-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 18px;
    pointer-events: none;
}
.mw-search-input {
    width: 100%;
    padding: 9px 14px 9px 38px;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    color: #111827;
    font-size: 13px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mw-search-input:hover:not(:focus) { border-color: #d1d5db; }
.mw-search-input:focus {
    outline: none;
    border-color: #1a73e8;
}

/* ================================================================
   .deploy-target-card — Settings → Deploy target cards. Subtle
   hover affordance: border darkens + 1px elevation shadow so the
   card feels interactive even though only Edit / Delete buttons
   are clickable. Transition declared inline on the element so
   the change animates in both directions.
   ================================================================ */
.deploy-target-card:hover {
    border-color: #d1d5db !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── Website Generator — structured intake question card ───────── */
.ws-question-card {
    align-self: flex-start;
    max-width: 85%;
    min-width: 0;
    border-radius: 14px;
    padding: 18px 20px;
    margin: 10px 0;
    background: #f9fafb;
}
.ws-question-card.locked {
    opacity: 0.7;
}
.ws-q-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: #1a73e8;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.ws-q-block {
    margin-top: 16px;
}
.ws-q-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}
.ws-q-optional {
    font-weight: 400;
    color: #9ca3af;
    margin-left: 4px;
}
.ws-q-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ws-q-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.ws-q-chip:hover {
    border-color: #9ca3af;
}
.ws-q-chip.selected {
    border-color: #1a73e8;
    background: #eff6ff;
    color: #1a73e8;
}
.ws-question-card.locked .ws-q-chip {
    cursor: default;
    pointer-events: none;
}
.ws-q-swatch-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.ws-q-text {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
}
.ws-q-text:focus {
    outline: none;
    border-color: #1a73e8;
}
/* The "Other…" custom input is a multi-line textarea styled to match
   the session chat input box (.ai-chat-page-input-box): grey fill,
   24px radius, transparent border that flips blue + white-fill on
   focus, thin hover-only scrollbar, wraps + scrolls past 120px. */
.ws-q-custom {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: #f1f3f4;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    color: #374151;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ws-q-custom:hover,
.ws-q-custom:focus {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.ws-q-custom::-webkit-scrollbar { width: 6px; }
.ws-q-custom::-webkit-scrollbar-track { background: transparent; }
.ws-q-custom::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.ws-q-custom:hover::-webkit-scrollbar-thumb,
.ws-q-custom:focus::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }
.ws-q-custom:focus {
    outline: none;
    border-color: #1a73e8;
    background: #fff;
}
.ws-q-custom-wrap {
    margin-top: 8px;
}
.ws-q-color-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.ws-q-color-custom input[type="color"] {
    width: 36px;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
}
.ws-q-hint {
    margin-top: 12px;
    font-size: 12px;
    color: #b91c1c;
}
.ws-q-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}
.ws-q-submit {
    padding: 10px 20px;
    border: none;
    border-radius: 9999px;
    background: #1a73e8;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ws-q-skip {
    padding: 10px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 9999px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ws-q-skip:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
.ws-q-answered {
    margin-top: 12px;
    font-size: 12px;
    color: #166534;
}
/* Inline colour swatch rendered after a #hex in chat prose. */
.ws-color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: middle;
    margin: 0 2px;
}

/* SEO factory collapsible chat */
.uf-chat-panel{position:fixed;top:60px;right:0;bottom:0;width:380px;background:#fff;
  border-left:1px solid #d1d5db;box-shadow:-4px 0 12px rgba(0,0,0,.06);display:flex;
  flex-direction:column;transform:translateX(100%);transition:transform .22s ease;z-index:1200;}
body.uf-chat-open .uf-chat-panel{transform:translateX(0);}
body.uf-chat-open .user-factory-main{margin-right:380px;transition:margin-right .22s ease;}
.uf-chat-panel-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid #e5e7eb;flex-shrink:0;}
.uf-chat-panel-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.uf-chat-toggle{background:#1a73e8;color:#fff;border:none;border-radius:9999px;
  padding:6px 14px;cursor:pointer;font-weight:600;}
body.uf-chat-open .uf-chat-toggle{background:#eef2ff;color:#1a73e8;}
@media (max-width:900px){.uf-chat-panel{width:100%;} body.uf-chat-open .user-factory-main{margin-right:0;}}

/* ── Factory task configs table (FEATURE_FACTORY_TASK_CONFIGS, Phase 3a) ──
   Reusable saved-config list rendered by dashboard/js/user-factory-configs.js.
   Matches the factory table aesthetic: thin borders, muted header row, pill
   action buttons. Dormant until the feature is wired into the page. */
.uf-configs-table{width:100%;border-collapse:collapse;font-size:13px;}
.uf-configs-table thead{background:#f6f8fa;}
.uf-configs-table th{text-align:left;font-weight:600;color:#6b7280;
  padding:10px 14px;white-space:nowrap;}
.uf-configs-table td{padding:12px 14px;border-bottom:1px solid #f3f4f6;
  color:#374151;vertical-align:middle;}
.uf-configs-table tbody tr:hover{background:#f9fafb;}
.sa-table tbody tr:hover{background:#f9fafb;}
/* My Dashboard list rows (recent builds / activity / attention) */
.ud-list-row{transition:background .12s;}
.ud-list-row:hover{background:#f9fafb;}
#portfolioBody table tbody tr:hover{background:#f9fafb;}
.uf-configs-actions{white-space:nowrap;text-align:right;}
.uf-config-action{border:1px solid #e5e7eb;background:#fff;border-radius:9999px;
  width:30px;height:30px;margin-left:6px;cursor:pointer;font-size:14px;color:#374151;
  line-height:1;display:inline-flex;align-items:center;justify-content:center;
  transition:background 0.12s ease,border-color 0.12s ease;}
.uf-config-action:hover{background:#f3f4f6;border-color:#d1d5db;}
.uf-config-action--danger:hover{background:#fef2f2;border-color:#fecaca;color:#c13515;}
/* "Starting…" state for the per-config Start button — disabled + spinner. */
.uf-config-action--busy{cursor:wait;opacity:0.8;}
.uf-config-action--busy:hover{background:#fff;border-color:#e5e7eb;}
.uf-config-spinner{width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(26,115,232,0.25);border-top-color:#1a73e8;
  display:inline-block;animation:spin 0.8s linear infinite;}
.uf-configs-empty{color:#9ca3af;font-size:13px;text-align:center;padding:32px 16px;}

/* Mobile: bigger section titles (Runs / Insights & activity), tab names, and
   empty-state hints on the SEO Tasks + Advertising tasks pages (agents-hub /
   factory). Titles + tabs use inline styles, so match them by attribute. */
@media (max-width: 640px) {
    #page-workload-tasks h3[style*="font-size:14px"],
    #page-user-factory h3[style*="font-size:14px"],
    .agents-hub .hub-section-title,
    .hub-section-title { font-size: 18px !important; }
    #page-workload-tasks [data-tab],
    #page-user-factory [data-tab] { font-size: 16px !important; }
    /* Tasks + Runs empty-state hints match the Recent-actions hint styling:
       larger text + roomier 40px padding (same muted colour, centred). */
    .uf-configs-empty,
    .agents-hub .empty { font-size: 16px !important; padding: 40px 16px !important; }
    /* Insight tabs (Recent actions / What's working / Prompt evolution) stay on
       one horizontally-scrollable row instead of wrapping. */
    .uf-insight-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .uf-insight-tabs::-webkit-scrollbar { display: none; }
    .uf-insight-tabs > [data-tab] { flex-shrink: 0; white-space: nowrap; }
    /* Schedules page: bigger filter chips (All/Enabled/Disabled) + row action
       buttons (edit) for easier tapping. */
    #page-schedules .uf-filter-chip { font-size: 14px !important; padding: 9px 16px !important; }
    #page-schedules .uf-config-action { width: 40px !important; height: 40px !important; font-size: 18px !important; }
    #page-schedules .uf-config-action .material-symbols-outlined { font-size: 20px !important; }
    /* Agents page: bigger SEO / Advertising suite tabs. */
    #page-agents .hub-suite-tab { font-size: 16px !important; padding: 10px 16px !important; }
    #page-agents .hub-suite-tab .material-symbols-outlined { font-size: 20px !important; }
    /* Learnings page: bigger search box + its label/icon. */
    #page-learnings .filter-input { font-size: 15px !important; padding: 12px 16px !important; }
    #page-learnings .filter-label { font-size: 15px !important; }
    #page-learnings .filter-label .material-symbols-outlined { font-size: 22px !important; }
    /* My Domains toolbar: keep the four action buttons (Sync All / Schedule /
       Bulk add / Add Domain) on one horizontally-scrollable row on phones. */
    #page-user-domains .ud-action-row {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #page-user-domains .ud-action-row::-webkit-scrollbar { display: none; }
    /* All four buttons share the Add Domain (.btn-primary) height (46px). */
    #page-user-domains .ud-action-row > button { flex-shrink: 0; min-height: 46px !important; }
}

/* Task-config layout (flag feature_task_configs ON) — stat-card grid.
   Cards reuse the dashboard `.stat-card` fixed-gradient palette (total /
   in-progress / pending / completed / failed); this is just the responsive
   grid container. */
.uf-stat-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.uf-stat-cards .stat-card{padding:16px 18px;}
.uf-stat-cards .stat-card .number{font-size:24px;margin-bottom:0;}
/* 4-card variant (e.g. Schedules) — fill the full page width in 4 equal
   columns instead of leaving an empty 5th column. Single-class selector so the
   responsive media queries below still win at narrow widths (source order). */
.uf-stat-cards--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.uf-stat-cards{grid-template-columns:repeat(2,1fr);}}
/* On phones a single column turned each stat into a ~120px full-width block, so
   5 stats meant a wall of giant tiles. Keep a compact 2-col grid of short tiles
   instead — the numbers are single/low digits and read fine small. */
@media (max-width:520px){
    .uf-stat-cards{grid-template-columns:repeat(2,1fr);gap:12px;}
    .uf-stat-cards .stat-card{padding:16px 18px;}
    .uf-stat-cards .stat-card .number{font-size:24px;margin-bottom:0;}
    .uf-stat-cards .stat-card .label{font-size:0.7em;letter-spacing:0.3px;}
}

/* Plan-card builder-instructions readout — truncated preview hides when the
   full-text <details> is open, so the two never duplicate. */
.ws-plan-instr:has(.ws-instr-details[open]) .ws-instr-short { display: none; }
.ws-instr-details .ws-instr-hide { display: none; }
.ws-instr-details[open] .ws-instr-show { display: none; }
.ws-instr-details[open] .ws-instr-hide { display: inline; }

/* Verification badge + report panel */
.ws-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 7px;
    font-weight: 500;
    line-height: 1.6;
}
.ws-verify-badge.ok {
    background: #e6f4ea;
    color: #137333;
}
.ws-verify-badge.warn {
    background: #fef7e0;
    color: #b06000;
    cursor: pointer;
}
.ws-verify-badge .material-symbols-outlined {
    font-size: 14px;
    vertical-align: middle;
}
.ws-verify-report {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-top: 6px;
}
.ws-verify-report::-webkit-scrollbar {
    width: 6px;
}
.ws-verify-report::-webkit-scrollbar-track {
    background: transparent;
}
.ws-verify-report::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.ws-verify-report-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #202124;
}
.ws-verify-report .mf {
    color: #c5221f;
    margin-bottom: 3px;
}
.ws-verify-report .adv {
    color: #5f6368;
    margin-bottom: 3px;
}

/* ================================================================
   RTL first pass (ar / he / fa / ur) — [dir='rtl'] is set on <html>
   by i18n.js from the language registry's rtl flag. Flex/grid and
   block flow mirror automatically; these overrides cover the chrome
   that uses HARDCODED left/right offsets. Full logical-properties
   sweep (chat surfaces, modals, mobile drawers) is the scheduled
   phase-2 pass — until then those surfaces stay usable but LTR-
   anchored.                                                        */
[dir='rtl'] .sidebar {
    left: auto;
    right: 0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}
[dir='rtl'] .main-content {
    margin-left: 0;
    margin-right: 280px;
    transition: margin-right 0.3s ease;
}
[dir='rtl'] .main-content.sidebar-collapsed {
    margin-left: 0;
    margin-right: 70px;
}
[dir='rtl'] .user-dropdown {
    right: auto;
    left: 16px;
}
/* Sidebar nav rows: icon gutter flips to the right of the label. */
[dir='rtl'] .sidebar .nav-item {
    text-align: right;
}

/* ── Plans & Credits (credits model) ─────────────────────────────────────── */
/* Platform-credential mode: BYO surfaces disappear (billing-page.js sets the
   body class from /api/credits/balance; flag off restores them untouched). */
body.platform-credits #claudeCredCard { display: none !important; }
body.platform-credits .nav-item[data-page="settings-ai-media"] { display: none !important; }
/* Credit balance lives in the profile dropdown now (like Notifications) —
   a neutral count chip on the "Plans & Credits" item; red when low. */
.user-dropdown-count--credits { background:#e8f0fe; color:#1a73e8; }
.user-dropdown-count--credits.user-dropdown-count--low { background:#fce8e6; color:#c5221f; }
.billing-note { color:#5f6368; font-size:13px; padding:12px 0; }
#billingPageBody h3 { font-size:15px; font-weight:600; color:#202124; margin:26px 0 2px; }
/* Buttons — .btn-primary/.btn-secondary have no global definition; scope real
   styles here so the purchase CTAs never fall back to browser-default gray. */
#billingPageBody .btn-primary { background:#1a73e8; color:#fff; border:1px solid #1a73e8; border-radius:9999px; padding:9px 18px; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .15s; }
#billingPageBody .btn-primary:hover:not(:disabled) { background:#1765cc; }
#billingPageBody .btn-primary:disabled { background:#e8eaed; border-color:#e8eaed; color:#9aa0a6; cursor:default; }
#billingPageBody .btn-secondary { background:#fff; color:#1a73e8; border:1px solid #dadce0; border-radius:9999px; padding:8px 16px; font-size:13px; font-weight:500; cursor:pointer; transition:background .15s, border-color .15s; }
#billingPageBody .btn-secondary:hover { background:#f6f9fe; border-color:#1a73e8; }
.billing-balance-row { display:flex; align-items:stretch; gap:0; padding:18px 4px; border-radius:14px; margin-bottom:6px; flex-wrap:wrap; background:#f6f8fa; }
.billing-stat { padding:0 26px; }
.billing-stat + .billing-stat { border-left:1px solid #e8eaed; }
.billing-stat label { display:block; font-size:12px; color:#5f6368; margin-bottom:3px; }
.billing-stat strong { font-size:26px; letter-spacing:-0.5px; color:#1a73e8; }
.billing-stat span { font-size:16px; font-weight:500; color:#3c4043; }
.billing-balance-row .btn-secondary { align-self:center; margin-left:auto; margin-right:16px; }
.billing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:12px 0 8px; }
.billing-card { position:relative; border-radius:14px; padding:20px 18px 18px; display:flex; flex-direction:column; gap:7px; background:#f6f8fa; transition:background .15s; }
.billing-card:hover { background:#eef1f5; }
/* Current plan keeps a blue cue (soft blue tile) now that borders are gone. */
.billing-card--current { background:#eef4fe; }
.billing-card--current:hover { background:#e3edfb; }
.billing-badge { position:absolute; top:-10px; right:14px; background:#1a73e8; color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:9999px; letter-spacing:.3px; }
.billing-card-name { font-weight:600; font-size:15px; }
.billing-card-price { font-size:26px; font-weight:700; letter-spacing:-0.5px; }
.billing-card-price span { font-size:12.5px; color:#5f6368; font-weight:400; letter-spacing:0; }
/* "Billed as $X USD" note under a converted (non-USD display currency) price. */
.billing-card-usd-note { font-size:11px; color:#9aa0a6; margin-top:2px; }
.billing-card-credits { font-size:13px; color:#5f6368; margin-bottom:8px; }
.billing-feats { list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:7px; }
.billing-feats li { position:relative; padding-left:22px; font-size:13px; color:#3c4043; line-height:1.35; }
.billing-feats li::before { content:'check'; font-family:'Material Symbols Outlined'; font-size:15px; color:#1a73e8; position:absolute; left:0; top:1px; }
.billing-cta { margin-top:auto; }
.billing-current { margin-top:auto; align-self:flex-start; color:#fff; background:#1a73e8; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:9999px; }
.billing-referral { background:#f6f8fa; border-radius:14px; padding:16px 18px; margin-top:12px; }
.billing-ref-link { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.billing-ref-link code { flex:1 1 220px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#fff; border-radius:9999px; padding:9px 14px; font-size:12.5px; color:#3c4043; }
.billing-ref-stats { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.billing-ref-chip { background:#fff; border-radius:9999px; padding:4px 12px; font-size:12.5px; color:#5f6368; }
.billing-ref-chip strong { font-weight:600; color:#202124; margin-left:4px; }
@media (max-width: 640px) {
  .billing-stat { padding:0 16px; flex:1 1 40%; margin-bottom:8px; }
  .billing-stat + .billing-stat { border-left:none; }
  .billing-balance-row { padding:14px 8px 8px; }
  .billing-balance-row .btn-secondary { margin:6px 16px 8px; width:calc(100% - 32px); }
  .billing-card .billing-cta { width:100%; }
}

/* AI Assistant welcome: brand mark in a soft badge (replaces the washed-out
   smart_toy glyph; no icon-font dependency) */
.ai-chat-welcome .ai-welcome-badge {
    width: 76px; height: 76px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eef4ff 0%, #f4efff 100%);
    border: 1px solid #e4e9f7;
    box-shadow: 0 10px 30px rgba(26, 115, 232, .14);
}
.ai-chat-welcome .ai-welcome-badge svg { width: 44px; height: 44px; }

/* Code viewers: the vendored highlight.js github theme sets
   `pre code.hljs{padding:1em}` and a white background, which widened the
   line-number gutter alignment and boxed the content. Neutralise it inside
   our viewers so the gutter + code stay flush (operator-caught on robots.txt). */
.ws-code-lines > code[data-hl],
.ws-code-lines > code.hljs,
.td-code-lines > code[data-hl],
.td-code-lines > code.hljs {
    padding: 0 !important;
    background: transparent !important;
    display: block;
}

/* Credential-list delete button (App & extension stores). Site pill-danger
   style — white at rest, light-red border + red text — with a hover tint
   matching the app's other danger affordances (#fee2e2). */
.cred-del-btn {
    padding: 6px 12px;
    border: 1px solid #fecaca;
    border-radius: 9999px;
    background: #fff;
    color: #c13515;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cred-del-btn:hover { background: #fee2e2; border-color: #f49a9a; }
.cred-del-btn:active { background: #fecaca; }

/* Secondary button inside .ta-settings surfaces (Discovery / Portfolio /
   Ad accounts) — white pill, gray border, matching the platform pattern.
   The primary .btn already comes from the .ta-settings scope. */
.ta-settings .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border: 1px solid #e5e7eb; border-radius: 9999px;
    background: #fff; color: #374151; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
    white-space: nowrap; flex-shrink: 0;
}
.ta-settings .btn-secondary:hover { background: #f9fafb; border-color: #d1d5db; }

/* ── Sidebar section collapse ─────────────────────────────────────────
   The section TITLE is the toggle (no extra buttons); a ::after chevron
   survives applyTranslations' textContent swaps. Sections are expanded by
   default; collapsed state persists per section (nav_sec_collapsed:*). */
.nav-section > .nav-section-title {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}
.nav-section > .nav-section-title::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 15px;
    font-weight: 400;
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    color: #b0b6bb;
    transition: transform 0.15s ease;
}
.nav-section.nav-collapsed > .nav-section-title::after { transform: rotate(-90deg); }
.nav-section.nav-collapsed > *:not(.nav-section-title) { display: none !important; }
/* Icon-rail (collapsed sidebar) hides titles — hide the chevron with them. */
.sidebar.collapsed .nav-section-title::after { display: none; }

/* Discovery card action row — single line, horizontal scroll, thin
   hover-visible scrollbar (platform scrollbar standard). */
.disc-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    padding-bottom: 3px;
    overflow-x: auto;
    scrollbar-width: thin;
    align-items: center;
}
.disc-actions::-webkit-scrollbar { height: 6px; }
.disc-actions::-webkit-scrollbar-track { background: transparent; }
.disc-actions::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.disc-actions:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.disc-actions > button { flex: 0 0 auto; white-space: nowrap; }
.disc-actions > span { flex: 0 0 auto; }

/* The games card is the anchor for its (shared-rule) kebab. */
.game-card { position: relative; }

/* Dashboard brand lockup (2026-08-08): cube mark + wordmark, matching the
   marketing pages' .logo. The hamburger is now MOBILE-ONLY — on desktop the
   sidebar is permanently visible, so the button was redundant chrome where
   the brand belongs. */
.top-logo {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    /* It IS the sidebar toggle (the hamburger it replaced on desktop), so it
       carries a button's affordances rather than a link's. */
    background: transparent; border: 0; padding: 4px 8px; margin-left: -8px;
    border-radius: 10px; cursor: pointer; color: inherit; font: inherit;
    transition: background 0.15s ease;
}
.top-logo:hover { background: rgba(0, 0, 0, 0.05); }
.top-logo:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
/* Mark sized to the wordmark the way the marketing header does it (mark
   height ~1.5x the wordmark's font-size), instead of the smaller 26px. */
.top-logo-mark { width: 32px; height: 32px; flex: 0 0 32px; display: block; }
/* `font: inherit` above resets the wordmark to the navbar's 16px, so the size it
   had as a link is restated here (mark : wordmark = 32 : 20.8, the landing ratio). */
.top-logo .logo-text { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 901px) {
    .mobile-menu-btn { display: none !important; }
}
/* Mobile keeps the cube (brand presence) beside the drawer toggle, but drops
   the wordmark — the pre-existing rule hid the whole lockup, leaving the
   dashboard header brandless on phones while the marketing pages show a logo. */
@media (max-width: 900px) {
    .top-logo { display: inline-flex !important; }
    .top-logo .logo-text { display: none; }
}