:root{--bg:#0b1020;--card:#101832;--text:#e6e8ee;--muted:#9aa3b2;--border:#26304d;--ok:#2ecc71;--bad:#e74c3c;--warn:#f1c40f} *{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)} .container{max-width:1100px;margin:0 auto;padding:20px} .header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px} h1{margin:0;font-size:24px} h2{margin:0 0 12px 0;font-size:18px} .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,0.25)} label{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)} input,textarea{width:100%;margin-top:6px;border:1px solid var(--border);background:#0c1430;color:var(--text);border-radius:10px;padding:10px;font-size:14px;outline:none} textarea{resize:vertical} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} button{border:1px solid var(--border);background:#17224a;color:var(--text);padding:10px 12px;border-radius:10px;cursor:pointer} button:hover{filter:brightness(1.08)} button.secondary{background:transparent} .pill{border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)} .pill.ok{border-color:rgba(46,204,113,0.6);color:var(--ok)} .pill.bad{border-color:rgba(231,76,60,0.6);color:var(--bad)} .output{background:#070c1a;border:1px solid var(--border);border-radius:12px;padding:12px;min-height:360px;overflow:auto} .muted{color:var(--muted)} .small{font-size:12px} .footer{margin-top:16px} @media (max-width: 900px){.grid{grid-template-columns:1fr}.output{min-height:260px}} /* --- Professional response layout --- */ .cardHeaderRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;} .responseGrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px;} @media(min-width: 980px){ .responseGrid{grid-template-columns: 1fr 1.15fr;} } .panel{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:14px;} .panelHeader{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;} .panelHeader h3{margin:0;font-size:14px;letter-spacing:0.2px;text-transform:uppercase;color:var(--muted);} .kv{display:grid;grid-template-columns: 110px 1fr;gap:8px 10px;margin-bottom:10px;} .kv .k{color:var(--muted);font-size:12px;} .kv .v{font-size:13px;word-break:break-word;} .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;} .details summary{cursor:pointer;color:var(--muted);font-size:12px;user-select:none;margin-top:8px;} .details[open] summary{margin-bottom:8px;} .answer{padding:2px 2px 4px 2px;line-height:1.45;font-size:14px;} .answer h1,.answer h2,.answer h3{margin:10px 0 6px 0;} .answer h1{font-size:20px;} .answer h2{font-size:18px;} .answer h3{font-size:16px;} .answer p{margin:8px 0;} .answer ul,.answer ol{margin:8px 0 8px 22px;} .answer code{background:rgba(255,255,255,0.07);padding:1px 5px;border-radius:8px;font-size:0.95em;} .answer pre{background:rgba(0,0,0,0.35);padding:10px;border-radius:12px;overflow:auto;} /* ========================================================= HARMONIA DEVTOOL TEMPLATE — STATE-CENTRIC LAYOUT (ADDON) Adds: - Sticky Agents bar - Prompt panel (command surface) - Current state panel as primary scroll container - Previous state panel collapsed by default Notes: - Apply by adding class="devtool" to ========================================================= */ /* Extend tokens (keeps existing palette) */ :root{ --bg-0:#070c1a; /* darker/near-black */ --bg-1:var(--bg); /* deep navy */ --bg-2:#0f1b2d; /* slightly lighter navy */ --surface-1: rgba(255,255,255,0.03); --surface-2: rgba(255,255,255,0.05); --border-1: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.10); --text-0: rgba(230,232,238,0.98); --text-1: rgba(230,232,238,0.82); --text-2: rgba(154,163,178,0.95); --text-3: rgba(154,163,178,0.70); --accent: #2dd4bf; /* teal */ --accent-2: var(--ok); /* health ok */ --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --radius: 16px; --radius-sm: 12px; --shadow: 0 10px 30px rgba(0,0,0,0.25); --gap-1: 10px; --gap-2: 14px; --gap-3: 18px; --pad-1: 10px; --pad-2: 14px; --pad-3: 18px; --agentsbar-h: 56px; --prev-collapsed-h: 52px; --prompt-min-h: 84px; --prompt-max-h: 240px; } /* IMPORTANT: use this class to switch the template into "devtool mode" */ body.devtool{ background: radial-gradient(1200px 800px at 20% 0%, rgba(45,212,191,0.10), transparent 60%), radial-gradient(900px 700px at 100% 20%, rgba(46,204,113,0.08), transparent 55%), linear-gradient(180deg, var(--bg-0), var(--bg-1)); overflow: hidden; /* prevent page scroll; panels scroll internally */ color: var(--text-0); } /* App frame */ .app{ height: 100vh; display: flex; flex-direction: column; } /* Sticky Agents bar */ .agentsbar{ height: var(--agentsbar-h); flex: 0 0 var(--agentsbar-h); display: flex; align-items: center; gap: var(--gap-2); padding: 0 var(--pad-3); border-bottom: 1px solid var(--border-1); background: linear-gradient(180deg, rgba(7,12,26,0.88), rgba(11,16,32,0.88)); backdrop-filter: blur(10px); } .agentsbar__title{ font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-2); text-transform: uppercase; } .agentsbar__chips{ display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .chip{ font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); color: var(--text-1); white-space: nowrap; } .chip--active{ border-color: rgba(45,212,191,0.35); box-shadow: 0 0 0 3px rgba(45,212,191,0.08); color: var(--text-0); } /* Health badge (top right) */ .badge{ font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: rgba(7,12,26,0.50); color: var(--text-2); } .badge--ok{ border-color: rgba(46,204,113,0.45); color: rgba(46,204,113,0.98); } /* Main vertical stack */ .main{ flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap-2); padding: var(--pad-3); min-height: 0; /* critical for internal scroll */ } /* Panels */ .panel{ border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); box-shadow: var(--shadow); overflow: hidden; } .panel__header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: var(--pad-2) var(--pad-3); border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(16,24,50,0.45); /* close to --card but translucent */ } .panel__title{ margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-2); text-transform: uppercase; } .panel__meta{ font-size: 12px; color: var(--text-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Prompt panel */ .prompt{ flex: 0 0 auto; } .prompt__body{ padding: var(--pad-3); display: grid; grid-template-columns: 1fr; gap: var(--gap-2); } .prompt__label{ font-size: 12px; color: var(--text-2); font-weight: 700; } .prompt__textarea{ width: 100%; min-height: var(--prompt-min-h); max-height: var(--prompt-max-h); resize: vertical; padding: 12px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #0c1430; color: var(--text-0); font-family: var(--font-mono); font-size: 13px; line-height: 1.4; outline: none; } .prompt__textarea:focus{ border-color: rgba(45,212,191,0.45); box-shadow: 0 0 0 3px rgba(45,212,191,0.10); } .prompt__actions{ display: flex; justify-content: flex-end; gap: 10px; } .btn{ appearance: none; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 800; color: var(--text); background: #17224a; cursor: pointer; } .btn:hover{ filter: brightness(1.08); } .btn:active{ transform: translateY(1px); } .btn--primary{ border-color: rgba(45,212,191,0.35); background: rgba(45,212,191,0.14); } .btn--ghost{ background: transparent; color: var(--muted); } /* Current state panel (PRIMARY scroll) */ .current{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .current__body{ padding: var(--pad-3); overflow: auto; /* main scroll happens here */ min-height: 0; } /* Compiled-state typography */ .state{ font-size: 14px; line-height: 1.55; color: var(--text-0); } .state .muted{ color: var(--text-2); font-size: 12.5px; } .state .small{ font-size: 12px; color: var(--text-3); } .state h1,.state h2,.state h3{ margin: 10px 0 6px 0; color: var(--text-0); } .state h1{ font-size: 20px; } .state h2{ font-size: 18px; } .state h3{ font-size: 16px; } .state p{ margin: 8px 0; color: var(--text-1); } .state ul,.state ol{ margin: 8px 0 8px 22px; color: var(--text-1); } .state code{ font-family: var(--font-mono); background: rgba(255,255,255,0.07); padding: 1px 6px; border-radius: 8px; font-size: 0.95em; } .state pre{ font-family: var(--font-mono); background: rgba(0,0,0,0.35); padding: 10px; border-radius: 12px; overflow: auto; border: 1px solid rgba(255,255,255,0.08); } /* Previous state panel (collapsed by default) */ .previous{ flex: 0 0 auto; } .previous--collapsed .previous__body{ display: none; } .previous__toggle{ display: flex; align-items: center; gap: 10px; } .previous__hint{ font-size: 12px; color: var(--text-3); } .previous__body{ max-height: 220px; overflow: auto; padding: var(--pad-3); border-top: 1px solid rgba(255,255,255,0.06); } /* Mini inline inputs (product/session in header) */ .miniInput{ width: 140px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: #0c1430; color: var(--text); font-size: 12px; outline: none; } .miniInput:focus{ border-color: rgba(45,212,191,0.45); box-shadow: 0 0 0 3px rgba(45,212,191,0.10); }