/* static/style.css — FINAL: FULL TAB CLICKABLE + everything else perfect */

* { margin:0; padding:0; box-sizing:border-box; }

body {
    background: radial-gradient(circle at top, #151530 0%, #050509 60%, #020206 100%);
    color: #0ff;
    font-family: "Courier New", monospace;
    height: 100vh;
    overflow: hidden;
}

/* Avatar */
#avatar-ball {
    position: fixed; top:10%; right:10%; width:60px; height:60px;
    border-radius:50%; background:radial-gradient(circle at 30% 30%,#fff,#66ffff,#007777);
    box-shadow:0 0 25px rgba(0,255,255,0.8); animation:float 4s ease-in-out infinite;
    z-index:99999;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }

/* TABS BAR — always on top */
#tabs-bar {
    position: fixed; top:0; left:0; right:0; height:56px;
    background:rgba(5,10,30,0.98); border-bottom:2px solid rgba(0,255,255,0.6);
    padding:10px 16px; display:flex; gap:12px; overflow-x:auto;
    z-index:99999 !important;
}
#tabs-bar::-webkit-scrollbar { display:none; }

/* FULL TAB IS CLICKABLE */
.topic-tab {
    min-width: 180px;
    height: 36px;
    background: rgba(0,80,130,0.9);
    border: 1px solid rgba(0,255,255,0.7);
    border-radius: 14px 14px 0 0;
    color: #ccffff;
    font-weight: bold;
    font-size: 13.5px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    user-select: none;
}

/* Invisible clickable overlay covering the entire tab */
.topic-tab::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 14px 14px 0 0;
    z-index: 1;
}

/* Label and close button stay on top and work normally */
.tab-label, .tab-close {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* Hover & active states */
.topic-tab:hover {
    background: rgba(0,110,170,0.95);
    transform: translateY(-3px);
}
.topic-tab.active {
    background: linear-gradient(to bottom, #00aaff, #0066aa);
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 -8px 25px rgba(0,255,255,0.7);
}
.tab-close {
    font-size: 19px;
    opacity: 0.7;
    margin-left: 10px;
}
.tab-close:hover { opacity: 1; color: #ff6666; }

/* THOUGHTS PANEL */
#thoughts-panel {
    position: fixed; top:56px; left:5%; right:5%; bottom:180px;
    background:rgba(3,15,35,0.98); border:1px solid rgba(0,255,255,0.5);
    border-top:none; border-radius:0 0 16px 16px; padding:20px;
    overflow-y:auto; color:#ccffff; font-size:14px; line-height:1.65;
    z-index:90000; opacity:0; visibility:hidden; transition:opacity 0.35s ease;
}
#thoughts-panel.active { opacity:1; visibility:visible; }

/* TERMINAL — below tabs */
#terminal-container {
    position: fixed; top:90px; left:8%; right:8%; bottom:80px;
    background:rgba(3,3,12,0.94); border-radius:16px;
    border:1px solid rgba(0,255,255,0.5); box-shadow:0 0 40px rgba(0,255,255,0.3);
    display:flex; flex-direction:column; z-index:10000;
}
#terminal-output { flex:1; padding:18px; overflow-y:auto; white-space:pre-wrap; font-size:14.5px; line-height:1.5; }
#terminal-input-line { display:flex; align-items:center; padding:12px 18px;
    background:rgba(10,10,40,0.95); border-top:1px solid rgba(0,255,255,0.5); }
#prompt { color:#0ff; margin-right:10px; font-weight:bold; }
#terminal-input { flex:1; background:none; border:none; color:#0ff;
    font-family:inherit; font-size:14.5px; outline:none; }
.command-text { color:#00ff88; }

/* FOOTER — always clickable */
#security-footer {
    position:fixed; bottom:0; left:0; right:0; z-index:99999 !important;
}
#security-footer-header {
    background:rgba(0,25,50,0.9); padding:12px 20px; text-align:center;
    cursor:pointer; border-top:2px solid rgba(0,255,255,0.6); font-weight:bold;
}
#security-footer-content {
    max-height:0; overflow:hidden; background:rgba(0,20,45,0.95);
    padding:0 20px; transition:all 0.4s ease;
}
#security-footer.expanded #security-footer-content { max-height:320px; padding:24px 20px; }
#security-footer-toggle { margin-left:10px; transition:transform 0.3s; }
#security-footer.expanded #security-footer-toggle { transform:rotate(180deg); }