/* ------------------------------------------------------------------ * Charmy / core_v2 — liquid glass UI * ------------------------------------------------------------------ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; /* Высота viewport. Приоритет: 1) --app-vh — JS-переменная, обновляется на resize/pageshow/ visibilitychange. Спасает iOS Safari / standalone-PWA, где dvh после возврата из фона не пересчитывается и скролл подвисает. 2) 100dvh — современные браузеры. 3) -webkit-fill-available — старые iOS. 4) 100% — древний фолбэк. */ height: 100%; height: -webkit-fill-available; height: 100dvh; height: var(--app-vh, 100dvh); /* запрещаем скролл всей страницы — пускай скроллится только активный .screen-body. Иначе фоновый слой и composer поедут вместе со страницей. */ overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.45; overscroll-behavior: none; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; cursor: pointer; } input, textarea { font: inherit; color: inherit; } a { color: inherit; } /* ------------------------------------------------------------------ * Темы. Меняются через атрибут [data-theme] на . * Каждый набор задаёт фон + 2 акцент-цвета + текст/border. * ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ * Глобальные токены (вне темы) * ------------------------------------------------------------------ */ :root { /* === Safe-area (физические рамки экрана: чёлка, dynamic island, home-indicator, скруглённые углы, складки и т.п.). На устройствах без них значения = 0. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* === Высота экранной (виртуальной) клавиатуры. Управляется JS через Visual Viewport API (см. wireKeyboardSync в app.js). По умолчанию 0. */ --kb-height: 0px; /* === Дизайн-ритм отступов и радиусов (используем повсеместно). */ --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 20px; --gap-6: 24px; --gap-7: 32px; --rad-sm: 10px; --rad-md: 14px; --rad-lg: 18px; --rad-xl: 24px; --nav-height: 64px; /* высота нижней навигации */ --header-min-height: 56px; /* Длительности анимаций — единые. */ --t-fast: 140ms; --t-norm: 220ms; --t-slow: 320ms; --ease: cubic-bezier(.2, .8, .2, 1); } :root, [data-theme="lavender"] { --bg-1: #0F0816; --bg-2: #1A1025; --bg-3: #2A1A3D; --accent: #B650CF; --accent-2: #8050FF; --accent-soft: rgba(182, 80, 207, 0.18); --text: #FFFFFF; --muted: #B5A8C7; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --bubble-bot: rgba(70, 40, 100, 0.55); --bubble-user: linear-gradient(135deg, #5B2A75 0%, #8050FF 100%); --error: #FF6B6B; } [data-theme="sunset"] { --bg-1: #14060D; --bg-2: #2D101C; --bg-3: #4A1A30; --accent: #FF8FA3; --accent-2: #E85F88; --accent-soft: rgba(255, 143, 163, 0.18); --text: #FFF6F8; --muted: #C9A6B0; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --bubble-bot: rgba(80, 30, 50, 0.55); --bubble-user: linear-gradient(135deg, #993355 0%, #FF8FA3 100%); --error: #FF6B6B; } [data-theme="gold"] { --bg-1: #0E0905; --bg-2: #1F1610; --bg-3: #38271A; --accent: #FFC857; --accent-2: #D4A737; --accent-soft: rgba(255, 200, 87, 0.18); --text: #FFF8E8; --muted: #C9B894; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --bubble-bot: rgba(70, 50, 30, 0.55); --bubble-user: linear-gradient(135deg, #8B6622 0%, #FFC857 100%); --error: #FF6B6B; } [data-theme="ocean"] { --bg-1: #061015; --bg-2: #0E1F2C; --bg-3: #173646; --accent: #4ECDC4; --accent-2: #2EA8B0; --accent-soft: rgba(78, 205, 196, 0.18); --text: #EAF5F5; --muted: #94B0B5; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --bubble-bot: rgba(30, 60, 70, 0.55); --bubble-user: linear-gradient(135deg, #1F6B6E 0%, #4ECDC4 100%); --error: #FF6B6B; } [data-theme="emerald"] { --bg-1: #050D08; --bg-2: #0E1F14; --bg-3: #163B23; --accent: #5BCC75; --accent-2: #2E9C50; --accent-soft: rgba(91, 204, 117, 0.18); --text: #EFF8F0; --muted: #95B59B; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --bubble-bot: rgba(25, 60, 35, 0.55); --bubble-user: linear-gradient(135deg, #1F6638 0%, #5BCC75 100%); --error: #FF6B6B; } [data-theme="indigo"] { --bg-1: #08081A; --bg-2: #131432; --bg-3: #232658; --accent: #8794FF; --accent-2: #5563E0; --accent-soft: rgba(135, 148, 255, 0.18); --text: #ECEEFF; --muted: #9499C0; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --bubble-bot: rgba(40, 45, 90, 0.55); --bubble-user: linear-gradient(135deg, #3F4AAA 0%, #8794FF 100%); --error: #FF6B6B; } /* Базовый «фоновый» градиент темы. */ body { background: radial-gradient(ellipse at 0% 0%, var(--bg-3) 0%, transparent 55%), radial-gradient(ellipse at 100% 0%, var(--bg-3) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, var(--accent-soft) 0%, transparent 60%), var(--bg-1); background-attachment: fixed; } /* ------------------------------------------------------------------ * Каркас приложения. app-shell держит экраны внутри максимум * 480px по ширине (мобайл-first), но красиво смотрится и на десктопе. * ------------------------------------------------------------------ */ .app-shell { position: relative; /* Точно по реальной высоте viewport (см. --app-vh выше). */ height: 100vh; height: -webkit-fill-available; height: 100dvh; height: var(--app-vh, 100dvh); max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; /* Боковые safe-area (для landscape iPhone, скруглённых углов). ВАЖНО: padding-top/bottom не ставим здесь — иначе .screen уедет и iOS-овый скролл начнёт залипать. Top/bottom учитываются внутри шапок и нижней панели. */ padding-left: var(--safe-left); padding-right: var(--safe-right); } /* Контентная ширина: по дефолту наследуется от родителя (мобайл), на ПК расширяется через media-запросы ниже. Никаких правил здесь намеренно нет — это «якорь» для медиа-запросов. */ .screen { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; opacity: 0; /* Никаких transform на .screen — иначе содержимое визуально «дышит» при переключении и position:fixed потомков начинает зависеть от .screen, а не от viewport. */ transition: opacity 220ms cubic-bezier(.2,.8,.2,1); } .screen.active { pointer-events: auto; opacity: 1; } .screen-header { position: relative; display: flex; align-items: center; gap: var(--gap-3); padding: calc(var(--gap-5) + var(--safe-top)) var(--gap-5) var(--gap-4); flex-shrink: 0; min-height: var(--header-min-height); } .screen-header h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } .screen-header .spacer { flex: 1; } /* ------------------------------------------------------------------ * Унифицированная шапка страниц навигации * (Чаты / Каталог / Главная / Функции / Профиль). * Вертикальная: бренд → название вкладки → поиск (где есть). * ------------------------------------------------------------------ */ .page-header { display: flex; flex-direction: column; gap: var(--gap-2); /* +safe-top — чтобы шапка не уходила под чёлку/статусбар iOS. */ padding: calc(var(--gap-4) + var(--safe-top)) var(--gap-5) var(--gap-3); flex-shrink: 0; } .page-header .brand-row { display: flex; align-items: center; gap: 8px; } .page-header .brand-row .spacer { flex: 1; } .page-header .page-title { margin: 2px 2px 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .page-header .page-search { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-top: 4px; border-radius: 14px; height: 44px; box-sizing: border-box; } .page-header .page-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 15px; line-height: 1.2; font-family: inherit; } .page-header .page-search input::placeholder { color: var(--muted); opacity: 1; } .page-header .page-search svg { flex-shrink: 0; color: var(--muted); } .brand { font-family: "Brush Script MT", "Comic Sans MS", cursive; font-size: 30px; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 400; font-style: italic; } .screen-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Нижний padding = высота навбара + safe-bottom + клавиатура. Это гарантирует, что последний элемент списка не прячется ни под навигацией, ни под home-indicator, ни под виртуальной клавой. */ padding: var(--gap-1) var(--gap-4) calc(var(--nav-height) + var(--gap-4) + var(--safe-bottom) + var(--kb-height)); scrollbar-width: thin; /* Плавно «подталкиваем» контент при появлении клавиатуры. */ transition: padding-bottom var(--t-norm) var(--ease); overscroll-behavior: contain; } .screen-body::-webkit-scrollbar { width: 6px; } .screen-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } /* ------------------------------------------------------------------ * Glass surfaces — переиспользуемые контейнеры * ------------------------------------------------------------------ */ .glass { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } .glass-soft { background: rgba(255, 255, 255, 0.025); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px; } .glass-pop { /* анимация появления как пузырёк */ animation: bubble-in 280ms cubic-bezier(.2,.8,.2,1); } @keyframes bubble-in { 0% { opacity: 0; transform: scale(0.92) translateY(6px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes bubble-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.94); } } /* ------------------------------------------------------------------ * Кнопки * ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 14px; border: 1px solid transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 600; font-size: 14px; transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; box-shadow: 0 6px 20px var(--accent-soft); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(0.97); } .btn[disabled], .btn.disabled { opacity: 0.5; pointer-events: none; } .btn-ghost { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text); font-weight: 500; box-shadow: none; backdrop-filter: blur(8px); } .btn-ghost:hover { background: rgba(255,255,255,0.08); } .btn-icon { padding: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; transition: background 150ms ease, transform 120ms ease; } .btn-icon:hover { background: rgba(255,255,255,0.10); } .btn-icon:active { transform: scale(0.92); } .btn-icon.accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; } .btn-block { width: 100%; } .btn-danger { background: linear-gradient(135deg, #B23A48, #842F3D); box-shadow: 0 6px 20px rgba(178,58,72,0.3); } /* ------------------------------------------------------------------ * Bottom navigation * ------------------------------------------------------------------ */ .bottom-nav { position: fixed; left: 0; right: 0; /* Когда появляется клавиатура — отрываемся от низа на её высоту, иначе nav уходит за клавиатуру / прячется. */ bottom: var(--kb-height); z-index: 50; display: flex; justify-content: center; pointer-events: none; transition: bottom var(--t-norm) var(--ease); } .bottom-nav-inner { pointer-events: auto; width: 100%; max-width: 480px; padding: var(--gap-2) var(--gap-3) calc(var(--gap-2) + var(--safe-bottom)); display: flex; align-items: stretch; background: rgba(15, 8, 22, 0.55); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border-top: 1px solid var(--border); } .nav-tab { flex: 1; border: none; background: transparent; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; position: relative; transition: color 150ms ease; } .nav-tab .ic-wrap { width: 44px; height: 36px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; transition: background 200ms ease, transform 200ms ease; } .nav-tab.active { color: var(--text); } .nav-tab.active .ic-wrap { background: linear-gradient(135deg, var(--accent), var(--accent-2)); transform: scale(1.05); box-shadow: 0 4px 16px var(--accent-soft); color: #fff; } .nav-tab svg { width: 22px; height: 22px; } /* ------------------------------------------------------------------ * Login screen * ------------------------------------------------------------------ */ .auth-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--gap-6) + var(--safe-top)) var(--gap-6) calc(var(--gap-7) + var(--safe-bottom) + var(--kb-height)); transition: padding-bottom var(--t-norm) var(--ease); } .auth-card { padding: 28px 22px; display: flex; flex-direction: column; gap: 14px; } .auth-card h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; } .auth-card .subtitle { margin: 0 0 8px; color: var(--muted); font-size: 13px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; } .field input, .field textarea { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); outline: none; transition: border-color 150ms ease, background 150ms ease; } .field input:focus, .field textarea:focus { border-color: var(--accent); background: rgba(255,255,255,0.06); } .field textarea { min-height: 84px; resize: vertical; } .tabs { display: flex; gap: 6px; background: rgba(255,255,255,0.04); padding: 4px; border-radius: 14px; border: 1px solid var(--border); } .tab-btn { flex: 1; border: none; background: transparent; color: var(--muted); padding: 10px; border-radius: 10px; font-weight: 500; font-size: 13px; transition: background 150ms ease, color 150ms ease; } .tab-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } .auth-status { font-size: 12px; color: var(--muted); min-height: 16px; } .auth-status.error { color: var(--error); } .auth-status.ok { color: var(--accent); } /* ------------------------------------------------------------------ * Список чатов * ------------------------------------------------------------------ */ .chat-list { display: flex; flex-direction: column; gap: 10px; } .chat-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; transition: transform 150ms ease, background 150ms ease; position: relative; } .chat-row:hover { background: rgba(255,255,255,0.05); } .chat-row:active { transform: scale(0.985); } .chat-row .avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--bg-3), var(--accent-soft)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text); font-size: 18px; overflow: hidden; border: 1px solid var(--border-strong); } .chat-row .avatar img { width: 100%; height: 100%; object-fit: cover; } .chat-row .info { flex: 1; min-width: 0; } .chat-row .info .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .chat-row .name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; } .chat-row .name .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .chat-row .time { font-size: 11px; color: var(--muted); flex-shrink: 0; } .chat-row .preview { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-state .ic-wrap { width: 64px; height: 64px; margin: 0 auto 16px; background: var(--accent-soft); border-radius: 24px; display: flex; align-items: center; justify-content: center; color: var(--accent); } .empty-state h3 { color: var(--text); margin: 0 0 8px; font-size: 17px; } .empty-state p { margin: 0; font-size: 13px; line-height: 1.5; } /* ------------------------------------------------------------------ * Каталог * ------------------------------------------------------------------ */ /* (Старые .search-bar / .chats-search удалены — теперь единый .page-search) */ .cat-section { margin-bottom: 26px; } .cat-section-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; padding: 0 4px; } .cat-section-head h3 { margin: 0; font-size: 16px; font-weight: 600; } .cat-chips { display: flex; flex-wrap: wrap; gap: 8px; } .cat-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text); font-size: 13px; transition: background 150ms ease, border-color 150ms ease; } .cat-chip.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; } /* * Плиточная сетка каталога. Карточки бывают двух типов: * .cat-card.tall — с фотографией, занимает 2 row-а (aspect 3:4) * .cat-card.short — без фотографии, 1 row, плоская карточка * Благодаря grid-auto-flow:dense пустоты между ними автоматически * заполняются — получается ровная мозаика 1:2 по высоте. */ .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* Высота row-а = (ширина_колонки * 4/3) / 2 → автоматически даём auto. Поскольку .tall растягивается на 2 строки и держит aspect-ratio, row высчитывается естественным образом: short будет половиной tall. */ grid-auto-rows: minmax(0, auto); grid-auto-flow: dense; gap: 12px; } .cat-card { padding: 0; overflow: hidden; position: relative; cursor: pointer; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); border-radius: 18px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease; } .cat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32); border-color: var(--border-strong); } .cat-card.tall { aspect-ratio: 3/4; grid-row: span 2; } .cat-card.tall .cover { position: absolute; inset: 0; background: linear-gradient(135deg, var(--bg-3), var(--accent-soft)); } .cat-card.tall .cover img { width: 100%; height: 100%; object-fit: cover; } .cat-card.tall .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.78) 100%); } .cat-card.tall .meta { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; } .cat-card.tall .meta h4 { margin: 0 0 3px; font-size: 15px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .cat-card.tall .meta p { margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.88); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .cat-card.tall .badge { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; backdrop-filter: blur(10px); } /* Плоский вариант: без фотографии. Ровно вдвое ниже tall-карточек. */ .cat-card.short { grid-row: span 1; aspect-ratio: auto; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); min-height: 110px; text-align: left; } .cat-card.short h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text); } .cat-card.short p { margin: 0; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } .cat-card.short .footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; } .cat-card.short .like { display: inline-flex; align-items: center; gap: 4px; } /* ------------------------------------------------------------------ * Окно чата * ------------------------------------------------------------------ */ .chat-screen { padding: 0; position: relative; } .chat-screen .screen-body { /* Снизу: высота композера (≈64) + safe-bottom + клавиатура. Без --kb-height последнее сообщение прячется под клавишами. */ padding: 0 var(--gap-3) calc(72px + var(--safe-bottom) + var(--kb-height)); position: relative; z-index: 1; transition: padding-bottom var(--t-norm) var(--ease); } /* Слой пользовательского фона. Использует position:fixed, чтобы покрывать весь viewport независимо от того, сколько сообщений в чате (иначе при пустом чате фон обрезался по высоте app-shell). Лежит ниже содержимого через z-index:0; .screen-body имеет z-index:1. */ .chat-bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--chat-bg-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 250ms ease; } .chat-bg-layer::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--chat-bg-dim, 0.4)); } /* Слой виден только когда мы на экране чата И задана картинка. chat-bg-layer теперь живёт на уровне .app-shell, видимостью управляем через data-active-screen на body и собственный data-has-bg слоя. */ body[data-active-screen="chat"] .chat-bg-layer[data-has-bg="true"] { opacity: 1; } .chat-screen[data-has-bg="true"] .chat-header { background: rgba(0, 0, 0, 0.35); } .chat-header { display: flex; align-items: center; gap: var(--gap-3); padding: calc(var(--gap-3) + var(--safe-top)) var(--gap-4) var(--gap-3); background: rgba(15, 8, 22, 0.45); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; } .chat-header .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); overflow: hidden; flex-shrink: 0; padding: 0; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text); position: relative; transition: transform 120ms ease, box-shadow 120ms ease; } .chat-header .avatar:hover { transform: scale(1.06); box-shadow: 0 0 0 2px var(--accent); } .chat-header .avatar img { width: 100%; height: 100%; object-fit: cover; } .chat-header .avatar img:not([src]), .chat-header .avatar img[src=""] { display: none; } .avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; } .chat-header .title { flex: 1; min-width: 0; } .chat-header .title .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-header .title .status { font-size: 11px; color: var(--accent); } .messages { display: flex; flex-direction: column; gap: 8px; padding: 16px 4px 8px; min-height: 100%; } .msg { max-width: 78%; padding: 10px 14px; border-radius: 18px; word-wrap: break-word; white-space: pre-wrap; position: relative; animation: msg-in 220ms cubic-bezier(.2,.8,.2,1); } @keyframes msg-in { 0% { opacity: 0; transform: translateY(6px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .msg.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-bottom-left-radius: 6px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); } .msg.user { align-self: flex-end; /* Полу-прозрачный градиент: фон проглядывает, но цвет акцента читается */ background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--accent-2) 75%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-bottom-right-radius: 6px; color: #fff; box-shadow: 0 4px 18px var(--accent-soft); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* На экране чата с пользовательским фоном делаем бульки чуть более полупрозрачными, чтобы фон проглядывал ярче. */ .chat-screen[data-has-bg="true"] .msg.bot { background: rgba(20, 12, 30, 0.42); border-color: rgba(255, 255, 255, 0.12); } .chat-screen[data-has-bg="true"] .msg.user { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, transparent), color-mix(in srgb, var(--accent-2) 65%, transparent)); } .msg.system, .msg.error { align-self: center; background: rgba(255,255,255,0.04); border: 1px dashed var(--border); color: var(--muted); font-size: 12px; border-radius: 12px; text-align: center; max-width: 92%; } .msg.error { color: var(--error); border-color: var(--error); } .msg-row { display: flex; align-items: flex-end; gap: 8px; } .msg-row.bot { justify-content: flex-start; } .msg-row.user { justify-content: flex-end; } .msg-row .mini-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--bg-3); border: 1px solid var(--border); } .msg-row .mini-avatar img { width: 100%; height: 100%; object-fit: cover; } .msg-row.user .mini-avatar { display: none; } .msg-row .time { font-size: 10px; color: rgba(255,255,255,0.5); align-self: flex-end; flex-shrink: 0; } .composer { position: fixed; left: 0; right: 0; /* Поднимается над клавиатурой (см. wireKeyboardSync в app.js). */ bottom: var(--kb-height); z-index: 30; display: none; /* виден только в чате — ставится через .visible */ justify-content: center; pointer-events: none; transition: bottom var(--t-norm) var(--ease); } .composer.visible { display: flex; } .composer-inner { pointer-events: auto; width: 100%; max-width: 480px; /* safe-bottom — чтобы home-indicator iPhone не закрывал текстарею */ padding: var(--gap-3) var(--gap-3) calc(var(--gap-3) + var(--safe-bottom)); background: rgba(15, 8, 22, 0.55); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border-top: 1px solid var(--border); display: flex; align-items: flex-end; gap: var(--gap-2); } /* Когда клавиатура открыта — safe-bottom не нужен (home-indicator уже не мешает, под клавишами он скрыт). Иначе под клавишами получаем «двойной» зазор и текстарея кажется приподнятой. */ :root[data-kb-open="true"] .composer-inner, :root[data-kb-open="true"] .bottom-nav-inner { padding-bottom: var(--gap-3); } .composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; padding: 11px 14px; border-radius: 22px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); outline: none; line-height: 1.4; } .composer textarea:focus { border-color: var(--accent); } .composer .send-btn { width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px var(--accent-soft); } .composer .send-btn:active { transform: scale(0.92); } /* ------------------------------------------------------------------ * Контекст-меню (3 точки) * ------------------------------------------------------------------ */ .popover-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.35); backdrop-filter: blur(2px); display: none; animation: fade-in 180ms ease; } .popover-overlay.open { display: block; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .popover { position: absolute; top: 64px; right: 14px; min-width: 240px; padding: 6px; background: rgba(20, 12, 30, 0.85); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.4); animation: bubble-in 220ms cubic-bezier(.2,.8,.2,1); transform-origin: top right; } .popover-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: none; background: transparent; color: var(--text); width: 100%; text-align: left; font-size: 14px; transition: background 150ms ease; } .popover-item:hover { background: rgba(255,255,255,0.06); } .popover-item .ic-wrap { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .popover-item.danger { color: var(--error); } .popover-item.danger .ic-wrap { background: rgba(255,107,107,0.12); color: var(--error); } .popover-item .label .desc { font-size: 11px; color: var(--muted); margin-top: 1px; } /* ------------------------------------------------------------------ * Sheet (нижний модальный лист) * ------------------------------------------------------------------ */ .sheet-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); display: none; animation: fade-in 200ms ease; } .sheet-overlay.open { display: flex; align-items: flex-end; justify-content: center; } .sheet { width: 100%; max-width: 480px; /* Учитываем клавиатуру: при её появлении лист сжимается, оставляя поля в зоне видимости. */ max-height: calc(90vh - var(--kb-height)); max-height: calc(90dvh - var(--kb-height)); background: rgba(20, 12, 30, 0.92); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border-top: 1px solid var(--border-strong); border-radius: var(--rad-xl) var(--rad-xl) 0 0; display: flex; flex-direction: column; animation: sheet-in 280ms var(--ease); /* «Поднимаем» весь лист над клавиатурой. */ margin-bottom: var(--kb-height); transition: margin-bottom var(--t-norm) var(--ease), max-height var(--t-norm) var(--ease); } @keyframes sheet-in { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .sheet-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 10px auto; flex-shrink: 0; } .sheet-header { display: flex; align-items: center; gap: 10px; padding: 4px 18px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sheet-header h3 { margin: 0; font-size: 17px; font-weight: 600; flex: 1; } .sheet-body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; } .sheet-footer { display: flex; gap: var(--gap-2); padding: var(--gap-3) var(--gap-5) calc(var(--gap-3) + var(--safe-bottom)); border-top: 1px solid var(--border); flex-shrink: 0; } :root[data-kb-open="true"] .sheet-footer { /* при открытой клавиатуре safe-bottom не нужен */ padding-bottom: var(--gap-3); } /* ------------------------------------------------------------------ * Settings form (внутри sheet) * ------------------------------------------------------------------ */ .banner { padding: 12px 14px; border-radius: 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.45; border: 1px solid var(--border); background: rgba(255,255,255,0.04); } .banner.override { border-color: var(--accent); background: var(--accent-soft); } .banner b { display: block; margin-bottom: 4px; } .banner .row-mini { margin-top: 10px; } .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .form-field .head { display: flex; flex-direction: column; gap: 2px; } .form-field .head .lbl { font-weight: 600; font-size: 14px; } .form-field .head .desc { color: var(--muted); font-size: 12px; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .choice-btn { padding: 10px 8px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text); font-size: 13px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; transition: all 150ms ease; } .choice-btn.selected { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; } .slider-row { display: flex; align-items: center; gap: 12px; } .slider-row input[type="range"] { flex: 1; -webkit-appearance: none; height: 4px; background: var(--border-strong); border-radius: 2px; } .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); cursor: pointer; box-shadow: 0 2px 8px var(--accent-soft); } .slider-row .val { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .counter { text-align: right; font-size: 11px; color: var(--muted); margin-top: 4px; } .counter.over { color: var(--error); } /* ------------------------------------------------------------------ * Профиль / темы * ------------------------------------------------------------------ */ .profile-card { padding: 24px 18px; text-align: center; margin-bottom: 18px; } .profile-card .avatar-big { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: #fff; box-shadow: 0 8px 30px var(--accent-soft); } .profile-card .email { font-weight: 600; margin: 4px 0; } .profile-card .uid { font-size: 11px; color: var(--muted); word-break: break-all; margin-bottom: 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .theme-card { padding: 14px; cursor: pointer; text-align: left; border: 2px solid transparent; transition: transform 150ms ease; } .theme-card:active { transform: scale(0.97); } .theme-card.selected { border-color: var(--accent); } .theme-card .swatches { display: flex; gap: 4px; margin-bottom: 8px; } .theme-card .swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); } .theme-card .name { font-size: 13px; font-weight: 600; } .theme-card .desc { font-size: 11px; color: var(--muted); margin-top: 2px; } .section-card { padding: 14px 16px; margin-bottom: 12px; } .section-card h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } /* ------------------------------------------------------------------ * Upload зона (фон чата, аватарка) * ------------------------------------------------------------------ */ .upload-zone { position: relative; min-height: 160px; border-radius: 16px; border: 2px dashed var(--border-strong); background: rgba(255,255,255,0.03); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 16px; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; text-align: center; overflow: hidden; } .upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); } .upload-zone .ic-wrap { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); } .upload-zone .ic-wrap svg { width: 22px; height: 22px; display: block; /* убираем inline-baseline сдвиг */ } .upload-zone .placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; } .upload-zone .upload-text { font-weight: 600; font-size: 14px; } .upload-zone .upload-hint { font-size: 12px; color: var(--muted); } .upload-zone input[type="file"] { display: none; } .upload-zone.has-image { border-style: solid; border-color: var(--border); padding: 0; min-height: 200px; } .upload-zone.has-image .preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } .upload-zone.has-image .placeholder { display: none; } .upload-zone .remove-btn { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.65); color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .upload-zone .uploading { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; border-radius: 14px; color: #fff; font-size: 13px; z-index: 3; gap: 10px; } /* Превью затемнения для фона */ .dim-preview { position: relative; border-radius: 14px; overflow: hidden; margin-top: 12px; aspect-ratio: 16/9; background-size: cover; background-position: center; border: 1px solid var(--border); } .dim-preview::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0, var(--preview-dim, 0.4)); transition: background 100ms ease; } .dim-preview .sample { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; color: #fff; font-size: 13px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); } .dim-preview.empty { background: linear-gradient(135deg, var(--bg-3), var(--accent-soft)); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; } .dim-preview.empty::after { display: none; } /* Аватар-большой в листе персонажа */ .avatar-circle { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto; background: linear-gradient(135deg, var(--accent), var(--accent-2)); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: #fff; border: 3px solid var(--border-strong); box-shadow: 0 8px 32px var(--accent-soft); position: relative; } .avatar-circle img { width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------------ * Memory / Things sheets * ------------------------------------------------------------------ */ .memory-list { display: flex; flex-direction: column; gap: 10px; } .memory-item { padding: 12px 14px; } .memory-item .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .memory-item .num { font-size: 12px; color: var(--muted); font-weight: 600; } .memory-item textarea { width: 100%; min-height: 70px; background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; color: var(--text); outline: none; resize: vertical; } .memory-item.dirty textarea { border-color: var(--accent); } /* ------------------------------------------------------------------ * Toast * ------------------------------------------------------------------ */ .toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(20px); background: rgba(20, 12, 30, 0.92); backdrop-filter: blur(20px); border: 1px solid var(--border-strong); padding: 10px 16px; border-radius: 12px; font-size: 13px; z-index: 300; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; } .toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .toast.error { border-color: var(--error); color: var(--error); } /* ------------------------------------------------------------------ * Утилиты * ------------------------------------------------------------------ */ .row-flex { display: flex; gap: 8px; } .row-flex.center { align-items: center; } .muted { color: var(--muted); } .small { font-size: 12px; } .hidden { display: none !important; } .spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* Прячем родную полосу прокрутки на горизонтальных списках */ .hscroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; } .hscroll::-webkit-scrollbar { display: none; } /* Карточки в горизонтальном scroll каталога — фиксированная ширина */ .h-card { flex: 0 0 140px; aspect-ratio: 3/4; } /* Уменьшение шапки на узких устройствах */ @media (max-width: 360px) { .screen-header h1 { font-size: 20px; } .brand { font-size: 26px; } } /* ------------------------------------------------------------------ * Поиск по своим чатам (живёт всегда сверху экрана "Чаты") * ------------------------------------------------------------------ */ /* .chats-search удалён — поиск теперь рендерится в .page-header > .page-search */ /* ------------------------------------------------------------------ * Экран деталей персонажа (открывается из каталога). * * Нижний нав скрыт (см. showScreen) — поэтому здесь не нужен большой * padding-bottom под navbar. Sticky-actions сами держат свой safe-bottom. * ------------------------------------------------------------------ */ .screen[data-screen="character-detail"] .screen-body { /* Full-bleed: убираем боковые отступы — hero идёт от края до края. Контент-блоки сами добавят свой padding (см. .char-detail-content). */ padding: 0 0 calc(var(--safe-bottom) + var(--gap-4)); scroll-behavior: smooth; } .char-detail { display: flex; flex-direction: column; } /* Hero (большая обложка) — на всю ширину контейнера, без скруглений сверху, с round-bottom для эффекта «карточка персонажа». */ .char-detail .hero { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(135deg, var(--bg-3), var(--accent-soft)); border-bottom-left-radius: var(--rad-xl); border-bottom-right-radius: var(--rad-xl); } .char-detail .hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .char-detail .hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 55%, rgba(0,0,0,0.85) 100%); } .char-detail .hero-back { position: absolute; top: calc(var(--gap-3) + var(--safe-top)); left: calc(var(--gap-3) + var(--safe-left)); z-index: 2; /* «Стеклянная» кнопка над фото, чтобы читалась на любой картинке */ background: rgba(0,0,0,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Компактная шапка для случая «без картинки» — без hero-секции */ .char-detail .compact-header { display: flex; align-items: center; gap: var(--gap-2); padding: calc(var(--gap-3) + var(--safe-top)) var(--gap-5) var(--gap-3); } /* Контент-блок (текст + теги). Не зависит от hero, единый ритм. */ .char-detail-content { padding: var(--gap-4) var(--gap-5) var(--gap-2); display: flex; flex-direction: column; gap: var(--gap-3); } .char-detail h2 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.2; } .char-detail .meta-row { display: flex; align-items: center; gap: var(--gap-2); flex-wrap: wrap; } .char-detail .category-pill { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; margin: 0; } .char-detail .description { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0; white-space: pre-wrap; word-wrap: break-word; } .char-detail .stats { display: flex; gap: var(--gap-2); align-items: center; margin: 0; font-size: 13px; color: var(--muted); } .char-detail .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .char-detail .tag { padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 500; } /* Действия — фиксированный нижний бар, не sticky (избежим прыжков при коротком контенте). Учитывает safe-bottom. */ .char-detail .actions { position: sticky; bottom: calc(var(--gap-3) + var(--safe-bottom)); margin: var(--gap-4) var(--gap-4) 0; display: flex; gap: var(--gap-2); padding: var(--gap-2); background: rgba(15, 8, 22, 0.65); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-radius: var(--rad-lg); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); } .char-detail .actions .btn { flex: 1; } /* ------------------------------------------------------------------ * ПК-адаптация. На широких экранах: * • контент шире (до 720 в обычных списках, до 980 в каталоге) * • больше колонок в каталоге и темах * • bottom-nav сохраняем (единый UX), но выравниваем по контенту * ------------------------------------------------------------------ */ /* ================================================================== * Десктопная адаптация. Принципы: * • app-shell не растёт бесконечно — длинные строки читать тяжело; * • caталог раскрывается шире (это сетка, не тексты); * • composer/bottom-nav зеркалят ширину shell — навигация всегда * над контентом, а не далеко в стороне. * ================================================================== */ @media (min-width: 768px) { .app-shell { max-width: 720px; } /* Списочные экраны */ .screen-body { padding-left: var(--gap-6); padding-right: var(--gap-6); } .page-header, .screen-header { padding-left: var(--gap-6); padding-right: var(--gap-6); } /* Каталог раскрывается шире shell. */ .screen[data-screen="catalog"] .screen-body { max-width: 980px; width: 100%; margin: 0 auto; } .screen[data-screen="catalog"] { align-items: center; } .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .theme-grid { grid-template-columns: repeat(3, 1fr); } .composer-inner, .bottom-nav-inner { max-width: 720px; } /* Чуть больше воздуха в карточках */ .chat-list { gap: 12px; } .chat-row { padding: 14px 16px; } /* Character-detail: hero не от края до края, а в карточке */ .screen[data-screen="character-detail"] .screen-body { max-width: 720px; margin: 0 auto; width: 100%; } .char-detail .hero { aspect-ratio: 16 / 10; border-radius: var(--rad-xl); margin: var(--gap-5) var(--gap-6) 0; } .char-detail .hero-back { top: var(--gap-3); left: var(--gap-3); } .char-detail-content { padding: var(--gap-5) var(--gap-6) var(--gap-2); } .char-detail .actions { margin-left: var(--gap-6); margin-right: var(--gap-6); } } @media (min-width: 1100px) { .app-shell { max-width: 860px; } .composer-inner, .bottom-nav-inner { max-width: 860px; } .screen[data-screen="catalog"] .screen-body { max-width: 1100px; } .cat-grid { grid-template-columns: repeat(4, 1fr); } } /* На очень широких экранах не растягиваем дальше: читать длинные строки тяжело. */ @media (min-width: 1400px) { .app-shell { max-width: 920px; } .composer-inner, .bottom-nav-inner { max-width: 920px; } } /* ------------------------------------------------------------------ * Toggle (свич) для опций в профиле * ------------------------------------------------------------------ */ .toggle-row { display: flex; align-items: center; gap: 14px; padding: 4px 2px; cursor: pointer; } .toggle-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .toggle-title { font-size: 15px; font-weight: 600; color: var(--text); } .toggle-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; } .toggle { position: relative; flex-shrink: 0; } .toggle input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .toggle-track { display: inline-block; width: 46px; height: 26px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); border-radius: 999px; position: relative; transition: background 180ms ease, border-color 180ms ease; } .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 180ms cubic-bezier(.2,.8,.2,1); } .toggle input:checked + .toggle-track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; } .toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); } /* ------------------------------------------------------------------ * Лайк-кнопка на карточках каталога и в детальном экране * ------------------------------------------------------------------ */ .like-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; background: rgba(20, 14, 30, 0.55); border: 1px solid var(--border); color: var(--text); border-radius: 999px; cursor: pointer; backdrop-filter: blur(10px); transition: transform 160ms ease, background 160ms ease, color 160ms ease; font-size: 12.5px; font-weight: 600; line-height: 1; } .like-btn svg { width: 16px; height: 16px; transition: fill 160ms ease, transform 220ms cubic-bezier(.2,.8,.2,1); fill: none; } .like-btn:hover { background: rgba(20, 14, 30, 0.7); transform: translateY(-1px); } .like-btn.liked { color: #ff5b87; border-color: rgba(255, 91, 135, 0.4); } .like-btn.liked svg { fill: currentColor; transform: scale(1.08); } /* На карточке каталога — позиционируем поверх изображения */ .cat-card .like-btn.on-card { position: absolute; top: 10px; right: 10px; z-index: 3; } .cat-card.short .like-btn.on-card { top: 8px; right: 8px; }