/* ===== THEME ===== */
:root{
  --txt:#ecf4ea; --muted:#b8c7b0;
  --accent:#9be35a; --accent2:#2dd4bf;
  --glass:rgba(12,16,13,.55); --bd:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Segoe UI Emoji";
  background:#000;
}
/* Фоновая картинка + левая затемнённая панель */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(90deg, rgba(6,9,7,.88) 0%, rgba(6,9,7,.7) 36%, rgba(0,0,0,.25) 65%, rgba(0,0,0,0) 100%),
    url("/static/background.png") center/cover no-repeat;
  filter:saturate(1.05) contrast(1.03);
}
body::after{
  content:""; position:fixed; inset:-10% -10% -20% -10%; z-index:-1;
  background:radial-gradient(120% 80% at 20% 0%, rgba(0,0,0,.35), transparent 60%);
}

/* ===== LAYOUT ===== */
.container{
  max-width:980px; margin:4vh auto; padding:24px 28px;
  background:var(--glass); border:1px solid var(--bd); border-radius:20px;
  -webkit-backdrop-filter: blur(8px) saturate(120%); /* Safari */
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow:0 20px 80px rgba(0,0,0,.35);
  animation:cardIn .6s ease both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}
h1{
  margin:0 0 16px; line-height:1.1; font-weight:800;
  font-size:clamp(24px,3vw,40px); letter-spacing:.3px;
  background:linear-gradient(90deg,var(--accent),#fff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; /* Safari градиентный текст */
  text-shadow:0 0 30px rgba(155,227,90,.15);
}

.row{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:12px 0}
.row.sliders{gap:26px}
label{display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:600}

/* ===== FORM ELEMENTS ===== */
select, textarea, input[type="range"]{width:100%}
select, textarea{
  background:rgba(8,10,9,.60); border:1px solid var(--bd); color:var(--txt);
  border-radius:14px; padding:12px 14px; outline:none;
  transition:border .2s, box-shadow .2s, background .2s;
  appearance:none; -webkit-appearance:none; -moz-appearance:none; /* визуально ровнее в Safari */
}
select:focus, textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(155,227,90,.15);
  background:rgba(8,10,9,.80);
}
textarea{min-height:160px; resize:vertical}

/* Подсветка текущего предложения */
.highlight-view{
  min-height:84px; padding:12px 14px; border-radius:14px;
  border:1px dashed rgba(255,255,255,.18); background:rgba(8,10,9,.45);
}
.highlight-view .sent{padding:2px 4px; border-radius:6px}
.highlight-view .sent.active{
  background:rgba(155,227,90,.12);
  outline:1px solid rgba(155,227,90,.40);
}

/* ===== BUTTONS ===== */
.controls{gap:12px}
.controls button{
  --bg:linear-gradient(180deg, rgba(26,41,31,.95), rgba(15,24,18,.95));
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  cursor:pointer; user-select:none;
  border:1px solid var(--bd); border-radius:14px;
  padding:12px 18px; color:var(--txt); font-weight:700; letter-spacing:.4px;
  background:var(--bg);
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  position:relative; overflow:hidden;
}
.controls button#playBtn{ --bg:linear-gradient(180deg, rgba(53,86,58,.96), rgba(18,32,22,.96)) }
.controls button#stopBtn{ --bg:linear-gradient(180deg, rgba(84,37,37,.96), rgba(44,18,18,.96)) }
.controls button:hover{
  border-color:rgba(155,227,90,.6);
  box-shadow:0 10px 26px rgba(155,227,90,.15), 0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.controls button:active{transform:translateY(1px) scale(.99)}
.controls button::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 10% -20%, rgba(255,255,255,.22), transparent 40%);
  opacity:.55; pointer-events:none;
}

/* ===== SLIDERS ===== */
input[type="range"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:6px; border-radius:999px; outline:none;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.12));
}
/* WebKit track (Safari/Chrome) */
input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.12));
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #d8ffd8 60%, var(--accent));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 16px rgba(155,227,90,.35);
  cursor:pointer; transition:transform .1s ease; margin-top:-6px; /* центрируем на треке в Safari */
}
/* Firefox */
input[type="range"]::-moz-range-track{
  height:6px; background:rgba(255,255,255,.15); border-radius:999px;
}
input[type="range"]::-moz-range-thumb{
  appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #d8ffd8 60%, var(--accent));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 16px rgba(155,227,90,.35);
}

/* ===== STATUS ===== */
.status{
  margin-top:10px; display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  color:var(--muted); font-size:.9rem;
}
.status::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px rgba(155,227,90,.55);
  animation:pulse 2.2s infinite ease-in-out;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.35);opacity:.5}}

