/* --------------------------------------------------
           Root
        -------------------------------------------------- */

:root {
    --bg: #000000;
    --bg-deep: #050905;
    --panel: rgba(10, 19, 8, 0.88);
    --panel-light: rgba(18, 36, 14, 0.88);
    --panel-bright: rgba(34, 70, 26, 0.78);
    --line: rgba(74, 136, 48, 0.24);
    --line-bright: rgba(108, 195, 67, 0.45);
    --border: rgba(76, 140, 49, 0.20);
    --border-bright: rgba(108, 195, 67, 0.40);
    --green-dark: #1e3e19;
    --green-mid: #4f9138;
    --green: #67bd45;
    --green-bright: #84e45a;
    --green-hot: #a4ff74;
    --text: #7ec660;
    --text-soft: #5f9f4a;
    --text-dim: #355c2c;
    --blue: #8fdd68;
    --amber: #92d96b;
    --red: #72b554;
    --shadow: 0 0 6px rgba(103, 189, 69, 0.14), 0 0 18px rgba(103, 189, 69, 0.05);
}


        /* --------------------------------------------------
           Reset
        -------------------------------------------------- */

        * {
            box-sizing: border-box;
        }

        html,
body {
    margin: 0;
    background: repeating-linear-gradient(0deg, rgba(111, 185, 74, 0.018) 0, rgba(111, 185, 74, 0.018) 1px, transparent 1px, transparent 4px), #000;
    color: var(--text);
    font-family: "Share Tech Mono", "Courier New", monospace;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: repeating-linear-gradient(0deg, rgba(111, 185, 74, 0.018) 0, rgba(111, 185, 74, 0.018) 1px, transparent 1px, transparent 4px), #000;
    color: var(--text);
    font-family: "Share Tech Mono", "Courier New", monospace;
    overflow-x: hidden;
}

body::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0,
            transparent calc(6% - 1px),
            rgba(77, 142, 50, 0.42) 6%,
            transparent calc(6% + 1px),

            transparent calc(15% - 1px),
            rgba(77, 142, 50, 0.36) 15%,
            transparent calc(15% + 1px),

            transparent calc(24% - 1px),
            rgba(77, 142, 50, 0.35) 24%,
            transparent calc(24% + 1px),

            transparent calc(33% - 1px),
            rgba(77, 142, 50, 0.3) 33%,
            transparent calc(33% + 1px),

            transparent calc(42% - 1px),
            rgba(77, 142, 50, 0.25) 42%,
            transparent calc(42% + 1px)
        ),

        linear-gradient(
            180deg,
            transparent 0,
            transparent calc(12% - 1px),
            rgba(77, 142, 50, 0.34) 12%,
            transparent calc(12% + 1px),

            transparent calc(29% - 1px),
            rgba(77, 142, 50, 0.3) 29%,
            transparent calc(29% + 1px),

            transparent calc(48% - 1px),
            rgba(77, 142, 50, 0.28) 48%,
            transparent calc(48% + 1px),

            transparent calc(72% - 1px),
            rgba(77, 142, 50, 0.25) 72%,
            transparent calc(72% + 1px)
        );

    z-index: 0;
}

body::before {
    content: "";

    position: fixed;

    width: 900px;
    height: 900px;

    left: -470px;
    top: -360px;

    border:
        1px solid rgba(102, 183, 69, 0.27);

    border-radius: 50%;

    box-shadow:
        250px 0 0 -249px rgba(102, 183, 69, 0.15),
        500px 0 0 -499px rgba(102, 183, 69, 0.1);

    pointer-events: none;

    z-index: 0;
}

        button,
        input,
        textarea {
            font: inherit;
        }

        button {
            cursor: pointer;
        }


        


        /* --------------------------------------------------
           App
        -------------------------------------------------- */

