/* Blink Football AI Coach - Styles */
:root{
  --bfai-bg:#0a0f1a; --bfai-card:#111827; --bfai-accent:#22d3ee; --bfai-accent-2:#a78bfa; --bfai-text:#e5e7eb; --bfai-muted:#9ca3af; --bfai-good:#34d399; --bfai-bad:#f87171;
  --bfai-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.bfai-container{font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--bfai-text);background:linear-gradient(180deg,#030712,#0a0f1a 60%);padding:18px;border-radius:20px;box-shadow:var(--bfai-shadow);}
.bfai-hero{display:flex;align-items:center;justify-content:space-between;background:radial-gradient(800px 200px at 20% 0%,rgba(34,211,238,0.15),transparent 40%), radial-gradient(600px 200px at 80% 0%,rgba(167,139,250,0.15),transparent 40%);padding:14px 16px;border-radius:16px;margin-bottom:12px;position:relative;overflow:hidden}
.bfai-hero:before{content:"";position:absolute;inset:-100px -100px auto auto;width:220px;height:220px;background:conic-gradient(from 180deg at 50% 50%, rgba(34,211,238,0.25), rgba(167,139,250,0.25), transparent 60%);filter:blur(40px);border-radius:50%;}
.bfai-hero-text h2{margin:4px 0 2px;font-size:22px;letter-spacing:0.2px}
.bfai-hero-text p{margin:0;color:var(--bfai-muted);font-size:13px}
.bfai-badges span{display:inline-block;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);padding:4px 8px;margin:6px 6px 0 0;border-radius:999px;font-size:12px}

.bfai-tabs{display:flex;gap:8px;margin:10px 0 12px;flex-wrap:wrap}
.bfai-tab{background:rgba(255,255,255,0.06);color:var(--bfai-text);border:none;padding:8px 12px;border-radius:12px;cursor:pointer;transition:transform .2s, background .2s;backdrop-filter: blur(6px);}
.bfai-tab:hover{transform:translateY(-1px)}
.bfai-tab.active{background:linear-gradient(90deg, rgba(34,211,238,0.18), rgba(167,139,250,0.18));border:1px solid rgba(255,255,255,0.12)}

.bfai-panel{display:none;background:var(--bfai-card);border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:12px;box-shadow:var(--bfai-shadow)}
.bfai-panel.active{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}

.bfai-chat-window{height:320px;overflow:auto;background:rgba(255,255,255,0.03);border-radius:12px;padding:10px;border:1px solid rgba(255,255,255,0.06)}
.bfai-msg{margin:8px 0;display:flex;gap:8px}
.bfai-msg .bubble{max-width:85%;padding:8px 10px;border-radius:14px;box-shadow:var(--bfai-shadow)}
.bfai-msg.user .bubble{background:rgba(34,211,238,0.18);border:1px solid rgba(34,211,238,0.35)}
.bfai-msg.ai .bubble{background:rgba(167,139,250,0.18);border:1px solid rgba(167,139,250,0.35)}
.bfai-chat-controls{display:flex;gap:8px;margin-top:10px;align-items:center}
#bfai-input{flex:1;min-height:46px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:var(--bfai-text);padding:8px;resize:vertical}
.bfai-actions{display:flex;gap:8px}
.bfai-actions .primary{background:linear-gradient(90deg, #22d3ee, #a78bfa);border:none;color:#001826;padding:8px 14px;border-radius:12px;font-weight:600;cursor:pointer}
#bfai-voice-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:8px 10px;cursor:pointer}

.bfai-tactics-toolbar, .bfai-whiteboard-toolbar, .bfai-pose-toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.bfai-pitch{position:relative;background:linear-gradient(#0f172a,#0b1220), url('') ;border:1px solid rgba(255,255,255,0.08);border-radius:16px;height:460px;overflow:hidden}
.bfai-player{position:absolute;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg, #22d3ee, #06b6d4);display:flex;align-items:center;justify-content:center;font-weight:700;color:#001826;border:2px solid rgba(255,255,255,0.5);cursor:grab;user-select:none;box-shadow: var(--bfai-shadow)}
.bfai-line{position:absolute;height:2px;background:rgba(255,255,255,0.6);transform-origin:left center}

canvas#bfai-canvas{width:100%;max-width:100%;height:auto;border-radius:12px;border:1px dashed rgba(255,255,255,0.15);background:rgba(255,255,255,0.02)}

.bfai-pose-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#bfai-pose-canvas,#bfai-video{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:#000}
.bfai-pose-stats{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:10px;font-size:14px}

.bfai-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:12px;margin:8px 0}
.bfai-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.bfai-section{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:12px}
.bfai-section h2{margin:6px 0 10px}
.bfai-section label{display:block;margin-bottom:10px}
.bfai-section input,.bfai-section select,.bfai-section textarea{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:var(--bfai-text);padding:8px}
.bfai-subtitle{color:var(--bfai-muted)}
.bfai-footer, .bfai-footer-credit{margin-top:12px;text-align:center;color:var(--bfai-muted);font-size:12px}

/* Responsive */
@media (max-width: 900px){
  .bfai-grid{grid-template-columns:1fr}
  .bfai-pose-wrap{grid-template-columns:1fr}
  .bfai-hero-text h2{font-size:18px}
}