/* ===== RESPONSIVE ===== */
@media (max-width:920px){
  .container{margin:24px 12px; padding:18px 16px; border-radius:16px}
  .row{gap:12px}
  .controls button{padding:10px 14px; border-radius:12px}
}

/* ===== OPTIONAL: Safari fallback без backdrop-filter ===== */
@supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))){
  .container{ background:rgba(12,16,13,.82); }
}

.row.ambience { gap: 16px; }

/* ===== MOBILE / TABLET ADAPTATION ===== */
:root{ --dock-h: 68px; } /* высота док-панели на мобилке */

@media (max-width: 920px){
  /* чуть меньше блюра и контраста на средних экранах */
  .container{
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
  }
}

@media (max-width: 640px){
  /* фон помягче, смещение фокуса */
  body::before{
    background:
      linear-gradient(90deg, rgba(6,9,7,.92) 0%, rgba(6,9,7,.78) 40%, rgba(0,0,0,.25) 70%, rgba(0,0,0,0) 100%),
      url("/static/background.png") center top/cover no-repeat;
    filter:saturate(1.0) contrast(1.0) brightness(.98);
  }

  /* карточка во весь экран c отступом под док-панель */
  .container{
    margin:0; padding:16px 14px; border-radius:0;
    min-height:100dvh;                         /* корректный 100vh на iOS/Android */
    padding-bottom:calc(var(--dock-h) + 16px); /* чтобы контент не уехал под док */
    border-left:none; border-right:none;
  }

  h1{ font-size:clamp(20px, 6vw, 28px); margin-bottom:12px; }

  .row{ gap:12px; margin:10px 0; }
  .row.sliders{ flex-direction:column; align-items:stretch; gap:10px; }
  label{ width:100%; justify-content:space-between; }

  /* крупные ползунки под палец */
  input[type="range"]{
    height:10px;
  }
  input[type="range"]::-webkit-slider-runnable-track{ height:10px; }
  input[type="range"]::-webkit-slider-thumb{
    width:22px; height:22px; margin-top:-6px; /* центр по треку в Safari */
  }
  input[type="range"]::-moz-range-track{ height:10px; }
  input[type="range"]::-moz-range-thumb{ width:22px; height:22px; }

  textarea{ min-height:38dvh; }

  /* док-панель управления — фиксируем снизу */
  .controls{
    position:fixed; z-index:1000;
    left:12px; right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom)); /* вырезы iPhone */
    display:flex; gap:10px; padding:8px;
    background:rgba(12,16,13,.75);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow:0 14px 60px rgba(0,0,0,.35);
  }
  .controls button{
    flex:1 1 0; min-height:44px; /* минимум WCAG для пальца */
    padding:12px 0; font-size:15px; border-radius:12px;
  }

  /* статус компактнее, чтобы не конфликтовал с доком */
  .status{ position:relative; z-index:1; font-size:.85rem; }

  /* подсветка текста — чуть крупнее отступы */
  .highlight-view{ min-height:72px; padding:10px 12px; }
}

/* iPhone с вырезами — аккуратнее краевые отступы у дока */
@supports (padding: max(0px)){
  @media (max-width: 640px){
    .controls{
      left: max(12px, env(safe-area-inset-left));
      right:max(12px, env(safe-area-inset-right));
      bottom:max(10px, env(safe-area-inset-bottom));
    }
  }
}

/* Если пользователь просит уменьшить анимации — уважаем */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important }
}

/* === AI Writer drawer === */
.row.aiwriter{ align-items:stretch }
#aiToggle{
  appearance:none; -webkit-appearance:none;
  background:linear-gradient(180deg, rgba(40,52,44,.96), rgba(18,28,22,.96));
  border:1px solid var(--bd); color:var(--txt); font-weight:700;
  padding:10px 14px; border-radius:12px; cursor:pointer;
}
.drawer{
  flex:1 1 auto; margin-left:12px; padding:12px; border-radius:12px;
  border:1px solid var(--bd); background:rgba(8,10,9,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  max-height:0; overflow:hidden; transition:max-height .35s ease, padding .25s ease;
}
.drawer.open{ max-height:480px; padding:12px }
.drawer-row{ display:flex; gap:12px; align-items:center; margin:8px 0 }
.drawer-row.two{ justify-content:space-between }
#aiGenerate{
  background:linear-gradient(180deg, rgba(53,86,58,.96), rgba(18,32,22,.96));
  border:1px solid var(--bd); color:var(--txt); font-weight:800;
  padding:10px 16px; border-radius:12px; cursor:pointer;
}
@media (max-width:640px){
  .row.aiwriter{ flex-direction:column }
  .drawer{ margin-left:0 }
}
/* small loader */
.spinner{
  width:18px;height:18px; display:none; margin:0 10px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(155,227,90,.3));
}
@keyframes spin{ to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation:none } }

