/* Музыкальный чат — общий стиль.
   Редизайн «жидкое стекло» в духе Apple (claude, 12.10.2026).
   Прежняя версия — рабочие/резерв/приложение v1 — до редизайна claude … .tgz */
@import url('/fonts/fonts.css');

:root {
  /* шрифт Apple (SF Pro) на iPhone и Mac, Manrope — на Android и Windows */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Manrope', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Manrope', system-ui, sans-serif;

  --bg: #050507;
  --panel: #15141C;
  --text: #F5F5F7;
  --soft: rgba(235, 235, 245, .82);
  --muted: rgba(235, 235, 245, .6);
  --dim: rgba(235, 235, 245, .34);
  --accent: #C8F53B;
  --accent-soft: rgba(200, 245, 59, .16);
  --pink: #FF4D8D;
  --pink-soft: #FF9DC0;
  --violet: #8B5CFF;
  --blue: #3D8BFF;

  /* материал «жидкое стекло» */
  --glass: rgba(255, 255, 255, .07);
  --glass-blur: blur(28px) saturate(185%);
  --border: rgba(255, 255, 255, .10);
  --hairline: rgba(255, 255, 255, .08);
  --rim: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .10) 26%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .06) 74%, rgba(255, 255, 255, .30));
  --shine: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 24px rgba(255, 255, 255, .03);
  --lift: 0 1px 1px rgba(0, 0, 0, .2), 0 16px 40px -14px rgba(0, 0, 0, .65);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  letter-spacing: -.01em;
  min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* подложка: мягкий цветной «меш», который преломляется в стекле */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 12% 6%, rgba(139, 92, 255, .42), transparent 70%),
    radial-gradient(55% 35% at 96% 42%, rgba(255, 77, 141, .30), transparent 70%),
    radial-gradient(70% 40% at 20% 100%, rgba(61, 139, 255, .26), transparent 70%);
}
button, input, textarea, select { font-family: inherit; letter-spacing: inherit; }
::selection { background: rgba(200, 245, 59, .35); }

.logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; }
.logo .slash { color: var(--accent); font-weight: 700; margin: 0 .04em; text-shadow: 0 0 18px rgba(200, 245, 59, .55); }

/* капсула «прямой эфир» — одинаково на всех страницах (Claude, 31.10.2026) */
.badge-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 11px; border-radius: 999px; border: 0;
  background: rgba(255, 77, 141, .14);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 170, .34), inset 0 1px 0 rgba(255, 255, 255, .22);
  font-weight: 700; letter-spacing: 0; font-size: 13px; color: #FFC2D9; text-transform: none;
}
.badge-live .dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 77, 141, .22), 0 0 12px var(--pink);
  animation: dPulse 1.6s ease-in-out infinite;
}
@keyframes dPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* стеклянная панель: размытие + насыщенность + блик по верхней кромке + светящийся ободок */
.glass {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .07) 100%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: var(--shine), var(--lift);
}
.glass::before, .mc-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* кнопки-капсулы */
.btn {
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  font-weight: 700; font-size: 16px; letter-spacing: -.015em;
  border-radius: 999px; min-height: 52px; padding: 0 20px;
  transition: transform .35s var(--spring), box-shadow .25s ease, background .25s ease, color .2s ease;
}
.btn:active { transform: scale(.96); }
.btn-accent {
  background: linear-gradient(180deg, #DBFF66 0%, #C8F53B 52%, #B4E32A 100%); color: #0B0B0F;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 6px rgba(0, 0, 0, .12), 0 10px 28px -8px rgba(200, 245, 59, .6);
}
.btn-pink {
  background: rgba(255, 77, 141, .22); color: #FFD0E1;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 170, .42), inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 28px -10px rgba(255, 77, 141, .55);
}
.btn-ghost {
  background: rgba(255, 255, 255, .10); color: var(--text);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-outline-pink {
  background: rgba(255, 77, 141, .08); color: var(--pink-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 77, 141, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn:disabled {
  background: rgba(255, 255, 255, .06); color: var(--dim); cursor: not-allowed; transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* поля ввода */
.input {
  width: 100%; height: 52px; padding: 0 18px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--text); font: 500 17px var(--font); letter-spacing: -.015em; outline: none;
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.input::placeholder { color: rgba(235, 235, 245, .32); }
.input:focus {
  border-color: rgba(200, 245, 59, .75); background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 4px rgba(200, 245, 59, .16), inset 0 1px 0 rgba(255, 255, 255, .07);
}
textarea.input { height: auto; min-height: 80px; padding: 14px 18px; resize: none; line-height: 1.35; }
label.field-label { font-weight: 600; font-size: 15px; color: var(--soft); display: block; margin: 0 0 8px 4px; }

.blob {
  position: fixed; border-radius: 50%; filter: blur(80px);
  pointer-events: none; z-index: 0;
}
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 40px); } }

@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
.pop { animation: pop .5s var(--spring); }

@keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .5s var(--ease) both; }

.heart-path { fill: currentColor; }

/* документы (согласие, политика) — стеклянный лист поверх страницы */
.doc-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: rgba(10, 10, 14, .9);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  animation: sheetIn .4s var(--ease) both;
}
@keyframes sheetIn { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: none; } }
.doc-overlay .doc-head {
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid var(--hairline);
}
.doc-overlay .doc-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.025em; }
.doc-overlay .doc-body {
  flex: 1; overflow-y: auto; padding: 18px 20px calc(40px + env(safe-area-inset-bottom));
  font-size: 15px; line-height: 1.55; color: var(--soft); white-space: pre-line;
}
.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .10); color: var(--text);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s var(--spring);
}
.icon-btn:active { transform: scale(.9); }

.photo-tile {
  border-radius: 20px; overflow: hidden; background: #1C1B24 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* Claude, 08.11.2026 (решение Никиты): полоса под часами и вырезом iPhone — прокручиваемое содержимое не просвечивает под статус-баром */
body::after {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); z-index: 40; pointer-events: none;
  background: var(--bg);
}