body {
  display: flex;
  flex-direction: column;
}

.topbar {
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) var(--sp-4) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-surface);
  border-bottom: var(--bw-sticker) solid var(--c-shadow);
}

.iconbtn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-size: 19px;
  cursor: pointer;
  flex: 0 0 auto;
}
.iconbtn:active { background: var(--c-surface-2); }

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--weight-head);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin-inline-end: auto;
}
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); }
/* Stage modes read in the topbar ("Tonton Live", "Tonton Editor") instead of an h1. */
.brand-mode { font-family: var(--font-display); font-weight: var(--weight-head); font-size: var(--fs-xl); letter-spacing: -0.01em; color: var(--c-ink-soft); white-space: nowrap; }
.brand-mode:empty { display: none; }
@media (max-width: 560px) {
  .brand:has(.brand-mode:not(:empty)) .brand-name,
  .brand:has(.brand-mode:not(:empty)) .brand-mode { font-size: var(--fs-md); white-space: nowrap; }
}

/* ---------- side drawer ---------- */
.drawer-scrim {
  position: fixed; inset: 0;
  background: var(--c-overlay);
  z-index: 80;
}
.drawer {
  position: fixed;
  top: 0; bottom: 0; inset-inline-start: 0;
  z-index: 81;
  width: min(80vw, 300px);
  background: var(--c-surface);
  border-inline-end: var(--bw-sticker) solid var(--c-shadow);
  padding: calc(var(--safe-top) + var(--sp-4)) var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateX(-105%);
  transition: transform var(--t-pop) var(--ease-bounce);
  box-shadow: var(--shadow-float);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: var(--weight-head); font-size: var(--fs-xl);
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
}
.drawer-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  border: 0; background: transparent;
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  cursor: pointer;
  text-align: start;
  width: 100%;
}
.drawer-item i { width: 22px; text-align: center; color: var(--c-ink-soft); }
.drawer-item:active, .drawer-item.active { background: var(--c-surface-2); }
.drawer-item.active i { color: var(--c-accent-deep); }
.drawer-sep { height: var(--bw-thin); background: var(--c-line); margin: var(--sp-2); }

#app {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.screen {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
  animation: rise-in var(--t-pop) var(--ease-bounce);
}

/* ---------- bottom tab bar ---------- */
.tabbar {
  flex: 0 0 auto;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  background: var(--c-surface);
  border-top: var(--bw-sticker) solid var(--c-shadow);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tap-min);
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  font-weight: 500;
}
.tab i { font-size: 19px; }
.tab.active { color: var(--c-accent-deep); }
.tab.active i { transform: translateY(-2px) scale(1.12); transition: transform var(--t-pop) var(--ease-bounce); }

.tab--desk { display: none; }
.tab--signout { border: 0; background: transparent; cursor: pointer; text-align: start; }

body.chat-open .tabbar { display: none; }
body.chat-open #app { overflow: hidden; }
body.login-open .tabbar, body.login-open .topbar { display: none; }

/* ---------- wider screens: left rail instead of bottom bar ----------
   Grid, not wrapped flex: the app row must be a definite height or #app
   sizes to its content, its overflow-y never engages, and body's
   overflow:hidden silently amputates every screen below the fold. */
@media (min-width: 860px) {
  body {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .topbar { grid-row: 1; grid-column: 1 / -1; }
  #navMenu { display: none; }
  .tabbar {
    grid-row: 2;
    grid-column: 1;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-2) calc(var(--sp-3) + var(--safe-bottom));
    border-top: 0;
    border-inline-end: var(--bw-sticker) solid var(--c-shadow);
  }
  .tab {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-3);
    padding: 0 var(--sp-4);
    min-height: 48px;
    border-radius: var(--r-md);
    font-size: var(--fs-md);
  }
  .tab.active { background: var(--c-accent-soft); }
  .tab.active i { transform: none; }
  .tab--phone { display: none; }
  .tab--desk { display: flex; }
  /* Pinned to the foot of the rail: with 20 destinations the rail scrolls,
     and a sign-out you have to hunt for is the bug this is fixing. */
  .tab--signout {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: var(--c-surface);
    border-top: var(--bw-thin) solid var(--c-line);
    border-radius: 0;
    color: var(--c-danger);
  }
  .tab--signout i { color: var(--c-danger); }
  #app { grid-row: 2; grid-column: 2; }
  body.chat-open .tabbar { display: flex; }
  body.login-open .tabbar { display: none; }
  body.login-open #app { grid-column: 1 / -1; }
  .screen, .chat { max-width: 820px; }
}

