/* style.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0d1117;
  --surface:    #161b22;
  --surface2:   #21262d;
  --border:     #30363d;
  --text:       #e6edf3;
  --muted:      #8b949e;
  --accent:     #58a6ff;
  --accent-dk:  #1f6feb;
  --danger:     #f85149;
  --success:    #3fb950;
  --mono:       'SF Mono','Fira Code','Consolas',monospace;
  --sans:       -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html,body { height:100%; background:var(--bg); color:var(--text); font-family:var(--sans); }

/* Login */
.login-page { display:flex; align-items:center; justify-content:center; }
.login-card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:2rem; width:min(400px,90vw); display:flex; flex-direction:column; gap:1.5rem;
}
.login-card h1 { font-size:1.5rem; font-weight:600; text-align:center; }
.login-card form { display:flex; flex-direction:column; gap:1rem; }
.login-card input {
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:1rem; padding:.75rem 1rem; width:100%;
}
.login-card input:focus { outline:none; border-color:var(--accent); }
.login-card button {
  background:var(--accent-dk); border:none; border-radius:8px;
  color:#fff; cursor:pointer; font-size:1rem; font-weight:600; padding:.75rem;
}
.login-card button:hover { background:var(--accent); }
.error { color:var(--danger); font-size:.875rem; text-align:center; }
.hidden { display:none !important; }

/* App layout */
.app {
  display:grid;
  grid-template-columns:260px 1fr;
  height:100vh;
  overflow:hidden;
}

/* Session panel */
.session-panel {
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.session-panel-header {
  align-items:center; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; padding:1rem;
}
.session-panel-header h2 { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.btn-new {
  background:var(--accent-dk); border:none; border-radius:6px;
  color:#fff; cursor:pointer; font-size:.8rem; font-weight:600; padding:.35rem .7rem;
}
.btn-new:hover { background:var(--accent); }
.session-list { flex:1; overflow-y:auto; padding:.5rem; }
.session-item {
  border-radius:8px; cursor:pointer; padding:.75rem; margin-bottom:.25rem; transition:background .1s;
}
.session-item:hover { background:var(--surface2); }
.session-item.active { background:var(--surface2); border-left:2px solid var(--accent); padding-left:calc(.75rem - 2px); }
.session-item-name { font-size:.9rem; font-weight:500; }
.session-item-meta { font-size:.75rem; color:var(--muted); margin-top:.2rem; display:flex; gap:.5rem; align-items:center; }
.badge { border-radius:4px; font-size:.7rem; font-weight:600; padding:.1rem .35rem; text-transform:uppercase; }
.badge-active   { background:rgba(63,185,80,.15); color:var(--success); }
.badge-finished { background:var(--surface); color:var(--muted); border:1px solid var(--border); }

/* Terminal pane */
.terminal-pane {
  background:#0d1117; display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.terminal-toolbar {
  align-items:center; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; gap:.5rem; padding:.5rem 1rem;
}
.terminal-toolbar .session-title { font-size:.875rem; font-weight:500; }
.btn-kill {
  background:none; border:1px solid var(--border); border-radius:6px;
  color:var(--danger); cursor:pointer; font-size:.75rem; margin-left:auto; padding:.25rem .6rem;
}
.btn-kill:hover { background:rgba(248,81,73,.1); }
#terminal-container { flex:1; overflow:hidden; padding:4px; }
.reconnect-overlay {
  align-items:center; background:rgba(13,17,23,.85); display:flex;
  inset:0; justify-content:center; position:absolute;
}
.reconnect-overlay p { color:var(--muted); font-size:.9rem; }

/* Modal */
.modal-backdrop {
  align-items:center; background:rgba(0,0,0,.7); display:flex;
  inset:0; justify-content:center; position:fixed; z-index:10;
}
.modal {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  display:flex; flex-direction:column; gap:1rem; padding:1.5rem; width:min(440px,90vw);
}
.modal h3 { font-size:1.1rem; font-weight:600; }
.modal label { display:block; font-size:.8rem; color:var(--muted); margin-bottom:.3rem; }
.modal input {
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:.9rem; padding:.6rem .875rem; width:100%;
}
.modal input:focus { outline:none; border-color:var(--accent); }
.modal-actions { display:flex; gap:.5rem; justify-content:flex-end; }
.btn-cancel { background:none; border:1px solid var(--border); border-radius:6px; color:var(--muted); cursor:pointer; padding:.5rem 1rem; }
.btn-create { background:var(--accent-dk); border:none; border-radius:6px; color:#fff; cursor:pointer; font-weight:600; padding:.5rem 1rem; }

/* Empty state */
.empty-state {
  align-items:center; display:flex; flex-direction:column; gap:.75rem;
  height:100%; justify-content:center; color:var(--muted);
}
.empty-state p { font-size:.9rem; }

/* Mobile key toolbar */
.key-toolbar {
  background:var(--surface2); border-top:1px solid var(--border);
  display:none; gap:.375rem; padding:.375rem; flex-wrap:wrap;
}
.key-btn {
  background:var(--surface); border:1px solid var(--border); border-radius:4px;
  color:var(--text); cursor:pointer; font-family:var(--mono); font-size:.8rem;
  padding:.35rem .6rem;
}
.key-btn:active { background:var(--surface2); }

/* Mobile */
@media (max-width:768px) {
  .app { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .session-panel {
    border-right:none; border-bottom:1px solid var(--border);
    position:fixed; inset:0; z-index:5; height:60vh;
    transform:translateX(-100%); transition:transform .25s;
  }
  .session-panel.open { transform:translateX(0); }
  .terminal-pane { grid-row:1/-1; }
  .mobile-header {
    align-items:center; background:var(--surface); border-bottom:1px solid var(--border);
    display:flex !important; gap:.75rem; padding:.625rem 1rem;
  }
  .btn-sessions {
    background:none; border:1px solid var(--border); border-radius:6px;
    color:var(--text); cursor:pointer; font-size:.8rem; padding:.35rem .7rem;
  }
  .key-toolbar { display:flex; }
}
@media (min-width:769px) { .mobile-header { display:none; } }