@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400&family=Space+Grotesk:wght@400;700&family=Playfair+Display:wght@400;700&family=Caveat:wght@400;700&display=swap');

:root{
  --bg0:#18191c;
  --bg1:#212225;
  --stroke:rgba(255,255,255,0.06);
  --ink:#e9ecef;
  --muted:#909296;
  --shadow:0 24px 48px rgba(0,0,0,0.5);
  --shadow2:0 8px 16px rgba(0,0,0,0.3);
  --accent:#6366f1;
  --accent-hover:#4f46e5;
  --sans:'Inter', ui-sans-serif, system-ui, sans-serif;
  --call-width:260px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --titlebar-end:env(titlebar-area-width, 0px);
  --browser-offset-top:max(var(--safe-top), env(titlebar-area-y, 0px));
  --browser-offset-right:max(var(--safe-right), calc(100vw - env(titlebar-area-width, 100vw)));
}

/* ---- Light Theme ---- */
[data-theme="light"]{
  --bg0:#ebebef;
  --bg1:#f5f5f7;
  --stroke:rgba(0,0,0,0.08);
  --ink:#1a1a1a;
  --muted:#6b7280;
  --shadow:0 24px 48px rgba(0,0,0,0.12);
  --shadow2:0 8px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .person{
  background:rgba(255,255,255,0.75);
}
[data-theme="light"] .people.grid-mode{
  background:rgba(245,245,247,0.92);
}
[data-theme="light"] .bottom-navbar{
  background:transparent;
  border:none;
}
[data-theme="light"] .toolbar,
[data-theme="light"] .toolbar-side{
  background:rgba(255,255,255,0.85);
  border:1px solid var(--stroke);
  box-shadow:0 4px 30px rgba(0,0,0,0.08);
}
[data-theme="light"] .toolbar-toggle{
  background:rgba(255,255,255,0.85);
}
[data-theme="light"] .toolbar-toggle:hover{
  background:rgba(255,255,255,0.95);
}
[data-theme="light"] .toolbar-panel{
  background:rgba(255,255,255,0.98);
}
[data-theme="light"] .tool:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .tool.active{ background:rgba(0,0,0,0.06); }
[data-theme="light"] #btnScreenShare.active,
[data-theme="light"] #btnTranscription.active{ background:var(--accent); color:#fff; }
[data-theme="light"] #btnScreenShare.active:hover,
[data-theme="light"] #btnTranscription.active:hover{ background:var(--accent-hover); color:#000; }
[data-theme="light"] .cam-pop{
  background:rgba(255,255,255,0.94);
}
[data-theme="light"] .cam-pop select,
[data-theme="light"] .cam-pop button{
  background:rgba(0,0,0,0.03);
}
[data-theme="light"] .cam-pop button:hover{ background:rgba(0,0,0,0.07); }
[data-theme="light"] .person .btn{
  background:rgba(0,0,0,0.04);
}
[data-theme="light"] .person .btn:hover{ background:rgba(0,0,0,0.08); }
[data-theme="light"] .chat-fab{
  background:rgba(255,255,255,0.85);
  border:1px solid var(--stroke);
  box-shadow:0 4px 30px rgba(0,0,0,0.08);
}
[data-theme="light"] .chat-fab:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .fs-exit-fab{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.08);
}
[data-theme="light"] .fs-exit-fab:hover{ background:rgba(0,0,0,0.08); }
[data-theme="light"] .undo-redo,
[data-theme="light"] .zoom-pill,
[data-theme="light"] .temp-room-pill{
  background:#fff;
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
}
[data-theme="light"] .undo-redo-btn:not(:disabled):hover{ background:rgba(0,0,0,0.04); color:var(--ink); }
[data-theme="light"] .zoom-ctrl-btn:hover{ background:rgba(0,0,0,0.04); color:var(--ink); }
[data-theme="light"] .zoom-ctrl-btn:active{ background:rgba(0,0,0,0.08); }
[data-theme="light"] .zoom-indicator{ color:rgba(0,0,0,0.45); }
[data-theme="light"] .zoom-indicator:hover{ background:rgba(0,0,0,0.04); color:#000; }
[data-theme="light"] .minimap{ background:rgba(255,255,255,0.85); }
[data-theme="light"] .chat-panel{
  background:rgba(255,255,255,0.96);
}
[data-theme="light"] .chat-msg.them{
  background:rgba(0,0,0,0.03);
}
[data-theme="light"] .chat-input{
  background:rgba(0,0,0,0.03);
}
[data-theme="light"] .canvas-box{
  background:rgba(255,255,255,0.97);
}
[data-theme="light"] [data-box-type="image"].canvas-box{
  background:transparent;
  border:none;
  box-shadow:none;
}
[data-theme="light"] .canvas-box:hover{ box-shadow:0 12px 32px rgba(0,0,0,0.12); }
[data-theme="light"] .canvas-ctx-menu{
  background:rgba(255,255,255,0.97);
  box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
}
[data-theme="light"] .ctx-btn:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .ctx-fs-dropdown{
  background:rgba(255,255,255,0.97);
}
[data-theme="light"] .ctx-fs-item:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .ctx-fs-item.active{ background:rgba(99,102,241,0.12); }
[data-theme="light"] .ctx-clr-dropdown,
[data-theme="light"] .ctx-hl-dropdown{ background:rgba(255,255,255,0.97); }
[data-theme="light"] .ctx-clr-item:hover,
[data-theme="light"] .ctx-hl-item:hover{ border-color:var(--accent); }
[data-theme="light"] .ctx-clr-reset,
[data-theme="light"] .ctx-hl-reset{ background:rgba(0,0,0,0.06); }
[data-theme="light"] .ctx-clr-item[data-clr="#ffffff"]{ border-color:rgba(0,0,0,0.15); }
[data-theme="light"] .ctx-clr-item[data-clr="#171717"]{ border-color:rgba(0,0,0,0.2); }
[data-theme="light"] .canvas-box.canvas-box-title:hover{ border-color:rgba(0,0,0,0.08); }
[data-theme="light"] .canvas-box-content .cb-item::before{
  border-color:rgba(0,0,0,0.3);
}
[data-theme="light"] .canvas-box-content .cb-item:hover::before{
  border-color:var(--accent);
}
[data-theme="light"] .ctx-title-preset:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.1); }
[data-theme="light"] .person.video-on::after{
  background:linear-gradient(to top, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%);
}
/* Light theme — task table */
[data-theme="light"] .task-table-wrap{ background:rgba(0,0,0,0.02); }
[data-theme="light"] .task-table thead{ background:rgba(255,255,255,0.9); }
[data-theme="light"] .task-table tbody tr:hover{ background:rgba(0,0,0,0.03); }
[data-theme="light"] .task-table tbody tr[data-status="not-started"]{ background:rgba(156,163,175,0.06); }
[data-theme="light"] .task-table tbody tr[data-status="in-progress"]{ background:rgba(96,165,250,0.07); }
[data-theme="light"] .task-table tbody tr[data-status="completed"]{ background:rgba(99,102,241,0.07); }
[data-theme="light"] .task-table tbody tr[data-status="unfinished"]{ background:rgba(251,146,60,0.07); }
[data-theme="light"] .task-table tbody tr[data-status="not-started"]:hover{ background:rgba(156,163,175,0.11); }
[data-theme="light"] .task-table tbody tr[data-status="in-progress"]:hover{ background:rgba(96,165,250,0.12); }
[data-theme="light"] .task-table tbody tr[data-status="completed"]:hover{ background:rgba(99,102,241,0.12); }
[data-theme="light"] .task-table tbody tr[data-status="unfinished"]:hover{ background:rgba(251,146,60,0.12); }
[data-theme="light"] .task-table-wrap::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.1); }
[data-theme="light"] .task-add-btn{ background:rgba(99,102,241,0.1); }
[data-theme="light"] .task-add-btn:hover{ background:rgba(99,102,241,0.18); }
[data-theme="light"] .task-edit-btn{ background:rgba(99,102,241,0.06); }
[data-theme="light"] .task-edit-btn:hover{ background:rgba(99,102,241,0.14); }
[data-theme="light"] .panel-collapse-btn{ background:rgba(239,68,68,0.06); border-color:rgba(239,68,68,0.12); }
[data-theme="light"] .panel-collapse-btn:hover{ background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.22); }
[data-theme="light"] .task-delete-btn{ background:rgba(239,68,68,0.06); }
[data-theme="light"] .task-delete-btn:hover{ background:rgba(239,68,68,0.14); }
[data-theme="light"] .task-modal{ background:rgba(0,0,0,0.3); }
[data-theme="light"] .task-modal-content{ background:rgba(255,255,255,0.96); }
[data-theme="light"] .task-modal-close:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .task-modal-body input,
[data-theme="light"] .task-modal-body select{ background:rgba(0,0,0,0.03); }
[data-theme="light"] .task-modal-cancel{ background:rgba(0,0,0,0.04); }
[data-theme="light"] .task-modal-cancel:hover{ background:rgba(0,0,0,0.08); }
[data-theme="light"] .task-modal-save{ background:rgba(99,102,241,0.1); }
[data-theme="light"] .task-modal-save:hover{ background:rgba(99,102,241,0.18); }
/* Light theme — group elements */
[data-theme="light"] .task-group-add-btn{ background:rgba(96,165,250,0.1); }
[data-theme="light"] .task-group-add-btn:hover{ background:rgba(96,165,250,0.18); }
[data-theme="light"] .task-group-toggle:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .task-group-name[contenteditable="true"]:focus{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .task-group-rename-btn:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .task-group-delete-btn:hover{ background:rgba(239,68,68,0.08); }

/* ---- Theme Toggle Switch ---- */
.theme-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.theme-toggle-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.theme-toggle-label svg{ width:14px; height:14px; }
.theme-switch{
  position:relative;
  width:44px;
  height:24px;
  flex-shrink:0;
}
.theme-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.theme-slider{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--stroke);
  border-radius:12px;
  cursor:pointer;
  transition:background .25s;
}
.theme-slider::before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--ink);
  transition:transform .25s;
}
.theme-switch input:checked + .theme-slider{
  background:rgba(99,102,241,0.2);
}
.theme-switch input:checked + .theme-slider::before{
  transform:translateX(20px);
}

/* ---- Invite Link Row (settings panel) ---- */
.invite-row{
  display:flex;
  gap:6px;
  align-items:center;
}
.invite-input{
  flex:1;
  min-width:0;
  padding:6px 10px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--stroke);
  border-radius:8px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:12px;
  outline:none;
}
.invite-input:focus{ border-color:var(--accent); }
[data-theme="light"] .invite-input{ background:rgba(0,0,0,0.04); }
.invite-btn{
  width:32px;
  height:32px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--stroke);
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;
  transition:all .15s;
}
.invite-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.invite-btn:disabled{ opacity:.5; pointer-events:none; }
[data-theme="light"] .invite-btn{ background:rgba(0,0,0,0.04); }

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:var(--bg0); overflow:hidden; overscroll-behavior:none; }
body{ font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; }

video.mirror {
  transform: scaleX(-1);
}

/* ---- Confetti animation ---- */
@keyframes confetti-fall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(100vh) translateX(var(--drift,0px)) rotate(var(--spin,360deg)); opacity:0; }
}

.people{
  position:fixed; left:30px; top:0; bottom:0;
  width:calc(var(--call-width) + 20px);
  display:flex; flex-direction:column;
  justify-content:center;
  gap:20px;
  z-index:10000;
  pointer-events:none;
  transition:all .45s ease;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  padding:20px 0;
  padding-right:20px;
}
.people.scrollable{ justify-content:flex-start; pointer-events:auto; }
.people::-webkit-scrollbar{ display:none; }

/* Screen share previews (right strip, stacked like participants) */
.screen-previews{
  position:fixed;
  right:30px;
  top:0;
  bottom:0;
  width:320px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  z-index:10001;
  pointer-events:none;
  padding:20px 0;
}
.screen-preview{
  pointer-events:auto;
  position:relative;
  width:100%;
  min-width:160px;
  min-height:100px;
  border-radius:16px;
  background:rgba(26, 27, 30, 0.92);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow2);
  overflow:hidden;
  cursor:pointer;
  flex-shrink:0;
}
.screen-preview video{
  width:100%;
  display:block;
  border-radius:16px 16px 0 0;
  background:#000;
  pointer-events:none;
}
.screen-preview .screen-preview-label{
  padding:3px 10px;
  font-size:12px;
  font-weight:600;
  color:#e9ecef;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.screen-preview .screen-preview-label svg{ width:14px; height:14px; color:var(--accent); }

/* Resize handle (bottom-left, grip dots like canvas-box-resize) */
.screen-preview .sp-resize{
  position:absolute;
  bottom:0; left:0;
  width:28px; height:28px;
  cursor:nwse-resize;
  z-index:2;
}
.screen-preview .sp-resize::after{
  content:"";
  position:absolute;
  bottom:5px; left:5px;
  width:12px; height:12px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.22) 1.4px, transparent 1.4px) 0 0 / 5px 5px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.22) 1.4px, transparent 1.4px) 5px 0 / 5px 5px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.22) 1.4px, transparent 1.4px) 0 5px / 5px 5px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.22) 1.4px, transparent 1.4px) 5px 5px / 5px 5px no-repeat;
  pointer-events:none;
}

/* Hidden participants badge */
.people-overflow-badge{
  pointer-events:auto;
  position:fixed;
  bottom:20px;
  left:calc(30px + var(--call-width) / 2);
  transform:translateX(-50%);
  padding:5px 12px;
  border-radius:16px;
  background:var(--bg2);
  border:1px solid var(--stroke);
  color:var(--ink);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:var(--shadow2);
  cursor:pointer;
  display:none;
  z-index:10000;
}

/* Galerie plein écran */
.people.grid-mode{
  left:0; right:0; top:0; bottom:0;
  width:100vw; height:100vh;
  padding:70px 60px 90px;
  display:grid;
  /* Default fallback for crowded calls (13+); per-count rules below
     declare auto columns + explicit tile width via min() instead. */
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:16px;
  /* Center the implicit grid (auto-sized to its tiles) inside the
     viewport-sized container — gives a balanced, premium layout. */
  align-content:center;
  justify-content:center;
  background:rgba(18, 18, 20, 0.97);
  z-index:20000;
  pointer-events:auto;
  overflow-y:auto;
}
/* Tiles adopt the camera's native 16:9 ratio. Width is set per count
   below via min(cell_w, cell_h * 16/9) so each tile fills as much of
   the viewport as possible without ever overflowing its row. height
   is computed automatically from aspect-ratio. min-w/min-h:0 lets the
   tile shrink below its intrinsic content size on small viewports.
   Previous attempt used width/height: auto + max-*: 100% — that
   collapsed tiles to the size of their tiny intrinsic content (the
   <video> is absolutely positioned, so it contributes 0 to intrinsic
   width), leaving tiny tiles in the middle of an empty grid. */
.people.grid-mode .person{
  height:auto;
  aspect-ratio:16 / 9;
  min-width:0;
  min-height:0;
}

/* Per-count layout. The min() formula has two arguments:
     (1) per-cell width = (viewport_w - h_padding - col_gaps) / cols
     (2) per-cell height projected to width via *16/9
   Whichever is smaller wins, so the tile always fits in its cell.
   Padding constants: 60px left + 60px right = 120 horizontal,
   70px top + 90px bottom = 160 vertical. Gap = 16. */
.people.grid-mode[data-tile-count="1"]{
  grid-template-columns:1fr;
}
.people.grid-mode[data-tile-count="1"] .person{
  width:min(calc(100vw - 120px), calc((100vh - 160px) * 16 / 9));
  justify-self:center;
}
.people.grid-mode[data-tile-count="2"]{
  grid-template-columns:repeat(2, auto);
}
.people.grid-mode[data-tile-count="2"] .person{
  width:min(calc((100vw - 136px) / 2), calc((100vh - 160px) * 16 / 9));
}
.people.grid-mode[data-tile-count="3"]{
  grid-template-columns:repeat(3, auto);
}
.people.grid-mode[data-tile-count="3"] .person{
  width:min(calc((100vw - 152px) / 3), calc((100vh - 160px) * 16 / 9));
}
.people.grid-mode[data-tile-count="4"]{
  grid-template-columns:repeat(2, auto);
}
.people.grid-mode[data-tile-count="4"] .person{
  width:min(calc((100vw - 136px) / 2), calc((100vh - 176px) / 2 * 16 / 9));
}
.people.grid-mode[data-tile-count="5"],
.people.grid-mode[data-tile-count="6"]{
  grid-template-columns:repeat(3, auto);
}
.people.grid-mode[data-tile-count="5"] .person,
.people.grid-mode[data-tile-count="6"] .person{
  width:min(calc((100vw - 152px) / 3), calc((100vh - 176px) / 2 * 16 / 9));
}
.people.grid-mode[data-tile-count="7"],
.people.grid-mode[data-tile-count="8"],
.people.grid-mode[data-tile-count="9"]{
  grid-template-columns:repeat(3, auto);
}
.people.grid-mode[data-tile-count="7"] .person,
.people.grid-mode[data-tile-count="8"] .person,
.people.grid-mode[data-tile-count="9"] .person{
  width:min(calc((100vw - 152px) / 3), calc((100vh - 192px) / 3 * 16 / 9));
}
.people.grid-mode[data-tile-count="10"],
.people.grid-mode[data-tile-count="11"],
.people.grid-mode[data-tile-count="12"]{
  grid-template-columns:repeat(4, auto);
}
.people.grid-mode[data-tile-count="10"] .person,
.people.grid-mode[data-tile-count="11"] .person,
.people.grid-mode[data-tile-count="12"] .person{
  width:min(calc((100vw - 168px) / 4), calc((100vh - 192px) / 3 * 16 / 9));
}

/* Top-mode: horizontal strip at top */
.people.top-mode{
  left:0; right:0; top:0; bottom:auto;
  width:100%; height:auto;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding:16px 20px;
  gap:14px;
  overflow-x:auto;
  pointer-events:auto;
}
.people.top-mode .person{
  flex-shrink:0;
  width:180px;
  height:120px;
  border-radius:20px;
}
.people.top-mode .person video{ border-radius:12px; }
.people.top-mode .person.video-on::after{ border-radius:12px; }

.settings-divider{
  border:none;
  border-top:1px solid var(--stroke);
  margin:12px 0;
}


.settings-pop-hint{
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
}

/* ---- Zoom sensitivity slider ---- */
.zoom-slider-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.zoom-slider-label{
  font-size:11px;
  color:var(--muted);
  flex-shrink:0;
}
.zoom-slider-row input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.1);
  outline:none;
  cursor:pointer;
}
.zoom-slider-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--bg1);
  box-shadow:0 0 4px rgba(99,102,241,0.4);
  cursor:pointer;
  transition:box-shadow .15s;
}
.zoom-slider-row input[type="range"]::-webkit-slider-thumb:hover{
  box-shadow:0 0 8px rgba(99,102,241,0.6);
}
.zoom-slider-row input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--bg1);
  box-shadow:0 0 4px rgba(99,102,241,0.4);
  cursor:pointer;
}
.zoom-slider-row input[type="range"]::-moz-range-track{
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.1);
}
[data-theme="light"] .zoom-slider-row input[type="range"]{
  background:rgba(0,0,0,0.08);
}
[data-theme="light"] .zoom-slider-row input[type="range"]::-moz-range-track{
  background:rgba(0,0,0,0.08);
}

.person{
  pointer-events:auto;
  position:relative;
  padding:16px;
  height:160px;
  flex-shrink:0;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(26, 27, 30, 0.92);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:var(--shadow2);
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow:visible;
  isolation:isolate;
}
.person.local-tile{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--bg1);
}

.person .avatar{
  width:64px; height:64px;
  border-radius:50%;
  border:2px solid transparent;
  display:grid;
  place-items:center;
  font-weight:700;
  color:var(--ink);
  background:var(--bg1);
}

.person .avatar-img{
  width:64px; height:64px;
  border-radius:50%;
  border:2px solid transparent;
  object-fit:cover;
}
.person .name{ font-weight:600; font-size:14px; letter-spacing:-0.01em; }
.person .name-overlay{
  display:none;
  position:absolute;
  bottom:12px;
  left:14px;
  font-weight:600;
  font-size:13px;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  z-index:3;
}
.person .role{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.person:not(.video-on) .role{ display:none; }

/* Owner badge — small indigo pill in the top-right of the tile so any
   participant can immediately spot the room host. Same accent as the
   invite-card-team badge in Settings (#6366f1) for design consistency
   with the rest of the Coommit DA. Hidden by default; flipped on by
   removing .hidden when the role is "owner". Bug #60. */
.person .owner-badge{
  position:absolute;
  top:8px;
  right:8px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:10px;
  background:#6366f1;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  line-height:1;
  box-shadow:0 4px 12px rgba(99,102,241,0.35);
  pointer-events:none;
  /* Smooth fade so role flips (e.g. ownership transfer) animate in
     instead of popping. */
  transition:opacity .2s ease;
}
.person .owner-badge.hidden{ display:none; }
[data-theme="light"] .person .owner-badge{
  box-shadow:0 4px 12px rgba(99,102,241,0.45);
}
/* In fullscreen, scale the badge up slightly so it stays legible. */
.person.fullscreen .owner-badge{
  top:14px; right:14px;
  font-size:10px;
  padding:4px 10px;
}
.person:not(.video-on){
  justify-content:flex-start;
  padding-top:16px;
  padding-bottom:40px;
}
/* Center avatar + name when tile is large (grid mode or fullscreen) */
.people.grid-mode .person:not(.video-on),
.person.fullscreen:not(.video-on){
  justify-content:center;
  padding:16px;
}
.people.grid-mode .person:not(.video-on) .avatar,
.people.grid-mode .person:not(.video-on) .avatar-img,
.person.fullscreen:not(.video-on) .avatar,
.person.fullscreen:not(.video-on) .avatar-img{
  width:96px; height:96px;
  margin-top:auto;
}
.people.grid-mode .person:not(.video-on) .name,
.person.fullscreen:not(.video-on) .name{
  font-size:18px;
  margin-bottom:auto;
}

/* vidéo en fond */
.person video{
  position:absolute; inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  z-index:1;
  display:none;
}
.person.video-on video{ display:block; }
.person.video-on{ border:none; }

/* masque avatar/texte quand vidéo ON */
.person.video-on .avatar,
.person.video-on .avatar-img,
.person.video-on .name,
.person.video-on .role{ display:none; }
.person.video-on .name-overlay{ display:block; }

/* gradient pour lisibilité */
.person.video-on::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  background:linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0) 55%);
  z-index:2;
  pointer-events:none;
}

/* speaking indicator — violet ring on avatar only */
.person .avatar,
.person .avatar-img{
  transition:box-shadow .3s ease, border-color .3s ease;
}
.person.speaking .avatar,
.person.speaking .avatar-img{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent), 0 0 12px rgba(99,102,241,0.5);
}

/* Gallery mode: enhanced speaker highlight (no scale to avoid overlap) */
.people.grid-mode .person.speaking{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent), 0 0 24px rgba(99,102,241,0.35);
  transition:box-shadow .2s ease, border-color .2s ease;
}
[data-theme="light"] .people.grid-mode .person.speaking{
  box-shadow:0 0 0 2px var(--accent), 0 0 16px rgba(99,102,241,0.2);
}

