/* =============================================================================
   SGraph Workspace — Stylesheet
   v0.1.0 — Five-zone grid layout with Aurora theme

   Zone layout:
     header (full width)
     nav | vault | source | transform | debug
     nav | vault | chat              | debug
     status (full width)
   ============================================================================= */

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

/* --- Theme (Aurora — same tokens as admin) -------------------------------- */
:root {
    /* Backgrounds */
    --ws-bg:                 #1A1A2E;
    --ws-surface:            #16213E;
    --ws-surface-raised:     #1c2a4a;
    --ws-surface-hover:      #253254;
    --ws-border:             #2C3E6B;
    --ws-border-subtle:      #222d4d;

    /* Text */
    --ws-text:               #F0F0F5;
    --ws-text-secondary:     #8892A0;
    --ws-text-muted:         #5a6478;

    /* Primary Accent — Teal */
    --ws-primary:            #4ECDC4;
    --ws-primary-hover:      #3dbdb4;
    --ws-primary-bg:         rgba(78, 205, 196, 0.1);

    /* Semantic */
    --ws-success:            #4ECDC4;
    --ws-success-bg:         rgba(78, 205, 196, 0.08);
    --ws-error:              #E94560;
    --ws-error-bg:           rgba(233, 69, 96, 0.08);
    --ws-warning:            #fbbf24;
    --ws-warning-bg:         rgba(251, 191, 36, 0.08);

    /* Typography */
    --ws-font:               'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ws-font-mono:          'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    --ws-font-size-xs:       0.75rem;
    --ws-font-size-sm:       0.8125rem;
    --ws-font-size-md:       0.875rem;
    --ws-font-size-lg:       1rem;

    /* Layout */
    --ws-nav-width:          48px;
    --ws-vault-width:        240px;
    --ws-debug-width:        320px;
    --ws-header-height:      48px;
    --ws-chat-height:        180px;
    --ws-status-height:      28px;

    /* Misc */
    --ws-radius:             6px;
    --ws-transition:         150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--ws-font);
    font-size: 14px;
    color: var(--ws-text);
    background: var(--ws-bg);
    -webkit-font-smoothing: antialiased;
}

/* --- Shell Grid ----------------------------------------------------------- */

.ws-shell {
    display: grid;
    grid-template-areas:
        "header  header    header      header    header    header    header"
        "nav     vault     vault-resize main      main      resize    debug"
        "nav     vault     vault-resize main      main      resize    debug"
        "status  status    status      status    status    status    status";
    grid-template-columns: var(--ws-nav-width) var(--ws-vault-width) 4px 1fr 1fr 4px var(--ws-debug-width);
    grid-template-rows: var(--ws-header-height) 1fr var(--ws-chat-height) var(--ws-status-height);
    height: 100vh;
    overflow: hidden;
}

.ws-shell--no-debug {
    grid-template-columns: var(--ws-nav-width) var(--ws-vault-width) 4px 1fr 1fr 0 0;
}

.ws-shell--no-debug .ws-debug-sidebar,
.ws-shell--no-debug .ws-debug-resize { display: none; }

.ws-shell--vault-collapsed {
    grid-template-columns: var(--ws-nav-width) 28px 0 1fr 1fr 4px var(--ws-debug-width);
}

.ws-shell--vault-collapsed .ws-vault-content,
.ws-shell--vault-collapsed .ws-vault-title,
.ws-shell--vault-collapsed .ws-vault-icon { display: none; }

.ws-shell--vault-collapsed .ws-vault-header {
    padding: 0.5rem 0.25rem;
    justify-content: center;
}

.ws-shell--vault-collapsed .ws-vault-toggle { margin-left: 0; }

.ws-shell--vault-collapsed.ws-shell--no-debug {
    grid-template-columns: var(--ws-nav-width) 28px 0 1fr 1fr 0 0;
}

.ws-shell--vault-collapsed .ws-vault-resize { display: none; }

/* --- Header --------------------------------------------------------------- */

.ws-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-border);
    z-index: 20;
}

.ws-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--ws-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--ws-radius);
}

.ws-menu-btn:hover { color: var(--ws-text); background: var(--ws-surface-hover); }

.ws-header-title { display: flex; align-items: center; gap: 0.5rem; }

.ws-brand { display: flex; align-items: center; gap: 0; user-select: none; }
.ws-brand__sg { font-weight: 700; font-size: 1.125rem; color: var(--ws-text); letter-spacing: -0.01em; }
.ws-brand__slash { font-weight: 800; color: var(--ws-primary); }
.ws-brand__product { font-weight: 700; font-size: 1.125rem; color: var(--ws-text); }

.ws-header-badge {
    font-size: var(--ws-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--ws-primary-bg);
    color: var(--ws-primary);
}

