:root {
    --diana-primary: #8B7EC8;
    --diana-primary-soft: rgba(139, 126, 200, 0.08);
    --diana-primary-text: #6B5CA5;
    --diana-accent: #C490D1;
    --diana-bg: #F8F7FC;
    --diana-surface: rgba(255, 255, 255, 0.65);
    --diana-surface-solid: #FFFFFF;
    --diana-text: #2D2A3E;
    --diana-text-sec: #8E8A9E;
    --diana-text-muted: #B5B1C4;
    --diana-border: rgba(139, 126, 200, 0.07);
    --diana-border-active: rgba(139, 126, 200, 0.18);
    --diana-green: #6DD4A0;
    --diana-green-soft: rgba(109, 212, 160, 0.08);
    --diana-amber: #E8A769;
    --diana-amber-soft: rgba(232, 167, 105, 0.08);
    --diana-blue: #6BA3E8;
    --diana-red: #E07575;
    --diana-radius: 14px;
    --diana-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
    font-family: 'Outfit', -apple-system, sans-serif;
    background: var(--diana-bg);
    color: var(--diana-text);
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(139,126,200,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(196,144,209,0.04) 0%, transparent 50%);
}

/* ── Ant Design overrides ── */
.ant-layout { background: transparent !important; }
.ant-layout-sider { background: rgba(255,255,255,0.45) !important; backdrop-filter: blur(40px); border-right: 1px solid var(--diana-border) !important; }
.ant-menu { background: transparent !important; border: none !important; font-family: 'Outfit', sans-serif !important; }
.ant-menu-item { border-radius: 8px !important; margin: 2px 8px !important; color: var(--diana-text-sec) !important; }
.ant-menu-item:hover { background: var(--diana-primary-soft) !important; color: var(--diana-text) !important; }
.ant-menu-item-selected { background: var(--diana-primary-soft) !important; color: var(--diana-primary-text) !important; font-weight: 500 !important; }
.ant-menu-item-selected::after { display: none !important; }
.ant-card { border-radius: var(--diana-radius) !important; border: 1px solid var(--diana-border) !important; box-shadow: none !important; }
.ant-card:hover { border-color: var(--diana-border-active) !important; }
.ant-tag { border-radius: 6px !important; border: none !important; font-family: 'Outfit', sans-serif !important; font-size: 11px !important; }
.ant-btn-primary { background: linear-gradient(135deg, var(--diana-primary), #9B8ED8) !important; border: none !important; box-shadow: 0 2px 10px rgba(139,126,200,0.2) !important; }
.ant-btn-primary:hover { box-shadow: 0 4px 16px rgba(139,126,200,0.3) !important; transform: translateY(-1px); }
.ant-badge-status-success { background: var(--diana-green) !important; }
.ant-badge-status-warning { background: var(--diana-amber) !important; }
.ant-badge-status-processing { background: var(--diana-primary) !important; }

/* ── Layout ── */
.diana-app { min-height: 100vh; position: relative; z-index: 1; }

/* Flex column fills the sider top-to-bottom so the back-to-solutions button
   and the user chip naturally sit at the bottom without absolute positioning.
   overflow-x:hidden everywhere prevents the AntDesign Menu's internal width
   measurements from leaking a horizontal scrollbar during InlineCollapsed
   transitions or when a menu label is briefly longer than the sider width. */
.diana-sider-inner { display: flex; flex-direction: column; height: 100vh; overflow-x: hidden; }
.diana-menu-scroll { flex: 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; }

/* Collapse toggle at the top — uses menu-fold/unfold icons, deliberately NOT a
   chevron, so it never reads as "go back" (the back control is at the bottom). */
.diana-collapse-btn {
    align-self: flex-end; margin: 12px 12px 4px;
    width: 32px; height: 32px; border-radius: 8px;
    background: transparent; border: 1px solid var(--diana-border);
    color: var(--diana-text-sec); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1;
    transition: all 0.15s;
}
.diana-collapse-btn:hover { border-color: var(--diana-primary); color: var(--diana-primary-text); }
.diana-sider-inner.collapsed .diana-collapse-btn { align-self: center; margin: 12px 0 4px; }

.diana-logo { display: flex; align-items: center; gap: 10px; padding: 6px 14px 14px; margin: 0 8px; transition: padding 0.2s; flex-shrink: 0; }
.diana-logo.collapsed { padding: 6px 0 14px; margin: 0 6px; justify-content: center; }
.diana-logo-mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--diana-primary), var(--diana-accent)); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(139,126,200,0.25); color: white; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.diana-logo-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.diana-logo-text { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Back-to-solutions button — the actual "navigate out of this workspace" control,
   anchored at the bottom above the user chip. */
.diana-back-btn {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    margin: 8px 16px 0; padding: 8px 12px;
    background: transparent; border: 1px solid var(--diana-border);
    border-radius: 8px; cursor: pointer;
    color: var(--diana-text-sec); font-family: inherit;
    font-size: 12px; font-weight: 500;
    transition: all 0.15s;
}
.diana-back-btn:hover {
    background: var(--diana-primary-soft);
    border-color: var(--diana-primary);
    color: var(--diana-primary-text);
}
.diana-sider-inner.collapsed .diana-back-btn {
    width: 36px; height: 36px; padding: 0;
    margin: 8px auto 0; justify-content: center;
}

/* AntDesign renders an empty default trigger at the bottom of Sider even when
   Trigger="null" is set in Blazor. Hide it so it doesn't cover the UserChip. */
.ant-layout-sider-trigger { display: none !important; }
.ant-layout-sider-has-trigger { padding-bottom: 0 !important; }
.diana-content { padding: 24px 28px; overflow-y: auto; height: calc(100vh - 0px); }
.diana-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.diana-topbar-title { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }
.diana-topbar-sub { font-size: 12.5px; color: var(--diana-text-muted); margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--diana-border); }

