/* ═══════════════════════════════════════ */
/* PROJECT WORKSPACE - LIGHT THEME         */
/* ═══════════════════════════════════════ */

:root {
    --sidebar-width: 247px;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e8ecf1;
    --sidebar-text: #000000;
    --sidebar-text-hover: #1e293b;
    --sidebar-text-active: #1a8fe3;
    --sidebar-active-bg: #e8f4fe;
    --sidebar-active-border: #1a8fe3;
    --sidebar-group-text: #94a3b8;
    --sidebar-hover-bg: #f8fafc;
    --topbar-height: 52px;
    --primary: #1a8fe3;
    --primary-light: #5cb3ef;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

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

body {
    font-family: 'Inter', 'Roboto', sans-serif;
    background: #f4f6f9;
    color: #1e293b;
    overflow: hidden;
    height: 100vh;
}

.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ═══════════════════════════════════════ */
/* SIDEBAR                                 */
/* ═══════════════════════════════════════ */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    border-right: 1px solid var(--sidebar-border);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

/* ── Logo ── */
.sidebar-header {
    padding: 10px 21px 6px;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-header .logo table { border-spacing: 0; }
.sidebar-header .logo img { height: 32px; }

#home_logo_dev {
    font-size: 10px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 2px;
    margin-left: 6px;
    background: var(--sidebar-active-bg);
    padding: 2px 7px;
    border-radius: 4px;
}

/* ── Project Selector ── */
.project-selector {
    padding: 0px 0px;
    border-bottom: 1px solid var(--sidebar-border);
    position: relative;
}

.project-selector-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.2s;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
}

.project-selector-current:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.project-selector-current i:first-child {
    color: var(--primary);
    font-size: 15px;
}

.project-selector-current span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-chevron {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.2s;
}

.project-selector.open .project-chevron { transform: rotate(180deg); }

.project-selector-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 12px;
    right: 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 340px;
    flex-direction: column;
}

.project-selector.open .project-selector-dropdown { display: flex; }

.project-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.project-search i { color: #94a3b8; font-size: 13px; }

.project-search input {
    flex: 1;
    background: none;
    border: none;
    color: #1e293b;
    font-size: 14px;
    outline: none;
}

.project-search input::placeholder { color: #cbd5e1; }

.project-list {
    list-style: none;
    overflow-y: auto;
    max-height: 220px;
    padding: 6px;
}

.project-list li {
    padding: 9px 14px;
    color: var(--sidebar-text);
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
}

.project-list li:hover { background: #f8fafc; color: #1e293b; }
.project-list li.active { background: var(--sidebar-active-bg); color: var(--sidebar-text-active); font-weight: 600; }

.project-selector-footer {
    padding: 8px 12px;
    border-top: 1px solid #f1f5f9;
}

.btn-all-projects {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 8px;
    transition: background 0.12s;
}

.btn-all-projects:hover { background: var(--sidebar-active-bg); }

/* ── Sidebar Content (Scrollable) ── */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 20px;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.sidebar-content::-webkit-scrollbar { width: 5px; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-content::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* ── Nav Groups (always expanded) ── */
.nav-group {
    margin-bottom: 20px;
}

.nav-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1a8fe3;
    opacity: 0.78;
    user-select: none;
}

/* Example shows section labels as text only (no leading icon). */
.nav-group-label i { display: none; }

.nav-group-items {
    list-style: none;
    padding: 0 8px;
}

/* ── Nav Items ── */
.nav-item {
    margin: 1px 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: all 0.12s;
    position: relative;
    line-height: 1.3;
}

.nav-link:hover {
    background: #f4f8fe;
    color: #1a8fe3;
}

.nav-link.active {
    background: #eef6fd;
    color: #0d5fa0;
    font-weight: 600;
    border-left: 2px solid #1a8fe3;
    border-radius: 0 8px 8px 0;
}

.nav-link.active .nav-icon {
    color: #0d5fa0;
}

.nav-icon {
    width: 18px;
    font-size: 16px;
    text-align: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.12s;
}

.nav-link:hover .nav-icon {
    color: #1a8fe3;
}

/* Inline SVG nav icons (MCP client brand marks) — sized and colored to sit
   exactly like the FA <i> icons; currentColor follows hover/active states. */
svg.nav-icon {
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

/* Count Badge */
.nav-count {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #0d5fa0;
    background: #e8f4fe;
    padding: 2px 8px;
    border-radius: 20px;
    min-width: 22px;
    text-align: center;
}

.nav-link.active .nav-count {
    background: #1a8fe3;
    color: #fff;
}

/* Action Status - Building Animation */
.nav-action-spinner {
    margin-left: auto;
    width: 16px;
    height: 16px;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.nav-action-spinner .spinner-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #1a8fe3;
    border-right-color: #1a8fe3;
    animation: navActionSpin 0.8s linear infinite;
}

.nav-action-spinner .spinner-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #1a8fe3;
    animation: navActionPulse 1s ease-in-out infinite;
}

@keyframes navActionSpin {
    to { transform: rotate(360deg); }
}

@keyframes navActionPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.6); }
}

/* Floating tooltip (appended to body via JS) */
.nav-action-floating-tooltip {
    position: fixed;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 400;
    padding: 10px 14px;
    border-radius: 8px;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    line-height: 1.5;
    max-width: 280px;
    white-space: normal;
    opacity: 0;
    transition: opacity 0.15s;
}

.nav-action-floating-tooltip.visible {
    opacity: 1;
}

.nav-action-floating-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1e293b;
}

/* When running, slightly highlight the nav-link */
.nav-link.action-running {
    background: rgba(26, 143, 227, 0.06);
}

.nav-link.action-running .nav-icon {
    color: #1a8fe3;
    animation: navIconGlow 1.5s ease-in-out infinite;
}

@keyframes navIconGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Sidebar Footer ── */
.sidebar-footer {
    border-top: 1px solid var(--sidebar-border);
    padding: 10px 14px 14px;
    position: relative;
}

.sidebar-footer-links {
    display: flex;
    gap: 2px;
    padding-bottom: 10px;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.12s;
}

.footer-link:hover { background: #f8fafc; color: #64748b; }

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    transition: background 0.12s;
}