.ws-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ws-header-version {
    font-size: var(--ws-font-size-xs);
    color: var(--ws-text-muted);
    font-family: var(--ws-font-mono);
}

.ws-debug-toggle {
    font-size: var(--ws-font-size-xs);
    padding: 0.2rem 0.5rem;
    border-radius: var(--ws-radius);
    border: 1px solid var(--ws-border);
    background: transparent;
    color: var(--ws-text-secondary);
    cursor: pointer;
    font-family: var(--ws-font-mono);
}

.ws-debug-toggle:hover { background: var(--ws-surface-hover); color: var(--ws-text); }

/* --- Left Nav (icon strip) ------------------------------------------------ */

.ws-nav {
    grid-area: nav;
    background: var(--ws-surface);
    border-right: 1px solid var(--ws-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
    gap: 0.25rem;
}

.ws-nav-items { display: flex; flex-direction: column; gap: 0.25rem; }

.ws-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ws-radius);
    color: var(--ws-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ws-transition), color var(--ws-transition);
}

.ws-nav-item:hover { background: var(--ws-surface-hover); color: var(--ws-text); }
.ws-nav-item--active { background: var(--ws-primary-bg); color: var(--ws-primary); }

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

/* --- Vault Panel ---------------------------------------------------------- */

.ws-vault-zone {
    grid-area: vault;
    background: var(--ws-surface);
    border-right: 1px solid var(--ws-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ws-vault-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ws-border-subtle);
    flex-shrink: 0;
}

.ws-vault-icon { color: var(--ws-text-secondary); display: flex; }
.ws-vault-title { font-size: var(--ws-font-size-sm); font-weight: 600; color: var(--ws-text); }

.ws-vault-toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--ws-text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--ws-radius);
    display: flex;
}

.ws-vault-toggle:hover { color: var(--ws-text); background: var(--ws-surface-hover); }

.ws-vault-content {
    flex: 1;
    overflow-y: auto;
}

/* --- Vault Resize Handle ------------------------------------------------- */

.ws-vault-resize {
    grid-area: vault-resize;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 5;
}

.ws-vault-resize:hover,
.ws-vault-resize.ws-vault-resize--active { background: var(--ws-primary); }

/* --- Source & Transform Panels -------------------------------------------- */

.ws-transform-area {
    grid-area: main;
    display: grid;
    grid-template-columns: 2fr 4px 1.5fr 4px 1.5fr;
    grid-template-rows: minmax(0, 1fr) 4px var(--ws-chat-height);
    grid-template-areas:
        "source   col-resize script  col-resize2  transform"
        "row-resize row-resize row-resize row-resize row-resize"
        "chat     chat       chat    chat          chat";
    overflow: hidden;
}

.ws-source-zone     { grid-area: source; }
.ws-col-resize      { grid-area: col-resize; }
.ws-script-zone     { grid-area: script; }
.ws-col-resize2     { grid-area: col-resize2; }
.ws-transform-zone  { grid-area: transform; }
.ws-row-resize      { grid-area: row-resize; }
.ws-chat-zone       { grid-area: chat; }

/* Column resize handle (between source and transform) */
.ws-col-resize {
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 5;
}
.ws-col-resize:hover,
.ws-col-resize.ws-col-resize--active { background: var(--ws-primary); }

/* Row resize handle (between panels and chat) */
.ws-row-resize {
    cursor: row-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 5;
}
.ws-row-resize:hover,
.ws-row-resize.ws-row-resize--active { background: var(--ws-primary); }

.ws-source-zone,
.ws-script-zone,
.ws-transform-zone {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ws-bg);
}

/* Source split (HTML top + Data bottom) */
.ws-source-top,
.ws-source-bottom {
    flex: 0.5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.ws-source-split-handle {
    height: 4px; flex-shrink: 0;
    cursor: row-resize;
    background: var(--ws-border-subtle, #222d4d);
    transition: background 0.15s;
}
.ws-source-split-handle:hover,
.ws-source-split-handle--active { background: var(--ws-primary); }

/* Second column resize handle */
.ws-col-resize2 {
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 5;
}
.ws-col-resize2:hover,
.ws-col-resize2.ws-col-resize2--active { background: var(--ws-primary); }

.ws-panel-header {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-border-subtle);
    flex-shrink: 0;
}

.ws-panel-label {
    font-size: var(--ws-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ws-text-muted);
}

.ws-panel-clear {
    margin-left: auto;
    padding: 0.0625rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 600;
    background: transparent;
    color: var(--ws-text-muted);
    border: 1px solid var(--ws-border-subtle);
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
}
.ws-panel-clear:hover {
    color: var(--ws-text-secondary);
    background: var(--ws-surface-hover);
}

.ws-panel-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Web components fill their containers */
document-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

script-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

llm-system-prompt,
llm-prompt-input,
llm-output {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

llm-orchestrator {
    display: none;
}

vault-panel {
    display: block;
    height: 100%;
    overflow: hidden;
}

/* --- Chat Zone ------------------------------------------------------------ */

.ws-chat-zone {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ws-surface);
    border-top: 2px solid var(--ws-border);
}

.ws-chat-header {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--ws-border-subtle);
    flex-shrink: 0;
}