.lab {
    position: relative;
    z-index: 1;
    width: min(1760px, calc(100% - 72px));
    min-height: calc(100vh - 52px);
    margin: 26px auto;
    padding: 26px;
    background: linear-gradient(180deg, rgba(14, 28, 11, 0.78), rgba(6, 12, 5, 0.90));
    border: 1px solid rgba(86, 151, 60, 0.14);
    box-shadow: inset 0 0 70px rgba(67, 118, 47, 0.08), 0 0 40px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}

.lab::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: 0.45;
    background: repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(123, 211, 81, 0.022) 4px, rgba(0, 0, 0, 0.06) 5px);
    mix-blend-mode: screen;
}


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

.topbar {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(15, 29, 12, 0.72), rgba(8, 15, 7, 0.84));
    box-shadow: none;
}

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

.brand-mark {
    width: 44px;
    height: 44px;
}

.brand-mark img{height:100%;}

        .brand-title {
            margin: 0;

            color: var(--green-bright);
            font-size: clamp(18px, 2vw, 26px);
            letter-spacing: 0.18em;
        }

        .brand-subtitle {
            margin-top: 3px;

            color: var(--text-soft);
            font-size: 11px;
            letter-spacing: 0.12em;
        }

        .global-status {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 12px;
        }


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

        .status-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;

            color: var(--text-soft);
            font-size: 11px;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }

        .status-dot {
            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: var(--text-dim);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
        }

        .status-dot.online {
            background: var(--green);
            box-shadow:
                0 0 8px rgba(103, 189, 69, 0.8),
                0 0 18px rgba(103, 189, 69, 0.3);
        }

        .status-dot.warning {
            background: var(--amber);opacity:0.6;
        }

        .status-dot.offline {
            background: var(--red);opacity:0.3;
        }


        /* --------------------------------------------------
           Main Grid
        -------------------------------------------------- */

        .hud-grid {
            min-height: 0;

            display: grid;

            grid-template-columns:
                minmax(240px, 0.85fr)
                minmax(440px, 2fr)
                minmax(280px, 1fr);

            gap: 12px;
        }

        .column {
            min-width: 0;

            display: flex;
            flex-direction: column;
            gap: 12px;
        }


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

.panel {
    position: relative;
    min-width: 0;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(14, 28, 12, 0.26), rgba(7, 13, 6, 0.24));
    box-shadow: inset 0 0 20px rgba(80, 160, 54, 0.03);
}

.panel-heading {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px 7px 20px;
    border: 0;
    border-radius: 4px 0 0 0;
    background:
        linear-gradient(180deg, rgba(132, 203, 85, 0.10), transparent 50%, rgba(0, 0, 0, 0.12)),
        linear-gradient(90deg, rgba(79, 150, 48, 0.62), rgba(44, 91, 31, 0.26));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

        .panel-title {
            margin: 0;

            color: var(--green);
            font-size: 11px;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

.panel-code {
    color: rgba(116, 173, 89, 0.55);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

        .panel-body {
            padding: 12px;
        }


        /* --------------------------------------------------
           Subject
        -------------------------------------------------- */

        .subject-card {
            display: grid;
            grid-template-columns: 124px minmax(0, 1fr);
            gap: 12px;
        }

.subject-photo {
    min-height: 108px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(104, 190, 69, 0.20);
    background: linear-gradient(180deg, rgba(41, 87, 29, 0.22), rgba(8, 17, 7, 0.14));
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
}

        .subject-name {
            margin: 0 0 4px;

            color: var(--green-bright);
            font-size: 21px;
            letter-spacing: 0.08em;
        }

        .subject-role {
            margin-bottom: 12px;

            color: var(--text-soft);
            font-size: 11px;
        }

        .subject-meta {
            display: grid;
            gap: 5px;

            color: var(--text-soft);
            font-size: 11px;
        }

        .subject-meta strong {
            color: var(--text);
            font-weight: normal;
        }


        /* --------------------------------------------------
           Metrics
        -------------------------------------------------- */

        .metric-list {
            display: grid;
            gap: 11px;
        }

        .metric {
            display: grid;
            gap: 5px;
        }

        .metric-top {
            display: flex;
            justify-content: space-between;
            gap: 10px;

            color: var(--text-soft);
            font-size: 11px;
        }

        .metric-value {
            color: var(--text);
        }

.metric-track {
    height: 3px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(78, 138, 52, 0.22);
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(110, 206, 71, 0.72), rgba(152, 255, 104, 0.92));
    transition: width 0.25s ease;
}


        /* --------------------------------------------------
           Key Value Rows
        -------------------------------------------------- */

        .kv-list {
            display: grid;
            gap: 7px;
        }

.kv-row {
    --corner-cut: 16px;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    min-height: 42px;
    padding: 4px 5px 4px 22px;
    border: 0;
    border-radius: 5px 3px 3px 0;
    background:
        linear-gradient(180deg, rgba(119, 192, 76, 0.12), transparent 45%, rgba(0, 0, 0, 0.14)),
        linear-gradient(90deg, rgba(69, 133, 44, 0.58), rgba(40, 83, 27, 0.34));
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--corner-cut) 100%, 0 calc(100% - var(--corner-cut)));
    box-shadow: inset 0 1px 0 rgba(145, 220, 95, 0.14);
}

