/* Zuno 0.21: the phone layout (760px wide and below). */

@media (max-width: 760px) {
  /* ---- Settings & Server Settings: a list, then a page with a Back bar ---- */
  .settings.m-list { display: block; overflow: hidden; }
  .settings.m-list .settings-nav { position: absolute; inset: 0; width: 100%; min-width: 0; display: block; padding: calc(60px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; transition: transform .28s var(--ease-out); }
  .settings.m-list .settings-nav > div { width: 100%; display: block !important; overflow: visible; padding-right: 0; }
  .settings.m-list .settings-nav h5, .settings.m-list .settings-nav .sep { display: block; }
  .settings.m-list .settings-nav h5 { padding: 14px 12px 6px; font-size: 12px; }
  .settings.m-list .settings-nav button { display: flex; align-items: center; width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; border-radius: 12px; margin: 0 0 2px; white-space: normal; background: transparent; }
  .settings.m-list .settings-nav button[data-s]::after, .settings.m-list .settings-nav button[data-ss]::after { content: '›'; margin-left: auto; font-size: 22px; color: var(--muted); line-height: 1; }
  .settings.m-list .settings-nav button.active { background: transparent; color: var(--text); }
  .settings.m-list .settings-nav .ss-head { padding: 0 12px 12px; }
  .settings.m-list .settings-nav .ss-search, .settings.m-list .settings-nav .set-search { margin: 0 4px 10px; }
  .settings.m-list .settings-main { position: absolute; inset: 0; padding: 0 16px calc(90px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--main); transform: translateX(100%); transition: transform .28s var(--ease-out); visibility: hidden; }
  .settings.m-list.m-page .settings-main { transform: none; visibility: visible; }
  .settings.m-list.m-page .settings-nav { transform: translateX(-30%); }
  .settings.m-list.m-page > .settings-close { display: none; }
  .settings.m-list > .settings-close { top: calc(10px + env(safe-area-inset-top)) !important; }
  .m-set-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0 -16px 12px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px; background: color-mix(in srgb, var(--main) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
  .m-set-bar b { flex: 1; text-align: center; color: var(--header); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-set-back, .m-set-x { min-width: 64px; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--brand, var(--accent)); font-size: 16px; font-weight: 600; text-align: left; }
  .m-set-x { text-align: right; color: var(--muted); font-size: 18px; }
  .settings-main h2 { font-size: 22px !important; }
  .settings-main .setting-row { gap: 12px; }
  .settings-main .profile-editor .preview { max-width: none; }
  .save-bar { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); flex-wrap: wrap; }

  /* ---- top bar ---- */
  .topbar { gap: 4px; }
  .topbar .tabs, .topbar .friends-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; min-width: 0; }
  .topbar .tabs::-webkit-scrollbar { display: none; }
  .topbar .tab { flex: none; }
  .topbar .icon-btn { min-width: 40px; min-height: 40px; }
  .topbar.m-searching > :not(.tb-tools), .topbar.m-searching .tb-tools > :not(.tb-search):not(.search-pop):not(.search-results) { visibility: hidden !important; }
  .topbar.m-searching .tb-search { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); width: auto !important; height: 40px; z-index: 5; padding: 0 10px; box-shadow: inset 0 0 0 1.5px var(--brand); background: var(--rail); }
  .topbar.m-searching .tb-search input { display: block !important; font-size: 16px; }
  .m-search-x { display: none; }
  .topbar.m-searching .m-search-x { display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); font-size: 16px; }

  /* ---- menus become bottom sheets ---- */
  .menu.m-sheet { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; max-height: 72dvh; overflow-y: auto; border-radius: 18px 18px 0 0 !important; padding: 18px 8px calc(10px + env(safe-area-inset-bottom)) !important; animation: sheet-up .24s var(--ease-out) both !important; transition: transform .15s; overscroll-behavior: contain; }
  .menu.m-sheet::before { content: ''; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--muted); opacity: .45; }
  .menu.m-sheet > button, .menu.m-sheet .menu-item { min-height: 48px; font-size: 16px; padding: 10px 14px !important; border-radius: 12px; }
  .menu.m-sheet .pa-box { padding: 8px 12px; }

  /* ---- chat & lists: bigger things to tap ---- */
  .channel, .nav-item, .dm-item { min-height: 40px; }
  .msg { padding-top: 2px; }
  .toast { top: calc(64px + env(safe-area-inset-top)); }
  .overlay > .modal, .overlay > .dialog { max-height: calc(100dvh - 24px); }
  .profile-panel.drawer-open { display: block !important; position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); z-index: 85; margin: 0 !important; border-radius: 0 !important; overflow-y: auto; box-shadow: -12px 0 40px rgba(0,0,0,.45); animation: tp-in .22s var(--ease-out) both; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .profile-panel.drawer-open { display: block !important; position: fixed; top: calc(var(--tb, 0px) + 8px); right: 8px; bottom: 8px; width: min(320px, 86vw); z-index: 85; overflow-y: auto; box-shadow: -12px 0 40px rgba(0,0,0,.45), 0 0 0 1px var(--border); }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (max-width: 760px) {
  /* Friends: the tabs scroll sideways instead of running off the screen */
  .topbar:has(> .tab) { overflow-x: auto; scrollbar-width: none; }
  .topbar:has(> .tab)::-webkit-scrollbar { display: none; }
  .topbar > .tab { flex: none; }
  .topbar:has(> .tab) > .divider { display: none; }
}
/* staff: moderate a profile */
.prof-mod { width: 460px; }
.prof-mod .pm-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.prof-mod .pm-row:hover { background: var(--hover); }
.prof-mod .pm-row input { margin-top: 3px; accent-color: var(--red); }

