/* Анти-вина: тёплая палитра, ничего кричащего, ноль красного укора */
:root {
    --bg: #faf7f2;
    --card: #ffffff;
    --ink: #3d3a34;
    --muted: #a09a8e;
    --accent: #e8804f;      /* тёплый — «край близко», давит мягко */
    --amber: #d8b45c;       /* середина разбега — теплеет, ещё не давит */
    --soft: #7fa88b;        /* зелёный — «хорошо бы начать» */
    --line: #eee9df;
    --shadow: 0 2px 10px rgba(80, 70, 50, .07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

#app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: env(safe-area-inset-top) 16px calc(110px + env(safe-area-inset-bottom));
}

.top { padding: 18px 0 12px; display: flex; align-items: center; justify-content: space-between; }

.brand {
    font-size: 17px;
    font-weight: 650;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    opacity: .85;
    user-select: none;
}
.brand-o { width: .66em; height: .66em; overflow: visible; margin: 0 .03em; }

.tabs { display: flex; gap: 8px; }

.tab {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
}

.tab.active { color: var(--ink); background: var(--card); box-shadow: var(--shadow); }

.screen { flex: 1; }

.cards { display: flex; flex-direction: column; gap: 12px; }

.card {
    background: var(--card);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
}

/* Material Symbols: интерфейсные иконки (эмодзи задач — от LLM, остаются) */
.ms {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

.icon-btn {
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 6px;
    cursor: pointer;
    border-radius: 10px;
}
.icon-btn:active { background: var(--line); }

.card-row { display: flex; align-items: flex-start; gap: 10px; }
.card-main { flex: 1; min-width: 0; }

/* Тихий кружок «готово» вместо кричащей кнопки: не давит, пока конь не валялся */
.check {
    border: none;
    background: transparent;
    color: var(--muted);
    opacity: .55;
    font-size: 26px;
    padding: 2px;
    margin-top: -1px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
}
.check:hover, .check:active { color: var(--soft); opacity: 1; }

.card .title { font-size: 17px; font-weight: 600; line-height: 1.35; }

.card .goal { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.card .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.chip {
    font-size: 12px;
    color: var(--muted);
    background: var(--bg);
    border-radius: 999px;
    padding: 3px 10px;
}

/* Дата-чип края эскалирует вместе с разбегом: спокойный → теплеет → давит мягко */
.chip.deadline { color: #fff; background: var(--accent); }
.chip.deadline.calm { color: var(--muted); background: var(--bg); }
.chip.deadline.mid { color: #fff; background: var(--amber); }
.chip.start { color: #fff; background: var(--soft); }
.chip.waiting { color: var(--ink); background: var(--line); }
.chip.crit-high { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }

/* Старт и край вместе — одна капсула с градиентом созревания (как у бренда и полоски) */
.chip.range {
    color: #fff;
    background: linear-gradient(90deg, var(--soft), var(--amber) 55%, var(--accent));
    white-space: nowrap;
}
.chip.range .arr { opacity: .75; margin: 0 5px; }

/* Полоска разбега (SPEC): тихо заполняется между «хорошо бы начать» и «краем».
   Цвет кодирует «мало времени», не вину — красного укора нет. */
.ripen {
    margin-top: 10px;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.ripen i {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .5s ease;
}
.ripen.calm i { background: var(--soft); }
.ripen.mid i { background: var(--amber); }
.ripen.close i, .ripen.edge i { background: var(--accent); }
/* У самого края полоска мягко дышит — эскалация заметная, но не будильник */
.ripen.edge i { animation: edgeBreath 2.6s ease-in-out infinite; }
@keyframes edgeBreath { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ripen.edge i { animation: none; } }

/* Та же стадия точкой — для компактного списка «всё» */
.ripen-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: baseline;
}
.ripen-dot.calm { background: var(--soft); }
.ripen-dot.mid { background: var(--amber); }
.ripen-dot.close, .ripen-dot.edge { background: var(--accent); }

.card .actions { display: flex; gap: 8px; margin-top: 12px; }

.btn {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 12px;
    cursor: pointer;
}

.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn.ghost { border: none; background: transparent; color: var(--muted); }

.btn.small { font-size: 18px; padding: 6px; }

.btn.done-btn {
    flex: 1;
    background: var(--soft);
    border-color: var(--soft);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.empty { text-align: center; color: var(--muted); padding: 60px 20px; font-size: 17px; }
.empty .sub { margin-top: 6px; font-size: 14px; }
.empty-fruit { width: 88px; height: 88px; overflow: visible; margin-bottom: 20px; opacity: .9; }

.done-today { margin-top: 28px; }
.done-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.done-item { color: var(--muted); font-size: 14.5px; padding: 5px 0; display: flex; align-items: center; gap: 6px; }
.done-item .ms { color: var(--soft); font-size: 18px; }

/* Чип длящихся дел — список выплывает шторкой */
.ongoing-chip {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: var(--card);
    color: var(--muted);
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    cursor: pointer;
}
.ongoing-chip .ms { font-size: 19px; }

/* «показать всё» — категории-линзы, чанкование */
.cat { margin-bottom: 22px; }
.cat-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.all-item {
    background: var(--card);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
}
.all-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.all-item .t { font-size: 15px; }
.all-item .meta { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Захват */
/* Нижний блок визуально отделён: своя плашка с границей и лёгким блюром */
.bottom {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 24px calc(16px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 88%, white);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bottom-spacer { width: 34px; }

.record {
    width: 76px; height: 76px;
    border-radius: 50%;
    border: none;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 6px 22px rgba(60, 50, 30, .25);
    cursor: pointer;
    transition: transform .15s, background .2s;
}

.record .ms { font-size: 34px; color: #fff; }

.record:active { transform: scale(.94); }

.record.recording {
    background: var(--accent);
    animation: pulse 1.4s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(232, 128, 79, .45); }
    70% { box-shadow: 0 0 0 22px rgba(232, 128, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 128, 79, 0); }
}

.text-capture {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--line);
}

.text-capture input, .sheet input {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 16px;
    background: var(--card);
    color: var(--ink);
    outline: none;
}

/* Шторка разбора */
.sheet {
    position: fixed;
    inset: 0;
    background: rgba(60, 55, 45, .35);
    display: flex;
    align-items: flex-end;
    z-index: 10;
}

.sheet-inner {
    background: var(--bg);
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sheet-status { font-size: 15px; color: var(--muted); }

.sheet-transcript { font-size: 14px; color: var(--muted); font-style: italic; }

.question { font-size: 17px; font-weight: 600; }

.row { display: flex; gap: 8px; }

.step-options { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }

.step-options .btn { text-align: left; padding: 12px 14px; font-size: 15px; }

/* Раскрытая карточка: контекст захвата */
.details { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ctx { font-size: 13.5px; color: var(--muted); font-style: italic; margin-top: 8px; white-space: pre-line; }
.ctx-goal { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.ctx-date { font-size: 11.5px; color: var(--muted); margin-top: 8px; opacity: .7; }

/* Барабаны дат: iOS-стиль на scroll-snap */
.wheels { display: flex; gap: 14px; margin: 4px 0 8px; }
.wheel-col { flex: 1; min-width: 0; }
.wheel-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
    margin-bottom: 6px;
}
.wheel {
    height: 160px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    position: relative;
    border-radius: 14px;
    box-shadow: var(--shadow);
    /* Жест строго вертикальный — барабан больше не уводит вбок; прокрутка не «протекает» на страницу */
    touch-action: pan-y;
    overscroll-behavior: contain;
    /* Фиксированная центральная полоса-подсветка (background-attachment по умолчанию не скроллится с контентом) */
    background:
        linear-gradient(to bottom,
            transparent calc(50% - 22px),
            color-mix(in srgb, var(--ink) 4%, var(--card)) calc(50% - 22px),
            color-mix(in srgb, var(--ink) 4%, var(--card)) calc(50% + 22px),
            transparent calc(50% + 22px)),
        var(--card);
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.wheel::-webkit-scrollbar { display: none; }
.wheel .pad { height: 58px; }
.wheel .opt {
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    scroll-snap-align: center;
    font-size: 14.5px;
    color: var(--muted);
    transition: color .12s, transform .12s;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 6px;
}
.wheel .opt.sel { color: var(--ink); font-weight: 650; transform: scale(1.06); }

/* Дата-подпись пункта: «пт 04.07», выходные — тёплым */
.wsub { font-size: 10.5px; font-weight: 400; color: var(--muted); opacity: .8; line-height: 1.1; }
.wheel .opt.sel .wsub { color: var(--muted); }
.wsub.weekend { color: var(--accent); opacity: 1; }

/* Нативный календарь для дат вне пресетов */
.date-input {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 9px 10px;
    font-size: 15px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
}

/* Кросс-ссылка на задачу — кликабельный чип */
.chip.link {
    border: 1px solid var(--line);
    background: var(--card);
    cursor: pointer;
    color: var(--ink);
    font-family: inherit;
}
.chip.link:active { background: var(--line); }

/* Завершённые: приглушённый архив */
.all-item.completed .t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.all-item.completed { box-shadow: none; background: transparent; border: 1px dashed var(--line); }
.all-item.completed .meta { display: inline-flex; align-items: center; gap: 4px; }

.icon-btn.danger, .btn.danger { color: var(--accent); font-size: 13px; }

/* Шторка задачи */
.ts-title { font-size: 19px; font-weight: 650; line-height: 1.3; }
#ts-body .chips { margin-top: 10px; }
#ts-body .ctx { margin-top: 12px; }
.task-actions { gap: 8px; }
.task-actions .done-btn { flex: 1.6; }
.task-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* Куда легла задача после захвата */
.dest {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 13px;
    color: var(--muted);
}
.dest .ms { font-size: 17px; }

/* Результаты разбора в шторке */
.result-item { margin-bottom: 10px; }
.result-label { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
#result-card .card { box-shadow: none; border: 1px solid var(--line); }

.hidden { display: none !important; }

.spin {
    display: inline-block;
    animation: rot 1s linear infinite;
}

/* Всё-список: material-иконки в мете */
.all-item .meta .ms { font-size: 17px; }

#ongoing-sheet .cards { max-height: 55vh; overflow-y: auto; }

@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- Шторки: грабер, свайп-вниз, плавный slide-up ---------- */
.sheet-inner { will-change: transform; transition: transform .3s cubic-bezier(.32, .72, 0, 1); }

/* Грабер: широкая невидимая зона захвата, внутри — короткая планка */
.grabber {
    position: relative;
    align-self: stretch;
    height: 22px;
    margin: -14px 0 2px;
    flex: none;
    cursor: grab;
    touch-action: none;
}
.grabber::after {
    content: '';
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 5px;
    border-radius: 3px;
    background: var(--line);
}
.grabber:active { cursor: grabbing; }

/* ---------- Микрофон: удержание + slide-to-cancel ---------- */
.record {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
/* Блокированный режим (короткий тап): пишет до второго тапа */
.record.locked { background: var(--accent); }
/* Занос влево — отмена */
.record.cancel { background: #b4564a; }

.mic-hint {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(104px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    pointer-events: none;
    z-index: 11;
}
.mic-hint.cancel { color: var(--accent); font-weight: 600; }

/* Убрать 300ms-задержку тапа на интерактивных элементах */
.tab, .btn, .icon-btn, .check, .ongoing-chip, .all-item, .card, .wheel .opt { touch-action: manipulation; }

/* ---------- Появление карточек: мягкий подъём со стаггером ---------- */
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cards .card { animation: cardIn .26s ease both; }
.cards .card:nth-child(2) { animation-delay: .04s; }
.cards .card:nth-child(3) { animation-delay: .08s; }
.cards .card:nth-child(4) { animation-delay: .12s; }
.cards .card:nth-child(n+5) { animation-delay: .16s; }
#all-list .all-item { animation: cardIn .24s ease both; }
#all-list .cat:nth-child(n+2) .all-item { animation-delay: .05s; }

/* Уважать «поменьше движения» в системе */
@media (prefers-reduced-motion: reduce) {
    .cards .card, #all-list .all-item { animation: none; }
    .sheet-inner { transition: none; }
}

/* ---------- «Готово»: галочка заполняется и щёлкает, карточка мягко уезжает ---------- */
.check.checked { color: var(--soft); opacity: 1; animation: checkPop .3s ease; }
@keyframes checkPop { 0% { transform: scale(1); } 42% { transform: scale(1.35); } 100% { transform: scale(1); } }

.card.done-cel, .all-item.done-cel {
    transition: opacity .3s ease, transform .3s cubic-bezier(.4, 0, 1, 1);
    opacity: 0;
    transform: translateY(-10px) scale(.96);
    pointer-events: none;
}

/* Подсветка задачи, к которой перепрыгнули на «всё» или подняли на «сейчас» */
@keyframes revealPulse {
    0% { box-shadow: 0 0 0 0 rgba(127, 168, 139, 0); }
    18% { box-shadow: 0 0 0 3px rgba(127, 168, 139, .55); }
    100% { box-shadow: 0 0 0 0 rgba(127, 168, 139, 0); }
}
.all-item.reveal, .card.reveal { animation: revealPulse 1.6s ease !important; }

/* ---------- Перетаскивание: порядок «сейчас», подъём из «всё» ---------- */
body.drag-active { user-select: none; -webkit-user-select: none; }

.dragging {
    z-index: 50;
    box-shadow: 0 14px 34px rgba(60, 50, 30, .25);
    opacity: .96;
    pointer-events: none;
}

/* Место, куда ляжет карточка */
.drag-ph {
    border: 1.5px dashed var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* Дроп-зона «взять на „сейчас"» — появляется сверху, пока тащишь из «всё» */
.drop-now {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 16px; right: 16px;
    max-width: 448px;
    margin: 0 auto;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px;
    border-radius: 16px;
    border: 1.5px dashed var(--soft);
    color: var(--soft);
    font-size: 14px;
    font-weight: 600;
    background: color-mix(in srgb, var(--soft) 10%, var(--bg));
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .2s, transform .2s, background .15s, color .15s;
}
.drop-now.visible { opacity: 1; transform: none; }
.drop-now.armed { background: var(--soft); color: #fff; border-style: solid; }
.drop-now .ms { font-size: 19px; }

/* Экран входа: тот же «пустой» тон, одна кнопка */
.login .empty { padding-top: 80px; }
.login-btn { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; font-size: 16px; }
.login-token { margin-top: 18px; font-size: 13px; opacity: .7; }
.logout { display: block; margin: 40px auto 0; font-size: 13px; opacity: .6; }
/* Пока не вошёл — только экран входа */
body.logged-out .top, body.logged-out .bottom, body.logged-out #screen-now, body.logged-out #screen-all { display: none; }