/* The rail sits against the left edge at every width. Centring the whole
   rail+content block on wide screens floated the sidebar into the middle of
   the window on every screen except the full-bleed go-live stage; the
   content itself still centres inside the main column via .screen. */

/* ---------- desktop shell: the topbar is the window's title bar ---------- */
html.shell .topbar {
  -webkit-app-region: drag;
  padding-inline-end: calc(100% - env(titlebar-area-width, 100%));
}
html.shell .topbar :is(a, button, input, select, textarea, [role="button"]) { -webkit-app-region: no-drag; }
html.shell :is(img, a, .brand) { -webkit-user-drag: none; }
html.shell :is(.topbar, .tabbar, .screen-head, .tabs, .btn, .iconbtn, .chip, .list-item, label) { user-select: none; }
html.shell :is(.btn, .iconbtn, .tab, .chip--btn, .list-item, .tabs a, .tab--signout, button) { cursor: default; }
html.shell a[href^="http"] { cursor: pointer; }

/* ---------- pointer devices: every control answers the hover ---------- */
@media (hover: hover) and (pointer: fine) {
  .iconbtn, .tab, .chip--btn, .btn--ghost { transition: background var(--t-fast), color var(--t-fast); }
  .iconbtn:hover, .btn--ghost:hover, .chip--btn:hover { background: var(--c-surface-2); }
  .tab:hover { background: var(--c-surface-2); color: var(--c-ink); }
  .tab.active:hover { background: var(--c-accent-soft); color: var(--c-accent-deep); }
  .btn:hover { filter: brightness(0.965); }
  .btn--primary:hover { filter: brightness(1.04); }
  .list-item:hover { background: var(--c-surface-2); }
  .btn[disabled]:hover { filter: none; }
}

/* ---------- wide layout: the screen head is a toolbar, not a page heading ---------- */
@media (min-width: 860px) {
  #app .screen-head {
    position: sticky; top: calc(-1 * var(--sp-4)); z-index: 6;
    min-height: 48px; gap: var(--sp-2);
    margin: calc(-1 * var(--sp-4)) 0 var(--sp-4);
    padding: var(--sp-2) 0;
    background: var(--c-bg);
    border-bottom: var(--bw-thin) solid var(--c-line);
  }
  .topbar .brand { margin-inline-end: 0; }
  .topbar-tool { flex: 1 1 auto; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: var(--sp-4); padding-inline-start: var(--sp-4); border-inline-start: var(--bw-thin) solid var(--c-line); }
  .topbar-tool:empty { border: 0; }
  .topbar-tool .screen-head { flex: 1 1 auto; min-width: 0; margin: 0; gap: var(--sp-2); }
  .topbar-tool .screen-head h1 { font-size: var(--fs-lg); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-tool .screen-head h1 i { color: var(--c-ink-faint); font-size: var(--fs-md); }
  .topbar-tool .screen-head .btn { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-width: var(--bw-sticker); box-shadow: none; }
  .topbar-tool .screen-head .btn:active { transform: none; }
  .topbar-tool .screen-head .btn--icon { width: 34px; }
  .topbar-tool .screen-head .help { font-size: var(--fs-xs); white-space: nowrap; }
  .topbar-tool .screen-head input[type="text"] { min-height: 34px; }
  #app .screen-head h1 { font-size: var(--fs-lg); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); }
  #app .screen-head h1 i { color: var(--c-ink-faint); font-size: var(--fs-md); }
  #app .screen-head .btn { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-width: var(--bw-sticker); box-shadow: none; }
  #app .screen-head .btn--primary { box-shadow: none; }
  #app .screen-head .btn:active { transform: none; }
  #app .screen-head .btn--icon { width: 34px; }
  #app .screen-head .help { font-size: var(--fs-xs); }
  #app .screen-head input[type="text"] { min-height: 34px; }
}