/* Wider streams: click/tap a video tile (or ⤢) to make it fill the call area */
.tile-widen { position: absolute; left: 8px; top: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-widen, .tile.focused .tile-widen { opacity: 1; }
@media (hover: none) { .tile-widen { opacity: .85; } }
.tile.has-video { cursor: zoom-in; }
.tile.focused { cursor: zoom-out; }
.call-tiles.has-focus { align-items: flex-start; }
.call-tiles.has-focus .tile.focused { order: -1; flex: 1 1 100%; width: 100% !important; max-width: none; aspect-ratio: 16 / 9; max-height: min(72vh, 100%); }
.call-tiles.has-focus .tile:not(.focused) { width: 150px !important; }
.call-tiles.has-focus .tile:not(.focused) .stream-bar { display: none; }
.voice-stage:has(.call-tiles.has-focus) { justify-content: flex-start; padding: 12px; }
.call-panel:has(.call-tiles.has-focus) .call-tiles .tile.focused { max-height: 60vh; }
@media (max-width: 760px) {
  .call-tiles.has-focus .tile.focused { aspect-ratio: auto; height: min(56dvh, 100vw * 1.2); }
  .call-tiles.has-focus .tile:not(.focused) { width: 96px !important; }
  .call-tiles.stage .tile { width: min(360px, 44vw); }
}
@media (max-width: 760px) {
  /* Call buttons fit the screen (they ran off both edges) */
  .call-controls { flex-wrap: wrap; justify-content: center; gap: 8px !important; padding: 0 8px; max-width: 100%; }
  .call-controls .call-btn { width: 44px; height: 44px; flex: none; }
  .call-controls .call-btn.ptt-btn { width: auto; }
  .voice-stage { padding: 12px 8px calc(12px + env(safe-area-inset-bottom)); }
}

/* 0.21.1: videos play in the chat */
.msg-video { position: relative; }
.msg-video video { display: block; max-width: min(420px, 100%); max-height: 360px; border-radius: 10px; background: #000; }
.msg-video .vid-dl { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.msg-video .vid-dl svg { width: 16px; height: 16px; }
.msg-video:hover .vid-dl { opacity: 1; }
@media (hover: none) { .msg-video .vid-dl { opacity: .85; } }
.up-item video { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; background: #000; }
.up-item .up-play { position: absolute; left: 50%; top: 53px; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: 12px; pointer-events: none; }
.att-photo-fallback { display: inline-flex; }