.kv-key {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 4px 0;
    color: #7fba60;
    text-transform: lowercase;
    overflow-wrap: anywhere;
}

.kv-value {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 5px 8px;
    color: #b0ed87;
    border: 1px solid rgba(139, 230, 86, 0.20);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(122, 221, 64, 0.38), rgba(65, 144, 36, 0.22) 48%, rgba(109, 201, 56, 0.32));
    box-shadow: inset 0 0 9px rgba(130, 237, 75, 0.08);
    overflow-wrap: anywhere;
}

        .kv-value.highlight {
    color: var(--green-hot);
}


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

        .chat-panel {
            flex: 1;

            min-height: 550px;

            display: flex;
            flex-direction: column;
        }

        .chat-panel .panel-body {
            flex: 1;
            min-height: 0;

            display: flex;
            flex-direction: column;

            padding: 0;
        }

        .chat-log {
            flex: 1;

            min-height: 0;

            padding: 14px;

            overflow-y: auto;

            display: flex;
            flex-direction: column;
            gap: 13px;
        }

.message {
    max-width: 86%;
    padding: 10px 12px;
    border: 1px solid rgba(76, 140, 49, 0.10);
    background: linear-gradient(90deg, rgba(30, 58, 21, 0.22), rgba(12, 22, 10, 0.12));
}

.message.user {
    align-self: flex-end;
    border: 1px solid rgba(76, 140, 49, 0.10);
    background: linear-gradient(90deg, rgba(43, 77, 30, 0.22), rgba(12, 22, 10, 0.12));
}

.message.pickles {
    align-self: flex-start;
    border: 1px solid rgba(76, 140, 49, 0.10);
    background: linear-gradient(90deg, rgba(35, 70, 24, 0.22), rgba(12, 22, 10, 0.12));
}

.message.system {
    align-self: stretch;
    max-width: none;
    font-size: 11px;
    border: 1px solid rgba(76, 140, 49, 0.10);
    background: linear-gradient(90deg, rgba(28, 54, 20, 0.22), rgba(12, 22, 10, 0.12));
}

.message-meta {
    margin-bottom: 5px;
    color: #588343;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

        .message-text {
            line-height: 1.55;
        }

        .chat-input-wrap {
            padding: 10px;

            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;

            border-top: 1px solid var(--border);
        }

.chat-input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    resize: vertical;
    padding: 10px 12px;
    color: #8ccf6d;
    border: 1px solid rgba(77, 142, 50, 0.18);
    outline: none;
    background: linear-gradient(180deg, rgba(3, 7, 3, 0.92), rgba(4, 9, 4, 0.82));
}

        .chat-input:focus {
            border-color: var(--border-bright);
        }


        /* --------------------------------------------------
           Buttons
        -------------------------------------------------- */

