/* assets/style.css */
/* Dark/Light themes + accent colors + Tinder-like UI + micro-animations */

:root{
  --radius:22px;

  /* Accents */
  --pink:#ff4d6d;   /* Like */
  --violet:#7c7cff; /* Accent */
  --blue:#3b82f6;   /* Accent */
  --gray:#9ca3af;   /* Pass */

  /* Default theme = dark */
  --bg-main:#0b0f1a;
  --bg-top:#111738;
  --bg-card:#12182a;
  --bg-soft:#181f36;

  --text-main:#e6e9f2;
  --text-muted:#9aa3c2;

  --border:#242c4d;
  --shadow:0 20px 50px rgba(0,0,0,.60);

  /* Dynamic per-card accent (set by JS) */
  --accent: rgba(255,77,109,.75);     /* fallback */
  --accent-soft: rgba(255,77,109,.18); /* fallback */
}

/* Light theme overrides */
html[data-theme="light"]{
  --bg-main:#f6f7fb;
  --bg-top:#ffffff;
  --bg-card:#ffffff;
  --bg-soft:#f3f5ff;

  --text-main:#121826;
  --text-muted:#6b7280;

  --border:#e6e8f0;
  --shadow:0 18px 50px rgba(18,24,38,.12);

  --accent: rgba(255,77,109,.75);
  --accent-soft: rgba(255,77,109,.14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(circle at top, var(--bg-top) 0%, var(--bg-main) 60%);
  color: var(--text-main);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ===== App shell ===== */
.app{
  min-height:100%;
  display:grid;
  grid-template-rows: 56px 1fr 84px;
}

/* ===== Nav ===== */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background: color-mix(in oklab, var(--bg-main) 75%, transparent);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}

.nav-left,.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-right{
  overflow:auto;
  max-width:64%;
  -webkit-overflow-scrolling:touch;
}
.nav-right::-webkit-scrollbar{ display:none; }

.brand{
  font-weight:900;
  letter-spacing:.3px;
  color: var(--pink);
  white-space:nowrap;
}

.nav a{
  padding:8px 12px;
  border-radius:999px;
  font-weight:650;
  color: var(--text-main);
  transition: background .15s ease, transform .08s ease;
}
.nav a:hover{ background: color-mix(in oklab, var(--violet) 18%, transparent); }
.nav a:active{ transform: translateY(1px); }

/* Theme toggle button */
.theme-toggle{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg-card) 75%, transparent);
  color: var(--text-main);
  font-weight:800;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .2s ease;
}
.theme-toggle:hover{
  background: color-mix(in oklab, var(--violet) 14%, var(--bg-card));
}
.theme-toggle:active{ transform: translateY(1px); }

/* ===== Main ===== */
.container{
  padding:12px 12px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

/* ===== Tinder stack ===== */
.stack{
  width:min(420px, 100%);
  height:min(640px, calc(100vh - 56px - 84px - 18px));
  position:relative;
}

/* Card */
.tcard{
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-soft));
  box-shadow: var(--shadow);
  user-select:none;
  touch-action:none;

  /* micro-anim */
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* Subtle dynamic accent glow */
.tcard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius) + 2px);
  pointer-events:none;
  background: radial-gradient(circle at 30% 20%, var(--accent-soft) 0%, transparent 55%);
  opacity: .9;
}

/* Image area */
.tcard .img{
  height:74%;
  position:relative;
  background: color-mix(in oklab, var(--bg-soft) 80%, var(--accent-soft));
}

.tcard .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.01);
}

/* Gradient over image + dynamic accent */
.tcard .grad{
  position:absolute;
  inset:auto 0 0 0;
  height:62%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 90%),
    radial-gradient(circle at 20% 80%, var(--accent-soft) 0%, transparent 60%);
}

html[data-theme="light"] .tcard .grad{
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 88%),
    radial-gradient(circle at 20% 80%, var(--accent-soft) 0%, transparent 60%);
}

.tcard .meta{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
}

.tcard .name{
  font-size:1.4rem;
  font-weight:900;
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
}

.tcard .sub{
  margin-top:6px;
  font-size:.95rem;
  color: rgba(230,233,242,.88);
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
}

