/* TalkToFriend — shared styles v2 */

/* ─── CSS Custom Properties ─── */
:root {
  --bg: #0a0a0f;
  --surf: #12121a;
  --surf2: #1a1a26;
  --surf3: #222230;
  --line: #2a2a3a;
  --ink: #f0f0f3;
  --dim: #a1a1b5;
  --mute: #6b6b80;
  --brand: #7c3aed;
  --brand-light: #a78bfa;
  --brand-glow: rgba(124, 58, 237, 0.4);
  --amber: #f59e0b;
  --ok: #10b981;
  --danger: #ef4444;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 9999px;
}

/* ─── Base ─── */
* { box-sizing: border-box; }
body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Glassmorphism (saturate boost = vibrancy, top-edge highlight = 3D depth) ─── */
.glass {
  background: rgba(18, 18, 26, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, transparent 3%);
}
.glass-strong {
  background: rgba(18, 18, 26, 0.8);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, transparent 3%);
}
.glass-light {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(18, 18, 26, 0.92); }
  .glass-strong { background: rgba(18, 18, 26, 0.95); }
}
@media (prefers-reduced-transparency) {
  .glass, .glass-strong, .glass-light {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(18, 18, 26, 0.95);
  }
}

/* ─── Animated Mesh Gradient Background ─── */
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mesh-bg::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
  animation: meshShift 12s ease-in-out infinite alternate;
}
.mesh-bg::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 70% 50% at 70% 10%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 70% at 20% 90%, rgba(16, 185, 129, 0.06) 0%, transparent 50%);
  animation: meshShift 16s ease-in-out infinite alternate-reverse;
}
@keyframes meshShift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2%, -2%) scale(1.02); }
  100% { transform: translate(-1%, 1%) scale(0.98); }
}

/* Subtle dot grid overlay */
.dot-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ─── Gradient Text ─── */
.grad {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 40%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-purple {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Layered Shadows (calibrated for dark backgrounds) ─── */
.shadow-raised {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2);
}
.shadow-float {
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.2), 0 16px 32px rgba(0,0,0,0.15);
}
.shadow-dramatic {
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.35), 0 8px 16px rgba(0,0,0,0.3), 0 16px 32px rgba(0,0,0,0.25), 0 32px 64px rgba(0,0,0,0.2);
}

/* ─── Glow Effects ─── */
.glow-brand {
  box-shadow: 0 0 60px -12px var(--brand-glow), 0 0 20px -8px rgba(124, 58, 237, 0.2);
}
.glow-brand:hover {
  box-shadow: 0 0 80px -8px var(--brand-glow), 0 0 30px -4px rgba(124, 58, 237, 0.3);
}

/* ─── Noise/Grain Texture Overlay ─── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* ─── Animations ─── */

/* Slide up entrance */
.appear { opacity: 0; transform: translateY(20px); animation: slideUp 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.appear-1 { animation-delay: 0ms; }
.appear-2 { animation-delay: 80ms; }
.appear-3 { animation-delay: 160ms; }
.appear-4 { animation-delay: 260ms; }
.appear-5 { animation-delay: 380ms; }
.appear-6 { animation-delay: 500ms; }
.appear-7 { animation-delay: 640ms; }
@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Scale pop in */
@keyframes popIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.pop-in { animation: popIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fadeIn 500ms ease both; }

/* Audio-reactive speaking ring — driven by --speak-level CSS variable (0-1) set by JS */
.speaking {
  box-shadow:
    0 0 0 calc(2px + var(--speak-level, 0.3) * 4px) rgba(124, 58, 237, calc(0.4 + var(--speak-level, 0.3) * 0.6)),
    0 0 calc(10px + var(--speak-level, 0.3) * 30px) rgba(124, 58, 237, calc(0.1 + var(--speak-level, 0.3) * 0.3));
  transition: box-shadow 100ms ease-out;
}

/* Nudge animation — shake tile when /nudge command received */
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.nudged { animation: nudge 0.4s ease-in-out; }

/* Disco mode — hue-rotate cycle + scale pulse */
@keyframes discoHue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes discoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.005); } }
#grid.disco-mode { animation: discoHue 3s linear infinite, discoPulse 0.5s ease-in-out infinite; }

/* CSS Video Filters */
.filter-vintage video { filter: sepia(0.4) contrast(1.1) brightness(0.9); }
.filter-noir video    { filter: grayscale(1) contrast(1.3) brightness(0.8); }
.filter-warm video    { filter: sepia(0.15) saturate(1.4) brightness(1.05); }
.filter-cold video    { filter: hue-rotate(180deg) saturate(0.7) brightness(1.1); }
.filter-trippy video  { filter: hue-rotate(90deg) saturate(2) contrast(1.2); }

/* Tile frames — animated gradient borders */
.frame-neon  { box-shadow: 0 0 8px rgba(124,58,237,0.6), inset 0 0 8px rgba(124,58,237,0.1); }
.frame-fire  { box-shadow: 0 0 8px rgba(239,68,68,0.5), 0 0 16px rgba(245,158,11,0.3); }
.frame-chill { box-shadow: 0 0 12px rgba(99,102,241,0.4), 0 0 24px rgba(6,182,212,0.2); }

