.object-context-strip {display:contents}
.mobile-done {display:none}

@media screen and (max-width:700px) {
  :root {
    --phone-safe-top:env(safe-area-inset-top,0px);
    --phone-safe-right:env(safe-area-inset-right,0px);
    --phone-safe-bottom:env(safe-area-inset-bottom,0px);
    --phone-safe-left:env(safe-area-inset-left,0px);
    --phone-top:max(8px,var(--phone-safe-top));
    --phone-right:max(8px,var(--phone-safe-right));
    --phone-bottom:calc(max(8px,var(--phone-safe-bottom)) + var(--phone-keyboard,0px));
    --phone-left:max(8px,var(--phone-safe-left));
    --phone-tools-height:52px;
    --phone-people-width:110px;
    --phone-row-gap:8px;
    --phone-secondary:calc(var(--phone-bottom) + var(--phone-tools-height) + var(--phone-row-gap));
    --phone-context:calc(var(--phone-secondary) + var(--phone-tools-height) + var(--phone-row-gap));
  }

  button,.board-name {touch-action:manipulation}
  input:not([type=color]),select,textarea {font-size:16px}
  .home-sidebar {padding-top:var(--phone-top);padding-right:max(12px,var(--phone-safe-right));padding-left:max(12px,var(--phone-safe-left))}
  .home-sidebar .team,.home-top {height:44px}
  .home-sidebar .square,.home-top .avatar,.home-top .soft {width:44px;height:44px;flex-basis:44px}
  .home-top {top:var(--phone-top);right:max(12px,var(--phone-safe-right))}
  .home-nav .nav-row,.home-spaces .nav-row {min-height:44px}
  .home-main {margin-right:var(--phone-right);margin-bottom:var(--phone-bottom);margin-left:var(--phone-left)}
  .home-search input {min-height:42px;padding-inline:2px}
  .home-content .section-heading .dark,.home-layout .square,.board-row .square {min-width:44px;min-height:44px}
  .home-content .board-row {grid-template-columns:minmax(90px,2fr) minmax(58px,.65fr) 44px}
  .home-content .board-list[data-layout=grid] .board-row {grid-template-columns:minmax(0,1fr) 44px}
  .home-content .board-name {min-height:46px}
  .home-content .template-link {min-height:34px}
  .home-content .template-strip {overscroll-behavior-inline:contain}

  .board-bar,.people-bar {top:var(--phone-top);height:var(--phone-tools-height);padding:4px}
  .board-bar {left:var(--phone-left);right:calc(var(--phone-right) + var(--phone-people-width) + var(--phone-row-gap));width:auto;max-width:none}
  .people-bar {right:var(--phone-right);width:var(--phone-people-width)}
  .board-bar .square,.board-logo,.share {height:44px}
  .board-bar .square,.board-logo {width:44px;flex:0 0 44px}
  .board-logo {padding:0}
  .board-title {flex:1;min-width:0;width:0;height:44px;padding:3px 5px;font-size:16px}
  .board-bar #save-state {width:36px;flex-basis:36px}
  .board-bar #save-state:is([data-state=saving],[data-state=offline]) svg {display:none}
  .board-bar #save-state[data-state=saving]::before {
    content:'';width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  }
  .board-bar #save-state[data-state=offline]::before {
    content:'!';width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;font-size:11px;line-height:13px;font-weight:700;
  }
  .share {width:100%;margin:0;padding:0 6px;font-size:12px}
  .share svg {width:14px;height:14px}
  body:has(.people-bar .peer-stack:not(:empty)) {--phone-people-width:104px}
  .people-bar .peer-stack {flex:none;padding-left:0;margin-right:5px}
  .people-bar .peer {width:26px;height:26px;margin-left:0;font-size:10px}
  .people-bar .peer + .peer {margin-left:-6px}
  .people-bar .peer:nth-child(n+3) {display:none}
  .people-bar:has(.peer-stack:not(:empty)) .share {width:44px;flex:0 0 44px;gap:0;font-size:0}

  .creation-dock {
    left:var(--phone-left);
    right:var(--phone-right);
    bottom:var(--phone-bottom);
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:stretch;
    gap:6px;
    pointer-events:none;
  }
  .creation-dock :is(.launcher,.creation,.undo-bar) {pointer-events:auto}
  .creation-dock .launcher {display:flex;width:var(--phone-tools-height);border-radius:14px}
  .creation-dock .launcher .square {width:44px;height:44px;flex-basis:44px}
  .creation {min-width:0;justify-content:space-evenly;gap:1px}
  .creation .square {min-width:44px;width:44px;height:44px;flex:1 1 44px}
  .creation-dock[data-editable=false] {right:auto;grid-template-columns:auto}
  .creation-dock[data-editable=false] :is(.launcher,.undo-bar,.creation .square:disabled) {display:none}
  .creation-dock[data-editable=false] .creation .square {flex:0 0 44px}
  .creation-dock .undo-bar {position:absolute;bottom:calc(var(--phone-tools-height) + var(--phone-row-gap));left:0;gap:0}
  .creation-dock .undo-bar .square {width:44px;height:44px;flex:0 0 44px}
  .creation-dock .undo-bar #redo {display:inline-grid}
  :is(.controls,body:has(#draw-tools:not([hidden])) .controls) {
    right:var(--phone-right);
    bottom:var(--phone-secondary);
    height:var(--phone-tools-height);
  }
  .controls .square,.controls .zoom-value {width:44px;min-width:44px;height:44px;flex:0 0 44px}
  .controls .zoom-value {width:54px;min-width:54px;flex-basis:54px;padding-inline:3px;font-size:12px}
  .draw-tools {
    left:var(--phone-left);
    right:var(--phone-right);
    bottom:var(--phone-context);
    gap:1px;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    touch-action:pan-x;
  }
  .draw-tools .square {width:44px;height:44px;flex:0 0 44px}
  .draw-tools .separator {flex:0 0 1px}
  .draw-tools .preset::after {width:29px;height:29px}

  .object-context {
    inset:auto var(--phone-right) var(--phone-context) var(--phone-left);
    max-width:none;
    min-height:var(--phone-tools-height);
    height:auto;
    overflow:visible;
    padding:3px;
    gap:3px;
    border-radius:14px;
  }
  .object-context-strip {
    display:flex;
    align-items:center;
    flex:1;
    min-width:0;
    gap:3px;
    padding-inline:1px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    touch-action:pan-x;
  }
  .object-context .square {width:44px;height:44px;flex:0 0 44px}
  .object-context .square svg {width:20px;height:20px}
  .object-context .mobile-format {order:-1;color:var(--violet-dark)}
  .object-context .context-more {background:var(--quiet);box-shadow:-3px 0 0 white}
  .object-context select,.context-font-size input {height:42px;font-size:16px}
  .context-font-size {gap:0;padding:0}
  .context-font-size input {width:48px;text-align:center}

  body:has(#editor:not([hidden])) :is(.creation-dock,.controls,#draw-tools) {visibility:hidden}
  body:has(#editor:not([hidden])) .mobile-done {
    position:fixed;
    right:var(--phone-right);
    bottom:var(--phone-bottom);
    z-index:17;
    display:inline-flex;
    min-height:44px;
    padding-inline:14px;
  }
  #editor {max-width:calc(100vw - var(--phone-left) - var(--phone-right))}
  :is(#minimap,body:has(#draw-tools:not([hidden])) #minimap) {right:var(--phone-right);bottom:var(--phone-context);width:145px;height:87px}
  body:has(:is(#draw-tools,#object-context):not([hidden])) #minimap {bottom:calc(var(--phone-context) + 60px)}
  :is(.drawer,body:has(#draw-tools:not([hidden])) .drawer) {
    top:calc(var(--phone-top) + var(--phone-tools-height) + var(--phone-row-gap));
    right:var(--phone-right);
    bottom:var(--phone-context);
    width:min(340px,calc(100vw - var(--phone-left) - var(--phone-right)));
  }
  body:has(.drawer:not([hidden])) .object-context {display:none}
  .drawer-content .menu-row,.drawer header .square {min-height:44px}
  .drawer header .square {min-width:44px}
  .call-panel {top:calc(var(--phone-top) + var(--phone-tools-height) + var(--phone-row-gap));right:var(--phone-right)}
  .presentation-controls {bottom:var(--phone-bottom)}
  .presentation-controls .square {min-width:44px;min-height:44px}
  .presentation-controls strong {overflow:hidden;text-overflow:ellipsis}
  .board-timer,.vote-status {top:calc(var(--phone-top) + var(--phone-tools-height) + var(--phone-row-gap))}
  body:has(.board-timer:not([hidden])) .vote-status {top:calc(var(--phone-top) + var(--phone-tools-height) + 58px)}
  #notice {top:calc(var(--phone-top) + var(--phone-tools-height) + var(--phone-row-gap))}

  .popover {
    max-width:calc(100vw - var(--phone-left) - var(--phone-right));
    max-height:calc(var(--phone-visible-height,100dvh) - var(--phone-top) - max(8px,var(--phone-safe-bottom)) - 8px);
    overscroll-behavior:contain;
  }
  .popover .menu-row,.tool-panel-tabs button {min-height:44px}
  .tool-panel-search input {min-height:40px}
  .tool-picker {height:clamp(164px,calc(var(--phone-visible-height,100dvh) - var(--phone-top) - 80px),495px)}
  .tool-panel-tabs,.media-results,.catalog-results {scrollbar-width:thin}
  .media-symbol,.media-upload button {min-height:44px}
  .type-options label {min-height:42px}
  .type-options :is(input:not([type=checkbox]),select) {min-height:40px}
  .type-options .ink-palette {grid-template-columns:repeat(5,minmax(0,1fr))}
  .creation-palette .sticky-palette {grid-template-columns:repeat(4,44px)}
  .creation-palette .note-swatch {width:44px;height:44px}

  dialog[open] {
    inset:auto 0 var(--phone-keyboard,0px);
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    width:calc(100vw - var(--phone-left) - var(--phone-right));
    max-width:calc(100vw - var(--phone-left) - var(--phone-right));
    max-height:calc(var(--phone-visible-height,100dvh) - var(--phone-top) - max(8px,var(--phone-safe-bottom)));
    margin:0 auto max(8px,var(--phone-safe-bottom));
  }
  dialog[open] .dialog-head {min-height:54px;padding:5px 8px 5px 12px}
  dialog[open] .dialog-head .square {width:44px;height:44px;flex:0 0 44px}
  dialog[open] .dialog-content {min-height:0;overflow:auto;overscroll-behavior:contain}
  .dialog-content .form-inline {flex-wrap:wrap}
  .dialog-content .form-inline input {flex:1 0 100%;width:100%}
  .dialog-content .form-inline button,.dialog-content :is(.primary,.soft) {min-height:44px}
  .dialog-content .share-line {flex-wrap:wrap}
  dialog.template-dialog[open] {
    height:calc(var(--phone-visible-height,100dvh) - var(--phone-top) - max(8px,var(--phone-safe-bottom)));
  }
  dialog.template-dialog[open] .dialog-content {overflow:hidden}
  .template-category,.template-search-row input,.template-search-row select {min-height:44px}
  .template-search-row select {max-width:119px}
  .template-tile-meta .square {width:44px;height:44px;flex:0 0 44px}
  .template-tile-meta .soft {font-size:12px}
  .template-detail-actions .square {width:44px;height:44px;flex:0 0 44px}
  .template-back {min-height:44px}

  .assistant-panel {
    inset:var(--phone-visible-top,0px) 0 auto;
    height:var(--phone-visible-height,100dvh);
    gap:9px;
    padding:var(--phone-top) max(12px,var(--phone-safe-right)) max(12px,var(--phone-safe-bottom)) max(12px,var(--phone-safe-left));
  }
  .assistant-panel .square,.assistant-panel .assistant-chat-actions select {min-width:44px;min-height:44px}
  .assistant-panel .assistant-transcript {overscroll-behavior:contain}
  .assistant-panel .assistant-chat-form textarea {max-height:min(28dvh,180px);font-size:16px}
}

@media screen and (max-width:359px) {
  :root {--phone-people-width:52px}
  .board-bar .square {width:40px;flex-basis:40px}
  .board-bar .board-logo,.board-bar #save-state {width:32px;flex-basis:32px}
  .people-bar .share {gap:0;font-size:0}
  .creation .square {min-width:37px;width:37px;flex-basis:37px}
  .controls .square:last-child {display:none}
  .home-content .board-row {grid-template-columns:minmax(80px,2fr) minmax(52px,.65fr) 44px}
}