/* ── The frame, take five (user, 2026-11-02: "the ui is confusing with the
   left sidebar for everything"): the app's top bar, and nothing at the side.
   On a computer, one slim bar: Ding at the left; Home, Chats, Friends and
   the main page as a glass capsule in the middle; Settings and You (your
   photo) as round glass buttons at the right, an ink ring round the one
   you're on, as the app's top bar buttons have. Under it, one page at a
   time, centred, with room round it; Chats is its list and the chat open.
   On a phone the bar is the app's own (You, the page's name, Settings) and
   the four pages are a floating glass tab bar at the foot; a chat open has
   the whole screen. Pages keep their own layouts (their sheets load later);
   #app on the frame's rules so they win where they meet. ── */

:root {
  --bar-h: 64px;
  --gutter: clamp(16px, 3vw, 32px);
  /* What you're on, in a glass capsule: a soft lens of ink. */
  --lens: rgba(46, 50, 55, 0.085);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lens: rgba(255, 255, 255, 0.13); } }
:root[data-theme="dark"] { --lens: rgba(255, 255, 255, 0.13); }

#app:not([hidden]) { display: block; min-height: 100vh; min-height: 100dvh; }
body { overflow-x: clip; }

/* Keyboard focus, everywhere: a ring you can see, never on a click. Fields
   show theirs as a soft halo round their edge (they take focus on a click). */
:where(a, button, select, summary, [tabindex], input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:where(.field, textarea):focus-visible { outline: none; }
.field:focus { box-shadow: 0 0 0 3px var(--lens); }

/* ── The bar ── */
.bar {
  position: sticky; top: 0; z-index: 30;
  height: var(--bar-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 0 var(--gutter);
}
/* Its glass is a layer of its own (so the tab bar in it can sit at a phone's
   foot), clear at the top of a page and frosted once the page goes under it. */
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border-bottom: 1px solid var(--hair);
  opacity: 0; transition: opacity 0.2s ease;
}
.bar.under::before { opacity: 1; }
.bar-brand { justify-self: start; gap: 9px; font-size: 18px; }
.bar-brand img { width: 30px; height: 30px; border-radius: 8px; }
.bar-title { display: none; }

/* The pages, as a glass capsule; the one you're on under a lens. */
.tabs {
  justify-self: center; display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}
.tabs a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px;
  border-radius: 999px; color: var(--steel); text-decoration: none; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  transition: background 0.2s ease, color 0.2s ease;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); background: var(--lens); }
.tabs a svg { width: 19px; height: 19px; flex: none; }
.tabs a .badge { margin: 0; }

