/* SiriusAgentsAI app shell: ChatGPT-style layout, black and gold. */
:root { --bg:#050505; --panel:#0b0a07; --panel-2:#12100a; --line:#26200f; --gold:#c9a227; --gold-2:#e6c35a; --gold-soft:rgba(201,162,39,.14); --text:#f5f1e6; --dim:#9b9384; --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg); color:var(--text); font-family:var(--font); }
.app { position:relative; z-index:1; }
.side { background:rgba(11,10,7,.92); backdrop-filter:blur(6px); }
.main { background:rgba(5,5,5,.78); }
.stage { background:radial-gradient(ellipse at 50% 60%, rgba(20,17,10,.9) 0%, rgba(5,5,5,.95) 70%); }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--gold-2); text-decoration:none; }
.app { display:grid; grid-template-columns:272px 1fr; height:100vh; }
/* sidebar */
.side { background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:12px 10px; overflow:hidden; }
.side-top { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 12px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.02em; }
.brand img { width:24px; height:24px; filter:drop-shadow(0 0 6px rgba(230,195,90,.8)); }
.brand .ai { color:var(--gold-2); }
.icon-btn { background:none; border:1px solid transparent; color:var(--dim); border-radius:8px; width:32px; height:32px; cursor:pointer; display:grid; place-items:center; }
.icon-btn:hover { border-color:var(--line); color:var(--text); }
.nav { display:grid; gap:2px; }
.nav button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; padding:9px 10px; border-radius:10px; color:var(--text); cursor:pointer; font-size:14px; }
.nav button:hover { background:var(--panel-2); } .nav button.active { background:var(--gold-soft); color:var(--gold-2); }
.nav .ico { width:18px; text-align:center; opacity:.9; }
.side h6 { font-size:11.5px; color:var(--dim); font-weight:600; text-transform:none; margin:16px 10px 6px; letter-spacing:.02em; }
.chats { flex:1; overflow:auto; display:grid; gap:2px; align-content:start; padding-right:2px; }
.chat-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer; color:var(--text); font-size:13.5px; }
.chat-row:hover { background:var(--panel-2); } .chat-row.active { background:var(--gold-soft); }
.chat-row .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-row .x { opacity:0; color:var(--dim); border:0; background:none; cursor:pointer; } .chat-row:hover .x { opacity:1; }
.side-foot { border-top:1px solid var(--line); padding-top:10px; display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff3c4, var(--gold) 60%, #6b5411); display:grid; place-items:center; font-weight:700; color:#1a1405; }
.side-foot .who { flex:1; line-height:1.2; } .side-foot .who small { color:var(--dim); display:block; }
.pill { border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:none; cursor:pointer; font-size:13px; } .pill:hover { border-color:var(--gold); color:var(--gold-2); }
/* main */
.main { display:flex; flex-direction:column; min-width:0; position:relative; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid transparent; }
.model { display:flex; align-items:center; gap:6px; background:none; border:0; color:var(--text); font-size:16px; font-weight:600; cursor:pointer; padding:6px 10px; border-radius:10px; } .model:hover { background:var(--panel-2); }
.model small { color:var(--dim); font-weight:400; font-size:12px; }
.top-right { display:flex; gap:8px; align-items:center; }
.view { flex:1; overflow:auto; display:none; } .view.active { display:block; }
.center { max-width: 820px; margin: 0 auto; padding: 24px 20px 140px; }
/* chat */
.empty { min-height:60vh; display:grid; place-items:center; text-align:center; }
.empty img { width:64px; height:64px; margin-bottom:14px; filter:drop-shadow(0 0 18px rgba(230,195,90,.7)); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { transform:scale(1) } 50% { transform:scale(1.08) } }
.empty h1 { font-size:30px; font-weight:600; letter-spacing:-.01em; }
.empty p { color:var(--dim); margin-top:8px; }
.suggest { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.suggest button { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; font-size:13px; color:var(--text); } .suggest button:hover { border-color:var(--gold); }
.msg { display:flex; gap:12px; margin:18px 0; }
.msg.you { justify-content:flex-end; } .msg.you .bubble { background:var(--panel-2); border:1px solid var(--line); border-radius:18px 18px 4px 18px; padding:12px 16px; max-width:75%; white-space:pre-wrap; }
.msg.sirius .bubble { max-width:100%; line-height:1.65; font-size:15px; }
.msg.sirius .mark { width:28px; height:28px; flex:none; margin-top:4px; filter:drop-shadow(0 0 6px rgba(230,195,90,.6)); }
.bubble p { margin:0 0 10px; } .bubble ul, .bubble ol { margin:6px 0 10px 22px; } .bubble h1,.bubble h2,.bubble h3 { margin:14px 0 6px; font-size:17px; color:var(--gold-2); }
.bubble code { background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:13.5px; } .bubble pre { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; overflow:auto; margin:8px 0 12px; } .bubble pre code { border:0; padding:0; }
.bubble table { border-collapse:collapse; margin:8px 0 12px; } .bubble td,.bubble th { border:1px solid var(--line); padding:6px 10px; font-size:14px; }
.msg-media { display:block; max-width:100%; border-radius:14px; border:1px solid var(--line); margin:10px 0; } audio.msg-media { width:100%; }
.msg-tools { display:flex; gap:6px; margin-top:6px; opacity:0; transition:.2s; } .msg:hover .msg-tools { opacity:1; }
.msg-tools button { background:none; border:0; color:var(--dim); cursor:pointer; font-size:12px; padding:3px 6px; border-radius:6px; } .msg-tools button:hover { color:var(--gold-2); background:var(--panel-2); }
.chip-note { display:inline-block; font-size:12px; color:var(--gold-2); border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin:4px 6px 0 0; }
/* composer */
.composer-wrap { position:absolute; left:0; right:0; bottom:0; padding:12px 20px 18px; background:linear-gradient(to top, var(--bg) 70%, transparent); pointer-events:none; }
.composer { pointer-events:auto; max-width:820px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:26px; padding:10px 12px 10px 14px; display:flex; align-items:flex-end; gap:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.composer:focus-within { border-color:rgba(201,162,39,.6); box-shadow:0 0 0 3px var(--gold-soft), 0 20px 60px rgba(0,0,0,.6); }
.composer textarea { flex:1; background:none; border:0; outline:none; resize:none; max-height:180px; min-height:24px; line-height:1.5; font-size:15.5px; padding:6px 4px; }
.composer .round { width:36px; height:36px; border-radius:50%; border:0; background:none; color:var(--text); cursor:pointer; display:grid; place-items:center; font-size:17px; } .composer .round:hover { background:var(--panel-2); }
.composer .send { background:var(--gold); color:#1a1405; } .composer .send:hover { background:var(--gold-2); } .composer .send:disabled { opacity:.35; cursor:default; }
.composer .round.rec { color:#ff6b6b; animation:pulse 1.2s infinite; } @keyframes pulse { 50% { opacity:.4 } }
.hint { text-align:center; color:var(--dim); font-size:12px; margin-top:8px; pointer-events:auto; }
/* generic sections */
.section h2 { font-size:28px; font-weight:600; margin: 8px 0 16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; }
.card:hover { border-color:rgba(201,162,39,.5); }
.card h4 { font-size:15px; margin-bottom:4px; } .card p { color:var(--dim); font-size:13px; line-height:1.45; }
.card .meta { font-size:11.5px; color:var(--dim); margin-top:8px; }
.tile { aspect-ratio:1; object-fit:cover; width:100%; border-radius:12px; border:1px solid var(--line); background:var(--panel); }
.search { width:100%; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 16px; font-size:15px; outline:none; margin-bottom:16px; } .search:focus { border-color:var(--gold); }
.tabs { display:flex; gap:6px; margin-bottom:14px; } .tabs button { background:none; border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer; color:var(--dim); } .tabs button.active { color:var(--gold-2); border-color:var(--gold); background:var(--gold-soft); }
.row { display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-bottom:8px; }
.row .ico { width:38px; height:38px; border-radius:10px; background:var(--gold-soft); display:grid; place-items:center; font-size:18px; flex:none; }
.row .body { flex:1; min-width:0; } .row .body b { display:block; font-size:14.5px; } .row .body span { color:var(--dim); font-size:13px; }
.badge { font-size:11px; border:1px solid var(--line); border-radius:999px; padding:2px 8px; color:var(--dim); } .badge.on { color:var(--gold-2); border-color:var(--gold); } .badge.run { color:#7ad38a; border-color:#2e5a36; }
/* companion + colony */
.stage { position:relative; height:calc(100vh - 56px); background:radial-gradient(ellipse at 50% 60%, #14110a 0%, #050505 70%); }
#compCanvas, #colonyCanvas { width:100%; height:100%; display:block; }
.stage .hud { position:absolute; left:0; right:0; bottom:0; padding:16px 20px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:linear-gradient(to top, rgba(5,5,5,.9), transparent); }
.stage .hud input { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 10px; width:220px; }
.btn { background:var(--gold); color:#1a1405; border:0; border-radius:10px; padding:9px 16px; font-weight:600; cursor:pointer; } .btn.ghost { background:none; color:var(--text); border:1px solid var(--line); } .btn:hover { filter:brightness(1.08); }
.comp-log { position:absolute; top:14px; left:16px; right:16px; max-height:34%; overflow:auto; display:grid; gap:6px; pointer-events:none; }
.comp-line { background:rgba(11,10,7,.75); border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:14px; backdrop-filter:blur(6px); } .comp-line b { color:var(--dim); font-size:11px; text-transform:uppercase; margin-right:8px; letter-spacing:.06em; }
.comp-line.you { border-color:rgba(230,195,90,.35); }
.colony-legend { position:absolute; top:14px; left:16px; display:grid; gap:6px; font-size:12.5px; color:var(--dim); } .colony-legend span { display:flex; gap:8px; align-items:center; } .dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.overlay-card { position:absolute; top:14px; right:16px; width:280px; background:rgba(11,10,7,.85); border:1px solid var(--line); border-radius:14px; padding:12px 14px; backdrop-filter:blur(8px); font-size:13px; } .overlay-card b { color:var(--gold-2); }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .side { display:none; } }