/* Local tile status pill */
.local-status-pill{
  position:absolute;
  bottom:6px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px;
  padding:4px 6px; border-radius:10px;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:6;
  transition:all .2s ease;
}
.local-status-pill span{
  color:#4ade80; display:flex; align-items:center;
  cursor:pointer; border-radius:8px; padding:5px;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.local-status-pill span:hover{ background:rgba(255,255,255,0.12); transform:scale(1.15); }
.local-status-pill span:active{ transform:scale(0.95); }
.local-status-pill span svg{ width:14px; height:14px; display:block; }
.local-status-pill span.off{ color:#ef4444; }
.local-status-pill span.off:hover{ background:rgba(239,68,68,0.2); }
/* Self-muted by the remote participant — grey, non-interactive */
.local-status-pill span.self-off{ color:#6b7280; opacity:0.5; pointer-events:none; cursor:default; }
.local-status-pill span.self-off:hover{ background:none; transform:none; }
.person.video-on .local-status-pill{
  left:auto; right:14px; transform:none;
}
[data-theme="light"] .local-status-pill{
  background:rgba(255,255,255,0.7);
}
[data-theme="light"] .local-status-pill span{ color:#16a34a; }
[data-theme="light"] .local-status-pill span:hover{ background:rgba(0,0,0,0.08); }
[data-theme="light"] .local-status-pill span.off{ color:#dc2626; }
[data-theme="light"] .local-status-pill span.off:hover{ background:rgba(220,38,38,0.12); }
[data-theme="light"] .local-status-pill span.self-off{ color:#9ca3af; }

/* Screen-share badge on tiles — below fullscreen button */
.screen-badge{
  position:absolute;
  top:50%;
  right:-18px;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(99,102,241,0.9);
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:7;
  pointer-events:auto;
  animation:screen-badge-pulse 2s infinite;
  transition:transform .15s, opacity .2s ease;
}
.screen-badge.active{ display:none; }
.screen-badge:hover{ transform:translateY(-50%) scale(1.1); }
.screen-badge svg{ width:16px; height:16px; }
@keyframes screen-badge-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(99,102,241,0.4); }
  50%{ box-shadow:0 0 0 6px rgba(99,102,241,0); }
}
.person.video-on .screen-badge{ top:50%; right:-18px; }
[data-theme="light"] .screen-badge{ background:rgba(99,102,241,0.85); }

/* Screen share toolbar button active state */
.tool.active{
  background:var(--accent);
  color:#fff;
}
.tool.active:hover{ background:var(--accent-hover); }
#btnScreenShare.active{
  background:var(--accent);
  color:#fff;
}
#btnScreenShare.active:hover{ background:var(--accent-hover); }

/* boutons overlay (mic/cam/fullscreen) */
.person .btn-group{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:5;
}
.person .btn{
  width:32px; height:32px;
  display:flex;
  align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--stroke);
  cursor:pointer;
  opacity:0;
  transition:.2s;
  color:var(--muted);
}
.person .btn svg{ width:16px; height:16px; display:block; }

.person:hover .btn-group .btn{ opacity:.7; }
.person .btn:hover{ opacity:1; background:rgba(255,255,255,0.08); }

/* enabled → green */
.person .btn.on{ color:#4ade80; }
/* disabled → red */
.person .btn.off{ color:#ef4444; }
.person:hover .btn.on,
.person:hover .btn.off{ opacity:1; }

/* Fullscreen button — top-left, always subtly visible */
.person .btn.fs{
  position:absolute;
  top:12px; left:12px;
  right:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  border-radius:8px;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:none;
  color:rgba(255,255,255,0.85);
  opacity:0;
  z-index:7;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease, opacity .2s ease;
}
.person .btn.fs svg{ width:14px; height:14px; display:block; }
.person:hover .btn.fs{ opacity:1; }
.person .btn.fs:hover{ background:rgba(255,255,255,0.12); transform:scale(1.15); }
.person .btn.fs:active{ transform:scale(0.95); }
[data-theme="light"] .person .btn.fs{
  background:rgba(255,255,255,0.65);
  border:none;
  color:rgba(0,0,0,0.7);
}
[data-theme="light"] .person .btn.fs:hover{
  background:rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.7);
}
/* In grid mode: always slightly visible */
.people.grid-mode .person .btn.fs{ opacity:0.5; }
.people.grid-mode .person:hover .btn.fs{ opacity:1; }
.people.grid-mode .person .screen-badge.active{ opacity:1; }

.person.fullscreen{
  position:fixed !important;
  left:20px !important; top:20px !important;
  width:calc(100vw - 40px) !important;
  height:calc(100vh - 40px) !important;
  z-index:30000 !important;
  background:var(--bg1);
}

/* Hide all UI chrome when a participant tile is fullscreen */
body.tile-fullscreen .bottom-navbar,
body.tile-fullscreen .undo-redo-wrap,
body.tile-fullscreen .bottom-panel-wrap,
body.tile-fullscreen .cam-pop,
body.tile-fullscreen .minimap{ display:none !important; }

/* ---- Bottom Navigation Bar ---- */
.bottom-navbar{
  position:fixed;
  left:0;
  right:0;
  bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  gap:12px;
  z-index:25000;
  border-radius:0;
  background:transparent;
  border:none;
  pointer-events:none;
}
.bottom-navbar > *{ pointer-events:auto; }

/* Toolbar */
/* ---- Toolbar wrapper ---- */
.toolbar-wrap{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.toolbar-row{
  display:flex;
  align-items:center;
  gap:4px;
}

/* ---- Commit Notification Panel ---- */
.commit-panel{
  position:fixed;
  top:calc(16px + var(--browser-offset-top));
  right:calc(16px + var(--browser-offset-right));
  width:440px;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);
  z-index:35000;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  background:rgba(26, 27, 30, 0.92);
  border:1px solid var(--stroke);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
  transform:translateX(calc(100% + 32px));
  opacity:0;
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .32s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.commit-panel.open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

.commit-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--stroke);
  flex-shrink:0;
}
.commit-panel-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.commit-panel-title svg{ width:18px; height:18px; color:var(--accent); }

.commit-panel-close{
  width:30px; height:30px;
  border:none; border-radius:8px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.15s;
}
.commit-panel-close:hover{ background:rgba(255,255,255,0.06); }
.commit-panel-close svg{ width:16px; height:16px; }

.commit-panel-body{
  flex:1;
  overflow-y:auto;
  padding:16px 20px;
  font-size:14px;
  color:var(--ink);
  line-height:1.6;
  word-break:break-word;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.commit-empty-state{
  color:var(--muted);
  font-size:13px;
  text-align:center;
  padding:24px 8px;
  line-height:1.5;
}
.commit-panel-body.loading{
  display:flex; align-items:center; justify-content:center;
  gap:10px; color:var(--muted); min-height:80px; font-size:13px;
}
.commit-panel-body.loading::after{
  content:""; display:inline-block;
  width:16px; height:16px;
  border:2px solid var(--muted); border-top-color:transparent;
  border-radius:50%; animation:commitSpin .6s linear infinite;
  flex-shrink:0;
}
@keyframes commitSpin{ to{ transform:rotate(360deg); } }

.commit-panel-footer{
  padding:12px 20px;
  border-top:1px solid var(--stroke);
  flex-shrink:0;
}
.commit-panel-tasks-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px 16px;
  border-radius:10px; border:none;
  background:var(--accent); color:#fff;
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; transition:.2s;
}
.commit-panel-tasks-btn svg{ width:16px; height:16px; }
.commit-panel-tasks-btn:hover{ background:var(--accent-hover, #818cf8); }

/* Light theme */
[data-theme="light"] .commit-panel{
  background:rgba(255, 255, 255, 0.94);
}
[data-theme="light"] .commit-panel-close:hover{ background:rgba(0,0,0,0.05); }

/* Commit structured sections */
.commit-section{
  border-radius:10px;
  padding:10px 14px;
  margin-top:8px;
}
.commit-section-summary{
  background:rgba(96,165,250,0.08);
  border:1px solid rgba(96,165,250,0.18);
}
.commit-section-objective{
  background:rgba(52,211,153,0.08);
  border:1px solid rgba(52,211,153,0.18);
}
.commit-section-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  margin-bottom:6px;
}
.commit-section-summary .commit-section-title{ color:#60a5fa; }
.commit-section-objective .commit-section-title{ color:#34d399; }
.commit-section-title svg{ width:14px; height:14px; }
.commit-section-body{
  font-size:12px;
  color:var(--ink);
  line-height:1.55;
  white-space:pre-wrap;
}
[data-theme="light"] .commit-section-summary{
  background:rgba(96,165,250,0.06);
  border-color:rgba(96,165,250,0.15);
}
[data-theme="light"] .commit-section-objective{
  background:rgba(52,211,153,0.06);
  border-color:rgba(52,211,153,0.15);
}
.commit-task-summary{
  background:rgba(99,102,241,0.08);
  border:1px solid rgba(99,102,241,0.18);
  border-radius:10px;
  padding:10px 14px;
  margin-top:8px;
}
.commit-task-summary-title{
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  margin-bottom:6px;
}
.commit-task-list{
  list-style:none;
  margin:0;
  padding:0;
}
.commit-task-list li{
  font-size:12px;
  color:var(--ink);
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.commit-task-list li:last-child{
  border-bottom:none;
}
[data-theme="light"] .commit-task-summary{
  background:rgba(99,102,241,0.06);
  border-color:rgba(99,102,241,0.15);
}
[data-theme="light"] .commit-task-list li{
  border-bottom-color:rgba(0,0,0,0.04);
}
.commit-task-label{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.commit-task-checkbox{
  width:14px;
  height:14px;
  accent-color:var(--accent);
  flex-shrink:0;
  cursor:pointer;
}
.commit-task-text{
  flex:1;
}
.commit-approve-row{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}
.commit-approve-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:6px 18px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}
.commit-approve-btn:hover{
  background:var(--accent-hover);
}
.commit-approve-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* ---- Task Preview Modal (Gemini proposals) ---- */
.task-preview-modal{
  position:fixed;
  inset:0;
  z-index:36000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.task-preview-content{
  width:600px;
  max-width:94vw;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  background:rgba(26,27,30,0.96);
  border:1px solid var(--stroke);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.task-preview-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--stroke);
}
.task-preview-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.task-preview-title svg{ width:18px; height:18px; color:var(--accent); }
.task-preview-close{
  width:28px;
  height:28px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.task-preview-close:hover{ background:rgba(255,255,255,0.06); }
.task-preview-close svg{ width:16px; height:16px; }
.task-preview-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  gap:12px;
  border-bottom:1px solid var(--stroke);
}
.task-preview-toolbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.task-preview-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.task-preview-select-all{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}
.task-preview-select-all input[type="checkbox"]{
  width:15px;
  height:15px;
  accent-color:var(--accent);
  cursor:pointer;
}
.task-preview-count{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.task-preview-bulk-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
}
.task-preview-bulk-label svg{ width:14px; height:14px; flex-shrink:0; }
.task-preview-bulk-label select{
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.05);
  color:var(--ink);
  font-family:var(--sans);
  font-size:12px;
  outline:none;
  cursor:pointer;
  max-width:140px;
}
.task-preview-bulk-label select option{
  background:var(--bg1);
  color:var(--ink);
}
.task-preview-list{
  flex:1;
  overflow-y:auto;
  padding:12px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.task-preview-list::-webkit-scrollbar{ width:5px; }
.task-preview-list::-webkit-scrollbar-track{ background:transparent; }
.task-preview-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.08); border-radius:4px; }
.task-preview-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--stroke);
  transition:opacity .2s, background .15s;
}
.task-preview-card:hover{ background:rgba(255,255,255,0.06); }
.task-preview-card.unchecked{ opacity:0.45; }
.task-preview-card input[type="checkbox"]{
  width:16px;
  height:16px;
  margin-top:2px;
  accent-color:var(--accent);
  flex-shrink:0;
  cursor:pointer;
}
.task-preview-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.task-preview-card-title{
  width:100%;
  padding:5px 8px;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  outline:none;
  transition:border-color .2s, background .15s;
}
.task-preview-card-title:hover{ border-color:var(--stroke); background:rgba(255,255,255,0.03); }
.task-preview-card-title:focus{ border-color:var(--accent); background:rgba(255,255,255,0.05); }
.task-preview-card-fields{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding-left:2px;
}
.task-preview-card-field{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.task-preview-card-field-label{
  font-size:10px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding-left:2px;
}
.task-preview-card-assignee,
.task-preview-card-group{
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.05);
  color:var(--ink);
  font-family:var(--sans);
  font-size:12px;
  outline:none;
  cursor:pointer;
  transition:border-color .2s, background .15s;
}
.task-preview-card-assignee{ max-width:130px; }
.task-preview-card-assignee::placeholder{ color:var(--muted); opacity:0.5; }
.task-preview-card-assignee:hover,
.task-preview-card-group:hover{ border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.07); }
.task-preview-card-assignee:focus,
.task-preview-card-group:focus{ border-color:var(--accent); background:rgba(255,255,255,0.08); }
.task-preview-card-group option{
  background:var(--bg1);
  color:var(--ink);
}
.task-preview-card-date{
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.05);
  color:var(--ink);
  font-family:var(--sans);
  font-size:12px;
  outline:none;
  cursor:pointer;
  transition:border-color .2s, background .15s;
}
.task-preview-card-date:hover{ border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.07); }
.task-preview-card-date:focus{ border-color:var(--accent); background:rgba(255,255,255,0.08); }
.task-preview-card-date.missing{
  border-color:var(--danger);
  background:rgba(239,68,68,0.08);
}
.task-preview-card-date::-webkit-calendar-picker-indicator{
  filter:invert(0.7);
  cursor:pointer;
}
.task-preview-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:12px 20px;
  border-top:1px solid var(--stroke);
}
.task-preview-validation-msg{
  margin-right:auto;
  font-size:12px;
  color:var(--danger);
  font-weight:500;
}
.task-preview-footer .task-modal-save:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
/* Light theme — task preview modal */
[data-theme="light"] .task-preview-modal{ background:rgba(0,0,0,0.25); }
[data-theme="light"] .task-preview-content{ background:rgba(255,255,255,0.96); }
[data-theme="light"] .task-preview-close:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .task-preview-card{ background:rgba(0,0,0,0.02); border-color:rgba(0,0,0,0.06); }
[data-theme="light"] .task-preview-card:hover{ background:rgba(0,0,0,0.04); }
[data-theme="light"] .task-preview-card-title:hover{ border-color:rgba(0,0,0,0.1); background:rgba(0,0,0,0.02); }
[data-theme="light"] .task-preview-card-title:focus{ border-color:var(--accent); background:rgba(0,0,0,0.03); }
[data-theme="light"] .task-preview-card-assignee,
[data-theme="light"] .task-preview-card-group,
[data-theme="light"] .task-preview-card-date,
[data-theme="light"] .task-preview-bulk-label select{ background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.08); }
[data-theme="light"] .task-preview-card-assignee:hover,
[data-theme="light"] .task-preview-card-group:hover,
[data-theme="light"] .task-preview-card-date:hover{ border-color:rgba(0,0,0,0.15); background:rgba(0,0,0,0.05); }
[data-theme="light"] .task-preview-card-assignee:focus,
[data-theme="light"] .task-preview-card-group:focus,
[data-theme="light"] .task-preview-card-date:focus{ border-color:var(--accent); background:rgba(0,0,0,0.04); }
[data-theme="light"] .task-preview-card-date.missing{ border-color:var(--danger); background:rgba(239,68,68,0.06); }
[data-theme="light"] .task-preview-card-date::-webkit-calendar-picker-indicator{ filter:none; }
[data-theme="light"] .task-preview-list::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.1); }

.toolbar{
  display:flex;
  gap:4px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(26, 27, 30, 0.8);
  border:1px solid var(--stroke);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 30px rgba(0,0,0,0.15);
}
.toolbar-side{
  display:flex;
  padding:9px;
  border-radius:12px;
  background:rgba(255, 255, 255, 0.06);
  border:1px solid rgba(255, 255, 255, 0.12);
  box-shadow:0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter:blur(6.5px);
  -webkit-backdrop-filter:blur(6.5px);
}
.tool{
  width:48px; height:48px;
  border-radius:13px;
  background:transparent;
  border:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.2s;
  color:var(--ink);
}
.tool svg{ width:24px; height:24px; }
.tool:hover{ background:rgba(255,255,255,0.05); transform:translateY(-2px); }
.tool.visio-btn{ background:transparent; border-radius:10px; }
.tool.visio-btn svg{ stroke:var(--accent); color:var(--accent); filter:drop-shadow(0 0 6px rgba(99,102,241,0.6)); }
.tool.visio-btn:hover{ background:rgba(99,102,241,0.12); }
.tool.visio-btn:hover svg{ stroke:#818cf8; color:#818cf8; filter:drop-shadow(0 0 8px rgba(129,140,248,0.75)); }
.tool.exit-btn{ background:rgba(239,68,68,0.12); color:#fca5a5; border-radius:10px; }
.tool.exit-btn:hover{ background:rgba(239,68,68,0.22); }
.tool.active{ background:rgba(255,255,255,0.08); }
#btnScreenShare.active{ background:var(--accent); color:#fff; }
#btnScreenShare.active:hover{ background:var(--accent-hover); }

/* Bug #104: Coommit button is gated on at least one final transcription
   in the current session. Disabled state avoids the "No transcriptions
   available" 400 toast that confused users who clicked too early.
   Native HTML `disabled` blocks clicks; we keep pointer-events enabled
   so the custom tooltip below can catch hover. */
.tool.commit-btn:disabled{ opacity:0.35; cursor:not-allowed; position:relative; }
.tool.commit-btn:disabled:hover{ background:transparent; transform:none; }

/* Custom hover tooltip on the disabled Coommit button. Snappier than
   the browser's native title (no 1s delay), wraps nicely, and the
   data attribute is toggled by the gate state so an enabled button
   never shows this. */
.tool.commit-btn:disabled[data-disabled-tip]:hover::after,
.tool.commit-btn:disabled[data-disabled-tip]:focus-visible::after{
  content: attr(data-disabled-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 23, 0.96);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  width: max-content;
  max-width: 240px;
  text-align: center;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  animation: commit-tip-in 0.18s ease-out;
}
.tool.commit-btn:disabled[data-disabled-tip]:hover::before,
.tool.commit-btn:disabled[data-disabled-tip]:focus-visible::before{
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15, 15, 23, 0.96);
  z-index: 1000;
  pointer-events: none;
  animation: commit-tip-in 0.18s ease-out;
}
@keyframes commit-tip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
[data-theme="light"] .tool.commit-btn:disabled[data-disabled-tip]:hover::after,
[data-theme="light"] .tool.commit-btn:disabled[data-disabled-tip]:focus-visible::after{
  background: rgba(20, 20, 30, 0.95);
}
[data-theme="light"] .tool.commit-btn:disabled[data-disabled-tip]:hover::before,
[data-theme="light"] .tool.commit-btn:disabled[data-disabled-tip]:focus-visible::before{
  border-top-color: rgba(20, 20, 30, 0.95);
}

/* Gallery-only meeting tools */
.gallery-only-tool{ display:none !important; }
body.gallery-active .gallery-only-tool{ display:grid !important; }

/* Gallery mode: hide canvas tools, show meeting tools */
body.gallery-active #btnAddTitle,
body.gallery-active #btnAddText,
body.gallery-active #btnAddMarkdown,
body.gallery-active #btnAddScreen,
body.gallery-active #btnAddImage,
body.gallery-active #btnAddYoutube,
body.gallery-active #btnAddGdrive,
body.gallery-active #btnDraw,
body.gallery-active #btnCommit,
body.gallery-active #btnEcho,
body.gallery-active #btnTasks,
body.gallery-active #btnAddBetaBrowser,
body.gallery-active #btnRecord,
body.gallery-active .bottom-panel-wrap,
body.gallery-active .chat-fab,
body.gallery-active .undo-redo-wrap,
body.gallery-active .minimap{ display:none !important; }

/* Mic/cam muted state — red tint */
body.gallery-active #btnGalleryMic.muted,
body.gallery-active #btnGalleryCam.cam-off{
  background:rgba(239,68,68,0.15);
  color:#ef4444;
}
body.gallery-active #btnGalleryMic.muted:hover,
body.gallery-active #btnGalleryCam.cam-off:hover{
  background:rgba(239,68,68,0.25);
}

/* ---- Bottom panel wrapper ---- */
.bottom-panel-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  margin:0 auto;
  z-index:25000;
  height:var(--panel-h, 0px);
  overflow:hidden;
  pointer-events:none;
}

/* Inner sled: holds toggle + panel, slides via translateY */
.bottom-panel-sled{
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:auto;
  transform:translateY(var(--panel-h, 0px));
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.bottom-panel-wrap.panel-open .bottom-panel-sled{
  transform:translateY(0);
}

/* ---- Panel collapse button (inside header) ---- */
.panel-collapse-btn{
  height:32px;
  padding:0 12px;
  border-radius:8px;
  background:rgba(239,68,68,0.10);
  border:1px solid rgba(239,68,68,0.18);
  color:#f87171;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.panel-collapse-btn svg{
  width:15px;
  height:15px;
  flex-shrink:0;
}
.panel-collapse-btn:hover{
  background:rgba(239,68,68,0.20);
  border-color:rgba(239,68,68,0.30);
  color:#fca5a5;
}

/* ---- Expandable panel (slides up from bottom) ---- */
.toolbar-panel{
  position:relative;
  z-index:1;
  height:95vh;
  width:80vw;
  border-radius:12px 12px 0 0;
  background:rgba(26,27,30,0.97);
  border:1px solid var(--stroke);
  border-bottom:none;
  box-shadow:var(--shadow2);
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.toolbar-panel-body{
  padding:18px 20px;
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* ---- Task table ---- */
.task-table-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.task-table-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
}
.task-table-title svg{ width:18px; height:18px; }
.task-header-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.task-add-btn{
  height:32px;
  padding:0 12px;
  border:none;
  border-radius:8px;
  background:rgba(99,102,241,0.12);
  color:var(--accent);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  transition:background .2s;
}
.task-add-btn:hover{ background:rgba(99,102,241,0.22); }
.task-add-btn svg{ width:15px; height:15px; flex-shrink:0; }
.task-group-add-btn{
  height:32px;
  padding:0 12px;
  border:none;
  border-radius:8px;
  background:rgba(96,165,250,0.12);
  color:#60a5fa;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  transition:background .2s;
}
.task-group-add-btn:hover{ background:rgba(96,165,250,0.22); }
.task-group-add-btn svg{ width:15px; height:15px; flex-shrink:0; }

.task-table-wrap{
  flex:1;
  min-height:0;
  overflow-y:auto;
  border:1px solid var(--stroke);
  border-radius:10px;
  background:rgba(255,255,255,0.03);
}
.task-table-wrap::-webkit-scrollbar{ width:4px; }
.task-table-wrap::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:2px; }

.task-action-bar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:10px;
}