.ws-chat-label {
    font-size: var(--ws-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ws-text-muted);
}

.ws-chat-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

llm-stats {
    width: 200px;
    flex-shrink: 0;
    border-left: 1px solid var(--ws-border-subtle);
    overflow-y: auto;
    background: var(--ws-surface);
}

/* When llm-stats is inside a collapsed chat section, allow it to shrink */
.ws-chat-section--collapsed llm-stats {
    width: auto;
    flex-shrink: 1;
}

/* --- Settings Area -------------------------------------------------------- */

.ws-settings-area {
    grid-area: main;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--ws-bg);
}

/* --- Debug Resize Handle -------------------------------------------------- */

.ws-debug-resize {
    grid-area: resize;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 10;
}

.ws-debug-resize:hover,
.ws-debug-resize--active { background: var(--ws-primary); }

/* --- Debug Sidebar -------------------------------------------------------- */

.ws-debug-sidebar {
    grid-area: debug;
    background: var(--ws-surface);
    border-left: 1px solid var(--ws-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ws-debug-sidebar--hidden { display: none; }

.ws-debug-tabs {
    display: flex;
    border-bottom: 1px solid var(--ws-border);
    flex-shrink: 0;
}

.ws-debug-tab {
    flex: 1;
    padding: 0.5rem;
    font-size: var(--ws-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ws-text-muted);
    cursor: pointer;
    transition: background var(--ws-transition), color var(--ws-transition);
}

.ws-debug-tab:hover { background: var(--ws-surface-hover); color: var(--ws-text-secondary); }
.ws-debug-tab--active { color: var(--ws-primary); border-bottom-color: var(--ws-primary); }

.ws-debug-content { flex: 1; overflow-y: auto; }
.ws-debug-panel { height: 100%; }

/* --- Status Bar ----------------------------------------------------------- */

.ws-statusbar {
    grid-area: status;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.25rem 1rem;
    font-size: var(--ws-font-size-xs);
    color: var(--ws-text-muted);
    background: var(--ws-surface);
    border-top: 1px solid var(--ws-border);
    font-family: var(--ws-font-mono);
}

.ws-status-spacer { flex: 1; }

.ws-msg-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--ws-font-mono);
    background: var(--ws-border);
    color: var(--ws-text-secondary);
    border: none;
    cursor: pointer;
}

.ws-msg-badge--error { background: var(--ws-error); color: #fff; }

/* Activity indicator */
.ws-activity {
    display: none;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--ws-font-size-xs);
    color: var(--ws-primary);
}
.ws-activity--active { display: flex; }
.ws-activity-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ws-primary);
    animation: ws-pulse 1s ease-in-out infinite;
}
.ws-activity-text {
    color: var(--ws-text-secondary);
    font-family: var(--ws-font-mono);
}
@keyframes ws-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.75); }
}

/* --- JS Syntax Highlighting ----------------------------------------------- */

.jsh-keyword     { color: #c678dd; }
.jsh-string      { color: #98c379; }
.jsh-number      { color: #d19a66; }
.jsh-comment     { color: #5c6370; font-style: italic; }
.jsh-builtin     { color: #e5c07b; }
.jsh-operator    { color: #56b6c2; }
.jsh-punctuation { color: #abb2bf; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
    .ws-shell {
        grid-template-columns: var(--ws-nav-width) var(--ws-vault-width) 4px 1fr 1fr 0 0;
    }
    .ws-debug-sidebar, .ws-debug-resize { display: none; }
}

@media (max-width: 768px) {
    .ws-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "source"
            "transform"
            "chat"
            "status";
        grid-template-rows: var(--ws-header-height) 1fr 1fr var(--ws-chat-height) var(--ws-status-height);
    }

    .ws-nav { display: none; }
    .ws-nav--mobile-open {
        display: flex;
        position: fixed;
        top: var(--ws-header-height);
        left: 0;
        bottom: 0;
        width: var(--ws-nav-width);
        z-index: 30;
    }

    .ws-vault-zone { display: none; }
    .ws-vault-resize { display: none; }
    .ws-col-resize, .ws-col-resize2, .ws-row-resize { display: none; }
    .ws-debug-sidebar, .ws-debug-resize { display: none; }
    llm-stats { display: none; }
    .ws-menu-btn { display: block; }
    .ws-source-zone { border-right: none; border-bottom: 1px solid var(--ws-border-subtle); }
}
