/* The dock (phone) and the round «Спросить AI» (computer): mock 2. Script: dock.js, the box inside: agent.js. */
.app-dock { display: none; }
@media (max-width: 860px) {
  .app-dock.on {
    position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 10px; pointer-events: none;
    padding: 0 max(12px, calc(env(safe-area-inset-right, 0px) + 8px)) var(--dock-gap) max(12px, calc(env(safe-area-inset-left, 0px) + 8px));
    transition: opacity var(--t) var(--ease);
  }
  .app-dock > * { pointer-events: auto; }
  html.dock-open .app-dock > :not(.dock-ask) { pointer-events: none; }
  html.dock-open .app-dock.on { bottom: var(--kb, 0px); transition: bottom .25s cubic-bezier(.2, .8, .2, 1); }
  html.dock-open .app-dock .dock-ask { position: absolute; z-index: 1; height: var(--ask-h, 136px); overflow: hidden; border-radius: var(--r-lg);
    left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px)); right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
    bottom: var(--dock-gap);
    background: var(--elev); border-color: var(--border); box-shadow: 0 1px 2px lch(0% 0 0 / 0.04), 0 8px 24px lch(0% 0 0 / 0.08); }
  html.dock-open .app-dock .dock-ask:focus-within { border-color: var(--border-focus); }
  html.dock-open .dock-ask-face { position: absolute; left: 0; bottom: 0; width: auto; height: 46px; opacity: 0; pointer-events: none; }
  html.dock-open .dock-ask-slot { display: block; animation: fade var(--t-slow) var(--ease); }
  /* mock 2: the container grows and folds on its own height and corners; its words fade */
  .app-dock .dock-ask { transition: height var(--t-slow) var(--ease), border-radius var(--t-slow) var(--ease), background-color var(--t) var(--ease), opacity .12s; }
  .dock-ask-face { transition: opacity var(--t) var(--ease); }
  html.dock-open .dock-back-slot { margin-left: auto; }
  html.has-dock .btn.menu-btn { display: none; }
  html.has-dock .content { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
.dock-back-slot { flex: none; width: 48px; height: 48px; }
.app-dock .app-fab, .app-dock .app-back, .dock-ask, .ask-fab {
  height: 48px; padding: 0; cursor: pointer; color: var(--text);
  background: color-mix(in srgb, var(--base) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 6px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.5);
  transition: opacity .12s; -webkit-tap-highlight-color: transparent;
}
.app-dock .app-fab, .app-dock .app-back { flex: none; width: 48px; border-radius: 50%; display: grid; place-items: center; }
.app-dock .app-back { display: none; }
.app-dock .app-back.on { display: grid; }
.app-dock .app-back svg { width: 22px; height: 22px; }
.app-dock .app-fab .i { width: 20px; height: 20px; }
.dock-ask { flex: 1; min-width: 0; position: relative; box-sizing: border-box; border-radius: var(--r-full); cursor: default; }
.dock-ask[hidden] { display: none; }
.dock-ask-face { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 14px; border: 0; border-radius: inherit; background: none;
  font: inherit; font-size: var(--fs-body); color: var(--text-3); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dock-ask-face .dock-spark { flex: none; width: 28px; height: 28px; margin: -3px 0; }
.dock-ask .dock-chats { position: absolute; top: 50%; right: 5px; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--r-full); background: none; color: var(--text-3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dock-ask .dock-chats .i, .dock-ask .dock-chats svg { width: 19px; height: 19px; }
.dock-ask .dock-ask-face { padding-right: 82px; }
/* dictation (Vlad, 14.11.2026; voice.js) — shared by the agent's box and the dock: the microphone, «Отмена», the waveform */
.agent-mic, .voice-cancel, .voice-stop { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-full); background: transparent; color: var(--icon); cursor: pointer; }
.agent-mic .i, .voice-cancel .i, .voice-stop .i { width: 17px; height: 17px; }
.voice-cancel, .voice-stop { background: var(--hover); color: var(--text-2); }
.voice-stop[hidden] { display: none; }
@media (hover: hover) { .agent-mic:hover { background: var(--hover); color: var(--text); } .voice-cancel:hover, .voice-stop:hover { background: var(--active); } }
.agent-mic:active, .voice-cancel:active, .voice-stop:active { background: var(--active); }
.voice-wave { display: inline-flex; align-items: center; gap: 7px; width: 180px; height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); box-sizing: border-box; }
.voice-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: voice-dot 1.2s ease-in-out infinite; }
.voice-canvas { flex: 1; min-width: 0; height: 22px; color: var(--accent); }
.voice-time { flex: none; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
/* the last 15 s before the limit stops the recording: the time counts down in the warning colour */
.voice-time.warn { color: var(--orange); }
@keyframes voice-dot { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .voice-dot { animation: none; } }
/* the dock: the microphone before the chats; while dictating «Спросить AI» holds «Отмена», the
   waveform and «Отправить»; the menu and «назад» stay, the page is not shaded */
.dock-ask .dock-mic { position: absolute; top: 50%; right: 41px; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--r-full); background: none; color: var(--text-3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dock-ask .dock-mic .i, .dock-ask .dock-mic svg { width: 19px; height: 19px; }
.dock-ask .dock-mic:active, .dock-ask .dock-chats:active { background: var(--active); }
html.dock-open .dock-ask .dock-mic { opacity: 0; pointer-events: none; }
.dock-voice { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.dock-voice[hidden] { display: none; }
.dock-voice .voice-cancel, .dock-voice .voice-send { width: 38px; height: 38px; }
.dock-voice .voice-wave { flex: 1; width: auto; height: 38px; }
.voice-send { flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.voice-send .i { width: 16px; height: 16px; stroke-width: 2; }
.voice-send:disabled { opacity: .45; cursor: default; }
html.dock-voicing .dock-ask { background: var(--elev); }
html.dock-voicing .dock-ask-face, html.dock-voicing .dock-ask .dock-mic, html.dock-voicing .dock-ask .dock-chats { visibility: hidden; }
html.dock-voice-off .voice-dot { animation: none; background: var(--text-4); }
/* the text being dictated: a card over «Спросить AI» — the text only, its last four lines */
.voice-pop { position: fixed; z-index: 36; left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px)); right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
  bottom: calc(var(--dock-gap) + 58px); padding: 12px 16px; border-radius: var(--r-lg); background: var(--elev); border: 1px solid var(--border); box-shadow: var(--shadow); animation: fade var(--t) var(--ease); }
.voice-pop[hidden] { display: none; }
/* a tap on the card stops the recording and opens «Спросить AI» with the text to correct (Vlad, 14.11.2026) */
.voice-pop { cursor: pointer; }
.voice-pop-hint { margin-top: 6px; color: var(--text-4); font-size: var(--fs-caption); }
.voice-pop-hint[hidden] { display: none; }
.voice-pop-t { max-height: 6em; overflow: hidden; font-size: var(--fs-read); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.voice-pop.long .voice-pop-t { -webkit-mask-image: linear-gradient(transparent, #000 1.5em); mask-image: linear-gradient(transparent, #000 1.5em); }
.voice-hint { color: var(--text-4); }
.voice-wait-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.voice-wait-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-4); animation: voice-dot 1s ease-in-out infinite; }
.voice-wait-dots i:nth-child(2) { animation-delay: .15s; } .voice-wait-dots i:nth-child(3) { animation-delay: .3s; }
html.dock-open .dock-ask .dock-chats { opacity: 0; pointer-events: none; }
.dock-spark stop { animation: spark-flow 4.5s linear infinite paused; }
.dock-spark stop:nth-of-type(2) { animation-delay: -1.5s; }
.dock-spark stop:nth-of-type(3) { animation-delay: -3s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dock-ask-face:hover .dock-spark { animation: spark-spin .8s var(--ease-io); }
  .dock-ask-face:hover .dock-spark stop { animation-play-state: running; }
}
.dock-ask-slot { display: none; }
.dock-ask-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body > .app-back { display: none; }
.dock-proxy { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: var(--fs-read); pointer-events: none; }
.app-dock > .app-fab, .app-dock .app-back, .dock-ask-face, .dock-ask-face * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ask-fab { display: none; }
}

/* the glass in the dark theme: a faint light edge, a deeper shadow */
:root[data-theme="dark"] .app-dock .app-fab, :root[data-theme="dark"] .app-dock .app-back, :root[data-theme="dark"] .dock-ask, :root[data-theme="dark"] .ask-fab {
  border-color: var(--glass-edge); box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 lch(100% 0 0 / .08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-dock .app-fab, :root:not([data-theme="light"]) .app-dock .app-back, :root:not([data-theme="light"]) .dock-ask, :root:not([data-theme="light"]) .ask-fab {
  border-color: var(--glass-edge); box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 lch(100% 0 0 / .08); }
}
/* Under the mouse «Спросить AI» comes alive: its colours run along the spark and it makes one full turn */
@keyframes spark-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes spark-flow { 0%, 100% { stop-color: #9b6cf0; } 33.3% { stop-color: #5b8cff; } 66.6% { stop-color: #3ec6ff; } }

/* ---- the computer's «Спросить AI» (mock 2): a 48 px glass circle in the bottom-right corner; a click or ⌘J grows the
   same element — its width, height and corners on a transition — into the message box (440 px, its height follows the
   box: --ask-h), its spark fades and the box fades in; Esc or a click aside folds it back the same way. ---- */
@media (min-width: 861px) {
  .ask-fab.on { display: block; position: fixed; z-index: 35; right: 24px; bottom: 24px; width: 48px; height: 48px; overflow: hidden; border-radius: var(--r-fab); box-sizing: border-box;
    transition: width var(--t-slow) var(--ease), height var(--t-slow) var(--ease), border-radius var(--t-slow) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
  .ask-fab .dock-ask-face { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; transition: opacity var(--t) var(--ease); }
  :root.fab-open .ask-fab.on { width: 440px; height: var(--ask-h, 120px); border-radius: var(--r-lg); background: var(--elev); border-color: var(--border); box-shadow: var(--shadow); }
  :root.fab-open .ask-fab .dock-ask-face { opacity: 0; pointer-events: none; }
  :root.fab-open .ask-fab .dock-ask-slot { display: block; animation: fade var(--t-slow) var(--ease); }
  @media (hover: hover) { :root:not(.fab-open) .ask-fab.on:hover { box-shadow: 0 8px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5); } }
}
@media (prefers-reduced-motion: reduce) { .ask-fab.on, .app-dock .dock-ask { transition: none; } }

/* Failed pieces remain in memory until retry/cancel; reuse the waveform's space. */
.voice-retry { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.voice-retry[hidden], .voice-wave[hidden] { display: none; }