/* static/css_app.css - THEME + LAYOUT + STATUS LIGHTS */

/* Theme variables */
:root{
  --main-blue: #0D47A1;
  --vivid-green: #00E676;
  --bright-orange: #FF6D00;
  --white: #ffffff;
  --muted: #0f1724;
  --panel: #0b1220;
  --accent-outline: rgba(255,255,255,0.08);
  --text-high: #e8eef9;
  --text-low: #cbd5e1;
  --status-yellow: #FFD600;
  --status-red: #EF4444;
  --status-green: #22C55E;
  --status-blue: var(--main-blue);
  --glass: rgba(255,255,255,0.03);

  --blink-slow: 1.6s;
  --blink-normal: 1s;
  --blink-fast: 0.45s;
  --radius-lg: 12px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,#061022 0%, #081025 100%);
  color:var(--text-high);
  -webkit-font-smoothing:antialiased;
}

/* App container */
.wrap{
  max-width:1300px;
  margin:14px auto;
  padding:14px;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.brand h1{font-size:1.15rem;margin:0;color:var(--main-blue)}
.small-muted{color:var(--text-low);font-size:0.9rem}

/* Layout */
.main-grid{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) 360px;
  gap:14px;
  align-items:start;
}
@media (max-width:980px){
  .main-grid{grid-template-columns: 1fr; padding-bottom:12px}
}

/* Video card */
.video-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius-lg);
  padding:10px;
  border: 1px solid var(--accent-outline);
  box-shadow: 0 6px 20px rgba(2,6,23,0.6);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* video container keeps aspect ratio while shrinking */
.video-frame{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  background:#000;
  border-radius:10px;
  overflow:hidden;
}
.video-frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

/* pip */
#pipVideo{
  position:absolute;
  width:220px;
  height:140px;
  right:12px;
  bottom:12px;
  border-radius:8px;
  border:2px solid rgba(255,255,255,0.06);
  object-fit:cover;
  cursor:grab;
  z-index:20;
}

/* controls row under video */
.controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  background:linear-gradient(180deg,var(--panel), rgba(255,255,255,0.02));
  color:var(--text-high);
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--accent-outline);
  font-weight:600;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}
.btn:active{ transform: translateY(2px); }
.btn.ghost{ background:transparent; border:1px dashed rgba(255,255,255,0.04);}

/* status lights row */
.status-row{ display:flex; gap:12px; align-items:center; margin-left:auto; }
.status-pill{ display:flex; gap:8px; align-items:center; background:var(--glass); padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.03); }
.status-light{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(0,0,0,0.35); box-shadow:0 4px 14px rgba(2,6,23,0.6);
  transition: transform .12s ease, box-shadow .2s ease, opacity .18s ease, background-color .18s ease;
  display:inline-block;
}
.status-light:active{ transform: translateY(1px) scale(.98) }

/* glow helper (uses currentColor) */
.status-glow{ box-shadow:0 0 12px 3px currentColor; }

/* blinking animation */
@keyframes blink {
  0%,50%,100%{opacity:1}
  25%,75%{opacity:0.28}
}
.blink-slow{ animation: blink var(--blink-slow) infinite; }
.blink-normal{ animation: blink var(--blink-normal) infinite; }
.blink-fast{ animation: blink var(--blink-fast) infinite; }

/* colors (set via classes or inline color) */
.c-green{ background:var(--status-green); color:var(--status-green); }
.c-red{ background:var(--status-red); color:var(--status-red); }
.c-yellow{ background:var(--status-yellow); color:var(--status-yellow); }
.c-orange{ background:var(--bright-orange); color:var(--bright-orange); }
.c-blue{ background:var(--status-blue); color:var(--status-blue); }

/* Chat column */
.chat-card{
  display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  padding:10px; border-radius:var(--radius-lg); border:1px solid var(--accent-outline);
  height:100%;
  min-height:320px;
}
.chat-list{
  background:transparent;
  overflow:auto;
  border-radius:8px;
  padding:8px;
  height:56vh;
  max-height:66vh;
}
@media (max-width:980px){ .chat-list{ height:34vh; } }
.chat-entry{ padding:8px; border-bottom:1px solid rgba(255,255,255,0.02); }
.chat-entry small{ color:var(--text-low); margin-left:8px; font-weight:500; }

/* chat input area */
.chat-input{ display:flex; gap:8px; align-items:center; margin-top:auto; }
.chat-text{ flex:1; min-height:56px; border-radius:10px; padding:10px; background:var(--panel); color:var(--text-high); border:1px solid var(--accent-outline); resize:vertical; }
.icon-btn{ width:44px; height:44px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--accent-outline); background:transparent; cursor:pointer; }

/* message media */
.msg-media{ max-width:100%; margin-top:8px; border-radius:8px; }

/* helper utilities */
.row{ display:flex; gap:8px; align-items:center; }
.center{ display:flex; justify-content:center; align-items:center; }

/* tiny label */
.status-label{ font-size:0.9rem; color:var(--text-low); margin-left:6px; font-weight:600; }