/* canvas-mobile.css — Adaptive canvas for phone / tablet / Telegram WebApp / PWA
   v20260401f
   ═══════════════════════════════════════════════════════════════════ */

/* ── Safe area variables ── */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* ══════════════════════════════════════════════════════════════
   TABLET  (768 – 1024px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Zoom теперь управляется responsive-scaling.css (graduated).
     Для TG/мобильных zoom задаётся через html[data-tg="1"] селекторы. */

  /* Make board fill the screen */
  html[data-page="canvas"] #app {
    padding: 8px 8px 0 !important;
  }

  /* ── Hide DESKTOP header on tablet/mobile when TG header is active ── */
  html.tg[data-page="canvas"] #desktop-header-include,
  html.tg[data-page="canvas"] .site-header,
  html.tg[data-page="canvas"] [data-component="header"],
  html.tg[data-page="canvas"] [data-aidc-header] {
    display: none !important;
  }
  html.tg[data-page="canvas"] [data-include*="footer"],
  html.tg[data-page="canvas"] .site-footer {
    display: none !important;
  }

  /* ── BOARD MODE on tablet: hide header + footer ── */
  html[data-page="canvas"].canvas-board-mode .site-header,
  html[data-page="canvas"].canvas-board-mode [data-component="header"],
  html[data-page="canvas"].canvas-board-mode [data-aidc-header] {
    display: none !important;
  }
  html[data-page="canvas"].canvas-board-mode [data-include*="footer"],
  html[data-page="canvas"].canvas-board-mode .site-footer {
    display: none !important;
  }

  /* ── DASHBOARD MODE on tablet: compact nav ── */
  html[data-page="canvas"].canvas-dashboard-mode .nav-links {
    display: none !important;
  }
  html[data-page="canvas"].canvas-dashboard-mode .nav-bar {
    padding: 4px 12px;
  }

  /* Toolbar: keep vertical but narrower */
  .toolbar[aria-label] {
    left: calc(10px + var(--sal));
    top: 80px;
    padding: 8px;
    gap: 6px;
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
  }

  .tool-btn {
    width: 38px;
    height: 38px;
  }

  /* Topbar: smaller */
  .board-topbar {
    left: 60px;
    top: 10px;
    right: 16px;
    padding: 8px 10px;
    gap: 8px;
  }

  /* ── TG on tablet: toolbar → horizontal bottom bar (same as phone) ── */
  html.tg .toolbar[aria-label] {
    position: fixed;
    top: auto;
    bottom: calc(var(--sab) + 0px);
    left: 0;
    right: 0;
    flex-direction: row;
    border-radius: 0;
    padding: 6px 10px;
    gap: 4px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 200;
    justify-content: center;
    background: rgba(10, 12, 20, 0.92);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    padding-left: calc(10px + var(--sal));
    padding-right: calc(10px + var(--sar));
    padding-bottom: calc(6px + var(--sab));
  }
  html.tg .toolbar[aria-label] .tool-sep {
    height: 24px;
    width: 1px;
    margin: 0 2px;
  }
  html.tg .board-topbar {
    left: 8px;
    top: calc(8px + var(--sat));
    right: 8px;
    padding: 6px 8px;
    gap: 4px;
  }
  html.tg .zoom-controls {
    bottom: calc(64px + var(--sab));
    right: calc(8px + var(--sar));
    left: calc(8px + var(--sal));
    justify-content: center;
  }
  /* Hide status text, share btn, non-essential pills in TG on tablet */
  html.tg .board-topbar .pill:not(.pill--board-title) {
    display: none;
  }
  html.tg .board-topbar .pill:has(#ws-status-dot) {
    display: inline-flex;
    padding: 0;
    background: none;
    border: none;
    gap: 0;
  }
  html.tg #ws-status-text {
    display: none;
  }
  html.tg .board-topbar .share-topbar-btn {
    display: none !important;
  }
  html.tg #fullscreen-toggle-btn {
    display: none;
  }
  html.tg .board-topbar .presence-bar {
    display: none;
  }

  /* Zoom controls */
  .zoom-controls {
    bottom: calc(12px + var(--sab));
    right: calc(12px + var(--sar));
  }

  /* Minimap */
  .canvas-minimap {
    bottom: calc(60px + var(--sab));
    right: calc(12px + var(--sar));
  }

  /* HUD panel */
  .hud-panel {
    left: 60px;
    bottom: calc(60px + var(--sab));
  }

  /* Multi-selection bar */
  .multi-sel-bar {
    bottom: calc(56px + var(--sab));
  }

  /* Board shell fill */
  .board-shell {
    border-radius: 0;
  }

  /* Submenus */
  .shapes-menu,
  .arrow-type-popup,
  .emoji-popup,
  .export-menu {
    left: calc(100% + 6px);
  }
}

