/* === Theme tokens === */ :root { --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f1f3f9; --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; --border: #e2e8f0; --border-strong: #cbd5e1; --accent: #6366f1; --accent-2: #818cf8; --danger: #dc2626; --warn: #b45309; --warn-bg: #fef3c7; --today: #6366f1; --shadow: 0 6px 24px rgba(15, 23, 42, .08); --shadow-modal: 0 30px 80px rgba(15, 23, 42, .25); --radius: 14px; --radius-sm: 10px; --gap: 14px; --font-base: 16px; /* --cal-scale controls font/icon size inside cells. */ --cal-scale: 1; /* --cal-grid-max caps the calendar width so that on wide screens cells don't become absurdly large. On narrow screens the grid shrinks to fit viewport. */ --cal-grid-max: 560px; --cal-cell-pad: 4px; --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); } [data-theme="dark"] { --bg: #0b1020; --surface: #131a2e; --surface-2: #1a2240; --text: #e6ecff; --text-2: #aab3d2; --text-3: #6b7596; --border: #243056; --border-strong: #36447a; --accent: #818cf8; --accent-2: #a5b4fc; --warn: #fbbf24; --warn-bg: #3a2f10; --today: #a5b4fc; --shadow: 0 6px 24px rgba(0, 0, 0, .35); } @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg: #0b1020; --surface: #131a2e; --surface-2: #1a2240; --text: #e6ecff; --text-2: #aab3d2; --text-3: #6b7596; --border: #243056; --border-strong: #36447a; --accent: #818cf8; --accent-2: #a5b4fc; --warn: #fbbf24; --warn-bg: #3a2f10; --today: #a5b4fc; --shadow: 0 6px 24px rgba(0, 0, 0, .35); } } /* === Extra named themes === */ [data-theme="blue"] { --bg: #0a1830; --surface: #0f2444; --surface-2: #15315c; --text: #e8f1ff; --text-2: #9fbbe6; --text-3: #5f7aa6; --border: #1d3a66; --border-strong: #2b5288; --accent: #38bdf8; --accent-2: #7dd3fc; --warn: #fbbf24; --warn-bg: #233143; --today: #38bdf8; --shadow: 0 6px 24px rgba(0, 0, 0, .42); } [data-theme="black"] { --bg: #000000; --surface: #0c0c0e; --surface-2: #17171b; --text: #f4f4f5; --text-2: #b4b4bb; --text-3: #6e6e76; --border: #26262b; --border-strong: #3a3a42; --accent: #a5b4fc; --accent-2: #c7d2fe; --warn: #fbbf24; --warn-bg: #221f0f; --today: #a5b4fc; --shadow: 0 6px 24px rgba(0, 0, 0, .6); } [data-theme="white"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f4f5; --text: #18181b; --text-2: #52525b; --text-3: #a1a1aa; --border: #e6e6ea; --border-strong: #d4d4d8; --accent: #6366f1; --accent-2: #818cf8; --warn: #b45309; --warn-bg: #fef3c7; --today: #6366f1; --shadow: 0 6px 20px rgba(15, 23, 42, .08); } [data-theme="orange"] { --bg: #fff7ed; --surface: #fffdfb; --surface-2: #ffedd5; --text: #3b1606; --text-2: #9a3412; --text-3: #c2734a; --border: #fed7aa; --border-strong: #fdba74; --accent: #ea580c; --accent-2: #fb923c; --warn: #b45309; --warn-bg: #fff1d6; --today: #ea580c; --shadow: 0 6px 24px rgba(124, 45, 18, .14); } /* Match native form controls (date/time pickers, text fields) to the theme so they don't render dark on a light theme (or vice-versa) via the OS preference. */ [data-theme="light"], [data-theme="white"], [data-theme="orange"] { color-scheme: light; } [data-theme="dark"], [data-theme="blue"], [data-theme="black"] { color-scheme: dark; } [data-theme="auto"] { color-scheme: light dark; } /* Font scale (drives font-size, so every `rem` in the file rescales). */ [data-font="small"] { --font-base: 14px; } [data-font="medium"] { --font-base: 16px; } [data-font="large"] { --font-base: 18px; } [data-font="xlarge"] { --font-base: 21px; } /* Calendar size: shrinks/grows BOTH the grid cap and the inside-cell scale. The grid cap means the 7-column grid never gets wider than this on desktop — cells stay reasonably sized. On narrow viewports the grid shrinks to fit. */ [data-calendar="small"] { --cal-scale: 0.85; --cal-grid-max: 420px; } [data-calendar="medium"] { --cal-scale: 1; --cal-grid-max: 560px; } [data-calendar="large"] { --cal-scale: 1.9; --cal-grid-max: 820px; } /* Throttle the "large" inside-cell scale on phones so digits/dots still fit. */ @media (max-width: 720px) { [data-calendar="large"] { --cal-scale: 1.5; } } @media (max-width: 540px) { [data-calendar="large"] { --cal-scale: 1.3; } } @media (max-width: 400px) { [data-calendar="large"] { --cal-scale: 1.15; } } /* === Reset / base === */ * { box-sizing: border-box; } /* Make [hidden] always win against display:grid/flex on screens/modals */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } /* font-size MUST live on so every `rem` in the rest of the file rescales. */ html { color-scheme: light dark; font-size: var(--font-base); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100dvh; padding-bottom: calc(20px + var(--safe-bottom)); } button { font-family: inherit; cursor: pointer; } /* === Top bar === */ .topbar { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 44px 1fr auto 44px; align-items: center; gap: 6px; padding: calc(10px + var(--safe-top)) 12px 10px; background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .topbar .title { margin: 0; font-size: 1.05rem; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-btn { width: 40px; height: 40px; border-radius: 12px; background: transparent; border: 1px solid transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; } .icon-btn:hover, .icon-btn:focus-visible { background: var(--surface-2); border-color: var(--border); outline: none; } /* Keep topbar icon buttons occupying their grid column even when hidden */ .topbar .icon-btn[hidden] { display: inline-flex !important; visibility: hidden; pointer-events: none; } /* Editor-mode toggle in the top bar */ .editor-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; color: var(--text-2); font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .editor-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; } .editor-toggle:hover { border-color: var(--border-strong); } html[data-editor="on"] .editor-toggle { background: color-mix(in oklab, var(--accent) 18%, var(--surface-2)); border-color: var(--accent); color: var(--text); } .editor-toggle-label { /* Hide the text on very small screens — only the checkbox stays. */ } @media (max-width: 380px) { .editor-toggle-label { display: none; } .editor-toggle { padding: 6px 8px; } } /* Editor-only elements are hidden in view mode. Use display:none — buttons, the "+ Категория" tile, and any inline edit controls disappear entirely. */ html[data-editor="off"] .editor-only { display: none !important; } html[data-editor="off"] .cat-edit { display: none !important; } html[data-editor="off"] .cat-card.add { display: none !important; } /* In view mode the auth-screen has no editor-toggle either. */ #screenAuth ~ * .editor-only { /* no-op, just documentation */ } /* === Main / screens === */ main { max-width: 980px; margin: 0 auto; padding: 14px; } .screen { display: grid; gap: var(--gap); } .hint { color: var(--text-2); font-size: .92rem; margin: 0 4px; } /* === Categories grid === */ .grid { display: grid; gap: var(--gap); } .grid-cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .cat-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1 / 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); text-align: center; cursor: pointer; transition: transform .12s ease, border-color .15s; overflow: hidden; } .cat-card:hover { transform: translateY(-2px); border-color: var(--border-strong); } .cat-photo { width: 72px; height: 72px; border-radius: 50%; background-color: var(--surface-2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; color: var(--text-2); border: 3px solid var(--accent); flex-shrink: 0; } .cat-card .cat-name { font-weight: 600; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } .cat-card .cat-edit { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; border: none; background: color-mix(in oklab, var(--surface) 75%, transparent); color: var(--text-2); } .cat-card .cat-edit:hover { color: var(--text); background: var(--surface-2); } .cat-card.add { border: 2px dashed var(--border-strong); background: transparent; box-shadow: none; } .cat-card.add .plus { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: white; font-size: 2rem; font-weight: 300; } /* === Calendar toolbar === */ .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 6px 6px 6px; } .month-label { flex: 1; background: transparent; border: none; color: var(--text); font-size: clamp(1rem, calc(1.1rem * var(--cal-scale)), 1.8rem); font-weight: 700; padding: 8px; border-radius: 10px; text-transform: capitalize; } .month-label:hover { background: var(--surface-2); } /* === Weekdays / calendar grid === */ .weekdays, .calendar { display: grid; /* minmax(0, 1fr) lets columns shrink below their content width — without it long event titles or wide numbers could blow up a column on phones. */ grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; /* Cap the grid so cells stay reasonable on wide screens; shrink to fit on phones. */ width: 100%; max-width: var(--cal-grid-max); margin-left: auto; margin-right: auto; } .weekdays { padding: 4px 2px; } .weekday { text-align: center; color: var(--text-3); font-size: clamp(.7rem, calc(.8rem * var(--cal-scale)), 1.1rem); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .weekday.weekend { color: var(--accent); } .calendar { padding: 2px; } .cell { position: relative; /* Square proportions on any viewport — width is 1/7 of the (capped) grid row. No min-height: it would fight aspect-ratio on narrow screens and shove cells onto neighbours / off-screen. */ aspect-ratio: 1 / 1; min-width: 0; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; padding: clamp(2px, calc(var(--cal-cell-pad) * var(--cal-scale)), 8px); font-size: clamp(.7rem, calc(.88rem * var(--cal-scale)), 1.4rem); overflow: hidden; cursor: pointer; transition: border-color .12s, transform .08s; } .cell:hover { border-color: var(--border-strong); } .cell:active { transform: scale(.98); } .cell.other-month { background: transparent; border-color: transparent; color: var(--text-3); cursor: default; } .cell.other-month:hover { border-color: transparent; } .cell.today .daynum { background: var(--today); color: white; border-radius: 999px; width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; } .cell.selected { box-shadow: inset 0 0 0 2px var(--accent); } .daynum { font-weight: 600; line-height: 1; font-size: clamp(.78rem, calc(1rem * var(--cal-scale)), 1.6rem); } .cell .dots { margin-top: auto; display: flex; flex-wrap: wrap; gap: clamp(2px, calc(3px * var(--cal-scale)), 5px); padding-top: clamp(2px, calc(3px * var(--cal-scale)), 5px); } .dot { width: clamp(5px, calc(8px * var(--cal-scale)), 12px); height: clamp(5px, calc(8px * var(--cal-scale)), 12px); border-radius: 50%; background: var(--accent); } .dot.cross { background-size: cover; background-position: center; background-color: var(--surface-2); border: 1px solid var(--border-strong); width: clamp(6px, calc(10px * var(--cal-scale)), 14px); height: clamp(6px, calc(10px * var(--cal-scale)), 14px); border-radius: 50%; } .cell .cross-badge { position: absolute; top: clamp(2px, calc(4px * var(--cal-scale)), 6px); right: clamp(2px, calc(4px * var(--cal-scale)), 6px); width: clamp(11px, calc(14px * var(--cal-scale)), 20px); height: clamp(11px, calc(14px * var(--cal-scale)), 20px); border-radius: 50%; background: var(--warn); color: white; font-size: clamp(8px, calc(9px * var(--cal-scale)), 12px); font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1px solid var(--surface); } /* Diagonal split when crossing categories on the same day */ .cell .split { position: absolute; inset: 0; pointer-events: none; opacity: .45; } .cell .split::before, .cell .split::after { content: ""; position: absolute; inset: 0; } .cell .split::before { background: var(--split-color, transparent); clip-path: polygon(0 0, 100% 0, 0 100%); } .cell .split::after { background-image: var(--split-image, none); background-size: cover; background-position: center; clip-path: polygon(100% 0, 100% 100%, 0 100%); } /* Bottom marks container (range bars + dots), pinned to the cell bottom. */ .cell-marks { margin-top: auto; display: flex; flex-direction: column; gap: clamp(2px, calc(2px * var(--cal-scale)), 4px); min-width: 0; } .cell-marks .dots { margin-top: 0; } /* Multi-day event bar. Stretched to the cell's inner edges via negative margins so the same-coloured bars on consecutive days read as one continuous block. */ .range-bar { height: clamp(3px, calc(5px * var(--cal-scale)), 9px); background: var(--accent); border-radius: 0; margin-inline: calc(-1 * clamp(2px, calc(var(--cal-cell-pad) * var(--cal-scale)), 8px)); } .range-bar.is-start { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .range-bar.is-end { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } /* === Day panel (events list under calendar) === */ .day-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .day-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .day-panel-head h2 { margin: 0; font-size: clamp(.95rem, calc(1rem * var(--cal-scale)), 1.6rem); } .event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, calc(8px * var(--cal-scale)), 14px); } .event-list:empty::after { content: "На этот день пока нет событий."; color: var(--text-3); font-size: clamp(.85rem, calc(.9rem * var(--cal-scale)), 1.2rem); } .event-item { display: grid; grid-template-columns: clamp(12px, calc(14px * var(--cal-scale)), 22px) 1fr auto; align-items: center; gap: clamp(8px, calc(10px * var(--cal-scale)), 16px); padding: clamp(8px, calc(10px * var(--cal-scale)), 16px); background: var(--surface-2); border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; font-size: clamp(.95rem, calc(1rem * var(--cal-scale)), 1.4rem); } .event-item:hover { border-color: var(--border-strong); } .event-item .ev-color { width: clamp(12px, calc(14px * var(--cal-scale)), 22px); height: clamp(12px, calc(14px * var(--cal-scale)), 22px); border-radius: 50%; background: var(--accent); background-size: cover; background-position: center; } .event-item .ev-title { font-weight: 600; line-height: 1.2; font-size: clamp(.95rem, calc(1rem * var(--cal-scale)), 1.4rem); } .event-item .ev-sub { color: var(--text-2); font-size: clamp(.8rem, calc(.82rem * var(--cal-scale)), 1.1rem); margin-top: 2px; } .event-item.cross-cat .ev-color { border: 2px solid var(--warn); } .event-item .ev-warn { color: var(--warn); font-size: .76rem; font-weight: 700; background: var(--warn-bg); padding: 2px 6px; border-radius: 999px; } /* === Legend === */ .legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .legend:empty { display: none; } .legend-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border-radius: 999px; font-size: .82rem; } .legend-chip .swatch { width: 10px; height: 10px; border-radius: 50%; } /* === Forms & modals === */ .modal { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .5); display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: fade .15s ease; } @media (min-width: 640px) { .modal { align-items: center; padding: 20px; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal-card { width: 100%; max-width: 560px; background: var(--surface); color: var(--text); border-radius: 18px 18px 0 0; padding: 16px; box-shadow: var(--shadow-modal); max-height: 92dvh; overflow-y: auto; padding-bottom: calc(16px + var(--safe-bottom)); } @media (min-width: 640px) { .modal-card { border-radius: 18px; } } .modal-card.narrow { max-width: 420px; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .modal-head h3 { margin: 0; } .form { display: grid; gap: 12px; } .form label { display: grid; gap: 6px; font-size: .9rem; color: var(--text-2); font-weight: 600; } .form input[type="text"], .form input[type="date"], .form input[type="time"], .form input[type="datetime-local"], .form select, .form textarea { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 1rem; font-family: inherit; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); } .form textarea { resize: vertical; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .half { grid-column: span 1; } .form-actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; flex-wrap: wrap; } .spacer { flex: 1; } .primary-btn, .secondary-btn, .danger-btn { padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: .92rem; } .primary-btn { background: var(--accent); color: white; } .primary-btn:hover { filter: brightness(1.05); } .secondary-btn { background: var(--surface-2); color: var(--text); border-color: var(--border); } .secondary-btn:hover { border-color: var(--border-strong); } .secondary-btn:disabled { opacity: .5; cursor: not-allowed; } .danger-btn { background: transparent; color: var(--danger); border-color: color-mix(in oklab, var(--danger) 35%, transparent); } .danger-btn:hover { background: color-mix(in oklab, var(--danger) 12%, transparent); } /* Per-day time overrides for multi-day events */ .day-times { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); } .day-times-head { font-weight: 600; margin-bottom: 2px; } .day-times .hint { margin: 0 0 8px; } .day-times-list { display: grid; gap: 8px; max-height: 220px; overflow: auto; } .day-time-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; } .day-time-row .dt-label { color: var(--text-2); font-size: .9rem; min-width: 0; } .day-time-row input[type="time"] { width: auto; min-width: 0; padding: 6px 8px; } .day-time-row .dt-dash { color: var(--text-3); } .color-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; } .color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .color-swatch.selected { border-color: var(--text); transform: scale(1.08); } .photo-pick { display: flex; gap: 12px; align-items: center; } .photo-preview { width: 72px; height: 72px; border-radius: 50%; background-color: var(--surface-2); background-size: cover; background-position: center; border: 2px solid var(--border-strong); } .photo-actions { display: flex; flex-direction: column; gap: 6px; } .notif { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0; } .notif legend { padding: 0 6px; color: var(--text-2); font-size: .85rem; font-weight: 600; } .check, .notif .check { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-weight: 500; } .check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; } .notif .row { margin-top: 8px; } .warn { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: .88rem; font-weight: 600; } /* Settings */ .settings { display: grid; gap: 16px; } .setting { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .setting-label { font-weight: 700; color: var(--text); font-size: .95rem; } .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; align-self: start; } .seg-btn { border: 0; background: transparent; color: var(--text-2); padding: 8px 14px; border-radius: 8px; font-weight: 600; min-width: 44px; } .seg-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); } .seg [data-font-set="small"] { font-size: .85rem; } .seg [data-font-set="medium"] { font-size: 1rem; } .seg [data-font-set="large"] { font-size: 1.15rem; } .seg [data-font-set="xlarge"] { font-size: 1.35rem; } .row-btns { display: flex; flex-wrap: wrap; gap: 8px; } /* === Auth screen === */ .auth-screen { min-height: calc(100dvh - 80px); place-items: center; padding: 12px; } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .auth-brand { text-align: center; margin-bottom: 16px; } .auth-logo { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; font-size: 32px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; box-shadow: var(--shadow); } .auth-brand h2 { margin: 0 0 6px; font-size: 1.3rem; } .auth-sub { color: var(--text-2); font-size: .9rem; margin: 0 auto; max-width: 320px; } .auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px; } .auth-actions .primary-btn, .auth-actions .secondary-btn { width: 100%; } .form input[type="password"] { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 1rem; font-family: inherit; } .form input[type="password"]:focus { outline: none; border-color: var(--accent); } .warn-text { color: var(--warn); } /* Toast */ .toast { position: fixed; left: 50%; bottom: calc(20px + var(--safe-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600; z-index: 200; box-shadow: var(--shadow-modal); max-width: 90vw; } /* Small phone tweaks */ @media (max-width: 380px) { .grid-cats { grid-template-columns: repeat(2, 1fr); } .cat-photo { width: 60px; height: 60px; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* === Platform additions (zones admins / user visibility / profile) === */ .check-list { display: grid; gap: 6px; max-height: 200px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; background: var(--surface-2); } .check-list .check { margin: 0; } .profile-row { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } /* === Theme picker chips === */ .theme-grid { display: flex; flex-wrap: wrap; gap: 10px; } .theme-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid var(--border); border-radius: 12px; padding: 8px 10px; background: var(--surface-2); cursor: pointer; min-width: 66px; } .theme-chip:hover { border-color: var(--border-strong); } .theme-chip.active { border-color: var(--accent); } .theme-chip .swatch-preview { width: 44px; height: 30px; border-radius: 8px; position: relative; border: 1px solid rgba(120, 120, 120, .25); background: var(--chip-bg, #fff); } .theme-chip .swatch-preview::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--chip-accent, #6366f1); } .theme-chip .theme-name { font-size: .8rem; color: var(--text-2); } /* === Mobile / standalone polish === */ html { background: var(--bg); } body { min-height: 100dvh; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; } @media (display-mode: standalone) { /* Installed app: give the bottom a little safe-area breathing room. */ #main { padding-bottom: calc(8px + var(--safe-bottom)); } } /* === Chat === */ .chat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .chat-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .chat-item:hover { border-color: var(--border-strong); } .chat-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; color: var(--accent); border: 1px solid var(--border); } .chat-item .ci-title { font-weight: 600; } .chat-item .ci-last { color: var(--text-2); font-size: .85rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } .chat-item .ci-time { color: var(--text-3); font-size: .75rem; } /* Conversation */ .chat-screen { display: flex; flex-direction: column; gap: 0; height: calc(100dvh - 140px); } .chat-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; } .chat-head-title { font-weight: 700; font-size: 1.05rem; } .messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .msg { max-width: 80%; padding: 8px 11px; border-radius: 14px; background: var(--surface-2); position: relative; } .msg.mine { align-self: flex-end; background: color-mix(in oklab, var(--accent) 22%, var(--surface-2)); } .msg .msg-author { font-size: .76rem; font-weight: 700; color: var(--accent); margin-bottom: 2px; } .msg .msg-reply { font-size: .76rem; color: var(--text-2); border-left: 3px solid var(--accent); padding-left: 6px; margin-bottom: 4px; opacity: .85; } .msg .msg-text { white-space: pre-wrap; word-break: break-word; } .msg .msg-meta { font-size: .68rem; color: var(--text-3); margin-top: 3px; text-align: right; } .msg.deleted .msg-text { font-style: italic; color: var(--text-3); } .msg-actions { display: flex; gap: 8px; margin-top: 4px; } .msg-actions button { background: transparent; border: none; color: var(--text-3); font-size: .72rem; padding: 0; cursor: pointer; } .msg-actions button:hover { color: var(--accent); } .msg .msg-mention { color: var(--accent); font-weight: 600; } .reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-top: none; } .reply-bar-text { flex: 1; font-size: .8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply-bar-label { color: var(--accent); font-weight: 600; } .composer { display: flex; gap: 8px; padding-top: 10px; } .composer input { flex: 1; } .composer .primary-btn { padding: 10px 16px; } /* === Chat media === */ .msg-media { display: block; max-width: 100%; border-radius: 10px; margin-top: 4px; cursor: pointer; } .msg-media.image { max-height: 320px; object-fit: cover; } .msg-media.video { max-height: 360px; background: #000; } .composer #attachBtn { flex: 0 0 auto; font-size: 1.2rem; } .upload-progress { font-size: .8rem; color: var(--text-2); padding: 4px 2px; } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 20px; } .lightbox-inner { max-width: 100%; max-height: 100%; display: flex; } .lightbox-inner img, .lightbox-inner video { max-width: 100%; max-height: 90vh; border-radius: 8px; } /* Chat info member rows */ .member-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .member-row .mr-name { flex: 1; } .member-row .mr-role { color: var(--text-3); font-size: .78rem; } .member-row button { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: .9rem; } /* === Voice / circle recording === */ .composer #voiceBtn, .composer #circleBtn { flex: 0 0 auto; font-size: 1.1rem; } .rec-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; } .rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: recpulse 1s infinite; } @keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } } .rec-time { font-variant-numeric: tabular-nums; color: var(--text-2); } .msg-media.audio { width: 240px; max-width: 70vw; } audio.msg-media { height: 40px; } .msg-media.circle { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; } .circle-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; } .circle-stage { position: relative; width: 280px; height: 280px; } .circle-stage video { width: 280px; height: 280px; border-radius: 50%; object-fit: cover; background: #000; transform: scaleX(-1); } .circle-time { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.5); padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; } .circle-controls { display: flex; gap: 12px; } /* === Year view === */ .view-toggle { flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-weight: 600; font-size: .85rem; padding: 8px 12px; border-radius: 999px; } .view-toggle:hover { border-color: var(--border-strong); } .calendar.year-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; max-width: 920px; } .mini-month { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; cursor: default; } .mini-title { text-align: center; font-weight: 700; font-size: .9rem; margin-bottom: 6px; text-transform: capitalize; cursor: pointer; border-radius: 6px; padding: 2px; } .mini-title:hover { background: var(--surface-2); } .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .mini-cell { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: .68rem; color: var(--text-2); border-radius: 5px; position: relative; cursor: pointer; } .mini-cell.other { color: transparent; cursor: default; } .mini-cell.today { background: var(--today); color: #fff; font-weight: 700; } .mini-cell.has-ev:not(.today)::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .mini-cell.has-ev.today::after { background: #fff; } .mini-cell:not(.other):hover { background: var(--surface-2); } /* === Unread badge + mention autocomplete === */ .icon-btn { position: relative; } .nav-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center; } .chat-item .ci-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; } .mention-box { margin-top: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; max-height: 180px; overflow-y: auto; } .mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; } .mention-item:hover, .mention-item.active { background: var(--surface-2); } .mention-item .mi-name { font-weight: 600; } .mention-item .mi-user { color: var(--text-3); font-size: .8rem; } /* === Emoji panel + record button + circle playback (TG-like) === */ .record-btn { font-size: 1.15rem; color: var(--accent); } .record-btn.recording { color: var(--danger); } #recModeBtn { font-size: 1.05rem; } .emoji-panel { margin-top: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; max-height: 200px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .emoji-panel button { background: transparent; border: none; font-size: 1.3rem; line-height: 1; padding: 6px; border-radius: 8px; cursor: pointer; } .emoji-panel button:hover { background: var(--surface-2); } .circle-wrap { position: relative; width: 200px; max-width: 70vw; margin-top: 4px; cursor: pointer; } .circle-wrap video.circle { width: 100%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover; background: #000; display: block; } .circle-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #fff; font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,.6); } .circle-wrap.playing .circle-play { display: none; }