/* ── Reset & Vars ───────────────────────────────────────────── */
:root {
    --bg:       #080c18;
    --panel:    #0c1424;
    --border:   rgba(0, 210, 230, 0.1);
    --accent:   #00d8e8;
    --accent2:  rgba(0, 216, 232, 0.5);
    --text:     #c8d8e8;
    --dim:      #4a6070;
    --green:    #00e676;
    --warn:     #ffb300;
    --header:   #060a14;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:'Segoe UI', system-ui, sans-serif;
             background:var(--bg); color:var(--text); overflow:hidden; }

/* ── Header ─────────────────────────────────────────────────── */
header {
    display:flex; align-items:center; gap:20px;
    height:48px; padding:0 20px;
    background:var(--header);
    border-bottom:1px solid var(--border);
}
.logo { display:flex; align-items:center; gap:10px; }
.logo > span {
    font-size:1.05rem; font-weight:700; letter-spacing:.18em;
    color:var(--accent); text-shadow:0 0 12px rgba(0,216,232,.5);
}
.online-badge {
    display:flex; align-items:center; gap:5px;
    background:rgba(0,230,118,.08); border:1px solid rgba(0,230,118,.25);
    border-radius:20px; padding:2px 10px; font-size:.7rem; color:var(--green);
}
.dot-green { width:7px; height:7px; border-radius:50%; background:var(--green);
             box-shadow:0 0 6px var(--green); }
.hdr-clock {
    display:flex; align-items:center; gap:8px;
    background:rgba(0,216,232,.06); border:1px solid var(--border);
    border-radius:20px; padding:4px 16px; font-size:.85rem;
    color:var(--text); margin-left:auto;
}
.clock-icon { font-size:.8rem; }
.sep { color:var(--dim); }
.hdr-weather {
    display:flex; align-items:center; gap:8px;
    background:rgba(0,216,232,.06); border:1px solid var(--border);
    border-radius:20px; padding:4px 16px; font-size:.85rem;
}
.therm-icon { font-size:.85rem; }

/* ── Body Grid ──────────────────────────────────────────────── */
.body-grid {
    display:grid;
    grid-template-columns: 270px 1fr 300px;
    height:calc(100vh - 48px);
    overflow:hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    display:flex; flex-direction:column; gap:10px;
    padding:12px 10px; overflow-y:auto;
    border-right:1px solid var(--border);
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(0,216,232,.2); border-radius:2px; }

.panel {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:8px; padding:12px 14px;
}
.panel-hdr {
    display:flex; align-items:center; gap:7px;
    font-size:.75rem; font-weight:600; color:var(--accent);
    text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px;
}
.ph-icon { font-size:.9rem; }
.refresh {
    margin-left:auto; background:none; border:none;
    color:var(--dim); cursor:pointer; font-size:.9rem; padding:0;
    transition:color .2s;
}
.refresh:hover { color:var(--accent); }

.stat-row { display:flex; justify-content:space-between; align-items:center;
            font-size:.75rem; color:var(--dim); margin-bottom:5px; }
.stat-row span:last-child { color:var(--text); font-weight:500; }

.bar-track { height:4px; background:rgba(255,255,255,.06);
             border-radius:2px; overflow:hidden; margin-bottom:6px; }