/* ── Dashboard on TABLET ── */
@media (min-width: 768px) and (max-width: 1024px) {
  html[data-page="canvas"].canvas-dashboard-mode .canvas-dashboard {
    padding: 12px 12px 48px;
  }

  html[data-page="canvas"].canvas-dashboard-mode .boards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════
   PHONE  (< 768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Zoom управляется responsive-scaling.css (graduated).
     Для TG/мобильных zoom задаётся через html[data-tg="1"]. */

  /* ════════════════════════════════════════════════════
     HEADER / FOOTER HIDING — canvas on phone
     ════════════════════════════════════════════════════ */

  /* ── BOARD MODE: hide ALL header + footer, fullscreen canvas ── */
  html[data-page="canvas"].canvas-board-mode .site-header,
  html[data-page="canvas"].canvas-board-mode [data-component="header"],
  html[data-page="canvas"].canvas-board-mode [data-aidc-header],
  html[data-page="canvas"].canvas-board-mode [data-include*="header"],
  html[data-page="canvas"].canvas-board-mode #desktop-header-include,
  html[data-page="canvas"].canvas-board-mode #tg-header-root {
    display: none !important;
  }
  html[data-page="canvas"].canvas-board-mode [data-include*="footer"],
  html[data-page="canvas"].canvas-board-mode .site-footer {
    display: none !important;
  }

  /* ── DASHBOARD MODE: show TG header, hide desktop ── */
  html[data-page="canvas"].canvas-dashboard-mode #desktop-header-include {
    display: none !important;
  }
  html[data-page="canvas"].canvas-dashboard-mode .nav-bar {
    display: none !important;
  }
  html[data-page="canvas"].canvas-dashboard-mode .nav-secondary {
    display: none !important;
  }
  /* Compact top-bar: single row — logo + icons only (fallback for non-TG) */
  html[data-page="canvas"].canvas-dashboard-mode .site-header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  html[data-page="canvas"].canvas-dashboard-mode .top-bar {
    padding: 6px 12px;
    gap: 8px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .top-bar .brand-title {
    gap: 6px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .top-bar .logo {
    display: none;
  }
  html[data-page="canvas"].canvas-dashboard-mode .top-bar .brand-sub {
    display: none;
  }
  html[data-page="canvas"].canvas-dashboard-mode .top-bar .mark {
    font-size: 13px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .top-bar .top-right-text {
    display: none;
  }
  html[data-page="canvas"].canvas-dashboard-mode .lang-switch {
    display: none;
  }
  html[data-page="canvas"].canvas-dashboard-mode .top-bar .top-right-tools {
    gap: 6px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .top-bar .header-icon-btn {
    width: 28px;
    height: 28px;
  }
  /* Footer hidden in dashboard too */
  html[data-page="canvas"].canvas-dashboard-mode [data-include*="footer"],
  html[data-page="canvas"].canvas-dashboard-mode .site-footer {
    display: none !important;
  }

  /* ════════════════════════════════════════════════════
     BOARD MODE — Fullscreen canvas on phone
     ════════════════════════════════════════════════════ */
  html[data-page="canvas"].canvas-board-mode body,
  html.canvas-board-mode body {
    overflow: hidden !important;
  }

  html[data-page="canvas"].canvas-board-mode #app {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  html[data-page="canvas"].canvas-board-mode #canvas-board-root.canvas-active {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100;
  }

  html[data-page="canvas"].canvas-board-mode .board-shell {
    position: fixed !important;
    inset: 0 !important;
    border-radius: 0;
    z-index: 1;
  }

  html[data-page="canvas"].canvas-board-mode .shell {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ════════════════════════════════════════════════════
     DASHBOARD MODE — Scrollable on phone
     ════════════════════════════════════════════════════ */
  html[data-page="canvas"].canvas-dashboard-mode,
  html[data-page="canvas"].canvas-dashboard-mode body {
    overflow: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: auto !important;
  }

  html[data-page="canvas"].canvas-dashboard-mode #app {
    padding: 0 !important;
    min-height: auto !important;
    overflow: visible !important;
    height: auto !important;
  }

  html[data-page="canvas"].canvas-dashboard-mode .shell {
    min-height: auto !important;
    overflow: visible !important;
    height: auto !important;
  }

  html[data-page="canvas"].canvas-dashboard-mode .canvas-dashboard {
    padding: 12px 8px 80px;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }

  html[data-page="canvas"].canvas-dashboard-mode #canvas-dashboard-root {
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }

  html[data-page="canvas"].canvas-dashboard-mode #canvas-dashboard-root.canvas-active {
    overflow: visible !important;
    height: auto !important;
  }

  /* Templates — compact */
  html[data-page="canvas"].canvas-dashboard-mode .panel-templates {
    padding: 12px 10px 8px;
    border-radius: 14px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .panel-templates .panel-title {
    font-size: 14px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .template-card {
    width: 100px;
  }

  /* Boards panel — scrollable */
  html[data-page="canvas"].canvas-dashboard-mode .panel-boards {
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
    flex: none !important;
  }
  html[data-page="canvas"].canvas-dashboard-mode .panel {
    padding: 14px 10px;
    border-radius: 14px;
  }

  /* Grid — 2 columns on phone */
  html[data-page="canvas"].canvas-dashboard-mode .boards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    overflow: visible;
    max-height: none;
    padding-bottom: 16px;
  }

  /* Search — full width */
  html[data-page="canvas"].canvas-dashboard-mode .boards-search-box {
    flex: 1 1 100%;
  }

  /* Filters — single compact row (filter + sort + view-toggle) */
  html[data-page="canvas"].canvas-dashboard-mode .boards-filters-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
  }
  /* Hide labels on phone */
  html[data-page="canvas"].canvas-dashboard-mode .boards-filters label,
  html[data-page="canvas"].canvas-dashboard-mode .boards-sort label {
    display: none;
  }
  html[data-page="canvas"].canvas-dashboard-mode .boards-filters,
  html[data-page="canvas"].canvas-dashboard-mode .boards-sort {
    gap: 0;
  }
  /* Compact selects */
  html[data-page="canvas"].canvas-dashboard-mode .custom-select {
    min-width: 0;
  }
  html[data-page="canvas"].canvas-dashboard-mode .custom-select__trigger {
    padding: 5px 24px 5px 8px;
    font-size: 12px;
    border-radius: 8px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .boards-view-toggle {
    margin-left: auto;
    flex-shrink: 0;
  }
  html[data-page="canvas"].canvas-dashboard-mode .view-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  /* Create button — full width */
  html[data-page="canvas"].canvas-dashboard-mode .boards-actions {
    width: 100%;
  }
  html[data-page="canvas"].canvas-dashboard-mode .boards-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .btn-primary,
  html[data-page="canvas"].canvas-dashboard-mode .btn-outline {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    font-size: 13px;
  }

  /* List view — hide extra columns */
  html[data-page="canvas"].canvas-dashboard-mode .boards-list-header,
  html[data-page="canvas"].canvas-dashboard-mode .boards-list-row {
    grid-template-columns: 1fr 50px;
  }
  html[data-page="canvas"].canvas-dashboard-mode .col-users,
  html[data-page="canvas"].canvas-dashboard-mode .col-opened,
  html[data-page="canvas"].canvas-dashboard-mode .col-owner {
    display: none;
  }

  /* ════════════════════════════════════════════════════
     BOARD TOOLBAR / UI — phone layout
     ════════════════════════════════════════════════════ */

  /* Toolbar → bottom horizontal bar */
  .toolbar[aria-label] {
    position: fixed !important;
    top: auto !important;
    bottom: calc(var(--sab) + 0px) !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row;
    border-radius: 0;
    padding: 6px 10px;
    gap: 4px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 200;
    justify-content: center;
    background: rgba(10, 12, 20, 0.95);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    padding-left: calc(10px + var(--sal));
    padding-right: calc(10px + var(--sar));
    padding-bottom: calc(6px + var(--sab));
  }

  .tool-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  /* Separators become vertical */
  .toolbar[aria-label] .tool-sep {
    height: 24px;
    width: 1px;
    margin: 0 2px;
  }

  /* Topbar: simplified, smaller, no overflow */
  .board-topbar {
    left: 8px;
    top: calc(8px + var(--sat));
    right: 8px;
    padding: 6px 8px;
    gap: 4px;
    border-radius: 10px;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  /* Tabs bar — limit width so it doesn't push share btn off screen */
  .board-topbar .canvas-tabs-bar {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }
  .board-topbar .canvas-tabs__list {
    overflow: hidden;
  }

  /* Pills — compact and shrinkable */
  .board-topbar .pill {
    padding: 4px 8px;
    font-size: 11px;
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .board-topbar .pill--board-title #board-title-label {
    max-width: 100px !important;
  }

  /* Hide non-essential topbar items */
  .board-topbar .pill:not(.pill--board-title) {
    display: none;
  }
  /* Show ONLY the status dot (green circle) */
  .board-topbar .pill:has(#ws-status-dot) {
    display: inline-flex;
    padding: 0;
    background: none;
    border: none;
    gap: 0;
    min-width: auto;
  }
  .board-topbar .pill:has(#ws-status-dot) #ws-status-text {
    display: none;
  }
  /* Fallback for browsers without :has() — hide all status text */
  #ws-status-text {
    display: none;
  }
  #fullscreen-toggle-btn {
    display: none;
  }
  .selection-hud {
    display: none !important;
  }

  /* Share button — HIDDEN on mobile */
  .board-topbar .share-topbar-btn {
    display: none !important;
  }
  .board-topbar .share-topbar-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Presence bar — hide on phone or make minimal */
  .board-topbar .presence-bar {
    display: none;
  }

  /* Zoom controls: above bottom toolbar */
  .zoom-controls {
    bottom: calc(64px + var(--sab));
    right: calc(8px + var(--sar));
    left: calc(8px + var(--sal));
    padding: 4px 6px;
    gap: 4px;
    border-radius: 10px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .zoom-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  #zoom-label {
    font-size: 11px;
  }

  /* Hide minimap on phone */
  .canvas-minimap {
    display: none !important;
  }

  /* HUD panel — move above toolbar */
  .hud-panel {
    left: 8px;
    bottom: calc(64px + var(--sab));
    font-size: 11px;
    padding: 6px 8px;
    display: none;
  }

  /* Multi-selection bar */
  .multi-sel-bar {
    bottom: calc(68px + var(--sab));
    font-size: 11px;
    padding: 4px 8px;
    gap: 2px;
  }
  .multi-sel-bar__btn {
    padding: 5px 8px;
    font-size: 11px;
  }

  /* Submenus: popup above toolbar */
  .shapes-menu,
  .arrow-type-popup,
  .emoji-popup,
  .export-menu {
    position: fixed;
    left: 50% !important;
    transform: translateX(-50%);
    top: auto !important;
    bottom: calc(68px + var(--sab));
    max-width: calc(100vw - 16px);
  }

  .emoji-popup {
    width: calc(100vw - 16px);
    max-height: 50vh;
  }

  /* Comment dialog: full width */
  .comment-dialog {
    position: fixed;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(68px + var(--sab)) !important;
    top: auto !important;
    width: auto;
    border-radius: 14px 14px 0 0;
    max-height: 50vh;
  }

  .canvas-ctx-menu {
    max-width: calc(100vw - 24px);
  }

  /* Frames panel */
  .frames-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 12px 12px 0 0;
    bottom: calc(56px + var(--sab));
    top: auto !important;
    max-height: 45vh;
  }

  /* Connector panel */
  .connector-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(64px + var(--sab)) !important;
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px);
  }

  /* ════════════════════════════════════════════════════
     DRAWING TOOLBAR — vertical right panel (Canva-like)
     Override inline CSS from canvas-drawing.js
     ════════════════════════════════════════════════════ */
  .drawing-toolbar {
    position: fixed !important;
    /* Position below topbar + tabs row (~104px) so panel doesn't overlap them.
       Bottom must clear the zoom-controls bar (~48px tall, anchored at 64px+sab)
       so bottom toolbar can stretch full width without right-shift. */
    top: calc(104px + var(--sat)) !important;
    bottom: calc(120px + var(--sab) + 8px) !important;
    left: auto !important;
    right: 4px !important;
    transform: none !important;
    width: 40px !important;
    height: auto !important;
    /* Hard cap height so global --zoom on body doesn't let the panel grow past viewport.
       Override responsive-scaling.css `.drawing-toolbar { max-height: calc(100vh/var(--zoom)-120px) }` */
    max-height: calc(100vh - 104px - 128px - var(--sat) - var(--sab)) !important;
    /* No scroll — sliders use flex:1 to fill all remaining vertical space. */
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 12px !important;
    padding: 4px 2px !important;
    gap: 2px !important;
    z-index: 9990 !important;
  }
  .drawing-toolbar .dt-btn {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 auto !important;
  }
  .drawing-toolbar .dt-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  .drawing-toolbar .dt-sep {
    height: 1px !important;
    width: 70% !important;
    margin: 1px 0 !important;
    flex: 0 0 auto !important;
  }
  /* Slider wrappers fill all remaining vertical space equally,
     making brush-size and opacity sliders as tall as possible. */
  .drawing-toolbar .dt-slider-wrap {
    flex: 1 1 0 !important;
    min-height: 60px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
  }
  .drawing-toolbar .dt-vslider {
    writing-mode: vertical-lr !important;
    direction: rtl !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 50px !important;
    width: 22px !important;
  }
  .drawing-toolbar .dt-slider-wrap .dt-val,
  .drawing-toolbar .dt-slider-wrap span {
    font-size: 9px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }

  /* Drawing popover — above bottom toolbar, not next to drawing bar */
  .dt-popover {
    position: fixed !important;
    bottom: calc(68px + var(--sab)) !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    max-width: 320px !important;
    max-height: 50vh !important;
  }

  /* Drawing toolbar is now positioned ABOVE the zoom-controls (bottom: 120px+sab+8px),
     so we no longer need to shift zoom-controls left — it can stretch full width. */
  body.drawing-toolbar-open .zoom-controls {
    /* keep default left/right from base mobile rules — full width */
    right: calc(8px + var(--sar)) !important;
    left: calc(8px + var(--sal)) !important;
  }

  /* Same for bottom toolbar — no need to indent its right side anymore. */
  body.drawing-toolbar-open .toolbar[aria-label] {
    padding-right: 0 !important;
  }

  /* ════════════════════════════════════════════════════
     FORMAT BARS — position above bottom toolbar on phones
     ════════════════════════════════════════════════════ */
  .canvas-format-bar.is-visible {
    max-width: calc(100vw - 16px) !important;
    overflow-x: auto !important;
  }

  /* Freehand format bar (selected drawing) — above bottom toolbar */
  .freehand-format-bar {
    bottom: calc(68px + var(--sab)) !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 16px) !important;
  }
  .freehand-format-bar .ffb-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LANDSCAPE on phones  (short height)
   ══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (max-width: 1024px) {
  /* Hide header in landscape board mode too */
  html[data-page="canvas"].canvas-board-mode .site-header,
  html[data-page="canvas"].canvas-board-mode [data-aidc-header] {
    display: none !important;
  }

  /* Toolbar: vertical on left side, compact */
  .toolbar[aria-label] {
    position: fixed;
    flex-direction: column;
    top: calc(8px + var(--sat));
    bottom: calc(8px + var(--sab));
    left: calc(4px + var(--sal));
    right: auto;
    padding: 4px;
    gap: 3px;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 10px;
  }

  .tool-btn {
    width: 34px;
    height: 34px;
  }

  .toolbar[aria-label] .tool-sep {
    height: 1px;
    width: 100%;
    margin: 1px 0;
  }

  .board-topbar {
    left: 48px;
    top: calc(6px + var(--sat));
  }

  .zoom-controls {
    bottom: calc(8px + var(--sab));
    right: calc(8px + var(--sar));
  }
}