.task-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  table-layout:auto;
}
.task-table thead{
  position:sticky;
  top:0;
  background:rgba(26,27,30,0.98);
  z-index:1;
}
.task-table th{
  text-transform:uppercase;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  padding:10px 12px;
  text-align:left;
  letter-spacing:0.04em;
}
.task-table tbody tr{
  border-bottom:1px solid var(--stroke);
  cursor:pointer;
  transition:background .15s;
}
.task-table tbody tr:hover{ background:rgba(255,255,255,0.04); }
.task-table tbody tr:last-child{ border-bottom:none; }
.task-table td{
  padding:10px 12px;
  vertical-align:middle;
}
.task-assignee{
  font-weight:600;
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.task-created,
.task-expires{
  font-family:'JetBrains Mono', 'Fira Code', monospace;
  font-size:12px;
  color:var(--muted);
}

/* Status badges */
.task-status{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:filter .15s, transform .12s;
}
.task-status:hover{ filter:brightness(1.2); transform:scale(1.06); }
.task-status:active{ transform:scale(0.96); }
.task-status-not-started{ background:rgba(156,163,175,0.15); color:#9ca3af; }
.task-status-in-progress{ background:rgba(96,165,250,0.15); color:#60a5fa; }
.task-status-completed{ background:rgba(99,102,241,0.15); color:#6366f1; }
.task-status-unfinished{ background:rgba(251,146,60,0.15); color:#fb923c; }

/* Row color-coding by status */
.task-table tbody tr[data-status]{ border-left:3px solid transparent; }
.task-table tbody tr[data-status="not-started"]{ border-left-color:#9ca3af; background:rgba(156,163,175,0.04); }
.task-table tbody tr[data-status="in-progress"]{ border-left-color:#60a5fa; background:rgba(96,165,250,0.06); }
.task-table tbody tr[data-status="completed"]{ border-left-color:#6366f1; background:rgba(99,102,241,0.06); }
.task-table tbody tr[data-status="unfinished"]{ border-left-color:#fb923c; background:rgba(251,146,60,0.06); }
.task-table tbody tr[data-status="not-started"]:hover{ background:rgba(156,163,175,0.08); }
.task-table tbody tr[data-status="in-progress"]:hover{ background:rgba(96,165,250,0.10); }
.task-table tbody tr[data-status="completed"]:hover{ background:rgba(99,102,241,0.10); }
.task-table tbody tr[data-status="unfinished"]:hover{ background:rgba(251,146,60,0.10); }

.task-actions-cell{ display:flex; align-items:center; gap:4px; }
.task-edit-btn{
  width:28px;
  height:28px;
  border:none;
  border-radius:6px;
  background:rgba(99,102,241,0.1);
  color:var(--accent);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.task-edit-btn:hover{ background:rgba(99,102,241,0.22); }
.task-edit-btn svg{ width:14px; height:14px; }
.task-delete-btn{
  width:28px;
  height:28px;
  border:none;
  border-radius:6px;
  background:rgba(239,68,68,0.1);
  color:#f87171;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.task-delete-btn:hover{ background:rgba(239,68,68,0.22); }
.task-delete-btn svg{ width:14px; height:14px; }

/* Title column */
.task-title{
  font-weight:600;
  max-width:200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- Group header ---- */
.task-group-header-row{
  border-bottom:1px solid var(--stroke);
}
.task-group-header-row:hover{ background:transparent !important; }
.task-group-header-row td{ padding:0; }
.task-group-header{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  user-select:none;
}
.task-group-toggle{
  width:24px;
  height:24px;
  border:none;
  border-radius:4px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .15s;
}
.task-group-toggle:hover{ background:rgba(255,255,255,0.06); }
.task-group-toggle svg{ width:14px; height:14px; }
.task-group-name{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  outline:none;
  border-radius:4px;
  padding:2px 4px;
  transition:background .15s;
}
.task-group-name[contenteditable="true"]:focus{
  background:rgba(255,255,255,0.08);
}
.task-group-count{
  font-size:11px;
  color:var(--muted);
  margin-left:2px;
}
.task-group-rename-btn,
.task-group-delete-btn{
  width:24px;
  height:24px;
  border:none;
  border-radius:4px;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .15s, background .15s;
}
.task-group-header:hover .task-group-rename-btn,
.task-group-header:hover .task-group-delete-btn{
  opacity:1;
}
.task-group-rename-btn{ color:var(--muted); margin-left:auto; }
.task-group-rename-btn:hover{ background:rgba(255,255,255,0.06); }
.task-group-rename-btn svg{ width:12px; height:12px; }
.task-group-delete-btn{ color:#f87171; }
.task-group-delete-btn:hover{ background:rgba(239,68,68,0.12); }
.task-group-delete-btn svg{ width:12px; height:12px; }

/* ---- Task filters ---- */
.task-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding-bottom:12px;
  overflow-x:auto;
}
.task-filter-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 12px;
  border:1px solid var(--stroke);
  border-radius:20px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}
.task-filter-btn:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
}
.task-filter-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.task-filter-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
  background:rgba(255,255,255,0.1);
  line-height:1;
}
.task-filter-btn.active .task-filter-count{
  background:rgba(255,255,255,0.25);
}
[data-theme="light"] .task-filter-btn{
  border-color:rgba(0,0,0,0.1);
  color:var(--muted);
}
[data-theme="light"] .task-filter-btn:hover{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.15);
}
[data-theme="light"] .task-filter-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
[data-theme="light"] .task-filter-count{
  background:rgba(0,0,0,0.06);
}
[data-theme="light"] .task-filter-btn.active .task-filter-count{
  background:rgba(255,255,255,0.25);
}

/* ---- Overdue task indicators ---- */
tr.task-overdue{
  border-left-color:#ef4444 !important;
  background:rgba(239,68,68,0.06) !important;
}
tr.task-overdue:hover{
  background:rgba(239,68,68,0.10) !important;
}
tr.task-overdue .task-expires{
  color:#ef4444;
  font-weight:600;
}
.task-overdue-icon{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  margin-right:4px;
  color:#ef4444;
}
.task-overdue-icon svg{
  width:13px;
  height:13px;
}
[data-theme="light"] tr.task-overdue{
  background:rgba(239,68,68,0.05) !important;
}
[data-theme="light"] tr.task-overdue:hover{
  background:rgba(239,68,68,0.09) !important;
}

/* ---- Group progress bar ---- */
.task-group-progress{
  width:80px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
  flex-shrink:0;
  margin-left:4px;
}
.task-group-progress-bar{
  height:100%;
  border-radius:2px;
  background:var(--accent);
  transition:width .3s ease;
}
.task-group-progress-text{
  font-size:11px;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
[data-theme="light"] .task-group-progress{
  background:rgba(0,0,0,0.08);
}

/* Next meeting objective banner */
.next-objective-banner{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 14px;
  margin-bottom:12px;
  border-radius:10px;
  background:rgba(52,211,153,0.08);
  border:1px solid rgba(52,211,153,0.18);
}
.next-objective-banner-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.next-objective-banner-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:#34d399;
}
.next-objective-banner-label svg{ width:14px; height:14px; }
.next-objective-dismiss{
  width:22px;
  height:22px;
  border:none;
  border-radius:4px;
  background:transparent;
  color:#34d399;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0.6;
  transition:opacity .15s, background .15s;
}
.next-objective-dismiss svg{ width:14px; height:14px; }
.next-objective-dismiss:hover{ opacity:1; background:rgba(52,211,153,0.12); }
[data-theme="light"] .next-objective-dismiss:hover{ background:rgba(52,211,153,0.1); }
.next-objective-banner-body{
  font-size:13px;
  color:var(--ink);
  line-height:1.5;
  white-space:pre-wrap;
}
[data-theme="light"] .next-objective-banner{
  background:rgba(52,211,153,0.06);
  border-color:rgba(52,211,153,0.15);
}

/* Objectives checklist section */
.objectives-section{
  margin-bottom:12px;
  border-radius:10px;
  background:rgba(52,211,153,0.06);
  border:1px solid rgba(52,211,153,0.15);
  overflow:hidden;
}
.objectives-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
}
.objectives-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:#34d399;
}
.objectives-title svg{ width:14px; height:14px; }
.objective-add-btn{
  height:26px;
  padding:0 10px;
  border:none;
  border-radius:6px;
  background:rgba(52,211,153,0.15);
  color:#34d399;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  transition:background .15s;
}
.objective-add-btn svg{ width:14px; height:14px; flex-shrink:0; }
.objective-add-btn:hover{ background:rgba(52,211,153,0.25); }
.objectives-list{
  display:flex;
  flex-direction:column;
}
.objectives-empty{
  padding:8px 14px 12px;
  font-size:12px;
  color:var(--muted);
}
.objective-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-top:1px solid rgba(52,211,153,0.08);
  transition:background .15s;
}
.objective-item:hover{ background:rgba(52,211,153,0.04); }
.objective-item:hover .objective-delete{ opacity:1; }
.objective-check{
  width:16px;
  height:16px;
  flex-shrink:0;
  accent-color:#34d399;
  cursor:pointer;
}
.objective-text{
  flex:1;
  font-size:13px;
  color:var(--ink);
  outline:none;
  min-width:0;
  line-height:1.4;
  padding:2px 4px;
  border-radius:4px;
  transition:background .15s;
}
.objective-text:focus{ background:rgba(255,255,255,0.05); }
.objective-text[contenteditable="false"]{ cursor:default; }
/* P3-H Hermès QA: checking an objective only muted the colour — easy
   to miss in a long list. Add the conventional line-through + opacity
   so the "done" state reads at a glance. */
.objective-item.done .objective-text{
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  opacity:0.65;
}
.objective-delete{
  width:20px;
  height:20px;
  border:none;
  border-radius:4px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  opacity:0;
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:opacity .15s, color .15s, background .15s;
}
.objective-delete svg{ width:12px; height:12px; }
.objective-delete:hover{ color:var(--danger); background:rgba(239,68,68,0.1); }
[data-theme="light"] .objectives-section{
  background:rgba(52,211,153,0.04);
  border-color:rgba(52,211,153,0.12);
}
[data-theme="light"] .objective-text:focus{ background:rgba(0,0,0,0.03); }
[data-theme="light"] .objective-item:hover{ background:rgba(52,211,153,0.03); }

.task-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
  gap:8px;
  padding:32px 0;
  color:var(--muted);
  font-size:13px;
}
.task-empty svg{ width:32px; height:32px; opacity:0.4; }

/* ---- Task modal ---- */
.task-modal{
  position:fixed;
  inset:0;
  z-index:30000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.task-modal-content{
  width:420px;
  max-width:92vw;
  border-radius:12px;
  background:rgba(26,27,30,0.94);
  border:1px solid var(--stroke);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.task-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--stroke);
  font-size:15px;
  font-weight:600;
}
.task-modal-close{
  width:28px;
  height:28px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.task-modal-close:hover{ background:rgba(255,255,255,0.06); }
.task-modal-close svg{ width:16px; height:16px; }

.task-modal-body{
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.task-modal-body label{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-top:4px;
}
.task-modal-body input,
.task-modal-body select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.05);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  outline:none;
  transition:border-color .2s;
}
.task-modal-body input:focus,
.task-modal-body select:focus{
  border-color:var(--accent);
}
.task-modal-body select option{
  background:var(--bg1);
  color:var(--ink);
}

.task-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:12px 20px;
  border-top:1px solid var(--stroke);
}
.task-modal-cancel,
.task-modal-save{
  padding:8px 18px;
  border-radius:8px;
  border:none;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
}
.task-modal-cancel{
  background:rgba(255,255,255,0.06);
  color:var(--muted);
}
.task-modal-cancel:hover{ background:rgba(255,255,255,0.1); }
.task-modal-save{
  background:rgba(99,102,241,0.15);
  color:var(--accent);
}
.task-modal-save:hover{ background:rgba(99,102,241,0.25); }

/* Pop caméra (anchored above settings FAB) */
.cam-pop{
  position:fixed;
  left:30px;
  bottom:72px; /* 0px navbar bottom + 62px bar height + 10px gap */
  width:360px;
  max-width:92vw;
  /* Cap height to viewport so the panel never overflows on short screens
     (e.g. MacBook Air 13" 1470x835 owner view with Devices+Prefs+Sharing).
     72px = bottom offset, 20px = top breathing room. dvh handles iOS
     Safari's dynamic chrome correctly. */
  max-height: calc(100dvh - 92px);
  padding:12px;
  border-radius:12px;
  background:rgba(26, 27, 30, 0.92);
  border:1px solid var(--stroke);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow2);
  z-index:26000;
  display:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.cam-pop::-webkit-scrollbar{ width:6px; }
.cam-pop::-webkit-scrollbar-track{ background:transparent; }
.cam-pop::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.18); border-radius:4px; }
.cam-pop::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.28); }
[data-theme="light"] .cam-pop{ scrollbar-color: rgba(0,0,0,0.22) transparent; }
[data-theme="light"] .cam-pop::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.22); }
[data-theme="light"] .cam-pop::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,0.34); }
.cam-pop.open{ display:block; }

.cam-pop-title{
  display:flex; align-items:center; gap:10px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:10px;
}
.cam-pop-title svg{ width:16px; height:16px; color:var(--accent); }

.cam-pop-row{ display:flex; gap:8px; align-items:center; }

.cam-pop select{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--stroke);
  color:var(--ink);
  padding:10px;
  border-radius:10px;
  outline:none;
  font-size:12px;
  text-overflow:ellipsis;
}
.cam-pop button{
  height:40px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  color:var(--ink);
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}
.cam-pop button:hover{ background:rgba(255,255,255,0.08); }
.cam-pop-hint{
  margin-top:8px;
  font-size:11px;
  color:var(--muted);
  line-height:1.25;
}
.cam-pop label,
.cam-pop-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
  margin-top:8px;
}
.cam-pop-label:first-of-type{ margin-top:0; }

/* Clickable action row inside the cam-pop settings — styled as an
   unstyled button/anchor that matches the cam-pop-label visual
   pattern, with a subtle hover highlight so it reads as tappable. */
.cam-pop-action{
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin: 4px 0;
  font-size: 12px;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  text-decoration: none;
}
.cam-pop-action:hover{
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
[data-theme="light"] .cam-pop-action:hover{
  background: rgba(0,0,0,0.04);
  color: #18191c;
}
.cam-pop-action:focus-visible{ outline: 2px solid #6366f1; outline-offset: 2px; }

/* ───────────────────────────────────────────────────────────────────
   Settings popover — refactored layout (silent sections + density)
   2026-05-11 soir: replace the old <hr>-stacked layout with grouped
   sections + micro-titles. All IDs preserved so JS handlers unchanged.
   ─────────────────────────────────────────────────────────────────── */

/* Section grouping — no more <hr> dividers, breathing room between sections */
.cam-pop-section {
  margin-bottom: 18px;
}
.cam-pop-section:last-child { margin-bottom: 0; }

/* Micro-title above each section. Uppercase + tracked + muted so it
   anchors the section without competing with the field labels. */
.cam-pop-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px 2px;
  opacity: 0.85;
}

/* Device field (camera/mic): label on top, dropdown below */
.cam-pop-field { margin-bottom: 10px; }
.cam-pop-field .cam-pop-label {
  margin-top: 0;
  margin-bottom: 6px;
}

/* Apply button — full-width indigo pill, symmetric with the selects above.
   Specificity bumped with [data-theme] + `.cam-pop` + class so it beats the
   pre-existing `[data-theme="light"] .cam-pop button` rule (0,3,1) at
   style_roomV3.css line ~68 which would otherwise wash the bg to gray. */
.cam-pop-actions {
  display: block;
  margin-top: 4px;
}
.cam-pop .cam-pop-btn-primary,
[data-theme="light"] .cam-pop .cam-pop-btn-primary {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.cam-pop .cam-pop-btn-primary:hover,
[data-theme="light"] .cam-pop .cam-pop-btn-primary:hover {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.cam-pop .cam-pop-btn-primary:active,
[data-theme="light"] .cam-pop .cam-pop-btn-primary:active {
  background: #4338ca;
  border-color: #4338ca;
  color: #fff;
  transform: translateY(1px);
  box-shadow: none;
}
.cam-pop .cam-pop-btn-primary:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Preference row — label left, control right, no border, just hover hint */
.cam-pop-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 4px;
  border-radius: 8px;
  min-height: 32px;
  box-sizing: border-box;
}
.cam-pop-pref-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.cam-pop-pref-label svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Hands-free variant — two-column 50/50 split: existing toggle group on the
   left, "Watch tutorial" CTA on the right. Keeps the same row height as the
   other prefs so the panel rhythm doesn't break. */
.cam-pop-pref.cam-pop-pref-handsfree {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}
.cam-pop-pref-handsfree-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.cam-pop-pref-handsfree-main .cam-pop-pref-label {
  flex: 1;
  min-width: 0;
}
.cam-pop-pref-tutorial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  min-width: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.cam-pop-pref-tutorial:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.16);
}
.cam-pop-pref-tutorial svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
[data-theme="light"] .cam-pop-pref-tutorial {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .cam-pop-pref-tutorial:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.18);
}

/* Stacked variant for the zoom slider (label on top, control below) */
.cam-pop-pref-stack {
  flex-direction: column;
  align-items: stretch;
  padding-top: 8px;
  padding-bottom: 8px;
}
.cam-pop-pref-stack .cam-pop-pref-label {
  margin-bottom: 6px;
}
.cam-pop-pref-stack .zoom-slider-row { margin-top: 0; }

/* Pref rendered as a link (Replay tutorial): full-row clickable + chevron */
.cam-pop .cam-pop-pref-link {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s;
  min-height: 32px;
}
.cam-pop .cam-pop-pref-link:hover { background: rgba(255,255,255,0.05); }
[data-theme="light"] .cam-pop .cam-pop-pref-link:hover { background: rgba(0,0,0,0.04); }
.cam-pop-pref-chevron {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .15s, color .15s;
}
.cam-pop .cam-pop-pref-link:hover .cam-pop-pref-chevron {
  color: var(--ink);
  transform: translateX(2px);
}

/* Slightly smaller toggle for density inside .cam-pop-pref */
.cam-pop-pref .theme-switch {
  width: 38px;
  height: 22px;
}
.cam-pop-pref .theme-slider::before {
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
}
.cam-pop-pref .theme-switch input:checked + .theme-slider::before {
  transform: translateX(16px);
}

/* Invite cards — simplified: subtle left stripe + light-mode-friendly bg */
.cam-pop .invite-card {
  position: relative;
  padding: 10px 12px;
  margin: 0 0 8px;
  border: 1px solid var(--stroke);
  border-left-style: solid;
  border-left-width: 3px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}
.cam-pop .invite-card:last-child { margin-bottom: 0; }
.cam-pop .invite-card-team {
  border-left-color: #6366f1;
  background: rgba(99,102,241,0.05);
}
.cam-pop .invite-card-guest {
  border-left-color: #f59e0b;
  background: rgba(245,158,11,0.05);
}
[data-theme="light"] .cam-pop .invite-card-team { background: rgba(99,102,241,0.07); }
[data-theme="light"] .cam-pop .invite-card-guest { background: rgba(245,158,11,0.08); }

