:root {
  color-scheme: light;
  --ink:#222428;
  --muted:#6f706a;
  --blue:#4262ff;
  --paper:#fff;
  --quiet:#f0f0ec;
  --line:#e7e7e3;
  --shadow:0 2px 4px rgba(34,36,40,.08);
  font:14px/1.45 "Noto Sans","Segoe UI",Arial,sans-serif;
  color:var(--ink);
}
*,*::before,*::after {box-sizing:border-box}
body {margin:0}
[hidden] {display:none!important}
button,input,textarea,select {font:inherit;color:inherit}
button {cursor:pointer;border:0;background:none}
button:disabled {cursor:default;opacity:.38}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:2px solid var(--blue);outline-offset:2px}
input,select,textarea {padding:9px 12px;border:1px solid #d9d9d4;border-radius:8px;background:#fff}
input,textarea {min-width:0}
textarea {resize:vertical}
a {color:inherit}
h1,h2,h3,p {margin:0}
svg {display:block}
button svg,.menu-row svg {width:24px;height:24px;flex:none}
.surface {background:var(--paper);border-radius:16px;box-shadow:var(--shadow)}
.square {display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 40px;padding:0;border-radius:12px}
.square:hover:not(:disabled),.square.selected,.square[aria-expanded=true] {background:var(--quiet)}
.square[aria-expanded=true] {outline:2px solid var(--blue);outline-offset:-2px}
.primary,.dark,.soft {display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 13px;border-radius:8px;font-weight:650;white-space:nowrap;min-height:32px}
.primary {background:var(--blue);color:#fff}
.primary:hover {background:#3450e4}
.dark {background:#222428;color:#fff}
.dark:hover {background:#404148}
.soft,.filled {background:#eeefea}
.soft:hover {background:#e4e5df}
.soft svg,.primary svg,.dark svg {width:18px;height:18px}
.separator {height:1px;background:var(--line);margin:4px 5px}
.spacer {flex:1}
.brand {display:block;width:91px;height:27px;object-fit:contain}
.avatar {display:inline-grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#a63c15;color:white;font-weight:700;padding:0;font-size:12px}
.peer {background:#7956cf;border:2px solid #fff;margin-left:-6px}
.peer-stack {display:flex;padding-left:4px}
.peer-stack:empty {display:none}
.popover {position:fixed;min-width:180px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;z-index:30;padding:4px;box-shadow:0 2px 8px #22242824,0 0 12px #2224280a;border:1px solid #2224280a}
.menu-row {width:100%;display:flex;align-items:center;gap:8px;text-align:left;min-height:36px;border-radius:8px;padding:6px 8px;white-space:nowrap}
.menu-row:hover {background:var(--quiet)}
.menu-row span {min-width:0;overflow:hidden;text-overflow:ellipsis}
.menu-row svg {width:20px;height:20px}
kbd {font:inherit;color:var(--muted);font-size:11px;margin-left:auto;padding-left:8px}

/* Главная */
body[data-screen=home] {
  --ink:#222428;
  --muted:#666760;
  --line:#e8e7e2;
  --quiet:#efeee9;
  background:#fff;
  color:var(--ink);
}
body[data-screen=home] #app {display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100dvh}
.home-sidebar {padding:16px;min-width:0}
.team {display:flex;align-items:center;gap:8px;margin-bottom:14px}
.team strong {flex:1}
.team-icon {width:32px;height:32px;border-radius:8px;object-fit:contain;flex:none}
.home-sidebar .square {width:32px;height:32px;flex-basis:32px;border-radius:8px}
.home-sidebar .square svg {width:18px;height:18px}
.search-row {display:flex;align-items:center;gap:8px}
.home-search {display:flex;align-items:center;gap:6px;min-width:0;flex:1;border:1px solid var(--line);border-radius:8px;padding:0 8px}
.home-search svg {width:16px;height:16px;color:var(--muted);flex:none}
.home-search input {border:0;min-width:0;width:100%;padding:7px 0;background:transparent}
.home-search input:focus-visible {outline:none}
.home-search:focus-within {outline:2px solid var(--blue)}
.home-nav {display:grid;gap:4px;margin:12px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.nav-row {display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:40px;padding:0 10px;text-align:left;border-radius:9px;overflow-wrap:anywhere}
.nav-row svg {width:18px;height:18px;flex:none}
.nav-row.current,.nav-row.current:hover {background:#efebf8;color:#512da9;font-weight:650}
.nav-row:hover {background:var(--quiet)}
.space-label {display:flex;align-items:center;justify-content:space-between;gap:6px;padding-left:8px;color:var(--muted);font-size:12px;font-weight:650}
.space-empty {padding:3px 8px;color:var(--muted);font-size:12px}
.space-empty button {padding:0;text-decoration:underline;text-underline-offset:2px;font-size:inherit}
.home-main {background:#f9f8f4;border:1px solid var(--line);border-radius:20px;margin:8px 8px 8px 0;min-width:0}
.home-top {display:flex;align-items:center;gap:12px;height:58px;padding:0 24px}
.home-top .brand {width:122px;height:27px}
.home-top .soft,.home-sidebar .filled {background:#eeede8;color:var(--ink)}
.home-top .soft:hover,.home-sidebar .filled:hover {background:#e7e5de}
.home-content {max-width:1060px;margin:0 auto;padding:21px 0 48px;width:calc(100% - 64px)}
.home-content h1 {font:400 clamp(34px,4.2vw,62px)/1.13 Georgia,serif;letter-spacing:-.047em;text-align:center;margin:4px 0 36px;color:#21211e;overflow-wrap:anywhere}
.home-content[data-home-filter=other] h1 {font:650 32px/1.2 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-.04em;text-align:start;margin:4px 0 25px}
.section-heading {display:flex;align-items:center;gap:4px;margin-bottom:4px}
.section-heading h2 {font-size:18px;font-weight:700;letter-spacing:-.02em}
.home-content .dark {background:#2b2925;color:white}
.home-content .dark:hover {background:#46443f}
.template-link {padding:0;color:var(--muted);font-size:12px;display:inline-flex;align-items:center;gap:4px}
.template-link:hover {color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.template-link svg {width:14px;height:14px}
.template-strip {display:flex;gap:16px;margin:12px 0 29px;padding:3px 3px 7px;overflow:auto;scrollbar-width:thin;scroll-snap-type:x proximity;scroll-padding-inline:3px}
.template-card {flex:0 0 150px;display:block;text-align:left;min-width:0;padding:0;border-radius:12px}
.template-strip .template-card {scroll-snap-align:start}
.template-card span {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;margin:7px 3px 3px}
.template-thumb {height:92px;border-radius:10px;background:#efeff6;border:1px solid #eae9ee;overflow:hidden}
.template-thumb img {width:100%;height:100%;object-fit:cover;display:block}
.template-0 {display:grid;place-items:center;background:#fff;border-color:#dededb;color:#494746}
.template-card:hover .template-thumb {border-color:#a68cde}
.home-content .recent-section+.recent-section {margin-top:24px}
.home-layout {display:flex;gap:2px}
.home-layout .square[aria-pressed=true] {background:#eeede8}
.recent-section .square {width:32px;height:32px;flex-basis:32px}
.recent-section .square svg {width:16px;height:16px}
.board-row {display:grid;grid-template-columns:minmax(135px,3.5fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:10px;min-height:58px;padding:0 5px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.board-row>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-row:not(.table-head):hover {background:#f2f0e9}
.table-head {min-height:38px;color:#484943;font-weight:600}
.board-name {display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;min-width:0}
.board-name strong {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}
.board-name:hover strong {text-decoration:underline}
.board-name svg {width:18px;height:18px;flex:none;color:#666760}
.board-list[data-layout=grid] {display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.board-list[data-layout=grid] .board-row {display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:96px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.board-list[data-layout=grid] .board-row:hover {border-color:#c9bddf;background:#fff}
.board-list[data-layout=grid] .board-row>span {display:none}
.starred {color:#947000}
.empty-list {padding:18px 0;color:var(--muted)}
.route-error {min-height:100dvh;display:grid;align-content:center;justify-items:center;gap:16px}

/* Доска */
body[data-screen=board] {overflow:hidden;overscroll-behavior:none}
#canvas {position:fixed;inset:0;outline:0;touch-action:none;user-select:none;--grid-size:80px;--pan-x:0px;--pan-y:0px;background-color:#f2f2f2;cursor:url("/cursor-select.svg") 6 6,default}
#canvas[data-grid=lines] {background-image:linear-gradient(to right,#e4e4e4 1px,transparent 1px),linear-gradient(to bottom,#e4e4e4 1px,transparent 1px),linear-gradient(to right,#ededed 1px,transparent 1px),linear-gradient(to bottom,#ededed 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size),var(--grid-size) var(--grid-size),calc(var(--grid-size)/4) calc(var(--grid-size)/4),calc(var(--grid-size)/4) calc(var(--grid-size)/4);background-position:var(--pan-x) var(--pan-y)}
#canvas[data-grid=dots] {background-image:radial-gradient(#cecec9 1px,transparent 1.2px);background-size:calc(var(--grid-size)/4) calc(var(--grid-size)/4);background-position:var(--pan-x) var(--pan-y)}
#canvas[data-tool=hand] {cursor:grab}
#canvas[data-tool=hand]:active {cursor:grabbing}
#canvas:not([data-tool=hand],[data-tool=select]) {cursor:crosshair}
#canvas:is([data-tool=pen],[data-tool=marker],[data-tool=smart]) {cursor:url("/cursor-pen.svg") 4 20,crosshair}
#canvas[data-tool=eraser] {cursor:url("/cursor-eraser.svg") 8 18,crosshair}
#canvas[data-tool=precision] {cursor:none}
#canvas[data-tool=lasso] {cursor:url("/cursor-lasso.svg") 8 21,crosshair}
#canvas[data-tool=comment] {cursor:url("/cursor-comment.svg") 4 20,crosshair}
#canvas[data-tool=text] {cursor:text}
#scene {overflow:hidden}
#overlay {pointer-events:none}
#overlay [data-resize],#overlay [data-connect],#overlay [data-endpoint] {pointer-events:all;cursor:crosshair}
#overlay [data-resize=nw],#overlay [data-resize=se] {cursor:nwse-resize}
#overlay [data-resize=ne],#overlay [data-resize=sw] {cursor:nesw-resize}
#overlay [data-resize=w],#overlay [data-resize=e] {cursor:ew-resize}
#canvas[data-tool=select] [data-type=comment] {cursor:pointer}
.collaborator-name {font:12px "Noto Sans","Segoe UI",Arial,sans-serif}
.hidden-cursors {display:none}
@media (prefers-reduced-motion:no-preference) {
  .collaborator-cursor {transition:transform 85ms linear}
}
.sticky {filter:drop-shadow(0 2px 2px #22242826)}
.object-text {height:100%;width:100%;display:flex;flex-direction:column;justify-content:safe center;white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden;padding:8px;line-height:1.25}
.object-text.text {padding:0;justify-content:flex-start}
.object-text.ellipse,.object-text.diamond,.object-text.triangle {padding:14%}
#editor {position:fixed;z-index:6;border:1px solid var(--blue);border-radius:0;resize:none;outline:none;box-shadow:0 2px 8px #22242820;line-height:1.25;padding:7px;overscroll-behavior:contain}
#editor[data-object-type=table] {border-radius:8px}
.board-table-action {cursor:pointer;outline:none}
.board-table-action:hover,.board-table-action:focus-visible {fill:#edf2ff;stroke:#c4d3ff}
.board-bar,.people-bar,.controls {position:fixed;display:flex;align-items:center;gap:4px;padding:4px;height:48px;z-index:10}
.board-bar {top:8px;left:8px;max-width:calc(100vw - 300px)}
.people-bar {top:8px;right:8px}
.people-bar .facilitation {width:60px;flex-basis:60px}
.people-bar .facilitation svg {width:45px;height:24px}
.people-bar .present-button {width:32px;height:32px;flex-basis:32px;border-radius:8px;background:var(--quiet)}
.board-logo {padding:0 5px}
.board-logo .brand {width:87px;height:30px}
.board-title {width:clamp(105px,14vw,220px);height:36px;border:1px solid transparent;padding:6px 8px;background:transparent;font-weight:600;text-overflow:ellipsis}
.board-title:hover {background:var(--quiet)}
.board-title:focus {background:white}
.share {margin:0 4px 0 2px;height:32px;border-radius:8px}
.controls {right:8px;bottom:8px}
.zoom-value {height:40px;min-width:58px;border-radius:12px;font-weight:650}
.zoom-value:hover {background:var(--quiet)}
.creation-dock {position:fixed;top:calc(50% - 8px);left:8px;transform:translateY(-50%);display:grid;gap:8px;z-index:12}
.creation,.undo-bar,.draw-tools,.launcher {display:flex;flex-direction:column;align-items:center;gap:4px;width:48px;padding:4px}
.launcher .launcher-button {background:#ffd53c}
.launcher .launcher-button:hover {background:#f5c827}
.launcher-button svg path {fill:currentColor}
.assistant-dock {position:fixed;z-index:8;left:50%;bottom:10px;transform:translateX(-50%);display:grid;justify-items:center;gap:13px}
.assistant-cards {display:flex;gap:12px;position:relative;left:-22px}
.assistant-card {width:208px;height:152px;padding:8px;text-align:left;display:grid;align-content:start;gap:8px;box-shadow:0 3px 12px #22242819}
.assistant-card:hover {outline:1px solid #b5bffc}
.assistant-card .template-thumb,.assistant-card-image {height:108px;border-radius:12px;width:100%;object-fit:cover}
.assistant-card strong {font-size:12px;padding:0 4px}
.assistant-card-controls {position:absolute;left:calc(100% + 10px);top:0;display:grid;gap:5px}
.assistant-card-controls .square {width:30px;height:30px;border-radius:50%;background:white;box-shadow:var(--shadow)}
.assistant-card-controls svg {width:16px;height:16px}
.assistant-input {display:flex;align-items:center;width:min(448px,calc(100vw - 20px));height:48px;padding:4px;box-shadow:0 3px 12px #22242819}
.assistant-input input {flex:1;height:100%;border:none;padding:0 4px}
.assistant-input svg {width:18px;height:18px}
.assistant-composer {background:#f6f6f2;box-shadow:0 3px 12px #22242819}
.assistant-shortcuts {height:30px;display:flex;align-items:center;padding:0 10px 0 14px;gap:8px}
.assistant-search-link {padding:0;color:#666760;font-size:12px}
.assistant-search-link:hover {text-decoration:underline}
.assistant-shortcuts .square {width:22px;height:22px;flex-basis:22px}
.assistant-shortcuts svg {width:15px;height:15px}
body {--assistant-width:360px}
.assistant-expanded #canvas {right:var(--assistant-width);border-radius:0 24px 24px 0}
.assistant-expanded .people-bar,.assistant-expanded .controls,.assistant-expanded #minimap {right:calc(var(--assistant-width) + 8px)}
.assistant-open .assistant-dock {display:none}
.assistant-panel {position:fixed;inset:0 0 0 auto;width:var(--assistant-width);z-index:18;display:flex;flex-direction:column;background:white;padding:20px 24px 16px;gap:16px}
.assistant-panel header {display:flex;align-items:center;gap:4px}
.assistant-panel header strong {border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.assistant-panel .square {width:32px;height:32px;flex-basis:32px}
.assistant-panel .square svg {width:18px;height:18px}
.assistant-transcript {flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;overflow-wrap:anywhere}
.assistant-suggestions {margin-top:auto;display:grid;gap:4px}
.assistant-suggestions strong {padding:0 8px 6px}
.assistant-chat-form {display:grid;gap:4px;padding:8px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.assistant-chat-form textarea {resize:vertical;min-height:46px;max-height:210px;border:0;padding:6px 8px}
.assistant-chat-actions {display:flex;align-items:center;gap:4px}
.assistant-chat-actions select {border:0;background:#f6f6f4;font-size:12px;padding:5px 8px}
.assistant-chat-actions .square {background:#222428;color:white}
.assistant-context {color:var(--muted);padding-inline:8px}
.assistant-context:empty {display:none}
.assistant-turn {padding:10px 12px;white-space:pre-wrap}
.assistant-turn ul {padding-left:22px}
.user-turn {align-self:flex-end;background:#f0f0ed;border-radius:12px}
.recording-menu {width:262px;padding:12px}
.recording-intro {display:grid;gap:8px;padding:12px;border-radius:9px;background:#f3f3ee}
.recording-clip {display:grid;gap:8px}
.recording-clip video {width:100%;max-height:320px;background:#222428}
.call-panel {position:fixed;top:64px;right:8px;z-index:20;width:min(360px,calc(100vw - 16px));padding:10px}
.call-panel header,.call-panel footer {display:flex;align-items:center;gap:6px}
.call-panel footer {justify-content:center;margin-top:8px}
.call-tiles {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.call-tile {position:relative;border-radius:10px;background:#292b35;aspect-ratio:4/3;overflow:hidden;color:white}
.call-tile video {width:100%;height:100%;object-fit:cover}
.call-tile span {position:absolute;bottom:5px;left:6px;padding:2px 5px;border-radius:4px;background:#222428b0}
.dialog-content .call-camera {display:flex;align-items:center;gap:8px}
.hide-comments [data-type=comment] {display:none}
body:has(#draw-tools:not([hidden])) .assistant-dock {display:none}
.draw-tools {position:fixed;left:64px;top:calc(50% - 12px);transform:translateY(-50%);z-index:13}
.draw-tools .separator {width:33px;margin:2px auto}
.preset {position:relative}
.preset::after {content:"";width:30px;height:30px;position:absolute;inset:5px;border:1px solid #ddd;border-radius:50%}
.preset.selected {background:none}
.preset.selected::after {border:2px solid var(--blue)}
.preset i,.context-color {display:block;border-radius:50%}
.context-color {width:20px;height:20px;border:1px solid #22242826}
.object-context {position:fixed;z-index:14;display:flex;align-items:center;gap:2px;padding:0 4px;height:48px;max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none;box-shadow:0 2px 8px #2224281f,0 0 12px #2224280a}
.object-context .separator {height:24px;width:1px;flex:0 0 1px;margin:0 3px}
.object-context select {height:35px;width:57px;padding:4px;border-color:transparent;flex:none}
.object-context select:hover {background:var(--quiet)}
#bold-style {font-weight:800}
#italic-style {font-style:italic}
#underline-style {text-decoration:underline}
.sticky-palette {display:grid;grid-template-columns:repeat(4,32px);gap:5px;padding:7px}
.note-swatch {width:32px;height:32px;border:1px solid #22242815;border-radius:3px}
.note-swatch:hover {outline:2px solid var(--blue);outline-offset:1px}
.creation-palette {min-width:136px;padding:12px}
.creation-palette .sticky-palette {grid-template-columns:repeat(2,50px);padding:0;gap:8px}
.creation-palette .note-swatch {width:50px;height:50px;border-radius:0;border-color:#22242845}
.creation-palette .menu-row {margin-top:10px;height:40px;justify-content:center;background:var(--quiet);font-weight:650}
.creation-palette .menu-row span {flex:0 1 auto}
.shape-menu {width:230px;padding:8px}
.shape-menu .menu-row {min-height:42px}
.shape-grid,.emoji-grid {display:grid;grid-template-columns:repeat(4,40px);gap:3px;padding:4px}
.emoji-grid button {height:40px;border-radius:8px;font-size:19px}
.emoji-grid button:hover {background:var(--quiet)}
.frame-presets {width:min(242px,calc(100vw - 16px));max-height:calc(100dvh - 82px);padding:6px}
.frame-presets .menu-row {min-height:31px;font-size:13px}
.frame-presets .menu-row svg {width:17px;height:17px}
.frame-presets kbd {color:var(--muted);font-variant-numeric:tabular-nums}
.tool-picker {
  display:flex;
  flex-direction:column;
  width:min(382px,calc(100vw - 16px));
  height:min(495px,calc(100dvh - 102px));
  min-height:0;
  overflow:hidden;
  padding:0;
  background:#fff;
}
.tool-panel-title {margin:12px 13px 8px;font-size:17px;font-weight:680}
.tool-panel-search {
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
  min-width:0;
  margin:0 12px 10px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:8px;
}
.tool-panel-search:focus-within {border-color:var(--blue)}
.tool-panel-search>svg {width:17px;height:17px;flex:none;color:var(--muted)}
.tool-panel-search input {width:100%;border:0;padding:7px 0;background:transparent;outline:none}
.tool-panel-search input:focus-visible {outline:none}
.tool-panel-tabs {display:flex;gap:3px;flex:none;padding:0 10px 7px;overflow-x:auto;border-bottom:1px solid var(--line)}
.tool-panel-tabs button {flex:none;padding:6px 7px;border-radius:7px;font-size:12px;white-space:nowrap}
.tool-panel-tabs button:hover {background:var(--quiet)}
.tool-panel-tabs button[aria-pressed=true] {background:var(--violet-soft);color:var(--violet-dark);font-weight:650}
.media-results,.catalog-results {min-height:0;overflow:auto;padding:3px 8px 10px}
.catalog-results {border-top:1px solid var(--line)}
.catalog-results section+section {margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.catalog-results .menu-row {min-height:32px;font-size:13px}
.catalog-results .menu-row svg {width:18px;height:18px}
.tool-panel-label {padding:8px 8px 4px;font-size:12px;font-weight:650;color:var(--muted)}
.tool-panel-empty {padding:12px 8px;color:var(--muted);font-size:13px}
.media-section+.media-section {margin-top:5px}
.media-symbols,.media-stickers,.media-images {display:grid;gap:4px;padding:3px 5px}
.media-symbols {grid-template-columns:repeat(8,minmax(0,1fr))}
.media-stickers,.media-images {grid-template-columns:repeat(4,minmax(0,1fr))}
.media-symbol,.media-sticker,.media-image {min-width:0;border-radius:8px}
.media-symbol {min-height:38px;font-size:23px}
.media-symbol:hover,.media-image:hover {background:var(--quiet)}
.media-sticker {
  display:grid;
  justify-items:center;
  gap:2px;
  min-height:61px;
  padding:6px 3px;
  border:1px solid #2525230d;
  background:var(--sticker-fill);
}
.media-sticker:hover {border-color:#ac91dc}
.media-sticker span {font-size:19px}
.media-sticker small,.media-image small {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.media-image {display:grid;gap:3px;padding:3px;text-align:left}
.media-image img {width:100%;height:52px;object-fit:contain;border-radius:5px;background:#f5f5f3}
.media-online-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.media-online-card {position:relative;min-width:0}
.media-online-image {width:100%;padding:4px;border:1px solid var(--line);background:white}
.media-online-image img {height:64px;border-radius:6px}
.media-online-card>a {position:absolute;right:7px;top:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#fffffff0;color:var(--muted)}
.media-online-card>a svg {width:13px;height:13px}
.media-online-card>a:hover,.media-online-card>a:focus-visible {color:var(--violet-dark);background:var(--violet-soft)}
.assistant-media-results {margin-block:8px 4px;padding:0}
.media-upload {padding:6px 5px}
.media-upload .soft {width:100%;font-size:12px}
@media (max-width:380px) {
  .media-symbols {grid-template-columns:repeat(7,minmax(0,1fr))}
  .tool-panel-tabs {padding-inline:7px}
  .tool-panel-tabs button {padding-inline:5px}
}
#minimap {position:fixed;right:8px;bottom:64px;width:200px;height:120px;z-index:9;cursor:crosshair}
.drawer {position:fixed;z-index:11;top:64px;right:8px;bottom:64px;width:min(330px,calc(100vw - 80px));display:flex;flex-direction:column;overflow:hidden}
.drawer header {display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 16px;border-bottom:1px solid var(--line)}
.drawer h2 {font-size:17px}
.drawer h3 {padding:8px;font-size:13px}
.drawer-content {overflow:auto;padding:8px}
.drawer-content p {padding:5px 8px 12px;color:var(--muted)}
.activity {display:grid;padding:10px 8px;border-bottom:1px solid var(--line)}
.activity small {color:var(--muted)}
.presentation-controls {position:fixed;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:4px;z-index:20;max-width:calc(100vw - 16px);white-space:nowrap}
.presenting :is(.creation-dock,.board-bar,.people-bar,.controls,.object-context,.draw-tools,.drawer,#minimap,.assistant-dock) {display:none!important}
.board-timer {position:fixed;top:8px;left:50%;transform:translateX(-50%);padding:12px 20px;z-index:11;font-size:18px;font-variant-numeric:tabular-nums}
.vote-status {position:fixed;top:64px;left:50%;transform:translateX(-50%);padding:10px 16px;z-index:11;background:#4262ff;color:#fff}
.comment-thread {width:310px;padding:10px}
.comment-thread header {display:flex;justify-content:space-between;align-items:center;padding-left:5px;margin-bottom:8px}
#reactions {position:fixed;bottom:64px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:21;pointer-events:none}
.reaction {display:grid;justify-items:center;padding:8px 14px}
.reaction span {font-size:26px}

/* Диалоги */
dialog {border:0;padding:0;border-radius:16px;width:min(530px,calc(100vw - 24px));max-height:calc(100dvh - 32px);color:var(--ink);box-shadow:0 14px 52px #22242830}
dialog.wide {width:min(820px,calc(100vw - 24px))}
dialog::backdrop {background:#22242850}
.dialog-head {display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px 20px}
.dialog-head h2 {font-size:20px;font-weight:680}
.dialog-content {display:grid;gap:12px;padding:8px 20px 22px;overflow:auto}
.dialog-content>input,.dialog-content>textarea,.form-stack>* {width:100%}
.dialog-content label {display:grid;gap:4px}
.form-stack {display:grid;gap:8px}
.form-stack textarea {min-height:90px}
.form-inline {display:flex;gap:6px}
.form-inline input {flex:1}
.share-tabs {display:flex;gap:7px;border-bottom:1px solid var(--line)}
.share-tabs button {padding:8px 10px}
.share-tabs button.selected {border-bottom:2px solid var(--blue)}
.share-content {display:grid;gap:12px}
.share-line {display:flex;align-items:center;justify-content:space-between;gap:10px}
.share-line p {color:var(--muted)}
.template-dialog[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  width:min(1232px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  height:min(800px,calc(100dvh - 44px));
  background:#fff;
}
.template-dialog .dialog-head {min-height:58px;padding:8px 16px 8px 20px;border-bottom:1px solid var(--line);background:#fff}
.template-dialog .dialog-content {min-height:0;padding:0;overflow:hidden}
.template-shell,.template-results {min-height:0;min-width:0}
.template-catalog {height:100%;display:grid;grid-template-columns:218px minmax(0,1fr);min-height:0}
.template-categories {min-height:0;overflow:auto;padding:12px;border-right:1px solid var(--line);background:#fafaf9}
.template-category {display:flex;align-items:center;gap:8px;text-align:left;width:100%;min-height:37px;border-radius:7px;padding:7px 9px;font-size:13px}
.template-category:hover {background:#f1efeb}
.template-category[aria-pressed=true] {color:var(--violet-dark);background:var(--violet-soft);font-weight:650}
.template-category svg {width:17px;height:17px}
.template-category-label {margin:12px 9px 5px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);font-weight:650}
.template-results {display:grid;grid-template-rows:auto minmax(0,1fr)}
.template-search-row {display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.template-search-row .template-search {display:flex;align-items:center;gap:8px;flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:0 10px}
.template-search svg {width:18px;height:18px;flex:none;color:var(--muted)}
.template-search input {width:100%;padding:8px 0;border:0;outline:none;background:transparent}
.template-search:focus-within {outline:2px solid var(--blue);outline-offset:1px}
.template-search-row select {max-width:150px}
.template-scroll {overflow:auto;padding:15px 20px 22px}
.template-result-count {margin-bottom:11px;color:var(--muted);font-size:12px}
.template-gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.template-tile {min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px}
.template-tile:hover,.template-tile:focus-within {border-color:#c4b0ec}
.template-open {display:grid;width:100%;gap:8px;min-width:0;padding:0;text-align:left;border-radius:6px}
.template-open strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;padding:0 2px}
.template-art {display:grid;place-items:center;height:122px;border-radius:6px;overflow:hidden;background:#f5f5f3}
.template-art>svg {width:100%;height:100%}
.template-art-empty {color:var(--muted);border:1px dashed var(--line);background:#fafaf9}
.template-art-empty>svg {width:24px;height:24px}
.template-tile-meta {display:flex;align-items:center;gap:4px;margin-top:7px;padding-left:2px}
.template-tile-meta span {flex:1;font-size:11px;color:var(--muted)}
.template-tile-meta .square {width:27px;height:27px;flex-basis:27px;border-radius:6px}
.template-tile-meta .square svg {width:15px;height:15px}
.template-tile-meta .soft {min-height:27px;padding:3px 7px;border-radius:6px;font-size:11px}
.template-empty {grid-column:1/-1;margin:18px 0;color:var(--muted)}
.template-detail {height:100%;overflow:auto;padding:18px 22px 24px}
.template-back {display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:6px;color:var(--muted)}
.template-back:hover {background:var(--quiet);color:var(--ink)}
.template-back svg {width:17px;height:17px}
.template-detail-grid {display:grid;grid-template-columns:minmax(230px,.75fr) minmax(0,1.6fr);align-items:start;gap:24px;margin-top:21px}
.template-detail-info {display:grid;gap:13px;min-width:0}
.template-detail-info h3 {font-size:clamp(22px,3vw,36px);line-height:1.1;letter-spacing:-.035em;overflow-wrap:anywhere}
.template-detail-type {font-size:12px;color:var(--muted)}
.template-mode {justify-items:start;color:var(--muted);font-size:12px}
.template-detail-actions {display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.template-detail-actions .square {width:34px;height:34px;flex-basis:34px;border-radius:7px}
.template-detail-actions .square svg {width:17px;height:17px}
.template-copy-status {color:var(--muted);font-size:12px}
.template-copy-status:empty {display:none}
.template-copy-input {width:100%;max-width:320px}
.template-preview-stage {min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px;background:#f5f5f3}
.template-preview-stage .template-art {height:clamp(220px,47vh,500px)}
@media (max-width:700px) {
  .template-dialog[open] {width:calc(100vw - 12px);max-width:calc(100vw - 12px);height:calc(100dvh - 18px);max-height:calc(100dvh - 18px)}
  .template-dialog .dialog-head {min-height:52px;padding:5px 8px 5px 12px}
  .template-catalog {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .template-categories {display:flex;gap:4px;padding:8px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .template-category {width:auto;min-height:32px;white-space:nowrap}
  .template-category-label {display:none}
  .template-search-row {padding:10px;gap:7px}
  .template-search-row select {max-width:105px;padding:8px}
  .template-scroll {padding:10px}
  .template-gallery {grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:8px}
  .template-art {height:88px}
  .template-tile-meta {justify-content:space-between}
  .template-tile-meta span {display:none}
  .template-tile-meta .soft {font-size:10px}
  .template-detail {padding:12px}
  .template-detail-grid {grid-template-columns:minmax(0,1fr);gap:14px;margin-top:12px}
  .template-detail-info {gap:9px}
  .template-preview-stage .template-art {height:clamp(160px,35vh,300px)}
}
.command-list {max-height:50vh;overflow:auto}
.command-list p,.thread p {white-space:pre-wrap;overflow-wrap:anywhere;padding:8px}
.thread article {border-top:1px solid var(--line);padding:8px}
.shortcut-list {display:grid;grid-template-columns:1fr auto;gap:8px;margin:0}
.shortcut-list dd {margin:0;color:var(--muted)}
#notice {position:fixed;z-index:50;left:50%;top:18px;transform:translateX(-50%);background:#222428;color:#fff;padding:9px 15px;border-radius:10px;max-width:calc(100vw - 24px);box-shadow:var(--shadow)}

@media (max-height:700px) and (min-width:701px) {
  .creation-dock {max-height:calc(100dvh - 90px);overflow:auto;scrollbar-width:none;top:53%}
}
@media (max-width:950px) {
  body[data-screen=home] #app {grid-template-columns:190px minmax(0,1fr)}
  .home-content {width:calc(100% - 36px)}
  .board-row {grid-template-columns:minmax(135px,2fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.7fr) 32px}
}
@media (max-width:700px) {
  body {--assistant-width:100%}
  .assistant-expanded #canvas {right:0}
  body[data-screen=home] #app {position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .home-sidebar {padding:8px 12px;display:grid;gap:6px}
  .home-sidebar .team {min-height:36px;margin:0;padding-right:88px}
  .home-sidebar .team>.square {display:none}
  .home-nav {display:flex;grid-column:1/-1;margin:0;padding:0;border:0}
  .home-nav .nav-row {width:auto;flex:1;justify-content:center;font-size:12px;gap:4px}
  .home-spaces {display:flex;grid-column:1/-1;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:thin}
  .home-spaces .nav-row {width:auto;min-height:34px;max-width:180px;flex:none;font-size:12px}
  .home-spaces .space-label {padding:0 0 0 5px;flex:none}
  .home-spaces .space-empty {display:none}
  .home-main {margin:0 6px 6px;border-radius:13px}
  .home-top {position:absolute;top:8px;right:12px;height:36px;padding:0;gap:8px}
  .home-top .brand,.home-top .spacer {display:none}
  .home-top .soft {font-size:0;padding:7px}
  .home-content {width:calc(100% - 28px);padding-top:20px}
  .home-content h1 {font-size:clamp(27px,8.5vw,40px);margin-bottom:22px}
  .home-content .section-heading h2 {font-size:16px}
  .template-card {flex-basis:126px}
  .template-thumb {height:78px}
  .template-strip {gap:8px;margin-bottom:22px}
  .board-row {grid-template-columns:minmax(105px,2fr) minmax(0,.65fr) 32px;gap:5px}
  .board-row>*:nth-child(2),.board-row>*:nth-child(4) {display:none}
  .board-name {gap:8px}
  .table-head {display:none}
  .board-bar,.people-bar {gap:0;height:44px;padding:3px}
  .board-bar {max-width:calc(100% - 104px)}
  .board-bar .square,.people-bar .square {width:34px;height:34px;flex-basis:34px}
  .board-bar .square svg,.people-bar .square svg {width:20px;height:20px}
  .board-logo .brand {width:50px;height:22px}
  .board-title {width:90px;min-width:48px;padding-inline:3px;font-size:12px}
  #board-star,.board-bar>button:nth-last-child(2),.people-bar>.avatar,.people-bar>.square,.assistant-dock {display:none}
  .share {height:36px;padding:0 8px;font-size:11px}
  .share svg {width:14px;height:14px}
  .creation-dock {left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));top:auto;transform:none;display:flex;gap:5px}
  .creation-dock .launcher {display:none}
  .creation,.undo-bar,.draw-tools {flex-direction:row;width:auto;gap:1px;border-radius:14px}
  .creation {flex:1;justify-content:space-between}
  .creation .square,.undo-bar .square {width:36px;flex:1 1 36px;min-width:0}
  .creation .square svg,.undo-bar .square svg {width:21px;height:21px}
  .creation [data-mobile=secondary] {display:none}
  .creation-dock .undo-bar {flex:0 0 44px}
  .creation-dock .undo-bar #redo {display:none}
  .draw-tools {left:8px;right:8px;bottom:calc(61px + env(safe-area-inset-bottom));top:auto;transform:none;justify-content:space-between}
  .draw-tools .square {width:32px;min-width:0;flex:1 1 32px}
  .draw-tools .square svg {width:21px;height:21px}
  .draw-tools .separator {width:1px;height:24px}
  .preset::after {inset:50% auto auto 50%;transform:translate(-50%,-50%);width:26px;height:26px}
  .controls {bottom:calc(61px + env(safe-area-inset-bottom));height:40px;gap:0}
  .controls .square,.controls .zoom-value {height:34px;width:34px;min-width:34px;flex-basis:34px}
  .controls .square svg {width:20px;height:20px}
  body:has(#draw-tools:not([hidden])) .controls {bottom:calc(113px + env(safe-area-inset-bottom))}
  #minimap {bottom:calc(109px + env(safe-area-inset-bottom))}
  .drawer {top:60px;bottom:111px}
}
@media print {
  body[data-screen=board] #app>*:not(#canvas),#notice,dialog,.popover {display:none!important}
  #canvas {background:white!important}
  #overlay,#remote {display:none}
}

/* Motion for navigation, overlays and controls. Use independent transforms so
   fixed elements keep their existing position and SVG coordinates stay intact. */
@media screen and (prefers-reduced-motion: no-preference) {
  :root {
    --motion-out: cubic-bezier(.2, 0, 0, 1);
    --motion-in: cubic-bezier(.3, 0, 1, 1);
    --motion-quick: 140ms;
    --motion-panel: 280ms;
    --motion-screen: 440ms;
  }

  .home-top {animation: motion-down 260ms var(--motion-out)}
  .home-content h1 {animation: motion-rise var(--motion-screen) var(--motion-out)}
  .start-section > .section-heading,
  .start-section > .template-link {animation: motion-rise 320ms 50ms var(--motion-out) backwards}
  .template-strip > .template-card:nth-child(-n+6) {
    animation: motion-rise 340ms var(--motion-out) backwards;
    animation-delay: calc(65ms + var(--motion-step, 0) * 30ms);
  }
  .template-strip > :nth-child(2) {--motion-step: 1}
  .template-strip > :nth-child(3) {--motion-step: 2}
  .template-strip > :nth-child(4) {--motion-step: 3}
  .template-strip > :nth-child(5) {--motion-step: 4}
  .template-strip > :nth-child(6) {--motion-step: 5}
  .recent-section {animation: motion-rise 380ms 140ms var(--motion-out) backwards}
  .route-error {animation: motion-rise var(--motion-screen) var(--motion-out)}

  #app[aria-busy="true"]::after {
    content: "";
    position: fixed;
    inset: 0 auto auto 0;
    width: 28%;
    height: 3px;
    z-index: 40;
    background: var(--blue);
    border-radius: 0 8px 8px 0;
    pointer-events: none;
    animation: motion-progress 1150ms 130ms var(--motion-out) infinite backwards;
  }
  #canvas {animation: motion-reveal 220ms var(--motion-out)}
  .board-bar {animation: motion-down 350ms var(--motion-out)}
  .people-bar {animation: motion-down 350ms 45ms var(--motion-out) backwards}
  .creation-dock {animation: motion-right 360ms 65ms var(--motion-out) backwards}
  .controls {animation: motion-rise 330ms 100ms var(--motion-out) backwards}
  .assistant-dock {animation: motion-rise 380ms 150ms var(--motion-out) backwards}

  .popover {animation: motion-menu 210ms var(--motion-out)}
  .assistant-panel,
  .drawer {animation: motion-left 310ms var(--motion-out)}
  .draw-tools,
  .object-context,
  .call-panel,
  .presentation-controls,
  #minimap {animation: motion-pop var(--motion-panel) var(--motion-out)}
  .assistant-turn {animation: motion-rise var(--motion-panel) var(--motion-out)}
  #notice {animation: motion-pop var(--motion-panel) var(--motion-out)}
  .reaction {animation: motion-reaction 2200ms var(--motion-out) both}

  dialog[open] {animation: motion-dialog 340ms var(--motion-out)}
  dialog[open]::backdrop {animation: motion-reveal 260ms var(--motion-out)}
  @supports (transition-behavior: allow-discrete) and (overlay: auto) {
    dialog {
      opacity: 0;
      translate: 0 12px;
      scale: .98;
      pointer-events: none;
      transition: opacity 170ms var(--motion-in), translate 170ms var(--motion-in),
        scale 170ms var(--motion-in), display 170ms allow-discrete, overlay 170ms allow-discrete;
    }
    dialog[open] {
      animation: none;
      opacity: 1;
      translate: none;
      scale: none;
      pointer-events: auto;
      transition-duration: 340ms;
      transition-timing-function: var(--motion-out);
    }
    dialog::backdrop {
      background-color: transparent;
      transition: background-color 170ms var(--motion-in), display 170ms allow-discrete,
        overlay 170ms allow-discrete;
    }
    dialog[open]::backdrop {
      animation: none;
      background-color: #22242850;
      transition-duration: 260ms;
      transition-timing-function: var(--motion-out);
    }
    @starting-style {
      dialog[open] {opacity: 0; translate: 0 18px; scale: .96}
      dialog[open]::backdrop {background-color: transparent}
    }
  }

  :is(.square, .primary, .soft, .dark, .menu-row, .nav-row, .template-card, .assistant-card, .avatar) {
    transition: scale 190ms var(--motion-out), background-color var(--motion-quick) ease-out,
      color var(--motion-quick) ease-out, box-shadow 190ms var(--motion-out);
  }
  :is(.square, .primary, .soft, .dark, .menu-row, .nav-row, .template-card, .assistant-card, .avatar):active:not(:disabled) {
    scale: .95;
    transition-duration: 90ms;
  }
  .creation .square.selected svg,
  .starred svg {animation: motion-icon 230ms var(--motion-out)}
  .template-thumb img {transition: scale var(--motion-panel) var(--motion-out)}
  @media (hover: hover) {
    .template-card:hover .template-thumb img {scale: 1.06}
    .assistant-card:hover {box-shadow: 0 6px 18px #22242824}
  }
  @media (max-width: 700px) {
    .creation-dock {animation-name: motion-rise}
    .assistant-panel {animation-name: motion-rise}
  }
}

@keyframes motion-down {from {opacity: 0; translate: 0 -12px}}
@keyframes motion-rise {from {opacity: 0; translate: 0 16px}}
@keyframes motion-right {from {opacity: 0; translate: -12px 0}}
@keyframes motion-left {from {opacity: 0; translate: 24px 0}}
@keyframes motion-reveal {from {opacity: 0}}
@keyframes motion-pop {from {opacity: 0; translate: 0 7px; scale: .96}}
@keyframes motion-menu {from {opacity: 0; scale: .96}}
@keyframes motion-dialog {from {opacity: 0; translate: 0 18px; scale: .96}}
@keyframes motion-icon {0% {scale: .85} 55% {scale: 1.08} 100% {scale: 1}}
@keyframes motion-progress {
  0% {opacity: 0; translate: -100% 0}
  16% {opacity: 1}
  80% {opacity: 1}
  100% {opacity: 0; translate: 365% 0}
}
@keyframes motion-reaction {
  0% {opacity: 0; translate: 0 14px; scale: .82}
  17% {opacity: 1; translate: 0 -6px; scale: 1.04}
  26%, 75% {opacity: 1; translate: 0 0; scale: 1}
  100% {opacity: 0; translate: 0 -24px; scale: .98}
}

/* Riadom surfaces */
:root {
  --ink: #271f3c;
  --muted: #655b78;
  --blue: #6437de;
  --violet-dark: #4c25b5;
  --violet-soft: #ede5ff;
  --quiet: #f3eeff;
  --line: #e8e1f3;
  --shadow: 0 2px 3px #3921650c, 0 8px 20px #39216513;
}
.soft, .filled {background: var(--quiet); color: var(--violet-dark)}
.soft:hover {background: var(--violet-soft)}
button.avatar {background: #7040ce}
.surface, dialog {border: 1px solid var(--line)}
.creation .square.selected, .draw-tools .square.selected {
  color: var(--violet-dark);
  background: var(--violet-soft);
}
.creation .square[aria-expanded=true] {background: var(--quiet)}
#save-state[data-state=saving] {color: #6157ce}
#save-state[data-state=offline] {color: #9a551e}
#save-state[data-state=saved] {color: #23704c}
#notice {background: none; box-shadow: none; padding: 0; pointer-events: none}
#notice > span {display: block; padding: 10px 16px; background: #262549; border-radius: 12px; box-shadow: var(--shadow)}
.popover[data-closing] {pointer-events: none}
@media (701px <= width <= 920px) {
  .board-bar {max-width: calc(100vw - 16px)}
  .people-bar {top: 64px}
  .call-panel {top: 120px}
}
@media (701px <= width <= 1240px) {
  .assistant-expanded .people-bar {top: 64px}
}
@media (701px <= width <= 1000px) {
  .assistant-dock {bottom: 64px}
  .assistant-card {width: min(190px, 24vw)}
}
@media (max-width: 700px) {
  .board-logo .brand {content: url('/icon.svg'); width: 25px; height: 25px}
  .controls .zoom-value {width: 46px; min-width: 46px; flex-basis: 46px}
  .creation-palette .sticky-palette {grid-template-columns: repeat(4, 36px); gap: 6px}
  .creation-palette .note-swatch {width: 36px; height: 36px; border-radius: 5px}
}

@media screen and (prefers-reduced-motion: no-preference) {
  .home-top .brand {animation: brand-reveal 460ms var(--motion-out)}
  .home-nav .nav-row.current svg {animation: nav-tick 300ms var(--motion-out)}
  .home-search {transition: box-shadow 170ms var(--motion-out), border-color 170ms var(--motion-out)}
  .home-search:focus-within {box-shadow: 0 0 0 4px #5558df25}
  .template-strip > .template-card:nth-child(-n+6) {animation-name: template-deal}
  .template-strip > .template-card:nth-child(even) {--card-tilt: 3deg}
  .board-list .board-row:not(.table-head):nth-child(-n+6) {
    animation: recent-slide 290ms var(--motion-out) backwards;
  }
  .board-list .board-row:nth-child(2n) {animation-delay: 35ms}
  .board-list .board-row {transition: background-color 150ms, border-color 150ms}
  .board-name:hover svg {animation: board-icon-nudge 260ms var(--motion-out)}
  .board-bar {animation-name: board-header-in}
  .people-bar {animation-name: people-in}
  .controls {animation-name: zoom-dock-in}
  .assistant-dock {animation-name: assistant-dock-in}
  .assistant-card {animation: assistant-card-in 350ms var(--motion-out) backwards}
  .assistant-card:nth-child(2) {animation-delay: 45ms}
  .assistant-card:nth-child(3) {animation-delay: 90ms}
  .assistant-panel {animation-name: assistant-open-in}
  .drawer {animation-name: drawer-open-in}
  .draw-tools {animation-name: ink-tools-in}
  .call-panel {animation-name: call-panel-in}
  .object-context {animation-name: context-in}
  .presentation-controls {animation-name: zoom-dock-in}
  #minimap {animation-name: minimap-in; transform-origin: bottom right}
  .call-tile {animation: call-tile-in 260ms var(--motion-out)}
  .popover {animation-name: anchored-menu-in}
  .popover[data-closing] {animation: anchored-menu-out 140ms var(--motion-in) both}
  .popover:not([data-closing]) .menu-row:nth-child(-n+5) {animation: menu-item-in 220ms 30ms var(--motion-out) backwards}
  .menu-row svg {transition: translate 160ms var(--motion-out)}
  .menu-row:hover svg {translate: 2px 0}
  .note-swatch,.preset,.zoom-value {transition: scale 160ms var(--motion-out)}
  .note-swatch:hover,.preset:hover {scale: 1.08}
  .note-swatch:active,.preset:active,.zoom-value:active {scale: .9}
  #tool-note.selected svg {animation-name: tool-note-in}
  #tool-text.selected svg {animation-name: tool-text-in}
  #tool-pen.selected svg,.draw-tools .square.selected svg {animation-name: tool-ink-in}
  #tool-comment.selected svg {animation-name: tool-comment-in}
  #save-state[data-state=saving] svg {animation: saving-pulse 840ms ease-in-out infinite alternate}
  #save-state[data-state=saved] svg {animation: saved-tick 300ms var(--motion-out)}
  #notice {animation: none}
  #notice > span {animation: notice-cycle 3000ms var(--motion-out) both}
  .board-timer {animation: timer-in 260ms var(--motion-out)}
  .vote-status {animation: vote-in 270ms var(--motion-out)}
  .object-enter {
    transform-box: fill-box;
    transform-origin: center;
    animation: object-shape-in 300ms var(--motion-out) backwards;
  }
  .object-enter[data-type=note] {animation-name: object-note-in; transform-origin: center top}
  .object-enter[data-type=text] {animation-name: object-text-in; transform-origin: left center}
  .object-enter[data-type=comment] {animation-name: object-comment-in}
  .object-enter:is([data-type=pen],[data-type=arrow],[data-type=line]) {animation-name: object-ink-in; animation-duration: 180ms}
  .object-enter:is([data-type=frame],[data-type=image],[data-type=card]) {animation-name: object-frame-in}
  #editor {animation: editor-focus-in 180ms var(--motion-out); transform-origin: top left}
  #editor[data-object-type=note] {animation: object-note-in 240ms var(--motion-out); transform-origin: center top}
  @media (max-width: 700px) {
    .assistant-panel {animation-name: assistant-mobile-in}
    .template-strip > .template-card:nth-child(-n+6) {animation-duration: 270ms}
  }
}
@keyframes brand-reveal {from {opacity: .15; clip-path: inset(0 85% 0 0); translate: -7px 0} to {clip-path: inset(0)}}
@keyframes nav-tick {0% {translate: -5px 0; opacity: .4} 60% {translate: 2px 0}}
@keyframes template-deal {from {opacity: 0; translate: 0 13px; rotate: var(--card-tilt,-3deg); scale: .95}}
@keyframes recent-slide {from {opacity: .25; translate: 10px 0}}
@keyframes board-icon-nudge {50% {translate: 3px -2px}}
@keyframes board-header-in {from {opacity: 0; translate: -10px -8px}}
@keyframes people-in {from {opacity: 0; translate: 10px -8px; scale: .98}}
@keyframes zoom-dock-in {from {opacity: 0; translate: 10px 7px; scale: .95}}
@keyframes assistant-dock-in {from {opacity: 0; translate: 0 16px; scale: .98}}
@keyframes assistant-card-in {from {opacity: 0; translate: 0 9px; scale: .94}}
@keyframes assistant-open-in {from {opacity: 0; translate: 42px 0}}
@keyframes assistant-mobile-in {from {opacity: 0; translate: 0 30px}}
@keyframes drawer-open-in {from {opacity: 0; translate: 16px 0; scale: .98}}
@keyframes ink-tools-in {from {opacity: 0; scale: .89; translate: -5px 0}}
@keyframes context-in {from {opacity: 0; translate: 0 6px}}
@keyframes call-panel-in {from {opacity: 0; translate: 0 -8px; scale: .96}}
@keyframes call-tile-in {from {opacity: 0; scale: .93}}
@keyframes minimap-in {from {opacity: 0; scale: .82}}
@keyframes anchored-menu-in {from {opacity: 0; scale: .90}}
@keyframes anchored-menu-out {to {opacity: 0; scale: .94}}
@keyframes menu-item-in {from {opacity: .35; translate: -4px 0}}
@keyframes tool-note-in {0% {rotate: -12deg; scale: .84} 65% {rotate: 5deg; scale: 1.07}}
@keyframes tool-text-in {0% {scale: .8 1.12} 55% {scale: 1.06 .97}}
@keyframes tool-ink-in {0% {rotate: -21deg; translate: -2px 2px} 65% {rotate: 7deg}}
@keyframes tool-comment-in {0% {translate: 0 4px; scale: .82} 62% {translate: 0 -2px; scale: 1.07}}
@keyframes saving-pulse {to {opacity: .38; scale: .88}}
@keyframes saved-tick {0% {scale: .7; opacity: .5} 64% {scale: 1.12}}
@keyframes notice-cycle {0% {opacity: 0; translate: 0 -12px; scale: .94} 13%, 92% {opacity: 1; translate: 0 0; scale: 1} 100% {opacity: 0; translate: 0 -7px; scale: .97}}
@keyframes timer-in {from {opacity: 0; translate: 0 -10px}}
@keyframes vote-in {from {opacity: 0; translate: 0 8px; scale: .95}}
@keyframes object-note-in {0% {opacity: .4; scale: .92; rotate: -2deg} 65% {scale: 1.015; rotate: .5deg}}
@keyframes object-text-in {from {opacity: .3; scale: .96 1}}
@keyframes object-shape-in {0% {opacity: .4; scale: .86} 65% {scale: 1.02}}
@keyframes object-comment-in {0% {opacity: .4; scale: .6} 62% {scale: 1.09}}
@keyframes object-ink-in {from {opacity: .55}}
@keyframes object-frame-in {from {opacity: .35; scale: .97}}
@keyframes editor-focus-in {from {opacity: .65; scale: .985; box-shadow: 0 0 0 4px #5558df30}}

.frame-drawer-row {display: flex; align-items: center; gap: 2px}
.frame-drawer-row .menu-row {min-width: 0}
.frame-drawer-row > .square {width: 32px; height: 32px; flex-basis: 32px}
.export-status:empty {display: none}

/* Board chrome */
body[data-screen=board] {
  --ink: #222428;
  --muted: #64656c;
  --quiet: #f0f0f2;
  --line: #e7e7eb;
  --shadow: 0 2px 4px #22242814;
  --board-panel-shadow: 0 2px 8px #2224281f, 0 0 12px #2224280a;
}
body[data-screen=board] :is(.creation, .undo-bar, .controls, .board-bar, .people-bar, .draw-tools, .launcher) {
  border: 0;
  background: white;
  box-shadow: var(--shadow);
}
body[data-screen=board] :is(.drawer, .popover, .call-panel, .object-context, #minimap, .assistant-card, .assistant-composer) {
  background: white;
  box-shadow: var(--board-panel-shadow);
}
body[data-screen=board] .primary {
  background: var(--blue);
  box-shadow: none;
}
body[data-screen=board] .primary:hover:not(:disabled) {
  background: var(--violet-dark);
}
.board-logo {
  display: grid;
  place-items: center;
  flex: none;
  height: 40px;
  border-radius: 10px;
}
.board-logo:hover {background: var(--quiet)}
.board-logo .brand {width: 96px; height: 23px}
.board-bar #board-star:not(.starred) {color: var(--muted)}
.board-bar #board-star.starred {color: var(--blue)}
.people-bar .facilitation svg {fill: none}
.launcher .launcher-button {background: var(--blue); color: white}
.launcher .launcher-button:hover {background: var(--violet-dark)}
.creation #tool-select.selected {background: var(--quiet); color: var(--ink)}
.creation #tool-select[aria-expanded=true] {background: var(--violet-soft); color: var(--violet-dark)}
.draw-tools .preset.selected {background: transparent}
.assistant-expanded #canvas {border-radius: 0}
.assistant-panel {
  background: white;
  border-inline-start: 1px solid var(--line);
  box-shadow: -4px 0 16px #2224280d;
}
.assistant-panel header strong {border: 0; padding-inline: 0}
.assistant-composer .assistant-input {box-shadow: none; border: 0; border-radius: 15px 15px 0 0}
.assistant-composer:has(.assistant-shortcuts[hidden]) .assistant-input {border-radius: inherit}
.assistant-composer .assistant-shortcuts {border-top: 1px solid var(--line); background: #f7f7f8; border-radius: 0 0 15px 15px}
.assistant-chat-form {box-shadow: none}
.assistant-chat-actions select {background: var(--quiet)}
.assistant-chat-actions .square {background: var(--blue)}
.assistant-chat-actions .square:hover:not(:disabled) {background: var(--violet-dark)}
.user-turn {background: var(--violet-soft)}
.drawer header {background: white}

@media (min-width: 701px) and (max-height: 780px) {
  body[data-screen=board] {--board-tool-size: clamp(26px, calc((100dvh - 220px) / 14), 40px)}
  .creation-dock {
    top: 64px;
    bottom: 64px;
    max-height: none;
    transform: none;
    align-content: safe center;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  :is(.creation, .undo-bar, .draw-tools, .launcher) {width: calc(var(--board-tool-size) + 8px)}
  :is(.creation, .undo-bar, .draw-tools, .launcher) .square {
    width: var(--board-tool-size);
    height: var(--board-tool-size);
    flex-basis: var(--board-tool-size);
    border-radius: min(10px, calc(var(--board-tool-size) / 3));
  }
  :is(.creation, .undo-bar, .draw-tools, .launcher) .square svg {
    width: min(24px, calc(var(--board-tool-size) - 7px));
    height: min(24px, calc(var(--board-tool-size) - 7px));
  }
  .draw-tools {left: calc(var(--board-tool-size) + 24px); max-height: calc(100dvh - 96px); overflow-y: auto; scrollbar-width: none}
  .draw-tools .separator {width: calc(var(--board-tool-size) - 6px); flex: 0 0 1px}
  .preset::after {width: auto; height: auto; inset: 5px}
  .assistant-dock {gap: 8px}
  .assistant-card {height: auto; padding: 6px; gap: 6px}
  .assistant-card .template-thumb,.assistant-card-image {height: 72px}
}
@media (max-width: 700px) {
  .board-logo {height: 34px}
  .board-logo .brand {width: 25px; height: 25px}
  .creation-dock {min-width: 0}
  .creation {min-width: 0}
  .draw-tools {bottom: calc(53px + max(8px, env(safe-area-inset-bottom)))}
  .controls {bottom: calc(53px + max(8px, env(safe-area-inset-bottom)))}
  body:has(#draw-tools:not([hidden])) .controls {bottom: calc(105px + max(8px, env(safe-area-inset-bottom)))}
  #minimap {bottom: calc(101px + max(8px, env(safe-area-inset-bottom)))}
  body:has(#draw-tools:not([hidden])) :is(#minimap,.drawer) {bottom: calc(153px + max(8px, env(safe-area-inset-bottom)))}
  .assistant-panel {border-inline-start: 0; box-shadow: none}
}
@media screen and (prefers-reduced-motion: no-preference) {
  .board-bar,.people-bar,.creation-dock,.controls {animation-duration: 200ms; animation-delay: 0s}
  body[data-screen=board] .popover {animation-duration: 150ms}
  body[data-screen=board] .popover[data-closing] {animation-duration: 120ms}
  body[data-screen=board] .popover .menu-row {animation: none}
  body[data-screen=board] .menu-row:hover svg {translate: none}
}
.export-status {color: var(--muted); min-height: 1.4em}