/* чуть выровнять ряд с кнопкой */
.drawer-row.two{ align-items:center; gap:10px }

/* --- Books search --- */
.book-search { margin-bottom: 12px; position: relative; }
.book-search input[type="search"]{
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35); color: #e8ffe0; outline: none;
}
.book-search-panel{
  position:absolute; left:0; right:0; top: 44px; max-height: 360px; overflow:auto;
  border:1px solid rgba(255,255,255,.12); background: rgba(12,16,12,.92);
  backdrop-filter: blur(6px); border-radius: 12px; padding:6px; z-index: 20;
}
.book-item{ padding:8px 10px; border-radius:10px; cursor:pointer; }
.book-item:hover{ background: rgba(255,255,255,.06); }
.book-title{ font-weight:600; }
.book-meta{ font-size:.9em; opacity:.8; }
.book-empty{ padding:10px; opacity:.8; }
.no-text{ opacity:.6; }

/* === Theme bilingual custom select === */
.theme-select { position: relative; }

.theme-button{
  width:100%; text-align:left; display:flex; flex-direction:column; gap:2px;
  padding:12px 14px; border-radius:14px; border:1px solid var(--bd);
  background:rgba(8,10,9,.60); color:var(--txt); cursor:pointer;
}
.theme-button:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(155,227,90,.15); }
.theme-button .en{ font-weight:700; line-height:1.15; }
.theme-button .ru{ font-size:.85rem; color:var(--muted); line-height:1.15; }

.theme-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  max-height:260px; overflow:auto; z-index:60; padding:6px;
  border:1px solid var(--bd); border-radius:12px;
  background:rgba(12,16,12,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow:0 14px 60px rgba(0,0,0,.35);
}
.theme-item{
  padding:8px 10px; border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; gap:2px;
}
.theme-item .en{ font-weight:600; }
.theme-item .ru{ font-size:.85rem; color:var(--muted); }
.theme-item:hover, .theme-item[aria-selected="true"]{ background: rgba(255,255,255,.06); }
/* === Book list: Open button === */
.book-item .actions{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.btn-open{
  appearance:none; cursor:pointer; user-select:none;
  padding:8px 14px; border-radius:12px; font-weight:700; letter-spacing:.2px;
  border:1px solid var(--bd); color:var(--txt);
  background:linear-gradient(180deg, rgba(53,86,58,.96), rgba(18,32,22,.96));
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn-open:hover{
  border-color:rgba(155,227,90,.6);
  box-shadow:0 10px 26px rgba(155,227,90,.15), 0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-open:active{ transform:translateY(1px) scale(.99) }
.btn-open[disabled]{ opacity:.6; cursor:not-allowed }
.book-item .actions .spinner{ width:16px; height:16px; margin:0 }

/* === Mobile polish pack === */

/* 1) Search-панель книг: нативный тач-скролл, не «пробивает» фон */
.book-search-panel{
  overscroll-behavior: contain;           /* не прокручивает body под панелью */
  -webkit-overflow-scrolling: touch;      /* инерционный скролл iOS */
}

/* 2) Меню темы (listbox): ограничить высоту на телефоне, тач-скролл */
@media (max-width: 640px){
  .theme-menu{
    max-height: 50dvh;
    -webkit-overflow-scrolling: touch;
  }
}

/* 3) Поисковая строка: удобный тап-таргет и без зума на iOS */
@media (max-width: 640px){
  .book-search input[type="search"]{
    padding: 12px 14px;
    font-size: 16px;      /* iOS не увеличивает зум при фокусе */
    line-height: 22px;
  }
}

/* 4) Кнопка Open в результатах: full-width + WCAG 44px */
@media (max-width: 640px){
  .book-item{ padding:10px 12px; }
  .book-meta{ font-size:.85rem; }
  .btn-open{
    width:100%;
    min-height:44px;
    padding:12px 14px;
  }
}

/* 5) Сама панель результатов: повыше на телефоне, внутри контейнера */
@media (max-width: 640px){
  .book-search-panel{
    top: 44px;            /* остаётся под инпутом */
    max-height: 56dvh;    /* чтобы не закрывала док-кнопки */
    left: 0; right: 0;    /* занимает ширину контейнера */
  }
}