.cam-pop .invite-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cam-pop .invite-card-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.cam-pop .invite-card-title svg { color: var(--muted); }
.cam-pop .invite-card-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 8px;
  line-height: 1;
  flex-shrink: 0;
}
.cam-pop .invite-card-team .invite-card-badge { background: #6366f1; color: #fff; }
.cam-pop .invite-card-guest .invite-card-badge { background: #f59e0b; color: #1a1a2e; }
.cam-pop .invite-card .settings-pop-hint { margin-top: 6px; font-size: 10.5px; line-height: 1.4; }

/* Light-mode polish: ensure good contrast on selects, inputs, and the
   accent button. The dark-mode rgba(255,255,255,0.03) backgrounds are
   nearly invisible on a white surface — give them a real tint. */
[data-theme="light"] .cam-pop select {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .cam-pop .cam-pop-btn-primary {
  background: var(--accent);
  color: #fff;
}
[data-theme="light"] .cam-pop-section-title { color: rgba(0,0,0,0.55); }
[data-theme="light"] .cam-pop-pref-label { color: #18191c; }

/* ---- Chat FAB ---- */
.chat-fab{
  position:relative;
  width:48px; height:48px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(26, 27, 30, 0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 30px rgba(0,0,0,0.15);
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .2s, background .2s;
}
.chat-fab:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }
.chat-fab svg{ width:24px; height:24px; }

/* ---- Trash Drop Zone ---- */
/* Sits immediately to the left of the .chat-fab in the bottom navbar.
   Matches the chat FAB's exact box (48×48, 13px radius, 24px icon) so
   the two icons read as a single right-aligned cluster. */
.trash-zone{
  width:48px; height:48px;
  border-radius:13px;
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
  flex-shrink:0;
  opacity:0;
  pointer-events:none;
  transform:scale(1);
  margin-right:6px;
}
.trash-zone svg{ width:28px; height:28px; }
.trash-zone.visible{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}
[data-theme="light"] .trash-zone{
  background:rgba(255,255,255,0.85);
  border:1px solid var(--stroke);
}

/* ---- Fullscreen Exit FAB ---- */
.fs-exit-fab{
  position:fixed;
  top:calc(18px + var(--browser-offset-top));
  right:calc(18px + var(--browser-offset-right));
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:var(--shadow2);
  z-index:31000;
  transition:transform .2s, background .2s, color .2s, opacity .2s;
  opacity:.7;
}
.fs-exit-fab svg{ width:18px; height:18px; }
.fs-exit-fab:hover{
  background:rgba(255,255,255,0.08);
  color:var(--ink);
  opacity:1;
  transform:scale(1.06);
}
.fs-exit-fab:active{ transform:scale(0.94); }

/* ---- Undo / Redo buttons ---- */
.undo-redo-wrap{
  position:fixed; top:calc(18px + var(--browser-offset-top)); right:calc(18px + env(safe-area-inset-right, 0px));
  display:flex; flex-direction:row; align-items:center; gap:8px;
  z-index:24000;
}
/* Both surfaces share the same chrome — rounded square (10px) with a
   solid elevated background, single 1px stroke around the whole pill,
   and a soft drop shadow. Buttons sit edge-to-edge inside (no padding,
   overflow:hidden clips them to the radius). */
.undo-redo,
.zoom-pill,
.temp-room-pill{
  display:inline-flex; align-items:stretch;
  background:var(--bg1);
  border:1px solid var(--stroke);
  border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.12);
  overflow:hidden;
}
.undo-redo-btn,
.zoom-ctrl-btn{
  width:34px; height:34px; border:none; background:transparent;
  color:var(--muted); display:grid; place-items:center;
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.undo-redo-btn svg{ width:16px; height:16px; }
.zoom-ctrl-btn svg{ width:14px; height:14px; }
.undo-redo-btn:not(:disabled):hover{ background:rgba(255,255,255,0.06); color:var(--ink); }
.undo-redo-btn:disabled{ opacity:0.3; cursor:default; }
.zoom-ctrl-btn:hover{ background:rgba(255,255,255,0.06); color:var(--ink); }
.zoom-ctrl-btn:active{ background:rgba(255,255,255,0.1); }
/* The "100%" sits between the two zoom buttons, separated by vertical
   1px rules so the pill reads as three segments. */
.zoom-indicator{
  width:52px;
  display:grid; place-items:center;
  border-left:1px solid var(--stroke);
  border-right:1px solid var(--stroke);
  font-size:12px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.01em;
  color:color-mix(in srgb, var(--muted) 80%, transparent);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:color .15s ease, background .15s ease;
}
.zoom-indicator:hover{ color:var(--ink); background:rgba(255,255,255,0.06); }

/* ---- Minimap ---- */
.minimap{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right, 0px));
  top:50%;
  transform:translateY(-50%);
  z-index:24000;
  background:rgba(26,27,30,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--stroke);
  border-radius:10px;
  box-shadow:var(--shadow2);
  overflow:hidden;
  cursor:crosshair;
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}
.minimap.mm-visible{
  opacity:1;
  pointer-events:auto;
  transition:opacity 0.25s ease;
}
.minimap.mm-hidden{
  opacity:0;
  pointer-events:none;
  transition:opacity 0.6s ease;
}
.minimap canvas{
  display:block;
}

/* ---- Remote Live Cursors ---- */
.remote-cursor{
  position:absolute; left:0; top:0;
  pointer-events:none;
  z-index:9999;
  will-change:transform;
  transition:transform .08s linear;
  overflow:visible;
}
.remote-cursor svg{
  display:block;
  overflow:visible;
}
.remote-cursor-name{
  position:absolute;
  left:16px; top:14px;
  font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:6px;
  color:#fff; white-space:nowrap;
  line-height:1.4;
  pointer-events:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  opacity:1;
  visibility:visible;
}

.chat-badge{
  position:absolute;
  top:-2px; right:-2px;
  min-width:20px; height:20px;
  padding:0 6px;
  border-radius:10px;
  background:#3b82f6;
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
  line-height:20px;
  pointer-events:none;
}
.chat-badge.visible{ display:flex; }

/* ---- Chat Panel ---- */
.chat-panel{
  position:fixed;
  top:0; right:0; bottom:0;
  width:380px;
  max-width:100vw;
  background:rgba(22, 23, 26, 0.94);
  border-left:1px solid var(--stroke);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  z-index:27000;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-panel.open{
  transform:translateX(0);
}

/* ---- Chat tabs ---- */
.chat-tabs{
  display:flex;
  gap:2px;
  flex:1;
}
.chat-tab{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.chat-tab svg{ width:16px; height:16px; }
.chat-tab:hover{ background:rgba(255,255,255,0.06); color:var(--ink); }
.chat-tab.active{ background:rgba(255,255,255,0.08); color:var(--ink); }
.chat-tab.active svg{ color:var(--accent); }
[data-theme="light"] .chat-tab:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .chat-tab.active{ background:rgba(0,0,0,0.07); }

/* Tab content */
.chat-tab-content{
  display:none;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.chat-tab-content.active{
  display:flex;
}

.transcription-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .transcription-toolbar{ border-bottom-color:rgba(0,0,0,0.06); }
.transcription-toolbar-label{
  font-size:11px;
  color:var(--ink-dim);
  letter-spacing:0.02em;
}
.transcription-lang-toggle{
  display:inline-flex;
  background:rgba(255,255,255,0.06);
  border-radius:6px;
  padding:2px;
  gap:2px;
}
[data-theme="light"] .transcription-lang-toggle{ background:rgba(0,0,0,0.06); }
.tr-lang-btn{
  border:none;
  background:transparent;
  color:var(--ink-dim);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.06em;
  padding:3px 9px;
  border-radius:4px;
  cursor:pointer;
  transition:background 120ms ease, color 120ms ease;
}
.tr-lang-btn:hover:not(.active){ color:var(--ink); }
.tr-lang-btn.active{ background:var(--accent); color:#fff; }

.transcription-messages{
  flex:1;
  overflow-y:auto;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.transcription-messages::-webkit-scrollbar{ width:4px; }
.transcription-messages::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.08); border-radius:2px; }

.transcription-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:1;
  color:var(--muted);
  font-size:13px;
}
.transcription-empty svg{ width:28px; height:28px; opacity:0.4; }

.tr-msg{
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.45;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--stroke);
}
.tr-msg-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.tr-msg-avatar{
  width:22px; height:22px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.tr-msg-initial{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.tr-msg-sender{
  font-size:12px;
  font-weight:600;
  color:var(--ink);
}
.tr-msg-lang{
  font-size:11px;
  color:var(--muted);
  margin-left:auto;
}
.tr-msg-time{
  font-size:11px;
  color:var(--muted);
  margin-left:auto;
}
.tr-msg-text{
  color:var(--ink);
  word-break:break-word;
}
.tr-msg.me{ background:rgba(99,102,241,0.1); border-color:rgba(99,102,241,0.15); }
.tr-msg.tr-interim{ opacity:0.5; }
.tr-msg.tr-interim .tr-msg-text{ font-style:italic; }

[data-theme="light"] .tr-msg{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}
[data-theme="light"] .tr-msg.me{
  background:rgba(99,102,241,0.08);
  border-color:rgba(99,102,241,0.12);
}

.chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  padding-top:calc(18px + var(--safe-top));
  padding-right:calc(20px + var(--safe-right));
  border-bottom:1px solid var(--stroke);
  flex-shrink:0;
}
.chat-header-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
}
.chat-header-title svg{ width:18px; height:18px; color:var(--accent); }

.chat-close{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.2s;
}
.chat-close:hover{ background:rgba(255,255,255,0.06); color:var(--ink); }
.chat-close svg{ width:16px; height:16px; }

/* Messages */
.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chat-messages::-webkit-scrollbar{ width:4px; }
.chat-messages::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.08); border-radius:2px; }

.chat-msg{
  max-width:85%;
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  line-height:1.45;
  word-wrap:break-word;
  animation:chatIn .25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes chatIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.chat-msg.me{
  align-self:flex-end;
  background:rgba(59, 130, 246, 0.2);
  border:1px solid rgba(59, 130, 246, 0.25);
  color:var(--ink);
  border-bottom-right-radius:6px;
}
.chat-msg.them{
  align-self:flex-start;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--stroke);
  color:var(--ink);
  border-bottom-left-radius:6px;
}

.chat-msg-header{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:3px;
}
.chat-msg-avatar{
  width:20px; height:20px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.chat-msg-initial{
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
}
.chat-msg-sender{
  font-size:10px;
  font-weight:600;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.chat-msg-time{
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
  text-align:right;
}
/* Inline links inside chat messages (linkifyText output). Subtle underline
   so they read as links without overpowering the message body. Long URLs
   wrap inside the bubble instead of overflowing the chat panel. */
.chat-msg-text a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-all;
}
.chat-msg-text a:hover{ filter:brightness(1.15); }

.chat-empty{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  text-align:center;
  padding:40px;
  line-height:1.5;
}

/* Input bar */
.chat-input-bar{
  display:flex;
  gap:8px;
  padding:14px 16px;
  border-top:1px solid var(--stroke);
  flex-shrink:0;
}
.chat-input{
  flex:1;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  color:var(--ink);
  font-family:var(--sans);
  font-size:13px;
  outline:none;
  transition:border-color .2s;
}
.chat-input::placeholder{ color:var(--muted); }
.chat-input:focus{ border-color:rgba(59, 130, 246, 0.4); }

.chat-send{
  width:42px; height:42px;
  border-radius:12px;
  border:0;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s, transform .15s;
  flex-shrink:0;
}
.chat-send:hover{ background:var(--accent-hover); transform:scale(1.05); }
.chat-send:active{ transform:scale(0.95); }
.chat-send svg{ width:16px; height:16px; }

/* ---- Canvas Layer ---- */
.canvas-layer{
  position:fixed; inset:0;
  z-index:5000;
  pointer-events:none;
  display:none;
  contain:layout style;
}
.canvas-layer.open{ display:block; pointer-events:auto; cursor:grab; }
.canvas-layer.panning{ cursor:grabbing; }

.canvas-inner{
  position:absolute; inset:0;
  will-change:transform;
  transform-origin:0 0;
  /* Force a stable GPU compositing layer so the browser re-rasterises
     children at the current scale instead of re-sampling a cached bitmap
     (which is what made text look soft when zooming out on retina). */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  z-index:2;
  contain:layout style;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.canvas-inner::before{
  content:"";
  position:absolute;
  left:-50000px; top:-50000px;
  width:100000px; height:100000px;
  background-image:radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:20px 20px;
  pointer-events:none;
  z-index:-1;
}
[data-theme="light"] .canvas-inner::before{
  background-image:radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
}

/* ---- Canvas Text Box ---- */
.canvas-box{
  position:absolute;
  min-width:140px;
  min-height:80px;
  background:rgba(50, 52, 58, 0.96);
  border:1px solid var(--stroke);
  border-radius:12px;
  box-shadow:var(--shadow2);
  pointer-events:auto;
  transition:box-shadow .2s, opacity .2s;
  overflow:visible;
  /* 2026-05-12: better glyph crispness when the canvas is zoomed out
     on low-DPI displays (Windows ProArt, external 1080p). Forces the
     rasterizer to use sub-pixel-accurate glyph placement and the
     antialiased stack instead of the default subpixel-AA which gets
     stretched into mush by transform: scale(<1). Zero layout impact. */
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.canvas-box-inner{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  height:100%;
  border-radius:12px;
}
.canvas-box:hover{ box-shadow:0 12px 32px rgba(0,0,0,0.45); }
.canvas-box{ cursor:grab; }
.canvas-box:active:not(.editing){ cursor:grabbing; }
.canvas-box.editing{ cursor:default; }

/* C5 audit P1: visual hint that Echo authored this box. The server
   already tracks created_by; the client tags data-author="echo" on
   any box with that flag (or with an id prefixed echo-). The badge
   sits in the top-left corner so it doesn't fight the delete button. */
.canvas-box[data-author="echo"]::before{
  content: "✨";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
  pointer-events: none;
  z-index: 5;
  opacity: 0.9;
  transition: opacity .15s;
}
.canvas-box[data-author="echo"]:hover::before{ opacity: 1; }

/* Legacy drag handle — hidden (drag is now on entire box) */
.canvas-box-handle{ display:none; }

/* Editable content */
.canvas-box-content{
  position:relative;
  flex:1 1 0;
  min-width:0;
  padding:16px 20px;
  color:var(--ink);
  font-size:20px;
  line-height:1.6;
  outline:none;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  min-height:1.6em;
  overflow-y:hidden;
  overflow-x:hidden;
  border-radius:12px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  caret-color:var(--accent);
}
.canvas-box.editing .canvas-box-content{
  overflow-y:auto;
}
/* Force caret visibility inside edited boxes */
.canvas-box.editing .canvas-box-content,
.canvas-box.editing .canvas-box-title-content,
.canvas-box.editing .gdrive-content{
  -webkit-user-select:text;
  user-select:text;
  caret-color:var(--accent);
  animation:caret-blink 0.6s step-end infinite;
  /* Force compositing layer so browser renders caret correctly inside scaled container */
  will-change:contents;
}
@keyframes caret-blink{
  0%,100%{ caret-color:var(--accent); }
  50%{ caret-color:transparent; }
}
/* Dark mode: force dark text on boxes with custom light backgrounds */
:root .canvas-box.has-custom-bg .canvas-box-content,
:root .canvas-box.has-custom-bg .canvas-box-title-content{
  color:#1a1a1a;
}
[data-theme="light"] .canvas-box.has-custom-bg .canvas-box-content,
[data-theme="light"] .canvas-box.has-custom-bg .canvas-box-title-content{
  color:var(--ink);
}
.canvas-box-content:empty::before{
  content:"Type something...";
  color:var(--muted);
  pointer-events:none;
  position:absolute;
}

/* Overflow fade: mask the content to fade at bottom when overflowing */
.canvas-box.has-overflow:not(.editing) .canvas-box-content{
  -webkit-mask-image:linear-gradient(to bottom, black calc(100% - 32px), transparent 100%);
  mask-image:linear-gradient(to bottom, black calc(100% - 32px), transparent 100%);
}

/* Hermès QA P0-C: hide destructive affordances when the session is a
   guest (joined via signed invite link). The server already rejects
   every destructive socket event for guests, but a visible button that
   silently fails is worse UX than no button. Covers canvas box deletes,
   connector deletes, task deletes, and draw clears. */
body.is-guest .canvas-box-delete,
body.is-guest .canvas-box .canvas-box-delete,
body.is-guest [data-action="delete-task"],
body.is-guest [data-action="delete-taskgroup"],
body.is-guest [data-action="delete-connector"],
body.is-guest [data-action="delete-objective-item"],
body.is-guest .canvas-tools [data-tool="eraser"],
body.is-guest .canvas-tools [data-action="clear-drawings"]{
  display:none !important;
}

/* Delete button — floats OUTSIDE the box at top-right corner */
.canvas-box-delete{
  position:absolute;
  top:-16px; right:-16px;
  width:22px; height:22px;
  border-radius:50%;
  border:none;
  background:rgba(60,63,70,0.7);
  color:rgba(255,255,255,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  /* pointer-events:auto always; visibility:hidden at rest blocks clicks,
     so the handle stays clickable during the fade-out grace period. */
  pointer-events:auto;
  /* Grace delay on fade-OUT so brief mouse excursions near the corner
     don't snap the button away. Appearance stays instant — see hover rule. */
  transition:opacity .15s .12s, visibility .15s .12s, background .15s, color .15s, transform .1s;
  z-index:10;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:0;
  --_cz:var(--canvas-zoom, 1);
  --_inv:calc(1 / var(--_cz));
  /* Grow OUT of the box on zoom-out: anchor at bottom-left (the corner
     closest to box content) so the counter-scale expands toward the
     top-right void instead of eating into the content. */
  transform-origin:bottom left;
  transform:scale(clamp(1, var(--_inv), 3));
}
/* Wider invisible hit area — lets the click register even if the cursor
   is a few px off the 22px visual disc. */
.canvas-box-delete::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
}
.canvas-box-delete svg{ width:12px; height:12px; display:block; }
.canvas-box:hover .canvas-box-delete,
.canvas-box.selected .canvas-box-delete{
  opacity:1; visibility:visible;
  transition-delay:0s;
}
.canvas-box-delete:hover{ background:rgba(239, 68, 68, 0.9); color:#fff; transform:scale(calc(clamp(1, var(--_inv), 3) * 1.12)); }
.canvas-box-delete:active{ transform:scale(calc(clamp(1, var(--_inv), 3) * 0.92)); }
[data-theme="light"] .canvas-box-delete{
  background:rgba(255,255,255,0.88);
  color:rgba(0,0,0,0.45);
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
}
[data-theme="light"] .canvas-box-delete:hover{ background:rgba(239, 68, 68, 0.9); color:#fff; }

/* Link button — floats OUTSIDE the box at top-LEFT corner. Click to enter
   link mode, then click any other box to connect (Smart Anchor auto-picks
   the best side). Indigo accent (#6366f1) matches the brand. */
.canvas-box-link{
  position:absolute;
  top:-16px; left:-16px;
  width:22px; height:22px;
  border-radius:50%;
  border:none;
  background:rgba(60,63,70,0.7);
  color:rgba(255,255,255,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:auto;
  transition:opacity .15s .12s, visibility .15s .12s, background .15s, color .15s, transform .1s;
  z-index:10;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:0;
  --_cz:var(--canvas-zoom, 1);
  --_inv:calc(1 / var(--_cz));
  /* Mirror of .canvas-box-delete: anchor at bottom-right so the scale
     grows toward the top-left void on zoom-out. */
  transform-origin:bottom right;
  transform:scale(clamp(1, var(--_inv), 3));
}
/* Wider invisible hit area — matches the Delete button pattern so both
   corners feel equally forgiving. */
.canvas-box-link::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
}
.canvas-box-link svg{ width:12px; height:12px; display:block; }
.canvas-box:hover .canvas-box-link,
.canvas-box.selected .canvas-box-link,
.canvas-box.link-source .canvas-box-link{
  opacity:1; visibility:visible;
  transition-delay:0s;
}
.canvas-box-link:hover{ background:rgba(99, 102, 241, 0.9); color:#fff; transform:scale(calc(clamp(1, var(--_inv), 3) * 1.12)); }
.canvas-box-link:active{ transform:scale(calc(clamp(1, var(--_inv), 3) * 0.92)); }
[data-theme="light"] .canvas-box-link{
  background:rgba(255,255,255,0.88);
  color:rgba(0,0,0,0.55);
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
}
[data-theme="light"] .canvas-box-link:hover{ background:rgba(99, 102, 241, 0.9); color:#fff; }

/* Source box highlight while link mode is active — indigo ring */
.canvas-box.link-source{
  outline:2px solid #6366f1;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(99,102,241,0.18);
}
.canvas-box.link-source .canvas-box-link{
  background:rgba(99, 102, 241, 0.95);
  color:#fff;
}

/* Target-box hover during link mode — indigo dashed outline */
.canvas-inner.link-mode .canvas-box:not(.link-source):hover{
  outline:2px dashed #6366f1;
  outline-offset:3px;
}

/* Crosshair cursor everywhere inside canvas when linking */
.canvas-inner.link-mode,
.canvas-inner.link-mode .canvas-box,
.canvas-inner.link-mode .canvas-box *{
  cursor:crosshair !important;
}

/* Hint banner shown while link mode is active */
.link-mode-hint{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(99,102,241,0.95);
  color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  z-index:100000;
  box-shadow:0 4px 16px rgba(99,102,241,0.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
  animation:linkHintIn .18s ease-out;
}
@keyframes linkHintIn{
  from{ opacity:0; transform:translate(-50%, -8px); }
  to  { opacity:1; transform:translate(-50%, 0); }
}

/* Hide link button on box types that don't support connectors */
.canvas-box[data-box-type="recording"] .canvas-box-link,
.canvas-box[data-box-type="screen"] .canvas-box-link,
.canvas-box-browser .canvas-box-link,
.canvas-box-betabrowser .canvas-box-link{ display:none !important; }

/* Stroke delete button */
.stroke-delete-btn{
  position:absolute;
  width:22px; height:22px;
  border-radius:6px;
  border:none;
  background:rgba(239, 68, 68, 0.45);
  color:rgba(255,255,255,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  cursor:pointer;
  z-index:20;
  pointer-events:auto;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
  transition:background .15s, color .15s, transform .15s;
  padding:0;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  /* Counter-scale like canvas-box-delete */
  --_cz:var(--canvas-zoom, 1);
  --_inv:calc(1 / var(--_cz));
  transform:scale(clamp(1, var(--_inv), 3));
}
.stroke-delete-btn svg{ width:12px; height:12px; display:block; }
.stroke-delete-btn:hover{ background:rgba(239, 68, 68, 0.9); color:#fff; transform:scale(calc(clamp(1, var(--_inv), 3) * 1.1)); }

/* Resize handle — corner triangle + grip lines, counter-scaled on zoom */
.canvas-box-resize{
  position:absolute;
  bottom:-3px; right:-3px;
  width:22px;
  height:22px;
  cursor:nwse-resize;
  opacity:0;
  visibility:hidden;
  pointer-events:auto;
  /* Same grace-delay pattern as .canvas-box-delete so the handle stays
     reachable when the cursor briefly strays off the box corner. */
  transition:opacity .15s .12s, visibility .15s .12s, transform .1s;
  z-index:10;
  --_cz:var(--canvas-zoom, 1);
  --_inv:calc(1 / var(--_cz));
  transform:scale(clamp(1, var(--_inv), 3));
}
/* Wider invisible hit area — makes resize easy to grab without aiming. */
.canvas-box-resize::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
}
.canvas-box.editing .canvas-box-resize,
.canvas-box:hover .canvas-box-resize,
.canvas-box.selected .canvas-box-resize,
.canvas-box.resizing .canvas-box-resize{
  opacity:1; visibility:visible;
  transition-delay:0s;
}
/* Figma/Canva-style corner handle — indigo-ringed circle centered on the box corner */
.canvas-box-resize::after{
  content:"";
  position:absolute;
  bottom:-4px; right:-4px;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  border:2px solid #6366f1;
  box-sizing:border-box;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.canvas-box-resize:hover::after{
  background:#6366f1;
  transform:scale(1.2);
  box-shadow:0 0 0 2px rgba(99, 102, 241, 0.25), 0 3px 10px rgba(99, 102, 241, 0.4);
}
.canvas-box.resizing .canvas-box-resize::after{
  background:#6366f1;
  transform:scale(1.15);
  box-shadow:0 0 0 2px rgba(99, 102, 241, 0.3), 0 3px 10px rgba(99, 102, 241, 0.5);
}

/* YouTube box — keep handle inside to avoid overlap with YT controls */
.canvas-box-youtube .canvas-box-resize{
  bottom:0; right:0;
}

/* Mindmap collapse badge */
.mindmap-collapse-badge{
  position:absolute;
  /* position set inline per side (bottom/top/left/right) */
  min-width:30px; height:30px;
  border-radius:15px;
  border:2px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  display:flex;
  align-items:center; justify-content:center; gap:4px;
  cursor:pointer;
  font-size:11px; font-weight:600;
  padding:0 8px;
  transition:background .15s, color .15s, box-shadow .15s, border-color .15s;
  z-index:2;
  white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
}
.mindmap-collapse-badge svg{ width:14px; height:14px; flex-shrink:0; }
.mindmap-collapse-badge.collapsed{
  background:var(--primary, #6366f1);
  color:#fff;
  border-color:var(--primary, #6366f1);
  box-shadow:0 2px 8px rgba(99,102,241,0.35);
}
.mindmap-collapse-badge:hover{
  background:var(--primary, #6366f1);
  color:#fff;
  border-color:var(--primary, #6366f1);
  box-shadow:0 2px 10px rgba(99,102,241,0.4);
}
[data-theme="light"] .mindmap-collapse-badge{
  background:#fff;
  border-color:#d1d5db;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
[data-theme="light"] .mindmap-collapse-badge.collapsed{
  background:var(--primary, #6366f1);
  color:#fff;
  border-color:var(--primary, #6366f1);
}

/* Interaction states */
.canvas-box.dragging{
  opacity:0.85;
  box-shadow:0 20px 48px rgba(0,0,0,0.55);
  cursor:grabbing;
}
.canvas-box.resizing{
  opacity:0.9;
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}

/* Fullscreen canvas box */
.canvas-box.fullscreen{
  position:fixed !important;
  left:20px !important; top:20px !important;
  width:calc(100vw - 40px) !important;
  height:calc(100vh - 40px) !important;
  z-index:30000 !important;
  background:var(--bg1);
  border-radius:12px;
}
.canvas-box.fullscreen .canvas-box-delete,
.canvas-box.fullscreen .canvas-box-resize{ display:none; }
.canvas-box.fullscreen .screen-quality-bar{ display:flex; }
.canvas-box.fullscreen{ cursor:default; }

/* Selection indicators */
.canvas-box-selectors{
  position:absolute;
  bottom:calc(100% + 2px);
  left:8px;
  display:flex;
  gap:2px;
  pointer-events:none;
}
.canvas-box-selector-label{
  padding:2px 8px;
  border-radius:4px 4px 0 0;
  font-size:10px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  line-height:16px;
}

/* Local user name tag — on .canvas-box, above the box */
.local-edit-tag{
  display:none; position:absolute; top:-20px; right:0;
  padding:1px 8px; border-radius:4px;
  font-size:9px; font-weight:600; line-height:14px;
  color:#fff; white-space:nowrap; pointer-events:none; z-index:10;
}

/* ---- Right-Click Context Menu for Canvas Text Formatting ---- */
.canvas-ctx-menu{
  display:none;
  position:fixed;
  z-index:99999;
  min-width:180px;
  padding:6px 0;
  background:rgba(26,27,30,0.97);
  border:1px solid var(--stroke);
  border-radius:12px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  font-family:var(--sans);
}
.canvas-ctx-menu.open{ display:block; }

/* ---- Emoji picker (anchored to the Emoji button in the ctx menu) ---- */
.ctx-emoji-picker{
  display:none;
  position:fixed;
  z-index:100000;
  width:300px;
  max-height:340px;
  background:rgba(26,27,30,0.98);
  border:1px solid var(--stroke);
  border-radius:12px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  overflow:hidden;
  font-family:var(--sans);
}
.ctx-emoji-picker.open{ display:flex; flex-direction:column; }
.ctx-emoji-tabs{
  display:flex;
  gap:2px;
  padding:6px;
  border-bottom:1px solid var(--stroke);
  flex-shrink:0;
}
.ctx-emoji-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--ink);
  font-size:18px;
  line-height:1;
  padding:6px 0;
  border-radius:6px;
  cursor:pointer;
  opacity:0.6;
  transition:opacity .15s, background .15s;
}
.ctx-emoji-tab:hover{ background:rgba(255,255,255,0.06); opacity:1; }
.ctx-emoji-tab.active{ background:rgba(255,255,255,0.10); opacity:1; }
.ctx-emoji-grid{
  flex:1;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:2px;
  padding:6px;
}
.ctx-emoji-item{
  border:none;
  background:transparent;
  font-size:20px;
  line-height:1;
  padding:6px 0;
  border-radius:6px;
  cursor:pointer;
  transition:background .12s, transform .12s;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.ctx-emoji-item:hover{ background:rgba(255,255,255,0.10); transform:scale(1.15); }
[data-theme="light"] .ctx-emoji-picker{
  background:rgba(255,255,255,0.98);
}
[data-theme="light"] .ctx-emoji-tab:hover,
[data-theme="light"] .ctx-emoji-item:hover{ background:rgba(0,0,0,0.06); }
[data-theme="light"] .ctx-emoji-tab.active{ background:rgba(0,0,0,0.08); }
.ctx-btn{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:7px 14px;
  border:none;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  text-align:left;
  transition:background .12s;
  line-height:1.3;
}
.ctx-btn:hover{ background:rgba(255,255,255,0.07); }
.ctx-btn.active{ color:var(--accent); }
.ctx-btn.active::after{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:var(--accent);
  margin-left:auto;
  flex-shrink:0;
}
.ctx-shortcut{
  margin-left:auto;
  font-size:11px;
  color:var(--muted);
  font-weight:400;
}
.ctx-btn.active .ctx-shortcut{ display:none; }
.ctx-heading{ font-weight:600; }
.ctx-sep{
  height:1px;
  margin:4px 10px;
  background:var(--stroke);
}
/* Alignment group */
.ctx-align-group{
  display:flex; gap:2px; padding:2px 8px;
}
.ctx-align-btn{
  flex:1; justify-content:center; padding:4px 0 !important;
  min-width:0 !important; border-radius:4px !important;
}
.ctx-align-btn.active{
  background:var(--accent); color:#fff;
}
/* Font size sub-menu */
.ctx-fs-wrapper{ position:relative; }
.ctx-fs-toggle{ justify-content:space-between; }
.ctx-fs-val{
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  font-size:12px;
}
.ctx-fs-dropdown{
  display:none;
  position:absolute;
  left:100%;
  top:0;
  margin-left:4px;
  width:80px;
  max-height:260px;
  overflow-y:auto;
  background:rgba(26,27,30,0.97);
  border:1px solid var(--stroke);
  border-radius:10px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow2);
  padding:4px 0;
}
.ctx-fs-dropdown.open{ display:block; }
.ctx-fs-dropdown::-webkit-scrollbar{ width:5px; }
.ctx-fs-dropdown::-webkit-scrollbar-track{ background:transparent; }
.ctx-fs-dropdown::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:3px; }
.ctx-fs-item{
  padding:5px 12px;
  font-size:12px;
  color:var(--ink);
  cursor:pointer;
  text-align:center;
  transition:background .12s;
}
.ctx-fs-item:hover{ background:rgba(255,255,255,0.08); }
.ctx-fs-item.active{ background:rgba(99,102,241,0.18); color:var(--accent); font-weight:600; }

/* Text color & highlight sub-menus */
.ctx-clr-wrapper, .ctx-hl-wrapper{ position:relative; }
.ctx-clr-toggle, .ctx-hl-toggle{ justify-content:space-between; }
.ctx-clr-dot, .ctx-hl-dot{
  display:inline-block;
  width:14px; height:14px;
  border-radius:50%;
  border:1.5px solid var(--stroke);
  flex-shrink:0;
  vertical-align:middle;
}
.ctx-clr-dot{ background:var(--ink); }
.ctx-hl-dot{ background:transparent; }
.ctx-clr-dropdown, .ctx-hl-dropdown{
  display:none;
  position:absolute;
  left:100%;
  top:0;
  margin-left:4px;
  background:rgba(26,27,30,0.97);
  border:1px solid var(--stroke);
  border-radius:10px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow2);
  padding:8px;
}
.ctx-clr-dropdown.open, .ctx-hl-dropdown.open{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ctx-clr-item, .ctx-hl-item{
  width:26px; height:26px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .12s, border-color .12s;
  display:flex; align-items:center; justify-content:center;
}
.ctx-clr-item:hover, .ctx-hl-item:hover{ transform:scale(1.18); border-color:var(--accent); }
.ctx-clr-reset, .ctx-hl-reset{
  background:var(--bg2);
  color:var(--muted);
}
.ctx-clr-item[data-clr="#ffffff"]{ border-color:rgba(255,255,255,0.2); }
.ctx-clr-item[data-clr="#171717"]{ border-color:rgba(255,255,255,0.15); }

/* ---- Box context menu (copy/cut/paste/delete + colors) ---- */
.box-ctx-menu{
  display:none;
  position:fixed;
  z-index:99999;
  padding:6px;
  min-width:200px;
  background:rgba(26,27,30,0.97);
  border:1px solid var(--stroke);
  border-radius:12px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  font-family:var(--sans);
}
.box-ctx-menu.open{ display:block; }

.bctx-btn{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:7px 10px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
  transition:background .12s;
}
.bctx-btn:hover{ background:rgba(255,255,255,0.07); }
.bctx-btn svg{ width:16px; height:16px; flex-shrink:0; }
.bctx-btn .bctx-shortcut{
  margin-left:auto;
  font-size:11px;
  color:var(--muted);
  opacity:.7;
}
.bctx-btn.danger{ color:var(--danger); }
.bctx-btn.danger:hover{ background:rgba(239,68,68,0.12); }

.bctx-sep{
  height:1px;
  margin:4px 6px;
  background:var(--stroke);
}

.bctx-label{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  padding:6px 10px 4px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.box-bg-swatches{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  padding:2px 6px 6px;
}

.box-bg-swatch{
  width:28px;
  height:28px;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform 0.12s, border-color 0.12s;
  padding:0;
}
.box-bg-swatch:hover{
  transform:scale(1.15);
}
.box-bg-swatch.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(99,102,241,0.3);
}

.box-bg-swatch-default{
  background:rgba(255,255,255,0.08);
  position:relative;
}
.box-bg-swatch-default::after{
  content:'';
  position:absolute;
  top:50%; left:15%;
  width:70%; height:2px;
  background:var(--muted);
  border-radius:1px;
  transform:rotate(-45deg);
}

[data-theme="light"] .box-ctx-menu{
  background:rgba(255,255,255,0.97);
  box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
}
[data-theme="light"] .bctx-btn:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .box-bg-swatch-default{
  background:rgba(0,0,0,0.06);
}
[data-theme="light"] .box-bg-swatch-default::after{
  background:rgba(0,0,0,0.3);
}

/* Heading hierarchy inside content area */
.canvas-box-content h1,
.canvas-box-content h2,
.canvas-box-content h3{
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}
.canvas-box-content h1{
  font-size:26px;
  font-weight:800;
  margin:0 0 4px;
  line-height:1.25;
  letter-spacing:-0.02em;
}
.canvas-box-content h2{
  font-size:20px;
  font-weight:700;
  margin:0 0 3px;
  line-height:1.3;
}
.canvas-box-content h3{
  font-size:16px;
  font-weight:600;
  margin:0 0 2px;
  line-height:1.35;
  opacity:0.9;
}

/* ---- Inline checklist items ---- */
.canvas-box-content .cb-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:1px 0;
  cursor:text;
  white-space:normal;
  word-break:break-word;
  min-height:1.5em;
}
.canvas-box-content .cb-item::before{
  content:'';
  flex-shrink:0;
  width:15px;
  height:15px;
  margin-top:0.25em;
  border:1.5px solid var(--muted);
  border-radius:4px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
  background:transparent;
}
.canvas-box-content .cb-item .cb-text{
  flex:1;
  min-width:0;
  outline:none;
  line-height:1.5;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.canvas-box-content .cb-item:hover::before{
  border-color:var(--accent);
}
.canvas-box-content .cb-item[data-checked="true"]::before{
  background:var(--accent);
  border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px 11px;
  background-position:center;
  background-repeat:no-repeat;
}
.canvas-box-content .cb-item[data-checked="true"]{
  opacity:0.55;
}
.canvas-box-content .cb-item[data-checked="true"] .cb-text{
  color:var(--muted);
}
/* Override inline colors on child elements (from text formatting like
   foreColor, highlight, etc.) so ALL checked items look consistent
   regardless of their original styling. Without this, a <font color="...">
   or <span style="color:..."> inside .cb-text keeps its explicit color
   while siblings without inline color get var(--muted), causing a visual
   mismatch between checked items that should look the same. */
.canvas-box-content .cb-item[data-checked="true"] .cb-text *{
  color:inherit !important;
}

/* ---- Image Box ---- */
[data-box-type="image"].canvas-box{
  background:transparent;
  border:none;
  box-shadow:none;
}
[data-box-type="image"].canvas-box:hover{
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
}
.canvas-box-image{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
}
.canvas-box-image img{
  width:100%;
  height:100%;
  /* contain (was: fill) — fill stretches the image when the box is resized
     off the original aspect ratio, producing visibly distorted photos.
     contain preserves aspect (letterboxes if needed) and matches what
     every other canvas tool (PDF, recording) does. Bug #58. */
  object-fit:contain;
  /* Hint browsers to keep high-quality scaling when zoom or resize lands
     on non-1:1 device pixels. Safari in particular drops to nearest-neighbor
     under some zoom factors without an explicit hint. */
  image-rendering:auto;
  image-rendering:-webkit-optimize-contrast;
  -webkit-user-drag:none;
  pointer-events:none;
}
.canvas-box-pdf-iframe{
  width:100%;
  height:100%;
  border:none;
  border-radius:12px;
  background:#fff;
}

/* ---- Markdown Box ---- */
.canvas-box[data-box-type="markdown"] .canvas-box-inner{
  display:flex;
  flex-direction:column;
  height:100%;
}
.md-box-header{
  display:flex;
  align-items:center;
  padding:6px 10px;
  border-bottom:1px solid var(--stroke);
  flex-shrink:0;
}
.md-box-tag{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:5px;
}
.md-box-tag svg{ width:14px; height:14px; }

.canvas-box[data-box-type="markdown"] .md-preview{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:12px 14px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink);
  word-break:break-word;
}
.canvas-box[data-box-type="markdown"] .md-preview h1{ font-size:1.6em; margin:0.4em 0 0.3em; font-weight:700; }
.canvas-box[data-box-type="markdown"] .md-preview h2{ font-size:1.35em; margin:0.4em 0 0.3em; font-weight:600; }
.canvas-box[data-box-type="markdown"] .md-preview h3{ font-size:1.15em; margin:0.3em 0 0.2em; font-weight:600; }
.canvas-box[data-box-type="markdown"] .md-preview p{ margin:0.4em 0; }
.canvas-box[data-box-type="markdown"] .md-preview ul,
.canvas-box[data-box-type="markdown"] .md-preview ol{ padding-left:1.4em; margin:0.4em 0; }
.canvas-box[data-box-type="markdown"] .md-preview li{ margin:0.15em 0; }
.canvas-box[data-box-type="markdown"] .md-preview code{
  background:rgba(255,255,255,0.08);
  padding:2px 5px;
  border-radius:4px;
  font-family:'Fira Code', monospace;
  font-size:0.88em;
}
[data-theme="light"] .canvas-box[data-box-type="markdown"] .md-preview code{
  background:rgba(0,0,0,0.06);
}
.canvas-box[data-box-type="markdown"] .md-preview pre{
  background:rgba(0,0,0,0.3);
  padding:10px 12px;
  border-radius:8px;
  overflow-x:auto;
  margin:0.5em 0;
}
[data-theme="light"] .canvas-box[data-box-type="markdown"] .md-preview pre{
  background:rgba(0,0,0,0.05);
}
.canvas-box[data-box-type="markdown"] .md-preview pre code{
  background:none;
  padding:0;
}
.canvas-box[data-box-type="markdown"] .md-preview blockquote{
  border-left:3px solid var(--accent);
  padding:4px 12px;
  margin:0.5em 0;
  color:var(--muted);
}
.canvas-box[data-box-type="markdown"] .md-preview a{
  color:var(--accent);
  text-decoration:underline;
}
.canvas-box[data-box-type="markdown"] .md-preview hr{
  border:none;
  border-top:1px solid var(--stroke);
  margin:0.8em 0;
}
.canvas-box[data-box-type="markdown"] .md-preview table{
  border-collapse:collapse;
  width:100%;
  margin:0.5em 0;
  font-size:0.92em;
}
.canvas-box[data-box-type="markdown"] .md-preview th,
.canvas-box[data-box-type="markdown"] .md-preview td{
  border:1px solid var(--stroke);
  padding:5px 8px;
  text-align:left;
}
.canvas-box[data-box-type="markdown"] .md-preview th{
  background:rgba(255,255,255,0.05);
  font-weight:600;
}
[data-theme="light"] .canvas-box[data-box-type="markdown"] .md-preview th{
  background:rgba(0,0,0,0.04);
}
.canvas-box[data-box-type="markdown"] .md-preview img{
  max-width:100%;
  border-radius:6px;
}

.md-editor{
  flex:1;
  min-height:0;
  width:100%;
  border:none;
  outline:none;
  resize:none;
  padding:12px 14px;
  font-family:'Fira Code', monospace;
  font-size:13px;
  line-height:1.6;
  color:var(--ink);
  background:transparent;
  tab-size:2;
  box-sizing:border-box;
}
.md-editor::placeholder{ color:var(--muted); }

/* ---- Screen-Share Block ---- */
/* Hide generic delete button — screen box uses its own close btn in titlebar */
.canvas-box[data-box-type="screen"] .canvas-box-delete{ display:none !important; }
.canvas-box[data-box-type="screen"]{ cursor:grab; }
.canvas-box[data-box-type="screen"]:active:not(.editing){ cursor:grabbing; }

/* Screen titlebar — solid bar, dark on dark mode, light accent to show "live" */
.screen-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 12px;
  background:#1a1a1e;
  border-radius:12px 12px 0 0;
  flex-shrink:0;
  user-select:none;
  cursor:grab;
  gap:10px;
  border-bottom:2px solid #ef4444;
}
.screen-titlebar:active{ cursor:grabbing; }
[data-theme="light"] .screen-titlebar{
  background:#111114;
}
.screen-titlebar-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.screen-titlebar-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.screen-live-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#ef4444;
  flex-shrink:0;
  animation:screen-live-pulse 2s ease-in-out infinite;
}
@keyframes screen-live-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.4; }
}
.screen-box-label{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.9);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Titlebar buttons */
.screen-close-btn,
.screen-titlebar .screen-fs-ctrl,
.screen-titlebar .screen-vol-btn{
  width:28px; height:28px;
  border:none;
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.8);
  border-radius:6px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s, color .15s, transform .1s;
  padding:0;
  flex-shrink:0;
}
.screen-close-btn svg,
.screen-titlebar .screen-fs-ctrl svg,
.screen-titlebar .screen-vol-btn svg{ width:15px; height:15px; }
.screen-close-btn:hover{ background:rgba(239,68,68,0.85); color:#fff; }
.screen-titlebar .screen-fs-ctrl:hover,
.screen-titlebar .screen-vol-btn:hover{ background:rgba(0,0,0,0.65); color:#fff; }
.screen-close-btn:active,
.screen-titlebar .screen-fs-ctrl:active,
.screen-titlebar .screen-vol-btn:active{ transform:scale(0.9); }

.canvas-box[data-box-type="screen"] .canvas-box-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  position:relative;
}
.canvas-box-screen{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:0 0 12px 12px;
  overflow:hidden;
  position:relative;
  min-height:0;
}
.canvas-box-screen video{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0 0 12px 12px;
  background:#000;
}

.screen-share-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px;
  color:var(--muted);
  text-align:center;
  width:100%;
  height:100%;
}
.screen-share-placeholder svg{ width:32px; height:32px; opacity:0.7; }
.screen-share-placeholder span{ font-size:12px; }

.screen-share-btn{
  padding:8px 18px;
  border-radius:6px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, transform .15s;
}
.screen-share-btn:hover{ background:#4f46e5; transform:scale(1.04); }
.screen-share-btn:active{ transform:scale(0.96); }

/* Volume overlay removed — volume control is in titlebar only */
.screen-share-stop{
  padding:6px 16px;
  border-radius:6px;
  border:none;
  background:#ef4444;
  color:#fff;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, transform .15s;
}
.screen-share-stop:hover{ background:#dc2626; transform:scale(1.04); }
.screen-share-stop:active{ transform:scale(0.96); }

/* Fullscreen button in screen share controls bar */
.screen-fs-ctrl{
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.12);
  color:#fff;
  border-radius:6px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s, transform .15s;
  padding:0;
}
.screen-fs-ctrl svg{ width:18px; height:18px; }
.screen-fs-ctrl:hover{ background:rgba(255,255,255,0.22); transform:scale(1.06); }
.screen-fs-ctrl:active{ transform:scale(0.94); }

/* Volume controls in screen share box */
.screen-vol-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  margin-right:auto;
}
.screen-vol-btn{
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.12);
  color:#fff;
  border-radius:6px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s;
  padding:0;
  flex-shrink:0;
}
.screen-vol-btn svg{ width:16px; height:16px; }
.screen-vol-btn:hover{ background:rgba(255,255,255,0.22); }
.screen-vol-slider{
  -webkit-appearance:none;
  appearance:none;
  width:80px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.25);
  outline:none;
  cursor:pointer;
}
.screen-vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.screen-vol-slider::-moz-range-thumb{
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  border:none;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

/* ---- Screen quality bar ---- */
.screen-quality-bar{
  position:absolute;
  bottom:0; left:0; right:0;
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 18px;
  background:linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.4) 70%, transparent);
  z-index:10;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.screen-quality-bar.sqb-visible{
  opacity:1;
  pointer-events:auto;
}
.sqb-label{
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(255,255,255,0.5);
  user-select:none;
}
.sqb-group{
  display:flex;
  gap:4px;
}
.sqb-btn{
  padding:5px 12px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.85);
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
  user-select:none;
}
.sqb-btn:hover{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.25);
}
.sqb-btn:active{ transform:scale(0.95); }
.sqb-btn.sqb-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.sqb-btn.sqb-active:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
.sqb-sep{
  width:1px;
  height:20px;
  background:rgba(255,255,255,0.15);
  flex-shrink:0;
}
.sqb-exit{
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s, transform .12s;
  padding:0;
}
.sqb-exit svg{ width:16px; height:16px; }
.sqb-exit:hover{ background:rgba(255,255,255,0.2); }
.sqb-exit:active{ transform:scale(0.92); }

/* ---- Real fullscreen (Fullscreen API) ---- */
.canvas-box:fullscreen{
  width:100vw !important;
  height:100vh !important;
  border-radius:0;
  background:#000;
}
.canvas-box:fullscreen .canvas-box-inner{
  border-radius:0;
}
.canvas-box:fullscreen .canvas-box-screen video{
  border-radius:0;
  object-fit:contain;
}
.canvas-box:fullscreen .canvas-box-delete,
.canvas-box:fullscreen .canvas-box-resize{ display:none; }
.canvas-box:fullscreen .screen-quality-bar{
  border-radius:0;
}
.canvas-box::backdrop{
  background:#000;
}

/* ---- Title Box (ghost) ---- */
.canvas-box.canvas-box-title{
  background:transparent;
  border:1px solid transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  min-width:80px;
  min-height:30px;
  border-radius:8px;
}
.canvas-box.canvas-box-title:hover{
  border-color:var(--stroke);
  box-shadow:none;
}
.canvas-box.canvas-box-title .canvas-box-inner{ border-radius:8px; }
/* Title controls: position further out to avoid overlap on small titles */
.canvas-box.canvas-box-title .canvas-box-delete{
  opacity:0; visibility:hidden; pointer-events:none;
  top:-14px; right:-14px;
}
.canvas-box.canvas-box-title:hover .canvas-box-delete{ opacity:1; visibility:visible; pointer-events:auto; }
.canvas-box.canvas-box-title .canvas-box-resize{
  opacity:0;
  bottom:-10px; right:-10px;
}
.canvas-box.canvas-box-title:hover .canvas-box-resize,
.canvas-box.canvas-box-title.selected .canvas-box-resize,
.canvas-box.canvas-box-title.resizing .canvas-box-resize{ opacity:1; }

.canvas-box-title-content{
  position:relative;
  padding:4px 10px;
  color:var(--ink);
  line-height:1.3;
  outline:none;
  word-wrap:break-word;
  overflow-wrap:break-word;
  border-radius:8px;
  min-height:1.3em;
  caret-color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex:1 1 auto;
  width:100%;
  box-sizing:border-box;
}
.canvas-box-title-content:empty::before{
  content:"Title...";
  color:var(--muted);
  pointer-events:none;
  opacity:0.5;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

/* ---- Calendar Box ---- */
.canvas-box.canvas-box-calendar{
  min-width:300px;
  min-height:280px;
}
.canvas-box-calendar-content{
  display:flex;
  flex-direction:column;
  padding:10px;
  overflow:hidden;
  height:100%;
  box-sizing:border-box;
}
.cal-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:8px;
  flex-shrink:0;
}
.cal-month-label{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  user-select:none;
}
.cal-nav{
  display:none;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:none;
  background:transparent;
  color:var(--muted);
  border-radius:6px;
  cursor:pointer;
  padding:0;
  transition:background 0.12s, color 0.12s;
}
.cal-nav:hover{
  background:rgba(255,255,255,0.08);
  color:var(--ink);
}
.cal-nav svg{ width:14px; height:14px; }
.canvas-box.canvas-box-calendar.editing .cal-nav{ display:flex; }

.cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:1px;
  flex:1;
  min-height:0;
}
.cal-day-header{
  font-size:10px;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  padding:2px 0 4px;
  user-select:none;
  font-weight:600;
}
.cal-cell{
  border-radius:6px;
  display:flex;
  flex-direction:column;
  padding:2px 3px;
  min-height:0;
  overflow:hidden;
  transition:background 0.1s;
}
.cal-cell:hover{
  background:rgba(255,255,255,0.04);
}
.cal-day-num{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  line-height:1;
  margin-bottom:1px;
  user-select:none;
  position:relative;
}
.cal-today{
  background:rgba(99,102,241,0.1);
}
.cal-today .cal-day-num{
  color:var(--accent);
}
.cal-has-note .cal-day-num::after{
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  margin-left:3px;
  vertical-align:middle;
}
.cal-note{
  font-size:9px;
  color:var(--ink);
  outline:none;
  overflow:hidden;
  flex:1;
  min-height:0;
  line-height:1.3;
  word-break:break-word;
}
.cal-note[contenteditable="true"]:focus{
  background:rgba(99,102,241,0.08);
  border-radius:3px;
}
.canvas-box.canvas-box-calendar.editing{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(99,102,241,0.25), var(--shadow2);
}

/* Calendar light theme */
[data-theme="light"] .cal-nav:hover{
  background:rgba(0,0,0,0.06);
}
[data-theme="light"] .cal-cell:hover{
  background:rgba(0,0,0,0.04);
}
[data-theme="light"] .cal-today{
  background:rgba(99,102,241,0.08);
}
[data-theme="light"] .cal-note[contenteditable="true"]:focus{
  background:rgba(99,102,241,0.06);
}
[data-theme="light"] .canvas-box.canvas-box-calendar.editing{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(99,102,241,0.18), var(--shadow2);
}

/* ---- Browser Box ---- */
.canvas-box.canvas-box-browser{
  min-width:800px;
  min-height:500px;
}
/* No free resize for browser boxes — desktop-only format */
.canvas-box-browser .canvas-box-resize{ display:none !important; }
.canvas-box-browser .canvas-box-delete{ display:none !important; }
.canvas-box-browser .canvas-box-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
/* Title bar — full-width drag zone, like a real browser window */
.browser-titlebar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.04);
  flex-shrink:0;
  user-select:none;
  cursor:grab;
}
.browser-titlebar:active{ cursor:grabbing; }
.browser-titlebar-label{
  flex:1;
  font-size:11px;
  font-weight:500;
  color:var(--muted);
  text-align:center;
  pointer-events:none;
  letter-spacing:0.3px;
}
/* macOS-style traffic lights: close (red), minimize (yellow), fullscreen (green) */
.browser-traffic-lights{
  display:flex;
  gap:7px;
  flex-shrink:0;
  align-items:center;
}
.browser-close-btn,
.browser-fs-btn{
  /* 14px visible dot inside a 28px hit area for easy clicking */
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  padding:0;
  cursor:pointer;
  position:relative;
  background:transparent;
  transition:transform 0.1s;
  flex-shrink:0;
  z-index:2;
}
.browser-close-btn:active,
.browser-fs-btn:active{ transform:scale(0.85); }
/* Visible dot (14px centered via ::before) */
.browser-close-btn::before,
.browser-fs-btn::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:14px; height:14px;
  border-radius:50%;
  transition:filter 0.15s;
}
.browser-close-btn::before{ background:#ff5f57; }
.browser-fs-btn::before{ background:#28c840; }
.browser-close-btn:hover::before{ filter:brightness(0.8); }
.browser-fs-btn:hover::before{ filter:brightness(0.8); }
.browser-dot-yellow{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#febc2e;
  flex-shrink:0;
}
/* Show × and ⤢ icons on hover */
.browser-close-btn span,
.browser-fs-btn span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  color:rgba(0,0,0,0.7);
  opacity:0;
  transition:opacity 0.12s;
  line-height:1;
  z-index:3;
}
.browser-close-btn span::after{ content:"✕"; }
.browser-fs-btn span::after{ content:"⤢"; font-size:11px; }
.browser-traffic-lights:hover .browser-close-btn span,
.browser-traffic-lights:hover .browser-fs-btn span{ opacity:1; }

/* URL bar — below the titlebar */
.browser-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid var(--stroke);
  flex-shrink:0;
  user-select:none;
}
/* Status indicator next to traffic lights */
.browser-status{
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
  text-transform:lowercase;
  flex-shrink:0;
  margin-right:4px;
}

.browser-url-input{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--stroke);
  border-radius:6px;
  padding:5px 10px;
  color:var(--ink);
  font-size:12px;
  font-family:var(--sans);
  outline:none;
  transition:border-color 0.15s, background 0.15s;
}
.browser-url-input:focus{
  border-color:var(--accent);
  background:rgba(255,255,255,0.1);
}
.browser-url-input[readonly]{
  cursor:default;
  opacity:0.7;
}
.browser-go-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:none;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.15s;
  padding:0;
}
.browser-go-btn:hover{
  background:#818cf8;
}
.browser-go-btn svg{ width:14px; height:14px; }
.browser-viewport{
  flex:1;
  overflow:hidden;
  border-radius:0 0 12px 12px;
  position:relative;
  min-height:0;
}
.browser-iframe{
  width:100%;
  height:100%;
  border:none;
  background:#0b0d10;
  display:block;
  /* Crisp rendering — prevent sub-pixel blur on scaled canvases */
  image-rendering:auto;
}
/* Loading overlay */
.canvas-box-browser .browser-loader{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:radial-gradient(circle at center, rgba(20,22,28,0.95), rgba(8,9,12,0.98));
  z-index:2;
  pointer-events:none;
}
.canvas-box-browser.browser-loading .browser-loader{
  display:flex;
}
.browser-loader-spinner{
  width:42px;
  height:42px;
  border-radius:50%;
  border:3px solid rgba(99,102,241,0.18);
  border-top-color:var(--accent);
  animation:browser-loader-spin 0.85s linear infinite;
}
.browser-loader-text{
  font-size:12px;
  color:rgba(232,234,237,0.75);
  font-weight:500;
  letter-spacing:0.2px;
}
@keyframes browser-loader-spin{
  to { transform:rotate(360deg); }
}
.browser-viewport-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.35);
  opacity:0;
  transition:opacity 0.2s;
  pointer-events:none;
  z-index:1;
}
.browser-viewport-overlay span{
  font-size:12px;
  color:#fff;
  background:rgba(0,0,0,0.6);
  padding:6px 14px;
  border-radius:8px;
  font-weight:500;
}
.canvas-box-browser:not(.editing):hover .browser-viewport-overlay{
  opacity:1;
}
.canvas-box-browser.editing{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(99,102,241,0.25), var(--shadow2);
}
/* Fullscreen state for browser box */
.canvas-box-browser.fullscreen,
.canvas-box-browser:fullscreen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  border-radius:0;
  border:none;
  z-index:9999;
  margin:0;
}
.canvas-box-browser.fullscreen .canvas-box-inner,
.canvas-box-browser:fullscreen .canvas-box-inner{
  border-radius:0;
}
.canvas-box-browser.fullscreen .browser-viewport,
.canvas-box-browser:fullscreen .browser-viewport{
  border-radius:0;
}
.canvas-box-browser.fullscreen .browser-titlebar,
.canvas-box-browser:fullscreen .browser-titlebar{
  border-radius:0;
  background:rgba(30,32,38,0.95);
}