/* ---------- wide layout: the rail folds to icons ---------- */
.rail-toggle { display: none; border: 0; background: transparent; }
.rail-tip {
  position: fixed; z-index: 95; pointer-events: none;
  transform: translateY(-50%);
  background: var(--c-ink); color: var(--c-bg);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  padding: 5px 10px; border-radius: var(--r-sm); white-space: nowrap;
  opacity: 0; transition: opacity var(--t-fast);
}
.rail-tip.is-on { opacity: 1; }
@media (min-width: 860px) {
  html.rail-collapsed { --rail-w: 64px; }
  .tabbar { transition: width var(--t-pop); }
  .rail-toggle { display: flex; color: var(--c-ink-faint); min-height: 40px; }
  .rail-toggle span { font-size: var(--fs-xs); }
  html.rail-collapsed .rail-toggle i { transform: scaleX(-1); }
  html.rail-collapsed .tabbar { padding-inline: var(--sp-2); }
  html.rail-collapsed .tab { justify-content: center; padding: 0; gap: 0; }
  html.rail-collapsed .tab span { display: none; }
  html.rail-collapsed .tab i { font-size: 20px; }
}

/* ---------- boards: cards the creator arranges ---------- */
.board { display: grid; grid-template-columns: repeat(var(--board-cols, 12), minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.board-item { position: relative; min-width: 0; grid-column: 1 / -1; }
.board-item > :not(.bd-grip):not(.bd-resize) { margin: 0; }
.bd-grip:not(.bd-grip--own), .bd-resize { display: none; }
.home-head { display: flex; align-items: center; gap: var(--sp-3); }
.home-head .home-greeting { flex: 1 1 auto; min-width: 0; }
.home-reset { display: none; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .board-item { grid-column: span var(--span, 12); }
  .home-reset { display: inline-flex; }
  .bd-grip:not(.bd-grip--own) {
    display: flex; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); z-index: 2;
    width: 36px; height: 16px; align-items: center; justify-content: center; border-radius: var(--r-pill);
    color: var(--c-ink-faint); font-size: 12px; cursor: grab; opacity: 0; transition: opacity var(--t-fast);
  }
  .board-item:hover .bd-grip:not(.bd-grip--own), .is-arranging .bd-grip:not(.bd-grip--own) { opacity: 1; }
  .bd-grip:active { cursor: grabbing; }
  .bd-resize { display: block; position: absolute; top: 14px; bottom: 14px; right: -4px; width: 8px; z-index: 2; border-radius: 4px; cursor: ew-resize; }
  .board-item:hover .bd-resize { background: var(--c-line); }
  .board-item.is-dragging { opacity: 0.85; outline: 2px dashed var(--c-accent-deep); outline-offset: 3px; }
  .is-arranging, .is-arranging * { user-select: none; }
}

/* ---------- boards on the stage screens ---------- */
#app .gl-strip.board { display: grid; }
.board-item .gl-card { min-width: 0; max-width: none; flex: none; }
.bd-grip--own { cursor: grab; }
.bd-grip--own:active { cursor: grabbing; }
.clips-search { max-width: 320px; min-height: 34px; }
.topbar-tool .clips-search { margin-inline-start: var(--sp-2); }
.clips-filters { flex-wrap: wrap; row-gap: var(--sp-1); align-items: center; }
.clips-sep { width: 1px; height: 18px; background: var(--c-line); margin-inline: var(--sp-1); }

.screen-head.al-head h1 { flex: 1; }
.topbar-tool .al-head { justify-content: flex-start; }

/* ---------- the rail is a board too ---------- */
.settings-rail-reset { display: none; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .tabbar.is-arranging, .tabbar.is-arranging * { user-select: none; }
  .tab--desk.is-dragging { opacity: 0.85; outline: 2px dashed var(--c-accent-deep); outline-offset: -2px; background: var(--c-surface-2); }
  .settings-rail-reset { display: block; }
}

/* ---------- tooltips, folded prose, menus instead of sheets ---------- */
.help-tip { display: none; }
.sheet-check { margin-inline-start: auto; color: var(--c-accent-deep); }
.ui-tip {
  position: fixed; z-index: 96; pointer-events: none; max-width: 320px;
  background: var(--c-ink); color: var(--c-bg); font-size: var(--fs-sm); line-height: 1.4;
  padding: 7px 10px; border-radius: var(--r-sm); white-space: pre-line;
  opacity: 0; transition: opacity var(--t-fast);
}
.ui-tip.is-on { opacity: 1; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  p.help[data-folded] { display: none; }
  .help-tip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--c-ink-faint); font-size: 13px; cursor: default; margin: 2px 0; }
  .help-tip:hover, .help-tip:focus-visible { color: var(--c-ink); background: var(--c-surface-2); outline: none; }
  #sheets .scrim--clear { background: transparent; }
  #sheets .sheet--desk {
    left: auto; right: auto; bottom: auto; margin: 0;
    width: min(440px, calc(100vw - 16px)); max-height: 70vh;
    border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md);
    padding: var(--sp-2); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); animation: none;
  }
  #sheets .sheet--center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  #sheets .sheet--desk h3 { font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--sp-1); padding: var(--sp-1) var(--sp-2) var(--sp-2); border-bottom: var(--bw-thin) solid var(--c-line); display: flex; align-items: center; gap: var(--sp-2); }
  #sheets .sheet--desk .sheet-actions { gap: 1px; margin-top: 0; }
  #sheets .sheet--desk .sheet-actions .btn {
    min-height: 32px; justify-content: flex-start; text-align: start; gap: var(--sp-2);
    padding: 0 var(--sp-2); border: 0; box-shadow: none; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 500; background: transparent; color: var(--c-ink);
  }
  #sheets .sheet--desk .sheet-actions .btn:active { transform: none; }
  #sheets #sheets .sheet--desk .sheet-actions .btn:hover, #sheets .sheet--desk .sheet-actions .btn:focus-visible { background: var(--c-surface-2); outline: none; }
  #sheets .sheet--desk .sheet-actions .btn--primary { background: var(--c-accent-soft); color: var(--c-accent-deep); }
  #sheets .sheet--desk .sheet-actions .btn--danger { color: var(--c-danger); }
  #sheets .sheet--desk .sheet-actions .btn--ghost { color: var(--c-ink-soft); }
  #sheets .sheet--desk .sheet-filter { margin: 0 0 var(--sp-1); min-height: 32px; font-size: var(--fs-sm); }
  #sheets .sheet--desk p.help { font-size: var(--fs-xs); padding: 0 var(--sp-2); margin-bottom: var(--sp-2); }
  #sheets .sheet--desk .sheet-confirm .sheet-actions { flex-direction: row-reverse; justify-content: flex-start; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1); }
  #sheets .sheet--desk .sheet-confirm .sheet-actions .btn { width: auto; min-height: 34px; padding: 0 var(--sp-3); border: var(--bw-sticker) solid var(--c-line); font-weight: 600; }
  #sheets .sheet--desk .sheet-confirm .sheet-actions .btn--primary { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent-deep); }
  #sheets .sheet--desk .sheet-confirm .sheet-actions .btn--danger { border-color: var(--c-danger); }
}