.bar-fill { height:100%; border-radius:2px;
            background:linear-gradient(90deg, #007888, var(--accent));
            transition:width .6s ease; }
.bar-warn { background:linear-gradient(90deg, #886000, var(--warn)); }

.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
.mini-cell {
    background:rgba(0,216,232,.04); border:1px solid var(--border);
    border-radius:6px; padding:6px 8px; text-align:center;
}
.mc-label { font-size:.6rem; color:var(--dim); text-transform:uppercase;
            letter-spacing:.06em; margin-bottom:3px; }
.mc-val { font-size:.8rem; color:var(--text); font-weight:600; }

/* Weather */
.weather-top { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2px; }
.w-temp { font-size:2rem; font-weight:300; color:var(--text); }
.w-icon { font-size:1.8rem; }
.w-city { font-size:.78rem; color:var(--accent); margin-bottom:2px; }
.w-desc { font-size:.72rem; color:var(--dim); margin-bottom:4px; }

/* Uptime */
.uptime-big { font-size:1.6rem; font-weight:300; color:var(--accent);
              letter-spacing:.12em; text-align:center; margin:8px 0 4px; }
.uptime-hdr { margin-left:auto; font-size:.75rem; color:var(--text);
              font-weight:400; letter-spacing:.05em; }
.up-label { font-size:.68rem; color:var(--dim); text-align:center; }
.load-badge { font-size:.68rem; color:var(--warn);
              background:rgba(255,179,0,.08); border:1px solid rgba(255,179,0,.25);
              border-radius:10px; padding:1px 8px; }

/* ── Center Universe ─────────────────────────────────────────── */
.center {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:20px;
}

#orb-scene {
    position:relative; width:390px; height:390px;
}

#universe-canvas {
    display:block;
}

.orb-name {
    font-size:1.4rem; font-weight:700; letter-spacing:.22em;
    color:var(--text); text-shadow:0 0 18px rgba(0,216,232,.3);
}
.orb-status-row {
    display:flex; align-items:center; gap:8px;
    font-size:.78rem; color:var(--dim);
}
.dot-cyan { width:7px; height:7px; border-radius:50%;
            background:var(--accent); box-shadow:0 0 6px var(--accent);
            flex-shrink:0; }

/* ── PTT Button ─────────────────────────────────────────────── */
.ptt-btn {
    margin-top:20px;
    display:flex; align-items:center; gap:10px;
    padding:12px 30px; border-radius:50px;
    background:rgba(0,216,232,.08);
    border:1px solid rgba(0,216,232,.35);
    color:var(--accent); cursor:pointer;
    font-size:.85rem; font-weight:600; letter-spacing:.06em;
    transition:all .2s; user-select:none;
}
.ptt-btn:hover {
    background:rgba(0,216,232,.16);
    border-color:var(--accent);
    box-shadow:0 0 20px rgba(0,216,232,.2);
}
.ptt-btn.recording {
    background:rgba(0,200,80,.15);
    border-color:#00c850;
    color:#00c850;
    box-shadow:0 0 24px rgba(0,200,80,.35);
    animation:ptt-pulse 1s ease-in-out infinite;
}
.ptt-icon { font-size:1.1rem; }
@keyframes ptt-pulse {
    0%, 100% { box-shadow:0 0 24px rgba(0,200,80,.35); }
    50%       { box-shadow:0 0 40px rgba(0,200,80,.6); }
}

/* ── Mikrofon Visualizer ─────────────────────────────────────── */
.mic-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(0,255,100,.15); flex-shrink:0;
    transition:background .1s, box-shadow .1s;
}
.mic-dot.active {
    background:#00ff64;
    box-shadow:0 0 8px #00ff64, 0 0 16px rgba(0,255,100,.4);
}
.mic-label {
    font-size:.68rem; color:var(--dim); font-weight:400;
    text-transform:none; letter-spacing:0;
    transition:color .15s;
}
.mic-label.active { color:#00ff64; }
.mic-viz {
    display:flex; align-items:flex-end; gap:3px;
    height:44px; padding:2px 0 0;
}
.mic-bar {
    flex:1; border-radius:2px 2px 0 0;
    background:rgba(0,255,100,.12);
    min-height:3px; height:3px;
    transition:height .05s ease, background .1s, box-shadow .1s;
}
.mic-bar.active {
    background:rgba(0,255,100,.85);
    box-shadow:0 0 5px rgba(0,255,100,.5);
}

/* ── Drag-and-Drop Overlay ───────────────────────────────────── */
.drop-overlay {
    display:none;
    position:absolute; inset:0; z-index:100;
    background:rgba(0,10,20,.82);
    backdrop-filter:blur(4px);
    align-items:center; justify-content:center;
}
.drop-overlay.active { display:flex; }
.drop-box {
    border:2px dashed var(--accent2);
    border-radius:16px;
    padding:40px 50px;
    text-align:center;
    background:rgba(0,216,232,.05);
    box-shadow:0 0 40px rgba(0,216,232,.15);
    transition:all .15s;
}
.drop-overlay.over .drop-box {
    border-color:var(--accent);
    background:rgba(0,216,232,.12);
    box-shadow:0 0 60px rgba(0,216,232,.3);
}
.drop-icon  { font-size:2.8rem; margin-bottom:12px; }
.drop-label { font-size:.95rem; font-weight:600; color:var(--accent); margin-bottom:4px; }
.drop-sub   { font-size:.72rem; color:var(--dim); }

/* ── Conversation Panel ─────────────────────────────────────── */
.conv-panel {
    display:flex; flex-direction:column;
    border-left:1px solid var(--border);
    min-height:0; overflow:hidden;
    position:relative;
}
.conv-hdr {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid var(--border);
    font-size:.82rem; font-weight:600; color:var(--text);
    background:rgba(0,216,232,.03);
}
.conv-btn {
    background:rgba(0,216,232,.08); border:1px solid var(--border);
    color:var(--dim); border-radius:6px; padding:4px 12px;
    font-size:.72rem; cursor:pointer; transition:all .2s;
}
.conv-btn:hover { color:var(--accent); border-color:var(--accent2); }

.chat-area {
    flex:1; overflow-y:auto; padding:14px 14px 8px;
    display:flex; flex-direction:column; gap:10px;
}
.chat-area::-webkit-scrollbar { width:4px; }
.chat-area::-webkit-scrollbar-thumb { background:rgba(0,216,232,.2); border-radius:2px; }

.msg {
    padding:10px 13px; border-radius:8px; font-size:.78rem;
    line-height:1.5; max-width:90%;
}
.msg.jarvis {
    background:rgba(0,216,232,.06); border:1px solid rgba(0,216,232,.15);
    color:var(--text); align-self:flex-start;
}
.msg.user {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    color:var(--dim); align-self:flex-end;
}
.msg.email {
    background:rgba(0,216,232,.03); border:1px solid rgba(0,216,232,.2);
    color:var(--text); align-self:flex-start; max-width:100%; width:100%;
}
.email-label {
    font-size:.65rem; color:var(--accent); text-transform:uppercase;
    letter-spacing:.08em; margin-bottom:6px;
}
.email-body {
    font-family:'Segoe UI', system-ui, sans-serif; font-size:.75rem;
    line-height:1.65; white-space:pre-wrap; color:var(--text);
    border-top:1px solid var(--border); padding-top:8px; margin:0;
}
.msg-time { font-size:.62rem; color:var(--dim); margin-top:4px; }

.chat-input {
    display:flex; gap:8px; padding:10px 12px;
    border-top:1px solid var(--border);
    background:rgba(0,216,232,.02);
}
.chat-input input {
    flex:1; background:rgba(0,216,232,.05); border:1px solid var(--border);
    border-radius:6px; padding:8px 12px; color:var(--text);
    font-size:.78rem; outline:none; transition:border-color .2s;
}
.chat-input input:focus { border-color:var(--accent2); }
.chat-input input::placeholder { color:var(--dim); }
.chat-input button {
    background:rgba(0,216,232,.1); border:1px solid var(--accent2);
    color:var(--accent); border-radius:6px; padding:8px 14px;
    cursor:pointer; font-size:.85rem; transition:all .2s;
}
.chat-input button:hover { background:rgba(0,216,232,.2); }
.chat-input button { flex-shrink:0; }
.attach-btn {
    background:rgba(0,216,232,.06); border:1px solid var(--border);
    color:var(--dim); border-radius:6px; padding:8px 10px;
    cursor:pointer; font-size:.85rem; transition:all .2s; flex-shrink:0;
}
.attach-btn:hover { color:var(--accent); border-color:var(--accent2); background:rgba(0,216,232,.15); }
.file-preview {
    background:rgba(0,216,232,.12); border:1px solid var(--accent2);
    color:var(--accent); border-radius:4px; padding:3px 8px;
    font-size:.68rem; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; max-width:110px; flex-shrink:0;
}
.msg-img { max-width:200px; max-height:150px; border-radius:6px; margin-bottom:5px; display:block; }