/* Browser box light theme */
[data-theme="light"] .browser-titlebar{
  background:rgba(0,0,0,0.04);
  border-bottom-color:rgba(0,0,0,0.06);
}
[data-theme="light"] .browser-bar{
  background:rgba(0,0,0,0.02);
}
[data-theme="light"] .browser-url-input{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.1);
}
[data-theme="light"] .browser-url-input:focus{
  background:rgba(0,0,0,0.06);
}
[data-theme="light"] .browser-viewport-overlay{
  background:rgba(0,0,0,0.25);
}
[data-theme="light"] .canvas-box-browser.editing{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(99,102,241,0.18), var(--shadow2);
}

/* ---- Beta Browser Box (self-hosted, same design as Browserbase browser) ---- */
.canvas-box.canvas-box-betabrowser{
  min-width:600px;
  min-height:400px;
}
/* Reuse browser chrome styles — hide generic delete (uses traffic lights) */
.canvas-box-betabrowser .canvas-box-delete{ display:none !important; }
.canvas-box-betabrowser .canvas-box-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
/* Beta browser close/fullscreen buttons reuse traffic light design */
.bb-close-btn,
.bb-fs-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  padding:0;
  cursor:pointer;
  position:relative;
  background:transparent;
  flex-shrink:0;
  z-index:2;
}
.bb-close-btn::before,
.bb-fs-btn::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:14px; height:14px;
  border-radius:50%;
  transition:filter 0.15s;
}
.bb-close-btn::before{ background:#ff5f57; }
.bb-fs-btn::before{ background:#28c840; }
.bb-close-btn:hover::before{ filter:brightness(0.8); }
.bb-fs-btn:hover::before{ filter:brightness(0.8); }
.bb-close-btn span,
.bb-fs-btn span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  color:rgba(0,0,0,0.7);
  opacity:0;
  transition:opacity 0.12s;
  z-index:3;
}
.bb-close-btn span::after{ content:"✕"; }
.bb-fs-btn span::after{ content:"⤢"; font-size:11px; }
.browser-traffic-lights:hover .bb-close-btn span,
.browser-traffic-lights:hover .bb-fs-btn span{ opacity:1; }
/* URL input reuses .browser-url-input styles via .browser-bar */
.bb-url-input{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--stroke);
  border-radius:6px;
  padding:5px 10px;
  color:var(--ink);
  font-size:12px;
  font-family:var(--sans);
  outline:none;
}
.bb-url-input:focus{ border-color:var(--accent); background:rgba(255,255,255,0.1); }
.bb-go-btn{
  width:28px; height:28px;
  border:none;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:0;
}
.bb-go-btn svg{ width:14px; height:14px; }
.bb-go-btn:hover{ background:#818cf8; }
.bb-status{
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}
.bb-viewport{
  flex:1;
  overflow:hidden;
  border-radius:0 0 12px 12px;
  position:relative;
  min-height:0;
  background:#0b0d10;
  cursor:default;
}
.bb-viewport:focus{ outline:2px solid var(--accent); outline-offset:-2px; }
.bb-canvas{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.bb-loader{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:radial-gradient(circle at center, rgba(20,22,28,0.95), rgba(8,9,12,0.98));
  z-index:2;
}
.canvas-box-betabrowser:not(.browser-loading) .bb-loader{ display:none; }
[data-theme="light"] .bb-url-input{ background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.1); }

/* ---- Shape box ---- */
.canvas-box.canvas-box-shape{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  min-width:40px;
  min-height:40px;
}
.canvas-box.canvas-box-shape .canvas-box-inner{
  background:transparent !important;
}
.canvas-box.canvas-box-shape .canvas-box-delete,
.canvas-box.canvas-box-shape .canvas-box-resize{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s, visibility .15s;
}
.canvas-box.canvas-box-shape:hover .canvas-box-delete,
.canvas-box.canvas-box-shape:hover .canvas-box-resize,
.canvas-box.canvas-box-shape.selected .canvas-box-delete,
.canvas-box.canvas-box-shape.selected .canvas-box-resize{
  opacity:1; visibility:visible; pointer-events:auto;
}

/* ---- YouTube box ---- */
.canvas-box.canvas-box-youtube{
  min-width:280px;
  min-height:180px;
}
.canvas-box-youtube .canvas-box-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
.youtube-viewport{
  flex:1;
  overflow:hidden;
  border-radius:12px;
  position:relative;
  min-height:0;
}
.youtube-iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
  background:#000;
}
/* Always-visible fallback link: opens the video on youtube.com in a new tab.
   Lets users recover when YouTube refuses to embed (uploader opt-out, rights
   block, regional restriction) — the iframe shows YouTube's own "Watch on
   YouTube" message in that case, but it's not always discoverable. */
.youtube-open-external{
  position:absolute;
  top:8px; right:8px;
  width:26px; height:26px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  color:rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  opacity:0;
  transition:opacity .15s, background .15s, transform .1s;
  z-index:5;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:auto;
}
.canvas-box-youtube:hover .youtube-open-external,
.canvas-box-youtube.selected .youtube-open-external{ opacity:1; }
.youtube-open-external:hover{ background:rgba(239,68,68,0.92); color:#fff; transform:scale(1.08); }
.youtube-open-external:active{ transform:scale(0.94); }

/* ---- Google Drive box ---- */
.canvas-box.canvas-box-gdrive{
  min-width:400px;
  min-height:300px;
}
.canvas-box-gdrive .canvas-box-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
.gdrive-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:rgba(255,255,255,0.08);
  border-bottom:1px solid var(--stroke);
  flex-shrink:0;
  user-select:none;
}
/* Google Drive Delete button: no overrides — inherits the floating
   top:-16px / right:-16px placement from .canvas-box-delete so it
   matches every other box type. */
