@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: block;
  src: url('fonts/unbounded-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --bg: #141414;
  --side: #101010;
  --panel: #242424;
  --field: #272727;
  --hover: #2e2e2e;
  --menu-selected: #3a3a3a;
  --line: #454545;
  --dot-idle: #454545;
  --composer-focus-ring: #555555;
  --text: #f5f5f5;
  --message-url: #6cb0ff;
  --link-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2' viewBox='0 0 10 2'%3E%3Cpath d='M1 1h3' stroke='%23fff' stroke-opacity='.38' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --muted: #a3a3a3;
  --faint: #777;
  --user: #244b75;
  --accent: #3b80ee;
  --code: #242424;
  --ease: cubic-bezier(.22,1,.36,1);
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-device-safe-top: env(safe-area-inset-top, 0px);
  --app-content-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --tg-ui-gap: 0px;
}
:root[data-telegram-miniapp="true"] { --tg-ui-gap: 0px; }
* { box-sizing: border-box; }
@property --closed-width { syntax: '<length>'; inherits: true; initial-value: 168px; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
html.keyboard-page-scroll-lock, html.keyboard-page-scroll-lock body { overflow: hidden !important; overflow-anchor: none; scroll-behavior: auto !important; }
html.keyboard-page-scroll-lock:root { height: var(--web-page-height,100%); }
html.keyboard-page-scroll-lock body.web-app { position: fixed; inset: 0; width: 100%; height: var(--web-page-height,100%); }
html.keyboard-page-scroll-lock:root:not([data-telegram-miniapp="true"]) body.web-app .app-shell {
  position: absolute; top: var(--web-visual-top,0px); left: 0; width: 100%;
  height: var(--web-page-height,100%);
}
html.keyboard-page-scroll-lock.chat-keyboard-overlay body.web-app .conversation,
html.keyboard-page-scroll-lock.chat-keyboard-overlay body.web-app .composer-wrap,
html.keyboard-page-scroll-lock.chat-keyboard-overlay body.web-app .chat-edge-fade-bottom {
  bottom: max(0px,calc(var(--web-page-height) - var(--chat-active-height,var(--web-page-height))));
}
html.ios-standalone { --app-safe-top: 0px; --app-content-safe-top: 0px; --app-safe-bottom: 0px; }
html.ios-standalone, html.ios-standalone body { height: var(--browser-viewport-height,100dvh); }
html.chat-keyboard-sizing, html.chat-keyboard-sizing body { height: var(--visible-height,100dvh); overflow: hidden; }
html.keyboard-motion.chat-keyboard-sizing, html.keyboard-motion.chat-keyboard-sizing body { transition: height var(--keyboard-motion-duration,300ms) cubic-bezier(.22,1,.36,1); }
html.ios-viewport-clipped { --app-safe-top: 0px; --app-content-safe-top: 0px; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); user-select: none; -webkit-user-select: none; }
.message-body, .message-body *, textarea, input, [contenteditable="true"] { user-select: text; -webkit-user-select: text; }
.message-actions, .message-actions * { user-select: none; -webkit-user-select: none; }
.message.user.arrival-pending { opacity: 0; transform: translateY(11px) scale(.985); animation: none; }
.message.user.arriving { animation: none; }
.message.user.sent-complete { opacity: 1; transform: none; animation: none; }
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button.is-pressed:not(:disabled) { scale: .98; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* графики OpenUI рисуют svg со своими размерами и заливкой: общее правило иконок их не касается */
svg:where(:not(.ou-island svg)) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-loader { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; background: var(--side); opacity: 1; transition: opacity .24s ease, visibility .24s ease; }
.ios-chrome-anchor { display: none; }
@media (max-width: 760px) { html.ios-webkit body.web-app .ios-chrome-anchor { display: block; position: fixed; z-index: 2147483647; top: 0; left: 0; right: 0; height: 11px; pointer-events: none; background-color: var(--system-surface,var(--bg)); -webkit-background-clip: text; background-clip: text; } }
html.ios-standalone:not([data-theme="light"]) body.web-app .app-loader { background: #101010; }
.app-loader img { width: 72px; height: 72px; object-fit: contain; transform-origin: center; }
.app-loader-rig { position: relative; width: 72px; height: 72px; }
.app-loader .dokky-mascot { --mascot-ink: var(--side); }
html.ios-standalone:not([data-theme="light"]) body.web-app .app-loader .dokky-mascot { --mascot-ink: #101010; }
html[data-theme="light"] .app-loader .dokky-mascot { --mascot-ink: #fff; }
.app-loader.leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.logout-screen { position: fixed; z-index: 1000; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--side); color: var(--text); }
.logout-spinner { width: 38px; height: 38px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: logout-spin .8s linear infinite; }
@keyframes logout-spin { to { transform: rotate(360deg); } }
.access-notice { position: absolute; z-index: 12; left: 50%; bottom: calc(var(--composer-space) + 10px); width: min(420px,calc(100% - 28px)); transform: translateX(-50%); padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 14px 40px #0005; }
.access-notice p { margin: 0 0 12px; line-height: 1.4; font-size: 14px; }
.access-notice button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 10px; background: var(--accent); color: white; font-weight: 600; }
.access-retry { margin-top: 12px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); }
.ui-icon { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.ui-sparkles { --icon: var(--ic-sparkles, url('icons/sparkles.svg')); }
.ui-zap { --icon: var(--ic-zap, url('icons/zap.svg')); }
.ui-search-check { --icon: var(--ic-search-check, url('icons/search-check.svg')); }
.ui-brain { --icon: var(--ic-brain, url('icons/brain.svg')); }
.ui-maximize { --icon: var(--ic-maximize-2, url('icons/maximize-2.svg')); }
.ui-minimize { --icon: var(--ic-minimize-2, url('icons/minimize-2.svg')); }
.ui-mic { --icon: var(--ic-mic, url('icons/mic.svg')); }
.ui-square { --icon: var(--ic-stop-filled, url('icons/stop-filled.svg')); }
.ui-check { --icon: var(--ic-check, url('icons/check.svg')); }
.ui-chevron-down { --icon: var(--ic-chevron-down, url('icons/chevron-down.svg')); }
.ui-ellipsis { --icon: var(--ic-ellipsis, url('icons/ellipsis.svg')); }
.ui-settings { --icon: var(--ic-settings, url('icons/settings.svg')); }
.ui-square-pen { --icon: var(--ic-square-pen, url('icons/square-pen.svg')); }
.ui-message-circle-dashed { --icon: var(--ic-message-circle-dashed, url('icons/message-circle-dashed.svg')); }
.ui-x { --icon: var(--ic-x, url('icons/x.svg')); }
.ui-arrow-up { --icon: var(--ic-arrow-up, url('icons/arrow-up.svg')); }
.ui-search { --icon: var(--ic-search, url('icons/search.svg')); }
.ui-menu { --icon: var(--ic-menu, url('icons/menu.svg')); }
.ui-plus { --icon: var(--ic-plus, url('icons/plus.svg')); }
.ui-crown { --icon: var(--ic-crown, url('icons/crown.svg')); }
.ui-usage { --icon: var(--ic-chart-no-axes-combined, url('icons/chart-no-axes-combined.svg')); }
.ui-vibrate { --icon: var(--ic-device-mobile-vibration, url('icons/device-mobile-vibration.svg')); }
.ui-panels { --icon: var(--ic-messages-square, url('icons/messages-square.svg')); }
.ui-chats,.ui-messages-square { --icon: var(--ic-messages-square, url('icons/messages-square.svg')); }
.ui-telegram { --icon: var(--ic-brand-telegram, url('icons/brand-telegram.svg')); }
.ui-mail { --icon: var(--ic-mail, url('icons/mail.svg')); }
.ui-bell { --icon: var(--ic-bell, url('icons/bell.svg')); }
.ui-free { --icon: var(--ic-badge-percent, url('icons/badge-percent.svg')); }
.ui-files { --icon: var(--ic-files, url('icons/files.svg')); }
.ui-cloud { --icon: var(--ic-cloud, url('icons/cloud.svg')); }
.chat-item.is-cloud .chat-title::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -2px; background: var(--muted); opacity: 1; mask: var(--ic-cloud, url('icons/cloud.svg')) center / contain no-repeat; -webkit-mask: var(--ic-cloud, url('icons/cloud.svg')) center / contain no-repeat; }
.ui-presentation { --icon: var(--ic-presentation, url('icons/presentation.svg')); }
.ui-brand-youtube { --icon: var(--ic-brand-youtube, url('icons/brand-youtube.svg')); }
.ui-image { --icon: var(--ic-image, url('icons/image.svg')); }
.ui-database { --icon: var(--ic-database, url('icons/database.svg')); }
.ui-calendar-days { --icon: var(--ic-calendar-days, url('icons/calendar-days.svg')); }
.ui-globe { --icon: var(--ic-globe, url('icons/globe.svg')); }
.ui-folder { --icon: var(--ic-folder, url('icons/folder.svg')); }
.ui-briefcase { --icon: var(--ic-briefcase, url('icons/briefcase.svg')); }
.ui-palette { --icon: var(--ic-palette, url('icons/palette.svg')); }
.ui-code-xml { --icon: var(--ic-code-xml, url('icons/code-xml.svg')); }
.ui-rocket { --icon: var(--ic-rocket, url('icons/rocket.svg')); }
.ui-book-open { --icon: var(--ic-book-open, url('icons/book-open.svg')); }
.ui-chart-no-axes-column-increasing { --icon: var(--ic-chart-no-axes-column-increasing, url('icons/chart-no-axes-column-increasing.svg')); }
.ui-flask-conical { --icon: var(--ic-flask-conical, url('icons/flask-conical.svg')); }
.ui-lightbulb { --icon: var(--ic-lightbulb, url('icons/lightbulb.svg')); }
.ui-camera { --icon: var(--ic-camera, url('icons/camera.svg')); }
.ui-music-2 { --icon: var(--ic-music-2, url('icons/music-2.svg')); }
.ui-audio-lines { --icon: var(--ic-audio-lines, url('icons/audio-lines.svg')); }
.ui-shopping-bag { --icon: var(--ic-shopping-bag, url('icons/shopping-bag.svg')); }
.ui-puzzle { --icon: var(--ic-puzzle, url('icons/puzzle.svg')); }
.ui-target { --icon: var(--ic-target, url('icons/target.svg')); }
.ui-users-round { --icon: var(--ic-users-round, url('icons/users-round.svg')); }
.ui-laptop { --icon: var(--ic-laptop, url('icons/laptop.svg')); }
.ui-monitor { --icon: var(--ic-monitor, url('icons/monitor.svg')); }
.ui-leaf { --icon: var(--ic-leaf, url('icons/leaf.svg')); }
.ui-heart { --icon: var(--ic-heart, url('icons/heart.svg')); }
.ui-utensils { --icon: var(--ic-utensils, url('icons/utensils.svg')); }
.ui-plug { --icon: var(--ic-plug, url('icons/plug.svg')); }
.app-shell { display: flex; height: var(--search-stable-height,var(--visible-height,var(--browser-viewport-height,100dvh))); overflow: hidden; background: var(--side); transform: scale(1); border-radius: 0; transition: transform .4s cubic-bezier(.22,1,.36,1), border-radius .4s var(--ease); }
body.web-app .app-shell { position: relative; top: var(--web-keyboard-pan,0px); background: var(--app-chrome-color,var(--bg)); }
html.web-visual-shell body.web-app .app-shell { position: fixed; top: var(--web-visual-top,0px); left: 0; width: 100%; height: var(--visible-height,100dvh); transition: transform .4s cubic-bezier(.22,1,.36,1), border-radius .4s var(--ease); }
html.ios-standalone body.web-app .app-shell { position: relative; top: var(--web-visual-top,0px); left: 0; width: 100%; height: var(--visible-height,var(--browser-viewport-height,100dvh)); }
html.ios-standalone.web-visual-shell body.web-app .app-shell { position: fixed; top: var(--web-visual-top,0px); }
html.keyboard-motion .app-shell { transition: height var(--keyboard-motion-duration,300ms) cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1), border-radius .4s var(--ease); }
:root[data-telegram-miniapp="true"].keyboard-motion .app-shell { transition: transform .4s cubic-bezier(.22,1,.36,1), border-radius .4s var(--ease); }
.app-shell.plans-background { transform: scale(.965); border-radius: 24px; }
.sidebar { --footer-safe-gap: max(28px,calc(var(--app-safe-bottom) + 20px),calc(env(safe-area-inset-bottom) + 20px)); position: relative; flex: 0 0 280px; min-width: 0; display: flex; flex-direction: column; padding: 25px 11px 0; background: var(--side); }
.side-top { position: relative; height: 66px; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 8px 24px; }
.side-top::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 1px; background: color-mix(in srgb,var(--text) 6%,transparent); }
.brand { display: inline-flex; align-items: center; gap: 7px; padding-top: 9px; color: var(--text); font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: 18px; font-weight: 600; text-decoration: none; letter-spacing: -.01em; transition: opacity .22s ease, transform .3s var(--ease); }
.icon-button, .side-settings, .top-round, .composer-icon { border: 0; color: var(--text); background: transparent; display: grid; place-items: center; cursor: pointer; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; transition: background .2s ease, scale .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .icon-button:hover, .side-settings:hover { background: var(--hover); } }
.side-search { position: absolute; top: 0; right: 8px; z-index: 1; width: 42px; height: 42px; display: flex; align-items: center; overflow: hidden; border-radius: 14px; background: transparent; transition: width .38s var(--ease), background .26s ease; }
.side-search .icon-button { flex: none; }
.side-search input { flex: 1; min-width: 0; width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; opacity: 0; transition: opacity .18s ease; }
.side-search input::-webkit-search-cancel-button { display: none; }
.search-close { flex: none; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .2s ease, color .2s ease; }
.search-close svg { width: 17px; height: 17px; }
.side-top.search-open .brand { opacity: 0; transform: translateX(-12px); pointer-events: none; }
.side-top.search-open .side-search { width: calc(100% - 16px); background: var(--panel); }
.side-top.search-open .side-search input { opacity: 1; transition-delay: .1s; }
.side-top.search-open .search-close { opacity: 1; pointer-events: auto; }
#searchChats:focus:not(:focus-visible) { background: transparent; }
#searchChats:hover, #searchChats:active { background: transparent; }
.side-link { width: 100%; min-height: 46px; border: 0; border-radius: 11px; background: transparent; color: var(--text); display: flex; align-items: center; gap: 12px; padding: 0 11px; text-align: left; cursor: pointer; font-size: 15px; transition: background .2s ease; }
.side-link svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .side-link:hover { background: var(--hover); } }
.side-link[aria-current="page"] { background: var(--text); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .side-link[aria-current="page"]:hover { background: var(--text); color: var(--bg); } }
.sidebar-usage { display: grid; gap: 5px; margin: 0; padding: 10px 11px; border: 0; background: transparent; cursor: default; }
.sidebar-usage[hidden] { display: none; }
.sidebar-usage::after { content: none; }
.sidebar-usage-heading { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); font-size: 15px; line-height: 1.3; }
.sidebar-usage-heading > span:first-child { display: inline-flex; align-items: center; gap: 12px; }
.sidebar-usage-heading .ui-icon { width: 20px; height: 20px; color: var(--text); }
.sidebar-usage-heading > span:last-child { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sidebar-usage .usage-track { height: 3px; margin: 2px 0 0 32px; background: var(--hover); }
.sidebar-usage .usage-track[hidden] { display: none; }
.sidebar-usage .usage-fill { background: #929292; transition: width .6s var(--ease); }
.sidebar-future { display: grid; gap: 1px; margin: 2px 0 0; }
.sidebar-future::after { content: ''; height: 1px; margin: 12px 11px 0; background: color-mix(in srgb,var(--text) 6%,transparent); }
.sidebar-more { min-height: 39px; color: var(--muted); }
.sidebar-more-chevron { width: 17px; height: 17px; margin-left: auto; transform-origin: center; transition: transform .32s var(--ease); }
.sidebar-more[aria-expanded="true"] .sidebar-more-chevron { transform: rotate(180deg); }
.sidebar-more-items { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows .32s var(--ease), opacity .24s ease, visibility .32s; }
.sidebar-more[aria-expanded="true"] + .sidebar-more-items { grid-template-rows: 1fr; visibility: visible; opacity: 1; }
.sidebar-more-items-inner { min-height: 0; overflow: hidden; display: grid; gap: 1px; }
@media (prefers-reduced-motion: reduce) { .sidebar-more-chevron,.sidebar-more-items { transition: none; } }
.sidebar-future-link { position: relative; min-height: 39px; color: color-mix(in srgb,var(--muted) 68%,transparent); cursor: default; }
.sidebar-future-link:hover { background: transparent; }
.sidebar-future-link .ui-icon { color: inherit; }
.sidebar-future-link::after { content: 'Скоро'; position: absolute; z-index: 3; top: 50%; right: 10px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); font-size: 11px; font-weight: 550; opacity: 0; pointer-events: none; transform: translate(4px,-50%); transition: opacity .15s ease,transform .15s ease; }
.sidebar-future-link:hover::after,.sidebar-future-link:focus-visible::after,.sidebar-future-link[data-tip-visible="true"]::after { opacity: 1; transform: translate(0,-50%); }
.projects-link { margin-top: 0; }
:is(.projects-link,#libraryButton,#cloudButton,#scheduledButton,#foodButton,#integrationsButton)[aria-current="page"] { background: var(--hover); color: var(--text); }
@media (hover: hover) and (pointer: fine) { :is(.projects-link,#libraryButton,#cloudButton,#scheduledButton,#foodButton,#integrationsButton)[aria-current="page"]:hover { background: var(--hover); color: var(--text); } }
.project-invite-badge { min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; }
.projects-link[hidden],.project-invite-badge[hidden] { display: none; }
.projects-page { display: grid; gap: 15px; }
.projects-page .modal-top { margin-bottom: 2px; }
.projects-lead { margin: -5px 2px 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.project-action { min-height: 42px; padding: 0 15px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.project-action.secondary { border: 1px solid var(--line); background: var(--hover); color: var(--text); }
.project-action.danger { background: #ad3e46; }
.project-action:disabled { opacity: .5; cursor: default; }
.project-list { display: grid; gap: 9px; }
.project-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; transition: background .18s ease,transform .2s var(--ease),border-color .18s ease; }
@media (hover: hover) and (pointer: fine) { .project-card:hover { background: var(--hover); transform: translateY(-1px); } }
.project-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb,var(--project-color,#5489f5) 17%,transparent); color: var(--project-color,#5489f5); }
.project-symbol .ui-icon { width: 21px; height: 21px; }
.project-card-copy { min-width: 0; display: grid; gap: 4px; }
.project-card-copy strong { overflow: hidden; font-size: 14px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.project-card-copy small,.project-muted { color: var(--muted); font-size: 12px; }
.project-card-chevron { color: var(--muted); }
.project-avatar-stack { display: inline-flex; align-items: center; padding-left: 7px; }
.project-stack-avatar,.project-stack-more { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; margin-left: -7px; overflow: hidden; border: 2px solid var(--panel); border-radius: 50%; background: var(--hover); color: var(--text); font-size: 10px; font-weight: 650; }
.project-stack-avatar img,.project-message-avatar img,.project-queue-avatar img { width: 100%; height: 100%; object-fit: cover; }
.project-stack-more { background: var(--hover); color: var(--muted); }
.project-section { display: grid; gap: 9px; }
.project-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px; font-size: 13px; font-weight: 650; }
.project-section-title small { color: var(--muted); font-size: 11px; font-weight: 500; }
.project-overview-members { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.project-invites { display: grid; gap: 16px; }
.project-invite { min-width: 0; display: grid; gap: 10px; padding: 8px 0; border: 0; background: transparent; }
.project-invite-outline { min-width: 0; display: grid; gap: 14px; padding: 14px; border: 1px solid color-mix(in srgb,var(--text) 18%,transparent); border-radius: 16px; background: transparent; }
.project-invite-from { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.project-invite-from > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.project-invite-from strong { color: var(--text); font-weight: 600; }
.project-inviter-avatar { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--hover); color: var(--text); font-size: 12px; }
.project-inviter-avatar img { width: 100%; height: 100%; object-fit: cover; }
.project-invite-summary { min-width: 0; display: flex; align-items: center; gap: 11px; }
.project-invite-summary .project-symbol { flex: 0 0 42px; border-radius: 50%; }
.project-invite-copy { min-width: 0; display: grid; gap: 4px; }
.project-invite-copy strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.project-invite-copy small { color: var(--muted); font-size: 13px; }
.project-invite-actions { display: flex; gap: 6px; }
.project-invite-actions button,.project-chat-manage { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--hover); color: var(--text); cursor: pointer; }
.project-invite-actions .accept { background: var(--accent); color: #fff; border-color: transparent; }
.project-invite .project-invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.project-invite .project-invite-actions button { width: 100%; min-height: 40px; height: auto; padding: 9px 12px; border: 0; font: inherit; font-size: 14px; font-weight: 600; transition: background .18s ease,opacity .18s ease; }
.project-invite .project-invite-actions button:disabled { opacity: .5; cursor: default; }
.project-empty { padding: 18px 12px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; }
.project-detail-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.project-back { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--hover); color: var(--text); cursor: pointer; }
.project-back .ui-icon { width: 18px; height: 18px; }
.project-detail-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 19px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.project-status { display: flex; align-items: center; gap: 7px; margin: -3px 2px 0; color: var(--muted); font-size: 12px; }
.project-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3eb77c; }
.project-status.readonly::before { background: #d49a43; }
.project-chats { display: grid; gap: 7px; }
.project-chat-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 59px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); color: var(--text); text-align: left; transition: transform .2s var(--ease),background .18s ease,border-color .18s ease,box-shadow .2s ease,opacity .2s ease; }
.project-chat-open { min-width: 0; display: grid; grid-column: 1; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .project-chat-card:hover { background: var(--hover); border-color: color-mix(in srgb,var(--text) 15%,var(--line)); } }
.project-chat-card:active { transform: scale(.992); }
.project-chat-card.is-opening { transform: scale(.985); background: var(--hover); }
.project-chat-card.is-dragging { z-index: 2; opacity: .78; border-color: var(--accent); box-shadow: 0 12px 28px #0003; transform: scale(1.015); }
.project-chat-card > .project-symbol { width: 38px; height: 38px; border-radius: 12px; }
.project-chat-card-copy { min-width: 0; display: grid; gap: 3px; }
.project-chat-card-copy strong { overflow: hidden; font-size: 13px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.project-chat-card-copy small { color: var(--muted); font-size: 11px; }
.project-chat-actions { display: flex; align-items: center; gap: 5px; }
.project-chat-manage .ui-icon { width: 15px; height: 15px; }
.project-chat-drag { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); cursor: grab; touch-action: none; }
.project-chat-drag:active { cursor: grabbing; background: var(--hover); }
.project-chat-drag .ui-icon { width: 17px; height: 17px; }
.project-chat-list-heading { min-height: 38px; }
.project-chat-list-heading h3 { margin: 0; font-size: 13px; font-weight: 650; }
.project-add-chat { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; transition: background .18s ease; }
.project-add-chat:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .project-add-chat:hover { background: var(--hover); } }
.project-add-chat svg { display: block; width: 20px; height: 20px; }
.project-header-actions { display: inline-flex; align-items: center; gap: 7px; }
.project-header-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--hover); color: var(--text); cursor: pointer; transition: background .18s ease,transform .18s var(--ease); }
@media (hover: hover) and (pointer: fine) { .project-header-button:hover { background: color-mix(in srgb,var(--hover) 78%,var(--text)); transform: rotate(12deg); } }
.project-header-button .ui-icon { width: 18px; height: 18px; }
.project-modal-top .modal-title { flex: 1; min-width: 0; text-align: center; }
/* заголовки разделов тем же шрифтом, что логотип. свой файл шрифта только с кириллицей, латиница идёт системным */
.project-modal-top .modal-title:not(.project-chat-title), .pl-top .modal-title, .bill-head > span { font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-weight: 600; letter-spacing: -.01em; }
/* шрифт широкий: на узком телефоне «Запланированное» иначе обрежется многоточием */
.project-modal-top .modal-title:not(.project-chat-title) { font-size: clamp(15px,4.7vw,20px); }
.modal .pl-top .modal-title { font-size: clamp(15px,4.4vw,20px); }
.project-link-button { padding: 4px 8px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; }
.project-create-chat-overlay { position: fixed; z-index: 35; inset: 0; display: grid; place-items: center; padding: max(18px,var(--app-safe-top)) max(14px,var(--app-safe-right)) max(18px,var(--app-safe-bottom)) max(14px,var(--app-safe-left)); background: #0008; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: projectDialogFade .2s ease both; }
.project-create-chat-dialog { width: min(460px,100%); padding: 17px; border: 1px solid var(--line); border-radius: 23px; background: var(--panel); box-shadow: 0 24px 70px #0005; animation: projectDialogEnter .28s var(--ease) both; }
.project-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.project-dialog-heading h2 { margin: 0 0 5px; font-size: 18px; }
.project-dialog-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.project-dialog-close { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--hover); color: var(--text); cursor: pointer; }
.project-dialog-close svg { width: 17px; height: 17px; }
.project-create-chat-options { display: grid; gap: 7px; }
.project-create-chat-option { min-width: 0; display: grid; grid-template-columns: 40px minmax(0,1fr) 18px; align-items: center; gap: 11px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--panel) 75%,var(--bg)); color: var(--text); text-align: left; cursor: pointer; transition: background .18s ease,transform .18s var(--ease); }
@media (hover: hover) and (pointer: fine) { .project-create-chat-option:hover { background: var(--hover); transform: translateX(2px); } }
.project-create-chat-option > span:nth-child(2) { display: grid; gap: 3px; }
.project-create-chat-option strong { font-size: 13px; font-weight: 650; }
.project-create-chat-option small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.project-create-chat-option > .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.project-create-option-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb,var(--accent) 13%,var(--panel)); color: var(--accent); }
.project-create-option-icon .ui-icon { width: 20px; height: 20px; }
.project-participant-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.project-member-search { min-width: 0; height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--muted); }
.project-member-search .ui-icon { width: 17px; height: 17px; }
.project-member-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
.project-invite-button { min-height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 13px; background: var(--accent); color: #fff; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.project-invite-button svg { width: 16px; height: 16px; }
.project-invite-form { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.project-participant-list { display: grid; gap: 7px; }
.project-member-row { min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.project-member-row[hidden] { display: none; }
.project-member-row-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.project-member-row-copy strong,.project-member-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-member-row-copy strong { font-size: 12px; font-weight: 650; }
.project-member-row-copy small { color: var(--muted); font-size: 10px; }
.project-notification-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.project-notification-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.project-notification-list .project-notification-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.project-notification-list .project-notification-row:last-child { border-bottom: 0; }
.project-notification-copy { min-width: 0; display: flex; align-items: center; gap: 10px; }
.project-notification-copy > span:last-child { min-width: 0; display: grid; gap: 3px; }
.project-notification-copy strong,.project-notification-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-notification-copy strong { font-size: 12px; font-weight: 650; }
.project-notification-copy small { color: var(--muted); font-size: 10px; }
.project-notification-copy .project-symbol { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; }
.project-notification-copy .project-symbol .ui-icon { width: 18px; height: 18px; }
.project-notification-actions { display: flex; align-items: center; gap: 8px; }
.project-inherit-button { padding: 6px 8px; border: 0; border-radius: 8px; background: var(--hover); color: var(--muted); font: inherit; font-size: 10px; white-space: nowrap; cursor: pointer; }
.project-dokki-toggle { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--hover); color: var(--muted); cursor: pointer; transition: background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s var(--ease); }
.project-dokki-toggle .ui-icon { width: 19px; height: 19px; }
.project-dokki-toggle.active { border-color: color-mix(in srgb,var(--accent) 55%,var(--line)); background: color-mix(in srgb,var(--accent) 25%,var(--panel)); color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); transform: scale(1.04); }
.project-dokki-toggle:disabled { opacity: .45; cursor: not-allowed; }
.project-members { display: flex; flex-wrap: wrap; gap: 7px; }
.project-member-chip { display: flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 9px 6px 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); font-size: 11px; }
.project-member-avatar { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--hover); color: var(--muted); font-weight: 650; }
.project-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.project-member-remove { width: 21px; height: 21px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .project-member-remove:hover { background: var(--hover); color: var(--text); } }
.project-member-remove .ui-icon { width: 13px; height: 13px; }
.project-chat-page { display: flex; flex-direction: column; min-height: min(68dvh,620px); gap: 10px; }
.project-chat-page .modal-top { flex: 0 0 auto; }
.project-message-list { flex: 1 1 auto; min-height: 180px; max-height: min(56dvh,530px); overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 1px 9px; overscroll-behavior: contain; }
.project-message { max-width: 94%; align-self: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px 15px 15px 5px; background: var(--panel); }
.project-message.own { align-self: flex-end; border-radius: 15px 15px 5px 15px; background: color-mix(in srgb,var(--accent) 17%,var(--panel)); }
.project-message-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.project-message-avatar,.project-queue-avatar { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--hover); color: var(--text); font-size: 10px; font-weight: 650; }
.project-message-head strong { color: var(--text); font-size: 11px; font-weight: 650; }
.project-message-body { overflow-wrap: anywhere; font-size: 13px; line-height: 1.48; }
.project-message-body p { margin: 0 0 7px; }
.project-message-body p:last-child { margin-bottom: 0; }
.project-message-body h1,.project-message-body h2,.project-message-body h3 { margin: 8px 0 5px; font-size: 14px; }
.project-message-status { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.project-message-status button { padding: 0; border: 0; background: transparent; color: #e18181; font: inherit; cursor: pointer; }
.project-queue-preview { display: grid; gap: 5px; max-height: 152px; overflow: auto; padding: 0 2px; }
.project-queue-preview[hidden] { display: none; }
.project-queue-item { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--panel) 85%,transparent); }
.project-queue-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.project-queue-copy strong { color: var(--muted); font-size: 10px; font-weight: 600; }
.project-queue-copy span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-queue-item > button { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--hover); color: var(--muted); cursor: pointer; }
.project-queue-item > button .ui-icon { width: 14px; height: 14px; }
.project-queue-overflow { padding: 1px 4px; color: var(--muted); font-size: 10px; }
.project-queue-preview { gap: 7px; max-height: 240px; padding: 0; overflow: hidden; }
.project-queue-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 5px; font-size: 12px; color: var(--muted); }
.project-queue-heading strong { font-weight: 500; }
.project-queue-heading button { border: 0; background: transparent; color: var(--accent); padding: 4px; font: inherit; font-size: 12px; }
.project-queue-rows { min-height: 0; overflow-y: auto; display: grid; gap: 6px; overscroll-behavior: contain; }
.project-queue-item { min-height: 52px; padding: 8px 10px; border-radius: 18px; background: transparent; }
.project-queue-item.running { border-color: color-mix(in srgb,var(--accent) 40%,var(--line)); }
.project-queue-item .project-queue-avatar { width: 28px; height: 28px; flex-basis: 28px; }
.project-queue-copy strong { font-size: 12px; }
.project-queue-copy span { font-size: 13px; }
.project-queue-item > button.project-queue-cancel { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; aspect-ratio: 1; }
.project-queue-cancel:active { background: var(--panel); }
.project-delivery-status { margin-top: 4px; color: var(--muted); font-size: 11px; text-align: right; }
.project-queue-cancel svg { display: block; width: 14px; height: 14px; }
.project-form textarea { width: 100%; min-height: 140px; max-height: 40dvh; padding: 11px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-size: 16px; }
.project-voice-button .ui-icon { width: 19px; height: 19px; }
.project-pending-files { display: flex; flex-wrap: wrap; gap: 6px; max-height: 108px; overflow-y: auto; }
.project-pending-files[hidden] { display: none; }
.project-pending-file { max-width: 100%; display: inline-flex; align-items: center; gap: 5px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--text); font-size: 11px; }
.project-pending-file > span { overflow: hidden; max-width: 185px; text-overflow: ellipsis; white-space: nowrap; }
.project-pending-file .ui-icon,.project-message-files .ui-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.project-pending-file button { display: grid; place-items: center; padding: 2px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.project-message-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.project-message-files button { max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--hover); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.project-message-files button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-file-card-slot { flex: 0 0 100%; min-width: 0; }
.project-message-files .project-message-image { display: grid; place-items: center; flex: 0 0 100%; width: 100%; min-height: 160px; overflow: hidden; padding: 0; border: 0; border-radius: 15px; background: var(--hover); color: var(--muted); font-size: 12px; }
.project-message-image img { display: block; width: min(100%,320px); max-height: 420px; height: auto; object-fit: contain; }
@media (max-width: 760px) {
  html.keyboard-page-scroll-lock .app-shell { position: fixed; top: var(--web-visual-top,0px); left: 0; width: 100%; }
  .projects-workspace { top: 0; bottom: auto; height: min(100%,var(--form-active-height,var(--chat-active-height,var(--visible-height,100%)))); padding-top: max(10px,var(--app-safe-top)); }
  .projects-workspace > .projects-page { padding-inline: 0; }
  .projects-workspace > .project-chat-page { padding-inline: 0; }
  .project-chat-page { height: 100%; min-height: 0; gap: 8px; }
  .project-message-list { min-height: 0; max-height: none; }
}
@keyframes projectVoicePulse { 50% { box-shadow: 0 0 0 6px #b84d5538; } }
@media (prefers-reduced-motion: reduce) { .project-composer .project-voice-button.recording { animation: none; } }
.project-form { display: grid; gap: 13px; }
.project-settings-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.project-settings-row { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.project-settings-row:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .project-settings-row:hover { background: var(--hover); } }
.project-settings-row > span { display: grid; min-width: 0; gap: 3px; }
.project-settings-row strong { font-size: 14px; font-weight: 650; }
.project-settings-row small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-settings-row > .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--muted); }
.project-settings-row.danger strong { color: #e18181; }
.project-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.project-choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.project-choice-group legend { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.project-icon-choices { display: grid; grid-template-columns: repeat(auto-fill,minmax(48px,1fr)); gap: 9px; }
.project-color-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.project-choice-icon { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); cursor: pointer; transition: background .18s ease,border-color .18s ease,transform .18s var(--ease),box-shadow .18s ease; }
@media (hover: hover) and (pointer: fine) { .project-choice-icon:hover { transform: translateY(-1px); background: var(--hover); } }
.project-choice-icon .project-symbol { width: 40px; height: 40px; border-radius: 12px; }
.project-choice-icon .project-symbol .ui-icon { width: 23px; height: 23px; }
.project-choice-icon.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent); }
.project-choice-color { width: 29px; height: 29px; border: 3px solid var(--panel); border-radius: 50%; outline: 1px solid var(--line); background: var(--choice-color); cursor: pointer; }
.project-choice-color.selected { outline: 2px solid var(--accent); }
.project-new-chat-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.project-new-chat-actions .project-action { flex: 1 1 150px; }
.project-form input { width: 100%; min-height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
.project-form input:focus { border-color: var(--accent); }
.project-form-label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.project-form-label input { width: 100%; min-height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
.project-select { position: relative; z-index: 1; min-width: 0; }
.project-select.open { z-index: 30; }
.project-select-trigger { width: 100%; min-height: 66px; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb,var(--field) 76%,var(--panel)); color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; transition: background .18s ease,border-color .18s ease,box-shadow .18s ease; }
@media (hover: hover) and (pointer: fine) { .project-select-trigger:hover { background: var(--hover); } }
.project-select-trigger:focus-visible { outline: 2px solid color-mix(in srgb,var(--accent) 72%,transparent); outline-offset: 2px; }
.project-select.open .project-select-trigger { border-color: color-mix(in srgb,var(--accent) 68%,var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
.project-select-icon { flex: 0 0 42px; }
.project-select-icon .project-symbol { width: 42px; height: 42px; border-radius: 13px; }
.project-select-icon .project-symbol .ui-icon { width: 22px; height: 22px; }
.project-select-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.project-select-value { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.project-select-description { color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.35; }
.project-select-chevron { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; color: var(--muted); }
.project-select-chevron .ui-icon { width: 17px; height: 17px; transition: transform .22s var(--ease); }
.project-select.open .project-select-chevron .ui-icon { transform: rotate(180deg); }
.project-select-menu { position: absolute; z-index: 32; top: calc(100% + 7px); left: 0; right: 0; display: grid; gap: 4px; max-height: min(320px,42vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb,var(--panel) 97%,var(--bg)); box-shadow: 0 18px 44px #0005,0 2px 8px #0002; animation: projectSelectOpen .18s var(--ease) both; }
.project-select.opens-up .project-select-menu { top: auto; bottom: calc(100% + 7px); transform-origin: bottom; }
.project-select-menu[hidden] { display: none; }
.project-select-option { width: 100%; min-height: 62px; display: grid; grid-template-columns: 40px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 8px 9px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .16s ease; }
.project-select-option:focus-visible { outline: 0; background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .project-select-option:hover { outline: 0; background: var(--hover); } }
.project-select-option.selected { background: color-mix(in srgb,var(--accent) 12%,var(--panel)); }
.project-select-option-icon .project-symbol { width: 38px; height: 38px; border-radius: 12px; }
.project-select-option-icon .project-symbol .ui-icon { width: 20px; height: 20px; }
.project-select-option-copy { min-width: 0; display: grid; gap: 3px; }
.project-select-option-copy strong { font-size: 12px; font-weight: 650; }
.project-select-option-copy small { color: var(--muted); font-size: 10px; line-height: 1.35; white-space: normal; }
.project-select-option-check { width: 18px; height: 18px; display: grid; place-items: center; color: var(--accent); opacity: 0; }
.project-select-option-check .ui-icon { width: 16px; height: 16px; }
.project-select-option.selected .project-select-option-check { opacity: 1; }
@keyframes projectSelectOpen { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .project-choice-icon,.project-select-trigger,.project-select-chevron .ui-icon,.project-select-menu { transition: none; animation: none; } }
.project-copy-link { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.free-upgrade { position: relative; width: calc(100% - 8px); min-height: 76px; margin: 3px 4px 10px; padding: 13px 12px; overflow: hidden; border: 1px solid color-mix(in srgb,#8ab9ff 42%,transparent); border-radius: 17px; background: linear-gradient(115deg,#174984,#1450a3 58%,#173f79); color: #fff; text-align: left; cursor: pointer; isolation: isolate; }
.free-upgrade[hidden] { display: none; }
.free-upgrade::before { content: ""; position: absolute; z-index: -1; inset: -30%; background: radial-gradient(ellipse at 18% 110%,#75b8ff50,transparent 38%),radial-gradient(ellipse at 75% 120%,#a5caff40,transparent 35%); animation: upgradeGlow 6s ease-in-out infinite alternate; }
.upgrade-orbits { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.upgrade-orbits i { position: absolute; bottom: -10px; width: 18px; height: 18px; border-radius: 50%; background: #bdd9ff; opacity: .15; filter: blur(5px); animation: upgradeRise 5s ease-in infinite; }
.upgrade-orbits i:nth-child(1) { left: 18%; animation-delay: -1s; }.upgrade-orbits i:nth-child(2) { left: 54%; width: 12px; height: 12px; animation-delay: -3.6s; }.upgrade-orbits i:nth-child(3) { left: 82%; width: 22px; height: 22px; animation-delay: -2.2s; }.upgrade-orbits i:nth-child(4) { left: 39%; width: 9px; height: 9px; animation-delay: -.5s; }
.upgrade-brand { display: flex; align-items: center; gap: 10px; }
.upgrade-brand > span:last-child { display: grid; gap: 3px; min-width: 0; }
.upgrade-brand b { font-size: 15px; line-height: 1.15; font-weight: 700; }.upgrade-brand b strong { color: #c5ddff; }
.upgrade-brand small { color: #d2e3fb; font-size: 11px; line-height: 1.25; }
.upgrade-mark { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; }
.upgrade-mark img { display: block; width: 32px; height: 32px; object-fit: contain; }
.upgrade-action { position: absolute; top: 8px; right: 10px; padding: 6px 10px; border-radius: 13px; background: #fff; color: #16457d; font-size: 11px; font-weight: 700; transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .free-upgrade:hover .upgrade-action { transform: translateY(-1px); } }
@keyframes upgradeRise { 0% { transform: translateY(0) scale(.75); opacity: 0; } 25% { opacity: .18; } 100% { transform: translateY(-88px) scale(1.2); opacity: 0; } }
@keyframes upgradeGlow { from { transform: translateX(-5%) scale(.95); } to { transform: translateX(5%) scale(1.06); } }
.side-label { padding: 27px 11px 12px; color: var(--text); font-size: 15px; font-weight: 600; }
.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-bottom: calc(64px + var(--footer-safe-gap)); padding-bottom: 100px; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sidebar-scroll::-webkit-scrollbar { display: none; }
.chat-groups { min-height: 0; }
.chat-list { flex: none; min-height: 0; overflow: visible; scrollbar-width: none; }
.chat-load-skeleton { display: none; padding: 7px 11px 12px; }
body.app-starting .chat-load-skeleton, body.chats-loading .chat-load-skeleton { display: grid; gap: 22px; }
body #chatList.loading-more .chat-load-skeleton { display: grid; gap: 22px; }
.chat-load-skeleton i,.message-skeleton i,.history-loading i { display: block; height: 11px; border-radius: 8px; background: color-mix(in srgb,var(--text) 13%,transparent); animation: skeletonPulse 1.25s ease-in-out infinite alternate; }
.chat-load-skeleton i { width: 78%; }.chat-load-skeleton i:nth-child(2) { width: 59%; }.chat-load-skeleton i:nth-child(3) { width: 86%; }.chat-load-skeleton i:nth-child(4) { width: 67%; }.chat-load-skeleton i:nth-child(5) { width: 72%; }.chat-load-skeleton i:nth-child(6) { width: 54%; }
@keyframes skeletonPulse { from { opacity: .45; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .chat-load-skeleton i,.message-skeleton i,.history-loading i { animation: none; } }
.pinned-list { max-height: none; }
.chat-list .chat-item { touch-action: auto; }
.pinned-label { padding-top: 19px; }
.recent-label { padding-top: 19px; }
.pinned-list:not([hidden]) + .recent-label { margin-top: 17px; }
.chat-list::-webkit-scrollbar { display: none; }
.chat-item { display: block; width: 100%; min-height: 43px; padding: 11px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: 15px; line-height: 1.3; transition: background .2s ease; }
@media (hover: hover) and (pointer: fine) { .chat-item:not(.active):hover { background: color-mix(in srgb,var(--hover) 62%,transparent); } }
.chat-item.active { background: var(--hover); }
.chat-item .chat-icon { display: none; }
.chat-item .chat-title { display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-title .title-letter { animation: titleLetterIn .9s cubic-bezier(.22,1,.36,1) both; }
/* буквы проявляются по очереди, цвет каждой проходит фиолетовый и синий тона поля ввода: вместе это бегущая волна */
@keyframes titleLetterIn {
  0% { opacity: 0; color: #8f7fe0; filter: blur(3px); }
  30% { opacity: 1; color: #8f7fe0; filter: blur(0); }
  60% { color: var(--accent); }
  100% { opacity: 1; color: inherit; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .chat-title .title-letter { animation: none; } }
.chat-item { display: flex; align-items: center; gap: 8px; user-select: none; -webkit-user-select: none; }
.chat-item.chat-sort-ghost { opacity: .34; border-style: dashed; border-color: var(--line); background: var(--hover); }
.chat-item.chat-sort-chosen { background: var(--hover); }
.chat-item.chat-sort-drag,.chat-item.chat-sort-fallback { border-color: var(--line); background: var(--panel); box-shadow: 0 18px 38px #0008; opacity: .98; }
.pinned-list.drag-drop-target:empty { min-height: 43px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 11px; }
.pinned-list.drag-drop-target:empty::before { content: 'Перетащите сюда, чтобы закрепить'; color: var(--muted); font-size: 12px; pointer-events: none; }
.chat-unread { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6daeff; }
.message-file-group { position: relative; }
.message-file-menu { position: absolute; z-index: 12; top: calc(100% + 5px); left: 0; min-width: 150px; display: grid; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); box-shadow: 0 10px 30px #0007; }
.message-file-menu[hidden] { display: none; }
.message-file-menu button { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .message-file-menu button:hover { background: var(--hover); } }
.message-file-menu svg { width: 16px; height: 16px; }
.side-bottom { position: absolute; z-index: 4; right: 11px; bottom: 0; left: 11px; padding: 10px 2px var(--footer-safe-gap); background: transparent; }
.preview-badge { display: block; color: var(--faint); font-size: 11px; line-height: 1.35; margin: 0 6px 14px; }
.side-bottom-actions { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 14px; padding-left: 5px; }
.new-chat { height: 46px; min-width: 118px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #ffffff38; border-radius: 24px; background: var(--accent); color: #fff; cursor: pointer; font-size: 16px; font-weight: 600; transition: filter .2s ease, scale .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .new-chat:hover { filter: brightness(1.1); } }
.new-chat svg { width: 20px; height: 20px; }
.main-panel .ai-product-switch { visibility:visible; transition:opacity .24s ease,filter .24s ease,visibility 0s; }
.main-panel.private-chat-active .ai-product-switch { opacity:0; filter:blur(5px); visibility:hidden; pointer-events:none; transition:opacity .24s ease,filter .24s ease,visibility 0s .24s; }
.private-welcome #welcomeTitle { font-size:24px; }
@media (prefers-reduced-motion:reduce) { .main-panel .ai-product-switch,.main-panel.private-chat-active .ai-product-switch { transition:none; } }
/* облачный чат и чат компьютера: вместо «Чат | Поиск» пилюля того же размера с названием проекта или компьютера */
.workspace-pill { position:absolute; z-index:8; left:50%; top:13px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:8px; width:min(244px,calc(100% - 154px)); height:42px; padding:0 16px; border:1px solid var(--line); border-radius:24px; background:var(--panel); color:var(--text); font:inherit; font-size:15px; font-weight:550; white-space:nowrap; cursor:pointer; transition:opacity .24s ease,filter .24s ease,transform .32s cubic-bezier(.32,.72,0,1); }
.workspace-pill[hidden] { display:none; }
.workspace-pill-icon { flex:none; width:18px; height:18px; }
.workspace-pill-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.workspace-pill-dot { flex:none; width:7px; height:7px; border-radius:50%; background:#48b87b; }
.workspace-pill.offline .workspace-pill-dot { background:var(--faint); }
.workspace-pill.offline .workspace-pill-name { color:var(--muted); }
/* пока проект раскрыт из пилюли, сама пилюля прячется: страница растёт прямо из неё */
.workspace-pill.island-hidden { opacity:0; pointer-events:none; }
html.cloud-chat-open .ai-product-switch { display:none; }
.main-panel.private-chat-active .workspace-pill { opacity:0; filter:blur(5px); visibility:hidden; pointer-events:none; }
@media (hover:hover) and (pointer:fine) { .workspace-pill:hover { background:var(--hover); } }
.workspace-pill:active { transform:translateX(-50%) scale(.97); }
/* бейджи под приветствием облачного чата */
.welcome-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:min(520px,calc(100% - 32px)); margin-top:-4px; }
.welcome-badges[hidden] { display:none; }
.welcome-badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; height:30px; padding:0 13px; border:1px solid var(--line); border-radius:15px; color:var(--muted); font-size:13px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.welcome-badge:empty { display:none; }
.welcome-badge .ui-icon { flex:none; width:14px; height:14px; }
/* чаты облака и компьютера в меню: значок перед названием, точка работы справа */
/* компьютер не в сети: значок красится вместе с названием через currentColor */
.chat-item.is-offline .chat-title { color: var(--muted); }
.chat-item.is-remote .chat-title::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -2px; background: currentColor; opacity: .72; mask: var(--ic-monitor, url('icons/monitor.svg')) center / contain no-repeat; -webkit-mask: var(--ic-monitor, url('icons/monitor.svg')) center / contain no-repeat; }
.chat-working { display:grid; place-items:center; flex:0 0 16px; width:16px; height:16px; box-sizing:border-box; }
.chat-working::before { content:""; display:block; width:14px; height:14px; box-sizing:border-box; border:2px solid color-mix(in srgb,var(--accent) 28%,transparent); border-top-color:var(--accent); border-radius:50%; transform-origin:50% 50%; animation:chatWorkingRotate .9s linear infinite; }
@keyframes chatWorkingRotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.chat-working[hidden] { display: none; }
.chat-item.is-working .chat-unread { display: none; }
/* компьютер ждёт ответа человека (вопрос или подтверждение): оранжевая точка «дышит» */
.chat-asking { flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: #f5a142; animation: chatAskingBreathe 2.4s ease-in-out infinite; }
.chat-asking[hidden] { display: none; }
@keyframes chatAskingBreathe { 0%,100% { transform: scale(.86); opacity: .72; box-shadow: 0 0 0 0 rgb(245 161 66 / 45%); } 50% { transform: scale(1.08); opacity: 1; box-shadow: 0 0 0 4px rgb(245 161 66 / 0%); } }
@media (prefers-reduced-motion:reduce) { .chat-asking { animation: none; opacity: 1; } }
@media (prefers-reduced-motion:reduce) { .chat-working::before { animation:none; border-color:var(--accent); } .workspace-pill { transition:none; } }
/* предложение облака под ответом: суть задачи и кнопки «Начать в облаке» / «Не сейчас» */
.cloud-offer { display:grid; gap:12px; margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--panel) 70%,transparent); }
.cloud-offer-head { display:flex; align-items:center; gap:10px; margin:0; font-size:15px; font-weight:650; }
.cloud-offer-head .ui-icon { flex:none; width:20px; height:20px; color:var(--accent); }
.cloud-offer-label { margin:0; color:var(--muted); font-size:14px; line-height:1.45; }
.cloud-offer-summary { margin:0; color:var(--text); font-size:14px; line-height:1.5; white-space:pre-line; }
.cloud-offer-files { margin:0; color:var(--muted); font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.cloud-offer-actions { display:flex; flex-wrap:wrap; gap:8px 10px; }
.cloud-offer button { min-height:38px; padding:6px 16px; border-radius:19px; font:inherit; font-size:14px; font-weight:600; line-height:1.25; text-align:center; cursor:pointer; }
.cloud-offer button:disabled { opacity:.55; cursor:default; }
.cloud-offer-accept { border:0; background:var(--accent); color:#fff; }
.cloud-offer-stay { border:1px solid var(--line); background:transparent; color:var(--text); }
/* суть задачи уже в карточке: тот же текст ответа над ней не повторяется */
.message-body:has(> .cloud-offer:not(.is-done):not(.cloud-result)) > :not(.cloud-offer):not(.work-progress) { display:none; }
.message-body:has(> .cloud-offer:not(.is-done):not(.cloud-result)) > .cloud-offer { margin-top:0; }
.cloud-offer.cloud-result { padding:0; border:0; background:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.cloud-offer.cloud-result .cloud-offer-label { width:100%; }
.cloud-offer.is-done { gap:0; }
@media (hover:hover) and (pointer:fine) { .cloud-offer-accept:hover { filter:brightness(1.08); } .cloud-offer-stay:hover { background:var(--hover); } }
/* запрос разрешения агента на компьютере */
.remote-approval { display:grid; gap:10px; margin:10px 0; padding:14px 16px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel) 70%,transparent); }
.remote-approval-title { margin:0; font-size:14px; font-weight:650; }
.remote-approval-text { margin:0; color:var(--muted); font-size:13px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.remote-approval-text code { display:block; margin-top:6px; padding:8px 10px; border-radius:10px; background:var(--hover); color:var(--text); font-size:12.5px; white-space:pre-wrap; }
.remote-approval-actions { display:flex; flex-wrap:wrap; gap:8px; }
.remote-approval button { min-height:36px; padding:0 15px; border-radius:18px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.remote-approval button:disabled { opacity:.55; cursor:default; }
.remote-approval-allow { border:0; background:var(--accent); color:#fff; }
.remote-approval-deny { border:1px solid var(--line); background:transparent; color:var(--text); }
.remote-approval.resolved .remote-approval-actions { display:none; }
.remote-question-form { display:grid; gap:8px; }
.remote-question-options { display:grid; gap:6px; }
.remote-approval .remote-question-option { display:grid; gap:2px; min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:14px; background:transparent; color:var(--text); font-weight:500; text-align:left; }
.remote-question-option small { color:var(--muted); font-size:12.5px; font-weight:400; line-height:1.35; }
.remote-question-option[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.remote-question-text { box-sizing:border-box; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:transparent; color:var(--text); font:inherit; font-size:14px; resize:vertical; }
.remote-question-text:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent); outline-offset:1px; }
.remote-question-answer { margin:0; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.remote-question.resolved .remote-question-form { display:none; }
@media (hover:hover) and (pointer:fine) { .remote-approval-allow:hover { filter:brightness(1.08); } .remote-approval-deny:hover, .remote-approval .remote-question-option:hover { background:var(--hover); } }
/* компьютер не в сети: полоса над полем ввода */
.remote-offline { display:flex; align-items:center; gap:8px; margin:0 0 8px; background:var(--panel); padding:10px 14px; border:1px solid var(--line); border-radius:14px; color:var(--muted); font-size:13px; line-height:1.4; }
.remote-offline[hidden] { display:none; }
.remote-offline .ui-icon { flex:none; width:16px; height:16px; }
.remote-controls { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.remote-controls[hidden] { display:none; }
.remote-control { position:relative; }
.remote-control-trigger { min-height:30px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:inherit; font:inherit; font-size:13px; cursor:pointer; }
@media (hover: hover) and (pointer: fine) { .remote-control-trigger:hover:not(:disabled) { background:var(--hover); } }
.remote-control-trigger:disabled { opacity:.55; cursor:default; }
.remote-control-menu { position:absolute; left:0; bottom:calc(100% + 6px); z-index:30; display:flex; flex-direction:column; gap:2px; width:min(280px,calc(100vw - 32px)); padding:4px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 8px 28px #0004; }
.remote-control-item { display:flex; flex-direction:column; gap:1px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.remote-control-item small { color:var(--muted); font-size:12px; }
@media (hover: hover) and (pointer: fine) { .remote-control-item:hover { background:var(--hover); } }
.remote-control-item.selected, .remote-control-item.selected:hover { background:var(--menu-selected); }
.remote-queue { display:flex; flex-direction:column; gap:6px; margin:0 0 8px; max-height:30vh; overflow-y:auto; }
.remote-queue[hidden], .remote-queue-stop[hidden] { display:none; }
.remote-queue-list { display:flex; flex-direction:column; gap:6px; }
.remote-queue-list:empty { display:none; }
.remote-queue-stop { align-self:flex-end; min-height:32px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.remote-queue-item { display:flex; align-items:center; gap:8px; background:var(--panel); padding:8px 8px 8px 14px; border:1px solid var(--line); border-radius:14px; }
.remote-queue-body { flex:1; min-width:0; }
.remote-queue-text { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; line-height:1.4; }
.remote-queue-note { color:var(--muted); font-size:12px; line-height:1.35; }
.remote-queue-retry, .remote-queue-remove { flex:none; min-height:32px; border:0; border-radius:10px; background:transparent; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
.remote-queue-retry { padding:0 10px; color:inherit; border:1px solid var(--line); }
.remote-queue-remove { width:32px; font-size:18px; line-height:1; }
@media (hover: hover) and (pointer: fine) { .remote-queue-retry:hover, .remote-queue-remove:hover { background:var(--line); } }
#privateChatDescription { max-width:330px; margin:12px auto 0; padding:0 16px; color:var(--muted); font-size:15px; line-height:1.5; }
#privateChatDescription[hidden] { display:none; }
.side-settings { width: 45px; height: 45px; border-radius: 50%; background: var(--panel); transition: background .2s ease, scale .25s var(--ease); }
.side-settings svg { width: 21px; height: 21px; stroke-width: 1.55; }
.side-account-footer { position: relative; z-index: 1; margin: 0 -2px calc(-1 * var(--footer-safe-gap)); padding: 0 2px var(--footer-safe-gap); background: var(--side); }
.side-account-divider { height: 1px; margin: 0 6px 9px; background: var(--line); }
.side-account { width: 100%; min-height: 54px; padding: 8px 10px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .18s ease; }
@media (hover: hover) and (pointer: fine) { .side-account:hover { background: var(--hover); } }
.side-account > .account-name { min-width: 0; display: flex; align-items: center; align-self: stretch; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #df873f; color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.side-account b { display: block; }
.side-account b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.plan-badge { flex: none; font-size: 20px; line-height: 1.2; font-weight: 650; transform: translateY(1px); background: linear-gradient(165deg,#cceaff,#85c5ff); color: transparent; background-clip: text; -webkit-background-clip: text; }
.plan-badge[data-plan="plus"], .plan-badge[data-plan="super"] { background-image: linear-gradient(165deg,#bfd6ff,#6fa4ff); }
.plan-badge[data-plan="premium"] { background-image: linear-gradient(165deg,#ffe0b9,#ffab61); }
.plan-badge[data-plan="ultra"], .plan-badge[data-plan="unlimited"] { background-image: linear-gradient(165deg,#ffc7c7,#ff7777); }
.plan-badge[data-plan="atlas"] { background-image: linear-gradient(165deg,#f3d9ff,#b98cff); }
.plan-badge[data-plan="trial"], .plan-badge[data-plan="admin"] { background: none; color: var(--muted); }
.trial-summary { margin: 1px 18px 10px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.multi-chat-off { position: relative; flex: 1; min-height: 230px; padding: 24px 11px; }
.chat-skeletons { position: absolute; inset: 16px 11px; display: grid; grid-template-rows: repeat(8,11px); align-content: space-between; opacity: .25; pointer-events: none; mask-image: linear-gradient(to bottom,#000 0 55px,rgba(0,0,0,.08) 100px,rgba(0,0,0,.08) 245px,#000 300px); -webkit-mask-image: linear-gradient(to bottom,#000 0 55px,rgba(0,0,0,.08) 100px,rgba(0,0,0,.08) 245px,#000 300px); }
.chat-skeletons i { display: block; height: 11px; width: 78%; border-radius: 8px; background: var(--muted); }
.chat-skeletons i:nth-child(2) { width: 59%; }.chat-skeletons i:nth-child(3) { width: 86%; }.chat-skeletons i:nth-child(4) { width: 67%; }.chat-skeletons i:nth-child(5) { width: 72%; }.chat-skeletons i:nth-child(6) { width: 54%; }.chat-skeletons i:nth-child(7) { width: 81%; }.chat-skeletons i:nth-child(8) { width: 62%; }
.chat-skeletons i:nth-child(n+3):nth-child(-n+5) { opacity: .22; }
.multi-chat-off-copy { position: absolute; z-index: 1; top: 193px; left: 11px; right: 11px; margin: 0; padding: 0; transform: translateY(-50%); color: var(--text); }
.multi-chat-off-copy strong { display: block; font-size: 15px; font-weight: 600; }
.multi-chat-off-copy p { max-width: 225px; margin: 8px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.multi-chat-off-copy button { min-height: 37px; padding: 0 17px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .multi-chat-off-copy button:hover { background: var(--hover); } }

.backdrop { display: none; }
.main-panel { --composer-space: 90px; position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.main-panel.projects-active,.main-panel.projects-transitioning { overflow: hidden; }
.main-panel > :not(.projects-workspace) { transition: transform .46s cubic-bezier(.22,1,.36,1); }
.main-panel.projects-active > :not(.projects-workspace) { transform: translateX(-100%); }
.projects-workspace { position: absolute; z-index: 12; inset: 0; display: flex; flex-direction: column; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: max(14px,calc(var(--app-safe-top) + 8px)) max(18px,calc(var(--app-safe-right) + 16px)) max(20px,var(--app-safe-bottom)) max(18px,calc(var(--app-safe-left) + 16px)); background: var(--bg); pointer-events: none; transform: translateX(var(--ws-x,100%)); transition: transform .46s cubic-bezier(.22,1,.36,1); scrollbar-width: thin; scrollbar-color: #555 transparent; }
.main-panel.projects-active #projectsWorkspace { pointer-events: auto; transform: translateX(0); }
.projects-workspace.project-chat-active { overflow: hidden; }
.projects-workspace > .projects-page { width: min(900px,100%); min-height: 100%; align-content: start; margin: 0 auto; padding: 4px 4px 24px; }
.projects-workspace > .project-chat-page { width: min(940px,100%); height: 100%; min-height: 0; margin: 0 auto; padding: 4px 4px max(8px,var(--app-safe-bottom)); }
.projects-workspace .modal-top { position: sticky; top: 0; z-index: 4; min-height: 48px; margin: 0 0 4px; padding: 3px 0; background: var(--bg); }
.projects-workspace.project-chat-active .modal-top { position: relative; flex: 0 0 auto; }
/* прилипшая шапка стоит ниже края на padding-top прокрутки (14px или безопасная зона iPhone): полосу над ней закрываем фоном, иначе там виден контент */
:root:not([data-telegram-miniapp="true"]) .projects-workspace:not(.project-chat-active) .modal-top::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: max(64px,calc(var(--app-safe-top) + 24px)); background: var(--bg); pointer-events: none; }
@media (max-width: 760px) {
  :root[data-telegram-miniapp="true"] .projects-workspace { padding-top: 0; }
  :root[data-telegram-miniapp="true"] .projects-workspace > :is(.projects-page,.project-chat-page) { padding-top: 0; }
  :root[data-telegram-miniapp="true"] .projects-workspace .project-modal-top { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: start; min-height: calc(var(--tg-controls-top) + 54px); padding: 0; }
  :root[data-telegram-miniapp="true"] .project-modal-top > :is(.project-back,.project-header-actions) { margin-top: calc(var(--tg-controls-top) + 7px); }
  :root[data-telegram-miniapp="true"] .project-modal-top .project-header-actions { justify-self: end; }
  :root[data-telegram-miniapp="true"] .project-modal-top .modal-title { position: absolute; top: calc(var(--app-device-safe-top) + 3px); left: 50%; width: min(52%,260px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 40px; transform: translateX(-50%); }
  :root[data-telegram-miniapp="true"] .project-create-chat-overlay { padding-top: max(18px,calc(var(--tg-controls-top) + 12px)); }
  :root[data-telegram-miniapp="true"] .expanded-editor,
  :root[data-telegram-miniapp="true"] .modal-layer.library-open .modal { padding-top: max(16px,calc(var(--tg-controls-top) + 12px)); }
  :root[data-telegram-miniapp="true"] .image-viewer #closeImageViewer { top: calc(var(--tg-controls-top) + 7px); }
}
.projects-workspace .project-message-list { max-height: none; }
.projects-workspace .project-screen-entering { animation: projectScreenEnter .34s cubic-bezier(.2,.8,.2,1) both; }
.project-loading-skeleton { display: grid; gap: 10px; }
.project-loading-skeleton i { height: 66px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(100deg,var(--panel) 25%,var(--hover) 43%,var(--panel) 62%); background-size: 220% 100%; animation: projectSkeletonSweep 1.25s ease-in-out infinite; }
@keyframes projectScreenEnter { from { opacity: .35; transform: translate3d(24px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes projectSkeletonSweep { to { background-position-x: -220%; } }
@keyframes projectDialogFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes projectDialogEnter { from { opacity: .65; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .main-panel > :not(.projects-workspace),.projects-workspace { transition-duration: .01ms; } .projects-workspace .project-screen-entering,.project-loading-skeleton i,.project-create-chat-overlay,.project-create-chat-dialog { animation: none; } .project-chat-card,.project-add-chat,.project-header-button,.project-create-chat-option,.project-dokki-toggle { transition-duration: .01ms; } }
.topbar { position: absolute; z-index: 6; top: calc(var(--app-safe-top) + var(--tg-ui-gap)); left: 0; right: 0; height: 66px; padding: 0 max(16px,calc(var(--app-safe-right) + 12px)) 0 max(16px,calc(var(--app-safe-left) + 12px)); display: flex; align-items: center; background: transparent; }
.top-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 9px; }
/* полоса шапки прозрачная и лежит над лентой: забирать клики могут только её кнопки, иначе не нажать то, что видно сквозь неё */
.topbar, .top-actions { pointer-events: none; }
:where(.main-panel:not(.cloud-island) > .topbar > *, .main-panel:not(.cloud-island) > .topbar > .top-actions > *) { pointer-events: auto; }
.chat-edge-fade { --lg-blur: 10px; position: absolute; z-index: 5; left: 0; right: 0; pointer-events: none; -webkit-backdrop-filter: blur(var(--lg-blur)); backdrop-filter: blur(var(--lg-blur)); }
.chat-edge-fade-top {
  top: 0; height: calc(66px + var(--app-safe-top) + var(--tg-ui-gap)); -webkit-backdrop-filter: none; backdrop-filter: none;
  /* кривая (1-t*t)^1.6 смягчает края, под кнопками остаётся около 25% */
  --pwa-edge-tint: linear-gradient(to bottom,var(--bg) 0%,var(--bg) calc(var(--app-safe-top) + 10%),color-mix(in srgb,var(--bg) 98%,transparent) calc(var(--app-safe-top) + 16%),color-mix(in srgb,var(--bg) 94%,transparent) 20%,color-mix(in srgb,var(--bg) 86%,transparent) 30%,color-mix(in srgb,var(--bg) 76%,transparent) 40%,color-mix(in srgb,var(--bg) 63%,transparent) 50%,color-mix(in srgb,var(--bg) 49%,transparent) 60%,color-mix(in srgb,var(--bg) 34%,transparent) 70%,color-mix(in srgb,var(--bg) 27%,transparent) 75%,color-mix(in srgb,var(--bg) 20%,transparent) 80%,color-mix(in srgb,var(--bg) 13%,transparent) 85%,color-mix(in srgb,var(--bg) 7%,transparent) 90%,color-mix(in srgb,var(--bg) 2%,transparent) 95%,transparent 100%);
  --pwa-edge-mask: linear-gradient(to bottom,#000 0%,color-mix(in srgb,#000 98%,transparent) 10%,color-mix(in srgb,#000 94%,transparent) 20%,color-mix(in srgb,#000 86%,transparent) 30%,color-mix(in srgb,#000 76%,transparent) 40%,color-mix(in srgb,#000 63%,transparent) 50%,color-mix(in srgb,#000 49%,transparent) 60%,color-mix(in srgb,#000 34%,transparent) 70%,color-mix(in srgb,#000 27%,transparent) 75%,color-mix(in srgb,#000 20%,transparent) 80%,color-mix(in srgb,#000 13%,transparent) 85%,color-mix(in srgb,#000 7%,transparent) 90%,color-mix(in srgb,#000 2%,transparent) 95%,transparent 100%);
}
.chat-edge-fade-top::before, .chat-edge-fade-top::after { content: ''; position: absolute; inset: 0; }
.chat-edge-fade-top::before { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 28%,#000e 43%,#000a 58%,#0006 72%,#0003 83%,#0001 93%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0%,#000 28%,#000e 43%,#000a 58%,#0006 72%,#0003 83%,#0001 93%,transparent 100%); }
.chat-edge-fade-top::after { background: linear-gradient(to bottom,var(--bg) 0%,var(--bg) 25%,color-mix(in srgb,var(--bg) 91%,transparent) 42%,color-mix(in srgb,var(--bg) 67%,transparent) 59%,color-mix(in srgb,var(--bg) 38%,transparent) 74%,color-mix(in srgb,var(--bg) 12%,transparent) 90%,transparent 100%); }
body.web-app .chat-edge-fade-top { background: transparent; }
body.web-app .chat-edge-fade-top::before { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 42%,#000c 62%,#0005 82%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0%,#000 42%,#000c 62%,#0005 82%,transparent 100%); }
body.web-app .chat-edge-fade-top::after { background: linear-gradient(to bottom,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 76%,transparent) 40%,color-mix(in srgb,var(--bg) 55%,transparent) 64%,color-mix(in srgb,var(--bg) 20%,transparent) 84%,transparent 100%); }
.chat-edge-fade-bottom { bottom: 0; height: clamp(76px,calc(var(--composer-space) - 20px),150px); background: linear-gradient(to top, var(--bg) 0%, color-mix(in srgb,var(--bg) 65%,transparent) 45%, transparent 100%); -webkit-mask-image: linear-gradient(to top,#000 0%,#0008 52%,transparent 100%); mask-image: linear-gradient(to top,#000 0%,#0008 52%,transparent 100%); }
@media (pointer: fine), (min-width: 768px) and (min-height: 768px) {
  .chat-edge-fade-top::before, body.web-app .chat-edge-fade-top::before, .chat-edge-fade-bottom { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chat-edge-fade-top::after, body.web-app .chat-edge-fade-top::after { background: linear-gradient(to bottom,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 20%,color-mix(in srgb,var(--bg) 63%,transparent) 40%,color-mix(in srgb,var(--bg) 47%,transparent) 60%,color-mix(in srgb,var(--bg) 30%,transparent) 80%,color-mix(in srgb,var(--bg) 14%,transparent) 92%,transparent 100%); }
}
.top-round { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb,var(--panel) 88%,transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .2s ease, scale .25s var(--ease); }
.web-app .top-round { background: var(--panel); }
@media (hover: hover) and (pointer: fine) { .top-round:hover { background: var(--hover); } }
.top-round svg { width: 22px; height: 22px; stroke-width: 1.75; }
.top-round .ui-icon, .side-settings .ui-icon { width: 21px; height: 21px; }
.mode-popover { padding: 4px 6px 3px; }
.mode-popover button, .mode-free-current { display: flex; align-items: center; width: 100%; height: 61px; gap: 11px; padding: 7px 9px; border: 0; border-radius: 13px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .18s ease; }
.mode-free-current { height: 43px; cursor: default; background: var(--hover); }
.mode-free-current .ui-icon:first-child { width: 21px; height: 21px; }
.mode-free-current > span:nth-child(2) { flex: 1; }
.mode-free-current b, .mode-free-current small { display: block; }
.mode-free-current b { font-size: 15px; font-weight: 600; }
.mode-free-current small { margin-top: 1px; color: var(--muted); font-size: 12px; }
.mode-free-current .mode-check { opacity: 1; }
.mode-free-note { margin: 4px 9px 5px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.mode-popover button:disabled { color: var(--faint); cursor: default; }
.mode-popover button:disabled:hover { background: transparent; }
.mode-popover button.selected { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .mode-popover button:hover { background: var(--hover); } }
.mode-popover button > .ui-icon:first-child { width: 21px; height: 21px; }
.mode-popover button > span:nth-child(2) { flex: 1; }
.mode-popover b, .mode-popover small { display: block; }
.mode-popover b { font-size: 15px; font-weight: 600; }
.mode-popover small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.mode-check { width: 17px; height: 17px; color: var(--accent); opacity: 0; }
.mode-popover button.selected .mode-check { opacity: 1; }
.conversation { position: absolute; inset: 0; min-height: 0; overflow-y: auto; padding: calc(66px + var(--app-safe-top) + var(--tg-ui-gap)) max(23px,calc(var(--app-safe-right) + 15px)) var(--composer-space) max(23px,calc(var(--app-safe-left) + 15px)); background: transparent; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.message-skeleton { display: none; max-width: 760px; margin: 24px auto; padding: 0 16px; }
.conversation.chat-loading .message-skeleton { display: grid; gap: 22px; align-content: start; animation: skeletonDelay .24s ease .2s both; }
@keyframes skeletonDelay { from { opacity: 0; } to { opacity: 1; } }
.main-panel > .chat-leaving-view { position: absolute; inset: 0; z-index: 0; max-width: none; margin: 0; padding: 0; overflow: hidden; pointer-events: none; }
.chat-leaving-view .message { animation: none !important; }
.message-skeleton .skeleton-message { display: grid; gap: 8px; max-width: 100%; }
.message-skeleton .skeleton-message.assistant { justify-self: start; }
.message-skeleton .skeleton-message.user { justify-self: end; max-width: 82%; }
.message-skeleton i { width: 100%; height: 14px; border-radius: 8px; }
.history-loading { max-width: 760px; margin: 8px auto 17px; padding: 0 16px; gap: 10px; }
.history-loading[aria-busy="true"] { display: grid; }
.history-loading i { height: 9px; width: 46%; }.history-loading i:nth-child(2) { width: 69%; }.history-loading i:nth-child(3) { width: 54%; }
.welcome { height: 77%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; transform: translateY(-18px); }
.welcome-mascot { position: relative; flex: none; width: 76px; height: 68px; display: grid; place-items: start center; }
.welcome-mark { position: absolute; z-index: 1; top: 4px; left: 16px; display: block; width: 44px; height: 44px; object-fit: contain; opacity: .92; transform-origin: 50% 70%; }
.welcome h1 { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 500; letter-spacing: -.3px; }
.welcome-rig { position: absolute; z-index: 1; top: 4px; left: 16px; width: 44px; height: 44px; transform-origin: 50% 70%; --mascot-ink: var(--bg); }
/* холст 272x272 с логотипом 128x128 внутри (viewBox в mascot-rig.js): блок-хозяин равен логотипу, а анимации есть куда вылетать */
.dokky-mascot { position: absolute; left: -56.25%; top: -81.25%; display: block; width: 212.5%; height: 212.5%; overflow: visible; color: #fff; pointer-events: none; }
html[data-theme="light"] .dokky-mascot { color: #121212; }
.m-prop-rim { fill: currentColor; stroke: var(--mascot-ink); stroke-width: 2.6; paint-order: stroke; stroke-linejoin: round; }
.m-prop-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.m-prop-ink { fill: none; stroke: var(--mascot-ink); stroke-width: 2.6; stroke-linecap: round; }
.m-prop-solid { fill: currentColor; }
.m-prop-lid { fill: var(--mascot-ink); stroke: currentColor; stroke-width: 3.2; stroke-linejoin: round; }
.welcome-rig .dokky-mascot { opacity: .92; }
.welcome.typing .welcome-rig { animation: welcomeMarkIn .45s var(--ease) both; }
.message-list { width: 100%; max-width: 760px; margin: 0 auto; padding: 20px 0 5px; }
@media (min-width: 761px) and (pointer: fine) {
  html { --chat-width-factor: .7; --chat-message-max: 1600px; }
  html[data-chat-width="standard"] { --chat-width-factor: 0; --chat-message-max: 760px; }
  html[data-chat-width="wide"] { --chat-width-factor: .8; }
  #conversation > #messageList { width: min(100%,max(760px,calc(100% * var(--chat-width-factor)))); max-width: var(--chat-message-max); }
  html .settings-choice.chat-width-choice { display: block; }
}
.message { display: flex; margin-bottom: 18px; animation: messageIn .35s var(--ease) both; }
.message.history { animation: none; }
.message.user { justify-content: flex-end; }
.message.user { flex-direction: column; align-items: flex-end; }
@media (pointer: coarse) { .message.user .message-body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.message-attachments { display: flex; width: max-content; max-width: min(82%,570px); align-self: flex-end; gap: 8px; margin: 0 0 7px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.message-attachments::-webkit-scrollbar { display: none; }
.message-attachments[hidden] { display: none; }
.message-attachment { flex: 0 0 72px; width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: hidden; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--text); text-decoration: none; cursor: pointer; }
.message-attachment.is-image { padding: 0; }
.message-attachment svg { width: 21px; height: 21px; flex: none; }
.message-attachment span { width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.message-attachment img { width: 100%; height: 100%; object-fit: cover; }
.message-avatar { display: none; }
.message-body { min-width: 0; max-width: 100%; font-size: 16px; line-height: 1.53; overflow-wrap: anywhere; }
.platform-windows .message-body { font-family: inherit; font-weight: 390; }
.platform-windows .message-body :is(strong,b) { font-weight: 700; }
.message.assistant .message-body { width: 100%; }
.message.user .message-body { max-width: min(82%, 570px); background: var(--user); border-radius: 20px; padding: 11px 15px; }
.message p { margin: 0 0 7px; }
.message p:last-child { margin-bottom: 0; }
.message p + p { margin-top: 0; }
.message-body > p:last-of-type { margin-bottom: 0; }
.message h1, .message h2, .message h3 { margin: 15px 0 7px; line-height: 1.25; font-weight: 650; }
.message h1 { font-size: 21px; }
.message h2 { font-size: 18px; }
.message h3 { font-size: 16px; }
.message h4 { font-size: 15px; }
.message h5, .message h6 { font-size: 14px; }
.message a:not(.message-file):not(.message-attachment):not(.product-card):not(.place-card):not(.message-url) { color: inherit; text-decoration: none; }
.message a.message-url { color: var(--message-url); text-decoration: none; }
.message a.message-url:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-label, .rich-reference, .stream-link-pending, .message.user .link-title { text-decoration:none; background-image:var(--link-underline); background-repeat:repeat-x; background-size:10px 2px; background-position:left bottom; padding-bottom:3px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.message a:not(.message-file):not(.message-attachment):not(.product-card):not(.place-card):not(.citation-arrow):not(.message-url):not(.rich-video-card)::after { content: '↗'; display: inline-block; margin-left: 2px; font-size: .72em; font-weight: 600; vertical-align: .1em; text-decoration: none; }
.message ul, .message ol { padding-left: 22px; margin: 5px 0; }
.message li { margin: 3px 0; }
.message li > ul, .message li > ol { margin: 4px 0 6px; padding-left: 20px; }
.message li > p { margin: 4px 0; }
.message li > blockquote { margin: 6px 0; }
.message ul + p, .message ol + p, .message blockquote + p { margin-top: 9px; }
.message hr + h1, .message hr + h2, .message hr + h3, .message hr + h4 { margin-top: 0; }
/* блоки ответа (DESIGN-BLOCKS-1): код и таблица на плашке, цитата - линией, видео и картинки без рамок */
.message blockquote { margin: 14px 0; border-left: 3px solid color-mix(in srgb,var(--text) 30%,transparent); padding-left: 14px; color: var(--text); }
.message code { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: .87em; background: #ffffff18; padding: 2px 4px; border-radius: 4px; }
.code-block { margin: 14px 0; overflow: hidden; border: 0; border-radius: 22px; background: color-mix(in srgb,var(--text) 9%,var(--bg)); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 0; background: color-mix(in srgb,var(--text) 4%,transparent); color: var(--muted); font-size: 12px; font-weight: 600; }
.code-copy { border: 0; border-radius: 7px; padding: 4px 6px; background: transparent; color: inherit; cursor: pointer; font-size: 12px; }
@media (hover: hover) and (pointer: fine) { .code-copy:hover { color: var(--text); background: var(--hover); } }
.code-block .hljs { color: var(--text); white-space: pre; }
.hljs-comment,.hljs-quote { color: #81908a; }
.hljs-keyword,.hljs-selector-tag,.hljs-literal { color: #c792ea; }
.hljs-string,.hljs-regexp,.hljs-addition { color: #a7c080; }
.hljs-number,.hljs-attr,.hljs-symbol { color: #f3b07c; }
.hljs-title,.hljs-built_in,.hljs-type { color: #82aaff; }
.hljs-variable,.hljs-template-variable,.hljs-tag { color: #f07886; }
html[data-theme="light"] :is(.hljs-keyword,.hljs-selector-tag,.hljs-literal) { color: #7c3fa0; }
html[data-theme="light"] :is(.hljs-string,.hljs-regexp,.hljs-addition) { color: #3a6b26; }
html[data-theme="light"] :is(.hljs-number,.hljs-attr,.hljs-symbol) { color: #9a4b10; }
html[data-theme="light"] :is(.hljs-title,.hljs-built_in,.hljs-type) { color: #165ca1; }
html[data-theme="light"] :is(.hljs-variable,.hljs-template-variable,.hljs-tag) { color: #a52b43; }
.code-block pre { overflow-x: auto; margin: 0; padding: 14px 18px 18px; font: 13px/1.55 "SFMono-Regular", ui-monospace, Menlo, monospace; }
.code-block code, html[data-theme="light"] .message .code-block code { background: transparent; padding: 0; }
.message-image { display: block; max-width: min(100%, 550px); max-height: 540px; object-fit: contain; margin: 9px 0; border-radius: 20px; }
.message-image.rich-inline-image { margin: 12px 0; }
.message-image[data-rich-image]:not([src]) { display: none; }
.message.assistant .message-image { cursor: zoom-in; }
.message.assistant { --chat-media-width: min(100%, 390px, max(250px, 34.5dvh)); --chat-media-height: min(480px, 46dvh); }
@media (min-width: 761px) and (min-height: 501px) and (hover: hover) and (pointer: fine) { .message.assistant { --chat-media-width: min(100%, 390px, max(250px, calc(34.5dvh + clamp(0px, calc(320px - 20vw), 35px)))); --chat-media-height: min(480px, calc(46dvh + clamp(0px, calc(320px - 20vw), 32px))); } }
@media (max-width: 760px) { .message.assistant { --chat-media-width: min(100%, 360px, max(250px, 39dvh)); --chat-media-height: min(440px, 52dvh); } }
@media (max-height: 500px) { .message.assistant { --chat-media-width: min(100%, 320px, max(220px, 41dvh)); --chat-media-height: min(260px, 55dvh); } }
.message.assistant .message-body .message-image { width: var(--chat-media-width); height: auto; max-height: var(--chat-media-height); object-fit: contain; }
.image-generation-card { position: relative; width: var(--chat-media-width); aspect-ratio: 3 / 4; max-height: var(--chat-media-height); margin: 10px 0 14px; overflow: hidden; border-radius: 19px; background: transparent; transition: height .72s var(--ease), margin .72s var(--ease), border-radius .72s var(--ease); overflow-anchor: none; }
.image-generation-card.generation-entering { height: 0; margin-top: 0; margin-bottom: 0; }
.image-generation-card::before { content: none; }
.image-generation-dots { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(17,1fr); grid-template-rows: repeat(22,1fr); place-items: center; pointer-events: none; }
.image-generation-dot { width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb,#ae86e2 var(--dot-color-weight,0%),var(--dot-idle)); opacity: var(--dot-opacity,.62); scale: var(--dot-scale,.65); transition: opacity .12s linear, scale .12s linear, background-color .12s linear; }
.generation-started:not(.image-ready) .image-generation-dot { animation: imageDotEnter .65s var(--ease) var(--entry-delay,0s) backwards; }
.image-generation-card.image-ready .image-generation-dot { animation: none; background: #a8a8ae; box-shadow: 0 0 5px #a8a8ae55; opacity: .65; scale: 1; transition-duration: .42s; }
.image-generation-card.dots-leaving .image-generation-dot { opacity: 0; scale: .1; transition-delay: var(--reveal-delay); }
.message.assistant .image-generation-card .message-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; opacity: 0; filter: blur(18px); scale: 1.045; transition: opacity .55s ease, filter .7s var(--ease); }
.message.assistant .image-generation-card.revealing .message-image { opacity: 1; filter: blur(0); scale: 1; }
.image-generation-card.revealing::before { opacity: 0; transition: opacity .75s ease; }
@keyframes imageDotEnter { from { opacity: 0; scale: .2; filter: blur(5px); } to { opacity: var(--dot-opacity,.62); scale: var(--dot-scale,.65); filter: blur(0); } }
@keyframes imageGlowDrift { from { transform: translate3d(-8%,3%,0) rotate(-10deg); } to { transform: translate3d(8%,-4%,0) rotate(12deg); } }
.rich-video-link { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 14px; margin: 9px 0; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .rich-video-link:hover { background: var(--hover); } }
.formatted a.rich-video-card { display:flex; gap:14px; margin:16px 0; color:var(--text); background:none; text-decoration:none; align-items:center; }
.rich-video-thumbnail { position:relative; width:38%; max-width:240px; flex-shrink:0; aspect-ratio:16/9; overflow:hidden; border-radius:18px; background:var(--panel); }
.rich-video-thumbnail img { width:100%; height:100%; object-fit:cover; display:block; }
.rich-video-thumbnail .rich-video-play { position:absolute; inset:auto 8px 8px auto; display:grid; place-items:center; width:28px; height:28px; padding:0 0 0 2px; box-sizing:border-box; background:rgba(0,0,0,.6); border-radius:50%; color:white; font-size:11px; }
.rich-video-copy { min-width:0; display:grid; gap:7px; }
.rich-video-copy strong { font-weight:600; line-height:1.35; }
.rich-video-card .rich-video-title, .rich-video-card .stream-word { background-image:none; padding-bottom:0; }
.rich-video-title::after { content:'↗'; display:inline-block; margin-left:4px; font-size:.78em; font-weight:600; color:var(--muted); vertical-align:.08em; }
.rich-video-copy small { color:var(--muted); font-size:13px; }
@media (max-width:480px) { .formatted a.rich-video-card { gap:12px; } .rich-video-thumbnail { width:42%; border-radius:14px; } }
.rich-video-link .rich-video-play { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
.rich-media { display: block; width: min(100%, 550px); max-height: 540px; margin: 12px 0; border-radius: 14px; }
.message-body u { text-underline-offset: 3px; }
.message-body sub, .message-body sup { font-size: .75em; }
.message-body hr { height: 1px; margin: 16px 0; border: 0; background: var(--line); }
.rich-math { max-width: 100%; overflow-x: auto; margin: 12px 0; padding: 8px 0; background: transparent; white-space: normal; }
.rich-math .katex-display { margin: 0; padding: 4px 0; }
.rich-math .katex,.rich-math-inline .katex { font-size: 1.1em; }
.rich-spoiler { border-radius: 3px; background: var(--muted); color: transparent; cursor: pointer; transition: color .2s ease, background .2s ease; }
.rich-spoiler.revealed { background: transparent; color: inherit; }
.task-list { list-style: none; padding-left: 0; }
.task-list input { margin: 0 7px 0 0; accent-color: var(--accent); }
.message-body details { margin: 9px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.message-body summary { cursor: pointer; font-weight: 600; }
.message-body mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; }
.message-file { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 9px 8px 0 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 14px; cursor: pointer; }
.message-file svg { width: 18px; height: 18px; }
.message-file-group { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-right: 8px; }
.message-file-group .message-file { margin-right: 0; }
.message-file-edit { margin-top: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
.message-actions { display: flex; gap: 10px; margin: 5px 0 0 -4px; }
.message-actions.entering { opacity: 0; transform: translateY(9px); }
.message-actions button { min-width: 0; height: 25px; padding: 0 4px; border: 0; display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--faint); cursor: pointer; font-size: 12px; line-height: 1; transition: color .2s ease, scale .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .message-actions button:hover { color: var(--muted); } }
.message-actions svg { width: 15px; height: 15px; stroke-width: 1.7; }
.message-actions .action-label { font-size: 12px; }
html:not(.voices-on) .message-actions [data-action="speak"] { display: none; }
.message-actions [data-action="speak"].playing { color: var(--text); }
.message-actions [data-action="speak"].loading svg { animation: speech-wait 1s ease-in-out infinite alternate; }
@keyframes speech-wait { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion:reduce) { .message-actions [data-action="speak"].loading svg { animation: none; } }
.status-line { margin: 0 0 9px; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 9px; animation: statusIn .3s var(--ease) both; }
.status-line.stopped { margin: 10px 0 0; animation: none; }
.stream-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.stream-content.formatted { white-space: normal; }
.stream-word { display: inline-block; max-width: 100%; vertical-align: baseline; overflow-wrap: anywhere; }
.stream-link-words { background-image: none; padding-bottom: 0; }
.stream-link-words .stream-word, .stream-link-words .stream-link-gap { background-image: var(--link-underline); background-repeat: repeat-x; background-size: 10px 2px; background-position: left bottom; padding-bottom: 3px; }
.stream-link-words .stream-word { line-height: normal; margin-bottom: -3px; }
.spinner { display: block; flex: 0 0 15px; align-self: center; width: 15px; height: 15px; min-width: 15px; min-height: 15px; max-height: 15px; box-sizing: border-box; border: 1.5px solid #777; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.table-scroll { box-sizing: border-box; width: calc(100% + var(--table-edge-left,0px) + var(--table-edge-right,0px)); max-width: none; overflow-x: auto; margin: 10px calc(-1 * var(--table-edge-right,0px)) 10px calc(-1 * var(--table-edge-left,0px)); padding-inline: var(--table-edge-left,0px) var(--table-edge-right,0px); overscroll-behavior-x: contain; scrollbar-width: none; }
.table-scroll::-webkit-scrollbar { display: none; }
.message table { width: max-content; max-width: none; border: 0; border-radius: 22px; overflow: hidden; background: color-mix(in srgb,var(--text) 9%,var(--bg)); border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.42; }
.message th, .message td { border-bottom: 0; padding: 12px 16px; text-align: left; vertical-align: top; min-width: 0; max-width: 36ch; overflow-wrap: break-word; word-break: normal; }
.message tr:last-child td { border-bottom: 0; }
.message th { background: color-mix(in srgb,var(--text) 4%,transparent); font-size: 13px; font-weight: 650; color: var(--text); letter-spacing: 0; }
.message tbody tr:nth-child(even) { background: color-mix(in srgb,var(--text) 3.5%,transparent); }
@media (hover: hover) and (pointer: fine) { .message tbody tr:hover { background: color-mix(in srgb,var(--text) 4%,transparent); } }
.message td:first-child { font-weight: 570; }

.composer-wrap { position: absolute; z-index: 6; inset: auto 0 0; width: min(792px,100%); margin: 0 auto; padding: 0 16px max(16px,calc(var(--app-safe-bottom) + 8px),env(safe-area-inset-bottom)); background: transparent; }
.composer-wrap { isolation: isolate; }
:is(.composer-wrap,.project-composer-wrap)::before { content: ''; position: absolute; z-index: -1; left: -8%; right: -8%; bottom: -54px; height: 210px; pointer-events: none; opacity: 0; filter: blur(28px); /* пятна гаснут внутри блока, иначе его край виден как срез */ background: radial-gradient(ellipse 50% 78% at 50% 90%,#8f7fe0c8,#8f7fe066 48%,transparent 83%), radial-gradient(ellipse 22% 56% at 30% 88%,#b86dc866,transparent 83%), radial-gradient(ellipse 22% 56% at 70% 88%,#69b8d45c,transparent 83%); transition: opacity .5s ease; }
.main-panel.glow-intro .composer-wrap::before { animation: composerIntro 2.6s ease-out both, composerAurora 4s ease-in-out infinite alternate; }
.main-panel.glow-startup .composer-wrap::before { animation: composerIntro 1.4s ease-out both, composerAurora 2.4s ease-in-out infinite alternate; }
.main-panel.glow-working .composer-wrap::before { animation: composerWorking 3.8s ease-in-out infinite, composerAurora 4.4s ease-in-out infinite alternate; }
.main-panel.glow-finish .composer-wrap::before { animation: composerFinish .95s ease-out both; }
@keyframes composerIntro { 0% { opacity: 0; scale: .85; } 18% { opacity: .7; scale: 1.03; } 100% { opacity: 0; scale: 1; } }
@keyframes composerWorking { 0%,100% { opacity: .6; scale: .98; } 50% { opacity: .88; scale: 1.02; } }
@keyframes composerFinish { 0% { opacity: .55; } 28% { opacity: .7; scale: 1.03; } 100% { opacity: 0; scale: 1; } }
@keyframes composerAurora { from { transform: translate3d(-2%,8px,0) scaleX(.97); } 50% { transform: translate3d(1%,-6px,0) scaleX(1.01); } to { transform: translate3d(2%,6px,0) scaleX(.98); } }
@media (prefers-reduced-motion: reduce) { .image-generation-dot,.composer-wrap::before { animation: none !important; } .image-generation-card,.image-generation-card .message-image,.image-generation-dot { transition-duration: .01ms; } }
.expand-composer { position: absolute; z-index: 1; top: 9px; right: 11px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.expand-composer .ui-icon { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .expand-composer:hover { color: var(--text); } }
.attachment-strip { display: flex; gap: 10px; max-height: 0; overflow: hidden; overflow-x: auto; margin: 0 -14px; padding: 0 14px; scrollbar-width: none; scroll-padding-inline: 14px; opacity: 0; transition: max-height .28s var(--ease), margin .28s var(--ease), padding .28s var(--ease), opacity .18s ease; }
.attachment-strip::-webkit-scrollbar { display: none; }
.attachment-strip.has-files { max-height: 102px; margin-bottom: 7px; padding-block: 7px 9px; opacity: 1; }
.attachment-card { position: relative; flex: none; width: 78px; height: 78px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); animation: attachmentIn .3s var(--ease) both; }
.attachment-card img { width: 100%; height: 100%; object-fit: cover; }
.attachment-card .file-glyph svg { width: 20px; height: 20px; }
.attachment-card .file-glyph { display: grid; width: 100%; height: 100%; place-items: center; padding-bottom: 14px; }
.attachment-card .file-name { position: absolute; bottom: 4px; left: 4px; width: calc(100% - 8px); padding: 3px 0; background: transparent; color: var(--text); font-size: 10px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attachment-card button { position: absolute; top: 2px; right: 2px; width: 23px; height: 23px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #101010d9; color: #fff; cursor: pointer; }
.attachment-card button svg { width: 13px; height: 13px; }
.composer { position: relative; display: flex; align-items: center; gap: 5px; min-height: 56px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 28px; background: var(--field); box-shadow: 0 0 0 1px transparent; transition: height .3s var(--ease), border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.composer-file-drop { display: none; }
.composer.file-drop-active { min-height: 128px; border: 2px dashed var(--text); background: var(--hover); }
.composer.file-drop-active > :not(.composer-file-drop) { visibility: hidden; }
.composer.file-drop-active .composer-file-drop { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: var(--text); font-weight: 600; text-align: center; pointer-events: none; }
.composer.multiline { align-items: flex-end; }
.composer.multiline .composer-icon, .composer.multiline .send-button, .composer.multiline textarea { align-self: flex-end; }
.composer:focus-within, html[data-theme="light"] .composer:focus-within, html:not([data-theme="light"]) body.web-app .composer:focus-within { border-color: var(--composer-focus-ring); box-shadow: 0 0 0 1px var(--composer-focus-ring); }
.composer-icon { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: var(--text); transition: background .2s ease, scale .2s var(--ease); }
.composer-icon, .send-button { align-self: center; }
@media (hover: hover) and (pointer: fine) { .composer-icon:hover { background: #ffffff16; } }
.composer-icon svg { width: 22px; height: 22px; }
.composer textarea { align-self: center; flex: 1; min-width: 0; min-height: 26px; max-height: min(260px,38dvh); padding: 1px 0; resize: none; outline: 0; border: 0; background: transparent; color: var(--text); caret-color: var(--text); font-size: 16px; line-height: 24px; }
.composer .link-editor { align-self:center;flex:1;min-width:0;min-height:26px;max-height:min(260px,38dvh);padding:1px 0;outline:0;border:0;background:transparent;color:var(--text);caret-color:var(--text);font:inherit;font-size:16px;line-height:24px;white-space:pre-wrap;overflow-y:auto;overflow-wrap:anywhere; }
.link-editor:empty::before { content:attr(data-placeholder);color:#9a9a9a;pointer-events:none; }
.composer.multiline .link-editor { align-self:flex-end; }
.composer.recording .link-editor { display:none; }
.link-token { display:inline-flex;align-items:baseline;gap:5px;max-width:min(100%,34ch);vertical-align:baseline;font-weight:550; }
.link-editor .link-token { color:var(--accent);user-select:all;-webkit-user-select:all; }
.link-title { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; }
.link-favicon { width:16px;height:16px;align-self:center;object-fit:contain;flex:none; }
.message.user .link-token { color:inherit;text-decoration:none; }
.message.user .message-body { white-space:pre-wrap; }
.chat-draft { flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted); }
.expanded-editor textarea, .settings-modal input, .checkout-page input, .side-search input { caret-color: var(--text); }
.composer textarea::placeholder { color: #9a9a9a; opacity: 1; }
.voice-button.recording { color: var(--accent); }
.recording-waveform { display: none; flex: 1; min-width: 0; height: 36px; align-items: center; justify-content: space-between; gap: 2px; overflow: hidden; padding: 0 5px; color: #dedede; }
.recording-waveform i { display: block; flex: 1 1 2px; min-width: 2px; max-width: 4px; border-radius: 3px; background: currentColor; opacity: .82; transition: height .08s linear; }
.composer.recording textarea { display: none; }
.composer.recording .recording-waveform { display: flex; animation: waveformIn .18s ease both; }
.composer.recording .voice-button { background: #414141; color: var(--text); }
.composer.recording .voice-button .ui-icon { width: 16px; height: 16px; }
.composer.recording #attachButton { background: #414141; color: var(--text); }
.send-button { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #4c4c4c; color: #dfdfdf; cursor: pointer; transition: background .25s ease, color .25s ease, filter .2s ease, scale .25s var(--ease); }
.send-button.ready, .send-button.busy { background: var(--accent); color: white; }
.send-button svg { width: 21px; height: 21px; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .send-button:hover { filter: brightness(1.12); } }
.send-button:disabled { cursor: default; }

.modal-layer { position: fixed; inset: 0; z-index: 40; width: 100%; height: var(--browser-viewport-height,100dvh); display: none; align-items: center; justify-content: center; padding: 16px; background: #000b; }
.modal-layer.open { display: flex; animation: veilIn .25s ease both; }
.modal-layer.closing { animation: veilOut .23s ease both; }
.modal-layer.plans-open { background: #0008; backdrop-filter: blur(4px); }
.modal-layer.plans-open.closing { animation-duration: .4s; }
.nested-plans-layer { z-index: 41; }
.nested-plans-layer.plans-open { padding: 16px; background: #0008; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-layer.settings-open .modal { transition: transform .38s var(--ease), opacity .33s ease; }
.modal-layer.settings-open.plans-behind .modal { transform: scale(.965); opacity: .8; }
.modal-layer.settings-open { align-items: flex-end; padding: 0; background: #0009; }
.modal-layer.settings-open.open { animation-duration: .18s; }
.modal { width: min(500px,100%); max-height: min(90dvh,var(--browser-viewport-height,100dvh),850px); overflow-y: auto; padding: 21px 18px 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: 0 18px 65px #0009; }
.modal.content-entering { animation: sheetIn .36s var(--ease) both; }
.modal-layer.closing .modal { animation: sheetOut .23s ease both; }
.modal-layer.plans-open .modal.content-entering { animation: plansIn .44s cubic-bezier(.2,.82,.2,1) both; }
.modal-layer.plans-open.closing .modal { animation: plansOut .38s cubic-bezier(.4,0,.2,1) both; }
.modal-layer.settings-open .modal { width: min(560px,100%); height: min(88dvh,calc(var(--browser-viewport-height,100dvh) - var(--app-safe-top) - var(--tg-ui-gap) - 12px)); max-height: min(88dvh,calc(var(--browser-viewport-height,100dvh) - var(--app-safe-top) - var(--tg-ui-gap) - 12px)); margin: 0 auto; border-radius: 25px 25px 0 0; border-bottom: 0; }
.modal-layer.settings-open .modal.content-entering { animation: settingsIn .31s cubic-bezier(.22,1,.36,1) both; }
.modal-layer.settings-open.closing .modal { animation: settingsOut .24s cubic-bezier(.4,0,1,1) both; }
.plans-modal .modal-top { justify-content: flex-end; position: sticky; top: 0; z-index: 10; pointer-events: none; }
.plans-modal .modal-top .modal-close { pointer-events: auto; }
.plans-modal .modal-top > span { display: none; }
.plans-modal { padding-top: 18px; }
.plans-modal .plan-detail { min-height: min(55dvh,440px); }
.plans-modal .plan-cta { margin-top: 2px; }
.modal-top { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.modal-title { font-size: 20px; font-weight: 600; }
.modal-close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #414141; color: white; cursor: pointer; transition: background .2s ease, scale .2s var(--ease); }
.modal-close svg { width: 19px; height: 19px; }
.plan-intro { padding: 4px 10px 21px; text-align: center; }
.plan-intro h2 { margin: 0 0 7px; font-size: 22px; line-height: 1.25; font-weight: 650; }
.plan-intro p { margin: 0; color: var(--muted); font-size: 14px; }
.plan-tabs { position: relative; display: flex; margin-bottom: 15px; padding: 3px; border-radius: 23px; background: #333; }
.plan-tab-indicator { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 20px; background: #484848; transition: transform .32s cubic-bezier(.25,.75,.25,1), width .32s cubic-bezier(.25,.75,.25,1); }
.plan-tabs button { position: relative; z-index: 1; flex: 1; min-width: 0; height: 40px; padding: 0 5px; border: 0; border-radius: 20px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; transition: color .24s ease; }
.plan-tabs button.active { color: var(--text); }
.plan-tabs .plan-badge, .plan-detail h3 .plan-badge, .plan-intro .plan-badge { font-size: inherit; line-height: inherit; font-weight: inherit; }
.plan-stage { position: relative; margin-inline: clamp(14px,6vw,26px); overflow-anchor: none; transition: height .32s cubic-bezier(.25,.75,.25,1); }
.plan-track { position: relative; width: 100%; }
.plan-detail { position: absolute; inset: 0 auto auto 0; width: 100%; min-width: 0; padding: 23px 20px; border: 1px solid var(--line); border-radius: 23px; background: #202020; visibility: hidden; opacity: 0; }
.plan-detail.active { position: relative; visibility: visible; z-index: 2; opacity: 1; }
.plan-detail.active.entering { position: absolute; will-change: transform; }
.plan-detail.leaving { visibility: visible; z-index: 1; opacity: 1; pointer-events: none; will-change: transform; }
.plan-detail.owned-plan { background: #292929; border-color: #353535; }
.plan-cta.plan-cta-owned, .plan-cta.plan-cta-owned:hover, .plan-cta.plan-cta-owned:active { background: transparent; color: var(--text); border: 1px solid var(--line); cursor: default; opacity: 1; pointer-events: none; scale: 1; box-shadow: none; }
.plan-renewal-button { width: 100%; min-height: 42px; margin-top: 8px; border: 0; border-radius: 22px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.plan-renewal-button:disabled { opacity: .6; cursor: default; }
.plan-renewal-note { color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }
.checkout-bottom .checkout-recurring-note { color: var(--text); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.checkout-recurring-consent { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: left; }
.checkout-recurring-consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.checkout-recurring-consent a { color: var(--text); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .plan-renewal-button:not(:disabled):hover { color: var(--text); } }
.plan-detail h3 { margin: 0 0 5px; font-size: 19px; font-weight: 650; }
.plan-description { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.plan-price { font-size: 29px; font-weight: 650; letter-spacing: -.5px; }
.price-discount { color: var(--accent); font-size: 13px; font-weight: 650; letter-spacing: 0; white-space: nowrap; }
.price-discount s { color: var(--muted); font-weight: 450; margin-left: 5px; opacity: .7; }
.plan-period { margin: 3px 0 17px; color: var(--muted); font-size: 13px; }
.plan-cta { width: 100%; min-height: 46px; border: 0; border-radius: 23px; background: #fff; color: #111; font-size: 15px; font-weight: 650; cursor: pointer; transition: background .2s ease, scale .22s var(--ease); }
@media (hover: hover) and (pointer: fine) { .plan-cta:hover { background: #e9e9e9; } }
.plan-features { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; margin: 13px 0; color: var(--text); font-size: 14px; line-height: 1.4; }
.plan-features li.feature-included { color: var(--muted); }
.plan-features li.plan-included-heading { margin: 21px 0 4px; color: var(--text); font-size: 13px; }
.plan-features .ui-icon { width: 17px; height: 17px; margin-top: 1px; }
.plan-feature-help { display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: help; }
.plan-feature-help .ui-icon { flex-shrink: 0; }
.plan-feature-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.plan-feature-tooltip { position: fixed; z-index: 60; max-width: min(290px,calc(100vw - 20px)); padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--text); box-shadow: 0 8px 28px #0003; font-size: 13px; line-height: 1.45; pointer-events: none; animation: veilIn .18s ease both; }
.plan-footnote { margin: 16px 5px 2px; color: var(--faint); text-align: center; font-size: 12px; }
.plan-email { display: block; margin: 14px 3px; color: var(--muted); font-size: 13px; }
.plan-email input { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: #181818; color: var(--text); font-size: 16px; }
.settings-modal, .modal-layer.settings-open .modal { border: 0; background: var(--panel); }
.settings-modal button:active:not(:disabled) { scale: 1; }
.settings-modal .modal-top { position: sticky; top: 0; z-index: 5; align-self: stretch; min-height: 50px; margin: -21px -18px 20px; padding: 8px 18px; background-color: var(--panel); }
.settings-modal .modal-top::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px; background: inherit; pointer-events: none; }
.checkout-layer { position: fixed; z-index: 44; inset: 0; height: var(--browser-viewport-height,100dvh); display: none; background: var(--bg); color: var(--text); }
.checkout-layer.open { display: block; animation: veilIn .2s ease both; }
.checkout-layer.closing { display: block; pointer-events: none; animation: veilOut .24s ease both; }
.checkout-layer.open .checkout-page { animation: settingsPageIn .3s var(--ease) both; }
.checkout-layer.closing .checkout-page { animation: settingsPageOut .24s ease both; }
.checkout-page { width: min(550px,100%); height: var(--browser-viewport-height,100dvh); min-height: 0; margin: 0 auto; padding: max(18px,calc(var(--app-safe-top) + 18px)) 22px max(22px,var(--app-safe-bottom)); display: flex; flex-direction: column; overflow-y: auto; }
.checkout-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.checkout-head button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--panel); color: var(--text); cursor: pointer; }
.checkout-back { display: grid; place-items: center; }
.checkout-back svg { width: 19px; height: 19px; }
.checkout-close svg { vertical-align: middle; }
.checkout-content { padding: 27px 2px 32px; }
.checkout-eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.checkout-content h2 { margin: 0; font-size: 29px; line-height: 1.2; }
.checkout-period { margin: 10px 0 28px; color: var(--muted); font-size: 14px; }
.checkout-price { display: flex; align-items: baseline; justify-content: space-between; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.checkout-price strong { font-size: 27px; }
.checkout-price span { color: var(--muted); font-size: 13px; }
.checkout-content h3 { margin: 27px 0 14px; font-size: 16px; }
.checkout-features { list-style: none; margin: 0; padding: 0; }
.checkout-features li { display: flex; align-items: center; gap: 11px; margin: 12px 0; font-size: 14px; }
.checkout-features .ui-icon { width: 18px; height: 18px; color: var(--muted); }
.topup-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.topup-option { min-height: 75px; display: grid; align-content: center; gap: 5px; padding: 9px; border: 1px solid var(--line); border-radius: 15px; background: var(--field); color: var(--text); text-align: center; cursor: pointer; }
.topup-option[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 15%,var(--field)); }
.topup-option strong { font-size: 18px; }.topup-option span { font-size: 12px; color: var(--muted); }
.checkout-email { display: block; margin-top: 25px; font-size: 13px; color: var(--muted); }
.checkout-email input { width: 100%; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--text); }
.checkout-bottom { margin-top: auto; padding-top: 18px; text-align: center; }
.checkout-pay { width: 100%; min-height: 49px; border: 0; border-radius: 25px; background: var(--hover); color: var(--muted); font-size: 15px; font-weight: 650; cursor: default; }
.checkout-pay.ready { background: var(--accent); color: #fff; cursor: pointer; }
.checkout-bottom p { margin: 12px 0 0; color: var(--faint); font-size: 12px; }
:root[data-telegram-miniapp="true"] .plans-modal .modal-close, :root[data-telegram-miniapp="true"] .checkout-close, :root[data-telegram-miniapp="true"] .checkout-back { display: none; }
:root[data-telegram-miniapp="true"] .checkout-head { justify-content: center; }
:root[data-telegram-miniapp="true"] .settings-modal .modal-close { display: none; }
:root[data-telegram-miniapp="true"] .plans-modal .modal-top { min-height: 0; margin-bottom: 0; }
.settings-modal .modal-title { font-size: 21px; letter-spacing: -.35px; }
.settings-subhead { display: flex; align-items: center; gap: 12px; }
.settings-subhead .modal-title { flex: 1; }
.settings-back { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #414141; color: white; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, scale .2s var(--ease); }
.settings-back svg { width: 19px; height: 19px; }
.setting-chevron svg { width: 18px; height: 18px; stroke-width: 1.8; }
:root[data-telegram-miniapp="true"] .settings-back { display: none; }
.settings-modal.settings-navigating { position: relative; overflow: hidden; padding: 0; }
.settings-nav-new { min-width: 0; }
.settings-navigating > .settings-nav-old, .settings-navigating > .settings-nav-new { position: absolute; inset: 0; width: 100%; min-width: 0; padding: 21px 18px 24px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
html, body { transition: background-color .3s ease; }
.web-app .top-round, .web-app .composer { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root.keyboard-motion body.web-app { --chat-composer-bottom: 8px; }
:root.web-keyboard-open body.web-app { --chat-composer-bottom: 8px; }
.web-auth-open .app-shell { visibility: hidden; }
.browser-landing { position: fixed; z-index: 170; inset: 0; height: var(--browser-viewport-height,100dvh); display: grid; place-items: center; overflow-y: auto; padding: max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom)); background: var(--bg); color: var(--text); }
body.web-app .browser-landing { inset: var(--auth-visual-top,0px) 0 auto; height: var(--auth-active-height,var(--auth-frame-height,var(--browser-viewport-height,100dvh))); }
html:has(body.ios-browser-tab.web-auth-open), html:has(body.ios-browser-tab.web-auth-open) body { height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
@media (max-width: 900px) and (pointer: coarse) {
  html:has(body.web-app.web-auth-open), html:has(body.web-app.web-auth-open) body { height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
}
body.ios-browser-tab.web-auth-open .app-shell { display: none; }
body.ios-browser-tab.web-auth-open .browser-landing { position: fixed; inset: var(--auth-visual-top,0px) 0 auto; height: var(--auth-active-height,var(--auth-frame-height,100dvh)); min-height: 0; overflow: hidden; overscroll-behavior: none; }
html.web-visual-shell body.web-app .modal-layer,html.web-visual-shell body.web-app .checkout-layer,html.web-visual-shell body.web-app .image-viewer,html.web-visual-shell body.web-app .expanded-editor { top: var(--web-visual-top,0px); bottom: auto; height: var(--visible-height,100dvh); }
html.web-visual-shell body.web-app .browser-landing { top: var(--auth-visual-top,0px); bottom: auto; height: var(--auth-active-height,var(--auth-frame-height,100dvh)); }
html.web-keyboard-open body.web-app .browser-landing { align-items: safe center; overflow: hidden; }
html.web-keyboard-open body.web-app .modal { max-height: calc(var(--visible-height,100dvh) - 12px); }
html.web-keyboard-open body.web-app .modal-layer.settings-open .modal { height: min(88dvh,calc(var(--visible-height,100dvh) - 12px)); max-height: calc(var(--visible-height,100dvh) - 12px); }
html.web-keyboard-open body.web-app .checkout-page { height: var(--visible-height,100dvh); }
body.ios-browser-tab.web-auth-open .web-auth-card { min-height: 0; }
body.web-app .browser-landing.auth-keyboard { place-items: safe center; overflow: hidden; padding-top: max(16px,env(safe-area-inset-top)); padding-bottom: 12px; }
body.web-app .browser-landing.auth-keyboard.auth-compact { place-items: start center; }
body.web-app .browser-landing.auth-keyboard.auth-compact .web-auth-card { align-self: start; max-height: max(140px,calc(var(--auth-active-height,100dvh) - max(16px,env(safe-area-inset-top)) - 12px)); overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 12px; }
body.web-app .browser-landing.auth-keyboard.auth-compact .web-auth-card > * { flex-shrink: 0; }
body.web-app .browser-landing.auth-keyboard .web-auth-card { min-height: 0; align-self: center; }
@media (max-width: 760px) and (pointer: coarse) {
  body.web-app.web-auth-open .browser-landing { overflow: hidden; overscroll-behavior: none; }
  body.web-app .browser-landing .web-auth-card { min-height: 0; }
  body.web-app .browser-landing .web-auth-card > * { flex-shrink: 0; }
}
.web-auth-card { position: relative; grid-area: 1 / 1; width: min(100%,390px); min-height: 355px; display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: center; }
.web-auth-card[data-view="welcome"] { position: relative; min-height: 0; }
.web-auth-card[data-view="welcome"] { translate: 0 18px; }
.web-auth-card[data-view="welcome"] .web-auth-top { display: none; }
.web-auth-card[data-view="welcome"] .web-auth-brand { position: absolute; left: 0; right: 0; bottom: calc(100% + clamp(46px,calc(7dvh + 18px),74px)); margin: 0; }
.web-auth-card.leaving { pointer-events: none; }
.web-auth-top { position: absolute; z-index: 3; top: 0; left: 0; text-align: left; }
.web-auth-back { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--field); color: var(--text); cursor: pointer; }
.web-auth-back svg { width: 19px; height: 19px; }
.web-auth-card[data-view="registerCode"],.web-auth-card[data-view="loginCode"],.web-auth-card[data-view="resetCode"],.web-auth-card[data-view="telegramCode"] { text-align: center; }
.web-auth-card[data-view="registerCode"] .web-auth-brand,.web-auth-card[data-view="loginCode"] .web-auth-brand,.web-auth-card[data-view="resetCode"] .web-auth-brand,.web-auth-card[data-view="telegramCode"] .web-auth-brand { justify-content: center; }
.web-auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 35px; font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.web-auth-brand img { width: 36px; height: 36px; object-fit: contain; }
html[data-theme="light"] .web-auth-brand img { filter: invert(1); }
.web-auth-card h1 { margin: 0; font-size: clamp(25px,6.4vw,29px); line-height: 1.22; letter-spacing: -.028em; font-weight: 600; text-wrap: balance; }
.web-auth-card > p:not(.web-auth-error) { max-width: 330px; margin: 10px auto 28px; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.55; text-wrap: balance; }
@media (max-width: 600px) { .web-auth-card h1 { font-size: 33px; line-height: 1.16; letter-spacing: -.032em; } .web-auth-card > p:not(.web-auth-error) { max-width: 340px; margin: 12px auto 30px; font-size: 17px; line-height: 1.5; } }
.web-auth-error { min-height: 0; margin: 0; color: #e45f64; font-size: 13px; line-height: 1.4; }
.web-auth-error:not(:empty) { margin: 0 0 13px; }
.web-auth-card form { display: grid; gap: 15px; }
.web-auth-card label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.web-auth-card .web-code-label { justify-self: start; margin: 0 0 -10px 2px; }
.web-auth-password-group { display: grid; gap: 8px; }
.web-auth-card input { width: 100%; min-height: 56px; padding: 0 22px; border: 1.5px solid var(--line); border-radius: 999px; outline: none; background: var(--field); color: var(--text); font: inherit; font-size: 16px; }
.web-auth-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 17%,transparent); }
.web-auth-card .web-auth-username { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.web-auth-password-field { position: relative; display: block; }
.web-auth-password-field input { padding-right: 58px; }
.web-auth-password-toggle { position: absolute; top: 50%; right: 7px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.web-auth-password-toggle:hover,.web-auth-password-toggle:focus-visible { color: var(--text); background: color-mix(in srgb,var(--text) 7%,transparent); }
.web-auth-password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.web-auth-password-toggle[data-visible="true"] .eye-open { display: none; }
.web-auth-password-toggle[data-visible="true"] .eye-closed { display: block; }
.web-auth-primary,.web-auth-secondary { width: 100%; min-height: 56px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; }
.web-auth-primary { margin-top: 5px; color: var(--bg); background: var(--text); }
.web-auth-secondary { margin-top: 9px; color: var(--text); background: transparent; }
.web-auth-primary:disabled { opacity: .55; cursor: wait; }
.desktop-miniapp-entry a.web-auth-primary,.desktop-miniapp-entry a.web-auth-secondary { display: flex; align-items: center; justify-content: center; padding: 12px 18px; line-height: 1.25; text-decoration: none; transition: background .2s ease, transform .2s var(--ease); }
.desktop-miniapp-entry a.web-auth-primary { background: var(--accent); color: #fff; }
.desktop-miniapp-entry a.web-auth-secondary { border: 1px solid var(--line); background: var(--field); }
@media (hover: hover) and (pointer: fine) { .desktop-miniapp-entry a:hover { transform: translateY(-2px); } }
.web-auth-resend { align-self: center; min-height: 38px; margin: 9px auto 0; padding: 0 10px; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; }
.web-auth-resend:disabled { color: var(--muted); cursor: default; }
.web-code { position: relative; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; width: 100%; margin: 5px 0 9px; cursor: text; }
.web-auth-card[data-view="registerCode"] .web-code,.web-auth-card[data-view="loginCode"] .web-code,.web-auth-card[data-view="resetCode"] .web-code,.web-auth-card[data-view="telegramCode"] .web-code { width: min(100%,350px); margin-inline: auto; }
@media (min-width: 800px) { .modal-layer.settings-open { align-items: center; padding: 28px; } .modal-layer.settings-open .modal { width: min(680px,calc(100vw - 56px)); height: min(800px,calc(var(--browser-viewport-height,100dvh) - 56px)); max-height: calc(var(--browser-viewport-height,100dvh) - 56px); padding: 16px 34px 36px; border-radius: 26px; } .modal-layer.settings-open .modal.settings-navigating { padding: 0; } .settings-navigating > .settings-nav-old,.settings-navigating > .settings-nav-new { padding: 16px 34px 36px; } .settings-modal .modal-top { margin: -16px -34px 16px; padding: 5px 34px; } }
.web-code span { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 18px; background: var(--field); font-size: 24px; font-weight: 650; pointer-events: none; }
.web-code span.active { border-color: color-mix(in srgb,var(--text) 70%,var(--line)); }
.web-code input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 18px; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; text-align: center; opacity: .01; user-select: text; -webkit-user-select: text; touch-action: auto; }
.web-code input::selection { background: transparent; }
.web-auth-card .web-code input:focus,.web-auth-card .web-code input:focus-visible { border: 0; outline: 0; box-shadow: none; }
@media (max-width: 480px) { .web-auth-card { align-self: center; } .web-auth-brand { margin-bottom: 26px; } }
.settings-nav-old::-webkit-scrollbar, .settings-nav-new::-webkit-scrollbar { display: none; }
.settings-navigating > .settings-nav-old { pointer-events: none; animation: settingsPageOut .34s cubic-bezier(.22,1,.36,1) both; }
.settings-navigating > .settings-nav-new { animation: settingsPageIn .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes settingsPageOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(var(--nav-end,-100%)); opacity: 0; } }
@keyframes settingsPageIn { from { transform: translateX(var(--nav-start,100%)); opacity: .75; } to { transform: translateX(0); opacity: 1; } }
.settings-page-content { padding-bottom: max(20px,var(--app-safe-bottom)); }
.settings-page-hint { margin: 3px 3px 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.settings-option-list { display: grid; gap: 8px; }
.settings-option { min-height: 72px; padding: 12px 14px; border: 1px solid color-mix(in srgb,var(--text) 10%,transparent); border-radius: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--field); color: var(--text); text-align: left; cursor: pointer; }
.settings-option span { display: grid; gap: 4px; }
.settings-option b { font-size: 15px; font-weight: 620; }
.settings-option small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.settings-option i { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--muted); border-radius: 50%; }
.settings-option[aria-pressed="true"] { border-color: color-mix(in srgb,var(--accent) 70%,transparent); background: color-mix(in srgb,var(--accent) 10%,var(--field)); }
.settings-option[aria-pressed="true"] i { border: 5px solid var(--accent); }
.settings-data-title { margin: 22px 2px 9px; color: var(--muted); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.settings-data-list { display: grid; gap: 7px; }
.settings-data-item { min-width: 0; padding: 11px 13px; border-radius: 12px; display: grid; gap: 4px; background: var(--field); color: var(--text); text-decoration: none; overflow-wrap: anywhere; font-size: 14px; }
.settings-data-item small { color: var(--muted); font-size: 12px; }
.settings-danger { margin-top: 17px; padding: 9px 13px; border: 1px solid color-mix(in srgb,var(--text) 18%,transparent); border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
.memory-import-entry { margin-top: 10px; }
.memory-groups { gap: 20px; }
.memory-group { min-width: 0; }
.memory-group h3 { margin: 0 3px 8px; font-size: 15px; font-weight: 620; color: var(--text); }
.memory-group ul { margin: 0; padding: 0; list-style: none; border-radius: 14px; background: var(--field); }
.memory-group li { padding: 11px 14px; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.memory-group li + li { border-top: 1px solid var(--line); }
.memory-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.memory-topics span { max-width: 100%; padding: 6px 11px; border-radius: 999px; background: var(--field); color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.memory-empty { margin: 0; padding: 18px 16px; border-radius: 14px; display: grid; gap: 5px; background: var(--field); font-size: 14px; line-height: 1.45; }
.memory-empty b { font-weight: 620; }
.memory-empty span { color: var(--muted); }
.memory-import { display: grid; gap: 22px; min-width: 0; }
.memory-import-step { display: grid; gap: 9px; min-width: 0; }
.memory-import-step b { font-size: 15px; font-weight: 620; }
.memory-import-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.memory-import textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--text); font: inherit; font-size: 16px; line-height: 1.45; resize: vertical; }
.memory-import textarea:focus { outline: none; border-color: color-mix(in srgb,var(--accent) 70%,transparent); }
.memory-import .memory-import-prompt { color: var(--muted); font-size: 14px; resize: none; }
.memory-import-count { color: var(--muted); font-size: 12px; line-height: 1.4; }
.memory-import .memory-import-error { margin: 0; color: #d9534f; font-size: 14px; line-height: 1.4; }
.memory-import .settings-page-hint { margin: 3px 3px 0; }
.memory-import-list { display: grid; gap: 7px; }
.memory-import-item { min-width: 0; padding: 11px 13px; border-radius: 12px; display: flex; align-items: flex-start; gap: 11px; background: var(--field); cursor: pointer; font-size: 14px; line-height: 1.4; }
.memory-import-item input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.memory-import-item > span { min-width: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
.memory-import-item small { color: var(--muted); font-size: 12px; }
.settings-help-card { padding: 17px; border-radius: 17px; background: var(--field); }
.settings-help-card p { margin: 7px 0 15px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.settings-help-card a { color: var(--text); text-decoration: underline dotted; text-underline-offset: 4px; }
.settings-support-email { display: flex; align-items: center; margin-top: 17px; gap: 8px; }
.settings-support-email button { border: 0; background: transparent; color: var(--text); padding: 8px 0; cursor: pointer; font: inherit; }
.settings-support-email button:last-child { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; }
.settings-help-card small { color: var(--muted); font-size: 12px; }
.settings-legal-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 22px 2px 6px; font-size: 12px; line-height: 1.5; }
.settings-legal-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.plan-legal-links { display: flex; justify-content: center; text-align: center; }
.plan-legal-links .settings-legal-links { justify-content: center; text-align: center; margin: 14px 0 6px; }
.checkout-legal-note { font-size: 12px; line-height: 1.5; color: var(--muted); }
.upgrade-note { margin: 14px 0 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--field); color: var(--muted); font-size: 13px; line-height: 1.5; text-align: left; }
.upgrade-note b { display: block; margin-bottom: 4px; color: var(--text); font-size: 13px; font-weight: 600; }
.upgrade-note p { margin: 4px 0 0; overflow-wrap: anywhere; }
.plan-detail .upgrade-note { margin-top: 12px; }
.checkout-commission { margin: 10px 0 0; color: var(--text); font-size: 13px; line-height: 1.45; }
.checkout-legal-note a { color: inherit; text-underline-offset: 3px; }
.settings-profile { display: flex; align-items: center; gap: 13px; margin: 0 0 27px; padding: 17px 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--field); text-align: left; }
.account-identity { display: flex; align-items: center; gap: 14px; margin: 2px 0 24px; }
.account-identity .avatar { width: 58px; height: 58px; font-size: 22px; }
.account-identity span:last-child { display: grid; gap: 4px; min-width: 0; }
.account-identity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.account-identity small { color: var(--muted); font-size: 13px; }
.account-hero { display: flex; align-items: center; gap: 18px; padding: 18px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--field); }
.account-avatar-button { position: relative; flex: none; width: 68px; height: 68px; cursor: pointer; }
.account-avatar-button .avatar { display: grid; place-items: center; width: 68px; height: 68px; font-size: 25px; overflow: hidden; }
.account-avatar-edit { position: absolute; right: -4px; bottom: -3px; width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid var(--field); border-radius: 50%; background: var(--text); color: var(--bg); }
.account-avatar-edit svg { width: 13px; height: 13px; }
.account-hero-copy { min-width: 0; display: grid; gap: 4px; }
.account-hero-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }
.account-hero-copy small { color: var(--muted); font-size: 13px; }
.account-section { margin: 0 0 25px; }
.account-section h3 { margin: 0 2px 7px; font-size: 14px; font-weight: 680; }
.account-section > p { margin: 0 2px 13px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.account-inline-form { display: flex; gap: 8px; }
.account-inline-form input { flex: 1; min-width: 0; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--field); outline: none; }
.account-inline-form input:focus { border-color: var(--accent); }
.account-inline-form button { flex: none; padding: 0 15px; border: 0; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 650; cursor: pointer; }
.account-inline-form button:disabled { opacity: .5; }
.account-connection { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 13px; border: 1px solid var(--line); background: var(--field); color: var(--text); text-align: left; cursor: pointer; }
.account-connection > svg { flex: none; width: 17px; height: 17px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .account-connection:hover { background: var(--hover); } }
.account-connection:first-of-type { border-radius: 15px 15px 0 0; }
.account-connection + .account-connection { border-top: 0; border-radius: 0 0 15px 15px; }
.account-connection > .ui-icon { width: 21px; height: 21px; color: var(--muted); }
.account-connection > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; }
.account-connection b { font-size: 14px; }
.account-connection small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.account-status { flex: none; color: var(--muted); font-size: 11px; }
.account-status.linked { color: var(--accent); }
.account-method-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--field); }
.account-method-list .login-choice { min-height: 72px; border: 0; border-radius: 0; background: transparent; }
.account-method-list .login-choice + .login-choice { border-top: 1px solid var(--line); }
.account-method-list .login-choice > span:first-child { display: grid; flex: 1; min-width: 0; gap: 4px; }
.account-method-list .login-choice.selected { background: color-mix(in srgb,var(--accent) 9%,var(--field)); }
.account-method-list .login-choice:disabled { cursor: default; opacity: .6; }
.account-method-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--line); background: var(--field); }
.account-method-toggle:first-of-type { border-radius: 15px 15px 0 0; }
.account-method-toggle + .account-method-toggle { border-top: 0; border-radius: 0 0 15px 15px; }
.account-method-toggle > span { display: grid; gap: 4px; font-size: 14px; }
.account-method-toggle small { color: var(--muted); font-size: 12px; }
.account-method-toggle button { flex: none; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 12px; cursor: pointer; }
.account-command { display: flex; gap: 8px; margin-top: 14px; }
.account-command input { flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--text); font-size: 14px; }
.account-command button { padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--text); cursor: pointer; }
.account-command button:disabled { opacity: .5; cursor: default; }
.account-danger { width: 100%; min-height: 44px; margin-top: 16px; border: 1px solid color-mix(in srgb,#e85d5d 45%,var(--line)); border-radius: 13px; background: transparent; color: #e66a6a; font-weight: 600; cursor: pointer; }
.web-auth-methods { display: grid; gap: 8px; width: 100%; }
.web-auth-method { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 57px; padding: 12px 22px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--field); color: var(--text); text-align: left; cursor: pointer; }
.web-auth-method small { color: var(--muted); }
.account-link-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 58px; margin-top: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); color: var(--text); text-align: left; cursor: pointer; }
.account-link-row span { display: grid; gap: 3px; font-size: 14px; font-weight: 600; }
.account-link-row small { color: var(--muted); font-size: 12px; font-weight: 400; }
.account-link-row svg { flex: none; width: 17px; height: 17px; color: var(--muted); }
.account-email-form { margin-top: 13px; }
.account-email-form .account-submit { margin-top: 0; }
.account-avatar-pick { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 47px; margin-top: 10px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); cursor: pointer; font-size: 14px; }
.account-avatar-pick .ui-icon { width: 18px; height: 18px; }
.settings-profile-button { width: 100%; color: var(--text); font: inherit; cursor: pointer; }
.settings-profile-button > svg { width: 18px; height: 18px; margin-left: auto; color: var(--muted); }
.account-form { display: grid; gap: 14px; margin-top: 19px; }
.account-form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.account-form input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--field); font: inherit; font-size: 16px; }
.account-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.account-submit { width: 100%; min-height: 47px; margin-top: 14px; border: 0; border-radius: 13px; background: var(--text); color: var(--bg); font: inherit; font-weight: 650; cursor: pointer; }
.account-submit:disabled { opacity: .55; }
.account-logout { width: 100%; margin-top: 24px; padding: 12px; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.settings-profile .avatar { width: 43px; height: 43px; font-size: 17px; }
.settings-profile-copy { min-width: 0; display: grid; gap: 3px; }
.settings-profile strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 600; }
.settings-profile small { color: var(--muted); font-size: 13px; }
.settings-section { margin: 0 0 23px; }
.settings-section h3 { margin: 0 4px 9px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.setting-group { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--field); }
.setting-row { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 0; border-bottom: 1px solid color-mix(in srgb,var(--text) 8%,transparent); background: transparent; color: var(--text); text-align: left; font-size: 15px; }
.setting-row:last-child { border-bottom: 0; }
.setting-row > svg { flex: none; width: 19px; height: 19px; color: var(--muted); }
.setting-row .ui-icon { width: 19px; height: 19px; color: var(--muted); }
.setting-main { display: grid; flex: 1; min-width: 0; gap: 2px; }
.setting-main b { font-size: 15px; font-weight: 550; }
.setting-main small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.setting-value { flex: none; margin-left: auto; color: var(--muted); font-size: 14px; }
.setting-chevron { color: var(--faint); font-size: 24px; line-height: 1; }
.setting-row.clickable { cursor: pointer; transition: background .2s ease; }
.setting-row.clickable.is-tapped { background: transparent; }
@media (hover: hover) and (pointer: fine) { .setting-row.clickable:hover { background: color-mix(in srgb,var(--text) 6%,transparent); } }
.settings-usage { padding: 13px 15px 16px; border-bottom: 1px solid color-mix(in srgb,var(--text) 8%,transparent); }
.settings-usage .setting-row { min-height: 0; padding: 0; border: 0; }
.settings-usage .usage-track { height: 4px; margin: 13px 0 0 31px; background: color-mix(in srgb,var(--text) 12%,transparent); }
.settings-usage .usage-fill { background: var(--accent); }
.settings-usage-note { margin: 9px 0 0 31px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-usage-note + .settings-usage-note { margin-top: 3px; }
.usage-topup { margin: 11px 0 0 31px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.sidebar-topup { display: block; margin: 6px 0 0 32px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.sidebar-topup[hidden] { display: none; }
.scroll-to-bottom { position: absolute; z-index: 5; right: max(20px,calc(var(--app-safe-right) + 16px)); bottom: calc(var(--composer-space,92px) + 18px); width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--text); box-shadow: 0 7px 22px #0003; cursor: pointer; }
.scroll-to-bottom[hidden] { display: none; }
.scroll-to-bottom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.settings-choice.chat-width-choice { display: none; }
.settings-choice { padding: 12px 15px 15px; border-bottom: 1px solid color-mix(in srgb,var(--text) 8%,transparent); }
.settings-choice:last-child { border-bottom: 0; }
.settings-choice .setting-row { min-height: 30px; margin-bottom: 13px; padding: 0; border: 0; }
.settings-segment { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: color-mix(in srgb,var(--text) 9%,transparent); }
.settings-segment button { flex: 1; min-width: 0; min-height: 37px; padding: 5px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 550; transition: background .24s var(--ease), color .2s ease, box-shadow .24s ease; }
.settings-segment button[aria-pressed="true"] { background: var(--field); color: var(--text); box-shadow: 0 1px 4px #0002; }
.setting-switch { flex: none; width: 48px; height: 29px; margin-left: auto; padding: 3px; border: 0; border-radius: 20px; background: color-mix(in srgb,var(--text) 18%,transparent); cursor: pointer; transition: background .25s ease; }
.setting-switch::before { content: ''; display: block; width: 23px; height: 23px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0005; transition: transform .25s var(--ease); }
.setting-switch[aria-checked="true"] { background: var(--accent); }
.setting-switch[aria-checked="true"]::before { transform: translateX(19px); }
.usage-track { height: 3px; margin-top: 10px; border-radius: 3px; background: #484848; }
.usage-fill { height: 100%; border-radius: 3px; background: #c0c0c0; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 90px; transform: translate(-50%,12px); opacity: 0; pointer-events: none; min-width: 150px; padding: 12px 15px; border-radius: 13px; background: #363636; color: var(--text); text-align: center; font-size: 14px; transition: opacity .22s ease, transform .26s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%,0); }
html[data-theme="light"] .toast { background: #f2f2f2; color: #171717; box-shadow: 0 8px 28px #0002; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes messageIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes contentIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes attachmentIn { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes waveformIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes statusIn { from { opacity: 0; filter:blur(4px); transform: translateY(8px); } to { opacity: 1; filter:blur(0px); transform: translateY(0); } }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes veilOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheetOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(18px); } }
@keyframes plansIn { from { opacity: 0; transform: translateY(8px) scale(1.035); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes plansOut { from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } to { opacity: 0; transform: translateY(8px) scale(1.025); filter: blur(5px); } }
@keyframes settingsIn { from { opacity: 1; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes settingsOut { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(100%); } }
@keyframes drawerItem { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes welcomeMarkIn { from { opacity: 0; transform: translateY(5px) scale(.86); } to { opacity: .92; transform: translateY(0) scale(1); } }
.conversation.chat-entering .welcome, .conversation.chat-entering .message-list { animation: contentIn .4s var(--ease) .08s both; }
.conversation.chat-entering .message, .message.message-settled { animation: none; }
.conversation.chat-loading .welcome, .conversation.chat-loading .message-list { opacity: 0; }
.modal,.checkout-page,.settings-page-content,.settings-data-list,.plan-detail,.plan-features,.expanded-editor textarea { scrollbar-width: none; }
.modal::-webkit-scrollbar,.checkout-page::-webkit-scrollbar,.settings-page-content::-webkit-scrollbar,.settings-data-list::-webkit-scrollbar,.plan-detail::-webkit-scrollbar,.plan-features::-webkit-scrollbar,.expanded-editor textarea::-webkit-scrollbar { display: none; }

html[data-theme="light"] {
  color-scheme: light;
  --message-url: #0a66d6;
  --link-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2' viewBox='0 0 10 2'%3E%3Cpath d='M1 1h3' stroke='%23000' stroke-opacity='.34' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --bg: #fff; --side: #f5f5f5; --panel: #eeeeee; --field: #f1f1f1;
  --hover: #e5e5e5; --menu-selected: #f0f0f0; --line: #d7d7d7; --text: #171717; --muted: #696969;
  --dot-idle: #c8c8c8;
  --composer-focus-ring: #a0a0a0;
  .welcome-mark { filter: brightness(0) saturate(100%) invert(7%); }
  --faint: #898989; --user: #dbeaff; --code: #f1f1f1;
}
html[data-theme="light"] .app-loader, html[data-theme="light"] .browser-landing { background: #fff; }
html[data-theme="light"] .app-loader img, html[data-theme="light"] .browser-landing img { filter: brightness(0); }
html[data-theme="light"] .composer { border-color: #e4e4e4; background: #f9f9f9; }
/* счётчик длины: виден только у предела, когда поле уже многострочное и ширина некритична */
.prompt-limit { flex: none; align-self: flex-end; margin: 0 2px 11px; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.prompt-limit.over { color: #e66a6a; }
.composer.over-limit { border-color: color-mix(in srgb,#e85d5d 55%,var(--line)); }
html[data-theme="light"] .top-round { border-color: #e5e5e5; background: color-mix(in srgb,#f9f9f9 88%,transparent); }
html[data-theme="light"] .send-button { background: #f0f0f0; color: #777; }
html[data-theme="light"] .send-button.ready, html[data-theme="light"] .send-button.busy { background: var(--accent); color: #fff; }
html[data-theme="light"] .plan-detail { background: #fff; }
html[data-theme="light"] .plan-detail.owned-plan { background: #ededed; border-color: #dedede; }
html[data-theme="light"] .plan-cta.plan-cta-owned { background: transparent; color: var(--text); }
html[data-theme="light"] .plan-tabs, html[data-theme="light"] .setting-group { background: #e3e3e3; }
html[data-theme="light"] .modal-layer.settings-open .modal { background: #f4f4f4; }
html[data-theme="light"] .settings-modal .modal-top { background-color: #f4f4f4; }
html[data-theme="light"] .settings-profile, html[data-theme="light"] .setting-group { background: #ececec; }
html[data-theme="light"] .plan-badge { background-image: linear-gradient(165deg,#3986ad,#1b668e); }
html[data-theme="light"] .plan-badge[data-plan="plus"], html[data-theme="light"] .plan-badge[data-plan="super"] { background-image: linear-gradient(165deg,#3d70ce,#2858ad); }
html[data-theme="light"] .plan-badge[data-plan="premium"] { background-image: linear-gradient(165deg,#bd6c28,#995016); }
html[data-theme="light"] .plan-badge[data-plan="ultra"], html[data-theme="light"] .plan-badge[data-plan="unlimited"] { background-image: linear-gradient(165deg,#c44d4d,#9e3333); }
html[data-theme="light"] .plan-badge[data-plan="atlas"] { background-image: linear-gradient(165deg,#8a52d6,#5f2fa8); }
html[data-theme="light"] .mode-popover button, html[data-theme="light"] .mode-free-current { color: #454545; }
html[data-theme="light"] .mode-popover button > .ui-icon:first-child { color: #696969; }
html[data-theme="light"] .mode-popover button:disabled { color: #929292; }
html[data-theme="light"] .mode-popover button:disabled > .ui-icon:first-child { color: #a3a3a3; }
html[data-theme="light"] .sidebar-usage .usage-fill { background: #666; }
.chat-context { position: fixed; z-index: 60; min-width: 182px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 12px 32px #0007; }
.chat-context button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: 15px; }
.send-key-menu { min-width: 318px; max-width: calc(100vw - 16px); }
.send-key-menu button[aria-checked="true"] { color: var(--accent); }
.chat-context button svg { width: 18px; height: 18px; flex: none; }
.chat-context { transform-origin: top left; }
.image-viewer { position: fixed; z-index: 180; inset: 0; height: var(--browser-viewport-height,100dvh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: max(64px,env(safe-area-inset-top)) 16px max(30px,env(safe-area-inset-bottom)); background: transparent; }
.image-viewer-backdrop { position: absolute; inset: 0; z-index: 0; background: #0009; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); pointer-events: none; }
.image-viewer img { position: relative; z-index: 1; max-width: 100%; max-height: calc(100% - 70px); min-height: 0; object-fit: contain; border-radius: 8px; }
.image-viewer .viewer-original-image { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 70px); border-radius: 0; }
.viewer-image-placeholder { visibility: hidden; pointer-events: none; }
.image-viewer-file { max-width: 100%; padding: 32px 24px; border: 1px solid #ffffff55; border-radius: 20px; color: #fff; background: #ffffff16; font-size: 19px; overflow-wrap: anywhere; text-align: center; }
.image-viewer a { padding: 10px 18px; border: 1px solid #ffffff55; border-radius: 999px; color: #fff; background: #ffffff18; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .image-viewer a:hover { background: #ffffff30; } }
.image-viewer #closeImageViewer { position: absolute; z-index: 2; top: max(15px,env(safe-area-inset-top)); right: max(15px,env(safe-area-inset-right)); width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #343434; color: #fff; cursor: pointer; }
.image-viewer-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.image-viewer-actions button { padding: 10px 16px; border: 1px solid #ffffff55; border-radius: 999px; color: #fff; background: #ffffff18; cursor: pointer; font: inherit; }
@media (hover: hover) and (pointer: fine) { .image-viewer-actions button:hover { background: #ffffff30; } }
.modal-layer.library-open { align-items: stretch; padding: 0; background: #000b; }
.modal-layer.library-open .modal { width: 100%; height: var(--browser-viewport-height,100dvh); max-height: var(--browser-viewport-height,100dvh); display: flex; flex-direction: column; gap: 14px; padding: max(16px,calc(var(--app-safe-top) + var(--tg-ui-gap) + 10px),env(safe-area-inset-top)) 16px max(16px,var(--app-safe-bottom),env(safe-area-inset-bottom)); overflow: hidden; border: 0; border-radius: 0; background: var(--bg); }
.library-intro { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.library-tabs { display: flex; gap: 7px; overflow-x: auto; flex: none; scrollbar-width: none; }
.library-tabs::-webkit-scrollbar { display: none; }
.library-tabs button { flex: none; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); cursor: pointer; font-size: 13px; }
.library-tabs button[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 18%,var(--panel)); }
.library-content { position: relative; flex: 1; min-height: 0; display: block; overflow: visible; }
.library-content.has-library-overflow { padding-right: 18px; }
.library-scroll { min-width: 0; height: 100%; min-height: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 0; scrollbar-width: none; }
.library-scroll::-webkit-scrollbar { display: none; }
.library-scrollbar { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: 8px; min-height: 0; border-radius: 99px; background: transparent; touch-action: none; cursor: pointer; }
.library-scrollbar span { position: absolute; top: 0; left: 1px; width: 6px; min-height: 26px; border-radius: 99px; background: color-mix(in srgb,var(--muted) 82%,transparent); transition: background .15s ease; }
@media (hover: hover) and (pointer: fine) { .library-scrollbar:hover span { background: color-mix(in srgb,var(--text) 72%,transparent); } }
.library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 3px 1px 0; }
.library-card { position: relative; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; -webkit-touch-callout: none; touch-action: manipulation; }
.library-preview { position: relative; aspect-ratio: 1.12; display: grid; place-items: center; overflow: hidden; background: var(--field); }
.library-preview img { width: 100%; height: 100%; object-fit: cover; }
.library-preview.is-loading::after,.library-skeleton-block::after,.library-skeleton-line::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(105deg,transparent 24%,color-mix(in srgb,var(--text) 10%,transparent) 46%,color-mix(in srgb,var(--text) 17%,transparent) 52%,transparent 72%); animation: libraryShimmer 1.25s ease-in-out infinite; }
.library-preview.is-loading::after { z-index: 1; }
.library-card-skeleton { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.library-skeleton-block { display: block; background: color-mix(in srgb,var(--text) 7%,var(--field)); }
.library-skeleton-line { position: relative; display: block; height: 11px; overflow: hidden; border-radius: 8px; background: color-mix(in srgb,var(--text) 12%,var(--field)); }
.library-skeleton-line::after { content: ""; }
@keyframes libraryShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .library-preview.is-loading::after,.library-skeleton-block::after,.library-skeleton-line::after { animation: none; transform: none; opacity: .4; } }
.library-preview .ui-icon { width: 36px; height: 36px; color: var(--muted); }
.library-card-details { display: grid; gap: 4px; min-width: 0; padding: 10px 11px 12px; }
.library-card-details b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.library-card-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.library-card-star { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #141414c9; color: #ffd47a; font-size: 18px; }
.library-empty { grid-column: 1 / -1; margin: 32px 12px; padding: 0; border: 0; color: var(--muted); background: transparent; text-align: center; font: inherit; font-size: 14px; cursor: default; }
.library-error { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); cursor: pointer; }
.library-load { display: block; min-height: 40px; margin: 0 auto; padding: 0 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--text); cursor: pointer; }
.library-context { position: fixed; z-index: 190; display: grid; min-width: 185px; padding: 5px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: 0 14px 40px #0009; }
.library-context[hidden] { display: none; }
.library-context button { min-height: 39px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .library-context button:hover { background: var(--hover); } }
@media (min-width: 800px) {
  .modal-layer.library-open { align-items: center; justify-content: center; padding: 28px; }
  .modal-layer.library-open .modal { width: min(980px,100%); height: min(820px,calc(var(--browser-viewport-height,100dvh) - 56px)); max-height: calc(var(--browser-viewport-height,100dvh) - 56px); padding: 26px; border: 1px solid var(--line); border-radius: 26px; }
  .library-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
.image-viewer-edit { width: min(520px,100%); display: flex; flex-direction: column; gap: 10px; }
.image-viewer-edit[hidden] { display: none; }
.image-viewer-edit textarea { min-height: 72px; max-height: 28dvh; padding: 14px; border: 1px solid #ffffff55; border-radius: 16px; color: #fff; background: #242424; font: inherit; resize: vertical; }
.image-viewer-edit button { align-self: flex-end; padding: 10px 16px; border: 0; border-radius: 999px; color: #111; background: #fff; cursor: pointer; font: inherit; font-weight: 600; }
.image-viewer:has(.image-viewer-edit:not([hidden])) img { max-height: 48dvh; }
@media (hover: hover) and (pointer: fine) { .chat-context button:hover { background: var(--hover); } }
.chat-context button:disabled { opacity: .4; cursor: default; }
.chat-context button:disabled:hover { background: transparent; }
.chat-context button.danger { color: #ff8585; }
@media (hover: none) {
  .side-settings:hover { background: var(--panel); }
  .top-round:hover { background: color-mix(in srgb,var(--panel) 88%,transparent); }
  .new-chat:hover, .send-button:hover { filter: none; }
  .free-upgrade:hover .upgrade-action { transform: none; }
}
.expanded-editor { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; gap: 10px; padding: max(14px,calc(var(--app-safe-top) + var(--tg-ui-gap) + 14px),env(safe-area-inset-top)) 16px max(16px,var(--app-safe-bottom),env(safe-area-inset-bottom)); background: var(--bg); opacity: 0; visibility: hidden; transform: translateY(12%); transition: opacity .24s ease, transform .32s var(--ease), visibility .32s; }
.expanded-editor.open { opacity: 1; visibility: visible; transform: translateY(0); }
.expanded-editor-head { display: flex; align-items: center; justify-content: space-between; height: 46px; font-size: 17px; font-weight: 600; }
.expanded-editor-head button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--panel); color: var(--text); cursor: pointer; }
.expanded-editor-head button:last-child { background: var(--accent); color: white; }
.expanded-editor textarea { flex: 1; width: 100%; padding: 15px 3px; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font-size: 17px; line-height: 1.5; }
.chat-edit-label { display: block; margin: 15px 0; color: var(--muted); font-size: 14px; }
.chat-edit-label input { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 16px; }
.chat-edit-save { width: 100%; min-height: 44px; border: 0; border-radius: 13px; background: var(--accent); color: white; font-size: 15px; font-weight: 600; cursor: pointer; }
.modal.notification-offer { padding-bottom: 38px; }
.chat-edit-save.danger { background: #b84040; }
.chat-edit-save + .chat-edit-save { margin-top: 8px; }
.chat-edit-save:disabled { opacity: .55; cursor: default; }
html.remote-chat-open #attachButton { display: none; }
/* без кнопки файлов текст прилипал к краю поля */
html.remote-chat-open .composer #prompt { padding-left: 12px; }
.chat-delete-description { margin: 15px 0 22px; color: var(--muted); line-height: 1.4; }
html[data-theme="light"] .plan-tab-indicator { background: #fff; }
html[data-theme="light"] .plan-cta { background: #171717; color: #fff; }
html[data-theme="light"] .modal { border-color: #dedede; }
html[data-theme="light"] .modal-close { background: #ddd; color: #171717; }
html[data-theme="light"] .settings-back { background: #ddd; color: #171717; }
html[data-theme="light"] .side-account-divider { background: #ddd; }
html[data-theme="light"] .message code { background: #00000010; }
html[data-theme="light"] .plans-modal { background: #f7f7f7; }

html[data-theme="light"] .setting-row { border-bottom-color: #00000010; }
html[data-theme="light"] .plan-email input { background: #fff; color: #171717; }
html[data-theme="light"] .plan-badge[data-plan="trial"], html[data-theme="light"] .plan-badge[data-plan="admin"] { background: none; background-image: none; color: var(--muted); -webkit-text-fill-color: currentColor; }

@media (min-width: 761px) {
  html:not([data-theme="light"]) body.web-app .main-panel { --bg: #000; background: #000; }
  html:not([data-theme="light"]) body.web-app .composer { background: #202020; border-color: #303030; }
  body.web-app .top-round, body.web-app .top-round:hover { border-color: transparent; background: transparent; }
  /* ширина и отступы едут одной кривой без длинного хвоста: на хвосте ease-out основная панель перестраивается
     по пикселю и в конце заметен рывок. Содержимое держит свою ширину и не пересобирается */
  .sidebar { --sidebar-motion: .36s cubic-bezier(.4,0,.2,1); overflow: hidden; transition: flex-basis var(--sidebar-motion), width var(--sidebar-motion), padding-inline var(--sidebar-motion); }
  .sidebar > * { min-width: 258px; transition: translate var(--sidebar-motion); }
  .app-shell.sidebar-collapsed .sidebar { flex-basis: 0; width: 0; padding-inline: 0; pointer-events: none; }
  /* уезжает за левый край целиком: сдвиг на свою ширину идёт той же кривой, что и сжатие, край меню и содержимого совпадают */
  .app-shell.sidebar-collapsed .sidebar > * { translate: -100% 0; }
  @media (prefers-reduced-motion: reduce) { .sidebar, .app-shell.sidebar-collapsed .sidebar, .sidebar > * { transition-duration: .01ms; transition-delay: 0s; } }
  .topbar { top: var(--app-safe-top); height: 58px; }
  .conversation { padding-top: calc(58px + var(--app-safe-top)); }
  .chat-edge-fade-top { height: calc(64px + var(--app-safe-top)); }
}
@media (min-width: 761px) and (display-mode: browser) {
  html.menu-v2:not(.ios-standalone):not([data-telegram-miniapp="true"]):not([data-theme="light"]) body.web-app .main-panel { --bg: #141414; background: var(--bg); }
}
@media (min-width: 1000px) {
  .sidebar { flex-basis: 374px; width: 374px; padding-inline: 22px; }
  .sidebar > * { min-width: 330px; }
}
html.ios-standalone:not([data-theme="light"]) body.web-app,
html.menu-v2[data-telegram-miniapp="true"]:not([data-theme="light"]) { --bg: #000; --side: #000; }
html.ios-standalone:not([data-theme="light"]) body.web-app .main-panel,
html.menu-v2[data-telegram-miniapp="true"]:not([data-theme="light"]) .main-panel { --bg: #000; background: #000; }
html.ios-standalone:not([data-theme="light"]) body.web-app .app-shell.menu-open .main-panel { --bg: var(--side); background: var(--side); }
html.ios-standalone:not([data-theme="light"]) body.web-app .composer,
html.ios-standalone:not([data-theme="light"]) body.web-app .top-round,
html.menu-v2[data-telegram-miniapp="true"]:not([data-theme="light"]) .composer,
html.menu-v2[data-telegram-miniapp="true"]:not([data-theme="light"]) .top-round { background: #202020; border-color: #373737; }
@media (max-width: 760px) {
  .app-shell { position: relative; --drawer-width: min(80vw,350px); --drawer-progress: 0; --drawer-x: 0px; --drawer-offset: -20px; --drawer-corner: 0px; --drawer-opacity: .45; --drawer-overlay-opacity: 0; }
  :root.chat-keyboard-overlay .app-shell,
  :root.chat-keyboard-overlay body.web-app .app-shell,
  :root.chat-keyboard-overlay.ios-standalone body.web-app .app-shell { height: var(--chat-rest-height,var(--visible-height,100dvh)); }
  :root.chat-keyboard-overlay .conversation,
  :root.chat-keyboard-overlay .composer-wrap,
  :root.chat-keyboard-overlay .chat-edge-fade-bottom { bottom: max(0px,calc(var(--chat-rest-height,var(--visible-height,100dvh)) - var(--chat-active-height,var(--visible-height,100dvh)))); }
  body.web-app .app-shell, html.ios-standalone body.web-app .app-shell { position: fixed; top: var(--web-visual-top,0px); left: 0; width: 100%; height: var(--visible-height,var(--browser-viewport-height,100dvh)); overflow: clip; }
  .app-shell.menu-open { --drawer-progress: 1; --drawer-x: var(--drawer-width); --drawer-offset: 0px; --drawer-corner: 28px; --drawer-opacity: 1; --drawer-overlay-opacity: .31; }
  body.web-app.sidebar-open { background: var(--side); }
  .app-shell.menu-open .main-panel { --bg: var(--side); background: var(--side); }
  :root[data-telegram-miniapp="true"] { --tg-ui-gap: 8px; --tg-controls-top: max(40px,calc(var(--app-device-safe-top) + 40px),var(--app-content-safe-top)); }
  .app-shell::after { content: ''; position: absolute; z-index: 4; inset: 0; border: 1px solid #292929; border-radius: var(--drawer-corner) 0 0 var(--drawer-corner); opacity: var(--drawer-progress); pointer-events: none; transform: translate3d(var(--drawer-x),0,0); transition: transform .48s var(--ease), border-radius .48s var(--ease), opacity .2s ease; }
  html[data-theme="light"] .app-shell::after { border-color: #d8d8d8; }
  .sidebar { position: absolute; inset: 0 auto 0 0; z-index: 2; width: var(--drawer-width); padding-top: calc(38px + var(--app-safe-top) + var(--tg-ui-gap)); opacity: var(--drawer-opacity); transform: translateX(var(--drawer-offset)); transition: transform .47s var(--ease), opacity .37s ease; }
  .app-shell.menu-open:not(.drawer-opened-by-swipe) .side-top, .app-shell.menu-open:not(.drawer-opened-by-swipe) .side-link, .app-shell.menu-open:not(.drawer-opened-by-swipe) .sidebar-usage, .app-shell.menu-open:not(.drawer-opened-by-swipe) .side-label, .app-shell.menu-open:not(.drawer-opened-by-swipe) .side-bottom { animation: drawerItem .39s var(--ease) both; }
  .app-shell.menu-open:not(.drawer-opened-by-swipe) .chat-item.entering { animation: drawerItem .42s var(--ease) var(--drawer-delay,0ms) both; }
  .main-panel { position: absolute; inset: 0; z-index: 3; width: 100%; overflow: hidden; will-change: transform; transform: translate3d(var(--drawer-x),0,0); border-radius: var(--drawer-corner) 0 0 var(--drawer-corner); transition: transform .48s var(--ease), border-radius .48s var(--ease); }
  body.web-app .main-panel { overflow: clip; }
  .main-panel::after { content: ''; position: absolute; inset: 0; z-index: 4; background: #000; opacity: var(--drawer-overlay-opacity); pointer-events: none; border-radius: inherit; transition: opacity .48s ease; }
  html[data-theme="light"] .main-panel::after { background: #fff; }
  .backdrop.open { display: block; position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--drawer-x); width: calc(100% - var(--drawer-x)); background: transparent; cursor: pointer; transition: left .48s var(--ease), width .48s var(--ease); }
  .app-shell.drawer-dragging::after, .app-shell.drawer-dragging .sidebar, .app-shell.drawer-dragging .main-panel, .app-shell.drawer-dragging .main-panel::after, .app-shell.drawer-dragging .backdrop { transition: none !important; }
  .topbar { height: 64px; padding: 0 max(14px,calc(var(--app-safe-right) + 12px)) 0 max(14px,calc(var(--app-safe-left) + 12px)); }
  body.web-app .topbar { top: var(--app-safe-top); }
  body.web-app .sidebar { padding-top: calc(42px + var(--app-safe-top)); }
  body.web-app .conversation { padding-top: calc(68px + var(--app-safe-top)); }
  body.web-app .chat-edge-fade-top { height: calc(58px + var(--app-safe-top)); }
  html.ios-standalone body.web-app .chat-edge-fade-top { height: calc(72px + var(--app-safe-top)); }
  html.ios-standalone body.web-app .chat-edge-fade-top::before { z-index: 0; -webkit-mask-image: var(--pwa-edge-mask); mask-image: var(--pwa-edge-mask); }
  html.ios-standalone body.web-app .chat-edge-fade-top::after { z-index: 1; background: var(--pwa-edge-tint); }
  :root[data-telegram-miniapp="true"] .sidebar { padding-top: max(72px,calc(var(--tg-controls-top) + 12px)); }
  :root[data-telegram-miniapp="true"] .topbar { top: var(--tg-controls-top); height: 54px; }
  :root[data-telegram-miniapp="true"] .top-actions { transform: none; }
  :root[data-telegram-miniapp="true"] .top-round { width: 44px; height: 44px; }
  :root[data-telegram-miniapp="true"] .conversation { padding-top: calc(var(--tg-controls-top) + 54px); }
  :root[data-telegram-miniapp="true"] .chat-edge-fade-top { height: calc(var(--tg-controls-top) + 54px); }
  .top-round { width: 44px; height: 44px; }
  .conversation { padding: calc(64px + var(--app-safe-top) + var(--tg-ui-gap)) max(15px,calc(var(--app-safe-right) + 12px)) var(--composer-space) max(15px,calc(var(--app-safe-left) + 12px)); }
  .message-list { padding: 20px 0 6px; }
  .message { margin-bottom: 15px; }
  .message-body { font-size: 16px; line-height: 1.5; }
  .message.user .message-body { max-width: 85%; padding: 10px 14px; }
  .message-actions { margin-top: 4px; }
  .welcome h1 { font-size: 17px; }
  body { --chat-composer-gutter: clamp(12px,calc(max(var(--app-safe-bottom),env(safe-area-inset-bottom)) + 4px),32px); --chat-composer-left: max(var(--chat-composer-gutter),calc(var(--app-safe-left) + 12px),calc(env(safe-area-inset-left) + 12px)); --chat-composer-right: max(var(--chat-composer-gutter),calc(var(--app-safe-right) + 12px),calc(env(safe-area-inset-right) + 12px)); --chat-composer-bottom: max(16px,calc(var(--app-safe-bottom) + 8px),env(safe-area-inset-bottom)); }
  .composer-wrap { padding: 0 var(--chat-composer-right) var(--chat-composer-bottom) var(--chat-composer-left); }
  body.web-app { --chat-composer-right: max(var(--web-composer-side,16px),calc(var(--app-safe-right) + 10px)); --chat-composer-bottom: max(12px,var(--app-safe-bottom),env(safe-area-inset-bottom)); --chat-composer-left: max(var(--web-composer-side,16px),calc(var(--app-safe-left) + 10px)); }
  html.ios-viewport-clipped body.web-app { --chat-composer-bottom: 16px; }
  html.ios-viewport-clipped.web-keyboard-open body.web-app { --chat-composer-bottom: 8px; }
  .attachment-strip { margin-inline: -10px; }
  .composer { min-height: 54px; padding: 6px 7.5px; border-radius: 28px; }
  .composer.multiline { padding-bottom: 7.5px; }
  .composer-icon { width: 39px; height: 39px; }
  .composer-icon svg { width: 21px; height: 21px; }
  .composer textarea { font-size: 16px; line-height: 23px; min-height: 25px; }
  .send-button { width: 39px; height: 39px; }
  .send-button svg { width: 20px; height: 20px; }
  .modal-layer, .nested-plans-layer.plans-open { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: min(92dvh,var(--browser-viewport-height,100dvh)); border-radius: 29px 29px 0 0; border-bottom: 0; padding: 17px 16px max(24px,var(--app-safe-bottom),env(safe-area-inset-bottom)); }
  .modal-layer.settings-open .modal:not(.settings-navigating) { padding-top: 10px; }
  .settings-modal .modal-top { margin: -10px -16px 16px; padding: 5px 16px; }
  .settings-navigating > .settings-nav-old,.settings-navigating > .settings-nav-new { width: 100%; min-width: 100%; max-width: 100%; padding: 10px 16px 24px; }
  .plans-modal { --plans-close-top: max(16px,env(safe-area-inset-top)); height: var(--browser-viewport-height,100dvh); max-height: var(--browser-viewport-height,100dvh); padding: var(--plans-close-top) 16px max(22px,var(--app-safe-bottom),env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: #1b1b1b; }
  :root[data-telegram-miniapp="true"] .plans-modal { padding-top: max(88px,calc(var(--app-safe-top) + var(--tg-ui-gap) + 64px)); }
  .plans-modal .modal-top { margin-bottom: 10px; }
  .plans-modal .plan-intro { margin-bottom: 6px; }
  .settings-modal { height: 93dvh; max-height: 93dvh; }
  .modal-layer.settings-open .modal { height: min(88dvh,calc(var(--browser-viewport-height,100dvh) - var(--app-safe-top) - var(--tg-ui-gap) - 12px)); max-height: min(88dvh,calc(var(--browser-viewport-height,100dvh) - var(--app-safe-top) - var(--tg-ui-gap) - 12px)); }
  :root[data-telegram-miniapp="true"] .modal-layer.settings-open .modal { height: min(88dvh,calc(var(--browser-viewport-height,100dvh) - var(--tg-controls-top) - 12px)); max-height: min(88dvh,calc(var(--browser-viewport-height,100dvh) - var(--tg-controls-top) - 12px)); }
  .modal-layer.settings-open.settings-form-focused { top: var(--settings-visual-top,0px); bottom: auto; height: var(--settings-visual-height,100dvh); transition: none; }
  .modal-layer.settings-open.settings-form-focused .modal { height: max(1px,min(88dvh,calc(var(--settings-visual-height,100dvh) - var(--settings-safe-top,0px) - 12px))); max-height: max(1px,min(88dvh,calc(var(--settings-visual-height,100dvh) - var(--settings-safe-top,0px) - 12px))); overflow-y: auto; overscroll-behavior: contain; transition: transform .38s var(--ease), opacity .33s ease; }
  :root[data-telegram-miniapp="true"] .modal-layer.settings-open { height: var(--settings-rest-height,var(--browser-viewport-height,100dvh)); }
  :root[data-telegram-miniapp="true"] .modal-layer.settings-open .modal { height: max(1px,min(88%,calc(var(--settings-rest-height,100dvh) - var(--tg-controls-top) - 12px))); max-height: max(1px,min(88%,calc(var(--settings-rest-height,100dvh) - var(--tg-controls-top) - 12px))); }
  :root[data-telegram-miniapp="true"] .modal-layer.settings-open.settings-form-focused { top: var(--settings-visual-top,0px); height: var(--settings-rest-height,100dvh); }
  :root[data-telegram-miniapp="true"] .modal-layer.settings-open.settings-form-focused .modal { padding-bottom: max(24px,var(--settings-keyboard-inset,0px)); }
  :root.form-keyboard-overlay body.web-app .app-shell { height: var(--form-rest-height,var(--visible-height,100dvh)); }
  :root.form-keyboard-overlay body.web-app .modal-layer.open,
  :root.form-keyboard-overlay body.web-app .checkout-layer.open { top: var(--web-visual-top,0px); bottom: auto; height: var(--form-rest-height,100dvh); }
  :root.form-keyboard-overlay body.web-app .modal-layer.settings-open { --form-docked-top: min(var(--form-sheet-top,0px),max(12px,calc(var(--form-active-height,100dvh) - 132px))); align-items: flex-start; padding-top: var(--form-docked-top); }
  :root.form-keyboard-overlay body.web-app .modal-layer.settings-open .modal { height: max(120px,min(var(--form-sheet-height,88dvh),calc(var(--form-active-height,100dvh) - var(--form-docked-top) - 8px))); max-height: max(120px,calc(var(--form-active-height,100dvh) - var(--form-docked-top) - 8px)); overflow-y: auto; scroll-padding-bottom: 18px; }
  :root.form-keyboard-overlay body.web-app .modal-layer.default-open { align-items: flex-start; padding-top: max(16px,calc((var(--form-active-height,100dvh) - var(--form-default-height,0px)) / 2)); }
  :root.form-keyboard-overlay body.web-app .modal-layer.default-open .modal { max-height: max(120px,calc(var(--form-active-height,100dvh) - 32px)); }
  :root.form-keyboard-overlay body.web-app .checkout-page { height: var(--form-active-height,100dvh); min-height: 0; }
  :root.form-keyboard-overlay body.web-app .checkout-page .checkout-content { min-height: 0; flex: 1; overflow-y: auto; }
  :root.form-keyboard-overlay body.web-app .checkout-page .checkout-bottom { flex: none; }
  :root.form-keyboard-overlay body.web-app .expanded-editor.open { bottom: max(0px,calc(var(--form-rest-height,100dvh) - var(--form-active-height,100dvh))); }
  .modal-layer.plans-open .modal { transform-origin: 50% 55%; }
  :root[data-telegram-miniapp="true"] .checkout-page { padding-top: calc(var(--app-safe-top) + var(--tg-ui-gap) + 54px); }
}
@media (display-mode: standalone) and (max-width: 760px) {
  body.web-app .chat-edge-fade-top { height: calc(72px + var(--app-safe-top)); }
  body.web-app .chat-edge-fade-top::before { z-index: 0; -webkit-mask-image: var(--pwa-edge-mask); mask-image: var(--pwa-edge-mask); }
  body.web-app .chat-edge-fade-top::after { z-index: 1; background: var(--pwa-edge-tint); }
}
@media (max-width: 390px) {
}
@media (max-width: 340px) {
  .top-round { width: 40px; height: 40px; }
  .top-actions { gap: 5px; }
  .sidebar-usage-heading { flex-wrap: wrap; }
  .sidebar-usage-heading > span:last-child { margin-left: auto; }
  .composer { gap: 2px; padding-inline: 5px; }
  .composer-icon { width: 36px; }
  .send-button { width: 37px; height: 37px; }
  .plan-tabs button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.ui-share { --icon: var(--ic-share, url('icons/share.svg')); }
.ui-square-plus { --icon: var(--ic-square-plus, url('icons/square-plus.svg')); }
.side-top::after { left: 6px; right: 6px; bottom: 0; background: var(--line); }
.sidebar-scroll { padding-top: 8px; }
.brand { align-items: center; line-height: 1.2; }
.brand .plan-badge { line-height: inherit; transform: none; }
.pwa-install { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom)); background: #000b; }
.pwa-install[hidden] { display: none; }
.pwa-install-card { position: relative; width: min(420px,100%); max-height: 100%; overflow-y: auto; padding: 28px 22px 22px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px #0008; -webkit-overflow-scrolling: touch; animation: sheetIn .32s var(--ease) both; }
.pwa-install-close { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--hover); color: var(--text); }
.pwa-install-close svg { width: 17px; height: 17px; }
.pwa-install-app-icon { width: 64px; height: 64px; border-radius: 15px; }
.pwa-install-card h2 { margin: 16px 0 6px; font-size: 23px; line-height: 1.17; letter-spacing: -.4px; }
.pwa-install-card > p { margin: 0 0 21px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.pwa-install-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pwa-install-steps li { display: flex; align-items: flex-start; gap: 13px; font-size: 15px; line-height: 1.35; }
.pwa-install-steps li > span:last-child { padding-top: 3px; }
.pwa-install-steps small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.pwa-install-step-icon { flex: none; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--field); color: var(--text); }
.pwa-install-step-icon .ui-icon { width: 21px; height: 21px; }
.pwa-install-result { display: flex; align-items: center; gap: 11px; margin: 23px 0 17px; padding: 11px; border-radius: 15px; background: var(--field); font-size: 13px; line-height: 1.4; }
.pwa-install-result img { flex: none; width: 43px; height: 43px; border-radius: 10px; }
.pwa-install-done { width: 100%; min-height: 45px; border: 0; border-radius: 13px; background: var(--accent); color: #fff; font: inherit; font-weight: 650; }

@media (max-width: 760px) {
  html.ios-iphone-standalone body.web-app .sidebar { --footer-safe-gap: 16px; }
  html.ios-iphone-standalone body.web-app { --chat-composer-right: max(var(--pwa-composer-side,28px),var(--app-safe-right)); --chat-composer-bottom: var(--pwa-composer-bottom,28px); --chat-composer-left: max(var(--pwa-composer-side,28px),var(--app-safe-left)); }
  html.ios-iphone-standalone body.web-app .modal-layer.default-open .modal,
  html.ios-iphone-standalone body.web-app .modal-layer.settings-open .modal { padding-bottom: 16px; }
  html.ios-iphone-standalone body.web-app .browser-landing { padding-top: 24px; padding-bottom: 24px; }
html.ios-iphone-standalone body.web-app .browser-landing.auth-keyboard { padding-top: max(16px,env(safe-area-inset-top)); padding-bottom: 12px; }
html.ios-iphone-standalone body.web-app .modal-layer.default-open .modal.notification-offer { padding-bottom: 38px; }
}
@media (pointer: coarse) { html,body { touch-action: pan-x pan-y; } }
.sidebar-usage-context { display: block; margin: 0 0 0 32px; color: var(--muted); font-size: 12px; line-height: 1.4; text-wrap: pretty; }
.sidebar-usage-context[hidden] { display: none; }
.projects-workspace .project-modal-top :is(.project-back,.project-header-button,.modal-close) { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--hover); color: var(--text); transition: background .18s ease,transform .18s var(--ease); }
@media (hover: hover) and (pointer: fine) { .projects-workspace .project-modal-top :is(.project-back,.project-header-button,.modal-close):hover { background: color-mix(in srgb,var(--hover) 78%,var(--text)); transform: none; } }
.projects-workspace .project-modal-top :is(.project-back,.project-header-button,.modal-close) .ui-icon { width: 18px; height: 18px; }
@media (min-width: 761px) {
  .projects-workspace > .projects-page .project-modal-top {
    width: var(--project-header-width,100%);
    margin-inline: calc((100% - var(--project-header-width,100%))/2);
  }
  .projects-workspace .project-modal-top :is(.project-back,.project-header-button,.modal-close) {
    border: 0; background: transparent; box-shadow: none;
  }
  .projects-workspace .project-modal-top :is(.project-back,.project-header-button,.modal-close) .ui-icon { width: 21px; height: 21px; }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .projects-workspace .project-modal-top :is(.project-back,.project-header-button,.modal-close):hover { background: var(--hover); }
}
.project-index-page { gap: 20px; }
.project-section h3.project-section-title { font-size: 16px; font-weight: 680; }
.project-section-title h2 { margin: 0; font-size: 16px; font-weight: 680; letter-spacing: -.15px; }
.project-section-title > span { display: inline-flex; align-items: center; gap: 7px; }
.project-list-edit { min-height: 36px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .18s ease,color .18s ease; }
.project-list-edit:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .project-list-edit:hover { background: var(--hover); } }
.project-list-edit[aria-pressed="true"] { color: var(--accent); }
.projects-workspace :is(.project-add-chat,.project-list-edit,.project-header-button,.project-back,.modal-close,.project-dialog-close,.project-chat-drag,.project-row-drag) { transform: none; scale: 1; }
.projects-workspace :is(.project-add-chat,.project-list-edit,.project-header-button,.project-back,.modal-close,.project-dialog-close,.project-chat-drag,.project-row-drag).is-pressed { scale: 1; }
.projects-workspace :is(.project-header-button,.project-back,.modal-close,.project-dialog-close) > :is(svg,.ui-icon) { display: block; margin: 0; }
.project-list,.project-chats { display: grid; gap: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.project-row { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; overflow: hidden; border: 0; border-radius: 14px; transition: background .16s ease,opacity .2s ease,transform .2s var(--ease); }
.project-row:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .project-row:hover { background: var(--hover); } }
.project-row::after,.project-chat-card::after { content: ''; position: absolute; bottom: 0; left: 64px; right: 0; height: 1px; background: color-mix(in srgb,var(--line) 65%,transparent); pointer-events: none; }
.project-row:last-child::after,.project-chat-card:last-child::after { display: none; }
.project-row:last-child,.project-chat-card:last-child { border-bottom: 0; }
.project-card { min-width: 0; min-height: 68px; display: flex; gap: 11px; padding: 10px 11px; border: 0; border-radius: 0; background: transparent; }
@media (hover: hover) and (pointer: fine) { .project-card:hover { background: transparent; transform: none; } }
.project-card .project-symbol { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; }
.project-card-copy { flex: 1; align-content: center; }
.project-card-copy strong { font-size: 15px; }
.project-card-copy small { overflow: hidden; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.project-card > .project-avatar-stack { margin-left: auto; }
.project-row-drag,.project-chat-drag { width: 38px; height: 100%; min-height: 54px; display: none; place-items: center; align-self: stretch; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); cursor: grab; touch-action: none; }
.project-list.editing .project-row-drag,.project-chats.editing .project-chat-drag { display: grid; }
.project-list.editing .project-row,.project-chats.editing .project-chat-card { grid-template-columns: minmax(0,1fr) 38px; }
.project-row-drag:active,.project-chat-drag:active { cursor: grabbing; background: var(--hover); }
.project-chat-card { position: relative; min-width: 0; min-height: 68px; display: grid; grid-template-columns: minmax(0,1fr); gap: 0; overflow: hidden; padding: 0; border: 0; border-radius: 14px; background: transparent; }
@media (hover: hover) and (pointer: fine) { .project-chat-card:hover { background: var(--hover); border-color: var(--line); } }
.project-chat-card:active,.project-chat-card.is-opening { transform: none; }
.project-chat-open { width: 100%; min-height: 68px; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; padding: 9px 11px; }
.project-chat-open .project-symbol { border-radius: 50%; }
.project-chat-card > .project-symbol { width: 42px; height: 42px; border-radius: 13px; }
.project-chat-card-copy { gap: 4px; }
.project-chat-card-copy strong { font-size: 15px; }
.project-chat-card-copy small { overflow: hidden; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.project-chat-unread { min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 650; }
.project-chat-list-heading h2 { margin: 0; font-size: 16px; font-weight: 680; }
@media (max-width: 760px) {
  .projects-workspace { --project-list-left: calc(max(18px,calc(var(--app-safe-left) + 16px)) + 4px); --project-list-right: calc(max(18px,calc(var(--app-safe-right) + 16px)) + 4px); }
  .project-list,.project-chats { min-width: 0; margin-left: calc(-1 * var(--project-list-left)); margin-right: calc(-1 * var(--project-list-right)); }
  .project-row,.project-chat-card { border-radius: 0; }
  .project-card,.project-chat-open { padding-left: calc(var(--project-list-left) + 11px); padding-right: calc(var(--project-list-right) + 11px); }
  .project-row::after,.project-chat-card::after { left: calc(var(--project-list-left) + 64px); right: var(--project-list-right); }
  .project-list.editing .project-card,.project-chats.editing .project-chat-open { padding-right: 11px; }
}
.project-onboarding { width: min(530px,100%); min-height: min(62vh,620px); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; padding: 30px 22px; text-align: center; }
.project-onboarding-mark { margin-bottom: 18px; }
.project-onboarding-mark .project-symbol { width: 62px; height: 62px; border-radius: 20px; }
.project-onboarding-mark .ui-icon { width: 29px; height: 29px; }
.project-onboarding h1 { max-width: 480px; margin: 0; font-size: clamp(23px,5vw,30px); line-height: 1.15; letter-spacing: -.55px; }
.project-onboarding p { max-width: 460px; margin: 12px 0 21px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.project-onboarding-cta { min-height: 46px; padding: 0 20px; background: var(--text); color: var(--bg); font-size: 14px; }
.project-onboarding > small { max-width: 360px; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.project-context { position: fixed; z-index: 120; width: min(248px,calc(100vw - 16px)); display: grid; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--panel) 97%,var(--bg)); box-shadow: 0 18px 50px #0005; opacity: 0; transform: translateY(5px) scale(.98); transform-origin: top left; transition: opacity .14s ease,transform .18s var(--ease); }
.project-context[hidden] { display: none; }
.project-context.visible { opacity: 1; transform: translateY(0) scale(1); }
.project-context button { min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .project-context button:hover { background: var(--hover); } }
.project-context button.danger { color: #e18181; }
.project-context button svg { width: 18px; height: 18px; flex: 0 0 18px; }
.project-context button span { min-width: 0; }
.project-row,.project-chat-card { transition: background .2s ease; }
.project-row.chat-sort-ghost,.project-chat-card.chat-sort-ghost { opacity: .34; background: var(--hover); }
.project-row.chat-sort-chosen,.project-chat-card.chat-sort-chosen { background: var(--hover); }
.chat-item,.project-row,.project-chat-card { -webkit-touch-callout: none; }
.project-row.chat-sort-drag,.project-chat-card.chat-sort-drag,
.project-row.chat-sort-fallback,.project-chat-card.chat-sort-fallback { border-radius: 11px; background: var(--panel); box-shadow: 0 18px 38px #0008; opacity: .98; }
.chat-sort-fallback,.chat-sort-fallback * { animation: none !important; transition: none !important; }
.project-participant-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.project-member-row { min-height: 66px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.project-member-row:last-child { border-bottom: 0; }
.project-member-open { width: 100%; min-height: 66px; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .project-member-open:hover { background: var(--hover); } }
.project-member-open > .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--muted); }
.project-member-open .project-member-avatar { width: 40px; height: 40px; flex: 0 0 40px; font-size: 14px; }
.project-member-row-copy strong { font-size: 14px; }
.project-member-row-copy small { font-size: 12px; }
.project-profile-page { width: 100%; }
.project-profile-card { display: grid; justify-items: center; padding: 20px 14px 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); text-align: center; }
.project-profile-avatar { width: 76px; height: 76px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--hover); color: var(--text); font-size: 26px; font-weight: 650; }
.project-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.project-profile-card h2 { margin: 10px 0 2px; font-size: 19px; }
.project-profile-card p { margin: 0; color: var(--muted); font-size: 13px; }
.project-profile-details { display: grid; gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.project-profile-details > div { min-height: 53px; display: grid; align-content: center; gap: 3px; padding: 8px 13px; border-bottom: 1px solid var(--line); }
.project-profile-details > div:last-child { border-bottom: 0; }
.project-profile-details dt { color: var(--muted); font-size: 11px; }
.project-profile-details dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.project-profile-projects { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.project-profile-invite { min-width: 0; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.project-profile-invite:last-child { border-bottom: 0; }
.project-profile-invite > span { min-width: 0; display: flex; align-items: center; gap: 9px; }
.project-profile-invite .project-symbol { width: 38px; height: 38px; flex: 0 0 38px; }
.project-profile-invite strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.project-profile-invite > .ui-icon { width: 18px; height: 18px; color: var(--accent); }
.project-select-value,.project-select-option-copy strong { font-size: 14px; }
.project-select-description,.project-select-option-copy small { font-size: 12px; }
.project-select-option { min-height: 66px; }
.project-select.opens-up .project-select-menu { animation-name: projectSelectOpenUp; }
.project-select-menu.closing { animation: projectSelectClose .15s ease both; pointer-events: none; }
@keyframes projectSelectOpenUp { from { opacity: 0; transform: translateY(5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes projectSelectClose { to { opacity: 0; transform: translateY(-4px) scale(.985); } }
.projects-workspace .project-chat-page { gap: 10px; }
.project-attach-menu { position: absolute; z-index: 16; left: 4px; bottom: calc(100% + 9px); width: min(245px,calc(100vw - 34px)); display: grid; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: 0 16px 40px #0004; animation: projectSelectOpen .18s var(--ease) both; }
.project-attach-menu[hidden] { display: none; }
.project-attach-menu button { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .project-attach-menu button:hover { background: var(--hover); } }
.project-attach-menu .ui-icon { width: 18px; height: 18px; color: var(--muted); }
.project-voice-note { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.project-voice-note audio { width: min(280px,100%); height: 38px; }
.project-voice-duration { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.project-voice-note button { min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--hover); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.project-voice-note button:disabled { opacity: .55; }
.project-voice-expired { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.project-voice-expired button { padding: 0 3px; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.project-voice-transcript { margin-top: 7px; padding: 9px 10px; border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--hover); color: var(--text); font-size: 13px; line-height: 1.45; }
.project-voice-transcript[hidden] { display: none; }
@media (max-width: 760px) {
  .project-onboarding { min-height: min(60vh,520px); padding-inline: 10px; }
  .project-chat-card-copy small { max-width: min(58vw,390px); }
  .project-context { width: min(260px,calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .project-context,.project-select-menu.closing,.project-attach-menu { transition: none; animation: none; }
}
.projects-workspace .project-message-list { flex: 1 1 0; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto; gap: 0; padding: 20px 0 12px; overflow-x: hidden; overflow-y: auto; scroll-padding-block: 16px; }
.project-message.message { flex: 0 0 auto; width: 100%; max-width: 100%; align-self: stretch; align-items: flex-end; gap: 9px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.project-message.message.own { flex-direction: row; justify-content: flex-end; background: transparent; }
.project-message-content { min-width: 0; max-width: calc(100% - 37px); overflow-wrap: anywhere; }
.project-message.own .project-message-content { max-width: min(82%,570px); }
.project-message.user .message-body { max-width: 100%; }
.project-message.peer .message-body { background: var(--panel); border-radius: 20px; padding: 11px 15px; }
.project-message.assistant .project-message-content { flex: 1; }
.project-message.assistant .message-body { background: transparent; padding: 0; }
.project-message .project-message-body { font-size: 16px; line-height: 1.53; }
.project-message .project-message-body h1 { font-size: 21px; }
.project-message .project-message-body h2 { font-size: 18px; }
.project-message .project-message-body h3 { font-size: 16px; }
.project-message-avatar,.project-dokki-avatar { flex: 0 0 28px; width: 28px; height: 28px; align-self: flex-end; margin-bottom: 2px; }
.project-dokki-avatar { display: grid; place-items: center; }
.project-dokki-avatar img { width: 28px; height: 28px; object-fit: contain; }
.project-composer { flex: 0 0 auto; width: 100%; max-width: 760px; margin: 0 auto; }
.project-chat-page > .project-status,.project-chat-page > .project-queue-preview,.project-chat-page > .project-pending-files { flex: 0 0 auto; width: 100%; max-width: 760px; margin-inline: auto; }
.project-chat-page > .project-status { font-size: 12px; line-height: 1.45; }
.project-chat-page > .project-status[hidden] { display: none; }
.project-message-body .table-scroll { max-width: none; }
.project-message-body .code-block { max-width: 100%; }
.project-composer .composer-icon { background: transparent; border: 0; color: var(--text); }
.project-composer .project-dokki-toggle { transition: background .2s ease,color .2s ease; }
.project-dokki-toggle img { width: 23px; height: 23px; object-fit: contain; }
.project-composer .project-dokki-toggle.active { background: var(--accent); color: white; }
.project-message-status { font-size: 13px; line-height: 1.5; }
@media(max-width:680px){ .project-message .project-message-body { font-size: 15px; } }

html[data-theme="light"] .project-dokki-avatar img,html[data-theme="light"] .project-dokki-toggle:not(.active) img { filter: brightness(0); }
.project-composer .project-dokki-toggle { width: 40px; height: 40px; flex: 0 0 40px; box-shadow: none; transform: none; }

/* в Telegram используем нативную BackButton, общий обработчик оставляем */
:root[data-telegram-miniapp="true"] .projects-workspace :is(.project-back,[data-project-close],.project-dialog-close) { display: none; }
.project-edge-fade { display: none; }
.projects-workspace .project-modal-top .modal-title.project-chat-title { position: absolute; top: 50%; left: 50%; width: max-content; max-width: calc(100% - 128px); height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 21px; background: var(--panel); color: var(--text); line-height: 38px; font-size: 15px; font-weight: 600; transform: translate(-50%,-50%); }
.project-chat-title .project-title-copy { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* кнопки поверх истории, область скролла не обрезаем */
.projects-workspace.project-chat-active { padding: 0; }
.projects-workspace.project-chat-active > .project-chat-page { position: relative; width: 100%; height: 100%; padding: 0; gap: 0; overflow: clip; }
.project-chat-page > .chat-edge-fade { z-index: 4; }
/* рабочая область проекта уже уменьшена общим контроллером клавиатуры */
:root.chat-keyboard-overlay .project-chat-page > .chat-edge-fade-bottom { bottom: 0; }
@media(max-width:760px){
  :root.chat-keyboard-overlay .projects-workspace.project-chat-active { bottom: max(0px,calc(var(--chat-rest-height,var(--visible-height,100dvh)) - var(--chat-active-height,var(--visible-height,100dvh)))); }
}
.projects-workspace.project-chat-active .project-message-list { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; padding: calc(var(--app-safe-top) + var(--tg-ui-gap) + 82px) max(15px,calc((100% - 760px)/2)) var(--project-composer-space,110px); scrollbar-width: none; background: transparent; }
@media (min-width: 761px) and (pointer: fine) {
  .projects-workspace.project-chat-active .project-message-list { padding-inline: max(23px,calc((100% - min(var(--chat-message-max),max(760px,calc((100% - 46px) * var(--chat-width-factor)))))/2)); }
}
.project-message-list::-webkit-scrollbar { display: none; }
.projects-workspace.project-chat-active .project-modal-top { position: absolute; z-index: 5; top: calc(var(--app-safe-top) + var(--tg-ui-gap)); left: 0; right: 0; height: 66px; min-height: 66px; margin: 0; padding: 0 max(14px,calc(var(--app-safe-left) + 12px)); background: transparent; }
.projects-workspace.project-chat-active .project-edge-fade { display: block; z-index: -1; top: calc(0px - var(--app-safe-top) - var(--tg-ui-gap)); left: 0; right: 0; }
.project-composer-wrap { position: absolute; z-index: 6; isolation: isolate; left: 0; right: 0; bottom: 0; width: min(792px,100%); margin-inline: auto; padding: 0 var(--chat-composer-right,16px) var(--chat-composer-bottom,16px) var(--chat-composer-left,16px); background: transparent; pointer-events: none; }
.project-composer-wrap > * { pointer-events: auto; }
.projects-workspace .project-composer-wrap .project-composer { width: 100%; max-width: none; margin: 0; }
.project-composer-wrap .project-queue-preview,.project-composer-wrap .project-pending-files { margin: 0 0 10px; }
.project-composer-wrap.is-dokki-working::before { animation: composerWorking 3.8s ease-in-out infinite,composerAurora 4.4s ease-in-out infinite alternate; }
.project-message.dokki-request .message-body { position: relative; isolation: isolate; box-shadow: 0 0 0 1px #72b6ff24,0 0 14px #4c9cff14; transition: box-shadow .55s ease; }
.project-message.dokki-request .message-body::after { content: ''; position: absolute; z-index: -1; inset: -4px; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 15% 75%,#438dff7a,transparent 65%),radial-gradient(ellipse at 85% 25%,#64ccff66,transparent 65%); filter: blur(9px); opacity: .1; transition: opacity .55s ease; }
.project-message.dokki-request-working .message-body { box-shadow: 0 0 0 1px #72b6ff48,0 0 18px #4c9cff26; }
.project-message.dokki-request-working .message-body::after { animation: projectRequestBreathing 3.6s ease-in-out infinite; }
@keyframes projectRequestBreathing { 0%,100% { opacity: .28; transform: scale(.98) translateX(-1%); } 50% { opacity: .65; transform: scale(1.025) translateX(1%); } }
@media(prefers-reduced-motion:reduce) { .project-composer-wrap.is-dokki-working::before { animation: none; opacity: .5; } .project-message.dokki-request-working .message-body::after { animation: none; opacity: .4; } }
@media(max-width:760px) {
  .projects-workspace .project-modal-top .modal-title.project-chat-title { font-size: 14px; }
  :root[data-telegram-miniapp="true"] .projects-workspace .project-modal-top .modal-title.project-chat-title { top: calc(var(--app-device-safe-top) + 3px); transform: translateX(-50%); }
  .projects-workspace { padding-top: var(--app-safe-top); }
  .projects-workspace { --project-content-left: calc(max(18px,calc(var(--app-safe-left) + 16px)) + 4px); --project-content-right: calc(max(18px,calc(var(--app-safe-right) + 16px)) + 4px); }
  .projects-workspace .project-message-list { width: calc(100% + var(--project-content-left) + var(--project-content-right) - max(15px,calc(var(--app-safe-left) + 12px)) - max(15px,calc(var(--app-safe-right) + 12px))); margin-left: calc(max(15px,calc(var(--app-safe-left) + 12px)) - var(--project-content-left)); margin-right: calc(max(15px,calc(var(--app-safe-right) + 12px)) - var(--project-content-right)); padding-top: 10px; }
  .projects-workspace .project-modal-top { min-height: 64px; height: 64px; margin-top: -4px; margin-left: -8px; margin-right: -8px; padding: 0; }
  .projects-workspace .project-modal-top :is(.project-back,.project-header-button,.modal-close) { width: 44px; height: 44px; flex-basis: 44px; }
  .projects-workspace.project-chat-active { padding-bottom: var(--chat-composer-bottom); }
  .projects-workspace .project-composer { width: calc(100% + var(--project-content-left) + var(--project-content-right) - var(--chat-composer-left) - var(--chat-composer-right)); margin-left: calc(var(--chat-composer-left) - var(--project-content-left)); margin-right: calc(var(--chat-composer-right) - var(--project-content-right)); }
  .projects-workspace > .project-chat-page { padding-bottom: 0; }
  :root[data-telegram-miniapp="true"] .projects-workspace { padding-inline: max(14px,calc(var(--app-safe-left) + 12px)) max(14px,calc(var(--app-safe-right) + 12px)); }
  :root[data-telegram-miniapp="true"] .projects-workspace { padding-top: 0; }
  :root[data-telegram-miniapp="true"] .projects-workspace { --project-content-left: calc(max(14px,calc(var(--app-safe-left) + 12px)) + 4px); --project-content-right: calc(max(14px,calc(var(--app-safe-right) + 12px)) + 4px); }
  :root[data-telegram-miniapp="true"] .projects-workspace .project-modal-top { position: sticky; top: 0; --project-toolbar-height: 0px; height: 0; min-height: 0; margin-top: 0; margin-inline: -4px; margin-bottom: calc(var(--tg-controls-top) + var(--project-toolbar-height)); background: transparent; overflow: visible; }
  :root[data-telegram-miniapp="true"] .projects-workspace:not(.project-chat-active) .project-modal-top:has(.project-header-actions .project-header-button:not([hidden])) { --project-toolbar-height: 54px; }
  :root[data-telegram-miniapp="true"] .projects-workspace:not(.project-chat-active) .project-modal-top .project-edge-fade { height: calc(var(--tg-controls-top) + var(--project-toolbar-height)); }
  :root[data-telegram-miniapp="true"] .projects-workspace.project-chat-active .project-modal-top { position: absolute; top: 0; left: calc(0px - max(14px,calc(var(--app-safe-left) + 12px))); right: calc(0px - max(14px,calc(var(--app-safe-right) + 12px))); margin: 0; padding-inline: max(14px,calc(var(--app-safe-left) + 12px)) max(14px,calc(var(--app-safe-right) + 12px)); }
  :root[data-telegram-miniapp="true"] .project-modal-top > :is(.project-back,.project-header-actions) { margin-top: calc(var(--tg-controls-top) + 5px); }
  :root[data-telegram-miniapp="true"] .project-modal-top .project-header-actions { grid-column: 2; }
  :root[data-telegram-miniapp="true"] .projects-workspace > .project-chat-page { position: relative; padding-top: 0; }
  :root[data-telegram-miniapp="true"] .projects-workspace .project-message-list { padding-top: calc(var(--tg-controls-top) + 74px); }
  :root[data-telegram-miniapp="true"] .projects-workspace .project-chat-page > .project-status:not([hidden]) { position: absolute; top: calc(var(--tg-controls-top) + 54px); z-index: 3; }
  :root[data-telegram-miniapp="true"] .project-edge-fade { display: block; z-index: -1; left: calc(0px - var(--project-content-left) + 4px); right: calc(0px - var(--project-content-right) + 4px); }
  :root[data-telegram-miniapp="true"] .project-chat-active .project-edge-fade { left: 0; right: 0; }
  :root[data-telegram-miniapp="true"] .projects-workspace { --project-list-left: max(14px,calc(var(--app-safe-left) + 12px)); --project-list-right: max(14px,calc(var(--app-safe-right) + 12px)); }
}
.main-panel .projects-workspace.project-chat-active { padding: 0; }
:root[data-telegram-miniapp="true"] .projects-workspace.project-chat-active .project-modal-top { left: 0; right: 0; padding-inline: max(14px,calc(var(--app-safe-left) + 12px)) max(14px,calc(var(--app-safe-right) + 12px)); }
.project-memory-entry{display:flex;gap:12px;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border,rgba(128,128,128,.18));min-width:0}
.project-memory-entry>div:first-child{min-width:0;flex:1}.project-memory-entry p{margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.project-memory-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.project-memory-entry .project-memory-actions{align-self:flex-start}
#projectMemoryEditor:not(:empty){margin:20px 0}#projectMemoryEditor textarea{font:inherit;width:100%;box-sizing:border-box;resize:vertical}

/* быстрая навигация по сообщениям у правого края: только ПК с мышью, не в Telegram и только когда не заходит на чат */
.message-rail { position: absolute; z-index: 6; right: 10px; top: calc(78px + var(--app-safe-top)); bottom: calc(var(--composer-space) + 100px); width: 26px; display: none; align-items: center; pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .message-rail.has-turns.is-wide { display: flex; }
}
:root[data-telegram-miniapp="true"] .message-rail,
.ai-search-active > .message-rail,
.main-panel.projects-active > .message-rail { display: none; }
.message-rail-track { width: 26px; max-height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; pointer-events: auto; }
.message-rail-track::-webkit-scrollbar { display: none; }
.message-rail-tick { display: flex; align-items: center; justify-content: flex-end; width: 26px; height: 13px; padding: 0 4px 0 0; border: 0; background: transparent; cursor: pointer; }
.message-rail-tick::before { content: ""; width: 11px; height: 2px; border-radius: 2px; background: var(--faint); transition: width .16s var(--ease), background-color .16s ease; }
.message-rail-tick.is-active::before { width: 17px; background: var(--text); }
.message-rail-tick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .message-rail-tick:hover::before { width: 17px; background: var(--muted); }
  .message-rail-tick.is-active:hover::before { background: var(--text); }
}
.message-rail-card { position: absolute; right: 100%; top: 0; width: 290px; max-width: 34vw; margin-right: 6px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 10px 30px #0006; opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility 0s .14s; pointer-events: none; }
.message-rail-card.is-visible { opacity: 1; visibility: visible; transition: opacity .14s ease; }
.message-rail-count { margin-bottom: 4px; color: var(--faint); font-size: 11px; }
.message-rail-question { color: var(--text); font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.message-rail-answer { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.message.rail-target .message-body { animation: railTarget 1.4s ease-out; }
@keyframes railTarget { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .message-rail-tick::before, .message-rail-card { transition: none; } .message.rail-target .message-body { animation: none; } }

/* на ПК у кнопок открытия меню и нового чата нет ни обводки фокуса, ни рамки: рамка .top-round видна, когда меню скрыто */
@media (hover: hover) and (pointer: fine) {
  .sidebar button:focus, .sidebar button:focus-visible,
  #openSidebar:focus, #openSidebar:focus-visible,
  #newChatTop:focus, #newChatTop:focus-visible { outline: 0; }
  /* без рамки, фона и блюра: кнопки выглядят одинаково над меню и над основной областью */
  #openSidebar, #newChatTop { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #openSidebar:hover, #newChatTop:hover { background: var(--hover); }
}
/* компактное меню на ПК, все элементы сохраняют иерархию: шапка и бейдж плана, поиск, статус пробного периода,
   карточка Plus, разделы, использование, будущие разделы, чаты, новый чат, аккаунт */
@media (min-width: 1000px) and (pointer: fine) {
  .sidebar { flex-basis: 352px; width: 352px; padding-inline: 18px; }
  .sidebar > * { min-width: 316px; }
  .side-top { height: 62px; padding-bottom: 20px; }
  .brand { font-size: 19px; align-items: baseline; }
  .brand .plan-badge { font-size: inherit; line-height: inherit; }
  .side-link { min-height: 42px; gap: 11px; padding: 0 11px; font-size: 14.5px; }
  .side-link svg { width: 19px; height: 19px; }
  .sidebar-usage { padding: 9px 11px; }
  .sidebar-usage-heading { min-height: 24px; font-size: 14.5px; }
  .sidebar-future-link, .sidebar-more { min-height: 38px; }
  .side-label { padding: 22px 11px 10px; font-size: 14.5px; }
  .chat-item { min-height: 40px; padding: 9px 11px; font-size: 14.5px; }
  .free-upgrade { min-height: 72px; }
  .trial-summary { font-size: 12px; }
  .new-chat { height: 44px; min-width: 112px; font-size: 15.5px; }
  .side-settings { width: 42px; height: 42px; }
  .side-account { min-height: 50px; }
  .side-account b { font-size: 13.5px; }
}
@media (min-width: 1600px) and (pointer: fine) {
  .sidebar { flex-basis: 320px; width: 320px; padding-inline: 16px; }
  .sidebar > * { min-width: 288px; }
  .side-top { height: 58px; padding-bottom: 18px; }
  .brand { font-size: 18px; align-items: baseline; }
  .brand .plan-badge { font-size: inherit; line-height: inherit; }
  .side-link { min-height: 39px; gap: 10px; padding: 0 10px; font-size: 14px; }
  .side-link svg { width: 18px; height: 18px; }
  .sidebar-usage { padding: 8px 10px; }
  .sidebar-usage-heading { font-size: 14px; min-height: 23px; }
  .sidebar-future-link, .sidebar-more { min-height: 36px; }
  .side-label { padding: 20px 10px 9px; font-size: 14px; }
  .chat-item { min-height: 37px; padding: 8px 10px; font-size: 14px; }
  .free-upgrade { min-height: 68px; }
  .trial-summary { font-size: 11.5px; }
  .new-chat { height: 42px; min-width: 110px; font-size: 15px; }
  .side-settings { width: 40px; height: 40px; }
  .side-account { min-height: 46px; }
  .side-account b { font-size: 13px; }
}

/* выбор режима живёт в меню «+», в шапке только вкладки «Чат/Поиск» */
#modeControl { position: relative; }
.topbar > #modeControl { display: none; }
/* приватный чат: пунктирный пузырь открывает его, крестик закрывает */
#newChatTop.private-close .ui-icon { width: 24px; height: 24px; }
#newChatTop[aria-pressed="true"] { color: var(--accent); }

/* ===== Проекты: обновлённое оформление (18.10.2026) =====
   Списки проектов, чатов и приглашений остаются прежними: без подложки, значки в кружках.
   Обновлены заголовки разделов, кнопки и пустое состояние (монохромные главные кнопки, как в разделе «Еда»). */
.projects-workspace .projects-page { gap: 18px; }
.projects-workspace .project-section-title h2,.projects-workspace .project-chat-list-heading h2,.projects-workspace .project-section h3.project-section-title { font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
.projects-workspace .project-section-title small { min-width: 22px; padding: 2px 8px; border-radius: 99px; background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 650; text-align: center; }
.projects-workspace .project-chat-unread { background: var(--text); color: var(--bg); }
.projects-workspace .project-add-chat { width: 36px; height: 36px; border-radius: 50%; background: var(--hover); }
.projects-workspace .project-list-edit { min-height: 36px; padding: 0 14px; border-radius: 99px; background: var(--hover); font-weight: 560; }
.projects-workspace .project-list-edit[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.projects-workspace .project-invite-actions .accept { background: var(--text); color: var(--bg); border-color: transparent; }
.projects-workspace .project-invite .project-invite-actions button { min-height: 46px; border-radius: 15px; font-size: 15px; }
.projects-workspace .project-action { min-height: 50px; border-radius: 16px; font-size: 15px; }
.projects-workspace .project-action:not(.secondary):not(.danger),.projects-workspace .project-invite-button { background: var(--text); color: var(--bg); }
.projects-workspace .project-invite-button { min-height: 46px; border-radius: 15px; font-size: 14px; }
.projects-workspace .project-onboarding-mark .project-symbol { width: 72px; height: 72px; border-radius: 24px; }
.projects-workspace .project-onboarding h1 { font-size: clamp(26px,5.4vw,32px); letter-spacing: -.7px; }
.projects-workspace .project-onboarding-cta { min-height: 50px; padding: 0 26px; border-radius: 16px; font-size: 15px; }
.projects-workspace .project-form label { font-size: 13px; }
.projects-workspace .project-form input,.projects-workspace .project-form select { border-radius: 16px; min-height: 50px; }

html.menu-v2 .side-tile:is(.projects-link,#libraryButton,#cloudButton,#scheduledButton,#foodButton,#integrationsButton)[aria-current="page"] { background: var(--hover); color: var(--text); }

/* баннер автоматизации над её результатом в чате */
/* сообщение становится колонкой, как у пользователя с вложениями: баннер отдельной строкой над текстом */
.message.assistant.from-automation { flex-direction: column; align-items: flex-start; }
.automation-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; max-width: 100%; margin: 0 0 12px; padding: 3px 3px 3px 12px; border: 0; border-radius: 20px; background: var(--panel); color: var(--muted); font-size: 13px; line-height: 1.35; }
.automation-banner-label { display: flex; align-items: flex-start; gap: 7px; min-width: 0; padding: 6px 0; overflow-wrap: anywhere; }
.automation-banner-label .ui-icon { width: 15px; height: 15px; margin-top: 1px; color: var(--accent); }
.automation-banner-label strong { color: var(--text); font-weight: 600; }
.automation-banner-off { min-height: 30px; margin-left: auto; padding: 0 12px; border: 0; border-radius: 999px; background: var(--hover); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s ease, scale .2s var(--ease); }
.automation-banner-off:active:not(:disabled) { background: var(--line); scale: .97; }
.automation-banner-off:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.automation-banner-off:disabled { opacity: .6; cursor: default; }
.automation-banner-done { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-left: auto; padding: 0 10px 0 2px; color: var(--text); font-weight: 600; }
.automation-banner-done .ui-icon { width: 15px; height: 15px; color: var(--accent); }
.automation-offer { display: grid; gap: 6px; max-width: 520px; margin-top: 14px; padding: 14px 16px; border: 0; border-radius: 20px; background: var(--panel); }
.automation-offer-head { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.automation-offer-head .ui-icon, .automation-offer-done .ui-icon { flex: none; width: 15px; height: 15px; color: var(--accent); }
.automation-offer-name { color: var(--text); font-size: 15px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.automation-offer-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.automation-offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.automation-offer button { min-height: 34px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, scale .2s var(--ease), filter .2s ease; }
.automation-offer button:active:not(:disabled) { scale: .97; }
.automation-offer button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.automation-offer button:disabled { opacity: .55; cursor: default; }
.automation-offer-create { border: 0; background: var(--accent); color: #fff; }
.automation-offer-edit, .automation-offer-open { border: 1px solid var(--line); background: transparent; color: var(--text); }
.automation-offer-done { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 0 0; color: var(--text); font-size: 14px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .automation-offer-create:hover:not(:disabled) { filter: brightness(1.08); } .automation-offer-edit:hover:not(:disabled), .automation-offer-open:hover { background: var(--hover); } }
.automation-banner.is-off .automation-banner-label .ui-icon { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .automation-banner-off:hover:not(:disabled) { background: var(--line); } }
/* длинное название или узкий экран: кнопка уходит на вторую строку и прижимается в правый нижний угол
   с тем же зазором, что в одну строку; на телефоне цель нажатия не меньше 36px */
@media (max-width: 760px) {
  .automation-banner { padding: 4px 4px 4px 12px; }
  .automation-banner-off, .automation-banner-done { min-height: 36px; }
}
/* шапка разделов (Голоса, Еда, Облако...): одинаковый отступ сверху и снизу, без сплошной плашки; при прокрутке
   под ней проявляется затухание фона (класс is-scrolled ставит app.js) */
:root:not([data-telegram-miniapp="true"]) .projects-workspace.section-screen { padding-top: var(--app-safe-top,0px); }
:root:not([data-telegram-miniapp="true"]) .projects-workspace.section-screen > .section-page { padding-top: 0; }
:root:not([data-telegram-miniapp="true"]) .projects-workspace.section-screen .section-header.section-header { height: auto; min-height: 0; margin-top: 0; margin-bottom: 6px; padding: 12px 0; background: transparent; }
:root:not([data-telegram-miniapp="true"]) .projects-workspace.section-screen .section-header.section-header::before { left: -16px; right: -16px; top: calc(0px - var(--app-safe-top,0px)); bottom: -28px; height: auto; z-index: -1; background: linear-gradient(var(--bg) 45%, color-mix(in srgb,var(--bg) 80%,transparent) 68%, color-mix(in srgb,var(--bg) 0%,transparent)); opacity: 0; transition: opacity .2s ease; }
:root:not([data-telegram-miniapp="true"]) .projects-workspace.section-screen.is-scrolled .section-header.section-header::before { opacity: 1; }
/* где браузер умеет, затухание растёт вместе с прокруткой первых 80px, без JS */
@supports (animation-timeline: scroll()) {
  :root:not([data-telegram-miniapp="true"]) .projects-workspace.section-screen .section-header.section-header::before { transition: none; animation: section-header-fade linear both; animation-timeline: scroll(nearest block); animation-range: 0 80px; }
}
@keyframes section-header-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) { :root:not([data-telegram-miniapp="true"]) .projects-workspace.section-screen .section-header.section-header { margin-inline: -8px; padding: 10px 0; } :root:not([data-telegram-miniapp="true"]) .projects-workspace.section-screen .section-header.section-header::before { left: -14px; right: -14px; } }

/* короткие диалоги (подтверждения, компьютер, уведомления) - карточкой посередине экрана, а не листом у самого края */
@keyframes dialogIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes dialogOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); } }
.modal-layer.default-open { padding: max(20px,var(--app-safe-top,0px)) 20px max(20px,var(--app-safe-bottom,0px),env(safe-area-inset-bottom)); }
.modal-layer.default-open .modal { width: min(420px,100%); max-height: min(86dvh,calc(var(--browser-viewport-height,100dvh) - 40px)); padding: 20px 20px 20px; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 24px 80px #0008; }
.modal-layer.default-open .modal.content-entering { animation: dialogIn .26s cubic-bezier(.2,.9,.25,1.05) both; transform-origin: 50% 50%; }
.modal-layer.default-open.closing .modal { animation: dialogOut .18s ease both; }
.modal-layer.default-open .chat-delete-description,.modal-layer.default-open .settings-page-hint { margin: 10px 0 20px; }
.modal-layer.default-open .chat-edit-save { min-height: 48px; border-radius: 16px; }
@media (max-width: 760px) {
  .modal-layer.default-open { align-items: center; }
  .modal-layer.default-open .modal { width: 100%; border-bottom: 1px solid var(--line); border-radius: 28px; padding: 18px 18px 18px; }
  html.ios-iphone-standalone body.web-app .modal-layer.default-open .modal.notification-offer { padding-bottom: 18px; }
}
html[data-theme="light"] .modal-layer.default-open .modal { border-color: #dedede; }
@media (prefers-reduced-motion: reduce) { .modal-layer.default-open .modal.content-entering,.modal-layer.default-open.closing .modal { animation: none; } }
/* облако в Проектах (CLOUD-TEAM-1): отметка чата, ход и результат облака, настройки */
.project-system-note.message { justify-content: center; }
.project-system-note .project-message-content { max-width: min(86%,520px); }
.project-system-note .project-message-body { padding: 4px 12px; border-radius: 12px; background: var(--hover); color: var(--muted); font-size: 12.5px; line-height: 1.45; text-align: center; }
.project-chat-title.cloud-bound .project-title-copy::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background: var(--accent); mask: var(--ic-cloud, url('icons/cloud.svg')) center / contain no-repeat; -webkit-mask: var(--ic-cloud, url('icons/cloud.svg')) center / contain no-repeat; }
.project-chat-cloud.ui-icon { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--accent); }
.project-cloud-actions { display: flex; gap: 8px; margin-top: 10px; }
.project-cloud-actions button,.project-cloud-result button { min-height: 36px; padding: 6px 15px; border-radius: 18px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.project-cloud-actions button:disabled,.project-cloud-result button:disabled { opacity: .55; cursor: default; }
.project-cloud-result.cloud-offer.cloud-result { margin-top: 10px; }
.project-cloud-page .project-section-title > span .ui-icon { width: 18px; height: 18px; color: var(--accent); }
.project-cloud-link { display: grid; gap: 14px; }
.project-cloud-meter { height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.project-cloud-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.project-cloud-choices { display: grid; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); overflow: hidden; }
.project-cloud-choice { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 9px 14px 9px 40px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; position: relative; }
.project-cloud-choice:last-child { border-bottom: 0; }
.project-cloud-choice::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 50%; transform: translateY(-50%); box-sizing: border-box; }
.project-cloud-choice[aria-checked="true"]::before { border: 5px solid var(--accent); }
.project-cloud-choice > span { display: grid; gap: 2px; min-width: 0; }
.project-cloud-choice strong { font-size: 14px; font-weight: 600; }
.project-cloud-choice small { color: var(--muted); font-size: 12px; }
.project-cloud-choice:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .project-cloud-choice:hover { background: var(--hover); } }
.project-cloud-page .project-form-label { color: var(--muted); font-size: 12px; }

/* плашка «Докки на компьютере»: при появлении рамка заполняется по часовой и гаснет, дальше обычная карточка */
@property --app-banner-sweep { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --app-banner-start { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.app-banner { --app-banner-edge: color-mix(in srgb,var(--text) 13%,transparent); --app-banner-glow: linear-gradient(115deg,#438dff,#8b6cff 42%,#ff7ac6 72%,#ffb057); flex: none; display: grid; grid-template-rows: 1fr; margin: 10px 2px 2px; transition: grid-template-rows .28s var(--ease), margin .28s var(--ease), opacity .18s ease; }
.app-banner.is-waiting { opacity: 0; }
.app-banner.is-closing { grid-template-rows: 0fr; margin-block: 0; opacity: 0; pointer-events: none; }
/* маска объявлена там же, где анимируется угол: уровнем выше она посчиталась бы от неподвижного значения */
.app-banner-inner { --app-banner-mask: conic-gradient(transparent 0deg,#000 min(var(--app-banner-start),calc(var(--app-banner-sweep) / 2)),#000 calc(var(--app-banner-sweep) - 30deg),transparent var(--app-banner-sweep)); position: relative; isolation: isolate; min-height: 0; }
.app-banner.is-closing .app-banner-inner { overflow: hidden; }
/* карта непрозрачная: рамка и свечение лежат под ней и видны только снаружи */
.app-banner-card { position: relative; height: 118px; padding: 14px 0 0 15px; overflow: hidden; border: 0; border-radius: 18px; background: color-mix(in srgb,var(--text) 7%,var(--side)); color: var(--text); font-size: 14px; line-height: 1.25; }
.app-banner-card b { display: block; max-width: 130px; font-weight: 650; letter-spacing: -.1px; }
.app-banner-download { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: opacity .2s ease, scale .25s var(--ease); }
.app-banner-download:active { scale: .97; }
.app-banner-close { position: absolute; z-index: 1; top: 5px; right: 5px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb,var(--side) 72%,transparent); color: var(--muted); cursor: pointer; transition: background .2s ease, color .2s ease; }
.app-banner-close .ui-icon { width: 15px; height: 15px; }
.app-banner-window { position: absolute; top: 29px; left: 135px; right: -15px; height: 118px; display: grid; grid-template-columns: 38px 1fr; overflow: hidden; border: 1px solid var(--app-banner-edge); border-radius: 11px 0 0; background: var(--bg); box-shadow: 0 10px 28px #0003; }
.app-banner-window-side { display: flex; flex-direction: column; gap: 5px; padding: 7px 6px; border-right: 1px solid var(--app-banner-edge); background: var(--side); }
.app-banner-window-dots { display: flex; gap: 3px; margin-bottom: 5px; }
.app-banner-window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #ff5f57; }
.app-banner-window-dots i:nth-child(2) { background: #febc2e; }
.app-banner-window-dots i:nth-child(3) { background: #28c840; }
.app-banner-window-side span { height: 4px; border-radius: 2px; background: color-mix(in srgb,var(--text) 18%,transparent); }
.app-banner-window-main { display: flex; flex-direction: column; gap: 5px; padding: 13px 9px; }
.app-banner-window-main span { width: 62%; height: 4px; border-radius: 2px; background: color-mix(in srgb,var(--text) 22%,transparent); }
.app-banner-window-main span:nth-child(2) { width: 46%; }
.app-banner-window-main em { display: block; width: 80px; height: 18px; margin-top: 8px; border: 1px solid var(--app-banner-edge); border-radius: 9px; background: var(--panel); }
.app-banner-ring, .app-banner-glow { display: none; position: absolute; z-index: -1; pointer-events: none; }
.app-banner-ring, .app-banner-glow i { background: var(--app-banner-glow); -webkit-mask: var(--app-banner-mask); mask: var(--app-banner-mask); }
.app-banner-ring { inset: -1.5px; border-radius: 19.5px; }
/* размытие на родителе: иначе маска по кругу обрежет его резким краем. По бокам меню обрезает прокрутка, поэтому свечение растворяем раньше */
.app-banner-glow { inset: -50px 0; filter: blur(16px); -webkit-mask: linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent); mask: linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent); }
.app-banner-glow i { position: absolute; inset: 54px 8px 46px; border-radius: 22px; }
.app-banner.is-lit .app-banner-inner { animation: appBannerIn .5s var(--ease) both, appBannerSweep 1.7s cubic-bezier(.45,.05,.4,1) .15s both; }
.app-banner.is-lit .app-banner-ring { display: block; animation: appBannerRing 3.6s ease both; }
.app-banner.is-lit .app-banner-glow { display: block; animation: appBannerGlow 3.6s ease both; }
@keyframes appBannerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* начало заливки тоже мягкое, шов на 12 часов закрывается, когда круг замкнётся */
@keyframes appBannerSweep { 0% { --app-banner-sweep: 0deg; --app-banner-start: 26deg; } 72% { --app-banner-start: 26deg; } 100% { --app-banner-sweep: 400deg; --app-banner-start: 0deg; } }
@keyframes appBannerRing { 0% { opacity: .4; } 40%, 62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes appBannerGlow { 0% { opacity: 0; } 25% { opacity: .22; } 52% { opacity: .62; } 64% { opacity: .55; } 100% { opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .app-banner-close:hover { background: var(--hover); color: var(--text); } .app-banner-download:hover { opacity: .88; } }
@media (prefers-reduced-motion: reduce) { .app-banner.is-lit .app-banner-inner { animation: none; } .app-banner.is-lit .app-banner-ring, .app-banner.is-lit .app-banner-glow { display: none; } }
@media (max-width: 760px), (pointer: coarse) { .app-banner { display: none; } }

.feature-lock-page { display: flex; flex-direction: column; }
.feature-lock { display: grid; justify-items: center; gap: 10px; margin: auto; padding: 24px 12px 72px; text-align: center; }
.feature-lock-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 18px; background: var(--hover, rgba(127,127,127,.14)); color: var(--text); }
.feature-lock-icon .ui-icon { width: 28px; height: 28px; }
.feature-lock h2 { margin: 0; font-size: 22px; font-weight: 650; }
.feature-lock p { max-width: 320px; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.feature-lock .feature-lock-paused { color: var(--text); font-weight: 500; }
.feature-lock small { margin: 8px 0 4px; color: var(--faint); font-size: 12.5px; }
.feature-lock .plan-cta { width: min(300px,100%); }