.btn {
    min-height: 34px;

    padding: 7px 14px;

    color: var(--green-bright);

    border:
        1px solid rgba(102, 190, 70, 0.55);

    background:
        linear-gradient(
            180deg,
            rgba(82, 155, 55, 0.22),
            rgba(25, 49, 20, 0.3)
        );

    text-transform: uppercase;
    letter-spacing: 0.08em;

    clip-path:
        polygon(
            8px 0,
            100% 0,
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            0 100%,
            0 8px
        );

    box-shadow:
        inset 0 0 10px rgba(122, 224, 77, 0.06);
}

.btn:hover {
    background: linear-gradient(180deg, rgba(108, 195, 67, 0.24), rgba(20, 36, 15, 0.28));
}

        .btn.small {
            min-height: 28px;

            padding: 5px 8px;

            font-size: 11px;
        }

.btn.danger {
    color: #a7e17e;
    border-color: rgba(102, 190, 70, 0.26);
}


        /* --------------------------------------------------
           JSON / Debug
        -------------------------------------------------- */

        .debug-box {
            margin: 0;

            padding: 10px;

            max-height: 250px;
            overflow: auto;

            color: #8fcf6f;

            border: 1px solid rgba(67, 101, 87, 0.45);

            background: rgba(2, 6, 2, 0.88);

            font-size: 11px;
            line-height: 1.55;

            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }


        /* --------------------------------------------------
           Memory
        -------------------------------------------------- */

        .memory-list {
            display: grid;
            gap: 8px;
        }

