/*
Theme Name: Тихий час
Theme URI: https://example.com
Author: Alexey
Description: Минималистичный трекер детского сна. Считает сны по времени бодрствования, ведёт дневник и даёт рекомендации консультанта (Claude API) с учётом всей истории.
Version: 2.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: tihiy-chas
*/

/* ---------- Шрифты ---------- */
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/comfortaa-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/comfortaa-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/nunito-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/nunito-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/nunito-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/nunito-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/nunito-cyrillic-800-normal.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/nunito-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF}

/* ---------- Токены ---------- */
:root{
  --sky:#F1F1F8;        /* молочно-лавандовый фон */
  --card:#FFFFFF;
  --ink:#2C3054;        /* ночное небо — текст и кнопки */
  --sleep:#353B69;      /* заливка сна на ленте */
  --dusk:#6C71A0;       /* сумерки — второстепенный текст */
  --line:#E2E2F0;
  --plan:#AEB3DD;       /* плановые метки */
  --moon:#F0C671;       /* луна — «сейчас» и главный акцент */
  --r:18px;
  --shadow:0 6px 24px rgba(44,48,84,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);
  font:400 16px/1.55 'Nunito',system-ui,-apple-system,sans-serif;
  font-variant-numeric:tabular-nums;}
.wrap{max-width:660px;margin:0 auto;padding:20px 16px 64px}

/* ---------- Шапка ---------- */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 2px 18px}
.logo{font:700 26px/1.1 'Comfortaa',sans-serif;letter-spacing:.01em}
.logo .zz{color:var(--moon)}
.top .sub{color:var(--dusk);font-size:14px;font-weight:600;text-align:right}