.user-info:hover { background: #f8fafc; }

.user-dropdown-btn {
    margin-left: auto;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--sidebar-active-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.user-avatar:hover {
    background: var(--primary);
    color: white;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.user-dropdown-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 6px;
    transition: all 0.12s;
}

.user-dropdown-btn:hover { background: #f1f5f9; color: #64748b; }

/* User Dropdown */
.user-dropdown-menu {
    display: none;
    position: absolute;
    bottom: 80px;
    left: 14px;
    right: 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    z-index: 200;
    padding: 6px;
}

.user-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.user-dropdown-menu .dropdown-item i:first-child {
    margin-right: 10px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.user-dropdown-menu .dropdown-item span {
    flex: 1;
}

.user-dropdown-menu.open { display: block; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.12s;
    justify-content: flex-start;
}

.dropdown-item:hover { background: #f8fafc; color: #1e293b; }
.dropdown-item.danger { color: #ef4444; }
.dropdown-item.danger:hover { background: #fef2f2; }
.dropdown-divider { height: 1px; background: #f1f5f9; margin: 4px 0; }

/* ═══════════════════════════════════════ */
/* MAIN CONTENT                            */
/* ═══════════════════════════════════════ */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.topbar {
    /* Grows instead of clipping: when the menus + actions no longer fit on one
       line they wrap onto a second row rather than dropping their labels or
       disappearing into an off-screen overflow. min-height keeps the usual
       single-row bar exactly 52px on a wide screen. */
    height: auto;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 4px;
    padding: 4px 24px;
    background: white;
    border-bottom: 1px solid #e8ecf1;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 18px;
    color: #64748b;
    cursor: pointer;
    padding: 6px;
}

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
}

.topbar-breadcrumb a { color: #64748b; text-decoration: none; transition: color 0.12s; }
.topbar-breadcrumb a:hover { color: var(--primary); }
.topbar-breadcrumb span { color: #1e293b; font-weight: 600; }
.topbar-breadcrumb > i { font-size: 8px; color: #cbd5e1; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; padding-right: 0;}

.btn-topbar {
    background: #fff;
    border: 0.5px solid #e0e3e8;
    color: #64748b;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.btn-topbar:hover { background: #f8fafc; border-color: #cbd5e1; color: #334155; }

/* Labeled variant — used for "Switch to Developer Mode" and any other
   topbar action that needs visible text alongside its icon. */
.btn-topbar.btn-topbar--labeled {
    width: auto;
    padding: 0 16px;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 20px;
}
.btn-topbar.btn-topbar--labeled i { font-size: 13px; }

/* Credit balance pill — surfaces the user's remaining credits in the
   project topbar and on the project-selector popup. Clicking it opens
   the shared credit popup (via the .buy-credits-trigger class). */
.topbar-credit-pill {
    background: #fff8e6;
    border: 0.5px solid #f5d78a;
    color: #854f0b;
    height: 32px;
    padding: 0 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}
.topbar-credit-pill:hover {
    background: #fdefc9;
    border-color: #e9c46a;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15);
    transform: translateY(-1px);
}
.topbar-credit-pill i { font-size: 14px; color: #d97706; }
.topbar-credit-pill .topbar-credit-label {
    color: #854f0b;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.topbar-credit-pill .topbar-credit-amount {
    color: #1a1a1a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.topbar-credit-pill.is-low {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #f87171;
    color: #991b1b;
}
.topbar-credit-pill.is-low i { color: #b91c1c; }
.topbar-credit-pill.is-low .topbar-credit-label,
.topbar-credit-pill.is-low .topbar-credit-amount { color: #7f1d1d; }

/* Page Container */
.page-container {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: #FFF;
}

.page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 300px;
    color: #94a3b8;
    font-size: 14px;
}

.page-loading .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Floating Chat */
.floating-chat-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(26, 143, 227, 0.35);
    transition: all 0.2s;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-chat-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(26, 143, 227, 0.45); }

/* ═══════════════════════════════════════ */
/* MOBILE                                  */
/* ═══════════════════════════════════════ */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        z-index: 1001;
        box-shadow: 4px 0 24px rgba(0,0,0,0.1);
    }
    .sidebar.open { transform: translateX(0); }
    .mobile-menu-overlay.open { display: block; }
    .mobile-menu-toggle { display: block; }
    .page-container { padding: 16px; }
}

/* UI Designs Tab Styles */
.ui-designs-container {
    padding: 10px;
}

.concept-designs-section {
    margin-bottom: 40px;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.concept-design-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.concept-design-title i {
    color: #f59e0b;
}

.ui-design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

/* A screen tile is a picture first: the server renders each UI screen in
   headless Chrome, so the tile shows the real design rather than an icon. */
.ui-design-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ui-design-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, .12);
    border-color: #cbd5e1;
}

/* ── thumbnail frame ─────────────────────────────────────────────────── */
.ui-design-tile .tile-thumb {
    position: relative;
    aspect-ratio: 1.6 / 1;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .ui-design-tile .tile-thumb { height: 160px; }
}

.ui-design-tile .tile-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    opacity: 0;
    transition: opacity .25s ease, transform .35s ease;
}

.ui-design-tile .tile-thumb.is-ready .tile-thumb-img { opacity: 1; }
.ui-design-tile:hover .tile-thumb.is-ready .tile-thumb-img { transform: scale(1.04); }

/* Skeleton shimmer while the screenshot is still being rendered/fetched */
.ui-design-tile .tile-thumb.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #eef2f7 30%, #f8fafc 50%, #eef2f7 70%);
    background-size: 220% 100%;
    animation: tileThumbShimmer 1.3s ease-in-out infinite;
}

@keyframes tileThumbShimmer {
    0%   { background-position: 140% 0; }
    100% { background-position: -40% 0; }
}

/* Icon shown only when the screenshot could not be produced */
.ui-design-tile .tile-thumb-fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #b4c0d0;
    opacity: 0;
}
.ui-design-tile .tile-thumb.is-failed .tile-thumb-fallback { opacity: 1; }
.ui-design-tile .tile-thumb.is-failed { background: #f8fafc; }

/* Corner action hint, revealed on hover */
.ui-design-tile .tile-thumb-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    backdrop-filter: blur(3px);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.ui-design-tile:hover .tile-thumb-badge { opacity: 1; transform: translateY(0); }

/* ── "Preview Designs" tile: the first screens stacked behind each other ── */
.ui-design-tile.full-app-tile { border-color: #bbf7d0; }
.ui-design-tile.full-app-tile:hover { border-color: #86efac; }

.ui-design-tile .tile-thumb-stack {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
}
.ui-design-tile .tile-thumb-stack .tile-stack-item {
    position: absolute;
    display: block;
    border-radius: 6px;
    background-color: #fff;
    background-size: cover;
    background-position: top center;
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
    opacity: 0;
    transition: opacity .3s ease, transform .28s ease;
}
.ui-design-tile .tile-thumb-stack .tile-stack-item.is-ready { opacity: 1; }

.ui-design-tile .tile-stack-0 { inset: 14% 10% 20% 22%; z-index: 3; }
.ui-design-tile .tile-stack-1 { inset: 20% 20% 26% 14%; z-index: 2; transform: rotate(-4deg); }
.ui-design-tile .tile-stack-2 { inset: 26% 26% 32%  8%; z-index: 1; transform: rotate(-8deg); }

.ui-design-tile.full-app-tile:hover .tile-stack-0 { transform: translateY(-4px); }
.ui-design-tile.full-app-tile:hover .tile-stack-1 { transform: rotate(-7deg) translateY(-2px); }
.ui-design-tile.full-app-tile:hover .tile-stack-2 { transform: rotate(-12deg); }

.ui-design-tile.full-app-tile .tile-thumb-badge {
    background: rgba(5, 150, 105, .9);
    opacity: 1;
    transform: none;
    left: 10px;
    right: auto;
}

/* ── caption ─────────────────────────────────────────────────────────── */
.ui-design-tile .tile-content {
    width: 100%;
    padding: 12px 14px 14px;
}

.ui-design-tile .tile-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ui-design-tile .tile-meta {
    font-size: 12px;
    color: #94a3b8;
}

/* ── UI-build explainer (shown before any screens are generated) ─────────── */
.ui-build-intro {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 22px 24px;
    margin-top: 4px;
}
.ui-build-intro-head { display: flex; gap: 14px; align-items: flex-start; }
.ui-build-intro-icon {
    width: 44px; height: 44px; min-width: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: #e8f4fe; color: #1a8fe3; font-size: 18px;
}
.ui-build-intro-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #1e293b; }
.ui-build-intro-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: #64748b; }
.ui-build-intro-text strong { color: #334155; }
.ui-build-screens { margin-top: 18px; }
.ui-build-screens-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    color: #475569; margin-bottom: 10px;
}
.ui-build-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-build-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: #fff; border: 1px solid #e2e8f0;
    font-size: 12.5px; font-weight: 500; color: #334155;
    max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-build-chip i { color: #94a3b8; font-size: 11px; }
.ui-build-chip.is-building { background: #f0f8ff; border-color: #b5d4f4; color: #0d6fc0; }
.ui-build-chip.is-building i { color: #1a8fe3; }
.ui-build-cta { margin-top: 18px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.ui-build-running-note {
    display: flex; align-items: center; gap: 8px;
    margin-top: 18px; font-size: 13px; font-weight: 600; color: #0d6fc0;
}

/* ── Build status panel (replaces every "Build …" CTA while a build runs) ── */
.ui-build-status {
    margin: 4px 0 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f5faff 0%, #f8fafc 100%);
    border: 1px solid #b5d4f4;
    border-radius: 12px;
}
.ui-build-status-head { display: flex; align-items: center; gap: 12px; }
.ui-build-status-spinner {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #e8f4fe;
    color: #0d6fc0;
    font-size: 15px;
}
.ui-build-status-text { flex: 1; min-width: 0; }
.ui-build-status-title { font-size: 14px; font-weight: 700; color: #0d3c66; }
.ui-build-status-step {
    font-size: 12.5px; color: #5a7794; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-build-status-pct {
    flex-shrink: 0;
    font-size: 15px; font-weight: 700; color: #0d6fc0;
    font-variant-numeric: tabular-nums;
}
.ui-build-status-bar {
    margin-top: 12px; height: 6px; border-radius: 999px;
    background: #dbe9f7; overflow: hidden;
}
.ui-build-status-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #1a8fe3, #0d6fc0);
    transition: width 0.4s ease;
}
.ui-build-status-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.ui-build-status-hint { font-size: 12px; color: #64748b; display: inline-flex; align-items: center; gap: 6px; }
.ui-build-status-hint i { color: #94a3b8; }
.ui-build-status-stop {
    font-size: 12px; padding: 6px 12px; min-height: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5;
}
.ui-build-status-stop[disabled] { opacity: 0.65; cursor: default; }

/* Design Preview Popup Styles */
.design-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.design-popup-overlay.open {
    display: flex;
    opacity: 1;
}

.design-popup-overlay.animating-in {
    display: flex;
    opacity: 0;
}

.design-popup-overlay.animating-out {
    display: flex;
    opacity: 0;
}

.design-popup {
    background: #ffffff;
    border-radius: 12px;
    width: 96vw;
    height: 94vh;
    max-width: 96vw;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: scale(0.9) translateY(30px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
    opacity: 0;
}

/* Device-specific popup sizes */
.design-popup.device-tablet {
    width: 820px;
    max-width: 820px;
    height: 94vh;
}

.design-popup.device-mobile {
    width: 400px;
    max-width: 400px;
    height: 94vh;
}

.design-popup-overlay.open .design-popup {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.design-popup-overlay.animating-in .design-popup {
    transform: scale(0.9) translateY(30px);
    opacity: 0;
}

.design-popup-overlay.animating-out .design-popup {
    transform: scale(0.9) translateY(30px);
    opacity: 0;
}

.design-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
    gap: 16px;
}

.design-popup-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Device Switcher in Design Popup */
.design-popup-device-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
}

.design-popup-device-switcher .device-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
}

.design-popup-device-switcher .device-btn:hover {
    color: #475569;
    background: #e2e8f0;
}

.design-popup-device-switcher .device-btn.active {
    background: #ffffff;
    color: #1a8fe3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* View-mode toggle in Design Popup (read-only browsing of the preview) */
.design-popup-viewmode-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 8px;
    padding: 8px 14px;
    height: 38px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.design-popup-viewmode-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

.design-popup-viewmode-btn.active {
    background: #0e7a4a;
    color: #ffffff;
}

.design-popup-close {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.design-popup-close:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
    transform: rotate(90deg);
}

.design-popup-body {
    flex: 1;
    overflow: hidden;
    background: #ffffff;
}

.design-popup-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    transition: width 0.3s ease;
}

/* Iframe centering for device modes */
.design-popup-body {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.design-popup-body.device-tablet iframe {
    width: 768px;
    max-width: 100%;
}

.design-popup-body.device-mobile iframe {
    width: 375px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .design-popup-overlay {
        padding: 10px;
    }
    
    .design-popup {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
    
    .design-popup-header {
        padding: 10px 14px;
    }
    
    .design-popup-title {
        font-size: 14px;
    }
}

/* Requirements List Styles */
.req-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.req-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.req-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.req-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #e8f4fe;
    color: #1a8fe3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.req-details h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.req-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.req-status.active {
    background: #dcfce7;
    color: #166534;
}

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

.req-actions {
    display: flex;
    gap: 8px;
}

.req-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.req-btn:hover {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}

.req-btn.edit:hover { color: #3b82f6; background: #eff6ff; border-color: #bfdbfe; }
.req-btn.view:hover { color: #10b981; background: #f0fdf4; border-color: #bbf7d0; }
.req-btn.delete:hover { color: #ef4444; background: #fef2f2; border-color: #fecaca; }

.req-empty {
    text-align: center;
    padding: 60px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
    color: #64748b;
}

.req-empty i {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 16px;
}

/* Technical Flows Tile Grid */
.technical-flows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.tech-flow-tile {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    height: 100%;
    min-height: 120px;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.tech-flow-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
    background: #fff;
}

.tech-flow-tile .tile-icon {
    font-size: 32px;
    color: #1a8fe3;
    margin-bottom: 15px;
    background: #e8f4fe;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.tech-flow-tile:hover .tile-icon {
    transform: scale(1.1);
}

.tech-flow-tile .tile-content {
    width: 100%;
}

.tech-flow-tile .tile-name {
    font-weight: 600;
    color: #334155;
    font-size: 15px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tech-flow-tile .tile-meta {
    font-size: 12px;
    color: #94a3b8;
}

.tech-flow-tile-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tech-flow-tile:hover .tech-flow-tile-actions {
    opacity: 1;
}

/* ═══════════════════════════════════════ */
/* MODAL & FORM STYLES                     */
/* ═══════════════════════════════════════ */

/* Modal Overlay */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.open {
    display: flex;
}

/* Modal Dialog */
.modal-dialog {
    background: #ffffff;
    border-radius: 19px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

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

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
}

.close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.close-btn:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* Modal Body */
.modal-body {
    padding: 24px;
    overflow-y: auto;
}

/* Modal Footer */
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #1e293b;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1a8fe3;
    box-shadow: 0 0 0 3px rgba(26, 143, 227, 0.1);
}

/* Buttons */
.btn-primary {
    background: #1a8fe3;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.btn-primary:hover {
    background: #0d6fc0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 143, 227, 0.28);
}

.btn-secondary {
    background: #ffffff;
    color: #475569;
    padding: 10px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}
/* Documents Grid Styles */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.document-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.document-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.document-card-body {
    padding: 24px;
    flex: 1;
}

.document-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.document-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.document-card-desc {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

.document-card-footer {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.doc-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.doc-status-missing {
    background: #f3f4f6;
    color: #64748b;
}

.doc-status-ready {
    background: #dcfce7;
    color: #166534;
}

/* Layer Empty State (for UI Designs and other pages) */
.layer-empty-state {
    text-align: center;
    padding: 60px 40px;
    color: #94a3b8;
}

.layer-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    opacity: 0.5;
    color: #cbd5e1;
}

.layer-empty-state h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #64748b;
}

.layer-empty-state p {
    margin: 0;
    font-size: 14px;
    color: #94a3b8;
}

/* ═══════════════════════════════════════ */
/* PROJECT SELECTOR POPUP - FULL SCREEN    */
/* ═══════════════════════════════════════ */
/* ── Living gradient blobs for project selector ── */
.pw-selector-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #f0f2ff;
}

.pw-selector-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.9;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.pw-blob-1 {
    width: 45vmax; height: 45vmax;
    background: radial-gradient(circle, rgba(13,111,192,0.75) 0%, transparent 65%);
    top: -12%; left: -10%;
    animation: pwBl1 12s ease-in-out infinite alternate;
}
.pw-blob-2 {
    width: 50vmax; height: 50vmax;
    background: radial-gradient(circle, rgba(59,130,246,0.7) 0%, transparent 65%);
    bottom: -18%; right: -14%;
    animation: pwBl2 14s ease-in-out infinite alternate;
}
.pw-blob-3 {
    width: 38vmax; height: 38vmax;
    background: radial-gradient(circle, rgba(236,72,153,0.65) 0%, transparent 65%);
    top: 30%; left: -5%;
    animation: pwBl3 10s ease-in-out infinite alternate;
}
.pw-blob-4 {
    width: 42vmax; height: 42vmax;
    background: radial-gradient(circle, rgba(251,113,133,0.65) 0%, transparent 65%);
    top: -8%; right: -8%;
    animation: pwBl4 16s ease-in-out infinite alternate;
}
.pw-blob-5 {
    width: 35vmax; height: 35vmax;
    background: radial-gradient(circle, rgba(52,211,153,0.6) 0%, transparent 65%);
    bottom: -10%; left: 10%;
    animation: pwBl5 13s ease-in-out infinite alternate;
}
.pw-blob-6 {
    width: 30vmax; height: 30vmax;
    background: radial-gradient(circle, rgba(251,146,60,0.55) 0%, transparent 65%);
    top: 40%; left: 45%;
    animation: pwBl6 18s ease-in-out infinite alternate;
}

@keyframes pwBl1 {
    0%{transform:translate(0,0) scale(1)}33%{transform:translate(20vw,15vh) scale(1.25)}66%{transform:translate(-10vw,25vh) scale(.85)}100%{transform:translate(15vw,-10vh) scale(1.1)}
}
@keyframes pwBl2 {
    0%{transform:translate(0,0) scale(1)}33%{transform:translate(-22vw,-18vh) scale(1.15)}66%{transform:translate(12vw,-28vh) scale(.9)}100%{transform:translate(-18vw,10vh) scale(1.2)}
}
@keyframes pwBl3 {
    0%{transform:translate(0,0) scale(1)}33%{transform:translate(28vw,-20vh) scale(1.3)}66%{transform:translate(16vw,14vh) scale(.8)}100%{transform:translate(-14vw,-12vh) scale(1.15)}
}
@keyframes pwBl4 {
    0%{transform:translate(0,0) scale(1)}33%{transform:translate(-18vw,22vh) scale(.85)}66%{transform:translate(-26vw,10vh) scale(1.2)}100%{transform:translate(10vw,18vh) scale(.9)}
}
@keyframes pwBl5 {
    0%{transform:translate(0,0) scale(1)}33%{transform:translate(24vw,-14vh) scale(1.15)}66%{transform:translate(14vw,-22vh) scale(1.3)}100%{transform:translate(-12vw,-8vh) scale(.85)}
}
@keyframes pwBl6 {
    0%{transform:translate(0,0) scale(1)}33%{transform:translate(-16vw,-18vh) scale(1.2)}66%{transform:translate(20vw,12vh) scale(.8)}100%{transform:translate(-8vw,20vh) scale(1.15)}
}

.pw-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 5000;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    animation: pwFadeIn 0.4s ease;
    overflow: hidden;
}

@keyframes pwFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pw-selector-dialog {
    background: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pwContentIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
}

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

/* ── Header ── */
.pw-selector-header {
    padding: 28px 48px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 24px;
    align-items: center;
}

.pw-selector-logo {
    grid-row: 1 / span 2;
    margin-bottom: 0;
}

.pw-selector-logo table {
    border-spacing: 0;
}

.pw-selector-logo img {
    height: 64px;
}

.pw-selector-logo #home_logo_dev {
    font-size: 20px;
    padding: 4px 14px;
    margin-left: 12px;
    border-radius: 8px;
}

.pw-selector-header h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: -0.5px;
    align-self: end;
}

.pw-selector-create-btn-top {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    padding: 15px 32px;
    font-size: 16px;
    border-width: 2px;
}

.pw-selector-header h3 i {
    color: #1a8fe3;
    font-size: 26px;
}

.pw-selector-header-subtitle {
    grid-column: 2;
    grid-row: 2;
    font-size: 15px;
    color: #64748b;
    margin-bottom: 0;
    font-weight: 400;
    align-self: start;
}

/* ── Body ── */
.pw-selector-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* ── Search Bar ── */
.pw-selector-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 48px 20px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.pw-selector-search i {
    color: #94a3b8;
    font-size: 16px;
    flex-shrink: 0;
}

.pw-selector-search input {
    flex: 1;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    padding: 13px 18px;
    font-size: 15px;
    outline: none;
    background: rgba(255, 255, 255, 0.6);
    color: #1e293b;
    transition: all 0.2s;
    max-width: 480px;
}

.pw-selector-search input:focus {
    border-color: #1a8fe3;
    box-shadow: 0 0 0 4px rgba(26, 143, 227, 0.12);
    background: #fff;
}

.pw-selector-search input::placeholder {
    color: #94a3b8;
}

/* ── Project Grid List ── */
.pw-selector-list {
    flex: 1;
    overflow-y: auto;
    padding: 28px 44px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.pw-selector-list::-webkit-scrollbar { width: 6px; }
.pw-selector-list::-webkit-scrollbar-track { background: transparent; }
.pw-selector-list::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 6px; }
.pw-selector-list::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); }

/* ── Project Card Tiles ── */
.pw-selector-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid rgba(200, 210, 230, 0.6);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
    min-height: 94px;    
}

.pw-selector-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    border-radius: 0 4px 4px 0;
    transition: background 0.2s;
}

.pw-selector-item:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(26, 143, 227, 0.25);
    box-shadow: 0 8px 28px rgba(26, 143, 227, 0.12), 0 2px 6px rgba(0,0,0,0.04);
    transform: translateY(-3px);
}

.pw-selector-item:hover::before {
    background: linear-gradient(180deg, #1a8fe3 0%, #0d6fc0 100%);
}

.pw-selector-item:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(26, 143, 227, 0.1);
}

.pw-selector-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(26, 143, 227, 0.12);
    color: #1a8fe3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s;
    user-select: none;
}

.pw-selector-item:hover .pw-selector-item-icon {
    background: linear-gradient(135deg, #1a8fe3 0%, #0d6fc0 100%);
    color: #ffffff;
    transform: scale(1.05);
}

.pw-selector-item-info {
    flex: 1;
    min-width: 0;
}

.pw-selector-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.pw-selector-item-desc {
    font-size: 13px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-selector-item-arrow {
    color: #cbd5e1;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.pw-selector-item:hover .pw-selector-item-arrow {
    color: #1a8fe3;
    transform: translateX(4px);
}

/* ── ⋮ Menu trigger on each project row ── */
.pw-selector-item-menu {
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    margin-right: 4px;
}

.pw-selector-item-menu:hover {
    background: rgba(26, 143, 227, 0.1);
    color: #1a8fe3;
    border-color: rgba(26, 143, 227, 0.2);
}

/* ── Floating action menu (Tech Stack / Rename / Delete) ── */
.pw-project-action-menu {
    position: fixed;
    z-index: 10010;
    min-width: 200px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
    animation: pwActionMenuFade 0.12s ease-out;
}

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

.pw-project-action-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    text-align: left;
    color: #1e293b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.pw-project-action-item i {
    width: 16px;
    text-align: center;
    color: #64748b;
}

.pw-project-action-item:hover {
    background: rgba(241, 245, 249, 0.6);
}

.pw-project-action-item.is-danger {
    color: #b91c1c;
}

.pw-project-action-item.is-danger i {
    color: #b91c1c;
}

.pw-project-action-item.is-danger:hover {
    background: #fef2f2;
}

/* ── Rename / Delete prompt modal ── */
.pw-prompt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pwPromptFade 0.15s ease;
}

@keyframes pwPromptFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pw-prompt-modal-dialog {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    width: 100%;
    max-width: 460px;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.pw-prompt-modal-header {
    padding: 14px 20px;
    background: #1a8fe3;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pw-prompt-modal-header--danger {
    background: #b91c1c;
}

.pw-prompt-modal-title {
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pw-prompt-modal-close {
    background: rgba(255,255,255,0.18);
    border: 0;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.pw-prompt-modal-close:hover {
    background: rgba(255,255,255,0.3);
}

.pw-prompt-modal-body {
    padding: 18px 20px 14px;
}

.pw-prompt-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.pw-prompt-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.pw-prompt-input:focus {
    border-color: #1a8fe3;
    box-shadow: 0 0 0 3px rgba(26, 143, 227, 0.12);
}

.pw-prompt-warning-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
    margin: 0 0 12px;
}

.pw-prompt-keyword {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 1px 6px;
    border-radius: 5px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
}

.pw-prompt-modal-footer {
    padding: 12px 20px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.pw-prompt-btn {
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.pw-prompt-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pw-prompt-btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.pw-prompt-btn-secondary:hover:not(:disabled) {
    background: #e2e8f0;
}

.pw-prompt-btn-primary {
    background: #1a8fe3;
    color: #ffffff;
    border-color: #1a8fe3;
}

.pw-prompt-btn-primary:hover:not(:disabled) {
    background: #0a3596;
}

.pw-prompt-btn-danger {
    background: #b91c1c;
    color: #ffffff;
    border-color: #b91c1c;
}

.pw-prompt-btn-danger:hover:not(:disabled) {
    background: #991b1b;
}

/* ── Empty State ── */
.pw-selector-empty {
    text-align: center;
    padding: 80px 20px;
    color: #94a3b8;
    grid-column: 1 / -1;
}

.pw-selector-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: #cbd5e1;
}

.pw-selector-empty p {
    margin: 0;
    font-size: 16px;
}

/* ── Footer with Create Button ── */
.pw-selector-footer {
    padding: 18px 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.pw-selector-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    border: 2px dashed rgba(26, 143, 227, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1a8fe3;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pw-selector-create-btn:hover {
    border-color: #1a8fe3;
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 143, 227, 0.15);
}

.pw-selector-create-btn i {
    font-size: 14px;
}

.pw-selector-project-count {
    margin-left: auto;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Create Form (inline in footer area) ── */
.pw-selector-create-form {
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
    overflow: hidden;
}

.pw-selector-create-form-inner {
    padding: 28px 48px;
    max-width: 640px;
}

.pw-selector-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pw-selector-form-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.pw-selector-back-btn {
    background: none;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 14px;
}

.pw-selector-back-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #1e293b;
    border-color: rgba(148, 163, 184, 0.4);
}

.pw-selector-create-form .form-group {
    margin-bottom: 16px;
}

.pw-selector-create-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #475569;
    font-size: 14px;
}

.pw-selector-create-form .form-group input,
.pw-selector-create-form .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.6);
    color: #1e293b;
    transition: all 0.2s;
    box-sizing: border-box;
}

.pw-selector-create-form .form-group input:focus,
.pw-selector-create-form .form-group textarea:focus {
    outline: none;
    border-color: #1a8fe3;
    box-shadow: 0 0 0 4px rgba(26, 143, 227, 0.12);
    background: #fff;
}

.pw-selector-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 20px;
}

.pw-selector-form-actions .btn-primary {
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 10px;
}

.pw-selector-form-actions .btn-secondary {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════ */
/*  PROJECT SELECTOR POPUP — credit pill, tabs, account pane   */
/* ═══════════════════════════════════════════════════════════ */

/* Header credit pill — same intent as the project topbar pill
   but sized to sit alongside the Create/Logout buttons. */
.popup-credit-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    min-height: 49px;
    box-sizing: border-box;
    background: #fff8e6;
    border: 0.5px solid #f5d78a;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #854f0b;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    line-height: 1;
}
.popup-credit-pill:hover {
    background: #fdefc9;
    border-color: #e9c46a;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.16);
    transform: translateY(-1px);
}
.popup-credit-pill i { color: #d97706; font-size: 15px; }
.popup-credit-label { color: #854f0b; font-weight: 600; }
.popup-credit-amount { color: #1a1a1a; font-weight: 700; font-variant-numeric: tabular-nums; }
.popup-credit-pill.is-low {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #f87171;
    color: #991b1b;
}
.popup-credit-pill.is-low i { color: #b91c1c; }
.popup-credit-pill.is-low .popup-credit-label,
.popup-credit-pill.is-low .popup-credit-amount { color: #7f1d1d; }

/* Tab bar that sits between the header and the body. */
.pw-popup-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
.pw-popup-tab {
    background: none;
    border: 0;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: all 0.15s;
    margin-bottom: -1px;
}
.pw-popup-tab:hover { color: #1a8fe3; background: rgba(255, 255, 255, 0.4); }
.pw-popup-tab.is-active {
    color: #1a8fe3;
    border-bottom-color: #1a8fe3;
}
.pw-popup-tab i { font-size: 13px; }

/* Panes inside the body — each pane fills the body and scrolls
   independently so the tab bar and header stay pinned. */
.pw-popup-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── Account pane ── */
.pw-account-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 48px 40px;
    background: #f0f2f5;
}
/* ── Users Management pane ── */
.pw-users-mgmt-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #f0f2f5;
}
.pw-account-loading {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.pw-account-loading i { margin-right: 8px; }
.pw-account-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
    gap: 18px;
    margin-bottom: 18px;
}
.pw-account-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.pw-account-grid .pw-account-card { margin-bottom: 0; }
.pw-acc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
}
.pw-acc-card-head i { color: #1a8fe3; margin-right: 6px; }
.pw-acc-card-hint { font-size: 12px; color: #94a3b8; font-weight: 500; }

/* Credits card */
.pw-account-card--credits {
    background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
    border-color: #fde68a;
}
.pw-account-card--credits.is-low {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
}
.pw-acc-credit-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}
.pw-acc-credit-big {
    font-size: 2.4rem;
    font-weight: 800;
    color: #422006;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pw-account-card--credits.is-low .pw-acc-credit-big { color: #7f1d1d; }
.pw-acc-credit-label {
    font-size: 0.85rem;
    color: #92400e;
    font-weight: 600;
}
.pw-acc-credit-sub {
    font-size: 0.75rem;
    color: #b45309;
    margin-top: 2px;
}
.pw-account-card--credits.is-low .pw-acc-credit-label,
.pw-account-card--credits.is-low .pw-acc-credit-sub { color: #7f1d1d; }
.pw-acc-buy-btn {
    background: #1a8fe3;
    color: #fff;
    border: 0;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}
.pw-acc-buy-btn:hover { background: #082b7a; }

/* Period totals card */
.pw-acc-select {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.8rem;
    background: #fff;
    color: #334155;
    font-family: inherit;
}
.pw-acc-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
.pw-acc-stat {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
}
.pw-acc-stat-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pw-acc-stat-lbl {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

/* Tables (per-project + keys) */
.pw-acc-table-wrap { overflow-x: auto; }
.pw-acc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.pw-acc-table th,
.pw-acc-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}
.pw-acc-table th {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f8fafc;
}
.pw-acc-table tbody tr:hover { background: #f8fafc; }
.pw-acc-table .pw-acc-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 1px;
}
.pw-acc-empty {
    text-align: center;
    color: #94a3b8;
    padding: 30px 14px;
}
.pw-acc-empty i { margin-right: 6px; }
.pw-acc-code {
    background: #f1f5f9;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.78rem;
    color: #334155;
    font-family: 'IBM Plex Mono', Menlo, Consolas, monospace;
}
.pw-acc-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.pw-acc-status.is-active { background: #dcfce7; color: #166534; }
.pw-acc-status.is-inactive { background: #fee2e2; color: #991b1b; }
.pw-acc-project-link {
    color: #1a8fe3;
    text-decoration: none;
}
.pw-acc-project-link:hover { text-decoration: underline; }
.pw-acc-actions-col { text-align: right; }
.pw-acc-icon-btn {
    background: none;
    border: 1px solid #cbd5e1;
    color: #64748b;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    margin-left: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.pw-acc-icon-btn:hover { border-color: #1a8fe3; color: #1a8fe3; }
.pw-acc-icon-btn--danger:hover { border-color: #dc2626; color: #dc2626; }

/* Add-key inline form */
.pw-acc-add-btn {
    background: #1a8fe3;
    color: #fff;
    border: 0;
    padding: 7px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.pw-acc-add-btn:hover { background: #082b7a; }
.pw-acc-add-btn[disabled] { background: #cbd5e1; cursor: not-allowed; }

/* ── AI Key Mode card (pw-acc-mode-*) ─────────────────────── */
.pw-acc-mode-body { padding: 18px 20px; }
.pw-acc-mode-loading { text-align: center; color: #64748b; font-size: 0.875rem; padding: 6px 0; }
.pw-acc-mode-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pw-acc-mode-label { font-size: 0.85rem; color: #475569; }
.pw-acc-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.pw-acc-mode-badge.mode-system   { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.pw-acc-mode-badge.mode-personal { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.pw-acc-mode-rate {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 9999px;
}
.pw-acc-mode-desc {
    margin: 0 0 14px;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
}
.pw-acc-mode-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.pw-acc-mode-hint { font-size: 0.75rem; color: #94a3b8; }

/* ── Default GLOBAL model picker (system mode) ───────────── */
.pw-acc-model-picker {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.pw-acc-model-picker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1e293b;
    margin-bottom: 4px;
}
.pw-acc-model-picker-sub {
    margin: 0 0 12px;
    font-size: 0.78rem;
    color: #64748b;
}
.pw-acc-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.pw-acc-model-grid-busy { opacity: 0.55; pointer-events: none; }
.pw-acc-model-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.pw-acc-model-chip:hover { border-color: #93c5fd; box-shadow: 0 1px 6px rgba(26,143,227,0.12); }
.pw-acc-model-chip.selected {
    border-color: #1a8fe3;
    background: #eff6ff;
    box-shadow: 0 0 0 1px #1a8fe3 inset;
}
.pw-acc-model-chip-check { color: #cbd5e1; font-size: 0.95rem; }
.pw-acc-model-chip.selected .pw-acc-model-chip-check { color: #1a8fe3; }
.pw-acc-model-chip-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-acc-model-chip-name {
    font-weight: 600;
    font-size: 0.83rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-acc-model-chip-provider { font-size: 0.72rem; color: #64748b; }

/* ── AI Model by Work Type (per-function picker) ──────────── */
/* Two cards per row; each card stacks label/description over the select. */
.pw-acc-func-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.pw-acc-func-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}
.pw-acc-func-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pw-acc-func-label { font-weight: 600; font-size: 0.83rem; color: #1e293b; }
.pw-acc-func-desc { font-size: 0.72rem; color: #64748b; }
.pw-acc-func-custom-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #1a8fe3;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: 1px;
}
/* Compact model tiles inside each work-type card — same visual language
   as the .pw-acc-model-chip radio cards, sized down to fit many models. */
.pw-acc-func-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-acc-func-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.pw-acc-func-chip:hover { border-color: #93c5fd; box-shadow: 0 1px 6px rgba(26,143,227,0.12); }
.pw-acc-func-chip.selected {
    border-color: #1a8fe3;
    background: #eff6ff;
    box-shadow: 0 0 0 1px #1a8fe3 inset;
}
.pw-acc-func-chip-check { color: #cbd5e1; font-size: 0.8rem; }
.pw-acc-func-chip.selected .pw-acc-func-chip-check { color: #1a8fe3; }
.pw-acc-func-chip-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pw-acc-func-chip-name {
    font-weight: 600;
    font-size: 0.74rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-acc-func-chip-provider { font-size: 0.64rem; color: #64748b; white-space: nowrap; }
@media (max-width: 700px) {
    .pw-acc-func-rows { grid-template-columns: 1fr; }
}

/* ── Add / Delete API key modal ─────────────────────────────
   Matches the visual language of api-keys.html's modal but
   lives in its own namespace so the project-list popup is
   self-sufficient without that page loaded. */
.pw-keymodal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pw-keymodal-overlay.is-open { display: flex; }
.pw-keymodal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    animation: pwKeymodalIn 0.18s ease-out;
}
.pw-keymodal--small { max-width: 420px; }
@keyframes pwKeymodalIn {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pw-keymodal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.pw-keymodal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}
.pw-keymodal-close {
    background: none;
    border: 0;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.15s;
}
.pw-keymodal-close:hover { background: #f1f5f9; color: #1e293b; }
.pw-keymodal-body { padding: 20px; }
.pw-keymodal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}
.pw-keymodal-group { margin-bottom: 1.1rem; }
.pw-keymodal-group:last-child { margin-bottom: 0; }
.pw-keymodal-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #334155;
    font-size: 0.875rem;
}
.pw-keymodal-req { color: #dc2626; font-weight: 700; }
.pw-keymodal-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.pw-keymodal-input:focus {
    outline: none;
    border-color: #1a8fe3;
    box-shadow: 0 0 0 3px rgba(26, 143, 227, 0.12);
}
.pw-keymodal-input--mono {
    font-family: 'IBM Plex Mono', Menlo, Consolas, monospace;
    font-size: 0.82rem;
}
.pw-keymodal-msg {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.pw-keymodal-msg.is-error { background: #fee2e2; color: #991b1b; }
.pw-keymodal-msg.is-success { background: #dcfce7; color: #166534; }
.pw-keymodal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: all 0.15s ease;
}
.pw-keymodal-btn[disabled] { opacity: 0.65; cursor: not-allowed; }
.pw-keymodal-btn--primary {
    background: #1a8fe3;
    color: #fff;
    border-color: #1a8fe3;
}
.pw-keymodal-btn--primary:hover { background: #082b7a; border-color: #082b7a; }
.pw-keymodal-btn--ghost {
    background: #fff;
    color: #475569;
    border-color: #cbd5e1;
}
.pw-keymodal-btn--ghost:hover { background: #f8fafc; border-color: #94a3b8; }
.pw-keymodal-btn--danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.pw-keymodal-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Chart container */
.pw-acc-chart-wrap {
    position: relative;
    height: 240px;
}
.pw-acc-chart-empty {
    text-align: center;
    color: #94a3b8;
    padding: 30px 10px;
    font-size: 0.85rem;
}

/* ── Responsive for Selector ── */
@media (max-width: 768px) {
    .pw-selector-header {
        padding: 20px 20px;
    }
    .pw-selector-header h3 {
        font-size: 22px;
    }
    .pw-selector-search {
        padding: 16px 20px 14px;
    }
    .pw-selector-search input {
        max-width: 100%;
    }
    .pw-selector-list {
        padding: 16px 16px 24px;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .pw-selector-footer {
        padding: 14px 20px;
    }
    .pw-selector-create-form-inner {
        padding: 20px;
    }
    .pw-popup-tabs { padding: 0 16px; }
    .pw-account-scroll { padding: 16px; }
    .pw-users-mgmt-scroll { padding: 0; }
    .pw-account-grid { grid-template-columns: 1fr; }
    .pw-acc-form-row { grid-template-columns: 1fr; }
    .popup-credit-pill { padding: 10px 14px; font-size: 14px; }
}

@media (max-width: 480px) {
    .pw-selector-item {
        padding: 16px;
    }
    .pw-selector-item-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════ */
/* CREATE PROJECT MODAL POPUP              */
/* ═══════════════════════════════════════ */
.pw-create-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pw-create-modal-overlay.open {
    pointer-events: auto;
    opacity: 1;
}

.pw-create-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pw-create-modal-dialog {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    width: 92%;
    max-width: 720px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    opacity: 0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.pw-create-modal-overlay.open .pw-create-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.pw-create-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.pw-create-modal-header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.pw-create-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(241, 245, 249, 0.6);
    border: none;
    border-radius: 10px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 15px;
}

.pw-create-modal-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.pw-create-modal-body {
    padding: 28px;
    overflow-y: auto;
}

.pw-create-modal-body .form-group {
    margin-bottom: 20px;
}

.pw-create-modal-body .form-group:last-child {
    margin-bottom: 0;
}

.pw-create-modal-body .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #334155;
    font-size: 14px;
}

.pw-create-modal-body .form-group input,
.pw-create-modal-body .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.6);
    color: #1e293b;
    transition: all 0.2s;
    box-sizing: border-box;
}

.pw-create-modal-body .form-group input:focus,
.pw-create-modal-body .form-group textarea:focus {
    outline: none;
    border-color: #1a8fe3;
    box-shadow: 0 0 0 4px rgba(26, 143, 227, 0.12);
    background: #fff;
}

.pw-create-modal-body .form-group input::placeholder,
.pw-create-modal-body .form-group textarea::placeholder {
    color: #94a3b8;
}

/* Larger "what do you want to build" prompt box */
.pw-create-modal-body .form-group textarea.pw-create-prompt {
    min-height: 200px;
    line-height: 1.55;
    resize: vertical;
}

.pw-create-prompt-hint {
    margin-top: 10px;
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 7px;
}

.pw-create-prompt-hint i {
    color: #1a8fe3;
}

/* Attach-files affordance inside the prompt box */
.pw-create-prompt-wrap {
    position: relative;
}

.pw-create-prompt-wrap textarea.pw-create-prompt {
    /* leave room so typed text doesn't slide under the paperclip */
    padding-bottom: 44px;
}

.pw-create-attach-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(241, 245, 249, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 9px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
}

.pw-create-attach-btn:hover {
    background: #e8f4fe;
    border-color: #1a8fe3;
    color: #1a8fe3;
}

.pw-create-attached-files {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pw-create-attached-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 10px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 12.5px;
    color: #334155;
}

.pw-create-attached-file > i {
    color: #1a8fe3;
}

.pw-create-attached-file .file-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.pw-create-attached-file .file-size {
    color: #94a3b8;
    font-size: 11px;
}

.pw-create-attached-file .file-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 2px;
    font-size: 12px;
    line-height: 1;
}

.pw-create-modal-footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    background: rgba(248, 250, 252, 0.5);
    border-radius: 0 0 20px 20px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.pw-create-modal-footer .btn-primary {
    padding: 11px 24px;
    font-size: 15px;
    border-radius: 10px;
}

.pw-create-modal-footer .btn-secondary {
    padding: 11px 20px;
    font-size: 15px;
    border-radius: 10px;
}

@media (max-width: 480px) {
    .pw-create-modal-dialog {
        width: 95%;
        max-width: none;
    }
    .pw-create-modal-header {
        padding: 18px 20px 16px;
    }
    .pw-create-modal-body {
        padding: 20px;
    }
    .pw-create-modal-footer {
        padding: 16px 20px;
    }
}
/* Theme Selection & Build UI Modal Styles */
.theme-card {
    transition: all 0.2s ease;
}
.theme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
#theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
#build-ui-design-modal .modal-dialog {
    max-width: 600px;
}
#build-ui-design-modal textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    transition: all 0.2s ease;
    background: var(--bg-primary);
    color: var(--text-primary);
}
#build-ui-design-modal textarea:focus {
    outline: none;
    border-color: #0d6fc0;
    box-shadow: 0 0 0 3px rgba(13, 111, 192, 0.1);
}

/* Structure Live Preview Modal - make it 90% width and 90% height */
#structure-preview-modal .modal-dialog {
    max-width: 90vw;
    width: 90vw;
    max-height: 90vh;
    height: 90vh;
}

/* ═══════════════════════════════════════ */
/* CHAT MODAL STYLES                       */
/* ═══════════════════════════════════════ */

.floating-chat-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: #1a8fe3;
    color: white;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(26, 143, 227, 0.4);
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-chat-button:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 143, 227, 0.6);
}

.floating-chat-button.active {
    transform: scale(0);
    opacity: 0;
}

.chat-modal {
    position: fixed;
    bottom: 27px;
    right: 24px;
    width: 1100px;
    height: 700px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 140px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9001;
    display: none;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-info{
    margin-left: 45px;
}

.chat-modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.teamlead-container {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Sidebar */
.sessions-sidebar {
    width: 260px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.sessions-sidebar.hidden {
    width: 0;
    overflow: hidden;
    border-right: none;
}

.sessions-header {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sessions-title {
    font-weight: 600;
    color: #475569;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sessions-actions button {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.sessions-actions button:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.sessions-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.session-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: all 0.2s;
    position: relative;
}

.session-item:hover {
    background: #e2e8f0;
}

.session-item.active {
    background: #eff6ff;
    color: #3b82f6;
}

.session-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-preview {
    font-size: 11px;
    color: #94a3b8;
}

.session-time {
    font-size: 10px;
    color: #cbd5e1;
    margin-top: 4px;
    text-align: right;
}

.delete-session {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.session-item:hover .delete-session {
    opacity: 1;
}

/* Chat Area */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: white;
}

.show-sidebar-btn {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 10;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: #64748b;
    display: none;
}

.sessions-sidebar.hidden + .chat-area .show-sidebar-btn {
    display: block;
}

.chat-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.chat-title {
    font-weight: 700;
    font-size: 16px;
    color: #1e293b;
}

.chat-subtitle {
    font-size: 12px;
    color: #64748b;
}

.chat-header-actions button {
    background: none;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s;
}

.chat-header-actions button:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}

.chat-header-actions .close-chat-btn {
    border: none;
    font-size: 16px;
    padding: 6px;
}

/* Messages */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.message {
    display: flex;
    gap: 16px;
    max-width: 85%;
}

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

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

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.message.user .message-avatar {
    background: #d7ecfb;
    color: #1a8fe3;
}

.message.assistant .message-avatar {
    background: #1a8fe3;
    color: white;
}

.message.system .message-avatar {
    background: #f1f5f9;
    color: #64748b;
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
}

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

.message-sender {
    font-weight: 600;
    color: #334155;
}

.message-time {
    color: #94a3b8;
}

.message-text {
    padding: 11px 36px;;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.message.user .message-text {
    background: #1a8fe3;
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(26, 143, 227, 0.2);
}

.message.assistant .message-text {
    background: white;
    color: #1e293b;
}

/* Suggested Tasks */
.suggested-tasks-section {
    margin-top: 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.suggested-tasks-header {
    padding: 10px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.task-selection-controls {
    display: flex;
    gap: 8px;
}

.task-selection-controls button {
    background: none;
    border: none;
    color: #64748b;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.task-selection-controls button:hover {
    background: #e2e8f0;
    color: #334155;
}

.suggested-tasks-list {
    padding: 8px;
}

.suggested-task-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
}

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

.task-checkbox {
    margin-top: 4px;
}

.suggested-task-content {
    flex: 1;
    cursor: pointer;
}

.task-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.task-priority-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.task-priority-badge.high { background: #fee2e2; color: #dc2626; }
.task-priority-badge.medium { background: #fef3c7; color: #d97706; }
.task-priority-badge.low { background: #dcfce7; color: #166534; }

.task-agent-type {
    font-size: 10px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.task-description {
    font-size: 13px;
    color: #334155;
    margin-bottom: 4px;
}

.task-reason {
    font-size: 11px;
    color: #64748b;
    font-style: italic;
}

.suggested-tasks-actions {
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    text-align: right;
}

.process-selected-tasks-btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.process-selected-tasks-btn:hover {
    background: #059669;
}

.process-selected-tasks-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* Empty State */
.empty-chat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    text-align: center;
    padding: 40px;
}

.empty-chat-icon {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-chat-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.empty-chat-subtitle {
    font-size: 14px;
    max-width: 400px;
    margin-bottom: 32px;
}

.suggested-prompts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 600px;
}

.prompt-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.prompt-card:hover {
    border-color: #1a8fe3;
    box-shadow: 0 4px 12px rgba(26, 143, 227, 0.1);
    transform: translateY(-2px);
}

.prompt-card-title {
    font-weight: 600;
    color: #334155;
    font-size: 13px;
    margin-bottom: 4px;
}

.prompt-card-text {
    font-size: 12px;
    color: #64748b;
}

/* Input Area */
.input-area {
    padding: 20px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.input-container {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.message-input-wrapper {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    transition: all 0.2s;
}

.message-input-wrapper:focus-within {
    background: white;
    border-color: #1a8fe3;
    box-shadow: 0 0 0 3px rgba(26, 143, 227, 0.1);
}

.message-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    resize: none;
    max-height: 120px;
    outline: none;
}

.send-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #1a8fe3;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
}

.send-btn:hover {
    background: #1a8fe3;
    transform: scale(1.05);
}

.send-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
}

/* Typing Indicator */
.typing-dots {
    display: flex;
    gap: 4px;
    padding: 10px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: #cbd5e1;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

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

/* References */
.message-references-section {
    margin-top: 10px;
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #e2e8f0;
}

.references-header {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.references-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.reference-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.reference-item:hover {
    border-color: #1a8fe3;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.reference-item i {
    font-size: 16px;
    color: #1a8fe3;
    margin-bottom: 4px;
}

.reference-name {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reference-path {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reference-type {
    font-size: 10px;
    color: #94a3b8;
}

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

.message-action-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-action-btn:hover {
    color: #475569;
}

/* Context Menu */
.context-menu {
    display: none;
    position: absolute;
    z-index: 10000;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 0;
    min-width: 160px;
}

.context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #334155;
    transition: background 0.2s;
}

.context-menu-item:hover {
    background: #f8fafc;
}


#sessions-sidebar .message.assistant .message-text{
    padding-left: 37px !important;
}

/* ═══════════════════════════════════════ */
/* USER PROFILE POPUP                      */
/* ═══════════════════════════════════════ */
.user-profile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    
    z-index: 8000;
    align-items: center;
    justify-content: center;
}

.user-profile-overlay.open {
    display: flex;
}

.user-profile-modal {
    background: #ffffff;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: upSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

@keyframes upSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.user-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 16px 16px 0 0;
}

.user-profile-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-profile-header h3 i {
    color: #1a8fe3;
}

.user-profile-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none;
    border-radius: 10px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 15px;
}

.user-profile-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.user-profile-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Profile Tabs */
.user-profile-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 24px;
    background: #fff;
}

.up-tab {
    padding: 14px 20px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.up-tab:hover { color: #1a8fe3; }

.up-tab.active {
    color: #1a8fe3;
    font-weight: 600;
}

.up-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #1a8fe3;
    border-radius: 2px 2px 0 0;
}

.up-tab-content {
    display: none;
    padding: 24px;
}

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

/* Avatar Section */
.up-avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.up-avatar-large {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #e8f4fe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a8fe3;
    font-size: 28px;
    flex-shrink: 0;
}

.up-avatar-info {
    flex: 1;
}

.up-display-name {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.up-role-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #1a8fe3;
    background: #e8f4fe;
    padding: 3px 10px;
    border-radius: 6px;
}

/* Form Sections */
.up-form-section {
    margin-bottom: 24px;
}

.up-form-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.up-form-section h4 i {
    color: #1a8fe3;
    font-size: 14px;
}

.up-form-row {
    display: flex;
    gap: 16px;
}

.up-form-row .up-form-group {
    flex: 1;
}

.up-form-group {
    margin-bottom: 16px;
}

.up-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.up-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    background: #fff;
    transition: all 0.2s;
    box-sizing: border-box;
}

.up-input:focus {
    outline: none;
    border-color: #1a8fe3;
    box-shadow: 0 0 0 3px rgba(26, 143, 227, 0.1);
}

.up-input:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.up-hint {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Info Grid */
.up-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.up-info-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
}

.up-info-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.up-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

/* Groups */
.up-groups-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.up-group-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.up-group-badge i {
    color: #1a8fe3;
    font-size: 12px;
}

/* Actions */
.up-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
}

.up-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.up-btn-primary {
    background: #1a8fe3;
    color: white;
}

.up-btn-primary:hover {
    background: #1a8fe3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 143, 227, 0.2);
}

.up-btn-primary:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* First-login password prompt (users.must_change_password, delta 78).
   Reuses the profile modal chrome; only the hero + layout are its own. */
/* Above the projects popup (5000), plan-limit modals (99999) and toasts: the
   user must see this before anything else. */
.fl-pw-overlay { z-index: 100050; }
.fl-pw-modal { max-width: 460px; }
.fl-pw-hero { padding: 34px 32px 6px; text-align: center; }
.fl-pw-icon {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1a8fe3, #6c5ce7); color: #fff; font-size: 26px;
    box-shadow: 0 10px 24px rgba(26, 143, 227, 0.28);
}
.fl-pw-hero h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #1e293b; }
.fl-pw-hero p { margin: 0; color: #64748b; font-size: 14px; line-height: 1.55; }
.fl-pw-body { padding: 20px 32px 26px; }
.fl-pw-error {
    display: none; margin: -4px 0 12px; padding: 10px 12px; border-radius: 8px;
    background: #fee2e2; color: #b91c1c; font-size: 13px; line-height: 1.4;
}
.fl-pw-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.fl-pw-later { background: #f1f5f9; color: #475569; }
.fl-pw-later:hover { background: #e2e8f0; }
.fl-pw-note { margin: 16px 0 0; font-size: 12.5px; color: #94a3b8; text-align: center; }
html[data-theme="black"] .fl-pw-hero h3 { color: #e6ecf4; }
html[data-theme="black"] .fl-pw-hero p { color: #9fb0c3; }
html[data-theme="black"] .fl-pw-later { background: #1f2a3a; color: #c7d2de; }
html[data-theme="black"] .fl-pw-later:hover { background: #2a3749; }
html[data-theme="black"] .fl-pw-error { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
html[data-theme="black"] .fl-pw-note { color: #6f8197; }

@media (max-width: 640px) {
    .user-profile-modal {
        width: 95%;
        max-height: 95vh;
    }
    .up-form-row {
        flex-direction: column;
        gap: 0;
    }
    .up-info-grid {
        grid-template-columns: 1fr;
    }
    .user-profile-tabs {
        padding: 0 16px;
    }
    .up-tab-content {
        padding: 20px 16px;
    }
}


.truncated-description{
    word-break: break-all;
}

/* ═══════════════════════════════════════ */
/* HELP / USER GUIDE POPUP                 */
/* ═══════════════════════════════════════ */
.help-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
    z-index: 9500;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.help-popup-overlay.open {
    display: flex;
    opacity: 1;
}

.help-popup {
    background: #ffffff;
    border-radius: 16px;
    width: 1400px;
    max-width: 96vw;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    opacity: 0;
}

.help-popup-overlay.open .help-popup {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.help-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}

.help-popup-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.help-popup-title i {
    color: #1a8fe3;
    font-size: 18px;
}

.help-popup-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
}

.help-popup-close:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
    transform: rotate(90deg);
}

.help-popup-body {
    flex: 1;
    overflow: hidden;
    background: #f4f6f9;
}

.help-popup-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Help button specific styling */
#topbar-help-btn {
    color: #64748b;
    font-size: 15px;
}

#topbar-help-btn:hover {
    color: #1a8fe3;
    background: #e8f4fe;
    border-color: #b5d4f4;
}

@media (max-width: 768px) {
    .help-popup {
        width: 100%;
        height: 100%;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .help-popup-header {
        padding: 12px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* TOP-MENU + LEFT-SIDEKICK LAYOUT                                          */
/* The old left nav is gone: nav items now live in the topbar's expandable  */
/* menus (.pw-topmenus) and the left column hosts the persistent Sidekick.  */
/* ═══════════════════════════════════════════════════════════════════════ */
:root { --sidekick-width: 500px; }

/* ── Left Sidekick column ── */
.pw-sidekick {
    width: var(--sidekick-width);
    min-width: var(--sidekick-width);
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.22s ease, min-width 0.22s ease;
    position: relative;
}

/* ── Resize handle on the right edge of the Sidekick ──
   Lets the user drag to widen / narrow the chat column. The width is
   persisted to localStorage and restored on every reload (handled in
   project.html). While dragging we disable the width transition so the
   panel tracks the cursor in real time (class `pw-sidekick-resizing` is
   added to .app-container by the JS). */
.pw-sidekick-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 50;
    background: transparent;
    transition: background 0.15s ease;
    user-select: none;
}
.pw-sidekick-resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 2px;
    width: 2px;
    height: 100%;
    background: transparent;
    transition: background 0.15s ease;
}
.pw-sidekick-resize-handle:hover::after,
.app-container.pw-sidekick-resizing .pw-sidekick-resize-handle::after {
    background: var(--primary, #1a8fe3);
}
.app-container.pw-sidekick-resizing .pw-sidekick,
.app-container.pw-sidekick-resizing .pw-sidekick-reopen {
    transition: none !important;
}
.app-container.pw-sidekick-resizing {
    cursor: col-resize;
    user-select: none;
}
.app-container.pw-sidekick-resizing iframe {
    pointer-events: none;
}
/* Hide the handle when the panel is collapsed (no width to grab). */
.app-container.sidekick-collapsed .pw-sidekick-resize-handle {
    display: none;
}
html[data-theme="black"] .pw-sidekick-resize-handle:hover::after,
html[data-theme="black"].app-container.pw-sidekick-resizing .pw-sidekick-resize-handle::after {
    background: #6fc0ff;
}

/* Collapse: shrink the column to nothing and reveal the reopen strip. */
.app-container.sidekick-collapsed .pw-sidekick {
    width: 0;
    min-width: 0;
    border-right: none;
}
.pw-sidekick-reopen {
    width: 38px;
    min-width: 38px;
    height: 100vh;
    border: none;
    border-right: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 16px;
}
.pw-sidekick-reopen:hover { background: var(--sidebar-active-bg); }

/* Dock the Sidekick chat window (concept.css renders it as a floating,
   draggable, fixed-position popup; here it fills the left column). */
.pw-sidekick .ai-chat-window {
    position: static !important;
    inset: auto !important;
    left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    max-width: none !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    animation: none !important;
    z-index: auto !important;
}
/* The Sidekick title bar is dropped — the panel header (logo + selector) sits
   above the chat window instead. */
.pw-sidekick .ai-chat-header { display: none !important; }
/* The docked Sidekick never dims the page behind it. */
.pw-sidekick .ai-chat-backdrop { display: none !important; }

/* ── Left-panel header: brand logo + project selector + collapse ──
   Two rows: logo (+ theme slot + collapse) on top, project selector on a
   full-width row below — gives the bigger logo room to breathe. */
.pw-sidekick-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}
.pw-sidekick-logo { height: 42px; width: auto; cursor: pointer; flex-shrink: 0; margin-right: auto; }
.pw-sidekick-project-selector { position: relative; flex: 1 1 100%; order: 10; min-width: 0; border: none; }
.pw-sidekick-project-selector .project-selector-current {
    padding: 6px 12px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
}
.pw-sidekick-project-selector .project-selector-dropdown {
    top: calc(100% + 6px);
    left: 0; right: 0;
    width: auto;
}
.pw-sidekick-collapse-btn {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border: 1px solid var(--sidebar-border);
    background: transparent;
    color: #64748b;
    border-radius: 8px;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: all 0.12s;
}
.pw-sidekick-collapse-btn:hover { background: var(--sidebar-hover-bg); color: var(--primary); }

/* ── Topbar layout (menus · actions · user) — logo + project selector now
   live in the left Sidekick panel, not here. ── */
.topbar { gap: 10px; }

/* ── Top expandable menus ── */
.pw-topmenus {
    display: flex;
    align-items: center;
    /* Wrap the menu triggers onto extra rows on a narrow screen — see .topbar. */
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 4px;
    min-width: 0;
}
.pw-menu { position: relative; display: inline-flex; align-items: center; }
.pw-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid transparent;
    color: #475569;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s;
}
.pw-menu-trigger > i:first-child { color: var(--primary); font-size: 14px; }
.pw-menu-trigger:hover { background: var(--sidebar-hover-bg); color: #1e293b; }
.pw-menu-caret { font-size: 9px; opacity: 0.55; transition: transform 0.15s; }
.pw-menu.open .pw-menu-caret { transform: rotate(180deg); }
.pw-menu.open .pw-menu-trigger { background: var(--sidebar-active-bg); color: var(--primary); border-color: #cfe6fb; }
/* Highlight the trigger of whichever menu owns the active page. */
.pw-menu:has(.nav-link.active) .pw-menu-trigger { color: var(--primary); background: var(--sidebar-active-bg); }

.pw-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-height: calc(100vh - var(--topbar-height) - 24px);
    overflow-y: auto;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.14);
    z-index: 709;
}
.pw-menu.open .pw-menu-panel { display: block; }
.pw-menu-panel-wide { min-width: 280px; }
.pw-menu-panel .nav-group-items { padding: 0 8px; }

/* Sub-headers inside the "Other" / "MCP" panels */
.pw-menu-subhead {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sidebar-group-text);
}
.pw-menu-subhead:first-child { padding-top: 2px; }
.pw-menu-subhead i { color: var(--sidebar-group-text); font-size: 11px; }

/* Second-level header (e.g. Migration / Canvas / Export Diagrams under
   "View, Export & Import"). */
.pw-menu-subsubhead {
    list-style: none;
    padding: 6px 12px 2px 18px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sidebar-group-text);
    opacity: 0.85;
}

/* Action rows inside a menu panel (not navigation — concept-canvas commands). */
.pw-menu-panel .pw-menu-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sidebar-text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    line-height: 1.3;
}
.pw-menu-panel .pw-menu-action:hover { background: #f4f8fe; color: #1a8fe3; }
.pw-menu-action-row {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
}
.pw-menu-action-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--sidebar-text);
    cursor: pointer;
}
.pw-menu-action-row select {
    margin-left: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 5px 8px;
    font-size: 13px;
    color: var(--sidebar-text);
    cursor: pointer;
}
html[data-theme="black"] .pw-menu-panel .pw-menu-action:hover { background: #16202e; color: #6fc0ff; }
html[data-theme="black"] .pw-menu-action-row select { background: #0d141e; border-color: #2a3b50; color: #e6ecf4; }

/* ── User / account menu in the topbar ── */
.topbar-user { position: relative; display: flex; align-items: center; gap: 6px; }
.topbar-user .user-avatar { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.topbar-user .user-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 160px;
}
.topbar-user .user-dropdown-btn .user-name { font-size: 13px; max-width: 120px; }
.topbar-user .user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
    min-width: 230px;
}

/* ── Mobile: top menus collapse into a slide-in drawer (#sidebar hook) ── */
/* Note: narrow screens used to hide every trigger's label here, leaving a row
   of unlabeled icons with nothing to scroll to. The menus wrap onto a second
   row instead (.topbar / .pw-topmenus above), so the labels always stay. */
@media (max-width: 768px) {
    /* The chat column must never be wider than the phone screen: the desktop
       default is a hard 500px (var --sidekick-width) which used to overflow a
       ~390px viewport and clip the message bubbles (Redmine #71). */
    :root { --sidekick-width: 100vw; }
    .pw-sidekick {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 1001;
        box-shadow: 4px 0 24px rgba(0,0,0,0.1);
        width: 100vw !important;      /* beats the JS-restored inline width */
        min-width: 0 !important;
        max-width: 100vw;
        height: 100dvh;               /* dvh: excludes mobile browser chrome */
    }
    .app-container.sidekick-collapsed .pw-sidekick { transform: translateX(-100%); }
    .pw-sidekick-resize-handle { display: none; }  /* drag-resize is mouse-only */
    .app-container { height: 100dvh; }
    .pw-topmenus {
        position: fixed;
        left: 0; top: var(--topbar-height); bottom: 0;
        width: 260px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        border-right: 1px solid var(--sidebar-border);
        padding: 12px 8px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1001;
        overflow-y: auto;
    }
    .pw-topmenus#sidebar.open { transform: translateX(0); }
    .pw-menu { display: block; }
    .pw-menu-trigger { width: 100%; justify-content: flex-start; }
    .pw-menu-trigger > span { display: inline; }
    .pw-menu-panel { position: static; box-shadow: none; border: none; min-width: 0; padding: 0 0 6px; }
    .mobile-menu-toggle { display: block; }
    .mobile-menu-overlay.open { display: block; }
    .topbar-user .user-dropdown-btn .user-name { display: none; }
}

/* ── Dark-theme overrides for the new top-menu chrome ──
   (.nav-link, .user-dropdown-menu, .project-selector-* already get dark
   treatment from theme-black.css since the markup reuses those classes.) */
html[data-theme="black"] .pw-menu-trigger { color: #c3ccd9; }
html[data-theme="black"] .pw-menu-trigger:hover { background: #16202e; color: #ffffff; }
html[data-theme="black"] .pw-menu.open .pw-menu-trigger { background: #0f4a75; color: #6fc0ff; border-color: #1d5a86; }
html[data-theme="black"] .pw-menu-panel {
    background: #0d141e;
    border-color: #2a3b50;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
html[data-theme="black"] .pw-sidekick-reopen { color: #6fc0ff; }
html[data-theme="black"] .topbar-user .user-dropdown-btn .user-name { color: #e6ecf4; }

/* ── Structure tabs (below the topbar; replaces the Structure dropdown) ──
   Core layers as always-visible tabs; the rest in a right-aligned "More"
   dropdown. Tabs wrap to a second row on narrow viewports instead of
   scrolling so the More dropdown is never clipped by an overflow context. */
.pw-struct-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 14px;
    background: #fff;
    border-bottom: 1px solid var(--sidebar-border, #e2e8f0);
    flex-shrink: 0;
    min-height: 38px;
    position: relative;
    z-index: 700;
}
.pw-stab { display: inline-flex; }
.pw-struct-tabs > .pw-stab > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    /* Tabs highlight with a bottom line ONLY — kill the sidebar nav-link
       left border / pill radius that would otherwise bleed in here. */
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
}
.pw-struct-tabs > .pw-stab > .nav-link i { font-size: 12px; color: #94a3b8; }
.pw-struct-tabs > .pw-stab > .nav-link:hover { color: #1e293b; background: var(--sidebar-hover-bg); }
.pw-struct-tabs > .pw-stab > .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: none;
    border-radius: 0;
}
.pw-struct-tabs > .pw-stab > .nav-link.active i { color: var(--primary); }

/* Sits directly after the UI Designs tab (source order), not pushed right. */
.pw-stab-more { margin-left: 2px; }
.pw-stab-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid transparent;
    color: #64748b;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s;
}
.pw-stab-more-btn:hover { background: var(--sidebar-hover-bg); color: #1e293b; }
.pw-stab-more.open .pw-stab-more-btn { background: var(--sidebar-active-bg); color: var(--primary); }
/* Highlight "More" when one of its hidden layers is the active page. */
.pw-stab-more:has(.nav-link.active) .pw-stab-more-btn { color: var(--primary); background: var(--sidebar-active-bg); }
.pw-stab-more .pw-menu-panel { left: auto; right: 0; }

html[data-theme="black"] .pw-struct-tabs { background: #0b111a; border-bottom-color: #223146; }
html[data-theme="black"] .pw-struct-tabs > .pw-stab > .nav-link { color: #8a97a8; }
html[data-theme="black"] .pw-struct-tabs > .pw-stab > .nav-link i { color: #5c6b7f; }
html[data-theme="black"] .pw-struct-tabs > .pw-stab > .nav-link:hover { color: #ffffff; background: #16202e; }
html[data-theme="black"] .pw-struct-tabs > .pw-stab > .nav-link.active { color: #6fc0ff; border-bottom-color: #6fc0ff; background: none; }
html[data-theme="black"] .pw-struct-tabs > .pw-stab > .nav-link.active i { color: #6fc0ff; }
html[data-theme="black"] .pw-stab-more-btn { color: #8a97a8; }
html[data-theme="black"] .pw-stab-more-btn:hover { background: #16202e; color: #ffffff; }
html[data-theme="black"] .pw-stab-more.open .pw-stab-more-btn,
html[data-theme="black"] .pw-stab-more:has(.nav-link.active) .pw-stab-more-btn { background: #0f4a75; color: #6fc0ff; }

@media (max-width: 768px) {
    .pw-struct-tabs { padding: 0 8px; }
    .pw-struct-tabs > .pw-stab > .nav-link { padding: 8px 9px 6px; font-size: 12px; }
    /* The More dropdown must stay a dropdown here — the mobile drawer rules
       flatten .pw-menu-panel to static for the drawer menus only. */
    .pw-stab-more .pw-menu-panel { position: absolute; box-shadow: 0 12px 40px rgba(0,0,0,0.14); border: 1px solid #e2e8f0; min-width: 240px; padding: 8px 0; }
    html[data-theme="black"] .pw-stab-more .pw-menu-panel { border-color: #2a3b50; }
}

/* ── Think Agents menu: Global categories accordion ── */
.ta-cat-head { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sidebar-group-text, #94a3b8); }
.ta-cat-head:hover { color: var(--sidebar-text, #e6ecf4); }
.ta-cat-head .ta-cat-caret { margin-left: auto; font-size: 10px; transition: transform .15s ease; }
.ta-cat.open .ta-cat-head .ta-cat-caret { transform: rotate(180deg); }
.ta-cat-items { display: none; list-style: none; margin: 0; padding: 0; }
.ta-cat.open .ta-cat-items { display: block; }

/* ── Think Agents menu: Global category flyout (horizontal submenu) ── */
.ta-cat-item .ta-flyout-caret { margin-left: auto; font-size: 10px; opacity: .7; }
#ta-flyout { position: fixed; min-width: 248px; max-height: 72vh; overflow: auto; z-index: 100020;
  background: var(--sidebar-bg, #0d141e); border: 1px solid var(--sidebar-border, #2a3b50);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.5); padding: 6px; display: none; }
#ta-flyout .nav-group-items { list-style: none; margin: 0; padding: 0; }

/* ═══════════ CHAT-ONLY MODE (fresh project — no concept yet) ═══════════
   project.js puts .pw-chat-only on <body> while the project has zero
   concept blocks and zero source files: the Sidekick chat takes the whole
   screen (conversation centered as a reading column) and the workspace
   collapses to width 0. NOT display:none — the concept page hosts
   fixed-position modals (Requirements Analyzer, confirm dialogs) that must
   stay showable while the workspace itself is hidden. The mode exits
   automatically when the first concept blocks arrive (pwUpdateChatOnlyMode
   runs on every stats refresh). */
body.pw-chat-only .main-content {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
}
body.pw-chat-only .pw-sidekick {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    border-right: none;
}
body.pw-chat-only .pw-sidekick-resize-handle,
body.pw-chat-only .pw-sidekick-collapse-btn,
body.pw-chat-only .pw-sidekick-reopen,
body.pw-chat-only .sk-toolbar,
body.pw-chat-only .sk-history-panel,
body.pw-chat-only #pw-journey-board,
body.pw-chat-only #pw-float-dock {
    display: none !important;
}
/* Center the conversation + input as one comfortable column. */
body.pw-chat-only .ai-chat-messages,
body.pw-chat-only .ai-chat-input-container {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/* Theme switch in the Sidekick top bar: only for chat-only mode — the
   normal workspace already has the topbar toggle, so outside chat-only
   this one stays hidden to avoid a duplicate. */
.pw-sidekick-theme-slot { display: none !important; }
body.pw-chat-only .pw-sidekick-theme-slot {
    display: inline-flex !important;
    margin-right: 4px;
    flex-shrink: 0;
}
/* The gutters beside the centered column show the chat window's own
   background (--bg-primary — white in light theme) which reads as two
   white stripes framing the conversation. Paint the whole surface with
   the conversation background instead so it is one seamless chat page. */
body.pw-chat-only .pw-sidekick,
body.pw-chat-only .pw-sidekick .ai-chat-window {
    background: var(--bg-secondary);
}
body.pw-chat-only .ai-chat-input-container {
    background: transparent;
    border-top: none;
}

/* ═══════════ CONCEPT EDUCATION CAROUSEL (feedback 4.9.7) ═══════════
   While a FRESH concept is building (chat-only mode), the chat moves to the
   left half and the right half shows a carousel of example artifacts —
   screenshots from a real sample project — so the user learns what the
   build will produce while they wait. project.js owns show/hide
   (pwShowConceptEduPanel / pwHideConceptEduPanel). */
#pw-edu-panel { display: none; }
body.pw-chat-only.pw-edu-open .pw-sidekick {
    flex: 0 0 50%;
    width: 50%;
    min-width: 420px;
    border-right: 1px solid var(--sidebar-border);
}
body.pw-chat-only.pw-edu-open #pw-edu-panel {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    flex-direction: column;
    background: var(--bg-secondary, #0a1018);
    overflow: hidden;
}
.pw-edu-head {
    padding: 22px 28px 6px;
    flex-shrink: 0;
}
.pw-edu-eyebrow {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary, #1a8fe3);
    margin-bottom: 6px;
}
.pw-edu-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--text-primary, #e6ecf4);
    line-height: 1.3;
}
.pw-edu-sub {
    font-size: 13px;
    color: var(--text-secondary, #8a97a8);
    margin-top: 4px;
}
.pw-edu-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    position: relative;
}
.pw-edu-slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
/* Caption sits ABOVE the image. The screenshot shows inside a CIRCULAR
   viewport — edges cut off by the circle — so it reads as a stylized
   glimpse of what's coming, not as this project's real output. */
.pw-edu-img-wrap {
    flex: 0 0 auto;
    align-self: center;
    position: relative;
    width: min(54vh, 82%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border-color, #243247);
    box-shadow:
        0 0 0 10px rgba(26, 143, 227, 0.06),
        0 0 0 1px rgba(26, 143, 227, 0.25),
        0 0 70px rgba(26, 143, 227, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Fill the circle (edges crop away) with a slow drift while the slide is
   up, so the preview feels alive — a moving glimpse, not a static doc. */
.pw-edu-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .4s ease;
}
.pw-edu-img-wrap img.pw-edu-loaded {
    opacity: 1;
    animation: pw-edu-drift 7s ease-in-out both;
}
@keyframes pw-edu-drift {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}
/* "Example preview" pill under the circle — removes any doubt that this
   is a sample, not the user's own build output. */
.pw-edu-badge {
    align-self: center;
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(26, 143, 227, 0.35);
    background: rgba(26, 143, 227, 0.10);
    color: var(--primary, #1a8fe3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pw-edu-caption {
    flex-shrink: 0;
    padding: 0 4px 18px;
}
.pw-edu-caption-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--text-primary, #e6ecf4);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pw-edu-caption-title i { color: var(--primary, #1a8fe3); font-size: 18px; }
.pw-edu-caption-desc {
    font-size: 15.5px;
    color: var(--text-secondary, #8a97a8);
    line-height: 1.5;
    margin-top: 5px;
}
/* Slide transition: content swipes in from the right on every change. */
@keyframes pw-edu-swipe {
    from { transform: translateX(64px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.pw-edu-slide.pw-edu-anim { animation: pw-edu-swipe .38s cubic-bezier(.22, .8, .32, 1); }
.pw-edu-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #243247);
    background: var(--bg-primary, #111a26);
    color: var(--text-primary, #e6ecf4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: .85;
    z-index: 2;
}
.pw-edu-nav:hover { opacity: 1; border-color: var(--primary, #1a8fe3); color: var(--primary, #1a8fe3); }
.pw-edu-nav-prev { left: 8px; }
.pw-edu-nav-next { right: 8px; }
.pw-edu-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 28px 20px;
}
.pw-edu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--border-color, #2a3b50);
    cursor: pointer;
    transition: all .2s ease;
}
.pw-edu-dot.active {
    background: var(--primary, #1a8fe3);
    width: 22px;
    border-radius: 4px;
}
/* Panel is pointless on small screens — the chat needs the full width. */
@media (max-width: 1100px) {
    body.pw-chat-only.pw-edu-open .pw-sidekick { flex: 1 1 auto; width: 100%; min-width: 0; border-right: none; }
    body.pw-chat-only.pw-edu-open #pw-edu-panel { display: none; }
}