.gdrive-bar-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
}
.gdrive-bar-icon svg{
  width:100%;
  height:100%;
}
.gdrive-bar-name{
  flex:1;
  min-width:0;
  font-size:13px;
  color:var(--ink);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gdrive-bar-pick{
  display:none;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border:none;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  flex-shrink:0;
  white-space:nowrap;
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.gdrive-bar-pick:hover{
  background:#4f46e5;
  box-shadow:0 2px 8px rgba(99,102,241,0.35);
}
.gdrive-bar-pick:active{
  background:#4338ca;
  box-shadow:0 1px 4px rgba(99,102,241,0.25);
  transform:scale(0.97);
  transition:background .06s, box-shadow .06s, transform .06s;
}
.gdrive-bar-pick svg{ width:14px; height:14px; }
.canvas-box-gdrive.editing .gdrive-bar-pick{
  display:flex;
}
.gdrive-bar-pick.has-file{
  display:flex;
}
.gdrive-viewport{
  flex:1;
  overflow:hidden;
  border-radius:0 0 12px 12px;
  position:relative;
  min-height:0;
}
.gdrive-content{
  width:100%;
  height:100%;
  overflow-y:auto;
  padding:20px 24px;
  font-size:14px;
  line-height:1.6;
  /* White "page" rendering — Google's exported HTML carries inline color:#000
     styles that would be invisible on var(--bg1) in dark mode. Match the iframe
     viewer's white background so docs look the same in light and dark. */
  color:#1a1a1a;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04);
  outline:none;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.gdrive-content[contenteditable="true"]{
  cursor:text;
}
.gdrive-content h1{ font-size:24px; font-weight:700; margin:16px 0 8px; }
.gdrive-content h2{ font-size:20px; font-weight:600; margin:14px 0 6px; }
.gdrive-content h3{ font-size:17px; font-weight:600; margin:12px 0 4px; }
.gdrive-content p{ margin:0 0 8px; }
.gdrive-content ul,.gdrive-content ol{ margin:0 0 8px; padding-left:24px; }
.gdrive-content li{ margin:2px 0; }
.gdrive-content table{ border-collapse:collapse; width:100%; margin:8px 0; font-size:13px; }
.gdrive-content table td,.gdrive-content table th{
  border:1px solid #e5e7eb;
  padding:6px 10px;
  text-align:left;
}
.gdrive-content table th{ background:#f5f5f7; font-weight:600; }
.gdrive-content img{ max-width:100%; height:auto; }
.gdrive-content a{ color:var(--accent); }
.gdrive-iframe{
  width:100%;
  height:100%;
  border:none;
  background:#fff;
  display:block;
}
.gdrive-viewport-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.35);
  opacity:0;
  transition:opacity 0.2s;
  pointer-events:none;
  z-index:1;
}
.gdrive-viewport-overlay span{
  font-size:12px;
  color:#fff;
  background:rgba(0,0,0,0.6);
  padding:6px 14px;
  border-radius:8px;
  font-weight:500;
}
.canvas-box-gdrive:not(.editing):hover .gdrive-viewport-overlay{
  opacity:1;
}
.gdrive-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:var(--bg1);
}
.gdrive-empty-icon{
  width:48px;
  height:48px;
  opacity:0.5;
}
.gdrive-empty-icon svg{
  width:100%;
  height:100%;
}
.gdrive-connect-btn{
  padding:10px 20px;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  border:none;
  cursor:pointer;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  transition:background 0.15s;
}
.gdrive-connect-btn:hover{
  background:var(--accent-hover);
}
.gdrive-browser-connect{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:32px 20px; text-align:center;
}
.gdrive-browser-connect-icon{ width:44px; height:44px; opacity:0.9; }
.gdrive-browser-connect-icon svg{ width:100%; height:100%; }
.gdrive-browser-connect-title{ font-size:14px; font-weight:600; color:var(--ink); }
.gdrive-browser-connect-desc{ font-size:12.5px; color:var(--muted); max-width:280px; line-height:1.45; }
.gdrive-browser-connect .gdrive-connect-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:4px;
}
.gdrive-browser-connect .gdrive-connect-btn svg{ width:16px; height:16px; flex-shrink:0; }
.gdrive-browser-connect .gdrive-connect-btn.is-loading{ opacity:0.6; cursor:wait; }
.gdrive-browser-connect-hint{
  font-size:12px; color:var(--danger); margin-top:6px;
}
.gdrive-no-account{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.6;
}
.gdrive-no-account a{
  color:var(--accent);
  text-decoration:underline;
}
/* Inline Drive file browser */
.gdrive-browser{
  position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg1); overflow:hidden;
}
.gdrive-browser-header{
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--stroke); flex-shrink:0;
}
.gdrive-browser-back{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  border:none; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer; flex-shrink:0;
}
.gdrive-browser-back:hover{ background:var(--bg2); }
.gdrive-browser-back svg{ width:16px; height:16px; }
.gdrive-browser-drive-logo{ width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; }
.gdrive-browser-drive-logo svg{ width:100%; height:100%; }
.gdrive-browser-path{
  font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gdrive-browser-list{
  flex:1; overflow-y:auto; padding:4px 0;
}
.gdrive-browser-item{
  display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer;
  transition:background .15s ease;
  user-select:none; border-radius:6px; margin:2px 6px;
}
.gdrive-browser-item:hover{ background:rgba(99,102,241,0.12); }
.gdrive-browser-item:active{ background:rgba(99,102,241,0.25); transition:background .05s; }
.gdrive-browser-item svg{ width:18px; height:18px; flex-shrink:0; color:var(--muted); }
.gdrive-browser-item-icon{ width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; }
.gdrive-browser-item-icon svg{ width:100%; height:100%; color:unset; }
.gdrive-browser-item.is-folder svg:first-child{ color:var(--accent); }
.gdrive-browser-item-name{
  flex:1; min-width:0; font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gdrive-browser-chevron{ width:14px !important; height:14px !important; color:var(--muted) !important; margin-left:auto; flex-shrink:0; }
.gdrive-item-loading{
  display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; font-size:12px; color:var(--muted); white-space:nowrap;
}
.gdrive-item-spinner{
  width:14px; height:14px; border:2px solid var(--stroke); border-top-color:var(--accent); border-radius:50%; animation:gdrive-spin 0.7s linear infinite; flex-shrink:0;
}
.gdrive-browser-loading{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:13px;
}
.gdrive-browser-spinner{
  width:24px; height:24px; border:2px solid var(--stroke); border-top-color:var(--accent); border-radius:50%; animation:gdrive-spin 0.7s linear infinite;
}
@keyframes gdrive-spin{ to{ transform:rotate(360deg); } }
.gdrive-browser-empty-msg{
  padding:40px 14px; text-align:center; color:var(--muted); font-size:13px;
}
.gdrive-browser-error{
  flex:1; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; color:var(--danger); font-size:13px;
}
[data-theme="light"] .gdrive-browser{ background:var(--bg1); }
[data-theme="light"] .gdrive-browser-back:hover{ background:var(--bg2); }
[data-theme="light"] .gdrive-browser-item:hover{ background:rgba(99,102,241,0.08); }
[data-theme="light"] .gdrive-browser-item:active{ background:rgba(99,102,241,0.18); }

/* Gdrive box hover / active feedback */
.canvas-box-gdrive{
  transition:border-color .2s, box-shadow .25s ease;
}
.canvas-box-gdrive:hover:not(.editing){
  border-color:rgba(99,102,241,0.35);
  box-shadow:0 0 0 1.5px rgba(99,102,241,0.18), 0 12px 32px rgba(0,0,0,0.45);
}
.canvas-box-gdrive:active:not(.editing){
  border-color:rgba(99,102,241,0.6);
  box-shadow:0 0 0 2.5px rgba(99,102,241,0.3), 0 8px 24px rgba(0,0,0,0.5);
  transition:border-color .08s, box-shadow .08s ease;
}
.canvas-box-gdrive.editing{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(99,102,241,0.25), var(--shadow2);
}

/* Google Drive box light theme */
[data-theme="light"] .gdrive-bar{
  background:rgba(0,0,0,0.03);
}
[data-theme="light"] .gdrive-viewport-overlay{
  background:rgba(0,0,0,0.25);
}
[data-theme="light"] .canvas-box-gdrive:hover:not(.editing){
  border-color:rgba(99,102,241,0.3);
  box-shadow:0 0 0 1.5px rgba(99,102,241,0.14), 0 12px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .canvas-box-gdrive:active:not(.editing){
  border-color:rgba(99,102,241,0.5);
  box-shadow:0 0 0 2.5px rgba(99,102,241,0.22), 0 8px 24px rgba(0,0,0,0.15);
}
[data-theme="light"] .canvas-box-gdrive.editing{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(99,102,241,0.18), var(--shadow2);
}

/* ---- Title presets in context menu ---- */
.ctx-title-section{ display:none; }
.ctx-title-preset{ font-weight:400; line-height:1.2; }

/* ---- Box actions inside rich-text context menu ---- */
.ctx-box-actions .ctx-btn{ display:flex; align-items:center; gap:2px; }
.ctx-box-action-danger{ color:var(--danger); }
.ctx-box-action-danger:hover{ background:rgba(239,68,68,0.12) !important; }

/* ---- Draw Canvas ---- */
.draw-canvas{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  transform-origin:0 0; /* match #canvasInner so hands-free stroke gliding lines up */
}
/* In draw mode the draw canvas must sit above .canvas-inner (z:2) and its
   .canvas-box children, otherwise pointer events on the box visually
   underneath a stroke get swallowed by the box (which has explicit
   pointer-events:auto) and never reach the draw canvas pointerdown
   handler. Symptom: pencil works on empty space but eraser drag misses
   any stroke that overlaps a text/image box. */
.canvas-layer.drawing .draw-canvas{ z-index:3; }
.canvas-layer.drawing{ cursor:crosshair; }
.canvas-layer.stroke-hovered{ cursor:grab; }
.canvas-layer.stroke-dragging{ cursor:grabbing; }
.tool.draw-active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 12px rgba(99,102,241,0.45);
}

/* ---- Connector System ---- */
.connector-svg{
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}
.connector-group{ pointer-events:auto; }
.connector-path{
  stroke:#6366f1;
  stroke-width:2;
  fill:none;
  transition:stroke-width .15s;
}
.connector-hit{
  stroke:transparent;
  stroke-width:16;
  fill:none;
  cursor:pointer;
  pointer-events:stroke;
}
.connector-group:hover .connector-path{
  stroke-width:3;
  filter:drop-shadow(0 0 6px rgba(99,102,241,0.5));
}
.connector-delete{
  opacity:0;
  cursor:pointer;
  pointer-events:auto;
  transition:opacity .15s;
}
.connector-group:hover .connector-delete{ opacity:1; }
.connector-delete:hover circle{ fill:rgba(239,68,68,1); }
.connector-temp{
  stroke:#6366f1;
  stroke-width:2;
  stroke-dasharray:6 4;
  fill:none;
  opacity:0.7;
}

/* ---- Settings FAB (bottom-left) ---- */
.settings-fab{
  width:48px;
  height:48px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:rgba(26, 27, 30, 0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 30px rgba(0,0,0,0.15);
  color:var(--ink);
  cursor:pointer;
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:background .2s, transform .2s;
}
.settings-fab svg{ width:24px; height:24px; }
.settings-fab:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }
.settings-fab:active{ background:rgba(255,255,255,0.12); }
[data-theme="light"] .settings-fab{
  background:rgba(255,255,255,0.85);
  border:1px solid var(--stroke);
}
[data-theme="light"] .settings-fab:hover{ background:rgba(0,0,0,0.05); }
[data-theme="light"] .settings-fab:active{ background:rgba(0,0,0,0.08); }

/* ---- Draw Popover ---- */
.draw-pop{
  position:fixed;
  display:none;
  padding:12px;
  border-radius:12px;
  background:rgba(26,27,30,0.94);
  border:1px solid var(--stroke);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow2);
  z-index:26000;
  width:192px;
  box-sizing:border-box;
  overflow:hidden;
}
.draw-pop.open{ display:block; }

/* Preset swatches grid */
.draw-pop-presets{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:4px;
  margin-bottom:10px;
}
.draw-pop-swatch{
  width:100%;
  aspect-ratio:1;
  border-radius:4px;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
  border:1px solid transparent;
}
.draw-pop-swatch:hover{
  transform:scale(1.2);
  box-shadow:0 0 6px rgba(255,255,255,0.2);
}
.draw-pop-swatch.swatch-border{
  border-color:rgba(255,255,255,0.25);
}

/* SV picker */
.draw-pop-sv-wrap{
  position:relative;
  width:100%;
  height:100px;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:8px;
  cursor:crosshair;
}
.draw-pop-sv{
  display:block;
  width:100%;
  height:100%;
  border-radius:8px;
}
.draw-pop-cursor{
  position:absolute;
  width:12px; height:12px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 3px rgba(0,0,0,0.5);
  pointer-events:none;
  transform:translate(-50%,-50%);
}

/* Hue bar */
.draw-pop-hue-wrap{
  position:relative;
  width:100%;
  height:12px;
  border-radius:6px;
  overflow:hidden;
  margin-bottom:10px;
  cursor:pointer;
}
.draw-pop-hue{
  display:block;
  width:100%;
  height:100%;
  border-radius:6px;
}
.draw-pop-hue-thumb{
  position:absolute;
  top:50%;
  width:6px; height:16px;
  border-radius:3px;
  border:2px solid #fff;
  box-shadow:0 0 3px rgba(0,0,0,0.5);
  pointer-events:none;
  transform:translate(-50%,-50%);
  background:transparent;
}

/* Hex row */
.draw-pop-hex-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  overflow:hidden;
}
.draw-pop-preview{
  width:24px; height:24px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.15);
  flex-shrink:0;
}
.draw-pop-hex{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--stroke);
  border-radius:6px;
  padding:4px 8px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--ink);
  outline:none;
  text-transform:uppercase;
  box-sizing:border-box;
}
.draw-pop-hex:focus{
  border-color:var(--accent);
}

/* Size row */
.draw-pop-size-row{
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
}
.draw-pop-size-label{
  font-size:11px;
  color:var(--muted);
  flex-shrink:0;
}
.draw-pop-size-slider{
  flex:1;
  min-width:0;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.12);
  outline:none;
}
.draw-pop-size-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  border:none;
}
.draw-pop-size-slider::-moz-range-thumb{
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  border:none;
}
.draw-pop-size-val{
  font-size:11px;
  font-family:'JetBrains Mono',monospace;
  color:var(--muted);
  min-width:28px;
  text-align:right;
}

.canvas-layer.erasing{ cursor:cell; }

/* ---- Draw light-theme overrides ---- */
[data-theme="light"] .draw-pop{
  background:rgba(255,255,255,0.94);
}
[data-theme="light"] .draw-pop-swatch:hover{
  box-shadow:0 0 6px rgba(0,0,0,0.12);
}
[data-theme="light"] .draw-pop-swatch.swatch-border{
  border-color:rgba(0,0,0,0.15);
}
[data-theme="light"] .draw-pop-preview{
  border-color:rgba(0,0,0,0.12);
}
[data-theme="light"] .draw-pop-hex{
  background:rgba(0,0,0,0.04);
}
[data-theme="light"] .draw-pop-size-slider{
  background:rgba(0,0,0,0.1);
}
[data-theme="light"] .draw-pop-swatch:hover{
  background:rgba(0,0,0,0.05);
}
/* ---- Touch & Mobile Foundations ---- */
.canvas-box,
.canvas-box-resize{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.canvas-box.editing{
  -webkit-user-select:text;
  user-select:text;
}
.canvas-layer.open{ touch-action:none; }

button,
.tool,
.chat-fab,
.chat-send,
.chat-close,
.cam-pop button,
.screen-share-btn,
.screen-share-stop,
.canvas-box-delete,
.person .btn,
.fs-exit-fab{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* On touch-primary devices, show controls that normally rely on :hover */
@media (hover:none){
  .person .btn{ opacity:.7; }
  .person .btn.fs{ opacity:.6; }
  .person .btn.on,
  .person .btn.off{ opacity:1; }
  .screen-badge.active{ opacity:1; }
  .canvas-box-delete{ opacity:.8; visibility:visible; pointer-events:auto; }
}

/* ---- Responsive: Tablet & Phone (max-width: 768px) ---- */
@media (max-width:768px){
  .people{
    left:0; top:0; bottom:auto;
    width:100%;
    height:auto;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    padding:50px 12px 8px;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    pointer-events:auto;
  }
  .people::-webkit-scrollbar{ display:none; }

  .person{
    flex-shrink:0;
    width:160px;
    height:110px;
    border-radius:22px;
    padding:12px;
    gap:6px;
  }
  .person .avatar{ width:48px; height:48px; }
  .person .avatar-img{ width:48px; height:48px; }
  .person .name{ font-size:12px; }
  .person .name-overlay{ font-size:11px; bottom:8px; left:10px; }
  .person .role{ font-size:9px; }
  .person:not(.video-on){ padding-top:10px; padding-bottom:10px; gap:2px; }
  .person video{ border-radius:12px; }
  .person.video-on::after{ border-radius:12px; }

  .person .btn-group{ right:10px; gap:4px; }
  .person .btn{ width:28px; height:28px; border-radius:8px; }
  .person .btn svg{ width:14px; height:14px; }
  .person .btn.fs{ width:32px; height:32px; border-radius:10px; top:8px; left:8px; }
  .person .btn.fs svg{ width:16px; height:16px; }
  .screen-badge, .person.video-on .screen-badge{ top:50%; right:-16px; }

  .people.grid-mode{
    left:0; top:0; width:100vw;
    height:100vh; height:100dvh;
    padding:54px 12px 88px;
    gap:12px;
    align-content:center;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .people.grid-mode .person{
    width:100%; height:auto;
  }
  .people.grid-mode[data-tile-count="1"]{ grid-template-columns:1fr; }
  .people.grid-mode[data-tile-count="1"] .person{ max-width:min(100%, calc(100dvh - 160px)); }
  .people.grid-mode[data-tile-count="2"]{ grid-template-columns:1fr 1fr; }
  .people.grid-mode[data-tile-count="3"]{ grid-template-columns:1fr 1fr; }
  .people.grid-mode[data-tile-count="3"] .person{ max-height:calc((100dvh - 166px) / 2); }
  .people.grid-mode[data-tile-count="3"] .person:last-child{ grid-column:1 / -1; max-width:50%; justify-self:center; }
  .people.grid-mode[data-tile-count="4"]{ grid-template-columns:1fr 1fr; }
  .people.grid-mode[data-tile-count="4"] .person{ max-height:calc((100dvh - 166px) / 2); }
  .people.grid-mode[data-tile-count="5"],
  .people.grid-mode[data-tile-count="6"]{ grid-template-columns:1fr 1fr; }
  .people.grid-mode[data-tile-count="5"] .person,
  .people.grid-mode[data-tile-count="6"] .person{ max-height:calc((100dvh - 178px) / 3); }

  .person.fullscreen{
    left:6px !important; top:6px !important;
    width:calc(100vw - 12px) !important;
    height:calc(100vh - 12px) !important;
    height:calc(100dvh - 12px) !important;
    border-radius:18px;
  }
  .person.fullscreen video{ border-radius:12px; }
  .person.fullscreen::after{ border-radius:12px; }

  .canvas-box.fullscreen{
    left:6px !important; top:6px !important;
    width:calc(100vw - 12px) !important;
    height:calc(100vh - 12px) !important;
    height:calc(100dvh - 12px) !important;
    border-radius:18px;
  }

  .screen-quality-bar{
    gap:6px;
    padding:8px 10px;
    flex-wrap:wrap;
  }
  .sqb-btn{
    padding:4px 9px;
    font-size:10px;
  }
  .sqb-label{ font-size:9px; }

  .bottom-navbar{
    padding:5px 12px;
    padding-bottom:max(5px, env(safe-area-inset-bottom, 0px));
  }
  .toolbar{
    gap:8px;
    padding:8px;
    border-radius:12px;
    overflow-x:auto;
    flex-wrap:nowrap;
    max-width:calc(100vw - 150px);
    scrollbar-width:none;
  }
  .toolbar::-webkit-scrollbar{ display:none; }
  .toolbar-side{ padding:8px; border-radius:12px; }
  .tool{ width:38px; height:38px; border-radius:12px; }
  .commit-panel{ top:calc(12px + var(--browser-offset-top)); right:calc(12px + var(--browser-offset-right)); width:calc(100vw - 24px); max-height:60vh; }
  .echo-orb{ width:60px; height:60px; }
  .echo-core{ width:22px; height:22px; }
  .echo-ring-1{ width:36px; height:36px; margin:-18px 0 0 -18px; }
  .echo-ring-2{ width:48px; height:48px; margin:-24px 0 0 -24px; }
  .echo-ring-3{ width:58px; height:58px; margin:-29px 0 0 -29px; }
  .echo-wave{ width:45px; height:45px; }

  .cam-pop{
    bottom:calc(54px + max(16px, env(safe-area-inset-bottom, 0px)) + 10px);
    left:12px;
    width:calc(100vw - 24px);
    max-width:360px;
  }

  .chat-fab{
    width:38px; height:38px;
    border-radius:12px;
  }
  .chat-fab svg{ width:20px; height:20px; }
  .fs-exit-fab{
    top:calc(12px + var(--browser-offset-top));
    right:calc(12px + var(--browser-offset-right));
    width:32px; height:32px;
    border-radius:8px;
  }
  .fs-exit-fab svg{ width:16px; height:16px; }
  .undo-redo-wrap{ top:calc(12px + var(--browser-offset-top)); right:12px; }
  .undo-redo-btn{ width:32px; height:32px; }
  .undo-redo-btn svg{ width:15px; height:15px; }
  .zoom-indicator{ width:48px; font-size:11px; }
  .zoom-ctrl-btn{ width:32px; height:32px; }
  .zoom-ctrl-btn svg{ width:13px; height:13px; }
  .minimap{ right:12px; }

  .chat-panel{
    width:100vw;
    max-width:100vw;
  }
  .chat-input-bar{
    padding:10px 12px;
    padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
  }

  /* ---- Canvas iPad Fixes ---- */
  .canvas-box{
    min-width:180px;
    min-height:90px;
  }
  .canvas-box.dragging,
  .canvas-box.resizing{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    will-change:transform;
  }
  .canvas-box-content{
    font-size:15px;
    padding:12px 14px;
    -webkit-text-size-adjust:100%;
    -webkit-user-select:text;
  }
  .canvas-box-content h1{ font-size:24px; }
  .canvas-box-content h2{ font-size:19px; }
  .canvas-box-content h3{ font-size:15px; }
  .canvas-box-resize{
    width:36px;
    height:36px;
  }

  /* Settings FAB responsive */
  .settings-fab{
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .settings-fab svg{ width:20px; height:20px; }

  /* Task panel responsive */
  .toolbar-panel{ width:90vw; height:95vh; }
  .task-table{ font-size:12px; }
  .task-table th{ padding:8px 10px; font-size:10px; }
  .task-table td{ padding:8px 10px; }
  .task-assignee{ max-width:160px; }
  .task-modal-content{ width:calc(100vw - 32px); }
  .task-preview-content{ width:calc(100vw - 24px); }
  .task-preview-toolbar{ flex-wrap:wrap; }
  .task-preview-card-fields{ gap:6px; }
}

/* ---- Responsive: Small Phone (max-width: 480px) ---- */
@media (max-width:480px){
  .people{
    padding:46px 8px 6px;
    gap:8px;
  }
  .person{
    width:140px;
    height:95px;
    border-radius:18px;
    padding:8px;
  }
  .person .avatar{ width:36px; height:36px; font-size:14px; }
  .person .avatar-img{ width:36px; height:36px; }
  .person .name{ font-size:10px; }
  .person .name-overlay{ font-size:10px; bottom:6px; left:8px; }
  .person .role{ font-size:8px; }
  .person:not(.video-on){ padding-top:8px; padding-bottom:8px; gap:2px; }
  .person video{ border-radius:12px; }
  .person.video-on::after{ border-radius:12px; }

  .person .btn-group{ right:6px; gap:3px; }
  .person .btn{ width:24px; height:24px; border-radius:6px; }
  .person .btn svg{ width:12px; height:12px; }
  .person .btn.fs{ width:28px; height:28px; border-radius:8px; top:6px; left:6px; }
  .person .btn.fs svg{ width:14px; height:14px; }
  .screen-badge, .person.video-on .screen-badge{ top:50%; right:-14px; width:28px; height:28px; }
  .screen-badge svg{ width:14px; height:14px; }

  .people.grid-mode{
    padding:46px 8px 80px;
    gap:8px;
    align-content:center;
  }
  .people.grid-mode .person{
    width:100%;
  }
  .people.grid-mode[data-tile-count="1"]{ grid-template-columns:1fr; }
  .people.grid-mode[data-tile-count="1"] .person{ max-width:min(100%, calc(100dvh - 140px)); }
  .people.grid-mode[data-tile-count="2"]{ grid-template-columns:1fr 1fr; }
  .people.grid-mode[data-tile-count="3"]{ grid-template-columns:1fr 1fr; }
  .people.grid-mode[data-tile-count="3"] .person{ max-height:calc((100dvh - 142px) / 2); }
  .people.grid-mode[data-tile-count="3"] .person:last-child{ grid-column:1 / -1; max-width:50%; justify-self:center; }
  .people.grid-mode[data-tile-count="4"]{ grid-template-columns:1fr 1fr; }
  .people.grid-mode[data-tile-count="4"] .person{ max-height:calc((100dvh - 142px) / 2); }
  .people.grid-mode[data-tile-count="5"],
  .people.grid-mode[data-tile-count="6"]{ grid-template-columns:1fr 1fr; }
  .people.grid-mode[data-tile-count="5"] .person,
  .people.grid-mode[data-tile-count="6"] .person{ max-height:calc((100dvh - 150px) / 3); }

  .bottom-navbar{
    padding:4px 8px;
    padding-bottom:max(4px, env(safe-area-inset-bottom, 0px));
  }
  .toolbar{
    gap:4px;
    padding:5px;
    border-radius:12px;
    overflow-x:auto;
    flex-wrap:nowrap;
    max-width:calc(100vw - 120px);
    scrollbar-width:none;
  }
  .toolbar::-webkit-scrollbar{ display:none; }
  .toolbar-side{ padding:5px; border-radius:12px; }
  .tool{ width:34px; height:34px; border-radius:9px; }
  .tool svg{ width:17px; height:17px; }
  .commit-panel{ top:calc(8px + var(--browser-offset-top)); right:calc(8px + var(--browser-offset-right)); width:calc(100vw - 16px); max-height:55vh; }
  .echo-orb{ width:45px; height:45px; }
  .echo-core{ width:18px; height:18px; }
  .echo-ring-1{ width:28px; height:28px; margin:-14px 0 0 -14px; }
  .echo-ring-2{ width:36px; height:36px; margin:-18px 0 0 -18px; }
  .echo-ring-3{ width:44px; height:44px; margin:-22px 0 0 -22px; }
  .echo-wave{ width:35px; height:35px; }
  .echo-particle{ animation-name:echo-orbit-sm !important; }
  @keyframes echo-orbit-sm{
    0%  { transform:rotate(0deg) translateX(20px) rotate(0deg); opacity:0.3; }
    25% { opacity:1; }
    50% { transform:rotate(180deg) translateX(20px) rotate(-180deg); opacity:0.3; }
    75% { opacity:0.9; }
    100%{ transform:rotate(360deg) translateX(20px) rotate(-360deg); opacity:0.3; }
  }

  .cam-pop{
    bottom:calc(44px + max(12px, env(safe-area-inset-bottom, 0px)) + 10px);
    left:8px;
    transform:none;
    width:calc(100vw - 16px);
  }

  .chat-fab{
    width:34px; height:34px;
    border-radius:9px;
  }
  .chat-fab svg{ width:18px; height:18px; }
  .fs-exit-fab{
    top:calc(8px + var(--browser-offset-top));
    right:calc(8px + var(--browser-offset-right));
    width:28px; height:28px;
    border-radius:6px;
  }
  .fs-exit-fab svg{ width:14px; height:14px; }
  .undo-redo-wrap{ top:calc(8px + var(--browser-offset-top)); right:8px; gap:6px; }
  .undo-redo-btn{ width:28px; height:28px; }
  .undo-redo-btn svg{ width:14px; height:14px; }
  .zoom-indicator{ width:42px; font-size:11px; }
  .zoom-ctrl-btn{ width:28px; height:28px; }
  .zoom-ctrl-btn svg{ width:12px; height:12px; }
  .undo-redo,
  .zoom-pill{ border-radius:8px; }
  .minimap{ right:8px; display:none; }

  .chat-header{ padding:14px 16px; }

  .canvas-box{ min-width:110px; min-height:60px; }
  .canvas-box-content{ padding:8px 10px; font-size:13px; }
  .canvas-box-content h1{ font-size:20px; }
  .canvas-box-content h2{ font-size:16px; }
  .canvas-box-content h3{ font-size:13px; }
  .canvas-ctx-menu{ min-width:160px; }
  .ctx-btn{ font-size:12px; padding:6px 12px; }

  .screen-share-placeholder{ padding:12px; gap:8px; }
  .screen-share-placeholder svg{ width:24px; height:24px; }
  .screen-share-btn{ padding:6px 14px; font-size:11px; }

  /* Settings FAB small phone */
  .settings-fab{
    width:34px;
    height:34px;
    border-radius:9px;
  }
  .settings-fab svg{ width:18px; height:18px; }

  /* Task panel on very narrow screens */
  .toolbar-panel{ width:96vw; height:95vh; }
  .task-add-btn span, .task-group-add-btn span, .objective-add-btn span, .panel-collapse-btn span{ display:none; }
  .task-add-btn, .task-group-add-btn{ width:32px; padding:0; justify-content:center; }
  .objective-add-btn{ width:24px; padding:0; justify-content:center; }
  .panel-collapse-btn{ width:32px; padding:0; justify-content:center; }
  .task-table-wrap{ overflow-x:auto; }
  .task-table{ font-size:11px; min-width:520px; }
  .task-table th{ padding:6px 8px; }
  .task-table td{ padding:6px 8px; }
  .task-assignee{ max-width:120px; }
}

/* ---- Hands-free cursor ---- */
.hf-cursor{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:10000;
  will-change:transform;
  transition:opacity 0.2s, transform 60ms linear;
}
/* Smooth canvas pan during hands-free interaction: bridges the
   gap between MediaPipe's ~20-30 fps and the 60 Hz display.
   Scoped to .hf-acting so mouse/wheel pan and zoom stay instant. */
#canvasLayer.hf-acting #canvasInner,
#canvasLayer.hf-acting .draw-canvas{
  transition:transform 60ms linear;
}
.hf-cursor-ring{
  width:36px; height:36px;
  border:2px solid var(--accent);
  border-radius:50%;
  position:absolute;
  top:-18px; left:-18px;
  transition:width 0.15s, height 0.15s, top 0.15s, left 0.15s, border-color 0.15s;
}
.hf-cursor.pinching .hf-cursor-ring{
  width:18px; height:18px;
  top:-9px; left:-9px;
  border-color:#22c55e;
}
.hf-cursor-dot{
  width:6px; height:6px;
  background:var(--accent);
  border-radius:50%;
  position:absolute;
  top:-3px; left:-3px;
  transition:background 0.15s;
}
.hf-cursor.pinching .hf-cursor-dot{
  background:#22c55e;
}
.hf-cursor.zooming .hf-cursor-ring{
  width:44px; height:44px;
  top:-22px; left:-22px;
  border-color:#3b82f6;
  border-width:3px;
}
.hf-cursor.zooming .hf-cursor-dot{
  background:#3b82f6;
}

/* Scale state — two-hand pinch on selected element */
.hf-cursor.hf-scale .hf-cursor-ring{
  width:44px; height:44px;
  top:-22px; left:-22px;
  border-color:#f59e0b;
  border-width:3px;
}
.hf-cursor.hf-scale .hf-cursor-dot{
  background:#f59e0b;
}

/* Hands-free: show delete & resize on selected boxes (no mouse hover) */
.hf-active .canvas-box-delete{
  opacity:0.7; visibility:visible; pointer-events:auto;
}
.hf-active .canvas-box-delete:hover{
  opacity:1;
}

/* Drag state — ring pulses orange */
.hf-cursor.hf-drag .hf-cursor-ring{
  width:18px; height:18px;
  top:-9px; left:-9px;
  border-color:#f97316;
}
.hf-cursor.hf-drag .hf-cursor-dot{
  background:#f97316;
}

/* Resize state — ring becomes a square */
.hf-cursor.hf-resize .hf-cursor-ring{
  width:20px; height:20px;
  top:-10px; left:-10px;
  border-color:#a855f7;
  border-radius:4px;
}
.hf-cursor.hf-resize .hf-cursor-dot{
  background:#a855f7;
}

/* Hover: box — subtle highlight */
.hf-cursor.hf-hover-box .hf-cursor-ring{
  border-color:#22c55e;
  border-style:dashed;
}

/* Hover: delete — red warning */
.hf-cursor.hf-hover-delete .hf-cursor-ring{
  border-color:#ef4444;
}
.hf-cursor.hf-hover-delete .hf-cursor-dot{
  background:#ef4444;
}

/* Hover: resize — purple hint */
.hf-cursor.hf-hover-resize .hf-cursor-ring{
  border-color:#a855f7;
  border-radius:4px;
}

/* Action label below cursor */
.hf-cursor-label{
  position:absolute;
  top:22px; left:50%;
  transform:translateX(-50%);
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  color:#fff;
  background:rgba(0,0,0,0.65);
  padding:2px 8px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
}

/* ---- Hands-free startup toast ---- */
.hf-toast{
  position:fixed;
  top:calc(20px + env(safe-area-inset-top, 0px));
  left:50%;
  z-index:10001;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px;
  background:rgba(26,27,30,0.94);
  border:1px solid var(--stroke);
  border-radius:12px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow2);
  max-width:420px;
  width:max-content;
  transform:translate(-50%, -120%);
  opacity:0;
  transition:transform 0.35s ease, opacity 0.35s ease;
}
.hf-toast.show{
  transform:translate(-50%, 0);
  opacity:1;
}
[data-theme="light"] .hf-toast{
  background:rgba(255,255,255,0.94);
}
.hf-toast-icon{
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:10px;
  background:var(--accent);
  display:grid;
  place-items:center;
  color:#fff;
}
.hf-toast-icon svg{ width:18px; height:18px; }
.hf-toast-body{
  flex:1;
  min-width:0;
}
.hf-toast-title{
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:3px;
}
.hf-toast-text{
  font-family:var(--sans);
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}
.hf-toast-close{
  flex-shrink:0;
  background:none;
  border:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
  padding:0 2px;
  line-height:1;
  transition:color 0.15s;
}
.hf-toast-close:hover{
  color:var(--ink);
}

/* Access request toast notification */
.access-toast{
  position:fixed;
  top:20px;
  left:50%;
  z-index:10000;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 16px;
  font-family:var(--sans);
  background:rgba(26,27,30,0.97);
  border:1px solid var(--stroke);
  border-radius:12px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  max-width:360px;
  transform:translate(-50%, -120%);
  opacity:0;
  transition:transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.access-toast.show{
  transform:translate(-50%, 0);
  opacity:1;
}
[data-theme="light"] .access-toast{
  background:rgba(255,255,255,0.97);
  box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
}
.access-toast-top{
  display:flex;
  align-items:center;
  gap:10px;
}
.access-toast-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.access-toast-avatar-placeholder{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#6366f1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:13px;
  flex-shrink:0;
}
.access-toast-text{
  flex:1;
  font-size:13px;
  color:var(--ink);
  line-height:1.4;
}
.access-toast-text strong{
  font-weight:600;
}
.access-toast-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
  padding:0 2px;
  line-height:1;
  flex-shrink:0;
}
.access-toast-close:hover{
  color:var(--ink);
}
.access-toast-actions{
  display:flex;
  gap:8px;
  justify-content:center;
}
.access-toast-btn{
  padding:6px 14px;
  border:none;
  border-radius:6px;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:opacity 0.15s;
}
.access-toast-btn:hover{
  opacity:0.85;
}
.access-toast-btn.accept{
  background:#22c55e;
  color:#fff;
}
.access-toast-btn.reject{
  background:#ef4444;
  color:#fff;
}
.access-toast-result{
  font-size:12px;
  font-weight:600;
  padding:4px 0;
}
.access-toast-result.approve{
  color:#22c55e;
}
.access-toast-result.reject{
  color:#ef4444;
}

/* ---- Visitor warning toast ---- */
.visitor-toast{
  position:fixed;
  top:calc(20px + env(safe-area-inset-top, 0px));
  left:50%;
  transform:translateX(-50%) translateY(-120%);
  z-index:10000;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:var(--bg1);
  border:1px solid #f59e0b44;
  border-radius:10px;
  box-shadow:0 4px 24px rgba(0,0,0,0.25);
  max-width:460px;
  opacity:0;
  transition:transform 0.35s ease, opacity 0.35s ease;
}
.visitor-toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}
.visitor-toast-icon{
  flex-shrink:0;
  color:#f59e0b;
  display:flex;
  align-items:center;
}
.visitor-toast-icon svg{
  width:20px;
  height:20px;
}
.visitor-toast-text{
  flex:1;
  font-size:13px;
  color:var(--ink);
  line-height:1.4;
}
.visitor-toast-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
  padding:0 2px;
  line-height:1;
  flex-shrink:0;
}
.visitor-toast-close:hover{
  color:var(--ink);
}