/* ---------- desktop density ---------- */
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  body .btn { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-width: var(--bw-sticker); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--c-shadow); }
  body .btn--primary { box-shadow: 0 2px 0 var(--c-accent-deep); }
  body .btn--danger { box-shadow: 0 2px 0 var(--c-danger); }
  body .btn--ghost { box-shadow: none; }
  body .btn:active { transform: translateY(2px); box-shadow: none; }
  body .btn--small { min-height: 28px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
  body .btn--icon { width: 34px; padding: 0; }
  body .btn--block { width: auto; }
  body .quick-actions .btn, body .btn-row .btn { width: 100%; }
  body .iconbtn { width: 34px; height: 34px; font-size: 16px; }
  body .input, body .select { min-height: 34px; font-size: var(--fs-sm); padding: 0 var(--sp-2); }
  body .textarea { min-height: 64px; font-size: var(--fs-sm); }
  body .list-item { min-height: 44px; padding: var(--sp-2) var(--sp-3); }
  body .card { padding: var(--sp-3); }
  body .card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
  body .stage-panel-body .btn, body .gl-card__body .btn, body .we__panel .btn { min-height: 30px; font-size: var(--fs-xs); }
  body .stage-panel-grip, body .gl-card__head { font-size: var(--fs-sm); }
}

/* ---------- the world editor fills the pane ---------- */
@media (min-width: 860px) {
  #app:has(.worlds-build) { overflow: hidden; }
  #app .screen:has(.worlds-build) { max-width: none; height: 100%; display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); animation: none; }
  #app .screen:has(.worlds-build) .worlds-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #app .screen:has(.worlds-build) .worlds-build { flex: 1 1 auto; min-height: 0; }
  #app .worlds-build .we { height: 100%; min-height: 0; }
}

.update-chip { gap: 6px; }
@media (max-width: 859px) { .update-chip span { display: none; } }