.memory-item {
    padding: 8px;
    border: 1px solid rgba(74, 136, 48, 0.14);
    background: linear-gradient(180deg, rgba(20, 36, 15, 0.18), rgba(9, 16, 8, 0.10));
}

        .memory-meta {
            margin-bottom: 5px;

            display: flex;
            justify-content: space-between;
            gap: 10px;

            color: var(--text-dim);
            font-size: 11px;
        }

        .memory-text {
            color: var(--text-soft);
            font-size: 11px;
            line-height: 1.45;
        }


        /* --------------------------------------------------
           Logs
        -------------------------------------------------- */

        .log-list {
            max-height: 205px;

            overflow: auto;

            display: grid;
            gap: 6px;

            font-size: 11px;
        }

        .log-row {
            display: grid;
            grid-template-columns: 58px 62px 1fr;
            gap: 7px;
        }

        .log-time {
            color: var(--text-dim);
        }

        .log-type {
            color: var(--blue);
        }

        .log-type.warn {
            color: var(--amber);
        }

        .log-type.error {
            color: var(--red);
        }

        .log-message {
            color: var(--text-soft);
        }


        /* --------------------------------------------------
           Controls
        -------------------------------------------------- */

        .control-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }


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

        @media (max-width: 1150px) {
            .hud-grid {
                grid-template-columns: 260px 1fr;
            }

            .column.right {
                grid-column: 1 / -1;

                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        

.panel,
.topbar,
.subject-photo,
.btn,
.chat-input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    resize: vertical;
    padding: 10px 12px;
    color: #8ccf6d;
    border: 1px solid rgba(77, 142, 50, 0.18);
    outline: none;
    background: linear-gradient(180deg, rgba(3, 7, 3, 0.92), rgba(4, 9, 4, 0.82));
}

.subject-name,
.kv-value.highlight,
.panel-title {
    color: var(--green-hot);

    text-shadow:
        0 0 4px rgba(132, 228, 90, 0.55),
        0 0 12px rgba(103, 189, 69, 0.18);
}

.subject-meta strong,
.metric-value,
.kv-value,
.message-text {
    color: #92cf70;
}
    
.chat-input::placeholder {
color: rgba(120, 160, 102, 0.55);
}

        /* Narrow screens */
        @media (max-width: 760px) {
            .lab { width: calc(100% - 16px); margin: 8px auto; padding: 8px; }
            .topbar { align-items: flex-start; flex-direction: column; }
            .global-status { justify-content: flex-start; }
            .hud-grid { display: flex; flex-direction: column; }
            .column.right { display: flex; }
            .chat-panel { min-height: 520px; }
            .subject-card { grid-template-columns: 112px minmax(0, 1fr); }
            .kv-row { grid-template-columns: 90px minmax(0, 1fr); }
            .brand-subtitle { overflow-wrap: anywhere; }
        }

        /* Art and readability polish */
        .panel-title {
            font-size: 10px;
            letter-spacing: 0.10em;
        }

        .kv-row {
            font-size: 14px;
            min-height: 38px;
        }

        .panel-code,
        .message-meta,
        .memory-meta,
        .log-time {
            color: #78a95e;
        }

        .memory-text,
        .log-message {
            color: #83b667;
            line-height: 1.55;
        }

        .subject-photo {
            min-height: 0;
            align-self: start;
            overflow: hidden;
        }

        .subject-photo img {
            display: block;
            width: 100%;
            height: auto;
        }



        .runtime-form { display: grid; gap: 9px; font-size: 11px; }
        .runtime-form .chat-input { min-height: 34px; padding: 7px 9px; }
        .runtime-form select { background: #0b1808; }
        .prompt-editor { min-height: 240px !important; margin: 9px 0; }
        .message-text { white-space: pre-wrap; }
        .btn:disabled { opacity: 0.5; cursor: default; }
        summary { cursor: pointer; color: var(--green-hot); }
    
        /* Compact message tools outside the chat bubbles */
        .message-wrap { max-width: 86%; min-width: 0; }
        .message-wrap.user { align-self: flex-end; }
        .message-wrap.pickles { align-self: flex-start; }
        .message-wrap.system { align-self: stretch; max-width: none; }
        .message-wrap .message { max-width: none; }
        .message-wrap.pickles .message { cursor: pointer; }
        .message-wrap.pickles .message:focus-visible { outline: 1px solid var(--green); }
        .message-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 5px 2px 0; }
        .message-wrap.user .message-actions { justify-content: flex-end; }
        .message-action { padding: 2px 0; border: 0; background: none; color: #7baa60; font-size: 11px; cursor: pointer; }
        .message-action:hover { color: var(--green-hot); }
        .message-action:disabled { opacity: 0.45; cursor: default; }
        .generation-info { margin: 5px 2px 0; color: #83ad68; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
        .generation-info[hidden] { display: none; }
        .message-editor { margin-top: 8px; }
        .message-editor .chat-input { min-height: 90px; }
        .message-editor .message-action { margin-right: 14px; }
    
        .icon-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            padding: 3px;
        }

        .message-actions { gap: 3px; }

        .material-symbols-outlined {
            font-family: 'Material Symbols Outlined';
            font-weight: normal;
            font-style: normal;
            font-size: 18px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }

        .icon-action:focus-visible {
            outline: 1px solid var(--green);
            outline-offset: 2px;
        }
    
        .session-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
        .session-name { cursor: text; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .session-rename { width: 160px; min-width: 0; padding: 4px 6px; font: inherit; font-size: 11px; color: var(--green-hot); border: 1px solid var(--border-bright); background: #0b1808; }
        .session-name[hidden], .session-rename[hidden] { display: none; }
        .archive-list { max-height: 360px; overflow-y: auto; display: grid; gap: 7px; }
        .archive-entry { display: grid; gap: 5px; text-align: left; padding: 10px; border: 1px solid var(--border); background: rgba(39, 79, 25, 0.22); color: var(--text); font: inherit; }
        .archive-entry:hover { border-color: var(--border-bright); background: rgba(55, 108, 34, 0.30); }
        .archive-title { font-size: 12px; overflow-wrap: anywhere; }
        .archive-meta { font-size: 11px; color: #78a95e; }
    
.login-shell { width: min(440px, calc(100% - 32px)); margin: 12vh auto; }
.account-tools {display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:11px;}
.tester-lab {width:min(900px,calc(100% - 32px));}
.tester-lab .subject-card {margin:16px 0;}