/* ---- Echo ---- */
/* ---- Echo FAB (inside people strip) ---- */
.echo-fab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  max-width:var(--call-width);
  padding:10px 20px;
  border-radius:12px;
  border:1px solid rgba(99,102,241,0.2);
  background:rgba(99,102,241,0.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  color:#a5b4fc;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  cursor:pointer;
  pointer-events:auto;
  transition:all .25s ease;
  flex-shrink:0;
  align-self:center;
}
.echo-fab:hover{
  background:rgba(99,102,241,0.15);
  border-color:rgba(99,102,241,0.35);
  color:#c7d2fe;
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(99,102,241,0.2);
}
.echo-fab:active{ transform:translateY(0); }
.echo-fab-orb{
  width:16px;height:16px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #a5b4fc, #6366f1 60%, #4338ca);
  box-shadow:0 0 8px rgba(99,102,241,0.5), 0 0 16px rgba(99,102,241,0.2);
  animation:echo-fab-pulse 3s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes echo-fab-pulse{
  0%,100%{ box-shadow:0 0 8px rgba(99,102,241,0.5), 0 0 16px rgba(99,102,241,0.2); transform:scale(1); }
  50%{ box-shadow:0 0 12px rgba(99,102,241,0.7), 0 0 24px rgba(99,102,241,0.3); transform:scale(1.08); }
}
/* Mascot avatar inside the Echo FAB — purple robot head.
   The wrapper is INTENTIONALLY backgroundless and shadowless. Any background
   on the wrapper would show as a 32×32 square against the parent button
   (especially on hover when the button background lifts), which Alex flagged
   as a visible 'box around the mascot'. The drop-shadow on the IMG below
   follows the robot's actual silhouette (transparent corners on the PNG)
   so we still get a soft purple halo without ever revealing a square. */
.echo-fab-mascot{
  width:32px; height:32px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:transparent;
  animation:echo-fab-mascot-bob 3.8s ease-in-out infinite;
}
.echo-fab-mascot img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  pointer-events:none;
  user-select:none;
  /* Two stacked drop-shadows on the IMG itself (not the wrapper) — the
     filter follows the robot's alpha shape, never the wrapper's bounding box,
     so we get a soft glow that's character-shaped, not square. */
  filter:
    drop-shadow(0 0 5px rgba(139,92,246,0.45))
    drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
@keyframes echo-fab-mascot-bob{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%    { transform:translateY(-2px) rotate(1deg); }
}
/* On hover: keep the wave animation but DO NOT add box-shadow on the wrapper.
   box-shadow paints from the element's box (a 32×32 square) so it appears as
   a visible square halo behind the mascot — exactly the bug Alex flagged.
   The hover glow now lives on the IMG via filter:drop-shadow, which follows
   the robot's actual silhouette (transparent corners on the PNG) — no square. */
.echo-fab:hover .echo-fab-mascot{
  animation:echo-fab-mascot-wave 0.6s ease-in-out;
}
.echo-fab:hover .echo-fab-mascot img{
  filter:
    drop-shadow(0 0 8px rgba(139,92,246,0.7))
    drop-shadow(0 0 16px rgba(99,102,241,0.45))
    drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
@keyframes echo-fab-mascot-wave{
  0%,100%{ transform:translateY(0) rotate(0deg) scale(1); }
  25%    { transform:translateY(-3px) rotate(-6deg) scale(1.08); }
  75%    { transform:translateY(-1px) rotate(6deg) scale(1.08); }
}
@media (prefers-reduced-motion:reduce){
  .echo-fab-mascot,
  .echo-fab:hover .echo-fab-mascot{ animation:none; }
}
.echo-fab-label{ flex-shrink:0; }
.echo-fab.echo-hidden{ display:none; }
[data-theme="light"] .echo-fab{
  background:rgba(99,102,241,0.06);
  border-color:rgba(99,102,241,0.15);
  color:#6366f1;
}
[data-theme="light"] .echo-fab:hover{
  background:rgba(99,102,241,0.12);
  border-color:rgba(99,102,241,0.3);
  color:#4f46e5;
}
[data-theme="light"] .echo-fab-orb{
  box-shadow:0 0 6px rgba(99,102,241,0.4), 0 0 12px rgba(99,102,241,0.15);
}


/* Tile overrides */
.person.echo-tile{ overflow:visible; }
.person.echo-tile .btn.fs,
.person.echo-tile .btn.cam,
.person.echo-tile .btn.mic{ display:none !important; }
.person.echo-tile .local-status-pill{ z-index:10; }
.person.echo-tile.video-on .role{
  display:block;
  position:absolute;
  bottom:8px;
  left:0; right:0;
  text-align:center;
  font-size:9px;
  color:rgba(255,255,255,0.5);
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
  z-index:4;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-weight:600;
}
.person.echo-tile.video-on::after{
  background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 50%);
  border-radius:inherit;
  overflow:hidden;
}

/* ---- Echo Particle Planet Tile ---- */
.person.echo-tile .echo-planet-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.echo-status-pill{
  position:absolute;
  bottom:10px;
  right:12px;
  display:flex;
  align-items:center;
  gap:5px;
  z-index:5;
}
.echo-status-pill .echo-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 6px rgba(34,197,94,0.5);
  animation:echo-status-blink 2s ease-in-out infinite;
}
@keyframes echo-status-blink{0%,100%{opacity:1}50%{opacity:0.4}}
.echo-status-pill span{
  font-size:10px;color:rgba(255,255,255,0.35);font-weight:500;
}
.person.echo-tile.echo-listening .echo-status-dot{background:#06b6d4;box-shadow:0 0 6px rgba(6,182,212,0.5)}
.person.echo-tile.echo-processing .echo-status-dot{background:#a855f7;box-shadow:0 0 6px rgba(168,85,247,0.5)}

/* Fast already spoke, powerful tier is executing canvas actions in background.
   Discreet halo pulse on the mascot so the user knows Echo is still working.
   Removed when echo:working-done fires. */
.person.echo-tile.echo-working-bg .echo-mascot img,
.person.echo-tile.echo-working-bg .echo-fab-mascot img{
  animation: echoWorkingBgPulse 1.8s ease-in-out infinite;
}
@keyframes echoWorkingBgPulse{
  0%, 100% { filter: drop-shadow(0 0 4px rgba(165,180,252,0.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(165,180,252,0.75)); }
}

/* Animation container */
.echo-animation{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%, #2e1065 0%, #1e1b4b 50%, #0f0a2e 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ambient glow behind orb */
.echo-glow{
  position:absolute;
  width:140%;
  height:140%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(6,182,212,0.08) 40%, transparent 70%);
  animation:echo-glow-breathe 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes echo-glow-breathe{
  0%,100%{ transform:scale(1); opacity:0.6; }
  50%{ transform:scale(1.15); opacity:1; }
}

/* Orb wrapper — 3D perspective */
.echo-orb{
  position:relative;
  width:80px;
  height:80px;
  perspective:250px;
}

/* Core — glass morphism sphere */
.echo-core{
  position:absolute;
  top:50%; left:50%;
  width:30px; height:30px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 50%),
    radial-gradient(circle at 50% 50%, #818cf8, #6366f1 40%, #4338ca 80%);
  box-shadow:
    0 0 20px rgba(99,102,241,0.8),
    0 0 50px rgba(99,102,241,0.35),
    0 0 80px rgba(99,102,241,0.15),
    inset 0 -4px 8px rgba(0,0,0,0.3);
  animation:echo-pulse 4s ease-in-out infinite;
  transition:all 0.6s ease;
}
@keyframes echo-pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); filter:brightness(1); }
  50%{ transform:translate(-50%,-50%) scale(1.08); filter:brightness(1.2); }
}

/* Rings — thinner, more elegant */
.echo-ring{
  position:absolute;
  top:50%; left:50%;
  border-radius:50%;
  border:1px solid transparent;
  will-change:transform;
  transition:all 0.6s ease;
}
.echo-ring-1{
  width:48px; height:48px;
  margin:-24px 0 0 -24px;
  border-top-color:rgba(165,180,252,0.5);
  border-right-color:rgba(165,180,252,0.15);
  animation:echo-spin1 5s linear infinite;
}
.echo-ring-2{
  width:62px; height:62px;
  margin:-31px 0 0 -31px;
  border-top-color:rgba(6,182,212,0.35);
  border-left-color:rgba(6,182,212,0.1);
  animation:echo-spin2 7s linear infinite;
}
.echo-ring-3{
  width:76px; height:76px;
  margin:-38px 0 0 -38px;
  border-bottom-color:rgba(139,92,246,0.3);
  border-right-color:rgba(139,92,246,0.08);
  animation:echo-spin3 9s linear infinite;
}
@keyframes echo-spin1{ to{ transform:rotateX(60deg) rotateY(360deg); } }
@keyframes echo-spin2{ to{ transform:rotateX(-50deg) rotateZ(360deg); } }
@keyframes echo-spin3{ to{ transform:rotateY(40deg) rotateX(360deg); } }

/* Particles — more, smaller, varied */
.echo-particles{
  position:absolute;
  inset:0;
  transition:opacity 0.6s ease;
}
.echo-particle{
  position:absolute;
  top:50%; left:50%;
  width:2.5px; height:2.5px;
  border-radius:50%;
  background:#c4b5fd;
  box-shadow:0 0 8px rgba(196,181,253,0.9);
  will-change:transform;
}
.echo-particle-1{ animation:echo-orbit 5s linear infinite; }
.echo-particle-2{ animation:echo-orbit 6s linear infinite reverse; animation-delay:-1.2s; }
.echo-particle-3{ animation:echo-orbit 7s linear infinite; animation-delay:-2.8s; }
.echo-particle-4{ animation:echo-orbit 5.5s linear infinite reverse; animation-delay:-0.5s; }
.echo-particle-5{ animation:echo-orbit 8s linear infinite; animation-delay:-3.5s; }
.echo-particle-6{ animation:echo-orbit 6.5s linear infinite reverse; animation-delay:-1.8s; }
.echo-particle-7{ animation:echo-orbit 9s linear infinite; animation-delay:-4.2s; }
.echo-particle-8{ animation:echo-orbit 7.5s linear infinite reverse; animation-delay:-0.8s; }

@keyframes echo-orbit{
  0%  { transform:rotate(0deg) translateX(34px) rotate(0deg); opacity:0.3; }
  25% { opacity:1; }
  50% { transform:rotate(180deg) translateX(34px) rotate(-180deg); opacity:0.3; }
  75% { opacity:0.9; }
  100%{ transform:rotate(360deg) translateX(34px) rotate(-360deg); opacity:0.3; }
}

/* Sound wave rings — hidden by default, shown during listening */
.echo-waves{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.echo-wave{
  position:absolute;
  top:50%; left:50%;
  border-radius:50%;
  border:1.5px solid rgba(6,182,212,0.4);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  width:60px; height:60px;
}
.echo-wave-1{ animation:echo-wave-expand 2.4s ease-out infinite; }
.echo-wave-2{ animation:echo-wave-expand 2.4s ease-out infinite 0.8s; }
.echo-wave-3{ animation:echo-wave-expand 2.4s ease-out infinite 1.6s; }

@keyframes echo-wave-expand{
  0%{ transform:translate(-50%,-50%) scale(0.5); opacity:0.7; border-color:rgba(6,182,212,0.6); }
  100%{ transform:translate(-50%,-50%) scale(2.2); opacity:0; border-color:rgba(6,182,212,0); }
}

/* === IDLE STATE (default) === */
.echo-wave{ animation-play-state:paused; opacity:0; }

/* === LISTENING STATE — sound waves + cyan tint === */
.person.echo-tile.echo-listening .echo-wave{
  animation-play-state:running;
}
.person.echo-tile.echo-listening .echo-core{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 50%),
    radial-gradient(circle at 50% 50%, #67e8f9, #06b6d4 40%, #0891b2 80%);
  box-shadow:
    0 0 24px rgba(6,182,212,0.9),
    0 0 60px rgba(6,182,212,0.4),
    0 0 100px rgba(6,182,212,0.15),
    inset 0 -4px 8px rgba(0,0,0,0.3);
  animation:echo-pulse-listen 1.5s ease-in-out infinite;
}
@keyframes echo-pulse-listen{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.15); }
}
.person.echo-tile.echo-listening .echo-glow{
  background:radial-gradient(circle, rgba(6,182,212,0.25) 0%, rgba(6,182,212,0.1) 40%, transparent 70%);
  animation:echo-glow-breathe 1.5s ease-in-out infinite;
}
.person.echo-tile.echo-listening .echo-ring-1{
  border-top-color:rgba(6,182,212,0.6);
  border-right-color:rgba(6,182,212,0.2);
}
.person.echo-tile.echo-listening .echo-ring-2{
  border-top-color:rgba(103,232,249,0.4);
  border-left-color:rgba(103,232,249,0.12);
}
.person.echo-tile.echo-listening .echo-particle{
  background:#67e8f9;
  box-shadow:0 0 8px rgba(103,232,249,0.9);
}

/* === PROCESSING STATE — fast spin, energy burst, violet === */
.person.echo-tile.echo-processing .echo-core{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 50%),
    radial-gradient(circle at 50% 50%, #c084fc, #a855f7 40%, #7c3aed 80%);
  box-shadow:
    0 0 30px rgba(168,85,247,1),
    0 0 70px rgba(168,85,247,0.6),
    0 0 120px rgba(139,92,246,0.3),
    inset 0 -4px 8px rgba(0,0,0,0.3);
  animation:echo-pulse-process 0.8s ease-in-out infinite;
}
@keyframes echo-pulse-process{
  0%,100%{ transform:translate(-50%,-50%) scale(1); filter:brightness(1); }
  50%{ transform:translate(-50%,-50%) scale(1.25); filter:brightness(1.4); }
}
.person.echo-tile.echo-processing .echo-glow{
  background:radial-gradient(circle, rgba(168,85,247,0.3) 0%, rgba(139,92,246,0.15) 40%, transparent 70%);
  animation:echo-glow-breathe 0.8s ease-in-out infinite;
}
.person.echo-tile.echo-processing .echo-ring-1{
  animation-duration:1s;
  border-top-color:rgba(192,132,252,0.8);
  border-right-color:rgba(192,132,252,0.3);
  border-width:2px;
}
.person.echo-tile.echo-processing .echo-ring-2{
  animation-duration:1.5s;
  border-top-color:rgba(168,85,247,0.7);
  border-left-color:rgba(168,85,247,0.25);
  border-width:2px;
}
.person.echo-tile.echo-processing .echo-ring-3{
  animation-duration:2s;
  border-bottom-color:rgba(139,92,246,0.6);
  border-right-color:rgba(139,92,246,0.2);
  border-width:2px;
}
.person.echo-tile.echo-processing .echo-particle{
  background:#e9d5ff;
  box-shadow:0 0 10px rgba(233,213,255,1);
  animation-duration:1.5s !important;
}

/* Processing border glow — disabled */

/* Processing wave — single fast ring */
.person.echo-tile.echo-processing .echo-wave{
  animation-play-state:running;
  border-color:rgba(168,85,247,0.5);
}
.person.echo-tile.echo-processing .echo-wave-1{
  animation:echo-wave-expand 1.2s ease-out infinite;
}
.person.echo-tile.echo-processing .echo-wave-2{
  animation:echo-wave-expand 1.2s ease-out infinite 0.4s;
}
.person.echo-tile.echo-processing .echo-wave-3{
  animation:echo-wave-expand 1.2s ease-out infinite 0.8s;
}

