/* ============================================================
   Nexus — App shell (two-pane layout + bottom tab bar)
   Mobile-first; desktop (>=900px) becomes two panes:
   chat list on the start side, active screen on the other.
   ============================================================ */

.app-frame { flex: 1 1 auto; display: flex; width: 100%; min-height: 0; }
.app-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* sidebar is hidden on mobile */
.app-side { display: none; }

/* ---------- tab bar (item height 45 · label 10 medium) ---------- */
.tabbar-item { min-height: 45px; }
.tabbar-label { font-weight: 500; }
/* gear art is lighter than the chat bubbles; match its visual stroke weight */
.tabbar-icon .tg-ios-settings { stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }

/* ============================================================
   Desktop two-pane
   ============================================================ */
@media (min-width: 900px) {
  .app-side {
    display: flex; flex-direction: column; flex: none;
    width: 340px;
    border-inline-end: 1px solid var(--nb-line);
    background: var(--nb-bg);
    position: sticky; top: 0; height: 100dvh;
  }
  .tabbar { display: none; }
  .app-main { padding-bottom: 24px; }

  /* keep fixed composers inside the content pane */
  .ch-composer { left: 16px; right: 352px; }
  .chat-input { left: 16px; right: 352px; bottom: 12px; }
}

/* ---------- sidebar chat list ---------- */
.app-side-head { padding: 18px 18px 10px; }
.app-side-head b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.app-side-list { padding: 0 8px; }
.app-chatrow { display: flex; gap: 12px; padding: 8px; border-radius: 0; color: var(--nb-text); text-decoration: none; transition: background .12s ease; }
.app-chatrow:hover { background: var(--nb-surface-hi); }
.app-chatrow-avatar { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad-soft); box-shadow: 0 0 0 1px var(--nb-line-soft); }
.app-chatrow-avatar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); pointer-events: none; }
.app-chatrow-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-chatrow-avatar .is-initial { width: 100%; height: 100%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 900; font-size: 1.2rem; }
.app-chatrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-chatrow-line1 { display: flex; align-items: center; gap: 8px; }
.app-chatrow-line1 b { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chatrow-line1 time { margin-left: auto; margin-inline-start: auto; font-size: .72rem; color: var(--nb-text-mute); flex: none; }
.app-chatrow-line2 { display: flex; align-items: center; gap: 8px; }
.app-chatrow-line2 > span:first-child { flex: 1; min-width: 0; font-size: .84rem; color: var(--nb-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chatrow-badge { flex: none; font-size: .64rem; font-weight: 700; color: var(--nb-text-mute); background: var(--nb-surface-hi); padding: 1px 8px; border-radius: var(--r-pill); }
.app-chatrow-pin { flex: none; display: inline-flex; align-items: center; color: var(--nb-text-mute); }
.app-side-foot { margin-top: auto; padding: 12px 8px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 2px; }
.app-sidenav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 0; color: var(--nb-text); text-decoration: none; font-size: .92rem; transition: background .12s ease; }
.app-sidenav:hover { background: var(--nb-surface-hi); }
.app-sidenav .ch-i { color: var(--nb-text-mute); }

/* ---------- app forms (account) ---------- */
.app-form-page { max-width: 640px; margin-inline: auto; padding: 12px 16px 28px; }
.app-form { display: flex; flex-direction: column; gap: 16px; }
.app-form-group { background: var(--nb-surface); border-radius: var(--r-card); overflow: hidden; }
.app-form-row { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 54px; padding: 9px 16px 10px; }
.app-form-row:not(:last-child)::after { content: ''; position: absolute; bottom: 0; inset-inline: 16px; height: 1px; background: var(--nb-line); }
.app-form-label { font-size: .72rem; font-weight: 500; line-height: 1.6; color: var(--nb-text-mute); }
.app-form-row:focus-within .app-form-label { color: var(--brand); }
.app-form-row input,
.app-form-row textarea { width: 100%; padding: 0; border: 0; background: none; color: var(--nb-text); font: inherit; font-size: 1rem; line-height: 1.7; outline: none; box-shadow: none; resize: none; }
.app-form-row input::placeholder,
.app-form-row textarea::placeholder { color: var(--nb-text-mute); opacity: 1; }
.app-form-row textarea { min-height: 108px; overflow-y: hidden; }
.app-form-submit { display: grid; place-items: center; width: 100%; min-height: 48px; border: 0; border-radius: var(--r-pill); background: var(--grad); color: #fff; font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.app-form-send { display: grid; place-items: center; width: 100%; min-height: 48px; border: 0; border-radius: var(--r-pill); background: var(--brand); color: #fff; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.app-form-send:active { transform: scale(.99); }
.app-form-submit:active { transform: scale(.99); }
.app-form-note { margin: 0 10px; text-align: center; font-size: .78rem; line-height: 1.8; color: var(--nb-text-mute); }
.app-form-actions { display: flex; flex-direction: column; gap: 10px; }


.app-sent { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 4px; text-align: center; }

.app-sent-title { font-size: 1.25rem; font-weight: 800; line-height: 1.6; }

.copy-link.done { color: var(--ok); }


/* ---------- 404 ---------- */
.app-notfound { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 0 20px; text-align: center; }
.app-notfound-code { font-size: 3.6rem; font-weight: 900; line-height: 1; color: var(--brand); }
.app-notfound .app-form-actions { width: 100%; max-width: 320px; }
.app-notfound .app-form-submit { width: 100%; }