/* Unbounded — self-hosted (fonts/, OFL), used for UI chrome (buttons, headers, tab/card titles); reading content (note bodies, transcript text) uses the system font (SF Pro on iPhone, Inter elsewhere). Two cuts only: Regular for normal weights and SemiBold for everything bold — so the old 700/800 "black" headings render as Unbounded SemiBold instead of an extra-wide heavy weight. */ /* Inter и Space Mono — свои копии (раньше с Google Fonts: лишний запрос, который задерживал первую отрисовку) */ @font-face{font-family:'Inter'; src:url('fonts/inter-400-800-cyrillic.woff2') format('woff2'); font-weight:400 800; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Inter'; src:url('fonts/inter-400-800-latin.woff2') format('woff2'); font-weight:400 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Space Mono'; src:url('fonts/space-mono-400-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Space Mono'; src:url('fonts/space-mono-700-latin.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Unbounded'; src:url('fonts/unbounded-400-cyrillic.woff2') format('woff2'); font-weight:100 500; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Unbounded'; src:url('fonts/unbounded-400-latin.woff2') format('woff2'); font-weight:100 500; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Unbounded'; src:url('fonts/unbounded-600-cyrillic.woff2') format('woff2'); font-weight:501 1000; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Unbounded'; src:url('fonts/unbounded-600-latin.woff2') format('woff2'); font-weight:501 1000; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root{--font-text:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;} :root{ --bg:#000000; --bg-2:#0d0d0f; --panel-bg:#161618; --panel-bg-strong:#212124; --pill-bg:#18181b; --panel-border:rgba(255,255,255,0.1); --panel-border-strong:rgba(255,255,255,0.19); --text:#f4f5f7; --text-dim:#9b9ba3; --text-faint:#6e6e75; --accent:#ff9d4d; --accent-2:#3ec2ff; --accent-2-dark:#2ba3dd; --accent-3:#a06bff; --accent-pink:#ff5fa2; --accent-yellow:#ffd23f; --danger:#ff5c5c; --ai:#6f6bff; --cat-1:#3ec2ff; --cat-2:#ff9d4d; --cat-3:#a06bff; --cat-4:#2fd4a0; --cat-5:#ff5fa2; --cat-6:#ffd23f; --ev-green:#52e6a0; --ev-cyan:#37c9ff; --ev-pink:#ff5fc9; --ev-purple:#9d6bff; --ev-blue:#2f5fdb; --shadow:0 14px 32px -18px rgba(0,0,0,0.5); --btn-text:#0a0a10; --grid-line:rgba(72,92,114,0.26); color-scheme:dark; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#ffffff; --bg-2:#f7f7f8; --panel-bg:#f2f2f4; --panel-bg-strong:#e7e7ea; --pill-bg:#e6e6ea; --panel-border:rgba(0,0,0,0.08); --panel-border-strong:rgba(0,0,0,0.15); --text:#0e0e10; --text-dim:#68686f; --text-faint:#9a9aa1; /* accent palette is deliberately identical to the dark theme's (not re-tuned per theme) — a color like "голубой" should stay the same color when switching themes, not shift toward a different hue just because the background changed. --btn-text follows suit: it only ever sits on top of these accent colors (never the plain bg), so it stays fixed at the dark value that contrasts correctly against them. */ --accent:#ff9d4d; --accent-2:#3ec2ff; --accent-2-dark:#2ba3dd; --accent-3:#a06bff; --accent-pink:#ff5fa2; --accent-yellow:#ffd23f; --danger:#ff5c5c; --ai:#6f6bff; --cat-1:#3ec2ff; --cat-2:#ff9d4d; --cat-3:#a06bff; --cat-4:#2fd4a0; --cat-5:#ff5fa2; --cat-6:#ffd23f; --ev-green:#52e6a0; --ev-cyan:#37c9ff; --ev-pink:#ff5fc9; --ev-purple:#9d6bff; --ev-blue:#2f5fdb; --shadow:0 10px 26px -16px rgba(0,0,0,0.14); --btn-text:#0a0a10; --grid-line:rgba(72,104,140,0.24); color-scheme:light; } } :root[data-theme="light"]{ --bg:#ffffff; --bg-2:#f7f7f8; --panel-bg:#f2f2f4; --panel-bg-strong:#e7e7ea; --pill-bg:#e6e6ea; --panel-border:rgba(0,0,0,0.08); --panel-border-strong:rgba(0,0,0,0.15); --text:#0e0e10; --text-dim:#68686f; --text-faint:#9a9aa1; --accent:#dd7f28; --accent-2:#0a84ff; --accent-2-dark:#0a75e0; --accent-3:#7a4fe0; --accent-pink:#e0397e; --accent-yellow:#c99400; --danger:#e0453c; --ai:#5b56f0; --cat-1:#0a84ff; --cat-2:#dd7f28; --cat-3:#7a4fe0; --cat-4:#199468; --cat-5:#e0397e; --cat-6:#c99400; --ev-green:#52e6a0; --ev-cyan:#37c9ff; --ev-pink:#ff5fc9; --ev-purple:#9d6bff; --ev-blue:#2f5fdb; --shadow:0 10px 26px -16px rgba(0,0,0,0.14); --btn-text:#ffffff; --grid-line:rgba(72,104,140,0.24); color-scheme:light; } :root[data-theme="dark"]{ --bg:#000000; --bg-2:#0d0d0f; --panel-bg:#161618; --panel-bg-strong:#212124; --pill-bg:#18181b; --panel-border:rgba(255,255,255,0.1); --panel-border-strong:rgba(255,255,255,0.19); --text:#f4f5f7; --text-dim:#9b9ba3; --text-faint:#6e6e75; --accent:#ff9d4d; --accent-2:#3ec2ff; --accent-2-dark:#2ba3dd; --accent-3:#a06bff; --accent-pink:#ff5fa2; --accent-yellow:#ffd23f; --danger:#ff5c5c; --ai:#6f6bff; --cat-1:#3ec2ff; --cat-2:#ff9d4d; --cat-3:#a06bff; --cat-4:#2fd4a0; --cat-5:#ff5fa2; --cat-6:#ffd23f; --ev-green:#52e6a0; --ev-cyan:#37c9ff; --ev-pink:#ff5fc9; --ev-purple:#9d6bff; --ev-blue:#2f5fdb; --shadow:0 14px 32px -18px rgba(0,0,0,0.5); --btn-text:#0a0a10; --grid-line:rgba(72,92,114,0.26); color-scheme:dark; } *{box-sizing:border-box;} html{overscroll-behavior:none;} /* Panels toggle display:none on a large sibling every switch (the outgoing one, ~220ms into the transition) — the browser's scroll anchoring tries to compensate for that size change by nudging scroll position to keep whatever it thinks was "anchored" in view, which is exactly what read as content opening mid-screen and then jumping up to where it actually belongs a beat later. We already drive scroll/visibility ourselves (switchTab resets it up front, the reveal is its own rAF-timed transition), so that automatic compensation only fights it. */ html, body{overflow-anchor:none;} body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-text); padding-bottom:calc(96px + env(safe-area-inset-bottom)); overflow-x:hidden; overscroll-behavior:none; touch-action:pan-y;} h1,h2,h3{font-family:'Unbounded',system-ui,sans-serif; margin:0; font-weight:700;} .mono{font-family:var(--font-text); font-weight:700; font-variant-numeric:tabular-nums;} p{margin:0;} :root{--tg-safe-top:0px;} .wrap{position:relative; z-index:1; max-width:640px; margin:0 auto; padding:calc(var(--tg-safe-top) - 18px) 16px 8px; transform:translateX(var(--drawer-shift, 0px)); transition:transform .3s cubic-bezier(.2,.8,.2,1);} header{ position:sticky; top:calc(var(--tg-safe-top, 0px) - 18px); z-index:10; background:none; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; min-height:38px; padding-bottom:2px; } header h1{font-size:1.15rem; margin:0;} .header-title{ position:absolute; left:50%; top:50%; transform:translate(-50%, calc(-50% - 22px)); z-index:1; display:flex; align-items:center; gap:6px; pointer-events:none; transition:transform .2s ease; background:var(--pill-bg); border:1px solid var(--panel-border); border-radius:999px; padding:4px 14px 4px 6px; backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); box-shadow:0 8px 20px -10px rgba(0,0,0,0.5); } .header-title > *{position:relative;} .header-logo{width:30px; height:30px; object-fit:contain; display:block; flex:none;} :root[data-theme="light"] .header-logo{filter:brightness(0);} .header-right{display:flex; align-items:center; gap:8px;} header.agent-mode #menu-btn, header.agent-mode .header-right{transform:translateY(24px); transition:transform .2s ease;} .status{font-family:'Unbounded'; font-weight:700; font-size:0.68rem; color:var(--text-faint);} /* The floating nav is two separate glass pieces now — the 3-tab capsule (#tabbar) and the standalone search button (.tabbar-search) — held together by this dock, which owns everything about the control's position/visibility as ONE unit (fixed placement + centering, the scroll shrink, hiding for the keyboard/agent-mode/inline-edit, and the swipe-away collapse into the corner capsule). Neither child carries any of that itself — #tabbar is just a plain flex item now, so its own jelly-pulse bump (further down) only ever needs a bare scale(), no position math to preserve. */ /* Width now matches the content column above it (.wrap: max-width:640px minus its own 16px+16px side padding = 608px) instead of hugging its own content — so the dock's outer edges line up with a card/the calendar behind it, same as the reference. .tabbar and its 3 tabs below flex-grow to fill that width evenly (see .tabbar/.tab). */ .tabbar-dock{ position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(calc(-50% + var(--drawer-shift, 0px))) translateY(0) scale(1); z-index:50; width:calc(100vw - 32px); max-width:608px; display:flex; align-items:center; gap:10px; transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .22s ease; } .tabbar-dock.scrolled{transform:translateX(calc(-50% + var(--drawer-shift, 0px))) translateY(10px) scale(0.82);} /* out of the way while editing a transcript line in place — the on-screen keyboard is already covering most of the bottom of the screen then. */ .tabbar-dock.hidden-for-edit{opacity:0; pointer-events:none; transform:translateX(calc(-50% + var(--drawer-shift, 0px))) translateY(40px) scale(.82);} .tabbar-dock.kb-hidden, .tabbar-dock.agent-mode, .tabbar-dock.note-mode{transform:translateX(calc(-50% + var(--drawer-shift, 0px))) translateY(140%); opacity:0; pointer-events:none;} .tabbar-dock.swipe-collapsed{transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .38s ease; transform-origin:right center; transform:translateX(calc(-50% + var(--drawer-shift, 0px) + 220px)) translateY(0) scale(0.15); opacity:0; pointer-events:none;} .tabbar-dock.swipe-collapsed-left{transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .38s ease; transform-origin:left center; transform:translateX(calc(-50% + var(--drawer-shift, 0px) - 220px)) translateY(0) scale(0.15); opacity:0; pointer-events:none;} .tabbar{ position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:2px; padding:4px; border-radius:999px; background-color:color-mix(in srgb, var(--pill-bg) 28%, transparent); border:1px solid var(--panel-border-strong); backdrop-filter:blur(34px) saturate(2); -webkit-backdrop-filter:blur(34px) saturate(2); box-shadow:0 22px 50px -16px rgba(0,0,0,0.6); touch-action:none; transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .3s ease; } /* Holding the indicator down — capsule grows to the exact same size its own quick-switch bounce peaks at (tabbarLiquidPulse's scale(1.028)) and brightens a touch, both smoothly, as long as the press lasts. */ .tabbar.held{ transform:scale(1.028); background-color:color-mix(in srgb, var(--pill-bg) 56%, transparent); } /* Exact circle, same height as the 3-tab capsule — sized in JS (syncSearchButtonSize()) by measuring #tabbar's real rendered height, rather than via aspect-ratio deriving width from a flex-stretched cross-size, which isn't reliable in every WebView this app runs in. 54px is just the pre-JS fallback so nothing flashes unsized. */ .tabbar-search{ position:relative; flex:none; width:54px; height:54px; box-sizing:border-box; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; color:var(--text-dim); background:color-mix(in srgb, var(--pill-bg) 28%, transparent); border:1px solid var(--panel-border-strong); backdrop-filter:blur(34px) saturate(2); -webkit-backdrop-filter:blur(34px) saturate(2); box-shadow:0 22px 50px -16px rgba(0,0,0,0.6); } .tabbar-search:active{color:var(--text);} .tabbar-search svg{width:27px; height:27px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; display:block;} @supports not (hanging-punctuation:first){ .tabbar, .tabbar-search, .tabbar-collapse-add, .tabbar-collapse-btn{ backdrop-filter:url(#tabbarLiquidGlass) blur(18px) saturate(2); -webkit-backdrop-filter:blur(18px) saturate(2); } } /* Swipe-collapsed tabbar leaves behind this two-button stack instead of a single button: "+" on top (add event, no need to expand the tabbar first) and the hamburger below it (expand / double-tap for the AI shortcut, as before) — now two separate glass pills with a gap between them, matching the two-separate-capsules look the main dock itself uses, instead of one pill cut in half by a hairline divider. */ .tabbar-collapse-cluster{ position:fixed; right:calc(14px + env(safe-area-inset-right, 0px)); bottom:calc(14px + env(safe-area-inset-bottom)); z-index:50; display:flex; flex-direction:column; gap:8px; width:56px; touch-action:none; opacity:0; transform:scale(0.3); pointer-events:none; transition:opacity .38s ease .1s, transform .42s cubic-bezier(.34,1.56,.64,1) .1s; } .tabbar-collapse-cluster.left-side{right:auto; left:calc(14px + env(safe-area-inset-left, 0px));} .tabbar-collapse-cluster.visible{opacity:1; transform:scale(1); pointer-events:auto;} .tabbar-collapse-cluster.dragging .tabbar-collapse-add, .tabbar-collapse-cluster.dragging .tabbar-collapse-btn{ box-shadow:0 22px 50px -14px rgba(0,0,0,0.65); } .tabbar-collapse-cluster.dragging{transform:scale(1.06);} .tabbar-collapse-add, .tabbar-collapse-btn{ position:relative; width:56px; height:56px; box-sizing:border-box; cursor:pointer; border-radius:999px; background:color-mix(in srgb, var(--pill-bg) 55%, transparent); border:1px solid var(--panel-border-strong); backdrop-filter:blur(24px) saturate(2); -webkit-backdrop-filter:blur(24px) saturate(2); box-shadow:0 14px 32px -14px rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .tabbar-collapse-add:active, .tabbar-collapse-btn:active{background:rgba(255,255,255,0.1);} .tabbar-collapse-add svg, .tabbar-collapse-btn svg{position:relative; z-index:1; width:22px; height:22px; stroke:var(--text); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;} /* while recording in Диктофон, this same "+" slot doubles as the важно flag — mirrors how it's the quick-add button everywhere else, just context-aware. */ .tabbar-collapse-add.flag-mode svg{stroke:#fff; fill:none;} .hold-glow-ring{ position:absolute; inset:0; z-index:3; border-radius:inherit; padding:2px; box-sizing:border-box; background:conic-gradient(from var(--beam-angle), transparent 0deg, transparent 250deg, #52e6a0 275deg, #37c9ff 300deg, #ff5fc9 325deg, #9d6bff 350deg, transparent 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; filter:drop-shadow(0 0 5px rgba(130,120,255,0.5)); opacity:0; transition:opacity .15s ease; } .charging .hold-glow-ring{opacity:1; animation:beamRotate .6s linear infinite;} .tab-indicator{ position:absolute; top:4px; bottom:4px; border-radius:999px; background:color-mix(in srgb, var(--text) 20%, transparent); transition:left .5s cubic-bezier(.22,1,.36,1), width .5s cubic-bezier(.22,1,.36,1), opacity .2s ease, transform .3s cubic-bezier(.22,1,.36,1); z-index:0; } /* Holding the indicator down — it grows to the exact same size its own quick-switch bounce peaks at (indicatorLiquidPulse's scale(1.2)), smoothly, as long as the press lasts. */ .tab-indicator.held{transform:scale(1.2);} /* iOS-style "liquid glass" tap bounce, fired once per tab switch — a single continuous keyframe animation (not two transitions handed off via JS, which left an audible "seam"/velocity jump where they met), using the plain `ease-in-out` timing keyword for the whole thing — deliberately the least clever option: fully symmetric acceleration in, deceleration out, no front-loaded snap on either the grow or the shrink half. Uniform `scale()` only (never scaleX/scaleY) so icons/text never get stretched, and transform-origin is pinned to the element's own center — now purely cosmetic (#tabbar no longer carries the dock's position transform, so there's nothing left to preserve), kept in case jellyBounce() is ever pointed at the dock itself. jellyBounce() also clears any inline transform-origin override defensively before playing either way. Bar and tab grow together and peak together (29% into their shared 0.42s pulse, i.e. 0.12s — quicker than the 0.15s this replaced) then shrink straight back down, at the *same* 0.3s pace as before, done by 0.42s. The pill grows and peaks at that same 0.12s mark too (its own pulse runs 0.56s, so 0.12s lands at 0.12/0.56 = 21%) — but then *holds* at the peak size through a flat plateau until 75% of its own timeline (0.75 × 0.56s = 0.42s — matching when the bar's pulse finishes), only beginning its own visible shrink once the bar has fully come to rest, so the two shrinks never overlap; that shrink is itself quicker too now (0.14s, down from 0.18s). No color change — scale only. The search button (a separate glass piece now) gets the same bare-scale .tab bump on its own tap, reusing tabLiquidPulse directly. */ .tabbar, .tab, .tab-indicator, .tabbar-search{transform-origin:center center;} @keyframes indicatorLiquidPulse{ 0%{transform:scale(1);} 21%{transform:scale(1.2);} 75%{transform:scale(1.2);} 100%{transform:scale(1);} } .tab-indicator.jelly-pulse{animation:indicatorLiquidPulse .56s ease-in-out;} @keyframes tabbarLiquidPulse{ 0%{transform:scale(1);} 29%{transform:scale(1.028);} 100%{transform:scale(1);} } /* Same brighten-then-settle the press-and-hold .held state uses, just replayed as a one-shot pulse in sync with the switch bounce above. */ @keyframes tabbarLightenPulse{ 0%{background-color:color-mix(in srgb, var(--pill-bg) 28%, transparent);} 29%{background-color:color-mix(in srgb, var(--pill-bg) 56%, transparent);} 100%{background-color:color-mix(in srgb, var(--pill-bg) 28%, transparent);} } .tabbar.jelly-pulse{animation:tabbarLiquidPulse .42s ease-in-out, tabbarLightenPulse .42s ease-in-out;} .tabbar-search.jelly-pulse{animation:tabbarLiquidPulse .42s ease-in-out;} /* Equal-width (not content-based) — Главная/Агент/Дедлайны are different label lengths, so auto-width tabs threw the middle (Агент) button off visual-center within the 3-tab capsule. flex:1 on all three keeps them identical AND lets them stretch together to fill the now much wider capsule (it spans the content column, not just its own content), since the middle one of three equal cells always lands on the capsule's own center either way. */ .tab{ position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:5px 5px; border-radius:999px; cursor:pointer; color:var(--text-dim); transition:color .2s; } @keyframes tabLiquidPulse{ 0%{transform:scale(1);} 29%{transform:scale(1.065);} 100%{transform:scale(1);} } .tab.jelly-pulse{animation:tabLiquidPulse .42s ease-in-out;} .tab svg{width:27px; height:27px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; display:block;} .tab span{font-family:'Unbounded'; font-size:0.6rem; font-weight:700; white-space:nowrap;} /* Color used to come from here (.active/.drag-preview → bright), which fought with the granular .tab-color-overlay reveal below — a tab kept its own permanent bright color whenever it was "active", regardless of where the indicator pill had actually been dragged to, and a mid-drag "best overlap" match got colored solid instead of partially. Color now comes ONLY from the overlay's clip-path, so it always exactly matches the indicator's real position, including mid-letter and mid-drag. */ /* Per-tab "color reveal" overlay — a live clone of each tab (see setupTabColorReveal()/updateColorReveal() in JS), stacked exactly on top of the original and always in the bright/active color, but clipped via clip-path to only whatever sliver of that tab the indicator pill currently physically covers (updated continuously, including mid-drag). So a tab under just the left third of the indicator shows only its left third — down to splitting a single letter — in the bright color; the rest stays dim. Reuses the plain .tab/.tab svg/.tab span rules for identical layout (same class), so it can't drift out of alignment with the original; only inert (no clicks) and colored differently. Kept scoped to "#tabbar > .tab" rather than bare ".tab" in the handful of JS selectors that must only ever match the 3 real, interactive tabs (click wiring, active-state toggling, drag overlap/preview) — this overlay is a *nested* clone, so it never matches a direct-child selector, but would silently match a bare ".tab" query alongside the real tabs. */ .tab-color-overlay{position:absolute; inset:0; z-index:2; pointer-events:none; clip-path:inset(0 100% 0 0);} .tab.tab-color-overlay{color:var(--text);} /* Дедлайны tab morphs into a "+" once you're already on that tab, so it doubles as the add-event button instead of a separate floating one. */ .tab-icon-slot{position:relative; width:27px; height:27px; display:block;} .tab-icon-slot svg{position:absolute; inset:0; transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);} .tab-icon-add{opacity:0; transform:scale(.35) rotate(-135deg);} #tab-deadlines.show-add .tab-icon-main{opacity:0; transform:scale(.35) rotate(135deg);} #tab-deadlines.show-add .tab-icon-add{opacity:1; transform:scale(1) rotate(0deg);} /* Same 24px slot as every other tab icon — keeps the identical icon→gap→label rhythm as the rest of the bar regardless of size. */ .tab-agent-btn{position:relative; display:flex; align-items:center; justify-content:center; height:27px;} /* an iridescent glow sitting behind the star — sized to match the icon itself (not the flex row's own box). No pulsing (fixed size/opacity) — just the colors themselves gently drifting through hue via hue-rotate, and kept to a narrow ±22deg swing around cyan/pink/purple so it never drifts far enough to pass through green. */ .tab-agent-glow{ position:absolute; top:50%; left:50%; width:25px; height:25px; transform:translate(-50%,-50%); z-index:0; border-radius:50%; pointer-events:none; opacity:.4; background:radial-gradient(circle, #37c9ff 0%, #9d6bff 55%, #ff5fc9 100%); filter:blur(8px); animation:tabAgentGlowShift 6s ease-in-out infinite; } @keyframes tabAgentGlowShift{ 0%,100%{filter:blur(8px) hue-rotate(-22deg);} 50%{filter:blur(8px) hue-rotate(22deg);} } .tab-agent-btn svg{ position:relative; z-index:1; width:27px; height:27px; flex:none; stroke:#fff; stroke-width:0.75; stroke-linejoin:round; stroke-linecap:round; fill:url(#agentIconGradient); filter:drop-shadow(0 0 4px rgba(130,120,255,0.55)) drop-shadow(0 0 9px rgba(80,220,170,0.3)); transition:transform .25s cubic-bezier(.4,0,.2,1); animation:agentIconGlow 4.5s ease-in-out infinite; } @keyframes agentIconGlow{ 0%,100%{filter:drop-shadow(0 0 4px rgba(130,120,255,0.55)) drop-shadow(0 0 9px rgba(80,220,170,0.3));} 50%{filter:drop-shadow(0 0 6px rgba(255,95,201,0.6)) drop-shadow(0 0 11px rgba(55,201,255,0.35));} } .tab-agent.active .tab-agent-btn svg{transform:scale(1.12);} /* Трекер tab: fired once on switching in (not a static active state) — tells the feature's own story in miniature instead of one flat icon-wide bounce: the waveform bars bounce like live audio being picked up, the page pops in right after, then the two text lines "type" themselves onto it, as if the recording had just turned into a transcript. */ .tab[data-tab="notes"] svg{transition:transform .2s ease;} .tab[data-tab="notes"] svg *{transform-box:fill-box; transform-origin:center;} .tab[data-tab="notes"].mic-pulse svg .wf-bar1{animation:trackerWave .48s ease-in-out;} .tab[data-tab="notes"].mic-pulse svg .wf-bar2{animation:trackerWave .48s ease-in-out .08s;} .tab[data-tab="notes"].mic-pulse svg .doc-body, .tab[data-tab="notes"].mic-pulse svg .doc-flap{animation:trackerDocPop .42s cubic-bezier(.34,1.56,.64,1) .14s;} .tab[data-tab="notes"].mic-pulse svg .doc-line{animation:trackerLineDraw .2s ease-out .3s both;} .tab[data-tab="notes"].mic-pulse svg .doc-line1{stroke-dasharray:5;} .tab[data-tab="notes"].mic-pulse svg .doc-line2{stroke-dasharray:5; animation-delay:.42s;} @keyframes trackerWave{ 0%,100%{transform:scaleY(1);} 35%{transform:scaleY(1.85);} 65%{transform:scaleY(0.6);} } @keyframes trackerDocPop{ 0%{opacity:.35; transform:scale(.82);} 70%{opacity:1; transform:scale(1.08);} 100%{opacity:1; transform:scale(1);} } @keyframes trackerLineDraw{ from{stroke-dashoffset:5;} to{stroke-dashoffset:0;} } /* Главная tab: one-shot-on-switch, like the other tabs — but drawn like a pen tracing the outline rather than dropping/popping into place. The roofline strokes itself in first, then the walls follow right after — both via stroke-dasharray/dashoffset on these outline-only icons (fill:none already, so the stroke IS the whole icon). Smooth deceleration only (no elastic overshoot) to match the rest of this bar's "liquid glass" language. Dasharray values are a safe overestimate of each path's actual length — offset:0 always ends up fully drawn regardless of the small margin. */ .tab[data-tab="home"] svg .home-roof{stroke-dasharray:24;} .tab[data-tab="home"] svg .home-body{stroke-dasharray:44;} .tab[data-tab="home"].home-pulse svg .home-roof{animation:homeRoofDraw .48s cubic-bezier(.22,1,.36,1);} .tab[data-tab="home"].home-pulse svg .home-body{animation:homeBodyDraw .5s cubic-bezier(.22,1,.36,1) .1s backwards;} @keyframes homeRoofDraw{ 0%{stroke-dashoffset:24; opacity:0;} 18%{opacity:1;} 100%{stroke-dashoffset:0; opacity:1;} } @keyframes homeBodyDraw{ 0%{stroke-dashoffset:44; opacity:0;} 18%{opacity:1;} 100%{stroke-dashoffset:0; opacity:1;} } /* was -24px, tuned back when the header just scrolled away with everything else. Now that the header is permanently sticky (pinned on top, higher z-index), that big a pull tucked every panel's first row ~10px under it, permanently — not just for a scroll instant. -10px keeps the same tucked-in feel with a small positive clearance instead. */ .panel{display:none; opacity:0; transform:translateY(8px); transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1); margin-top:-10px;} #panel-agent{margin-top:0;} #panel-home, #panel-notes, #panel-notes-all, #panel-note-detail, #panel-deadlines, #panel-templates{margin-top:-28px;} .panel.active{display:block;} .panel.active.show{opacity:1; transform:translateY(0);} .panel.push-enter{transform:translateX(28px); opacity:0;} .panel.push-exit{transform:translateX(-28px); opacity:0;} .panel.pop-enter{transform:translateX(-28px); opacity:0;} .panel.pop-exit{transform:translateX(28px); opacity:0;} .glass{ position:relative; overflow:hidden; background:var(--pill-bg); border:1px solid var(--panel-border); border-radius:20px; backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); box-shadow:0 16px 36px -20px rgba(0,0,0,0.55); } .glass > *{position:relative;} .card{padding:14px 16px; margin-bottom:10px;} .eyebrow{font-family:'Unbounded'; font-weight:700; font-size:0.68rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em;} .card h3{font-size:1rem; margin-top:4px;} .meta{font-family:var(--font-text); font-weight:600; font-size:0.74rem; color:var(--text-faint); margin-top:6px;} .empty{color:var(--text-faint); text-align:center; padding:26px 10px; font-size:0.88rem;} .toast-stack{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:60; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none;} .toast{display:flex; align-items:center; gap:10px; background:var(--panel-bg-strong); border:1px solid var(--panel-border-strong); border-radius:20px; padding:16px 26px; font-size:0.94rem; font-weight:700; color:var(--text); box-shadow:var(--shadow); opacity:0; transform:translateY(10px) scale(.94); filter:blur(4px); transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease;} .toast.show{opacity:1; transform:translateY(0) scale(1); filter:blur(0);} .toast svg{width:19px; height:19px; stroke:var(--accent-2); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none;} .toast svg path{stroke-dasharray:24; stroke-dashoffset:24; animation:checkDraw .35s ease-out .18s forwards;} @keyframes checkDraw{ to{stroke-dashoffset:0;} } .shake{animation:shakeX .4s cubic-bezier(.36,.07,.19,.97);} @keyframes shakeX{ 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} } :root{--drawer-shift:0px; --drawer-width:min(82vw, 320px);} .drawer-overlay{ position:fixed; top:0; bottom:0; right:0; left:var(--drawer-width); background:rgba(140,140,148,0.4); z-index:70; opacity:0; pointer-events:none; transition:opacity .3s ease; } .drawer-overlay.open{opacity:1; pointer-events:auto;} .drawer{ position:fixed; top:0; bottom:0; left:0; width:var(--drawer-width); z-index:71; background:var(--bg); padding:var(--tg-safe-top) 14px 14px; display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); } .drawer.open{transform:translateX(0);} .drawer-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;} .drawer-header h3{font-size:1.05rem;} .drawer-search-row{margin-bottom:12px;} .drawer-search-row .field{margin-top:0;} .drawer-nav{display:flex; flex-direction:column; gap:2px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--panel-border);} .drawer-item{display:flex; align-items:center; gap:13px; padding:11px 8px; border-radius:12px; cursor:pointer; color:var(--text); font-size:0.92rem; font-weight:600;} .drawer-item:active{background:var(--pill-bg);} .drawer-item svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none;} .drawer-item-danger{color:var(--danger);} .drawer-new-chat{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:20px; margin-bottom:14px; cursor:pointer; background:var(--accent-2-dark); color:var(--btn-text); font-size:0.86rem; font-weight:700; box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent-2-dark) 55%, transparent); } .drawer-new-chat svg, .drawer-new-chat span{position:relative;} .drawer-new-chat svg{width:16px; height:16px; stroke:var(--btn-text); fill:none; stroke-width:2.2; stroke-linecap:round; flex:none;} .drawer-section-title{font-family:'Unbounded'; font-weight:700; font-size:0.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:8px;} .drawer-conversations{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; min-height:0;} .drawer-conv-item{padding:10px 8px; border-radius:12px; cursor:pointer; color:var(--text-dim); font-size:0.88rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .drawer-conv-item:active{background:var(--pill-bg);} .drawer-conv-item.active{background:var(--pill-bg); color:var(--text); font-weight:600;} .drawer-conv-item.hidden{display:none;} .agent-suggestions{display:flex; flex-direction:column; gap:2px; margin-bottom:8px;} .agent-suggestion{display:flex; align-items:center; gap:14px; padding:13px 8px; border-radius:12px; color:var(--text); font-size:0.95rem; font-weight:500;} .agent-suggestion svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none;} .agent-suggestion span{cursor:pointer;} .agent-suggestion span:active{text-decoration:underline;} .card-head{display:flex; align-items:center; gap:12px;} .card-head .card-body{flex:1; min-width:0;} .card-icon, .card-icon-sm{ position:relative; overflow:hidden; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel-bg-strong); border:1px solid var(--panel-border); box-shadow:0 6px 14px -8px rgba(0,0,0,0.5); } .card-icon{width:34px; height:34px;} .card-icon svg{position:relative; width:17px; height:17px; stroke:var(--text); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;} .card-eyebrow-row{display:flex; align-items:center; gap:8px; margin-bottom:12px;} .card-eyebrow-row .eyebrow{margin:0;} .card-icon-sm{width:24px; height:24px;} .card-icon-sm svg{position:relative; width:13px; height:13px; stroke:var(--text); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} /* outline:none — the browser's own default contentEditable focus ring (a blue rectangle) otherwise boxes the whole conspect the moment you tap into it to edit; caret-color matches the canvas's own so the two editing surfaces feel like the same page. */ .note-body{font-size:0.92rem; line-height:1.55; white-space:pre-wrap; outline:none; caret-color:var(--accent-2);} .note-body b{color:var(--text);} .note-body code, .note-body pre, .agent-msg code, .agent-msg pre{font-family:'Space Mono',ui-monospace,monospace;} /* a plain-illustration photo the AI chose to embed (via [[PHOTO:N]]) rather than transcribe as text — fades in once actually loaded. */ .note-photo-embed{display:block; margin:10px 0; border-radius:14px; overflow:hidden; background:var(--panel-bg-strong); min-height:40px;} .note-photo-embed.loading{min-height:120px; position:relative;} .note-photo-embed.loading::after{ content:''; position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%; border:3px solid var(--panel-border); border-top-color:var(--accent-2-dark); animation:recSpin .8s linear infinite; } .note-photo-embed-img{display:block; width:100%; max-height:340px; object-fit:cover; cursor:pointer; opacity:0; transition:opacity .3s ease;} .note-photo-embed.show .note-photo-embed-img{opacity:1;} /* drawings the AI redraws from photos (SVG in currentColor — follows the theme) */ .note-drawing{margin:12px 0; padding:12px; border-radius:14px; background:var(--panel-bg-strong); color:var(--text);} .note-drawing svg{display:block; width:100%; height:auto; max-height:460px; overflow:visible;} .note-drawing figcaption{margin-top:8px; font-size:.8rem; color:var(--text-dim); text-align:center;} .note-body .katex-display{margin:12px 0; overflow-x:auto; overflow-y:hidden;} .note-body .katex{font-size:1.05em;} /* Real /
 from structure_note() (see
     templates.COMMON_SYSTEM) — new alongside the existing HTML tags/LaTeX.
     Tables get wrapped in .table-scroll by wrapTablesForScroll() (a plain
can't safely take overflow-x itself without breaking its own layout mode) so a wide table scrolls sideways inside its own lane instead of blowing out the card. */ .table-scroll{overflow-x:auto; margin:12px 0;} .note-body table{white-space:normal; border-collapse:collapse; width:100%; font-size:0.86rem; margin:0;} .note-body th, .note-body td{padding:7px 10px; border:1px solid var(--panel-border); text-align:left; vertical-align:top;} .note-body th{background:var(--panel-bg-strong); font-weight:700; color:var(--text); white-space:nowrap;} .note-body tr:nth-child(even) td{background:color-mix(in srgb, var(--panel-bg-strong) 45%, transparent);} .note-body pre.mermaid{ white-space:normal; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:16px; padding:16px 10px; margin:14px 0; overflow-x:auto; display:flex; justify-content:center; font-family:inherit; } .note-body pre.mermaid svg{max-width:100%; height:auto;} .note-body pre.mermaid.loading{min-height:60px; align-items:center; color:var(--text-faint); font-size:0.82rem;} /* AI-applied colored highlight — a rare, deliberate accent (see templates.COMMON_SYSTEM's "ВЫДЕЛЕНИЕ ЦВЕТОМ"), styled like a marker stroke behind the text rather than a solid highlighter block. Also applies inside .note-thumb-inner (the shrunk note-card previews) since those reuse the same .note-body markup. */ .note-body mark, .note-thumb-inner mark{background:none; color:inherit; padding:0.04em 0.22em; border-radius:5px; box-decoration-break:clone; -webkit-box-decoration-break:clone;} .note-body mark.hl-y, .note-thumb-inner mark.hl-y{background:color-mix(in srgb, var(--accent-yellow) 38%, transparent);} .note-body mark.hl-g, .note-thumb-inner mark.hl-g{background:color-mix(in srgb, var(--ev-green) 34%, transparent);} .note-body mark.hl-b, .note-thumb-inner mark.hl-b{background:color-mix(in srgb, var(--ev-cyan) 32%, transparent);} .note-body mark.hl-p, .note-thumb-inner mark.hl-p{background:color-mix(in srgb, var(--ev-pink) 30%, transparent);} /* Per-note "hide highlights" flag (note.marks_hidden) — keeps the marked text, just drops the colored background, rather than stripping the tags themselves (so turning it back on needs no re-generation). No UI toggle for this right now (used to live in the removed edit form) — the field/class still work, just nothing sets them yet. */ .note-body.marks-off mark{background:none !important;} .photo-lightbox{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,0.88); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; padding:24px; } .photo-lightbox.open{opacity:1; pointer-events:auto;} .photo-lightbox img{max-width:100%; max-height:100%; border-radius:16px; box-shadow:0 30px 70px -20px rgba(0,0,0,0.7); transform:scale(.92); transition:transform .25s cubic-bezier(.22,1.1,.36,1);} .photo-lightbox.open img{transform:scale(1);} .row{display:flex; gap:8px; margin-top:10px;} .btn{ flex:1; text-align:center; padding:11px; border-radius:20px; border:1px solid var(--panel-border); background:var(--panel-bg-strong); color:var(--text); font-family:'Unbounded'; font-size:0.85rem; font-weight:700; cursor:pointer; backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); box-shadow:0 6px 16px -8px rgba(0,0,0,0.5); transition:transform .15s ease; } .btn:active{transform:scale(.97);} .btn.danger{color:var(--danger);} .btn.primary{ background:var(--accent-2-dark); color:var(--btn-text); border:none; box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent-2-dark) 55%, transparent); } .field{width:100%; max-width:100%; min-width:0; box-sizing:border-box; display:block; background:var(--pill-bg); border:1px solid var(--panel-border); border-radius:14px; color:var(--text); font-family:inherit; font-size:16px; padding:11px 13px; margin-top:8px; -webkit-appearance:none; appearance:none;} textarea.field{min-height:70px; resize:vertical;} input[type="date"].field{font-family:inherit;} input[type="time"].field{font-family:inherit; height:44px; padding:0 13px; display:flex; align-items:center; -webkit-appearance:none; appearance:none;} .back{font-family:'Unbounded'; font-weight:700; font-size:0.82rem; color:var(--accent-2); cursor:pointer; margin-bottom:10px; display:inline-block;} /* only ever used for the note-detail "К трекеру" back link — a bit bigger than the shared .back default, with a real chevron icon instead of a bare unicode arrow character. */ #back-to-notes, #back-to-notes-all, #back-from-note-folder, #ai-note-close{font-size:0.95rem; display:inline-flex; align-items:center; gap:5px;} #back-to-notes svg, #back-to-notes-all svg, #back-from-note-folder svg, #ai-note-close svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none;} .tpl-item{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:14px; cursor:pointer;} .tpl-item:active{background:var(--panel-bg-strong);} .tpl-dot{width:8px; height:8px; border-radius:50%; background:var(--panel-border); flex:none;} .tpl-dot.active{background:var(--accent);} .week-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;} .cal-day-nav-left{display:flex; align-items:center; gap:6px; flex:none;} #cal-day-card .cal-day-label{flex:1; text-align:center;} #cal-3day-card .week-range, #cal-week-card .week-range{flex:1; text-align:center;} .week-arrow{width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--panel-bg-strong); border:1px solid var(--panel-border); cursor:pointer; font-size:1rem; color:var(--text); user-select:none; transition:transform .15s ease;} .week-arrow:active{transform:scale(.9);} .week-range{font-size:1rem; color:var(--text);} /* ---------- Главная (redesigned) ---------- */ .home-top-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;} .home-notif-btn{position:relative;} .home-notif-dot{ position:absolute; top:9px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--danger); border:2px solid var(--bg); opacity:0; transform:scale(.4); transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); } .home-notif-dot.show{opacity:1; transform:scale(1);} .home-hero{padding:10px 6px 26px; text-align:center;} .home-tagline{ font-family:'Unbounded'; font-weight:700; font-size:1.36rem; line-height:1.32; color:var(--text); max-width:420px; margin:0 auto; } /* Retriggered from JS (remove class, force reflow, re-add — same pattern as .home-pulse/.mic-pulse elsewhere) every time Главная is entered and a new random line is picked, not baked into the base rule (which would only ever play once, on the element's first paint). */ .home-tagline.pulse-in{animation:homeTaglineIn .62s cubic-bezier(.22,1,.36,1);} @keyframes homeTaglineIn{ 0%{opacity:0; transform:translateY(14px) scale(.94); filter:blur(6px);} 100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0);} } /* Full 4-color gradient ring (same stops as the logo's sparkle/the Агент tab icon), fixed in place (not spinning) — only the glow's intensity breathes. Built like the real AI chat's ring (mask a gradient down to just the outer padding-box edge via content-box + exclude). overflow:visible (overriding .glass's own overflow:hidden) so that glow isn't clipped. */ .home-agent-quick{ position:relative; z-index:1; overflow:visible; --beam-angle:0deg; display:flex; align-items:center; gap:8px; padding:6px 6px 6px 18px; margin-bottom:16px; box-shadow:0 16px 36px -20px rgba(0,0,0,0.55); -webkit-tap-highlight-color:transparent; /* A fixed radius, not 999px — at one line's height (~50px) this still clamps to a full pill (30px is already past the half-height needed for that), the exact same way .agent-pill's own fixed 30px does. Once the field grows past one line the box gets taller while this number stays put, so it gradually reads as a rounded rectangle purely as a side effect of the height changing — no separate class/transition needed, and no border-radius:999px→26px snap (animating a transition away from 999px barely moves for most of its duration, since the rendered radius stays clamped until the interpolated number finally drops near the box's own half-height — that dead time then a sudden catch-up right at the end was the "not smooth" jump). */ border-radius:30px; } .home-agent-quick::after{ content:''; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:2px; background:linear-gradient(120deg, var(--ev-green), var(--ev-cyan), var(--ev-pink), var(--ev-purple)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; animation:homeAgentGlowBreathe 4s ease-in-out infinite; opacity:1; transition:opacity .45s ease; } @keyframes homeAgentGlowBreathe{ 0%,100%{filter:drop-shadow(0 0 5px rgba(82,230,160,.4));} 50%{filter:drop-shadow(0 0 9px rgba(157,107,255,.45));} } /* Tapping into the field: the calm full ring crossfades into the same traveling colored beam the real agent composer's own field uses (.agent-pill::after, reusing its beamRotate keyframe). A separate layer (::before is already .glass's own sheen overlay, so this is a real child span) rather than swapping ::after's background directly — a linear-gradient can't be transitioned into a conic-gradient, so cross-fading two always-present layers by opacity is what makes the switch itself look smooth instead of snapping. It keeps rotating at opacity:0 while idle, so fading it in never shows a jump-start either. */ .home-agent-beam{ position:absolute; inset:0; z-index:2; border-radius:inherit; padding:2px; background:conic-gradient(from var(--beam-angle), transparent 0deg, transparent 250deg, var(--ev-green) 275deg, var(--ev-cyan) 300deg, var(--ev-pink) 325deg, var(--ev-purple) 350deg, transparent 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; filter:drop-shadow(0 0 7px rgba(130,120,255,0.5)); animation:beamRotate 4.5s linear infinite; opacity:0; transition:opacity .45s ease; } .home-agent-quick:focus-within::after{opacity:0;} .home-agent-quick:focus-within .home-agent-beam{opacity:1;} .home-agent-input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:0.95rem; font-weight:600; padding:10px 0; -webkit-tap-highlight-color:transparent; line-height:1.35; resize:none; overflow-y:hidden; display:block; transition:height .22s cubic-bezier(.22,1,.36,1); } .home-agent-input:focus, .home-agent-input:focus-visible{outline:none;} .home-agent-input::placeholder{color:var(--text-faint); font-weight:600;} .home-agent-expand, .home-agent-send{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease; } .home-agent-expand{color:var(--text-dim);} .home-agent-expand svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} .home-agent-expand:active{transform:scale(.9); background:var(--panel-bg-strong);} /* Colorless until there's actually something to send — same idea as the real composer's own #agent-send (.mic-mode ⇄ .primary toggle via updateSendButtonMode()): an empty send button has nothing to *do* yet, so it stays quiet; typing something gives it the exact same solid --accent-2-dark treatment #agent-send gets once it has content. .has-text is toggled from JS on the input's "input" event. */ .home-agent-send{ background:transparent; box-shadow:none; color:var(--text-dim); border:1.5px solid var(--panel-border-strong); transition:background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; } .home-agent-send.has-text{ background:var(--accent-2-dark); box-shadow:0 8px 18px -8px color-mix(in srgb, var(--accent-2-dark) 60%, transparent); border-color:transparent; color:var(--btn-text); } .home-agent-send svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;} .home-agent-send:active{transform:scale(.9);} .home-actions-row{display:flex; gap:12px; margin-top:14px;} .home-action-card{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px 10px; border-radius:22px; cursor:pointer; text-align:center; transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; } .home-action-card:active{transform:scale(.96);} .home-action-icon{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;} .home-action-icon svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} .home-action-label{font-family:'Unbounded'; font-weight:700; font-size:0.85rem; line-height:1.3; color:var(--text);} /* Import picks its file and uploads right from Главная now (no more bouncing over to Трекер first to do that) — while it's working, the icon swaps for a spinner and the card stops responding to taps, so there's still visible feedback during the upload+transcribe wait even though the busy state (showProcessingUI) technically lives on the now off-screen Трекер panel. */ .home-action-spinner{ display:none; width:20px; height:20px; border-radius:50%; border:2.5px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color:currentColor; animation:recSpin .8s linear infinite; } .home-action-card.loading{pointer-events:none;} .home-action-card.loading .home-action-icon svg{display:none;} .home-action-card.loading .home-action-spinner{display:block;} /* Blue (record) + pink (import) — both also show up in the AI pill's own gradient above, so they echo it instead of reading as unrelated app colors. */ .home-action-record{ background:color-mix(in srgb, var(--accent-2) 22%, var(--panel-bg)); border-color:color-mix(in srgb, var(--accent-2) 42%, var(--panel-border)); } .home-action-record .home-action-icon{background:color-mix(in srgb, var(--accent-2) 38%, transparent); color:var(--accent-2);} .home-action-import{ background:color-mix(in srgb, var(--accent-pink) 22%, var(--panel-bg)); border-color:color-mix(in srgb, var(--accent-pink) 42%, var(--panel-border)); } .home-action-import .home-action-icon{background:color-mix(in srgb, var(--accent-pink) 38%, transparent); color:var(--accent-pink);} .notifications-empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:18px 8px 6px;} .notifications-empty-logo{ width:104px; height:104px; object-fit:contain; margin-bottom:18px; filter:drop-shadow(0 0 22px color-mix(in srgb, var(--accent-3) 45%, transparent)); animation:notifEmptyFloat 5s ease-in-out infinite; } /* brightness(0) first (blackens the line art), *then* the colored glow — the other way round, brightness(0) would also blacken the glow itself since it darkens everything already rendered by that point in the filter chain. */ :root[data-theme="light"] .notifications-empty-logo{filter:brightness(0) drop-shadow(0 0 22px color-mix(in srgb, var(--accent-3) 30%, transparent));} @keyframes notifEmptyFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} } .notifications-empty h3{font-size:1.05rem; margin-bottom:6px;} .notifications-empty .meta{max-width:280px;} .notification-row{display:flex; align-items:flex-start; gap:12px; padding:13px 4px; border-bottom:1px solid var(--panel-border);} .notification-row:last-child{border-bottom:none;} .notification-row-icon{ flex:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent-3) 22%, var(--panel-bg)); color:var(--accent-3); } .notification-row-icon svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} .notification-row-body{flex:1; min-width:0;} .notification-row-body h3{font-size:0.88rem; margin-bottom:2px;} .notification-row.unread .notification-row-body h3::after{content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--danger); margin-left:7px; vertical-align:middle;} .agent-log{display:flex; flex-direction:column; gap:14px; margin-bottom:14px;} .agent-msg{font-size:0.86rem; line-height:1.5; animation:msgIn .3s cubic-bezier(.2,.8,.2,1);} .agent-msg.user{align-self:flex-end; max-width:85%; padding:9px 13px; border-radius:14px; background:var(--accent-2); color:var(--btn-text); font-weight:600; border-bottom-right-radius:4px;} .agent-msg.reply{align-self:stretch; width:100%; color:var(--text);} @keyframes msgIn{ from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} } .typing-dots{display:inline-flex; gap:3px; align-items:center; padding:3px 0;} .typing-dots span{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; animation:typingBounce 1.1s ease-in-out infinite;} .typing-dots span:nth-child(2){animation-delay:.15s;} .typing-dots span:nth-child(3){animation-delay:.3s;} @keyframes typingBounce{ 0%,60%,100%{transform:translateY(0); opacity:.35;} 30%{transform:translateY(-4px); opacity:1;} } .agent-attach-preview{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; background:var(--panel-bg); border:1px solid var(--panel-border); margin-bottom:8px; animation:msgIn .25s ease;} .agent-attach-preview span{flex:1; font-size:0.78rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .agent-attach-remove{color:var(--text-faint); cursor:pointer; font-size:1rem; flex:none; line-height:1;} .agent-composer{ display:none; position:fixed; left:50%; transform:translateX(calc(-50% + var(--drawer-shift, 0px))) translateY(18px) scale(.96); bottom:calc(14px + env(safe-area-inset-bottom)); width:100%; max-width:608px; padding:0 16px; z-index:45; opacity:0; transition:bottom .25s ease, transform .32s cubic-bezier(.2,.8,.2,1), opacity .26s ease; } .agent-composer.visible{display:block;} /* Entrance/exit — synced with #panel-agent's own .show (see switchTab): the tabbar hands off to this growing in from just below its own resting spot as the tab bar itself slides away, instead of the composer just popping into existence the instant display switched to block. */ .agent-composer.visible.show{ transform:translateX(calc(-50% + var(--drawer-shift, 0px))) translateY(0) scale(1); opacity:1; } #panel-agent{padding-bottom:92px; padding-top:18px;} .tempchat-banner{display:none; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:var(--panel-bg); border:1px solid var(--panel-border); color:var(--text-dim); font-size:0.78rem; font-weight:600; margin-bottom:14px;} .tempchat-banner.visible{display:flex;} .tempchat-banner svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; flex:none;} .tempchat-overlay{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,0.55); display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity .25s ease;} .tempchat-overlay.open{opacity:1; pointer-events:auto;} .tempchat-sheet{width:100%; background:var(--bg); border-radius:26px 26px 0 0; padding:24px 20px calc(22px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);} .tempchat-overlay.open .tempchat-sheet{transform:translateY(0);} .tempchat-sheet-icon{ position:relative; overflow:hidden; width:48px; height:48px; border-radius:50%; background:var(--pill-bg); border:1px solid var(--panel-border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 6px 16px -8px rgba(0,0,0,0.55); } .tempchat-sheet-icon svg{position:relative; width:24px; height:24px; stroke:var(--text); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} .tempchat-sheet h3{font-size:1.2rem; margin-bottom:18px;} .tempchat-row{display:flex; align-items:flex-start; gap:13px; margin-bottom:18px;} .tempchat-row svg{width:19px; height:19px; stroke:var(--text-dim); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; margin-top:2px;} .tempchat-row b{display:block; font-size:0.9rem; margin-bottom:2px;} .tempchat-row span{font-size:0.8rem; color:var(--text-dim); line-height:1.45;} .tempchat-cta{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; width:100%; padding:13px; border-radius:24px; cursor:pointer; background:var(--accent-2-dark); color:var(--btn-text); font-size:0.92rem; font-weight:700; border:none; box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent-2-dark) 55%, transparent); } .tempchat-cta span{position:relative;} .event-sheet{max-height:82vh; overflow-y:auto; touch-action:pan-y;} .event-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;} .event-sheet-head h3{margin-bottom:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ev-details-head-left{display:flex; align-items:center; gap:10px; min-width:0;} .event-sheet-close{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel-bg-strong); border:1px solid var(--panel-border); cursor:pointer; transition:transform .15s ease;} .event-sheet-close:active{transform:scale(.9);} .event-sheet-close svg{width:15px; height:15px; stroke:var(--text-dim); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} .ev-details-dot{display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:9px; vertical-align:middle; flex:none;} .ev-type-icon{width:9px; height:9px; flex:none; margin-right:4px; vertical-align:-1px;} .ev-type-icon.type-task, .ev-type-icon.type-reminder{stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;} .ev-type-icon.type-event{fill:currentColor; stroke:none;} .ev-type-icon.done{width:11px; height:11px;} .ev-type-icon.overdue{width:11px; height:11px;} .pill-dropdown-item.ev-type-item .ev-type-icon{width:13px; height:13px; margin-right:7px; vertical-align:-2px;} #ev-details-body .tempchat-row .ev-type-icon{width:19px; height:19px; margin-right:0; margin-top:2px; vertical-align:baseline;} .ev-details-done-btn{margin-top:8px;} .ev-details-done-btn.done{background:#2fae6f;} .ev-details-important{display:flex; align-items:center; gap:6px; font-size:0.74rem; font-weight:700; color:#ff2d2d; margin:-6px 0 16px;} #cal-search-sheet{max-height:82vh; overflow-y:auto;} #cal-search-results{margin-top:14px; display:flex; flex-direction:column; gap:8px;} .cal-search-row{display:flex; align-items:stretch; gap:10px; cursor:pointer;} .cal-search-date{ flex:none; width:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--font-text); color:var(--text-dim); text-align:center; } .cal-search-date b{font-family:'Unbounded'; font-weight:700; font-size:1.15rem; color:var(--text); line-height:1.1;} .cal-search-date span{font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;} .cal-search-bar{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; border-radius:14px; padding:10px 12px; color:var(--btn-text); transition:filter .15s ease; } .cal-search-bar:active{filter:brightness(0.92);} .cal-search-bar .ev-type-icon{width:14px; height:14px; margin-right:0; flex:none;} .cal-search-bar-text{flex:1; min-width:0;} .cal-search-title{font-size:0.84rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cal-search-desc{font-size:0.72rem; font-weight:500; opacity:0.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px;} .cal-search-locate-btn{ flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.16); cursor:pointer; transition:transform .15s ease; } .cal-search-locate-btn:active{transform:scale(.88);} .cal-search-locate-btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;} #ev-details-body .tempchat-row b{white-space:pre-wrap; font-weight:600;} .event-sheet .pill-dropdown-wrap{display:block; margin-top:14px;} .event-sheet .pill-dropdown-btn{width:100%; justify-content:space-between;} .event-sheet .ev-date-row{margin-top:14px;} .event-sheet #ev-location{margin-top:14px;} .ev-date-row{display:flex; gap:8px; margin-top:8px;} .ev-date-field{flex:1; min-width:0;} .ev-date-field label{font-family:var(--font-text); font-weight:700; font-size:0.62rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:3px;} .ev-toggle{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:0.86rem; font-weight:600; cursor:pointer; color:var(--text);} .ev-toggle input{width:18px; height:18px; accent-color:var(--accent-2-dark);} .ev-color-row{display:flex; gap:12px; margin-top:8px;} .ev-color-dot{width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s ease, border-color .15s ease; flex:none;} .ev-color-dot.selected{border-color:var(--text); transform:scale(1.08);} .ev-color-dot[data-color="green"]{background:var(--ev-green);} .ev-color-dot[data-color="cyan"]{background:var(--ev-cyan);} .ev-color-dot[data-color="pink"]{background:var(--ev-pink);} .ev-color-dot[data-color="purple"]{background:var(--ev-purple);} .ev-color-dot[data-color="blue"]{background:var(--ev-blue);} .cal-drawer-overlay{position:fixed; inset:0; z-index:75; background:rgba(0,0,0,0.55); opacity:0; pointer-events:none; transition:opacity .3s ease;} .cal-drawer-overlay.open{opacity:1; pointer-events:auto;} .cal-drawer{ position:fixed; top:0; bottom:0; left:0; width:min(86vw, 340px); z-index:76; background:var(--bg); padding:var(--tg-safe-top) 16px 18px; display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); overflow-y:auto; touch-action:pan-y; } .cal-drawer.open{transform:translateX(0);} .cal-list-item{display:flex; align-items:center; gap:12px; padding:11px 8px; border-radius:12px; cursor:pointer; color:var(--text); font-size:0.9rem; font-weight:600;} .cal-list-item:active, .cal-list-item.active{background:var(--pill-bg);} .cal-dot-badge{width:11px; height:11px; border-radius:50%; flex:none;} .cal-list-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cal-list-count{font-size:0.7rem; color:var(--text-faint); font-weight:600; flex:none;} .cal-member-row{display:flex; align-items:center; gap:10px; padding:9px 8px;} .cal-member-name{flex:1; min-width:0; font-size:0.86rem; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cal-member-role{font-size:0.68rem; color:var(--text-faint); font-weight:600; flex:none;} .cal-member-remove{color:var(--danger); cursor:pointer; font-size:0.78rem; font-weight:700; flex:none; margin-left:4px;} #cal-drawer-btn svg{transform:translateY(1.5px);} .cal-scroll{display:flex; align-items:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y;} .cal-scroll::-webkit-scrollbar{display:none;} .cal-scroll-slide{flex:0 0 100%; min-width:100%; box-sizing:border-box; scroll-snap-align:start; scroll-snap-stop:always;} .cal-agenda-chip{padding:7px 11px; border-radius:9px; font-size:0.8rem; font-weight:700; color:var(--btn-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;} .cal-day-label{text-transform:capitalize;} .cal-tg-wrap{display:flex; flex-direction:column;} .cal-tg-axis-spacer{flex:0 0 38px;} .cal-tg-header{display:flex; position:relative;} .cal-tg-head-cols{display:flex; flex:1; min-width:0;} .cal-tg-daycol-head{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:1px; cursor:pointer; padding-bottom:6px;} .cal-tg-dow{font-family:'Unbounded'; font-weight:700; font-size:0.6rem; color:var(--text-faint); text-transform:uppercase;} .cal-tg-num-row{display:flex; align-items:center; gap:3px;} .cal-tg-num{font-family:'Unbounded'; font-weight:700; font-size:0.98rem; color:var(--text);} .cal-tg-daycol-head.today .cal-tg-num{color:var(--accent-2-dark);} .cal-tg-allday{display:flex; position:absolute; top:100%; left:0; right:0; z-index:3; background:var(--pill-bg); border-bottom:1px solid var(--panel-border); padding-bottom:6px; margin-bottom:2px;} .cal-tg-allday-track{position:relative; flex:1; min-width:0;} .cal-tg-allday-bar{ position:absolute; box-sizing:border-box; border-radius:6px; padding:3px 6px; overflow:hidden; cursor:pointer; display:flex; align-items:center; font-size:0.62rem; font-weight:700; color:var(--btn-text); white-space:normal; word-break:break-word; overflow-wrap:break-word; hyphens:auto; line-height:1.15; } .cal-tg-allday-bar.continues::after{content:''; position:absolute; right:0; top:0; bottom:0; width:8px; background:linear-gradient(90deg, transparent, rgba(0,0,0,0.25));} .cal-tg-body{display:flex; overflow-y:auto; max-height:520px; position:relative;} .cal-tg-axis{flex:0 0 38px; position:relative;} .cal-tg-hour-label{position:absolute; left:0; right:4px; text-align:right; font-family:var(--font-text); font-weight:700; font-size:0.6rem; color:var(--text-faint); transform:translateY(-50%); pointer-events:none;} .cal-tg-grid{flex:1; min-width:0; display:flex; position:relative;} .cal-tg-col{flex:1; min-width:0; position:relative; border-left:1px solid var(--panel-border); cursor:pointer;} .cal-tg-event{ position:absolute; box-sizing:border-box; border-radius:8px; padding:3px 6px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; color:var(--btn-text); border:1px solid rgba(255,255,255,0.18); transition:filter .15s ease; } .cal-tg-event:active{filter:brightness(0.92);} .cal-tg-event-title{font-size:0.68rem; font-weight:700; overflow:hidden; white-space:normal; word-break:break-word; overflow-wrap:break-word; hyphens:auto; line-height:1.18;} .cal-tg-event-time{font-size:0.58rem; font-weight:600; opacity:0.9; order:-1;} .cal-tg-event-desc{font-size:0.58rem; font-weight:500; opacity:0.85; overflow:hidden; white-space:normal; word-break:break-word; overflow-wrap:break-word; line-height:1.2; margin-top:1px;} .cal-tg-now{position:absolute; left:0; right:0; height:2px; background:var(--ev-pink); z-index:5; pointer-events:none;} .cal-tg-now::before{content:''; position:absolute; left:-4px; top:-4px; width:9px; height:9px; border-radius:50%; background:var(--ev-pink);} .cal-grid-row{display:flex; align-items:flex-start; min-width:0;} .cal-grid-axis-col{flex:0 0 38px; height:520px; overflow:hidden; position:relative;} .cal-grid-axis-inner{position:relative;} .cal-grid-row .cal-scroll{flex:1; min-width:0;} @property --beam-angle{ syntax:''; inherits:false; initial-value:0deg; } .agent-pill{ position:relative; --beam-angle:0deg; display:flex; flex-direction:column; gap:6px; background:var(--pill-bg); border:1px solid var(--panel-border); border-radius:30px; padding:10px 10px 8px; backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6); box-shadow:0 20px 44px -18px rgba(0,0,0,0.6); z-index:1; } .agent-pill::after{ content:''; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:2px; background:conic-gradient(from var(--beam-angle), transparent 0deg, transparent 250deg, #52e6a0 275deg, #37c9ff 300deg, #ff5fc9 325deg, #9d6bff 350deg, transparent 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; filter:drop-shadow(0 0 5px rgba(130,120,255,0.4)); animation:beamRotate 5.5s linear infinite; } @keyframes beamRotate{ from{ --beam-angle:0deg; } to{ --beam-angle:360deg; } } .agent-pill-top{display:flex; align-items:flex-end; gap:6px;} .agent-pill-field{ position:relative; flex:1; min-width:0; border:none; background:transparent; box-shadow:none; padding:10px 6px; margin:0; font-size:16px; font-family:inherit; line-height:1.35; resize:none; overflow-y:hidden; display:block; transition:height .22s cubic-bezier(.22,1,.36,1); } /* #agent-input also carries .field — textarea.field's own min-height/resize (for the multi-line note-edit box elsewhere) has higher specificity (element+class beats a single class) and would otherwise win over the two rules above, undoing the "start at one line, no drag handle" that the messenger-style auto-grow needs. */ #agent-input.field{min-height:0; resize:none;} .agent-pill-field:focus, .agent-pill-field:focus-visible{outline:none;} .agent-pill-bottom{display:flex; align-items:center; gap:6px;} .agent-pill-send{margin-left:auto;} .agent-round-btn{ position:relative; overflow:hidden; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; background:var(--pill-bg); border:1px solid var(--panel-border); color:var(--text); cursor:pointer; backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); box-shadow:0 6px 16px -8px rgba(0,0,0,0.55); transition:background .2s, transform .15s ease, color .2s; touch-action:none; } .agent-round-btn:active{transform:scale(.92);} .agent-round-btn svg{position:relative; width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} #temp-chat-btn .tc-icon-active{display:none;} #temp-chat-btn.active{color:var(--accent-2);} #temp-chat-btn.active .tc-icon-default{display:none;} #temp-chat-btn.active .tc-icon-active{display:block;} .agent-round-btn.primary{background:var(--accent-2-dark); border:none; color:var(--btn-text);} .agent-round-btn.primary svg{fill:none; stroke:var(--btn-text); stroke-width:2.4;} .agent-pill .agent-round-btn{background:transparent; border:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;} .agent-pill .agent-round-btn::before{content:none;} .agent-pill .agent-round-btn.primary{ background:var(--accent-2-dark); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent-2-dark) 60%, transparent); } .pill-dropdown-wrap{position:relative;} .pill-dropdown-btn{ display:inline-flex; align-items:center; gap:5px; padding:9px 13px; border-radius:18px; background:var(--panel-bg-strong); border:1px solid var(--panel-border); color:var(--text); font-size:0.82rem; font-weight:600; cursor:pointer; user-select:none; } .pill-dropdown-btn svg{width:13px; height:13px; stroke:var(--text-dim); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; flex:none;} .pill-dropdown-wrap.open .pill-dropdown-btn svg{transform:rotate(180deg);} .pill-dropdown-menu{ position:absolute; left:0; bottom:calc(100% + 10px); min-width:150px; z-index:10; background:var(--panel-bg-strong); border:1px solid var(--panel-border); border-radius:16px; padding:5px; box-shadow:0 20px 44px -16px rgba(0,0,0,0.55); opacity:0; pointer-events:none; transform:translateY(6px) scale(.96); transform-origin:bottom left; transition:opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1); } .pill-dropdown-wrap.open .pill-dropdown-menu{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);} .pill-dropdown-item{padding:9px 12px; border-radius:10px; font-size:0.86rem; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap;} .pill-dropdown-item:active, .pill-dropdown-item.drag-hover{background:var(--panel-bg);} .pill-dropdown-item.selected{color:var(--accent-2-dark);} .upload-choice-row{display:flex; align-items:center; gap:14px; padding:13px 4px; cursor:pointer; border-top:1px solid var(--panel-border);} .upload-choice-row:first-of-type{border-top:none;} .upload-choice-row:active{background:var(--panel-bg);} .upload-choice-row svg{width:24px; height:24px; flex:none; stroke:var(--accent-2-dark); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} .upload-choice-title{font-weight:700; font-size:0.94rem; color:var(--text);} .upload-choice-sub{font-size:0.78rem; color:var(--text-dim); margin-top:1px;} .agent-record-bar{display:flex; align-items:center; gap:10px; height:38px;} /* The pulse itself animates transform+box-shadow, not opacity — opacity is left free for .paused (below, and #rec-float-bar.paused/ .note-toolbar-timer.paused) to fade smoothly on its own. Animating opacity in both the keyframes AND a plain paused-state transition was fighting itself: animation-play-state:paused only freezes the animation at whatever opacity it happened to be mid-pulse, and a still -active (if frozen) animation keeps overriding any transition trying to move that same property — so the "fade to translucent on pause" transition never actually got to play. */ /* color (not just background) so the keyframes' own currentColor-based glow always matches the dot's actual fill, in whichever context it's used. */ .rec-dot{width:10px; height:10px; border-radius:50%; background:var(--danger); color:var(--danger); flex:none; opacity:1; transition:opacity .25s ease; animation:recPulse 1.1s ease-in-out infinite;} @keyframes recPulse{ 0%, 100%{transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, currentColor 50%, transparent);} 50%{transform:scale(1.2); box-shadow:0 0 5px 1px color-mix(in srgb, currentColor 35%, transparent);} } .rec-timer{font-size:0.85rem; color:var(--text); flex:none;} .rec-hint{font-size:0.74rem; color:var(--text-faint); flex:1; transition:color .2s;} .rec-hint.locked{color:var(--accent-2);} .cal-card{touch-action:pan-y;} :is(#panel-deadlines, #dl-window) .week-arrow{width:42px; height:42px; border-radius:50%; font-size:1.15rem;} :is(#panel-deadlines, #dl-window) .week-arrow.cal-day-back{background:var(--accent-2-dark); border:none; color:var(--btn-text);} :is(#panel-deadlines, #dl-window) .week-arrow svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; display:block; flex:none;} /* Match the calendar-picker button's color to the paging arrows sitting next to it (agent-round-btn's own --pill-bg reads slightly differently). */ #cal-drawer-btn{background:var(--panel-bg-strong);} #cal-drawer-btn:active{transform:scale(.92);} /* The filter button's icon rotates 180° when its dropdown opens (it's a .pill-dropdown-btn); the calendar-picker icon is on a plain .agent-round-btn so it never got that same rule — add it explicitly here. */ #cal-drawer-btn svg{transition:transform .25s ease;} #cal-drawer-wrap.open #cal-drawer-btn svg{transform:rotate(180deg);} /* Calendar-picker popup — same pill-dropdown-menu the view-switcher uses, just opening from the left edge (drawer button sits on the left of the nav row). */ #cal-drawer-wrap{flex:none;} #cal-drawer-wrap .pill-dropdown-menu{left:0; right:auto; bottom:auto; top:calc(100% + 10px); transform-origin:top left; transform:translateY(-6px) scale(.96); min-width:170px;} #cal-drawer-wrap.open .pill-dropdown-menu{transform:translateY(0) scale(1);} /* View-switcher (Month/Week/3-day/Day) becomes an icon-only round button once it's relocated into a nav row, matching the paging arrows next to it. */ #cal-view-wrap{flex:none;} #cal-view-wrap #cal-view-btn{ width:42px; height:42px; border-radius:50%; padding:0; justify-content:center; touch-action:none; } #cal-view-wrap #cal-view-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none;} #cal-view-label{display:none;} #cal-view-wrap .pill-dropdown-menu{left:auto; right:0; bottom:auto; top:calc(100% + 10px); transform-origin:top right; transform:translateY(-6px) scale(.96);} #cal-view-wrap.open .pill-dropdown-menu{transform:translateY(0) scale(1);} /* Month and Day already use smaller (34px) paging arrows — match that size when the drawer/view-switcher buttons land there too. */ #cal-month-card #cal-drawer-btn, #cal-day-card #cal-drawer-btn, #cal-month-card #cal-view-wrap #cal-view-btn, #cal-day-card #cal-view-wrap #cal-view-btn{ width:34px; height:34px; } #cal-month-card #cal-drawer-btn svg, #cal-day-card #cal-drawer-btn svg{width:18px; height:18px;} #cal-month-card #cal-view-wrap #cal-view-btn svg, #cal-day-card #cal-view-wrap #cal-view-btn svg{width:16px; height:16px;} #cal-month-card, #cal-week-card, #cal-3day-card, #cal-day-card{padding:14px 10px 18px;} .cal-month-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;} .cal-month-label{font-family:'Unbounded'; font-weight:700; font-size:1rem; text-transform:capitalize;} .cal-month-label, .cal-day-label, .week-range{ display:inline-flex; align-items:center; justify-content:center; padding:8px 15px; border-radius:16px; background:var(--panel-bg-strong); border:1px solid var(--panel-border); cursor:pointer; user-select:none; } /* Month and Day get a more compact nav row (smaller arrows + tighter label padding) to match how the Week/3-day calendars already look. */ #cal-month-card .week-arrow, #cal-day-card .week-arrow{width:34px; height:34px;} #cal-month-card .week-arrow svg, #cal-day-card .week-arrow svg{width:18px; height:18px;} #cal-month-card .cal-month-label, #cal-day-card .cal-day-label{padding:7px 13px; font-size:1rem;} .cal-month-dow-row{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:1px; margin-bottom:8px;} .cal-month-dow-row span{text-align:center; font-size:0.66rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.03em;} .cal-month-grid{display:flex; flex-direction:column; gap:1px; background:var(--panel-border); border-radius:10px; overflow:hidden;} .cal-month-row{position:relative; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:1px; background:var(--panel-border);} .cal-cell{position:relative; background:var(--panel-bg-strong); min-height:102px; min-width:0; padding:6px 5px 4px; box-sizing:border-box; cursor:pointer; user-select:none;} .cal-cell.today{background:color-mix(in srgb, var(--accent-2-dark) 8%, var(--panel-bg-strong));} /* Pulses twice, then eases out to nothing on its own — the JS clears the highlight state right as this finishes, so there's no abrupt cut like there was pulsing forever at full opacity until the moment it got removed. */ .cal-cell.highlight{border-radius:8px; animation:calHighlightPulse 2.6s ease-in-out forwards;} @keyframes calHighlightPulse{ 0%{box-shadow:inset 0 0 0 2px var(--accent-2-dark);} 19%{box-shadow:inset 0 0 0 2px transparent;} 38%{box-shadow:inset 0 0 0 2px var(--accent-2-dark);} 57%{box-shadow:inset 0 0 0 2px transparent;} 76%{box-shadow:inset 0 0 0 2px var(--accent-2-dark);} 100%{box-shadow:inset 0 0 0 2px transparent;} } .cal-cell-num-row{display:flex; align-items:center; justify-content:center; gap:4px;} .cal-cell-num{display:block; width:fit-content; font-family:var(--font-text); font-weight:700; font-size:0.78rem; color:var(--text); line-height:20px; text-align:center; border-radius:8px;} .cal-cell.dim .cal-cell-num{color:var(--text-faint);} .cal-cell.today .cal-cell-num{color:var(--text); background:color-mix(in srgb, var(--accent-2-dark) 35%, transparent); padding:0 4px;} .cal-cell-more{position:absolute; left:5px; bottom:4px; font-size:0.6rem; font-weight:700; color:var(--text-faint);} .cal-cell-important{flex:none; min-width:14px; height:14px; padding:0 3px; border-radius:8px; background:#ff2d2d; color:#fff; font-size:0.58rem; font-weight:800; box-sizing:border-box; display:flex; align-items:center; justify-content:center; line-height:1;} .cal-month-row .cal-bar{position:absolute; height:17px; border-radius:5px; display:flex; align-items:center; z-index:2; cursor:pointer; overflow:hidden; transition:transform .15s;} .cal-month-row .cal-bar:active{transform:scale(0.96);} .cal-month-row .cal-bar.continues::after{content:''; position:absolute; right:0; top:0; bottom:0; width:8px; background:linear-gradient(90deg, transparent, rgba(0,0,0,0.25));} .cal-month-row .cal-bar span{font-size:0.58rem; font-weight:700; color:var(--btn-text); padding:0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .cal-mini-sheet{padding-bottom:calc(20px + env(safe-area-inset-bottom));} .cal-mini-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;} .cal-mini-nav .week-arrow svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; display:block; flex:none;} .cal-mini-label{font-family:'Unbounded'; font-weight:700; font-size:1rem; text-transform:capitalize;} .cal-mini-dow-row{display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; margin-bottom:6px;} .cal-mini-dow-row span{text-align:center; font-size:0.6rem; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em;} .cal-mini-grid{display:flex; flex-direction:column; gap:1px; background:var(--panel-border); border-radius:10px; overflow:hidden;} .cal-mini-row{position:relative; display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; background:var(--panel-border);} .cal-mini-cell{position:relative; background:var(--panel-bg-strong); min-height:38px; padding:4px 2px 6px; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; user-select:none;} .cal-mini-cell.today{background:color-mix(in srgb, var(--accent-2-dark) 8%, var(--panel-bg-strong));} .cal-mini-cell.active-period{box-shadow:inset 0 0 0 2px var(--accent-2-dark); border-radius:8px;} .cal-mini-range-outline{position:absolute; top:0; bottom:0; box-shadow:inset 0 0 0 2px var(--accent-2-dark); border-radius:8px; pointer-events:none; z-index:1;} .cal-mini-num-row{display:flex; align-items:center; gap:3px;} .cal-mini-num{font-family:var(--font-text); font-weight:700; font-size:0.7rem; color:var(--text); line-height:18px; width:18px; text-align:center; border-radius:7px;} .cal-mini-cell.dim .cal-mini-num{color:var(--text-faint);} .cal-mini-cell.today .cal-mini-num{background:color-mix(in srgb, var(--accent-2-dark) 35%, transparent);} .cal-mini-important-dot{width:5px; height:5px; border-radius:50%; background:#ff2d2d; flex:none;} .cal-mini-row .cal-mini-bar{position:absolute; height:3px; border-radius:2px; z-index:2; pointer-events:none;} .cal-mini-month-pills{display:flex; gap:6px; overflow-x:auto; margin-top:14px; padding-bottom:2px; scrollbar-width:none;} .cal-mini-month-pills::-webkit-scrollbar{display:none;} .cal-mini-month-pill{flex:none; padding:7px 14px; border-radius:999px; background:var(--panel-bg-strong); border:1px solid var(--panel-border); font-size:0.76rem; font-weight:700; color:var(--text-dim); cursor:pointer; user-select:none; transition:background .15s, color .15s;} .cal-mini-month-pill.active{background:var(--accent-2-dark); color:var(--btn-text); border-color:transparent;} .dl-section-title{font-family:'Unbounded'; font-weight:700; font-size:0.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:18px 2px 8px;} .dl-section-title:first-child{margin-top:0;} .dl-card{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; margin-bottom:8px; cursor:pointer;} /* Overdue tasks are swipe-to-clear: the card itself slides left, and a trash icon underneath (spanning the same rounded box) fades/pops in on the right as it's revealed, so it's clear the swipe means delete. */ .dl-swipe-wrap{position:relative; margin-bottom:8px; border-radius:20px; overflow:hidden;} .dl-swipe-wrap .dl-card{margin-bottom:0;} .dl-swipe-trash{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:24px; background:var(--danger); border-radius:20px; } .dl-swipe-trash svg{ width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.5); transition:opacity .18s ease, transform .28s cubic-bezier(.34,1.56,.64,1); } .dl-swipe-trash.visible svg{opacity:1; transform:scale(1);} .dl-swipe-trash.armed svg{transform:scale(1.2);} .dl-dot{width:10px; height:10px; border-radius:50%; margin-top:6px; flex:none;} .dl-info{flex:1; min-width:0;} .dl-info h3{font-size:0.92rem;} .dl-badge{font-family:var(--font-text); font-weight:600; font-size:0.74rem; color:var(--text-faint); margin-top:3px; display:block;} .dl-desc{font-size:0.78rem; color:var(--text-dim); margin-top:4px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .dl-cal-badge{display:inline-flex; align-items:center; font-family:var(--font-text); font-weight:700; font-size:0.64rem; color:var(--text-dim); background:var(--panel-bg-strong); padding:2px 8px; border-radius:999px; margin-top:6px;} .dl-cal-badge.shared{color:var(--accent-2-dark);} .dl-cal-badge svg{width:11px; height:11px; margin-right:4px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} .pill-dropdown-item.disabled{color:var(--text-dim); opacity:.6;} .pill-dropdown-item small{display:block; font-weight:500; font-size:.72rem; color:var(--text-dim); white-space:normal;} .ev-people{margin:-2px 0 10px;} .ev-people-list{display:flex; flex-wrap:wrap; gap:6px;} .ev-person{padding:7px 12px; border-radius:999px; font-size:.8rem; font-weight:700; color:var(--text-dim); background:var(--pill-bg); border:1px solid var(--panel-border); cursor:pointer; transition:background .15s, color .15s;} .ev-person.selected{background:var(--accent-2-dark); border-color:var(--accent-2-dark); color:#fff;} .ev-people-empty{font-size:.8rem; color:var(--text-dim); line-height:1.4;} .ev-people-hint{font-size:.76rem; color:var(--text-dim); line-height:1.4; margin:8px 0 0;} .ev-people-hint b{font-family:'Space Mono', monospace; letter-spacing:.12em; color:var(--text);} .dl-code-input{font-family:'Space Mono', monospace; font-size:1.3rem; letter-spacing:.3em; text-align:center; text-transform:uppercase; margin:14px 0;} .ev-share-code{margin:12px 0 4px; padding:14px; border-radius:16px; background:var(--pill-bg); border:1px solid var(--panel-border); text-align:center;} .ev-share-code-label{font-size:.74rem; font-weight:600; color:var(--text-dim);} .ev-share-code-value{font-family:'Space Mono', monospace; font-size:1.6rem; font-weight:700; letter-spacing:.28em; margin:6px 0 10px; color:var(--text);} .ev-share-code-actions{display:flex; gap:8px;} .ev-share-code-actions .btn{flex:1; justify-content:center;} .dl-edit-btn{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel-bg-strong); border:1px solid var(--panel-border); margin-top:2px; transition:transform .15s ease;} .dl-edit-btn:active{transform:scale(.9);} .dl-edit-btn svg{width:15px; height:15px; stroke:var(--text-dim); fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;} .dl-locate-btn{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel-bg-strong); border:1px solid var(--panel-border); margin-top:2px; transition:transform .15s ease;} .dl-locate-btn:active{transform:scale(.9);} .dl-locate-btn svg{width:15px; height:15px; stroke:var(--text-dim); fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;} .dl-check-btn{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel-bg-strong); border:1px solid var(--panel-border); margin-top:2px; transition:transform .15s ease, background .15s ease;} .dl-check-btn:active{transform:scale(.9);} .dl-check-btn svg{width:15px; height:15px; stroke:var(--text-dim); fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;} .dl-check-btn.done{background:#3ddc84; border-color:transparent;} .dl-check-btn.done svg{stroke:#0b3d22;} .dl-card-swipeable{touch-action:pan-y;} /* ---------- Диктофон: recorder hero, note cards, transcript ---------- */ /* --rp (0 or 1, never in between) flips on a deliberate swipe gesture (see the touch handlers below) rather than tracking real scroll — every shrinking property on the card interpolates off that same number, so it all animates in lockstep between the two fixed states. */ /* pinned right under the (also sticky) header — deliberately its bottom edge plus a small gap, never less, so the two stacked sticky elements can never compete for the same strip of screen and hide each other. */ /* persistent mini recorder bar — floats above every other tab while a recording is running/paused, so leaving Трекер doesn't hide it or lose control of it. Freely draggable up/down the whole screen (see JS). */ /* left/top are always plain pixel values set from JS (see ensureRecFloatBarPosition and the drag handlers) rather than left:50%+transform centering — free 2D drag needs a real x/y to move from, and mixing that with a centering transform would fight over the same `transform` property. */ .rec-float-bar{ position:fixed; left:0; top:calc(var(--tg-safe-top, 0px) + 10px); z-index:45; display:flex; align-items:center; gap:9px; padding:8px 8px 8px 14px; border-radius:999px; max-width:min(94vw, 380px); box-sizing:border-box; background:color-mix(in srgb, var(--pill-bg) 86%, transparent); border:1px solid var(--panel-border-strong); backdrop-filter:blur(28px) saturate(1.8); -webkit-backdrop-filter:blur(28px) saturate(1.8); box-shadow:0 18px 40px -16px rgba(0,0,0,0.55); touch-action:none; cursor:grab; transition:box-shadow .25s ease; } /* the show/hide (top+opacity+scale) transition is only active while NOT actively being dragged — during a drag, top/left are set every touch frame and must snap 1:1 with the finger, not lag behind a transition. */ .rec-float-bar:not(.dragging){transition:box-shadow .25s ease, top .42s cubic-bezier(.22,1.15,.36,1), left .42s cubic-bezier(.22,1.15,.36,1), opacity .3s ease, transform .32s cubic-bezier(.22,1.15,.36,1);} @keyframes recFloatIconPop{ 0%{transform:scale(.5);} 60%{transform:scale(1.18);} 100%{transform:scale(1);} } .rec-float-btn.icon-pop svg{animation:recFloatIconPop .32s cubic-bezier(.34,1.56,.64,1);} .rec-float-bar:active{cursor:grabbing;} .rec-float-bar.dragging{box-shadow:0 26px 54px -14px rgba(0,0,0,0.7);} /* pink+pulsing while actually recording (the default/non-.paused look, matching the note panel's own mic button), solid still blue on pause — no fade-to-translucent-red anymore, a flat color+animation swap instead so it reads as the same two states as the mic button, not its own third thing. */ .rec-float-bar .rec-dot{flex:none; background:var(--accent-pink); color:var(--accent-pink); transition:background .25s ease, color .25s ease;} .rec-float-bar.paused .rec-dot{background:var(--accent-2-dark); color:var(--accent-2-dark); opacity:1; animation:none; box-shadow:none;} .rec-float-timer{font-size:0.86rem; font-weight:800; color:var(--text); flex:none;} .rec-float-btn{ flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel-bg-strong); border:1px solid var(--panel-border); color:var(--text); cursor:pointer; transition:transform .15s cubic-bezier(.34,1.56,.64,1); } .rec-float-btn:active{transform:scale(.86);} .rec-float-btn svg{position:relative; width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;} /* Same idle-blue/recording-pink-liquid language as the note panel's own mic button (.note-toolbar-btn.main) instead of this button's own flat neutral gray — while actually recording it goes transparent with a pink border and the same volume-driven .rec-mic-fill liquid rising inside it (fed from the exact same startWaveform() tick as the note panel's two buttons, just a third target); on pause it drops back to plain solid blue, matching the "paused reads as idle" rule used everywhere else. */ .rec-float-pause{ position:relative; overflow:hidden; background:var(--accent-2-dark); border:1.5px solid transparent; color:var(--btn-text); transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .28s cubic-bezier(.4,0,.2,1), border-color .28s cubic-bezier(.4,0,.2,1); } .rec-float-bar:not(.paused) .rec-float-pause{background:transparent; border-color:var(--accent-pink);} .rec-float-bar:not(.paused) .rec-float-pause .rec-mic-fill{opacity:1;} /* overflow:visible (overriding .glass's default hidden) so the accent glow behind the record button can softly bleed past the card's own edge. */ .rec-card{ padding:calc(30px - var(--rp) * 20px) 16px calc(26px - var(--rp) * 18px); text-align:center; --beam-angle:0deg; overflow:visible; border-radius:calc(20px + var(--rp) * 16px); transform:translateY(0); overflow-anchor:none; transition:padding .3s cubic-bezier(.22,.8,.32,1), border-radius .3s cubic-bezier(.22,.8,.32,1), transform .3s cubic-bezier(.22,.8,.32,1), background-color .3s ease, border-color .3s ease; } /* Full visual match with Главная's own Записать лекцию card while idle — not just the icon inside it, the whole card gets that same blue tint (identical color-mix % as .home-action-record). Only while idle: once .recording is added the card goes back to the plain .glass background so it doesn't fight the waveform/beam-ring going on at that point. */ .rec-card:not(.recording){ background:color-mix(in srgb, var(--accent-2) 22%, var(--panel-bg)); border-color:color-mix(in srgb, var(--accent-2) 42%, var(--panel-border)); } /* Idle state is deliberately flat now, to match Главная's own calmer card language — no more rotating sweep around the border before anything's even happening. The one liquid-glass "moment" left on this card is the rotating beam ring above, which only appears once actually recording — it's earned then (a real "something is live" signal), not just idle chrome. */ .rec-idle-row{display:flex; flex-direction:row; align-items:center; gap:16px; position:relative; z-index:1; text-align:left; padding:2px 6px; cursor:pointer; transition:transform .15s ease;} .rec-idle-row:active{transform:scale(0.98);} .rec-main-btn{ position:relative; overflow:hidden; width:72px; height:72px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--accent-2-dark); color:var(--btn-text); border:none; box-shadow:0 16px 34px -12px color-mix(in srgb, var(--accent-2-dark) 60%, transparent); transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; } .rec-main-btn svg{position:relative; width:28px; height:28px; stroke:var(--btn-text); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} .rec-main-btn:active{transform:scale(.93);} /* The idle "tap to start" button specifically (not #rec-stop-btn, which shares .rec-main-btn's base rule above and keeps that bigger solid treatment while actually recording) — restyled to match Главная's own record-action icon exactly: the same 44px translucent accent-2 circle, no glow, no shine overlay. Same idea as the idle ring's removal: this card should look like it belongs on Главная, not like a separate, more elaborate hero. */ /* Same font/weight/color as Главная's own card labels (.home-action-label) — was .text-faint at weight 600, which read as a dim caption instead of matching how Главная actually sets its type. */ .rec-idle-hint{font-family:'Unbounded'; max-width:none; display:flex; flex-direction:column; gap:2px;} /* Reads as a heading — same weight/scale family as a card title — so the row unmistakably reads as a button label, not a caption. */ .rec-idle-title{font-weight:800; font-size:1.18rem; line-height:1.2; color:var(--text);} .rec-idle-sub{font-weight:600; font-size:0.86rem; line-height:1.3; color:var(--text-dim);} .rec-spinner{width:34px; height:34px; border-radius:50%; border:3px solid var(--panel-border); border-top-color:var(--accent-2-dark); animation:recSpin .8s linear infinite;} @keyframes recSpin{ to{transform:rotate(360deg);} } /* Small floating status card shown while waiting on POST /api/notes/record (see showProcessingUI/cycleProcessingStages) — replaces the old #rec-processing card that lived embedded inside the now-removed recording card. Plain monotone border from the start, no glass sheen (matches the rest of this session's pass removing that effect everywhere). */ .note-processing-indicator{ position:fixed; left:50%; top:50%; z-index:46; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 28px; background:var(--pill-bg); border:1px solid var(--panel-border-strong); border-radius:20px; box-shadow:0 18px 40px -16px rgba(0,0,0,0.55); } .note-processing-indicator p{font-size:0.86rem; font-weight:600; color:var(--text-dim); text-align:center; max-width:220px;} .note-chip{flex:none; display:inline-flex; align-items:center; gap:3px; font-family:var(--font-text); font-weight:700; font-size:0.62rem; color:var(--text-faint); background:var(--panel-bg-strong); padding:2px 7px; border-radius:999px;} .note-chip svg{width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;} /* ---------- notes list: horizontally-scrolling "recent" carousel on the Трекер panel + a dedicated "Все заметки" screen with filter tabs. Each card/row carries a real, non-interactive miniature of the note's own rendered body (scaled way down via transform + clipped), rather than a plain text snippet, so it visually reads like a shrunk note page. ---------- */ .notes-recent-header{display:flex; align-items:center; justify-content:space-between; margin:18px 2px 8px;} .notes-recent-header .dl-section-title{margin:0;} .notes-see-all{display:inline-flex; align-items:center; gap:1px; font-family:'Unbounded'; font-weight:700; font-size:0.78rem; color:var(--accent-2); cursor:pointer; padding:4px 2px;} .notes-see-all svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;} .notes-recent-scroll{display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 6px; margin:0 -2px; -webkit-overflow-scrolling:touch; scrollbar-width:none;} .notes-recent-scroll::-webkit-scrollbar{display:none;} .note-carousel-card{ flex:none; width:162px; cursor:pointer; display:flex; flex-direction:column; padding:0; border-radius:20px; overflow:hidden; border:1px solid var(--panel-border); transition:transform .15s ease, border-color .15s ease; } .note-carousel-card:active{transform:scale(0.96);} /* Faint graph-paper grid instead of a flat gray fill — reads more like an actual notebook page behind the shrunk note preview. */ .note-thumb{position:relative; overflow:hidden; height:126px; --paper-size:14px;} .note-thumb::after{content:''; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 92%, transparent)); pointer-events:none;} .note-thumb-inner{position:absolute; top:0; left:0; width:360%; transform:scale(0.2778); transform-origin:top left; padding:12px 14px; pointer-events:none; user-select:none;} .note-thumb-empty{display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-faint);} .note-thumb-empty svg{width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.5;} /* ---------- unified recording/note-editor screen: grid-paper canvas, sticky title, floating bottom toolbar (redesign merging record + conspect) ---------- */ /* Back / "..." stay put on screen (unlike the title, which deliberately scrolls away with the grid) — truly position:fixed and physically outside .wrap (see the comment above its markup): position:sticky here was still anchored to the panel's own (negative-margined) flow position, which read as a small jump/rise on the first bit of scroll instead of being fixed from the very start. */ #note-detail-topbar{ position:fixed; left:16px; right:16px; max-width:608px; margin:0 auto; top:calc(var(--tg-safe-top, 0px) - 32px + var(--header-h, 52px)); z-index:41; display:flex; align-items:center; justify-content:space-between; gap:8px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-14px) translateZ(0); will-change:transform, opacity; transition:opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1); } #note-detail-topbar.show{opacity:1; visibility:visible; transform:translateY(0) translateZ(0);} #note-detail-topbar.show > *{pointer-events:auto;} /* One shared pill instead of three separate floating round buttons — same "glass on the wrapper, transparent on the buttons themselves" trick as .agent-pill .agent-round-btn elsewhere in this file. */ .note-detail-actions{ display:flex; align-items:center; gap:2px; padding:4px; border-radius:999px; background:var(--pill-bg); border:1px solid var(--panel-border); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); box-shadow:0 6px 16px -8px rgba(0,0,0,0.55); } .note-detail-actions .agent-round-btn{ width:34px; height:34px; background:none; border:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; } /* Undo/redo: collapsed to width:0 (not display:none) until each individually has something to do (see setupNoteUndo) -- a width change is a real value the browser can animate on its own, so toggling one .show class is enough to get a genuinely smooth grow/shrink; a display:none <-> flex flip has no in-between state to transition through at all (an earlier version tried forcing it anyway with a reflow + nested requestAnimationFrame calls and it still landed as a hard snap often enough to notice). overflow:hidden keeps the icon clipped out of view while collapsed instead of just squashed, and flex:none (inherited from .agent-round-btn) keeps the row's other buttons from fighting this one's width as it grows. export/study/ console visibly shift right as this one grows in, since it's a real layout width change, not just an opacity fade sitting in already-reserved space. */ .note-detail-actions .note-history-btn{ width:0; overflow:hidden; opacity:0; pointer-events:none; transform:scale(.7) translateZ(0); transition:width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, transform .26s cubic-bezier(.34,1.56,.64,1); } .note-detail-actions .note-history-btn.show{ width:34px; opacity:1; pointer-events:auto; transform:scale(1) translateZ(0); } /* .agent-round-btn::before paints a per-button gradient sheen on top of its own circular background -- with the flat background above already removed, that sheen was the only thing left still reading as "each button has its own highlight", the same reason .agent-pill kills it too. */ .note-detail-actions .agent-round-btn::before{content:none;} /* Plain in-flow title, directly above the grid — scrolls away together with the workspace beneath it like normal page content, rather than staying pinned on screen (an earlier pass made it position:sticky with a shrink-on-scroll effect; that read as the title "staying put" instead of "rising with the grid" and was reverted). */ /* padding-top clears the now-fixed #note-detail-topbar, which no longer takes up any space in normal flow. (Extra bottom clearance was tried here to rule out an iOS screen-edge-clipping theory for the line-1 caret bug — confirmed NOT the cause, reverted.) */ #note-title-bar{padding:50px 2px 14px; cursor:pointer;} #note-title-bar #detail-title{margin:0; text-align:left;} /* Centered only while the title fits on one line — see updateTitleAlignment(), which toggles this by actually measuring wrapped line count rather than guessing off character length. */ #note-title-bar #detail-title.title-centered{text-align:center;} /* Lives right inside .note-detail-actions now — the SAME pill undo/redo/ export/study/console already share, not a pill of its own next to it. That's the actual point: the whole shared pill visibly grows wider to make room for it, exactly the way it already does for undo/redo (see .note-history-btn just below), instead of a second, separate pill appearing alongside it — one consistent "things grow into this pill, they don't just pop" language for every optional piece of chrome here, not a special case with its own container. Bare (no background/border of its own), matching how .note-detail-actions .agent-round-btn is also bare inside this same wrapper. Expands in via max-width (not width — the digit count varies, "0:00" vs "12:34", so a single fixed target doesn't fit both) for the same reason .note-history-btn expands via width: a real value the browser can transition on its own. .rec-dot is the same pulsing dot #rec-float-bar already uses elsewhere, reused as-is for visual consistency between the two "recording is running" indicators. */ .note-toolbar-timer{ flex:none; display:flex; align-items:center; gap:6px; height:34px; box-sizing:border-box; max-width:0; padding:0; overflow:hidden; opacity:0; white-space:nowrap; pointer-events:none; transition:max-width .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; } .note-toolbar-timer.show{max-width:100px; padding:0 5px 0 8px; opacity:1;} .note-toolbar-timer .mono{font-size:0.82rem; font-weight:800; color:var(--text);} /* Pink here specifically (not the shared .rec-dot default red) — matches the recording accent used everywhere else on this screen (mic button border/liquid fill); #rec-float-bar's own dot and the chat voice-note recorder's are separate contexts, left at their existing red. */ .note-toolbar-timer .rec-dot{background:var(--accent-pink); color:var(--accent-pink);} .note-toolbar-timer.paused .rec-dot{animation-play-state:paused; opacity:.4;} /* Grid-paper canvas: same faint graph-paper recipe as .note-thumb, but a full open workspace filling the screen under the title — not a boxed "window" card (no .glass/.card here: no border, no background panel of its own, no rounded corners, no shadow). Paginated like a real document rather than one endless scroll: --page-h (JS-computed from the element's own width so each page keeps A4's 210:297 proportions, matching what the PDF export actually prints) and --num-pages (starts at 2, grows one page at a time as content reaches the last one — see growNotePagesForCanvas/ setNotePagesForBody) together size the box to whole pages, seamlessly joined — the only visible seam is the thicker divider line the first background layer draws at each page boundary; the grid lines themselves (layers 2/3) tile straight through it. The text field is one single contenteditable regardless of how many pages that spans — pagination is purely a background/sizing effect, never a separate field per page. padding-bottom clears the floating toolbar. */ #note-summary-view{ /* the grid itself comes from .paper (see «Бумага заметок»); here only the thin line at each A4 page boundary, as the extra first layer */ --paper-extra:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--page-h, 400px) - 1px), color-mix(in srgb, var(--text) 16%, transparent) calc(var(--page-h, 400px) - 1px), color-mix(in srgb, var(--text) 16%, transparent) var(--page-h, 400px)); min-height:calc(var(--page-h, 400px) * var(--num-pages, 2)); /* Clearance for the floating toolbar is a MARGIN, not padding — padding is still inside this box's background-painted area, so a bottom padding here was showing a stray partial extra "page" of grid lines tiling into that space below the true last page. Margin doesn't get background painted into it at all. */ padding:0 2px 0; margin:0 -16px 90px; padding-left:calc(2px + 16px); padding-right:calc(2px + 16px); } /* Spans every page's full height, not just however tall its own typed content happens to be — otherwise a tap on a later, still-blank page (or just the empty lower half of the current one) misses the editable element entirely and lands on whatever's behind it instead. */ #note-canvas-editable{ display:none; min-height:calc(var(--page-h, 400px) * var(--num-pages, 2)); outline:none; white-space:pre-wrap; word-wrap:break-word; font-size:15px; line-height:28px; padding-top:4px; color:var(--text); caret-color:var(--accent-2); } /* The browser's default vertical-align:super/sub for these tags changes how tall the line box needs to be to fit them, which — on a field whose every line is locked to the grid's 28px pitch — pushed the rest of that line (and the grid alignment under it) out of place. position:relative + a manual offset gets the same raised/lowered, smaller look without touching the line's own height; line-height:0 on the tag itself keeps its own (already-shrunk) font-size from independently inflating that height either. */ #note-canvas-editable sup, #note-canvas-editable sub{ font-size:0.7em; line-height:0; position:relative; vertical-align:baseline; } #note-canvas-editable sup{top:-0.7em;} #note-canvas-editable sub{top:0.28em;} /* ---------- floating bottom toolbar (outside .wrap — see the containing- block comment further down for why any fixed sheet/toolbar must live there) ---------- */ .note-toolbar-float{ position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:40; display:flex; align-items:center; gap:6px; padding:7px; border-radius:999px; background:color-mix(in srgb, var(--pill-bg) 88%, transparent); border:1px solid var(--panel-border-strong); backdrop-filter:blur(28px) saturate(1.8); -webkit-backdrop-filter:blur(28px) saturate(1.8); box-shadow:0 18px 40px -16px rgba(0,0,0,0.55); /* Same morph feel as .tabbar-dock's own show/hide — the two cross-fade and slide past each other (tabbar down, this one up) via switchTab toggling .tabbar-dock's note-mode class opposite this one's .show. */ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(40%) scale(.85) translateZ(0); will-change:transform, opacity; transition:opacity .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1); } .note-toolbar-float.show{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1) translateZ(0);} .note-toolbar-btn{ flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel-bg-strong); border:1px solid var(--panel-border); color:var(--text); cursor:pointer; transition:transform .15s cubic-bezier(.34,1.56,.64,1), opacity .15s ease; } .note-toolbar-btn:active{transform:scale(.9);} .note-toolbar-btn svg{position:relative; width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;} /* Флаг/плеер: appear/disappear by animating width (0 -> 46px), same technique as .note-history-btn in the top panel (see its own comment) — a real value the browser can transition on its own, so the rest of the toolbar visibly slides over to make/reclaim room as one smooth motion, instead of the button (and everything after it) just popping in/out via the "hidden" attribute the way it did before. overflow: hidden clips the icon out of view while collapsed rather than squashing it, and flex:none (inherited from .note-toolbar-btn) keeps neighboring buttons from fighting this one's width as it grows. margin-right:-6px while collapsed cancels out the row's own flex `gap` on this item's trailing side — gap is added unconditionally between every pair of items regardless of their width, so a width:0 button would otherwise still leave TWO full gaps (its own on each side, 12px total) sitting between its neighbors instead of one normal 6px, which is exactly what made the play/tools gap read as bigger than every other pair whenever play was collapsed. */ .note-toolbar-btn.expandable{ width:0; overflow:hidden; opacity:0; pointer-events:none; margin-right:-6px; transition:width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, margin-right .3s cubic-bezier(.4,0,.2,1); } .note-toolbar-btn.expandable.show{width:46px; opacity:1; pointer-events:auto; margin-right:0;} /* Mic <-> stop-square <-> play-triangle icon swaps (see swapMicIcon()) are an innerHTML replacement, not a single shape morphing into another — nothing to transition between mid-swap on its own. .icon-swap is toggled just before/after that replacement so the OLD icon shrinks/ fades away, the swap happens while it's invisible, and the NEW one grows/fades back in — paired with the button's own background/border transition above so the whole thing reads as one continuous morph (idle blue circle -> transparent pink-bordered "recording" square) instead of the color changing smoothly while the icon just pops. */ .note-toolbar-btn.main svg, .note-format-btn.main svg{ /* position:relative (not just DOM order) is what actually keeps this above .rec-mic-fill as the liquid rises — an absolutely positioned sibling paints above plain in-flow content regardless of markup order; giving the icon a position (any position) puts it in the same positioned stacking bucket, where DOM order (icon after the fill) finally decides it, on top. */ position:relative; transition:transform .16s cubic-bezier(.4,0,.2,1), opacity .16s ease; } .note-toolbar-btn.main.icon-swap svg, .note-format-btn.main.icon-swap svg{ transform:scale(.4) rotate(-20deg); opacity:0; } .note-toolbar-btn.main{ /* Same 46px as every other button on this bar now (was 52px) — one consistent size across the row instead of the mic standing out as larger. */ position:relative; overflow:hidden; background:var(--accent-2-dark); border:1.5px solid transparent; color:var(--btn-text); transition:transform .15s cubic-bezier(.34,1.56,.64,1), opacity .15s ease, background .28s cubic-bezier(.4,0,.2,1), border-color .28s cubic-bezier(.4,0,.2,1); } /* The "actively recording" square specifically — filled solid pink always (not theme-dependent, it's the same accent everywhere), with a stroke that follows --text so it reads as a crisp white outline in dark theme and a dark one in light theme, instead of just an unfilled outline in whatever the button's current text color happens to be. */ .rec-stop-icon{fill:var(--accent-pink); stroke:var(--text); stroke-width:1.5;} /* Actively recording (not paused): the flat blue fill empties out to just a pink outline — the button itself carries no color of its own here, .rec-mic-fill underneath is the ONLY source of pink, so its live rise-and-fall with volume is what actually reads as "recording right now" instead of a static color swap. Paused intentionally falls back to the plain .main default above (solid blue, no override here) — same look as idle, since nothing's actually being captured. */ .note-toolbar-btn.main.recording:not(.paused){background:transparent; border-color:var(--accent-pink);} .note-toolbar-btn.disabled{opacity:.4; pointer-events:none;} .note-toolbar-btn[hidden]{display:none;} .note-toolbar-flag-badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--accent-2); color:#fff; font-size:0.62rem; font-weight:800; display:none; align-items:center; justify-content:center; } .note-toolbar-flag-badge.show{display:flex;} .note-toolbar-btn{position:relative;} /* Liquid volume fill for the mic button while recording — replaces the old #rec-waveform bar array entirely (see startWaveform/stopWaveform): one aggregate volume value drives --fill (0..1, written every animation frame) instead of per-bar scaleY(), rising and falling from the bottom like a liquid filling the button. The height transition is eased and slightly slower than the ~16ms frame rate it's fed at, so the level genuinely glides/settles toward each new reading (real liquid has inertia) instead of jittering to match every frame exactly; a very slow, subtle vertical bob on top keeps the surface gently alive even while the volume itself briefly holds still, instead of looking frozen between updates. */ /* bottom:-3px + the matching "+ 3px" in height makes the fill bleed 3px past the button's own bottom edge (clipped away by the button's own overflow:hidden) rather than exactly matching it — the water LEVEL (the top edge, which is all that actually matters visually) lands in exactly the same place either way, but a rectangular fill's flat bottom edge meeting a circular clip boundary at their single tangent point is exactly the kind of sub-pixel seam that shows up as a hairline of the transparent button background peeking through right at the bottom — overshooting past the clip boundary entirely removes that seam instead of trying to land exactly on it. */ .rec-mic-fill{ position:absolute; left:0; right:0; bottom:-3px; height:calc(var(--fill, 0) * 100% + 3px); background:var(--accent-pink); pointer-events:none; opacity:0; transition:height .22s cubic-bezier(.3,.9,.4,1), opacity .2s ease; animation:recMicBob 2.9s ease-in-out infinite; } @keyframes recMicBob{ 0%, 100%{transform:translateY(0);} 50%{transform:translateY(-1px);} } /* Only visible while actually recording — same :not(.paused) gate as the border above, so a paused (or idle) button never shows a leftover puddle of pink sitting under the icon on top of its own plain blue fill; it just isn't there until the button goes transparent again. */ .note-toolbar-btn.main.recording:not(.paused) .rec-mic-fill, .note-format-btn.main.recording:not(.paused) .rec-mic-fill{opacity:1;} /* Three real wave crests (an SVG sine tile used as a mask, not a scrolling dot pattern), not just two — three independent, non-lockstep durations/directions/phases (3.4s/2.5s/4.2s) never quite line back up with each other on any short cycle, which is what actually reads as an organic, "произвольная" liquid surface rather than a mechanically repeating pattern; two alone still had an obvious, short common cycle. The tile itself is wide and shallow-curved (one full up-down sweep every 48px, not a tight ripple) so it reads as a real winding swell even at this small a size, and --amp's own baseline (see startWaveform) never drops low enough to flatten out completely — the surface should always look alive, even in near-silence, with real volume just adding extra height/choppiness on top rather than being the only thing keeping it moving at all. Their shared transform:scaleY(var(--amp)) is written every animation frame from startWaveform's tick() alongside --fill, using the SAME instantaneous volume reading — a loud moment visibly agitates the surface further, instead of the waves just scrolling past at a constant, volume-blind rate the way a single decorative texture would. */ .rec-mic-fill::before, .rec-mic-fill::after, .rec-mic-wave3{ content:''; position:absolute; left:-50%; right:-50%; top:-9px; height:18px; background:var(--accent-pink); -webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCAyMCI+PHBhdGggZD0iTTAgMTAgUTEyIDAgMjQgMTAgUTM2IDIwIDQ4IDEwIFYyMCBIMCBaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==); mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCAyMCI+PHBhdGggZD0iTTAgMTAgUTEyIDAgMjQgMTAgUTM2IDIwIDQ4IDEwIFYyMCBIMCBaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==); -webkit-mask-size:48px 18px; mask-size:48px 18px; -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x; transform-origin:center bottom; transform:scaleY(var(--amp, .85)); transition:transform .18s ease-out; } .rec-mic-wave3{display:block;} .rec-mic-fill::before{animation:recMicMaskScrollA 3.4s linear infinite; opacity:.3;} .rec-mic-fill::after{animation:recMicMaskScrollB 2.5s linear infinite; opacity:.55; top:-7px; height:15px;} .rec-mic-wave3{animation:recMicMaskScrollC 4.2s linear .5s infinite; opacity:.9; top:-5px; height:12px;} /* Each layer's own loop still travels exactly one tile width (48px) so it keeps repeating seamlessly with no snap-back at the loop point — the "never quite realigns" organic feel comes purely from the three DURATIONS (no common short cycle) and a starting offset on the third, not from mismatched travel distances, which would just make each individual layer stutter. */ @keyframes recMicMaskScrollA{ from{-webkit-mask-position:0 0; mask-position:0 0;} to{-webkit-mask-position:-48px 0; mask-position:-48px 0;} } @keyframes recMicMaskScrollB{ from{-webkit-mask-position:0 0; mask-position:0 0;} to{-webkit-mask-position:48px 0; mask-position:48px 0;} } @keyframes recMicMaskScrollC{ from{-webkit-mask-position:0 0; mask-position:0 0;} to{-webkit-mask-position:-48px 0; mask-position:-48px 0;} } /* ---------- formatting toolbar: shown instead of note-toolbar-float while the grid canvas has keyboard focus, pinned to the keyboard's top edge (position:fixed, but `bottom` is recomputed in JS from window.visualViewport rather than a fixed CSS value — see updateFormatToolbarPosition). Same glass-pill language as .note-toolbar-float, just a row of smaller flat buttons instead of a ring of separate round ones. ---------- */ .note-format-toolbar{ position:fixed; left:16px; right:16px; max-width:608px; margin:0 auto; bottom:0; z-index:42; display:flex; align-items:center; gap:2px; padding:6px; border-radius:18px; background:color-mix(in srgb, var(--pill-bg) 94%, transparent); border:1px solid var(--panel-border-strong); backdrop-filter:blur(28px) saturate(1.8); -webkit-backdrop-filter:blur(28px) saturate(1.8); box-shadow:0 -8px 24px -12px rgba(0,0,0,0.5); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px) scale(.96) translateZ(0); /* visibility transitions with a delay when hiding (so the fade-out actually gets to play instead of the element vanishing the instant .show is removed) but instantly when showing. */ transition:opacity .16s ease, transform .2s cubic-bezier(.34,1.56,.64,1), bottom .26s cubic-bezier(.22,.8,.32,1), visibility 0s linear .16s; } .note-format-toolbar.show{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1) translateZ(0); transition:opacity .16s ease, transform .2s cubic-bezier(.34,1.56,.64,1), bottom .26s cubic-bezier(.22,.8,.32,1), visibility 0s linear 0s; } .note-format-sep{width:1px; align-self:stretch; margin:4px 2px; background:var(--panel-border);} .note-format-btn{ flex:1 1 0; min-width:0; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--text); cursor:pointer; font-size:1.4rem; font-weight:700; transition:background .22s cubic-bezier(.4,0,.2,1), color .22s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.34,1.56,.64,1); } .note-format-btn:active{transform:scale(.9);} .note-format-btn svg{position:relative; width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;} /* Round like #note-toolbar-mic in the regular floating toolbar, not the rounded-rect every other button in this row (B/I/U etc.) uses — a fixed 40x40 circle (matching this row's own height) instead of the flexible width the rest share, since a circle can't stretch without stopping being one. */ .note-format-btn.main{ position:relative; overflow:hidden; flex:none; width:40px; border-radius:50%; border:1.5px solid transparent; background:var(--accent-2-dark); color:var(--btn-text); transition:background .22s cubic-bezier(.4,0,.2,1), color .22s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.34,1.56,.64,1), border-color .28s cubic-bezier(.4,0,.2,1); } /* Same "goes transparent, pink comes only from the live liquid fill" treatment as .note-toolbar-btn.main — see its own comment. */ .note-format-btn.main.recording:not(.paused){background:transparent; border-color:var(--accent-pink);} /* The colored "on" state — smooth and consistent across every toggle (B/I/U in the main row, S/superscript/subscript in the expand panel). */ .note-format-btn.active{background:color-mix(in srgb, var(--accent-2) 24%, transparent); color:var(--accent-2);} .note-format-btn#note-format-expand-toggle svg{transition:transform .22s cubic-bezier(.4,0,.2,1);} .note-format-btn#note-format-expand-toggle.open svg{transform:rotate(180deg);} /* Narrower than the main toolbar and right-anchored — sized and placed to sit neatly above the U / chevron / hide-keyboard cluster at the right end of it, not spanning the whole width for just 3 buttons. */ .note-format-expand-panel{ position:fixed; right:16px; left:auto; width:184px; bottom:0; z-index:41; display:flex; align-items:center; gap:2px; padding:6px; border-radius:18px; background:color-mix(in srgb, var(--pill-bg) 94%, transparent); border:1px solid var(--panel-border-strong); backdrop-filter:blur(28px) saturate(1.8); -webkit-backdrop-filter:blur(28px) saturate(1.8); box-shadow:0 -8px 24px -12px rgba(0,0,0,0.5); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px) scale(.96) translateZ(0); /* visibility gets its own zero-length transition with a delay equal to the opacity duration when hiding — otherwise it snaps to hidden the instant .show is removed and the fade-out never gets to actually play. Going the other way (showing) it flips instantly, so the fade-in starts from a visible element right away. */ transition:opacity .14s ease, transform .18s cubic-bezier(.34,1.56,.64,1), bottom .26s cubic-bezier(.22,.8,.32,1), visibility 0s linear .14s; } .note-format-expand-panel.show{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1) translateZ(0); transition:opacity .14s ease, transform .18s cubic-bezier(.34,1.56,.64,1), bottom .26s cubic-bezier(.22,.8,.32,1), visibility 0s linear 0s; } .note-format-expand-panel .note-format-btn{font-size:1.2rem;} /* "+" quick-add popover: a small floating card above whichever toolbar is currently on screen, instead of the usual full-screen tempchat-overlay sheet -- that one requires blurring the canvas to make room, which closed the on-screen keyboard every time "+" was tapped mid-edit. This one is positioned in JS (see positionNotePlusSheet) and never touches focus itself, so opening/closing it leaves the keyboard exactly as it was. Same glass-pill language and show/hide mechanics (opacity + transform + a delayed visibility flip) as .note-format-expand-panel. */ .note-plus-overlay{position:fixed; inset:0; z-index:44; pointer-events:none;} .note-plus-overlay.open{pointer-events:auto;} .note-plus-sheet-card{ position:fixed; left:50%; bottom:0; z-index:45; width:min(90vw, 320px); background:color-mix(in srgb, var(--pill-bg) 94%, transparent); border:1px solid var(--panel-border-strong); border-radius:20px; backdrop-filter:blur(28px) saturate(1.8); -webkit-backdrop-filter:blur(28px) saturate(1.8); box-shadow:0 18px 40px -16px rgba(0,0,0,0.55); padding:8px 10px calc(6px + env(safe-area-inset-bottom)); opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(10px) scale(.96) translateZ(0); transition:opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1), bottom .26s cubic-bezier(.22,.8,.32,1), visibility 0s linear .18s; } .note-plus-overlay.open .note-plus-sheet-card{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1) translateZ(0); transition:opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1), bottom .26s cubic-bezier(.22,.8,.32,1), visibility 0s linear 0s; } .note-plus-sheet-card .event-sheet-head{padding:2px 6px 2px; margin-bottom:6px;} .note-plus-sheet-card .note-plus-row{padding:10px 6px; border-radius:12px; transition:background .15s ease;} .note-plus-sheet-card .note-plus-row:active{background:var(--panel-bg-strong);} /* Same tighter row treatment for "Параметры заметки" — a plain .tempchat-sheet, not a .note-plus-sheet-card, so it doesn't inherit the rule above; repeated here rather than adding that class, which would also pull in that card's own fixed/floating positioning (this sheet uses .tempchat-sheet's own centered-bottom-sheet positioning instead). */ #note-params-sheet .note-plus-row{padding:10px 6px; border-radius:12px; transition:background .15s ease;} #note-params-sheet .note-plus-row:active{background:var(--panel-bg-strong);} /* ---------- "ИИ заметка" — a real full screen, not a small bottom sheet, covering the whole viewport rather than dimming a backdrop behind a card (there's no "behind" left to show once it's full-screen) — closing is only ever the explicit back link (see closeAiNoteSheet), same reasoning #note-audio-close is the only way to close the audio overlay. Slides/scales up from just below rest rather than a flat fade, matching the springy "something opens" language used everywhere else in this file. */ .ai-note-overlay{ position:fixed; inset:0; z-index:60; background:var(--bg); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(22px) scale(.98); transform-origin:center bottom; transition:opacity .26s ease, transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .26s; display:flex; flex-direction:column; overflow-y:auto; padding:calc(var(--tg-safe-top, 0px) + 14px) 16px calc(22px + env(safe-area-inset-bottom)); } .ai-note-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition:opacity .3s ease, transform .36s cubic-bezier(.34,1.3,.64,1), visibility 0s linear 0s; } .ai-note-header{margin-bottom:16px;} .ai-note-header h2{font-size:1.32rem; font-weight:800; color:var(--text); margin:6px 0 0;} .ai-note-body{display:flex; flex-direction:column; gap:10px;} /* One consistent "feature card" language for every row — a colored icon badge (four different accents, one per feature, so the screen doesn't read as one flat list) + title/subtitle + chevron, instead of the thin icon-and-label rows the small sheets elsewhere use — this screen is the one place in the app explicitly asked to look richer than that. */ .ai-note-card{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:18px; cursor:pointer; background:var(--panel-bg); border:1px solid var(--panel-border); transition:background .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1); box-sizing:border-box; min-height:72px; } .ai-note-card:active{transform:scale(.98); background:var(--panel-bg-strong);} .ai-note-card-icon{ flex:none; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; } .ai-note-card-icon svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;} .ai-note-card-text{flex:1; min-width:0;} .ai-note-card-title{font-size:0.96rem; font-weight:700; color:var(--text);} .ai-note-card-sub{font-size:0.78rem; color:var(--text-faint); margin-top:2px;} .ai-note-card-chevron{flex:none; width:18px; height:18px; stroke:var(--text-faint); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;} /* Same recipe (38% mix into transparent, not panel-bg) as the Главная action cards' own icon badges (.home-action-record/.home-action-import) — noticeably more saturated than the soft 20% .note-tag-* dots elsewhere, which is what "brighter, like other menus" meant here. */ .ai-note-card-yellow .ai-note-card-icon{background:color-mix(in srgb, var(--accent-yellow) 38%, transparent); color:var(--accent-yellow);} .ai-note-card-purple .ai-note-card-icon{background:color-mix(in srgb, var(--accent-3) 38%, transparent); color:var(--accent-3);} .ai-note-card-pink .ai-note-card-icon{background:color-mix(in srgb, var(--accent-pink) 38%, transparent); color:var(--accent-pink);} .ai-note-card-blue .ai-note-card-icon{background:color-mix(in srgb, var(--accent-2-dark) 38%, transparent); color:var(--accent-2-dark);} /* ---------- Расшифровка — same card language, but expands in place ---------- */ .ai-note-transcript{background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:18px; overflow:hidden;} .ai-note-transcript-head{ display:flex; align-items:center; gap:14px; padding:14px; cursor:pointer; transition:background .15s ease; box-sizing:border-box; min-height:72px; } .ai-note-transcript-head:active{background:var(--panel-bg-strong);} .ai-note-transcript-title-wrap{flex:1; min-width:0;} /* Single line (not two) — keeps this header's height in line with the other three cards' own icon-driven ~72px, "+-" the same size the way the whole screen was asked to read, instead of the preview text routinely making this one noticeably taller. */ .ai-note-transcript-preview{ font-size:0.8rem; color:var(--text-dim); margin-top:2px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .ai-note-transcript.expanded .ai-note-transcript-preview{display:none;} .ai-note-transcript-head .agent-round-btn{width:32px; height:32px; background:var(--panel-bg-strong); border:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;} .ai-note-transcript-head .agent-round-btn svg{width:15px; height:15px;} .ai-note-chevron{width:18px; height:18px; flex:none; stroke:var(--text-faint); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .28s cubic-bezier(.4,0,.2,1);} .ai-note-transcript.expanded .ai-note-chevron{transform:rotate(180deg);} /* max-height (not grid-template-rows/fr, which some WebKit builds don't reliably animate or fully reveal) — a real, universally-supported transition target. 50vh comfortably fits most transcripts in full; anything longer scrolls inside instead of pushing the screen — that's what "Открыть полную расшифровку" is for. */ .ai-note-transcript-body{max-height:0; overflow:hidden; transition:max-height .34s cubic-bezier(.4,0,.2,1);} .ai-note-transcript.expanded .ai-note-transcript-body{max-height:50vh; overflow-y:auto;} .ai-note-transcript-full{font-size:0.86rem; line-height:1.55; color:var(--text); white-space:pre-wrap; padding:0 14px 14px;} .ai-note-transcript-open-full{ display:block; padding:0 14px 14px; font-size:0.8rem; font-weight:700; color:var(--accent-2); cursor:pointer; } .note-plus-row{display:flex; align-items:center; gap:12px; padding:12px 4px;} .note-plus-row svg{width:22px; height:22px; stroke:var(--text-dim); fill:none; stroke-width:1.8; flex:none;} .note-plus-row-title{font-size:0.92rem; font-weight:700; color:var(--text);} .note-plus-row.danger .note-plus-row-title{color:var(--danger);} .note-plus-row.danger svg{stroke:var(--danger);} .merge-choice-row{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; border-radius:14px; background:var(--panel-bg-strong); border:1px solid var(--panel-border); margin-bottom:8px; cursor:pointer; } .merge-choice-row .merge-choice-title{font-size:0.92rem; font-weight:700; color:var(--text);} .merge-choice-row .merge-choice-sub{font-size:0.76rem; color:var(--text-faint);} .note-carousel-foot{padding:9px 11px 11px;} .note-carousel-title{font-family:'Unbounded'; font-size:0.86rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 0 1px;} .note-carousel-meta{display:flex; align-items:center; justify-content:space-between; gap:6px;} .note-carousel-date{display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; color:var(--text-faint); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;} .note-carousel-date svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.2; flex:none;} .note-tag{flex:none; font-family:'Unbounded'; font-weight:700; font-size:0.58rem; padding:1px 6px; border-radius:999px; white-space:nowrap; border:1px solid color-mix(in srgb, currentColor 45%, transparent);} .note-tag-cyan{color:var(--ev-cyan); background:color-mix(in srgb, var(--ev-cyan) 20%, transparent);} .note-tag-green{color:var(--ev-green); background:color-mix(in srgb, var(--ev-green) 20%, transparent);} .note-tag-orange{color:var(--accent); background:color-mix(in srgb, var(--accent) 22%, transparent);} .note-tag-purple{color:var(--ev-purple); background:color-mix(in srgb, var(--ev-purple) 20%, transparent);} .note-tag-pink{color:var(--ev-pink); background:color-mix(in srgb, var(--ev-pink) 20%, transparent);} .note-tag-gray{color:var(--text-faint); background:var(--panel-bg-strong);} .notes-all-heading{font-family:'Unbounded'; font-weight:800; font-size:1.5rem; margin:2px 0 14px;} .notes-tabs{position:relative; display:flex; gap:18px; margin-bottom:16px; border-bottom:1px solid var(--panel-border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;} .notes-tabs::-webkit-scrollbar{display:none;} .notes-tab{flex:none; padding:2px 1px 12px; font-family:'Unbounded'; font-weight:700; font-size:0.86rem; color:var(--text-faint); cursor:pointer; transition:color .2s ease; white-space:nowrap;} .notes-tab.active{color:var(--accent-2);} .notes-tabs-indicator{position:absolute; bottom:-1px; left:0; height:2px; background:var(--accent-2); border-radius:2px; transition:transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1);} .notes-all-group-title{font-family:'Unbounded'; font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:16px 2px 8px;} .notes-all-group-title:first-child{margin-top:0;} .note-list-row{display:flex; align-items:center; gap:12px; padding:9px 6px; cursor:pointer; border-radius:16px; transition:background .15s ease, transform .15s ease;} .note-list-row:active{transform:scale(0.98); background:var(--panel-bg-strong);} .note-list-thumb{flex:none; width:60px; height:76px; border-radius:12px; position:relative; overflow:hidden; background:var(--panel-bg-strong); border:1px solid var(--panel-border);} .note-list-thumb .note-thumb-inner{width:420%; transform:scale(0.238);} .note-list-thumb.note-thumb-empty-wrap .note-thumb-empty svg{width:22px; height:22px;} /* ---------- папки: конспекты с одинаковым названием, под «Недавними». Карточка — папка с ушком (::before/::after), из неё веером выглядывают миниатюры до трёх последних конспектов, спереди клапан с названием. Цвет папки --fc задаёт JS (по названию, как у тегов). ---------- */ .notes-folders-hint{font-size:0.72rem; color:var(--text-faint);} .notes-folder-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 12px; padding-top:4px;} .note-folder-card{position:relative; height:172px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s ease;} .note-folder-card:active{transform:scale(0.96);} .note-folder-card::before{content:''; position:absolute; inset:16px 0 0 0; border-radius:20px; background:color-mix(in srgb, var(--fc) 34%, var(--panel-bg-strong));} .note-folder-card::after{content:''; position:absolute; top:6px; left:0; width:48%; height:24px; border-radius:14px 14px 0 0; background:color-mix(in srgb, var(--fc) 34%, var(--panel-bg-strong));} .note-folder-papers{position:absolute; left:14px; right:14px; top:26px; height:98px; z-index:1;} .note-folder-paper.note-thumb{ position:absolute; inset:0; height:auto; border-radius:10px; border:1px solid var(--panel-border); box-shadow:0 2px 10px rgba(0,0,0,.18); transform:translateY(calc(8px - var(--i, 0) * 7px)) rotate(var(--rot, 0deg)); transform-origin:50% 100%; transition:transform .25s cubic-bezier(.22,1,.36,1); } .note-folder-paper .note-thumb-inner{width:400%; transform:scale(0.25);} .note-folder-paper.note-thumb-empty-wrap .note-thumb-empty svg{width:20px; height:20px;} .note-folder-card:hover .note-folder-paper{transform:translateY(calc(2px - var(--i, 0) * 9px)) rotate(calc(var(--rot, 0deg) * 1.4));} .note-folder-front{ position:absolute; left:0; right:0; bottom:0; height:76px; z-index:2; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; padding:12px 14px; border-radius:18px; border:1px solid color-mix(in srgb, var(--fc) 45%, transparent); background:color-mix(in srgb, var(--fc) 20%, var(--panel-bg)); box-shadow:0 -8px 18px rgba(0,0,0,.14); } .note-folder-title{margin:0; font-family:'Unbounded'; font-weight:600; font-size:0.84rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .note-folder-meta{margin:3px 0 0; font-size:0.72rem; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .note-folder-count{ position:absolute; top:-12px; right:12px; min-width:24px; height:24px; padding:0 7px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--fc); color:#141414; font-family:'Unbounded'; font-weight:600; font-size:0.72rem; box-shadow:0 2px 8px rgba(0,0,0,.25); } /* экран открытой папки */ .note-folder-head{display:flex; align-items:center; gap:12px; margin:2px 0 14px;} .note-folder-head-text{min-width:0;} .note-folder-head .notes-all-heading{margin:0; font-size:1.3rem; overflow-wrap:anywhere;} .note-folder-head-icon{flex:none; width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--fc) 26%, transparent); color:var(--fc);} .note-folder-head-icon svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;} .note-folder-sub{margin:3px 0 0; font-size:0.8rem; color:var(--text-faint);} .note-list-info{flex:1; min-width:0;} .note-list-title{font-family:'Unbounded'; font-size:0.92rem; font-weight:700; color:var(--text); margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .note-list-date{display:flex; align-items:center; gap:4px; font-size:0.74rem; color:var(--text-faint); font-weight:600; margin:0 0 6px;} .note-list-date svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.2; flex:none;} /* long-press action sheet — same open/close mechanic as .tempchat-overlay (its backdrop), but the sheet itself is independently position:fixed to the viewport bottom rather than relying on the backdrop's flex align-items:flex-end — on this WebView that flex alignment was resolving against the wrong box (rendered pinned near the top of the screen instead of the bottom). Anchoring the sheet to the viewport itself sidesteps that regardless of what the parent's layout is doing. */ .note-action-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:91; width:100%; max-width:440px; margin:0 auto; padding:0 14px calc(14px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); pointer-events:none; } .tempchat-overlay.open .note-action-sheet{transform:translateY(0); pointer-events:auto;} .note-action-sheet-group{background:var(--pill-bg); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--panel-border); border-radius:18px; overflow:hidden; margin-bottom:10px;} .note-action-sheet-title{padding:14px 16px 10px; text-align:center; font-size:0.78rem; font-weight:700; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .note-action-item{display:flex; align-items:center; gap:12px; padding:14px 16px; font-size:0.96rem; font-weight:600; color:var(--text); cursor:pointer; border-top:1px solid var(--panel-border);} .note-action-item:active{background:rgba(255,255,255,0.06);} .note-action-item svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none;} .note-action-item.danger{color:var(--danger);} .note-action-item.is-fav svg{fill:var(--accent-yellow); stroke:var(--accent-yellow);} .note-action-cancel{display:block; text-align:center; padding:14px; font-size:0.98rem; font-weight:700; color:var(--accent-2); background:var(--pill-bg); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--panel-border); border-radius:18px; cursor:pointer;} .note-action-cancel:active{background:var(--panel-bg-strong);} .note-rename-sheet .field{margin-bottom:14px;} .notes-search-row{display:flex; align-items:stretch; gap:10px; cursor:pointer; padding:10px 4px;} .note-search-date{flex:none; width:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--font-text); color:var(--text-faint);} .note-search-date b{font-family:'Unbounded'; font-weight:700; font-size:1.1rem; color:var(--text); line-height:1.1;} .note-search-date span{font-size:0.6rem; font-weight:700; text-transform:uppercase;} .note-search-body{flex:1; min-width:0; background:var(--panel-bg-strong); border-radius:14px; padding:9px 12px;} .note-search-title{font-size:0.84rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .note-search-snippet{font-size:0.72rem; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .note-search-snippet mark{background:color-mix(in srgb, var(--accent-2-dark) 35%, transparent); color:var(--text); border-radius:3px; padding:0 1px;} /* No longer a visible tab on the note screen itself — the full interactive transcript (search/speaker-rename/importance-marking) is still fully wired and reachable, just from the new "ИИ заметка" sheet's Расшифровка row instead of an always-on toggle (see openAiNoteSheet). Kept as a real, just-hidden element (not deleted) since setNoteView still reads/writes its dataset for bookkeeping. */ .note-toggle{display:none; position:relative; background:var(--panel-bg-strong); border-radius:999px; padding:3px; margin-bottom:14px; gap:2px;} /* a separate sliding pill underneath the labels — same trick as the bottom tabbar's own #tab-indicator — instead of the active label just flipping its own background instantly. Pure CSS (percentage width + transform), not JS-measured, so it's already correct the first frame the panel becomes visible, no post-hoc re-measuring needed. */ .note-toggle-indicator{ position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 4px); border-radius:999px; background:var(--accent-2-dark); z-index:0; transition:transform .32s cubic-bezier(.4,0,.2,1); } .note-toggle[data-view="transcript"] .note-toggle-indicator{transform:translateX(calc(100% + 2px));} .note-toggle span{position:relative; z-index:1; flex:1; text-align:center; padding:9px 0; border-radius:999px; font-size:0.84rem; font-weight:700; color:var(--text-faint); cursor:pointer; transition:color .2s;} .note-toggle span.active{color:var(--btn-text);} /* Конспект/Расшифровка used to swap with a hard display:none/block cut — now a quick fade+slide instead (see setNoteView). */ #note-summary-view, #note-transcript-view{transition:opacity .2s ease, transform .2s ease;} #note-summary-view.note-view-fading, #note-transcript-view.note-view-fading{opacity:0; transform:translateY(6px);} /* custom player — the native