/* ── Status dots ── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.green { background: var(--diana-green); box-shadow: 0 0 6px rgba(109,212,160,0.4); }
.status-dot.amber { background: var(--diana-amber); }
.status-dot.red { background: var(--diana-red); }
.status-dot.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.4s var(--diana-ease) both; }

/* ── Feature board ── */
.board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; }
.board-column { min-width: 240px; flex: 1; }
.board-column-header { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--diana-text-muted); padding: 0 4px 12px; display: flex; justify-content: space-between; }
.board-column-count { background: var(--diana-primary-soft); color: var(--diana-primary-text); border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.feature-card { padding: 14px 16px; margin-bottom: 8px; border-radius: 12px; background: var(--diana-surface-solid); border: 1px solid var(--diana-border); cursor: pointer; transition: all 0.25s var(--diana-ease); }
.feature-card:hover { border-color: var(--diana-border-active); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(139,126,200,0.06); }
.feature-card-title { font-size: 13.5px; font-weight: 500; margin-bottom: 4px; }
.feature-card-desc { font-size: 12px; color: var(--diana-text-sec); line-height: 1.4; }
.feature-card-tags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.feature-tag { font-size: 10px; padding: 2px 8px; border-radius: 5px; font-weight: 500; }
.feature-tag.api { background: var(--diana-green-soft); color: #3D8B5E; }
.feature-tag.ui { background: rgba(107,163,232,0.08); color: #4A7BB8; }
.feature-tag.db { background: var(--diana-amber-soft); color: #B07D3A; }
.feature-tag.auth { background: var(--diana-primary-soft); color: var(--diana-primary-text); }
.feature-tag.payments { background: rgba(224,117,117,0.08); color: #C25555; }

/* ── Members ── */
.member-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 12px; background: var(--diana-surface-solid); border: 1px solid var(--diana-border); margin-bottom: 8px; transition: all 0.25s var(--diana-ease); }
.member-card:hover { border-color: var(--diana-border-active); }
.member-avatar { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; color: white; position: relative; }
.member-info { flex: 1; }
.member-name { font-size: 14px; font-weight: 500; }
.member-email { font-size: 12px; color: var(--diana-text-muted); }
.role-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 7px; }
.role-badge.owner { background: var(--diana-primary-soft); color: var(--diana-primary-text); }
.role-badge.engineer { background: var(--diana-green-soft); color: #3D8B5E; }
.role-badge.copilot { background: linear-gradient(135deg, rgba(139,126,200,0.1), rgba(196,144,209,0.08)); color: var(--diana-primary-text); }

/* ── Environment cards ── */
.env-card { padding: 20px; border-radius: var(--diana-radius); background: var(--diana-surface-solid); border: 1px solid var(--diana-border); }
.env-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.env-card-title { font-size: 14px; font-weight: 500; }
.env-card-url { font-size: 12px; color: var(--diana-primary-text); font-family: 'JetBrains Mono', monospace; }

/* ── Splitter drag: disable pointer events on iframes so move/up reach the parent
   document. Without this the cursor entering the preview iframe captures events
   and the drag gets stuck. ── */
body.diana-splitter-dragging { cursor: col-resize !important; user-select: none; }
body.diana-splitter-dragging iframe { pointer-events: none !important; }