/* Light theme */
[data-theme="light"] .echo-animation{
  background:radial-gradient(ellipse at 50% 50%, #ede9fe 0%, #ddd6fe 50%, #c4b5fd 100%);
}
[data-theme="light"] .echo-core{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(circle at 50% 50%, #a5b4fc, #818cf8 40%, #6366f1 80%);
  box-shadow:
    0 0 16px rgba(99,102,241,0.5),
    0 0 40px rgba(99,102,241,0.2),
    inset 0 -4px 8px rgba(0,0,0,0.1);
}
[data-theme="light"] .echo-glow{
  background:radial-gradient(circle, rgba(99,102,241,0.12) 0%, rgba(99,102,241,0.05) 40%, transparent 70%);
}
[data-theme="light"] .echo-ring-1{ border-top-color:rgba(99,102,241,0.5); border-right-color:rgba(99,102,241,0.15); }
[data-theme="light"] .echo-ring-2{ border-top-color:rgba(79,70,229,0.35); border-left-color:rgba(79,70,229,0.1); }
[data-theme="light"] .echo-ring-3{ border-bottom-color:rgba(67,56,202,0.3); border-right-color:rgba(67,56,202,0.08); }
[data-theme="light"] .echo-particle{ background:#818cf8; box-shadow:0 0 6px rgba(129,140,248,0.7); }
[data-theme="light"] .person.echo-tile.video-on .role{ color:rgba(0,0,0,0.45); text-shadow:none; }
[data-theme="light"] .person.echo-tile.video-on::after{
  background:linear-gradient(to top, rgba(255,255,255,0.5), rgba(255,255,255,0) 50%);
}
[data-theme="light"] .echo-wave{ border-color:rgba(6,182,212,0.3); }
[data-theme="light"] .person.echo-tile .name-overlay{ color:#1a1a1a !important; text-shadow:none !important; }
[data-theme="light"] .echo-status-pill span{ color:rgba(0,0,0,0.4); }
[data-theme="light"] .echo-status-pill .echo-status-dot{ box-shadow:0 0 6px rgba(34,197,94,0.3); }
/* light theme processing border — disabled */

/* ---- Echo speech bubble — hidden by default; floater mode shows it ---- */
.echo-bubble-anchor{
  display:none;
}


.echo-bubble{
  display:none;
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%) scale(0.85);
  min-width:120px;
  max-width:260px;
  padding:10px 14px;
  background:var(--bg1);
  border:1px solid var(--stroke);
  border-radius:12px 12px 12px 4px;
  color:var(--ink);
  font-size:13px;
  line-height:1.45;
  font-weight:500;
  letter-spacing:-0.01em;
  box-shadow:0 4px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(99,102,241,0.15);
  opacity:0;
  transition:opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Tail pointing left toward tile */
.echo-bubble::before{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  transform:translateY(-50%);
  width:12px;
  height:12px;
  background:var(--bg1);
  border-left:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  border-radius:0 0 0 4px;
  rotate:45deg;
}

.echo-bubble-visible{
  opacity:1;
  transform:translateY(-50%) scale(1);
}

.echo-bubble-out{
  opacity:0;
  transform:translateY(-50%) scale(0.9);
  transition:opacity 0.2s ease, transform 0.2s ease;
}

/* Top-mode: bubble goes below the tile instead of to the right */
.people.top-mode .echo-bubble-anchor{
  top:100%;
  left:50%;
  transform:translateX(-50%);
}
.people.top-mode .echo-bubble{
  left:50%;
  top:10px;
  transform:translateX(-50%) scale(0.85);
  border-radius:12px;
}
.people.top-mode .echo-bubble::before{
  left:50%;
  top:-6px;
  transform:translateX(-50%) rotate(45deg);
  border-left:1px solid var(--stroke);
  border-top:1px solid var(--stroke);
  border-bottom:none;
  border-radius:4px 0 0 0;
}
.people.top-mode .echo-bubble-visible{
  transform:translateX(-50%) scale(1);
}
.people.top-mode .echo-bubble-out{
  transform:translateX(-50%) scale(0.9);
}

/* Grid mode: same as top-mode positioning */
.people.grid-mode .echo-bubble-anchor{
  top:100%;
  left:50%;
  transform:translateX(-50%);
}
.people.grid-mode .echo-bubble{
  left:50%;
  top:10px;
  transform:translateX(-50%) scale(0.85);
  border-radius:12px;
}
.people.grid-mode .echo-bubble::before{
  left:50%;
  top:-6px;
  transform:translateX(-50%) rotate(45deg);
  border-left:1px solid var(--stroke);
  border-top:1px solid var(--stroke);
  border-bottom:none;
  border-radius:4px 0 0 0;
}
.people.grid-mode .echo-bubble-visible{
  transform:translateX(-50%) scale(1);
}
.people.grid-mode .echo-bubble-out{
  transform:translateX(-50%) scale(0.9);
}

/* Light theme */
[data-theme="light"] .echo-bubble{
  background:#fff;
  border-color:rgba(0,0,0,0.08);
  color:#1a1b1e;
  box-shadow:0 4px 20px rgba(0,0,0,0.1), 0 0 0 1px rgba(99,102,241,0.12);
}
[data-theme="light"] .echo-bubble::before{
  background:#fff;
  border-color:rgba(0,0,0,0.08);
}

/* ============================================================
   Echo Mascot — premium participant tile
   Echo sits in the participants strip alongside the humans, but
   his tile is visually distinct: deep cosmic gradient background,
   subtle violet ring outline, soft state-driven aura around him.
   The mascot is the hero, the tile frames him.
   ============================================================ */
.person.echo-tile .echo-planet-canvas{ display:none; }

/* The tile itself: deep gradient backdrop with a subtle inner glow,
   like looking through a window into a small purple universe. */
.person.echo-tile{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(139,92,246,0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(99,102,241,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #1a1635 0%, #0f0a2e 100%);
  border:1px solid rgba(165,180,252,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 24px rgba(99,102,241,0.08),
    0 4px 14px rgba(15,10,46,0.35);
  transition:border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  position:relative;
  overflow:hidden;
}
[data-theme="light"] .person.echo-tile{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(139,92,246,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(99,102,241,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
  border:1px solid rgba(139,92,246,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 0 20px rgba(139,92,246,0.06),
    0 4px 14px rgba(99,102,241,0.12);
}

/* State-driven outline + glow accent on the tile border. The mascot's
   own drop-shadow already changes color (handled in the mascot rules);
   this adds a subtle ring of light that says "I'm in this state". */
.person.echo-tile.echo-listening{
  border-color:rgba(103,232,249,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 28px rgba(6,182,212,0.18),
    0 4px 18px rgba(6,182,212,0.25),
    0 0 0 1px rgba(103,232,249,0.2);
}
.person.echo-tile.echo-processing{
  border-color:rgba(192,132,252,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 32px rgba(168,85,247,0.22),
    0 4px 22px rgba(168,85,247,0.32),
    0 0 0 1px rgba(192,132,252,0.25);
}
.person.echo-tile.echo-talking{
  border-color:rgba(165,180,252,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 28px rgba(139,92,246,0.18),
    0 4px 18px rgba(139,92,246,0.25),
    0 0 0 1px rgba(165,180,252,0.22);
}

/* Decorative twinkle layer — tiny dots scattered in the background to
   add depth without distracting. Pure CSS, no extra DOM. */
.person.echo-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 76% 14%, rgba(196,181,253,0.5), transparent),
    radial-gradient(1.5px 1.5px at 88% 68%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 22% 78%, rgba(165,180,252,0.4), transparent),
    radial-gradient(1px 1px at 52% 88%, rgba(196,181,253,0.35), transparent);
  pointer-events:none;
  z-index:1;
  opacity:0.7;
}
[data-theme="light"] .person.echo-tile::before{
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(99,102,241,0.35), transparent),
    radial-gradient(1px 1px at 76% 14%, rgba(139,92,246,0.4), transparent),
    radial-gradient(1.5px 1.5px at 88% 68%, rgba(99,102,241,0.3), transparent),
    radial-gradient(1px 1px at 22% 78%, rgba(139,92,246,0.35), transparent),
    radial-gradient(1px 1px at 52% 88%, rgba(99,102,241,0.3), transparent);
  opacity:0.5;
}

/* Name overlay refinement — subtle pill at the bottom-left, premium feel */
.person.echo-tile .name-overlay{
  bottom:8px;
  left:8px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(15,10,46,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.02em;
  color:#e9e3ff;
  border:1px solid rgba(165,180,252,0.18);
  z-index:6;
}
[data-theme="light"] .person.echo-tile .name-overlay{
  background:rgba(255,255,255,0.85);
  color:#4338ca;
  border-color:rgba(139,92,246,0.18);
}

.echo-mascot-layer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.echo-mascot-video{
  height:80%;
  width:auto;
  max-height:160px;
  max-width:160px;
  aspect-ratio:1/1;
  object-fit:contain;
  object-position:center;
  /* Soft purple ambient glow under the robot */
  filter:drop-shadow(0 6px 18px rgba(139,92,246,0.35))
         drop-shadow(0 0 24px rgba(99,102,241,0.25));
  animation:echo-mascot-idle 4.5s ease-in-out infinite;
  transform-origin:center bottom;
  will-change:transform, filter;
  transition:filter .35s ease;
  background:transparent;
}

/* ---- Idle: calm breathing float ---- */
@keyframes echo-mascot-idle{
  0%,100%{ transform:translateY(0) rotate(0deg) scale(1); }
  50%    { transform:translateY(-6px) rotate(-0.5deg) scale(1.015); }
}

/* ---- Listening: lean forward, tilted toward user, cyan glow ---- */
.person.echo-tile.echo-listening .echo-mascot-video{
  animation:echo-mascot-listen 1.8s ease-in-out infinite;
  filter:drop-shadow(0 6px 18px rgba(6,182,212,0.45))
         drop-shadow(0 0 28px rgba(6,182,212,0.35));
}
@keyframes echo-mascot-listen{
  0%,100%{ transform:translateY(-2px) rotate(-2deg) scale(1.02); }
  50%    { transform:translateY(-5px) rotate(-3deg) scale(1.04); }
}

/* ---- Processing: tight energetic shake, violet glow ---- */
.person.echo-tile.echo-processing .echo-mascot-video{
  animation:echo-mascot-process 0.45s ease-in-out infinite;
  filter:drop-shadow(0 6px 18px rgba(168,85,247,0.55))
         drop-shadow(0 0 34px rgba(168,85,247,0.4));
}
@keyframes echo-mascot-process{
  0%,100%{ transform:translate(0,-2px) rotate(0deg); }
  25%    { transform:translate(-1.5px,-3px) rotate(-1deg); }
  50%    { transform:translate(1.5px,-2px) rotate(1deg); }
  75%    { transform:translate(-1px,-3px) rotate(-0.5deg); }
}

/* ---- Talking: bouncy vertical rhythm while TTS plays ---- */
.person.echo-tile.echo-talking .echo-mascot-video{
  animation:echo-mascot-talk 0.55s ease-in-out infinite;
  filter:drop-shadow(0 6px 18px rgba(139,92,246,0.5))
         drop-shadow(0 0 28px rgba(168,85,247,0.3));
}
@keyframes echo-mascot-talk{
  0%,100%{ transform:translateY(0) scale(1,1); }
  40%    { transform:translateY(-5px) scale(0.98,1.03); }
  60%    { transform:translateY(-2px) scale(1.02,0.98); }
}

/* Hide the old particle-planet "core" orb — the mascot IS the center now.
   We keep rings/particles/waves (those live inside the canvas) for halo. */
.person.echo-tile .echo-core,
.person.echo-tile .echo-orb,
.person.echo-tile .echo-glow{
  display:none;
}

/* Light theme — softer drop-shadows so the robot reads on a light bg. */
[data-theme="light"] .echo-mascot-video{
  filter:drop-shadow(0 4px 14px rgba(99,102,241,0.25))
         drop-shadow(0 0 20px rgba(139,92,246,0.18));
}
[data-theme="light"] .person.echo-tile.echo-listening .echo-mascot-video{
  filter:drop-shadow(0 4px 14px rgba(6,182,212,0.35))
         drop-shadow(0 0 22px rgba(6,182,212,0.25));
}
[data-theme="light"] .person.echo-tile.echo-processing .echo-mascot-video{
  filter:drop-shadow(0 4px 14px rgba(168,85,247,0.4))
         drop-shadow(0 0 24px rgba(168,85,247,0.3));
}

/* Small tiles (grid mode, many participants) — shrink mascot further. */
@media (max-width:900px){
  .echo-mascot-video{ max-width:100px; max-height:100px; }
}

/* Respect reduced motion preference. */
@media (prefers-reduced-motion:reduce){
  .echo-mascot-video,
  .person.echo-tile.echo-listening .echo-mascot-video,
  .person.echo-tile.echo-processing .echo-mascot-video,
  .person.echo-tile.echo-talking .echo-mascot-video{
    animation:none;
  }
}

/* ---- Echo Tile Controls (close + mute) ---- */
.echo-tile-controls{
  position:absolute;
  top:8px;
  right:8px;
  z-index:10;
  display:flex;
  gap:4px;
  opacity:0;
  transition:opacity .2s;
}
.echo-tile:hover .echo-tile-controls,
.echo-tile.echo-listening .echo-tile-controls,
.echo-tile.echo-processing .echo-tile-controls{
  opacity:1;
}
.echo-tile-btn{
  width:28px;
  height:28px;
  border-radius:8px;
  border:none;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,0.8);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s, color .15s, transform .15s;
}
.echo-tile-btn:hover{
  background:rgba(0,0,0,0.7);
  color:#fff;
  transform:scale(1.1);
}
.echo-tile-btn.echo-mute-btn.muted{
  color:#ef4444;
}
.echo-tile-btn.echo-close-btn:hover{
  background:rgba(239,68,68,0.6);
}
/* Anchor variant of echo-tile-btn for the "?" help link to /learn/echo. */
a.echo-tile-btn{
  text-decoration:none;
  color:rgba(255,255,255,0.8);
}
a.echo-tile-btn:hover{
  color:#fff;
}

/* ---- Echo Mini-Chat ---- */
.echo-minichat{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:120px;
}
/* Legacy positioning for non-widget mode */
.person:not(.echo-widget) .echo-minichat{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:6px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  background:rgba(26,27,30,0.92);
  border:1px solid var(--stroke);
  border-radius:12px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  transition:max-height .3s cubic-bezier(0.4,0,0.2,1), opacity .25s ease;
  z-index:5;
  height:auto;
  min-height:0;
}
.person:not(.echo-widget) .echo-minichat.open{
  max-height:280px;
  opacity:1;
}
.echo-minichat-messages{
  padding:10px 12px;
  flex:1;
  min-height:0;
  max-height:180px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.1) transparent;
}
/* Empty state */
.echo-minichat-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  color:var(--muted);
  font-size:11px;
  font-style:italic;
  opacity:0.6;
  padding:16px 12px;
  text-align:center;
}
.echo-minichat-msg{
  font-size:13px;
  line-height:1.45;
  color:var(--ink);
  padding:8px 12px;
  background:rgba(99,102,241,0.08);
  border-radius:10px 10px 10px 4px;
  border:1px solid rgba(99,102,241,0.12);
  word-break:break-word;
  white-space:pre-wrap;
  animation:echo-msg-in .25s ease;
}
.echo-minichat-msg.user-msg{
  background:rgba(255,255,255,0.05);
  border-color:var(--stroke);
  border-radius:10px 10px 4px 10px;
  align-self:flex-end;
  color:var(--muted);
}
@keyframes echo-msg-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.echo-minichat-input{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-top:1px solid var(--stroke);
}
.echo-minichat-input input{
  flex:1;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:12px;
  outline:none;
  transition:border-color .2s;
}
.echo-minichat-input input::placeholder{
  color:var(--muted);
}
.echo-minichat-input input:focus{
  border-color:rgba(99,102,241,0.4);
}
.echo-minichat-send{
  width:32px;
  height:32px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s, transform .15s;
  flex-shrink:0;
}
.echo-minichat-send:hover{
  background:#818cf8;
  transform:scale(1.05);
}
.echo-minichat-send svg{
  width:14px;
  height:14px;
}

/* Light theme mini-chat */
[data-theme="light"] .echo-minichat{
  background:rgba(255,255,255,0.94);
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
}
[data-theme="light"] .echo-minichat-msg{
  background:rgba(99,102,241,0.06);
  border-color:rgba(99,102,241,0.1);
  color:#1a1a1a;
}
[data-theme="light"] .echo-minichat-msg.user-msg{
  background:rgba(0,0,0,0.03);
  color:#6b7280;
}

/* Responsive: smaller bubbles on mobile */
@media (max-width:768px){
  .echo-bubble{ max-width:200px; font-size:12px; padding:8px 12px; }
  .echo-minichat{ margin-top:4px; }
  .echo-minichat-messages{ max-height:140px; }
  .screen-viewer-overlay .screen-quality-bar{
    padding:8px 12px;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
    padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
  }
  #screenViewerVideo{
    max-width:calc(100vw - 24px);
    border-radius:8px;
    margin-bottom:8px;
  }
}

/* Touch devices: keep quality bar always visible (no mousemove) */
@media (pointer:coarse){
  .screen-quality-bar{
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .sqb-btn{
    min-height:36px;
    min-width:36px;
    padding:6px 14px;
  }
}

/* ---- Canvas drag-over feedback (drag & drop files) ---- */
.canvas-layer.drag-over::after{
  content:""; position:fixed; inset:0; z-index:9998;
  background:rgba(99,102,241,0.08);
  border:2px dashed var(--accent);
  pointer-events:none;
}
[data-theme="light"] .canvas-layer.drag-over::after{
  background:rgba(99,102,241,0.06);
}

/* ---- Canvas add context menu (right-click) ---- */
.canvas-add-menu{
  display:none;
  position:fixed;
  z-index:99999;
  min-width:180px;
  padding:6px 0;
  background:rgba(26,27,30,0.97);
  border:1px solid var(--stroke);
  border-radius:12px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  font-family:var(--sans);
}
.canvas-add-menu.open{ display:block; }

.cam-btn{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:7px 14px;
  border:none;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  text-align:left;
  transition:background 0.12s;
  line-height:1.3;
}
.cam-btn:hover{ background:rgba(255,255,255,0.07); }
.cam-btn svg{ width:16px; height:16px; flex-shrink:0; }

.cam-sep{
  height:1px;
  margin:4px 10px;
  background:var(--stroke);
}

[data-theme="light"] .canvas-add-menu{
  background:rgba(255,255,255,0.97);
  box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
}
[data-theme="light"] .cam-btn:hover{ background:rgba(0,0,0,0.05); }


/* ---- Floating draw bar (pencil / eraser) ---- */
.draw-float-bar{
  display:none;
  position:fixed;
  z-index:26000;
  padding:4px;
  gap:2px;
  border-radius:12px;
  background:rgba(26,27,30,0.94);
  border:1px solid var(--stroke);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow2);
}
.draw-float-bar.open{
  display:flex;
  align-items:center;
}

.dfb-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background 0.12s, color 0.12s;
}
.dfb-btn:hover{ background:rgba(255,255,255,0.08); color:var(--ink); }
.dfb-btn.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 10px rgba(99,102,241,0.35);
}
.dfb-btn svg{ width:18px; height:18px; }

.dfb-sep{
  width:1px;
  height:20px;
  margin:0 2px;
  background:var(--stroke);
  flex-shrink:0;
}

.dfb-color{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:none;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  transition:background 0.12s;
}
.dfb-color:hover{ background:rgba(255,255,255,0.08); }
.dfb-color-dot{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  background:#ffffff;
  transition:background 0.1s;
}

.dfb-size-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 4px 0 2px;
}
.dfb-size-slider{
  width:72px;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.12);
  outline:none;
}
.dfb-size-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  border:none;
}
.dfb-size-slider::-moz-range-thumb{
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  border:none;
}
.dfb-size-val{
  font-size:11px;
  font-family:'JetBrains Mono',monospace;
  color:var(--muted);
  min-width:28px;
  text-align:right;
  white-space:nowrap;
}

[data-theme="light"] .draw-float-bar{
  background:rgba(255,255,255,0.94);
}
[data-theme="light"] .dfb-btn:hover{ background:rgba(0,0,0,0.06); }
[data-theme="light"] .dfb-color:hover{ background:rgba(0,0,0,0.06); }
[data-theme="light"] .dfb-color-dot{ border-color:rgba(0,0,0,0.15); }
[data-theme="light"] .dfb-size-slider{ background:rgba(0,0,0,0.1); }

/* Lasso selection rectangle */
.lasso-rect{
  position:fixed;
  border:1.5px dashed var(--accent);
  background:rgba(99,102,241,0.08);
  pointer-events:none;
  z-index:99999;
  border-radius:2px;
}

/* Multi-selected box highlight */
.canvas-box.multi-selected{
  outline:2px solid var(--accent) !important;
  outline-offset:0 !important;
  box-shadow:0 0 0 4px rgba(99,102,241,0.15);
}

[data-theme="light"] .lasso-rect{
  background:rgba(99,102,241,0.06);
}
[data-theme="light"] .canvas-box.multi-selected{
  box-shadow:0 0 0 4px rgba(99,102,241,0.12);
}

/* ---- Screen Viewer Overlay ---- */
.screen-viewer-overlay{
  position:fixed;
  inset:0;
  z-index:35000;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.screen-viewer-header{
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
  opacity:0;
  transition:opacity .3s;
}
.screen-viewer-overlay:hover .screen-viewer-header{
  opacity:1;
}
.screen-viewer-name{
  font-size:14px;
  font-weight:600;
  color:#fff;
}
.screen-viewer-exit{
  position:absolute;
  top:14px; right:14px;
  z-index:3;
  width:40px;
  height:40px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s, transform .15s;
}
.screen-viewer-exit:hover{ background:rgba(255,255,255,0.2); transform:scale(1.05); }
.screen-viewer-exit:active{ transform:scale(0.95); }
.screen-viewer-exit svg{ width:18px; height:18px; }
#screenViewerVideo{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  padding:12px;
}
/* ---- Screen Viewer Volume Control ---- */
.screen-viewer-volume{
  position:absolute;
  bottom:20px; left:20px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 14px 6px 8px;
  border-radius:12px;
  background:rgba(255, 255, 255, 0.06);
  border:1px solid rgba(255, 255, 255, 0.12);
  box-shadow:0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter:blur(6.5px);
  -webkit-backdrop-filter:blur(6.5px);
  z-index:4;
  opacity:0;
  transition:opacity .3s;
}
.screen-viewer-overlay:hover .screen-viewer-volume{ opacity:1; }
.sv-vol-btn{
  width:32px; height:32px;
  border:none; border-radius:8px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s;
  flex-shrink:0;
}
.sv-vol-btn:hover{ background:rgba(255,255,255,0.12); }
.sv-vol-btn svg{ width:18px; height:18px; }
.sv-vol-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100px; height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.2);
  outline:none;
  cursor:pointer;
}
.sv-vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 4px rgba(0,0,0,0.3);
  cursor:pointer;
}
.sv-vol-slider::-moz-range-thumb{
  width:14px; height:14px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 4px rgba(0,0,0,0.3);
  cursor:pointer;
}

.screen-viewer-overlay .screen-quality-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:flex;
}
[data-theme="light"] .screen-viewer-overlay{
  background:#fff;
}
[data-theme="light"] .screen-viewer-name{
  color:#1a1b1e;
}
[data-theme="light"] .screen-viewer-close{
  background:rgba(0,0,0,0.06);
  color:#1a1b1e;
}
[data-theme="light"] .screen-viewer-close:hover{
  background:rgba(0,0,0,0.12);
}

/* ---- Google Picker ----
   Must stack above .canvas-layer (z-index:5000) so the file picker is
   clickable when opened from within a live room. Google injects
   .picker-dialog-bg + .picker-dialog on document.body with an inline
   z-index around 1300 — !important is required to override. */
.picker-dialog-bg,
.picker-dialog { z-index: 50000 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OPTION B — Touch-primary refinements
   Scoped to html[data-device="touch"] (set inline in roomV3.ejs <head>
   before CSS loads → no FOUC). Desktop layout untouched.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-device="touch"] body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
html[data-device="touch"] input,
html[data-device="touch"] textarea,
html[data-device="touch"] [contenteditable],
html[data-device="touch"] .canvas-box-content {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Prevent the browser's rubber-band scroll on the canvas layer (iOS) */
html[data-device="touch"] .canvas-layer {
  overscroll-behavior: contain;
}

/* Bottom navbar — wrap toolbar onto a 2nd row instead of horizontal scroll.
   Row 1 : [settings] ... [chat]    Row 2 : [ toolbar tools centered ] */
html[data-device="touch"] .bottom-navbar {
  flex-wrap: wrap;
  row-gap: 8px;
  bottom: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}
html[data-device="touch"] .settings-fab { order: 1; }
html[data-device="touch"] .trash-zone   { order: 2; }
html[data-device="touch"] .chat-fab     { order: 3; margin-left: auto; }
html[data-device="touch"] .toolbar-wrap {
  order: 4;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
html[data-device="touch"] .toolbar {
  max-width: none;
  width: 100%;
  overflow-x: visible;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
}

/* Tap targets ≥ 44 px (Apple HIG). Applies to all touch viewports. */
html[data-device="touch"] .tool {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
html[data-device="touch"] .tool svg,
html[data-device="touch"] .tool > i {
  width: 22px;
  height: 22px;
}
html[data-device="touch"] .settings-fab,
html[data-device="touch"] .chat-fab {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
html[data-device="touch"] .settings-fab svg,
html[data-device="touch"] .settings-fab > i,
html[data-device="touch"] .chat-fab svg,
html[data-device="touch"] .chat-fab > i {
  width: 22px;
  height: 22px;
}

/* Canvas-box handles: bigger + always visible on touch */
html[data-device="touch"] .canvas-box-resize {
  width: 44px;
  height: 44px;
  opacity: 0.85;
}
html[data-device="touch"] .canvas-box-delete {
  width: 36px;
  height: 36px;
  opacity: 0.9;
  visibility: visible;
  pointer-events: auto;
}

/* Zoom / undo mini-buttons — bigger on touch */
html[data-device="touch"] .zoom-ctrl-btn,
html[data-device="touch"] .undo-redo-btn {
  width: 40px;
  height: 40px;
}
html[data-device="touch"] .zoom-ctrl-btn svg,
html[data-device="touch"] .undo-redo-btn svg {
  width: 20px;
  height: 20px;
}

/* Purely-desktop UI — hidden on touch */
html[data-device="touch"] .minimap,
html[data-device="touch"] #hfSkeletonCanvas,
html[data-device="touch"] .hf-cursor {
  display: none !important;
}

html[data-device="touch"] .echo-fab {
  position: relative;
  z-index: 20000;
}

/* Option B — desktop-only features hidden on touch
   (screen-share emission, browser-in-browser, drawing) */
html[data-device="touch"] #btnDraw,
html[data-device="touch"] #btnScreenShare,
html[data-device="touch"] #btnAddBrowser,
html[data-device="touch"] #btnAddBetaBrowser {
  display: none !important;
}

/* Hide hands-free toggle row in settings panel on touch.
   Uses :has() — iOS Safari 15.4+, Chrome 105+. Fallback: row stays
   visible but tapping does nothing (JS guard above prevents init). */
html[data-device="touch"] .theme-toggle-row:has(#handsFreeToggle),
html[data-device="touch"] .cam-pop-pref:has(#handsFreeToggle) {
  display: none !important;
}

/* ===== Temporary room indicator =====
   Shares chrome rules with .zoom-pill / .undo-redo (see the merged
   selectors near the top of this file) so the background, border, and
   shadow stay 1:1 with the zoom + undo pills across both themes. Only
   the inner padding + text styling lives here. Static — no hover. */
.temp-room-pill {
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 34px;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  cursor: help;
}

[data-theme="light"] .temp-room-pill {
  color: rgba(0, 0, 0, 0.45);
}

.temp-room-pill svg {
  flex-shrink: 0;
}