html[data-theme="light"] .tcard .sub{
  color: rgba(255,255,255,.92);
}

.tcard .bio{
  padding:14px;
  color: var(--text-main);
  font-size:.95rem;
  line-height:1.4;
}

/* Badges */
.badge{
  position:absolute;
  top:18px;
  padding:10px 14px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.18em;
  border:4px solid;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  display:none;
}

.badge.like{ left:18px; color:var(--pink); border-color:var(--pink); transform:rotate(-14deg); }
.badge.nope{ right:18px; color:var(--gray); border-color:var(--gray); transform:rotate(14deg); }

/* ===== Bottom actions ===== */
.bottom{
  border-top:1px solid var(--border);
  background: color-mix(in oklab, var(--bg-main) 80%, transparent);
  backdrop-filter: blur(12px);
  display:flex;
  justify-content:center;
  gap:16px;
  padding:10px 12px;
}

.action{
  width:60px;
  height:60px;
  border-radius:999px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-card) 95%, white 5%), var(--bg-card));
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.action:active{ transform: translateY(1px) scale(.99); }

.action.pass{ color:var(--gray); }
.action.like{ color:var(--pink); }

/* Glow animé sur Like */
@keyframes likeGlow {
  0%   { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 rgba(255,77,109,0); }
  50%  { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 28px rgba(255,77,109,.45); }
  100% { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 rgba(255,77,109,0); }
}
.action.like{
  border-color: color-mix(in oklab, var(--pink) 45%, var(--border));
  animation: likeGlow 2.2s ease-in-out infinite;
}

/* ===== Generic pages ===== */
.page{ min-height:100%; display:flex; flex-direction:column; }
.page .nav{ position:sticky; top:0; z-index:10; }
.page .container{ display:block; padding:16px; }

.card{
  width:min(980px,100%);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-soft));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  margin:12px auto;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-1px); }

.card h2{ margin:0 0 10px; font-size:1.3rem; }
.card h3{ margin:0 0 8px; font-size:1.1rem; }

.small{ color:var(--text-muted); font-size:.9rem; line-height:1.35; }

.grid{
  width:min(980px,100%);
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin:0 auto;
}

.row{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* Forms */
label{
  display:block;
  margin-bottom:6px;
  color: var(--text-muted);
  font-size:.9rem;
  font-weight:650;
}

.input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg-main) 70%, var(--bg-card));
  color: var(--text-main);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.input:focus{
  border-color: var(--violet);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet) 25%, transparent);
}
.input:active{ transform: translateY(1px); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-soft) 70%, var(--violet) 8%), var(--bg-card));
  color: var(--text-main);
  font-weight:850;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .2s ease;
}
.btn:hover{ box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.btn:active{ transform: translateY(1px); }

.btn-danger{
  border-color: color-mix(in oklab, var(--pink) 45%, var(--border));
  color: var(--pink);
}

/* Chat */
.chat-box{
  height:360px;
  overflow:auto;
  border-radius:18px;
  background: color-mix(in oklab, var(--bg-main) 65%, var(--bg-card));
  border:1px solid var(--border);
  padding:12px;
}

.msg{
  max-width:80%;
  margin:10px 0;
  padding:10px 14px;
  border-radius:16px;
  background: color-mix(in oklab, var(--bg-soft) 80%, var(--bg-card));
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  animation: popIn .12s ease;
}
@keyframes popIn{
  from { transform: translateY(2px); opacity:.6; }
  to   { transform: translateY(0);  opacity:1; }
}

.msg.me{
  margin-left:auto;
  background: linear-gradient(180deg, color-mix(in oklab, var(--pink) 92%, #fff 8%), var(--pink));
  color:white;
  border-color: rgba(255,77,109,.25);
}
.msg.them{ margin-right:auto; }

/* Responsive */
@media (min-width:720px){
  .app{ grid-template-rows:64px 1fr 92px; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .row{ grid-template-columns: 1fr 1fr; }
  .nav{ padding:0 16px; }
}

@media (min-width:1024px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width:420px){
  .btn{ width:100%; }
}