/* ---------- Палитра: эспрессо · золото · сливочный · оливковый · терракот ---------- */
    :root {
      color-scheme: light dark;
      --bg: #f6f0e4;
      --card: #fffdf8;
      --ink: #2a1c12;
      --muted: #6f6456;
      --accent: #8a6a2b;
      --gold: #c9a45c;
      --line: #e6dcc7;
      --tint: #f1e8d6;
      --ok: #55663a;
      --ok-bg: rgba(85, 102, 58, .13);
      --bad: #a8402f;
      --bad-bg: rgba(168, 64, 47, .12);
      --on: #fffaf0;
      --grad: linear-gradient(160deg, #3a2616, #1c120b);
      --ring: rgba(138, 106, 43, .45);
      --sh: 0 10px 30px rgba(60, 45, 15, .10);
      --glow: 0 8px 22px rgba(43, 27, 16, .32);
      --r-sm: 12px;
      --r: 18px;
      --r-lg: 26px;
      --w: 1040px;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #1a130d;
        --card: #251b13;
        --ink: #f3ecdd;
        --muted: #bfb39b;
        --accent: #d4ad66;
        --gold: #d4ad66;
        --line: #43342a;
        --tint: #31251b;
        --ok: #b7c98a;
        --ok-bg: rgba(183, 201, 138, .14);
        --bad: #f0877d;
        --bad-bg: rgba(240, 135, 125, .13);
        --on: #1a1608;
        --grad: linear-gradient(135deg, #c9a45c, #e3c283);
        --ring: rgba(212, 173, 102, .5);
        --sh: 0 12px 34px rgba(0, 0, 0, .45);
        --glow: 0 8px 24px rgba(201, 164, 92, .3);
      }
    }

    /* ---------- Основа ---------- */
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 16px; font-size: clamp(16px, .35vw + 14.6px, 19px); -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font: 1rem/1.6 "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
    }
    h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; }
    h2 { position: relative; font-size: 1.6rem; padding-bottom: .45em; border-bottom: 1px solid var(--line); }
    h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; border-radius: 3px; background: var(--gold); }
    h3 { font-size: 1.15rem; }
    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; color: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

    /* ---------- Иконка человека и «5х» ---------- */
    .ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
    .guests { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
    .guests .ic { color: var(--accent); }

    /* ---------- Баннер с фото ресторана и меню ----------
       Верхняя часть баннера прокручивается, нижняя полоса с меню остаётся на экране. */
    .banner {
      --bh: 250px; --strip: 92px;
      position: relative; z-index: 10;
      width: min(calc(var(--w) - 32px), calc(100% - 32px)); height: var(--bh); margin: 14px auto 0;
      overflow: hidden; border-radius: var(--r-lg);
      background: #1c120b; box-shadow: var(--sh);
    }
    .banner .scene, .banner .photo, .banner .shade { position: absolute; inset: 0; width: 100%; height: 100%; }
    .banner .photo { background: var(--photo, none) center / cover no-repeat; }
    .banner .shade {
      background:
        linear-gradient(90deg, rgba(20,13,8,.72) 0%, rgba(20,13,8,.35) 38%, rgba(20,13,8,0) 62%),
        linear-gradient(180deg, rgba(20,13,8,.30) 0%, rgba(20,13,8,0) 38%, rgba(20,13,8,.78) 100%);
    }
    .banner .brand { position: absolute; left: 26px; top: 22px; right: 26px; color: #fbf5e8; }
    .banner .brand small {
      display: block; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #e3c283;
    }
    .banner .brand b { display: block; margin-top: 4px; font: 700 2.5rem/1.1 "Playfair Display", Georgia, serif; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
    .banner nav {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px;
    }
    .banner nav a {
      display: flex; align-items: center; justify-content: center;
      flex: 1 1 0; max-width: 270px; min-height: 56px; padding: 0 18px; text-align: center; border-radius: 999px;
      font-size: .95rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #f6eedb;
      background: rgba(20,13,8,.38); border: 1px solid rgba(255,255,255,.3);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    }
    .banner nav a:hover, .banner nav a[aria-current="true"] { background: var(--gold); border-color: transparent; color: #1a1608; }

    main { max-width: var(--w); margin: 0 auto; padding: 22px 16px 90px; }
    section { margin-bottom: 44px; }

    /* ---------- Главная ---------- */
    .hero {
      padding: 52px 30px; border-radius: var(--r-lg); color: #f3ead7;
      background:
        radial-gradient(150px 150px at 14% 28%, rgba(255,190,100,.5), transparent 70%),
        radial-gradient(190px 190px at 90% 72%, rgba(255,215,150,.34), transparent 70%),
        linear-gradient(160deg, #2b1b10, #18110b 55%, #0c0906);
      box-shadow: var(--sh);
    }
    .hero h1 { font-size: 3rem; color: #fbf5e8; }
    .hero p { max-width: 40em; margin: 0 0 22px; color: #d9ccb2; }
    .hero dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; }
    .hero dt { color: #b9a982; }
    .hero dd { margin: 0 0 8px; color: #fbf5e8; }

    .hero .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 26px; }
    .hero .fact { padding: 16px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); background: rgba(255,255,255,.07); }
    .hero .fact small { display: block; color: #b9a982; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
    .hero .fact b { display: block; margin-top: 4px; color: #fbf5e8; font-weight: 600; }
    .hero .fact-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: #d9ccb2; font-size: .9rem; }
    .hero .guests .ic { color: #e3c283; }
    .hero .how { margin: 0 0 12px; color: #fbf5e8; }
    .hero .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
    .hero .steps li { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px 14px 58px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); background: rgba(255,255,255,.05); counter-increment: st; }
    .hero .steps li::before {
      content: counter(st); position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
      background: linear-gradient(135deg, #c9a45c, #e3c283); color: #1a1608; font-weight: 700;
    }
    .hero .steps b { display: block; color: #fbf5e8; font-weight: 600; line-height: 1.3; }
    .hero .steps span { display: block; margin-top: 2px; color: #d9ccb2; font-size: .85rem; line-height: 1.35; }
    .pill {
      display: inline-block; margin-bottom: 18px; padding: 6px 16px;
      border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.08);
      font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #e3c283;
    }
    .mic {
      display: block; margin-top: 24px; padding: 20px; border-radius: var(--r);
      background: linear-gradient(135deg, #c9a45c, #e3c283); color: #1a1608; text-align: center;
      font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    }

    /* ---------- Карточки и кнопки ---------- */
    .card { margin-bottom: 18px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }
    .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .btn {
      min-height: 52px; padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--r-sm);
      background: var(--card); font-weight: 600;
    }
    .btn.pri, .btn[aria-pressed="true"] { background: var(--grad); color: var(--on); border-color: transparent; }
    .btn.danger { border-color: var(--bad); color: var(--bad); background: transparent; }
    .chip {
      padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
      background: var(--tint); font-size: .85rem;
    }
    .chip.sel { background: var(--grad); color: var(--on); border-color: transparent; }
    input, select { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
    select option { background-color: var(--card); color: var(--ink); }
    .old { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }

    /* ---------- Запись голоса ---------- */
    .stage { text-align: center; }
    .orb {
      display: grid; place-items: center; width: 160px; height: 160px; margin: 6px auto 18px;
      border: 0; border-radius: 50%; font-size: 3.2rem; color: var(--on); background: var(--grad);
      box-shadow: 0 0 0 8px var(--tint), 0 0 0 9px var(--line);
    }
    .orb.listen { animation: ring 1.5s infinite; }
    .orb.speak  { animation: breathe 1.2s ease-in-out infinite; }
    .orb.think  { animation: think 1.2s ease-in-out infinite; }
    @keyframes ring { from { box-shadow: 0 0 0 0 var(--ring), 0 0 0 8px var(--tint); } to { box-shadow: 0 0 0 38px transparent, 0 0 0 8px var(--tint); } }
    @keyframes breathe { 50% { transform: scale(1.05); } }
    @keyframes think { 50% { filter: brightness(1.18); } }
    @media (prefers-reduced-motion: reduce) { .orb { animation: none !important; } }
    .status {
      display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--tint);
      font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
    }
    .timer { margin: 12px 0 0; font: 700 2.2rem/1.2 "Playfair Display", Georgia, serif; }
    .q { margin: 8px 0 6px; font: 700 1.3rem/1.3 "Playfair Display", Georgia, serif; }
    .heard { min-height: 1.5em; margin-bottom: 6px; color: var(--muted); font-size: .9rem; }
    .stage .row { justify-content: center; }
    .txt { display: flex; gap: 8px; margin-top: 16px; text-align: left; }
    .txt input { flex: 1; min-width: 0; }
    .seg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

    /* ---------- Списки параметров ---------- */
    dl.params { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
    dl.params dt { color: var(--muted); }
    dl.params dd { margin: 0; font-weight: 600; }
    .big { margin-bottom: 8px; font: 700 1.6rem "Playfair Display", Georgia, serif; color: var(--accent); }

    /* ---------- Расписание ---------- */
    .scroll { overflow-x: auto; border-radius: var(--r-sm); -webkit-overflow-scrolling: touch; }
    .hint { display: none; margin: 0 0 8px; color: var(--muted); font-size: .8rem; }
    table { width: 100%; border-collapse: separate; border-spacing: 5px; font-size: .8rem; table-layout: auto; }
    th, td { padding: 10px 6px; border: 0; border-radius: var(--r-sm); text-align: center; white-space: nowrap; background: var(--tint); }
    th { font-weight: 600; }
    th .guests { justify-content: center; margin-left: 6px; font-weight: 500; color: var(--muted); }
    td.free { color: var(--ok); background: var(--ok-bg); font-weight: 600; }
    td.busy { color: var(--bad); background: var(--bad-bg); font-weight: 600; }
    .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .kpi { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--tint); text-align: center; }
    .kpi b, .kpi .kv { display: block; font: 700 1.5rem "Playfair Display", Georgia, serif; color: var(--accent); }
    .kpi span, .kpi .kl { display: inline-flex; align-items: center; gap: .35em; color: var(--muted); font-size: .8rem; }
    .bk { margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--tint); }
    .bk-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
    .bk-info { font-weight: 600; }
    .bk-sub { color: var(--muted); font-size: .85rem; font-weight: 400; }
    .bye { margin-top: 14px; padding: 14px 18px; border: 1px solid var(--ok); border-radius: var(--r); background: var(--ok-bg); font-weight: 600; }

    /* ---------- Фон на всю страницу (прозрачность 16%) ---------- */
    body::before {
      content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .16;
      background:
        radial-gradient(circle at 14% 28%, rgba(255,190,100,.9), transparent 22%),
        radial-gradient(circle at 70% 18%, rgba(255,165,75,.8), transparent 18%),
        radial-gradient(circle at 90% 72%, rgba(255,215,150,.7), transparent 26%),
        radial-gradient(circle at 38% 82%, rgba(255,150,70,.8), transparent 16%),
        linear-gradient(160deg, #2b1b10, #18110b 55%, #0c0906);
    }

    /* ---------- Мелкое свечение при наведении ---------- */
    button, .card, .hero, .kpi, .chip, td, .pill, select, input, .mic, .banner nav a {
      transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .25s, border-color .25s, filter .25s, color .25s;
    }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      .btn:hover, .chip:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--sh); }
      .btn.pri:hover, .btn[aria-pressed="true"]:hover { box-shadow: var(--glow); filter: brightness(1.08); }
      .btn.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
      .mic:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 30px rgba(201,164,92,.45); }
      .orb:not(.listen):not(.speak):not(.think):hover { transform: scale(1.06); filter: brightness(1.1); }
      .card:hover { transform: translateY(-3px); border-color: var(--accent); }
      .kpi:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--ring); }
      td.free:hover { transform: scale(1.05); box-shadow: 0 0 14px var(--ok-bg); }
      td.busy:hover { transform: scale(1.05); box-shadow: 0 0 14px var(--bad-bg); }
      input:hover, select:hover { border-color: var(--accent); }
      .btn:active, .chip:active, .mic:active { transform: scale(.97); }
    }
    @media (prefers-reduced-motion: no-preference) {
      .mic { position: relative; overflow: hidden; }
      .mic::after {
        content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
        transform: skewX(-20deg); animation: shine 5s ease-in-out infinite;
      }
      @keyframes shine { 0%, 55% { left: -60%; } 100% { left: 140%; } }
      .orb:not(.listen):not(.speak):not(.think) { animation: halo 4s ease-in-out infinite; }
      @keyframes halo { 50% { box-shadow: var(--glow), 0 0 0 14px var(--tint), 0 0 0 15px var(--line); } }
      .lamp-glow { animation: flicker 6s ease-in-out infinite alternate; }
      .lamp-glow:nth-of-type(2n) { animation-duration: 8s; }
      @keyframes flicker { from { opacity: .85; } to { opacity: 1; } }
    }

    /* ---------- Светящийся курсор-стрелка ---------- */
    .cur-arrow {
      position: fixed; left: 0; top: 0; z-index: 9999; width: 26px; height: 26px; margin: -2px 0 0 -3px;
      opacity: 0; pointer-events: none; transition: opacity .35s;
      filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 14px var(--ring)) drop-shadow(0 1px 1px rgba(0,0,0,.25));
    }
    .cur-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 3px 2px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
    .cur-arrow.hov svg { transform: scale(1.22) rotate(-8deg); }
    .cur-arrow.dn svg { transform: scale(.88); }
    .cur-arrow .s1 { stop-color: #b8924a; } .cur-arrow .s2 { stop-color: #d4ad66; } .cur-arrow .s3 { stop-color: #ecd49a; }
    @media (prefers-color-scheme: light) { .cur-arrow .s1 { stop-color: #2b1b10; } .cur-arrow .s2, .cur-arrow .s3 { stop-color: #18110b; } }
    html.cur-on:not(.cur-off) .cur-arrow { opacity: 1; }
    html.cc, html.cc * { cursor: none !important; }
    html.cc input { cursor: text !important; }
    html.cc select { cursor: pointer !important; }
    [hidden] { display: none !important; }

    /* ---------- Выпадающий список: скруглённый, со свечением ----------
       Работает в браузерах с поддержкой appearance: base-select (Chrome / Edge 135+).
       В остальных остаётся обычный список браузера. */
    @supports (appearance: base-select) {
      select, ::picker(select) { appearance: base-select; }
      select:focus-visible, select:open { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--ring); }
      select::picker-icon { color: var(--accent); transition: rotate .2s ease; }
      select:open::picker-icon { rotate: 180deg; }
      ::picker(select) {
        margin-top: 8px; padding: 6px; border: 1px solid var(--accent); border-radius: var(--r);
        background: var(--card); box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--ring), var(--sh);
      }
      select option { padding: 10px 14px; border-radius: var(--r-sm); }
      select option:hover, select option:focus-visible { background: var(--tint); outline: none; }
      select option:checked { background: var(--grad); color: var(--on); }
      select option::checkmark { display: none; }
      html.cc select option { cursor: pointer !important; }
      html:has(select:open) .cur-arrow { opacity: 0 !important; }
    }

    /* ---------- Выбор роли: Гость / Админ ----------
       Какой экран показан, решает атрибут data-view у тега body: gate (выбор), guest, admin. */
    body[data-view="gate"] .v-guest, body[data-view="gate"] .v-admin,
    body[data-view="guest"] .v-gate, body[data-view="guest"] .v-admin,
    body[data-view="admin"] .v-gate, body[data-view="admin"] .v-guest { display: none !important; }
    .roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
    .role {
      display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 40px 20px;
      text-align: center; color: var(--ink); font: inherit; cursor: pointer;
      transition: transform .15s ease, border-color .15s ease;
    }
    .role:hover { transform: translateY(-3px); border-color: var(--gold); }
    .role .role-ic { font-size: 2.8rem; line-height: 1; }
    .role b { font: 700 1.6rem/1.2 "Playfair Display", Georgia, serif; }
    .role .sub { color: var(--muted); font-size: .9rem; }
    @media (max-width: 560px) { .roles { grid-template-columns: 1fr; } }

    @media (min-width: 1400px) { :root { --w: 1240px; } }
    @media (min-width: 1800px) { :root { --w: 1440px; } }
    @media (max-width: 900px) {
      .hero { padding: 44px 26px; }
      table { font-size: .8rem; }
      th, td { padding: 9px 5px; }
    }
    @media (max-width: 1000px) {
      .hint { display: block; }
      /* на планшете и телефоне таблица листается вбок, первый столбец (номер столика) закреплён */
      .scroll { margin: 0 -8px; padding: 0 8px; }
      table { width: max-content; min-width: 100%; font-size: .78rem; }
      th, td { padding: 9px 9px; }
      tr > th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 6px 0 0 var(--card); }
    }
    @media (max-width: 560px) {
      main { padding: 16px 12px 70px; }
      .banner { width: calc(100% - 24px); margin-top: 12px; }
      .card { padding: 18px 16px; }
      .orb { width: 136px; height: 136px; font-size: 2.8rem; }
      .timer { font-size: 1.9rem; }
      .q { font-size: 1.15rem; }
      .row .btn { flex: 1 1 calc(50% - 8px); padding: 12px 10px; }
      .seg .btn { flex: 1 1 calc(50% - 8px); }
      .txt { flex-direction: column; }
      .txt .btn { width: 100%; }
      label select { width: 100%; margin-top: 6px; }
            dl.params { gap: 6px 14px; }
      .kpis { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1001px) {
      /* на компьютере таблица всегда целиком: размер текста подстраивается под ширину карточки */
      .scroll { container-type: inline-size; }
      table { table-layout: fixed; width: 100%; font-size: clamp(.62rem, 1.45cqw, 1rem); }
      th, td { padding: .75em .2em; overflow: hidden; text-overflow: ellipsis; }
      tr > th:first-child { width: 13%; }
    }
    @media (min-width: 1100px) {
      .orb { width: 180px; height: 180px; }
      .banner { --bh: 312px; --strip: 104px; }
      .banner .brand b { font-size: 3rem; }
    }
    @media (max-width: 560px) {
      .banner { --bh: 232px; --strip: 80px; }
      .banner .brand b { font-size: 2rem; }
      .banner nav { gap: 8px; padding: 0 10px; }
      .banner nav a { font-size: .72rem; letter-spacing: .05em; min-height: 52px; padding: 0 4px; }
      .hero { padding: 40px 22px; }
      .hero .facts { grid-template-columns: 1fr; }
      .hero h1 { font-size: 2.5rem; }
    }

    /* ---------- История разговора ---------- */
    .ic.s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .iconbtn {
      display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
      border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink);
    }
    .iconbtn .ic { width: 1.25rem; height: 1.25rem; }
    .iconbtn.danger { border-color: var(--bad); color: var(--bad); background: transparent; }
    .iconbtn.sm { width: 32px; height: 32px; border-color: transparent; border-radius: 10px; background: transparent; color: var(--muted); }
    .iconbtn.sm .ic { width: 1rem; height: 1rem; }
    .hist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .hist-head h3 { display: flex; align-items: center; gap: .5em; margin: 0; }
    .hist-head h3 .ic { color: var(--accent); width: 1.3rem; height: 1.3rem; }
    .hist-tools { display: flex; gap: 6px; }
    .log {
      display: flex; flex-direction: column; gap: 14px; max-height: 440px; overflow-y: auto;
      padding: 4px 6px 4px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    }
    .log .day { align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
    .msg { display: flex; align-items: flex-end; gap: 10px; max-width: 88%; }
    .msg.user { align-self: flex-end; flex-direction: row-reverse; }
    .msg .av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: var(--on); }
    .msg .av .ic { width: 1.1rem; height: 1.1rem; }
    .msg.user .av { background: var(--tint); color: var(--accent); border: 1px solid var(--line); }
    .msg .bub { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); border-bottom-left-radius: 6px; background: var(--tint); }
    .msg.user .bub { border-radius: var(--r); border-bottom-right-radius: 6px; background: var(--grad); color: var(--on); border-color: transparent; }
    .msg .bub p { margin: 0; font-size: .95rem; line-height: 1.5; }
    .msg .meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: .75rem; }
    .msg .meta .ic { width: 1em; height: 1em; }
    .msg .meta .sp { flex: 1; }
    .msg.user .meta { justify-content: flex-end; color: inherit; opacity: .85; }
    .msg.user .iconbtn.sm { color: inherit; }
    .hist-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
    .hist-foot .old { margin: 0; }
    .hist.folded .log, .hist.folded .hist-foot { display: none; }
    .hist.folded #hfold .ic { rotate: 180deg; }
    #hfold .ic { transition: rotate .2s ease; }
    .btn .ic { width: 1.1em; height: 1.1em; margin-right: .45em; vertical-align: -.15em; }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      .iconbtn:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); box-shadow: var(--sh); }
      .iconbtn.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
      .iconbtn.sm:hover { background: rgba(127,127,127,.16); box-shadow: none; transform: none; }
      .iconbtn:active { transform: scale(.94); }
    }
    @media (max-width: 560px) {
      .msg { max-width: 96%; }
      .hist-head { flex-wrap: wrap; }
      .row .iconbtn { flex: none; }
    }


.msg .bub { min-width: 0; overflow-wrap: anywhere; }
.msg .bub p { white-space: pre-wrap; }
.hist.folded #hempty, .hist.folded #history-hint { display: none; }

/* Видимые подписи кнопок истории, в том числе без SVG. */
.hist-tools { flex-wrap: wrap; }
.hist-tools .iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: auto; min-height: 44px; height: auto; padding: .55rem .75rem; }
.history-button-label { font-size: .8rem; line-height: 1.3; }
.hist-tools .iconbtn:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) { .hist-tools { width: 100%; } }