/* Video tile transitions — cinematic enter/leave with blur */
.tile-enter { animation: tileIn 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.tile-leave { animation: tileOut 350ms ease both; pointer-events: none; }
@keyframes tileIn  {
  from { opacity: 0; transform: scale(0.85) translateY(12px); filter: blur(4px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); filter: blur(0); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes tileOut {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to   { opacity: 0; transform: scale(0.9) translateY(6px); filter: blur(4px); }
}

/* Grid layout — NO transition on grid container (animating grid-template causes reflow flicker) */
#grid .tile {
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  contain: layout style paint; /* isolate repaints without size containment (tiles sized by grid) */
}
/* Force GPU compositing on all video elements — eliminates software paint flicker */
#grid video {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #12121a; /* dark bg prevents white flash on blank frames */
  contain: layout paint; /* no size containment — video sized by parent tile */
}
/* Camera-off state: smooth fade to dark + show avatar initials */
#grid .tile.cam-off video { opacity: 0; transition: opacity 300ms ease; }
#grid .tile:not(.cam-off) video { opacity: 1; transition: opacity 300ms ease; }
#grid .tile.cam-off .cam-off-avatar { opacity: 1; }
#grid .tile:not(.cam-off) .cam-off-avatar { opacity: 0; }

/* Reaction float */
.reaction {
  position: absolute;
  font-size: 2.5rem;
  pointer-events: none;
  z-index: 50;
  animation: floatUp 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  30%  { opacity: 1; transform: translateY(-80px) scale(1.2) rotate(-5deg); }
  100% { opacity: 0; transform: translateY(-300px) scale(1.5) rotate(5deg); }
}

/* Chat bubble */
.bubble-in { animation: bubbleIn 250ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Connection dots */
.dot-pulse { animation: dotPulse 1.4s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Connecting bounce dots */
.connecting-dots span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-light);
  animation: bounceDot 1.4s ease-in-out infinite;
}
.connecting-dots span:nth-child(1) { animation-delay: 0ms; }
.connecting-dots span:nth-child(2) { animation-delay: 160ms; }
.connecting-dots span:nth-child(3) { animation-delay: 320ms; }
@keyframes bounceDot {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Toast */
.toast-in { animation: toastSlide 300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes toastSlide {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Shimmer for loading */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* Hover lift */
.hover-lift { transition: transform 200ms ease, box-shadow 200ms ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }

/* ─── Video Grid Layouts ─── */

/* All grids: tiles must shrink below content size to prevent overflow */
.tile { min-height: 0; min-width: 0; }

.grid-1  { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.grid-2  { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.grid-3  { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.grid-3 > :nth-child(3) { grid-column: span 2; justify-self: center; max-width: 60%; }
.grid-4  { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.grid-5, .grid-6   { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.grid-7, .grid-8, .grid-9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.grid-10, .grid-11, .grid-12 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.grid-13, .grid-14, .grid-15, .grid-16 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
.grid-17, .grid-18, .grid-19, .grid-20 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); }

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .grid-3 > :nth-child(3) { max-width: 100%; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
  .grid-5, .grid-6, .grid-7, .grid-8, .grid-9 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .grid-10, .grid-11, .grid-12, .grid-13, .grid-14,
  .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
}

/* ─── Speaker/Pin View (screen share or double-click) ─── */
#grid.has-pinned {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
#grid.has-pinned .tile.pinned {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 0;
}
#grid.has-pinned .tile:not(.pinned) {
  max-height: 120px;
}
/* Sidebar layout for pinned view on desktop */
@media (min-width: 768px) {
  #grid.has-pinned {
    grid-template-columns: 1fr 200px;
    grid-template-rows: 1fr;
  }
  #grid.has-pinned .tile.pinned {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  #grid.has-pinned .tile:not(.pinned) {
    grid-column: 2;
    max-height: 160px;
  }
}

/* ─── Control Buttons ─── */
.ctrl {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.ctrl:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.ctrl:active { transform: scale(0.95); }
.ctrl.off {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.ctrl.off:hover { background: rgba(239, 68, 68, 0.2); }
.ctrl.end { background: #ef4444; border-color: #ef4444; color: #fff; }
.ctrl.end:hover { background: #dc2626; transform: translateY(-1px); }

@media (max-width: 640px) {
  .ctrl { width: 44px; height: 44px; border-radius: 12px; }
}

/* ─── Mobile Bottom Sheet ─── */
.bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-height: 70vh;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 45;
}
.bottom-sheet.open { transform: translateY(0); }
.bottom-sheet-handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 8px auto;
}

/* ─── Floating Self View ─── */
.self-view {
  position: fixed;
  bottom: 100px; right: 16px;
  width: 140px; height: 105px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 40;
  transition: all 200ms ease;
  cursor: grab;
}
.self-view:hover {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(124, 58, 237, 0.15);
}
.self-view video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

@media (max-width: 640px) {
  .self-view { width: 100px; height: 75px; bottom: 90px; right: 12px; border-radius: 12px; }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* ─── Selection ─── */
::selection { background: rgba(124, 58, 237, 0.3); color: #fff; }

/* ─── Mood Lighting (time-of-day ambient tint on mesh gradient) ─── */
[data-mood="morning"] .mesh-bg::before {
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(251,191,36,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(249,115,22,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(245,158,11,0.06) 0%, transparent 60%);
}
[data-mood="evening"] .mesh-bg::before {
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(99,102,241,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(139,92,246,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(67,56,202,0.08) 0%, transparent 60%);
}
[data-mood="night"] .mesh-bg::before {
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(99,102,241,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(239,68,68,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(139,92,246,0.1) 0%, transparent 60%);
}

/* ─── Focus visible ─── */
:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 2px;
}