/* ══════════════════════════════════════════════════════════════
   TELEGRAM WEBAPP  (data-tg="1")
   ══════════════════════════════════════════════════════════════ */
/* In TG WebApp — always hide full site header + wrapper + footer */
html[data-tg="1"][data-page="canvas"] .site-header,
html[data-tg="1"][data-page="canvas"] [data-aidc-header],
html[data-tg="1"][data-page="canvas"] [data-component="header"],
html[data-tg="1"][data-page="canvas"] [data-include*="header"],
html[data-tg="1"][data-page="canvas"] #desktop-header-include {
  display: none !important;
}
html[data-tg="1"][data-page="canvas"] [data-include*="footer"],
html[data-tg="1"][data-page="canvas"] .site-footer {
  display: none !important;
}

/* TG board topbar: account for Telegram's own header */
html[data-tg="1"] .board-topbar {
  top: calc(12px + var(--sat));
}

/* TG header on canvas page — proper sizing */
html.tg[data-page="canvas"] #tg-header-root {
  padding: 0 8px;
}
html.tg[data-page="canvas"] #app {
  padding: 0 !important;
}
html.tg[data-page="canvas"].canvas-board-mode #tg-header-root {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   PWA standalone mode
   ══════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  .board-topbar {
    top: calc(12px + var(--sat));
  }
}

/* ══════════════════════════════════════════════════════════════
   TOUCH device optimizations
   ══════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .tool-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .zoom-btn {
    min-width: 36px;
    min-height: 36px;
  }

  /* Prevent iOS bounce / pull-to-refresh on canvas */
  .board-stage {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
  }

  .board-shell {
    touch-action: none;
    overscroll-behavior: none;
  }

  /* Prevent text selection while drawing */
  .toolbar--drawing-locked ~ .board-stage {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Slightly bigger anchor dots */
  .anchor-menu__btn {
    padding: 10px 14px;
    font-size: 14px;
  }

  /* No scrollbar on touch */
  .toolbar[aria-label]::-webkit-scrollbar {
    display: none;
  }
  .toolbar[aria-label] {
    scrollbar-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   TOUCH DEVICES — remove heavy shadows / filters on canvas UI
   ══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .toolbar[aria-label] {
    box-shadow: none;
  }
  html.tg .toolbar[aria-label] {
    box-shadow: none;
  }
  .board-topbar {
    box-shadow: none;
  }
  .zoom-controls {
    box-shadow: none;
  }
}