/* ---------- Карточки ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 18px 16px;margin:0 0 14px;border:1px solid rgba(226,226,240,.6)}
.card h2{margin:0 0 10px;font:800 15px/1.3 'Nunito';letter-spacing:.06em;text-transform:uppercase;color:var(--dusk)}
.card h2 .num{color:var(--moon);margin-right:6px}

/* ---------- Лента дня ---------- */
.ribbon-card{padding-bottom:22px}
.ribbon{position:relative;height:46px;border-radius:12px;background:linear-gradient(180deg,#EDEDF7,#E7E7F4);overflow:hidden;border:1px solid var(--line)}
.seg{position:absolute;top:0;bottom:0}
.seg.sleep{background:radial-gradient(circle at 18% 30%, rgba(240,198,113,.55) 1px, transparent 1.6px),
            radial-gradient(circle at 62% 70%, rgba(255,255,255,.5) 1px, transparent 1.6px),
            radial-gradient(circle at 85% 25%, rgba(255,255,255,.4) 1px, transparent 1.5px),
            var(--sleep);
  background-size:34px 34px,46px 46px,58px 58px,auto;border-radius:8px}
.seg.plan{border:2px dashed var(--plan);border-radius:8px;background:rgba(174,179,221,.12)}
.seg.night{background:linear-gradient(90deg,var(--sleep),#23274A);border-radius:8px 0 0 8px}
.now{position:absolute;top:-9px;transform:translateX(-50%);font-size:15px;line-height:1;filter:drop-shadow(0 1px 2px rgba(44,48,84,.35));transition:left .6s ease}
.now::after{content:'';display:block;width:2px;height:52px;background:var(--moon);margin:1px auto 0;border-radius:2px}
.ticks{display:flex;justify-content:space-between;color:var(--dusk);font-size:11px;font-weight:600;margin-top:8px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;color:var(--dusk);font-size:12.5px;font-weight:600}
.legend i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend .l-sleep i{background:var(--sleep)}
.legend .l-plan i{border:2px dashed var(--plan);background:transparent;height:7px}

/* ---------- Строки шагов ---------- */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px dashed var(--line)}
.row:first-of-type{border-top:0}
.row label{flex:1 1 120px;font-weight:600}
.row label small{display:block;color:var(--dusk);font-weight:600;font-size:12.5px}
input[type=time]{font:600 18px/1 'Nunito';color:var(--ink);background:var(--sky);border:1px solid var(--line);border-radius:12px;padding:9px 10px;min-width:96px}
input[type=time]:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--moon);outline-offset:1px}
textarea{width:100%;font:400 15px/1.5 'Nunito';color:var(--ink);background:var(--sky);border:1px solid var(--line);border-radius:12px;padding:10px 12px;resize:vertical;min-height:56px}
select{font:600 15px/1 'Nunito';color:var(--ink);background:var(--sky);border:1px solid var(--line);border-radius:12px;padding:9px 10px}

.chip{display:inline-block;background:rgba(174,179,221,.18);border:1px dashed var(--plan);color:var(--ink);font-weight:800;font-size:14px;border-radius:999px;padding:5px 12px;white-space:nowrap}
.chip.big{font:700 17px 'Comfortaa';padding:7px 14px}
.chip .lbl{color:var(--dusk);font-weight:600;font-family:'Nunito';font-size:12.5px;margin-right:6px}
.dur{color:var(--dusk);font-weight:800;font-size:13.5px}
.hint{color:var(--dusk);font-size:13.5px;margin:8px 0 0}
.hidden{display:none !important}

/* ---------- Кнопки ---------- */
.btn{appearance:none;border:0;cursor:pointer;border-radius:14px;font:800 15px 'Nunito';padding:12px 18px;transition:transform .06s ease}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:#fff}
.btn-moon{background:var(--moon);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--dusk);border:1.5px solid var(--line)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn[disabled]{opacity:.55;cursor:wait}

/* ---------- Рекомендация ---------- */
.rec-box{white-space:pre-wrap;background:var(--sky);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px;font-size:15px}
.rec-box:empty{display:none}
.saving{font-size:12.5px;color:var(--dusk);font-weight:600;min-height:18px;margin-top:8px}

/* ---------- История ---------- */
.day{border-top:1px dashed var(--line);padding:12px 2px}
.day:first-child{border-top:0}
.day summary{cursor:pointer;font-weight:800;display:flex;justify-content:space-between;gap:8px;list-style:none}
.day summary::-webkit-details-marker{display:none}
.day summary .d-date{color:var(--ink)}
.day summary .d-sum{color:var(--dusk);font-weight:600;font-size:13.5px;text-align:right}
.day .d-body{margin-top:8px;font-size:14.5px;color:var(--ink)}
.day .d-body .rec-box{margin-top:8px;font-size:14px}

/* ---------- Вход / прочее ---------- */
.login-card{text-align:center;padding:40px 20px}
.login-card .logo{font-size:32px;margin-bottom:10px}
a{color:var(--ink)}
footer.colophon{color:var(--dusk);font-size:12.5px;text-align:center;margin-top:26px}

@media (prefers-reduced-motion:reduce){.now{transition:none}.btn{transition:none}}
@media (max-width:420px){
  .wrap{padding:14px 10px 56px}
  .card{padding:15px 14px 13px}
  input[type=time]{font-size:17px}
}

/* ---------- v1.1 ---------- */
.top>div:first-child{line-height:1.1}
.age{color:var(--dusk);font-weight:700;font-size:13.5px;margin-top:4px;letter-spacing:.02em}
.btn-now{background:rgba(174,179,221,.2);color:var(--dusk);font:700 12.5px 'Nunito';padding:8px 11px;border-radius:11px}
.btn-now:hover{background:rgba(174,179,221,.35)}
.m-sel{flex:1 1 160px}
select.m-sel{min-width:150px}
.row.atyp{gap:8px}
label.chk{display:flex;align-items:center;gap:8px;flex:1 1 auto;font-weight:600;cursor:pointer}
label.chk input{width:18px;height:18px;accent-color:var(--ink)}
label.chk small{display:block;color:var(--dusk);font-size:12.5px}

.seg-ctl{display:flex;gap:6px;background:var(--sky);border:1px solid var(--line);border-radius:14px;padding:4px;margin:0 0 14px}
.seg-btn{flex:1;appearance:none;border:0;background:transparent;cursor:pointer;border-radius:11px;padding:9px 6px;font:700 14px 'Nunito';color:var(--dusk)}
.seg-btn.is-on{background:var(--ink);color:#fff}
.seg-btn:focus-visible{outline:3px solid var(--moon);outline-offset:1px}

.chart-title{font:800 13px 'Nunito';letter-spacing:.05em;text-transform:uppercase;color:var(--dusk);margin:14px 0 6px}
.chart-title span{text-transform:none;letter-spacing:0;font-weight:600;color:var(--plan);margin-left:6px}
.chart{width:100%;margin-bottom:6px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:'Nunito',sans-serif}
.chart .ax{font-size:19px;font-weight:700;fill:var(--dusk)}
.chart .ax.dim{opacity:.4}
.chart .ax.warn{fill:var(--moon);font-weight:800}
.chart .val{font-size:19px;font-weight:800;fill:var(--ink)}
.chart .val.sm{font-size:16px;fill:var(--dusk)}

/* ---------- v1.2: плановые интервалы ---------- */
.planbox{background:var(--sky);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:0 0 12px}
.planline{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:14.5px;font-weight:600;color:var(--ink)}
.planline b{flex:0 0 46px;font:800 11.5px 'Nunito';letter-spacing:.06em;text-transform:uppercase;color:var(--dusk)}
.planline span{font-variant-numeric:tabular-nums}
.planline.is-off{opacity:.38}
.forkhint{margin-top:6px;padding-top:7px;border-top:1px dashed var(--line);color:var(--dusk);font-size:13px;font-weight:600}
.btn-fill{background:rgba(240,198,113,.28);color:var(--ink);font:800 13.5px 'Nunito';padding:10px 14px;border-radius:12px}
.btn-fill:hover{background:rgba(240,198,113,.45)}
.btn.small{font-size:13px;padding:9px 12px}
.hint.inline{margin:0;align-self:center}
.notice{margin-top:10px;background:rgba(240,198,113,.18);border-left:3px solid var(--moon);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600;color:var(--ink)}
.addback{margin:-6px 0 14px;text-align:center}
@media (max-width:420px){
  .planline{flex-wrap:wrap;gap:4px}
  .planline b{flex:0 0 100%}
  .btn-now,.btn-fill{padding:10px 12px}
}

/* ---------- v1.3: меню и настройки ---------- */
.nav{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:5px;margin:0 0 14px;box-shadow:var(--shadow)}
.nav-btn{flex:1;appearance:none;border:0;background:transparent;cursor:pointer;border-radius:12px;padding:11px 8px;font:800 14.5px 'Nunito';color:var(--dusk)}
.nav-btn.is-on{background:var(--ink);color:#fff}
.nav-btn:focus-visible{outline:3px solid var(--moon);outline-offset:1px}
input.tin{font:600 17px/1 'Nunito';color:var(--ink);background:var(--sky);border:1px solid var(--line);border-radius:12px;padding:9px 10px;width:96px;text-align:center}
input.tin.wide{width:auto;flex:1 1 150px;text-align:left}
input[type=number].tin{width:86px}
.goals{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
label.chk.goal{padding:8px 0;border-top:1px dashed var(--line)}
label.chk.goal:first-child{border-top:0}
.sticky-save{position:sticky;bottom:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);align-items:center;margin-top:4px}
.sticky-save .saving{margin:0;flex:1 1 140px}
#view-settings .card h2{margin-bottom:4px}

/* ---------- v1.4: свой режим ---------- */
.own-wrap{border:1px solid var(--line);border-radius:14px;background:var(--sky);padding:2px 12px;margin-top:10px}
.own-wrap summary{cursor:pointer;list-style:none;padding:12px 2px;font:800 15px 'Nunito';color:var(--ink);text-align:center}
.own-wrap summary::-webkit-details-marker{display:none}
.own-wrap summary::before{content:'+ ';color:var(--moon);font-weight:800}
.own-wrap[open] summary::before{content:'− '}
.own-wrap[open]{padding-bottom:12px}
.seg-ctl.tight{margin:2px 0 12px;background:var(--card)}
table.grid{width:100%;border-collapse:collapse}
table.grid th{text-align:left;font:600 14.5px 'Nunito';color:var(--ink);padding:6px 8px 6px 2px;white-space:nowrap}
table.grid th small{display:block;color:var(--dusk);font-size:12px;font-weight:600}
table.grid td{padding:5px 0 5px 6px;white-space:nowrap}
table.grid input.num{width:60px;padding:8px 6px;font-size:16px}
.cln{color:var(--dusk);font-size:12.5px;font-weight:700;margin-left:5px}
#own-preview{margin:10px 0 2px;padding-top:9px;border-top:1px dashed var(--line)}

/* ---------- v1.5: мобильная раскладка ---------- */
.chip.push{margin-left:auto}
.btn.wide{width:100%;text-align:center}

@media (max-width:560px){
  .chart{margin-bottom:10px}
  .chart-title{font-size:13.5px}
  /* кнопки-действия занимают ровно половину строки */
  .row .btn.half{flex:1 1 45%;max-width:calc(50% - 5px);padding:13px 8px;font-size:14.5px;text-align:center}
  .row .btn-now.half{font-size:14.5px}
  .btnrow .btn.half{flex:1 1 45%;max-width:calc(50% - 5px)}
  .btnrow .btn-moon,.btn.wide{width:100%;flex:1 1 100%;max-width:none}
  .btnrow .btn-ink#b-apply{flex:1 1 55%}
  .row .hint.inline{flex:1 1 100%;margin-top:2px}
  /* чипы плана прижаты к правому краю, чтобы строка была компактной */
  .row .chip.push{margin-left:auto;flex:0 0 auto}
  .row label{flex:1 1 100%}
  .row input[type=time]{flex:1 1 auto;min-width:120px}
  .row select{flex:1 1 auto}
}

/* ---------- v1.6 ---------- */
.notice .btnrow{margin-top:10px}
.notice .btn{font-size:14px}
@media (max-width:560px){
  /* чип плана первого сна — половина ширины, по центру строки */
  .row .chip.push{margin:2px auto 0;flex:0 0 50%;max-width:50%;width:50%;text-align:center;justify-content:center}
  .row .chip.big.push{padding:9px 8px}
}

/* ---------- v1.7: диалог ---------- */
.card.chat{display:flex;flex-direction:column;gap:10px}
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:52vh;min-height:150px;overflow-y:auto;padding:4px 2px;scrollbar-width:thin}
.chat-empty{margin:0;padding:14px 12px;color:var(--dusk);font-size:14px;font-weight:600;background:var(--sky);border-radius:14px;text-align:center}
.msg{display:flex}
.msg.mine{justify-content:flex-end}
.bub{position:relative;max-width:86%;padding:9px 13px 8px;border-radius:16px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg.theirs .bub{background:var(--sky);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
.msg.mine .bub{background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.bub .t{display:block;text-align:right;font-size:11px;font-weight:700;opacity:.55;margin-top:3px;letter-spacing:.02em}
.msg.mine .bub .t{color:#fff}
.msg.theirs .bub .t{color:var(--dusk)}
.bub .t:empty{display:none}
.chat-typing{display:flex;gap:5px;padding:6px 4px 0}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--plan);animation:tc-blink 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes tc-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chat-input{display:flex;gap:8px;align-items:flex-end}
.chat-input textarea{flex:1;min-height:46px;max-height:120px;border-radius:16px;padding:12px 14px;font-size:15px;resize:none;overflow-y:auto}
.btn.send{flex:0 0 46px;height:46px;border-radius:50%;background:var(--moon);color:var(--ink);font-size:20px;font-weight:800;padding:0;line-height:1}
.btn.send[disabled]{opacity:.5}
.chat-foot{display:flex;align-items:center;gap:10px}
.chat-foot .hint{margin:0;flex:1;font-size:12.5px}
.btn.tiny{font-size:12.5px;padding:7px 11px;border-radius:10px}

@media (prefers-reduced-motion:reduce){.chat-typing span{animation:none;opacity:.6}}

/* широкий экран: диалог отдельной колонкой справа */
@media (min-width:1120px){
  .wrap{max-width:1120px;display:grid;grid-template-columns:660px 1fr;column-gap:22px;align-items:start}
  .wrap > header,.wrap > nav,#view-diary,#view-settings,.colophon{grid-column:1}
  #chat-card{grid-column:2;grid-row:3 / span 2;position:sticky;top:16px;margin-bottom:0}
  #chat-card .chat-log{max-height:calc(100vh - 300px)}
}
@media (max-width:560px){
  .chat-log{max-height:60vh}
  .bub{max-width:90%;font-size:15.5px}
}

.btn.jump{width:100%;margin-top:10px;font-size:13.5px;font-weight:700;padding:11px 12px;color:var(--dusk)}
.btn.jump:hover{color:var(--ink);border-color:var(--plan)}
@media (min-width:1120px){.btn.jump{display:none}}

.btn.jump.top{margin:0 0 14px;background:var(--card);border-color:var(--line);box-shadow:var(--shadow);border-radius:16px;padding:13px 12px;font-size:14px}

/* якорь к диалогу — одна кнопка сверху, во всю ширину */
.btn.jump.top{display:block;width:100%;box-sizing:border-box}
@media (min-width:1120px){.btn.jump.top{display:none}}

#next-row{margin-top:12px}
#next-box:not(:empty){margin-top:10px}

/* ---------- v2.0: уточнение ---------- */
.qrow{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.qrow textarea{flex:1;min-height:46px;max-height:110px;border-radius:16px;padding:12px 14px;font-size:15px;resize:none;background:var(--card);border:1px solid var(--line)}
.btn-fill.wide{margin-top:2px}