/* Settings and You: round glass buttons, an ink ring with a gap on yours. */
.bar-end { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar-btn {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center; color: var(--ink); text-decoration: none;
  background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.bar-btn:active { transform: scale(0.95); }
.bar-btn svg { width: 20px; height: 20px; }
.bar-btn.on { box-shadow: 0 0 0 2px var(--mist-1), 0 0 0 4px var(--ink), var(--shadow); }
.bar-btn .badge { position: absolute; top: -5px; right: -7px; margin: 0; box-shadow: 0 0 0 2px var(--mist-1); }
.bar-you .me { width: 34px; height: 34px; }
.bar-you .me .avatar { font-size: 12px; }
.bar-back { display: none; }
.bar-back svg { width: 21px; height: 21px; stroke-width: 2.2; margin-left: -2px; }

/* Notifications for this browser, until they're decided. */
.bar-ask {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; min-width: 0;
  border-radius: 999px; border: 1px solid var(--hair); background: var(--soft); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.bar-ask:hover { background: var(--hair); }
.bar-ask svg { width: 17px; height: 17px; flex: none; stroke-width: 1.9; }
.bar-ask span { overflow: hidden; text-overflow: ellipsis; }

/* ── The page under it ── */
#app .page { max-width: none; margin: 0; padding: 12px var(--gutter) 56px; }
#app .page > .view, #app .page > .sub-back { max-width: 1180px; margin-left: auto; margin-right: auto; }
#app .page > #view-friends { max-width: 1120px; }
#app .page > #view-you { max-width: 1120px; }

/* Back to You over the pages that open from it: a glass pill. */
.sub-back:not([hidden]) { display: block; margin-bottom: 14px; }
.sub-back a {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 15px 0 9px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.sub-back a:hover { background: var(--glass-strong); }
.sub-back svg { width: 18px; height: 18px; flex: none; stroke-width: 2.2; }

/* Chats: your chats and the one open, side by side, down to the screen's
   foot (--fit-h, from app.js's fitChats). */
#app .page > #view-chats { max-width: 1480px; }
#app #view-chats.chats {
  display: grid; grid-template-columns: clamp(300px, 26vw, 360px) minmax(0, 1fr); gap: 16px;
  height: var(--fit-h, calc(100dvh - var(--bar-h) - 28px)); min-height: 420px;
}
#app #view-chats > .chat-list, #app #view-chats > .chat { height: 100%; min-height: 0; }
body[data-view="chats"] #app .page, body[data-view="home"] #app .page { padding-bottom: 16px; }

/* Home: who it's for and the composer, a calm column in the middle. */
#app .page > #view-home { max-width: 1040px; }

/* ── A narrower computer: the pages' names go, their marks stay. ── */
@media (max-width: 1080px) {
  .bar-ask span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar-ask { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 920px) {
  .tabs a { padding: 0 14px; }
  /* Still read out, and shown on hover (their title). */
  .tabs a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabs a .badge { position: absolute; top: 2px; right: 3px; }
  .bar-brand span { display: none; }
}

/* ── A phone: the app's top bar, the pages at the foot. ── */
@media (max-width: 760px) {
  .bar {
    height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
    grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px;
  }
  .bar-brand, .bar-ask { display: none; }
  .bar-title {
    display: block; grid-column: 2; grid-row: 1; text-align: center; min-width: 0;
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bar-end { display: contents; }
  .bar-you, .bar-back { grid-column: 1; grid-row: 1; justify-self: start; }
  /* Over To-dos, Echoes and the rest of You's: back to You, where You is. */
  body[data-under-you] .bar-you { display: none; }
  body[data-under-you] .bar-back { display: grid; }
  body[data-under-you] #app .sub-back { display: none; }
  .bar-settings { grid-column: 3; grid-row: 1; justify-self: end; }
  .bar-btn { width: 40px; height: 40px; }
  .bar-you .me { width: 32px; height: 32px; }

  /* The tab bar: a floating glass capsule over the foot of the page. */
  .tabs {
    position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: min(calc(100% - 24px), 440px); justify-content: space-between; padding: 5px;
  }
  .tabs a {
    flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; height: 54px; padding: 0 2px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0;
  }
  .tabs a span { position: static; width: auto; height: auto; clip-path: none; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tabs a svg { width: 23px; height: 23px; }
  .tabs a .badge { position: absolute; top: 3px; left: calc(50% + 5px); right: auto; }

  #app .page { padding: 4px 16px calc(96px + env(safe-area-inset-bottom)); }
  body[data-view="chats"] #app .page, body[data-view="home"] #app .page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }

  /* Chats: the list, or the chat, the whole width. */
  #app #view-chats.chats { display: block; }
  #app #view-chats.chats:not(.opened) > .chat { display: none; }
  #app #view-chats.chats.opened > .chat-list { display: none; }
  /* A chat open has the whole screen: no bar, no tabs (its own back). */
  body:has(#view-chats.opened:not([hidden])) .bar { display: none; }
  body:has(#view-chats.opened:not([hidden])) #app .page { padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); }
  body:has(#view-chats.opened:not([hidden])) .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .bar::before, .tabs a, .bar-btn { transition: none; }
}