/* ============================================================
     newsomo /feed — Bundle 3 (_feed2_flow_design) canonical port.
     Every screen/element traces back to bundle:
       _bundle3_template.html  — CSS (lines 300–448)
       _bundle3_js.js          — Screen render functions
     Production data-flow (endpoints, auth, magic-link, mock fallback)
     and iPhone-frame device chrome are preserved on top.
     Wired endpoints:
       GET  /api/public/storylines?vertical=<v>&limit=30
       GET  /api/public/search?q=&v=<v>&limit=20
       GET  /api/recommend/channels?v=<v>&limit=10
       GET  /api/auth/me
       GET  /api/follow/me
       GET  /api/me/unread_counts?v=<v>
       GET  /api/me/digest?v=<v>
       POST /api/follow
       POST /api/follow/<source_id>/mute
       POST /api/me/visit_source/<source_id>
       POST /api/auth/magic-link
     ============================================================ */

  :root{
    /* tokens — preserved from production for device-chrome layer */
    --teal-accent:   #0A8D9C;
    --teal-deep:     #0F6E56;
    --teal-700:      #086874;
    --teal-surface:  #E1F5EE;
    --ink-900:       #1A1A1A;
    --ink-700:       #33322E;
    --ink-500:       #5F5E5A;
    --ink-400:       #9A958C;
    --paper:         #FAF9F5;
    --paper-card:    #FFFFFF;
    --paper-sunk:    #F1EEE7;
    --line:          #ECE7DD;
    --frame:         #3A3631;
    --serif: 'PT Serif','Times New Roman',Georgia,'Noto Serif',serif;
    --sans: -apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  }

  /* ============================================================
     Sprint #279 — 5 vertical themes
     Tokens: --paper / --paper-card / --ink / --ink-soft /
             --accent / --accent-2 / --line-soft / --gradient-bg
     ============================================================ */
  :root, .theme-ua {
    --paper:#FAF9F5; --paper-card:#FFFFFF; --ink:#15171A; --ink-soft:#5C6470;
    --accent:#0A8D9C; --accent-2:#0F6E56; --line-soft:#EAE6DD;
    --gradient-bg:none;
  }
  .theme-pl {
    --paper:#FBFAF6; --paper-card:#FFFFFF; --ink:#1A1A1A; --ink-soft:#57534E;
    --accent:#DC143C; --accent-2:#B71C2C; --line-soft:#E8E2D8;
    --gradient-bg:linear-gradient(180deg, rgba(220,20,60,.04) 0%, transparent 40%);
  }
  .theme-nrk {
    --paper:#2A2E2D; --paper-card:#363C3A; --ink:#E5E5E0; --ink-soft:#9CA3A1;
    --accent:#8C9B7E; --accent-2:#6B7561; --line-soft:#3D4341;
    --gradient-bg:none;
  }
  .theme-recovery {
    --paper:#F7F4ED; --paper-card:#FFFFFF; --ink:#2C2418; --ink-soft:#6B6051;
    --accent:#E76F26; --accent-2:#FFB400; --line-soft:#E8E2D4;
    --gradient-bg:linear-gradient(180deg, rgba(231,111,38,.03) 0%, transparent 50%);
  }
  .theme-politech {
    --paper:#FAFAFC; --paper-card:#FFFFFF; --ink:#14213D; --ink-soft:#495867;
    --accent:#003B6F; --accent-2:#FCA311; --line-soft:#E5E8EE;
    --gradient-bg:linear-gradient(180deg, rgba(0,59,111,.03) 0%, transparent 40%);
  }
  /* Sprint #281 — drone-tech dark cockpit theme */
  .theme-drones {
    --paper:#0F172A; --paper-card:#1E293B; --ink:#F1F5F9; --ink-soft:#94A3B8;
    --accent:#06B6D4; --accent-2:#F59E0B; --line-soft:#334155;
    --gradient-bg:linear-gradient(180deg, rgba(6,182,212,.06) 0%, transparent 50%);
  }
  /* Sprint #281 — soft pastel mediation theme */
  .theme-mediation {
    --paper:#F5F1E8; --paper-card:#FFFFFF; --ink:#3F3A2E; --ink-soft:#78706B;
    --accent:#8B7CB6; --accent-2:#A8C9A8; --line-soft:#E8E2D0;
    --gradient-bg:linear-gradient(180deg, rgba(139,124,182,.05) 0%, rgba(168,201,168,.03) 100%);
  }
  /* Sprint #281b — Books (warm vintage: література, друк) */
  .theme-books {
    --paper:#F8F3E9; --paper-card:#FDFAF3; --ink:#2C1810; --ink-soft:#6B5847;
    --accent:#7F1D1D; --accent-2:#C2410C; --line-soft:#E8DCC8;
    --gradient-bg:linear-gradient(180deg, rgba(127,29,29,.03) 0%, transparent 40%);
  }
  /* Sprint #281b — Cherkasy (local riverside palette: Дніпро + земля) */
  .theme-cherkasy {
    --paper:#F0F7F8; --paper-card:#FFFFFF; --ink:#0F2027; --ink-soft:#4B6571;
    --accent:#0E7490; --accent-2:#65A30D; --line-soft:#D0E0E3;
    --gradient-bg:linear-gradient(180deg, rgba(14,116,144,.04) 0%, transparent 50%);
  }
  /* Sprint #281b — Avia (aerospace blue + chrome) */
  .theme-avia {
    --paper:#F5F7FA; --paper-card:#FFFFFF; --ink:#0C1B33; --ink-soft:#4B5A75;
    --accent:#1E3A8A; --accent-2:#94A3B8; --line-soft:#D8DDE7;
    --gradient-bg:linear-gradient(180deg, rgba(30,58,138,.04) 0%, transparent 50%);
  }
  body { background-image: var(--gradient-bg); }

  /* Theme-aware overrides — applied via class. The legacy hardcoded
     teal/ink values inside .ns-app remain as fallback (light theme),
     but key surfaces now respect the active --accent / --paper. */
  .ns-app .bar .edit,
  .ns-app .bar .ttl b,
  .ns-app .crow .vf,
  .ns-app .crow .pv .txt .pre,
  .ns-app .tabs .tab.on,
  .ns-app .search-bar input::placeholder,
  .ns-app .post .ph .nm,
  .ns-app .post .pb .more,
  .ns-app .detail .chip b,
  .ns-app .reslist .res .nm .vf,
  .ns-app .pcard .prow .v b,
  .ns-app .suggest .sg { color: var(--accent); }

  .ns-app .crow .badge,
  .ns-app .tabs .tab .dot,
  .ns-app .cats .cc.on,
  .ns-app .reslist .res .sbtn.on,
  .ns-app .joinbar .jb,
  .ns-app .joinbar .jb.sm,
  .ns-app .composer .snd,
  .ns-app .mb.me,
  .ns-app .phead { background: var(--accent); color:#fff; }

  .ns-app .post .rc .r{ background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
  .ns-app .post .rc .r.on{ background: var(--accent); color:#fff; }
  .ns-app .reslist .res .sbtn{ border-color: var(--accent); color: var(--accent); background:#fff; }
  .ns-app .detail .acts button.on{ color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .ns-app .suggest .sg{ border-color: color-mix(in srgb, var(--accent) 30%, #fff); background:#fff; }

  /* Dark theme (NRK) surface adjustments */
  .theme-nrk body { background-color: var(--paper); color: var(--ink); }
  .theme-nrk .ns-app .screen,
  .theme-nrk .ns-app .scr,
  .theme-nrk .ns-app .bar,
  .theme-nrk .ns-app .tabs,
  .theme-nrk .ns-app .searchbar,
  .theme-nrk .ns-app .composer { background: var(--paper); color: var(--ink); }
  .theme-nrk .ns-app .bar .ttl,
  .theme-nrk .ns-app .crow .nm,
  .theme-nrk .ns-app .detail h1,
  .theme-nrk .ns-app .post .pb h4,
  .theme-nrk .ns-app .reslist .res .nm { color: var(--ink); }
  .theme-nrk .ns-app .bar .cttl b { color: var(--ink); }
  .theme-nrk .ns-app .crow .mid { border-bottom-color: var(--line-soft); }
  .theme-nrk .ns-app .crow:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .theme-nrk .ns-app .post,
  .theme-nrk .ns-app .pcard,
  .theme-nrk .ns-app .mb.them { background: var(--paper-card); color: var(--ink); }
  .theme-nrk .ns-app .post .pb p,
  .theme-nrk .ns-app .pcard p { color: var(--ink); }
  .theme-nrk .ns-app .bar .ic { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
  .theme-nrk .ns-app .search .box,
  .theme-nrk .ns-app .searchbar input,
  .theme-nrk .ns-app .composer .field,
  .theme-nrk .ns-app .cats .cc { background: color-mix(in srgb, var(--ink) 8%, var(--paper-card)); color: var(--ink-soft); }

  /* Sprint #281 — Drones dark theme (cockpit-style) overrides */
  .theme-drones body { background-color: var(--paper); color: var(--ink); }
  .theme-drones .ns-app .screen,
  .theme-drones .ns-app .scr,
  .theme-drones .ns-app .bar,
  .theme-drones .ns-app .tabs,
  .theme-drones .ns-app .searchbar,
  .theme-drones .ns-app .composer { background: var(--paper); color: var(--ink); }
  .theme-drones .ns-app .bar .ttl,
  .theme-drones .ns-app .crow .nm,
  .theme-drones .ns-app .detail h1,
  .theme-drones .ns-app .post .pb h4,
  .theme-drones .ns-app .reslist .res .nm { color: var(--ink); }
  .theme-drones .ns-app .bar .cttl b { color: var(--ink); }
  .theme-drones .ns-app .crow .mid { border-bottom-color: var(--line-soft); }
  .theme-drones .ns-app .crow:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .theme-drones .ns-app .post,
  .theme-drones .ns-app .pcard,
  .theme-drones .ns-app .mb.them { background: var(--paper-card); color: var(--ink); }
  .theme-drones .ns-app .post .pb p,
  .theme-drones .ns-app .pcard p { color: var(--ink); }
  .theme-drones .ns-app .bar .ic { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
  .theme-drones .ns-app .search .box,
  .theme-drones .ns-app .searchbar input,
  .theme-drones .ns-app .composer .field,
  .theme-drones .ns-app .cats .cc { background: color-mix(in srgb, var(--ink) 8%, var(--paper-card)); color: var(--ink-soft); }

  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; height:100%; }
  body{ font-family:var(--sans); -webkit-font-smoothing:antialiased; color:var(--ink-900); }

  /* Native web app — no phone-frame artifacts on any breakpoint */
  /* Sprint #318 — Smooth scroll fix per agent research. Root залишається
     не scrolling, але без position:fixed і touch-action на body
     (які блокували gesture arbitration). Inner .scr handles all touch. */
  html, body{
    background:var(--paper-card);
    margin:0; padding:0;
    height:100%; width:100%;
    overflow:hidden;
    overscroll-behavior-y: none;
  }
  .ns-phone{
    width:100%; max-width:480px; margin:0 auto;
    height:100dvh;
    background:var(--paper-card);
    border-radius:0; box-shadow:none; outline:none;
    overflow:hidden;
    position:relative;
    display:flex; flex-direction:column;
  }
  /* Sprint #322 — Прибрав transform:translateZ(0) бо створював stacking context
     який інтерсептив click events для back button. Залишився min-height:0 + touch-action.
     Також додаю touch-action:manipulation на clickable елементи (back/tabs) щоб
     iOS не чекав 300ms на double-tap detection. */
  .ns-app .scr{
    flex:1 1 0;
    min-height:0;
    /* Sprint #425 · iOS scroll fix · scroll замість auto щоб iOS Safari
       завжди мав scrollbar lane + position:relative для stacking context */
    overflow-y:scroll;
    overflow-x:hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    position: relative;
    z-index: 0;
    /* Гарантуємо що елемент має ненульову висоту в момент touch arbitration */
    height: 100%;
    width: 100%;
  }
  /* Tap responsiveness fix — back button + tabs + pills гарантовано спрацьовують з 1 тапу */
  .ns-app .bar .ic,
  .ns-app .channelbar-pill .ic-back,
  .ns-app .bottombar-pills .pill-tabs .tab,
  .ns-app .bottombar-pills .pill-search,
  .ns-app .topbar-pills .pill-edit,
  .ns-app .topbar-pills .pill-icons .ic,
  .ns-app .searchbar .ic{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative; z-index: 2;
  }
  .ns-status, .ns-island, .ns-home-indicator{ display:none !important; }
  /* Mobile (<=768px): fullscreen, no max-width constraint */
  @media (max-width:768px){
    .ns-phone{ max-width:100%; width:100%; }
  }

  /* Sprint #404 · bnav прибрано звідси — тепер shared overlay layer
     через /assets/bnav.css + /assets/bnav.js (включаються в <head>)
     Sprint #475 · solid bnav ~49px замість floating pill 74px → скорочено 90→55 */
  body{ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 55px); }

  /* status bar (desktop only, hidden via earlier polish) */
  .ns-status{
    height:59px; flex:none;
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:18px 33px 0;
    background:var(--paper-card);
    z-index:60; position:relative;
  }

  /* app container holds bundle screens (stacked) — adopts bundle router */
  /* Sprint #318 — min-height:0 КРИТИЧНО: flex child з overflow має min-height:0 щоб inner scroll працював */
  .ns-app{ flex:1 1 0; position:relative; overflow:hidden; min-height:0; }

  /* ============================================================
     BUNDLE 3 CSS — copied verbatim from _bundle3_template.html
     lines 300–448. Sole modification: top-level selectors are
     namespaced under `.ns-app` so they don't leak outside the
     phone frame. Behaviour and visuals are unchanged.
     ============================================================ */
  .ns-app .screen{ position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; transform:none; z-index:10; }
  .ns-app .screen.root{ z-index:1; }
  /* Sprint #308 — Removed translateX(-22%) which created containing block for
     position:fixed children → pills "тікали вгору" при back navigation. Replaced
     with opacity dimming. Slide animation sacrificed for pill stability. */
  .ns-app .screen.behind{ opacity:.5; filter:brightness(.97); z-index:5; pointer-events:none; }
  /* Sprint #319 — .screen теж потребує min-height:0 щоб inner .scr flex+scroll працював */
  .ns-app .screen{ min-height:0; }
  .ns-app .screen.in{ z-index:20; }
  /* Sprint #432 · було .ns-app .scr{ flex:1; overflow-y:auto; ... } що ПЕРЕЗАПИСУВАЛО
     Sprint #425 fix (overflow-y:scroll, height:100% etc.). Тепер залишаємо тільки
     background, інші властивості беруться з канонічного .ns-app .scr вгорі (рядок 265). */
  .ns-app .scr{ background:#fff; }
  .ns-app .scr::-webkit-scrollbar{ width:0; }

  /* ===== TOP BARS (bundle b3 line 316) ===== */
  /* Sprint #317 — Internal screen bars: padding-top для safe area
     (edge-to-edge активний з MainViewController.swift). Раніше .bar
     починались з y=0 під Dynamic Island. */
  .ns-app .bar{ display:flex; align-items:center; gap:11px; padding:calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; flex:none; background:#fff; min-height:calc(54px + env(safe-area-inset-top, 0px)); }
  .ns-app .bar .edit{ font:400 16px/1 var(--sans); color:#0A8D9C; cursor:pointer; }
  .ns-app .bar .ttl{ flex:1; text-align:center; font:700 18px/1 var(--sans); color:#1A1A1A; letter-spacing:-.3px; }
  .ns-app .bar .ttl b{ color:#0A8D9C; }
  .ns-app .bar .tools{ display:flex; gap:8px; }
  .ns-app .bar .ic{ width:34px; height:34px; border-radius:999px; background:#F1EEE7; display:grid; place-items:center; cursor:pointer; color:#1A1A1A; flex:none; }
  .ns-app .bar .ic.ghost{ background:transparent; }
  .ns-app .bar .ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .ns-app .bar.plain{ border-bottom:1px solid #ECE7DD; }
  .ns-app .bar.teal{ background:#0A8D9C; } .ns-app .bar.teal .ic{ color:#fff; } .ns-app .bar.teal .cttl b{ color:#fff; }
  .ns-app .bar .cttl{ flex:1; min-width:0; cursor:pointer; }
  .ns-app .bar .cttl b{ font:600 16px/1.2 var(--sans); color:#1A1A1A; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ns-app .bar .cttl span{ font:12px/1.2 var(--sans); color:#9A958C; }

  /* ===== STORIES (bundle b3 line 328) ===== */
  .ns-app .stories{ display:flex; gap:15px; padding:8px 16px 14px; overflow-x:auto; } .ns-app .stories::-webkit-scrollbar{ height:0; }
  .ns-app .story{ text-align:center; flex:none; width:64px; cursor:pointer; }
  .ns-app .story .ring{ width:62px; height:62px; border-radius:999px; padding:2.5px; margin:0 auto; }
  .ns-app .story .ring.new{ background:conic-gradient(from 210deg,#0A8D9C,#3FC2A3,#0F6E56,#0A8D9C); }
  .ns-app .story .ring.seen{ background:#E0DACE; }
  .ns-app .story .ring .in{ width:100%; height:100%; border-radius:999px; border:2.5px solid #fff; display:grid; place-items:center; color:#fff; font:700 19px/1 var(--sans); position:relative; }
  .ns-app .story .ring .in .plus{ position:absolute; right:-1px; bottom:-1px; width:21px; height:21px; border-radius:999px; background:#0A8D9C; border:2.5px solid #fff; display:grid; place-items:center; color:#fff; font:400 15px/1 var(--sans); }
  .ns-app .story .lbl{ display:block; font:500 11.5px/1.2 var(--sans); color:#33322E; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ===== SEARCH BOX in list (bundle b3 line 337) ===== */
  .ns-app .search{ padding:0 16px 12px; }
  .ns-app .search .box{ display:flex; align-items:center; gap:9px; background:#F1EEE7; border-radius:12px; padding:11px 14px; color:#9A958C; font:15px/1 var(--sans); cursor:text; }
  .ns-app .search .box svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }

  /* ===== MY BRIEF SECTION · Sprint #388 ===== */
  .ns-app .mybrief{
    padding: 4px 16px 16px;
    border-bottom: 0.5px solid #ECE7DD;
    margin-bottom: 8px;
  }
  .ns-app .mybrief-head{
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 14px 0 10px;
  }
  .ns-app .mybrief-head h3{
    font: 700 11px/1 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #87857E;
    margin: 0;
  }
  .ns-app .mybrief-head .full{
    font: 600 12px/1 var(--sans);
    color: #0A8D9C;
    text-decoration: none;
  }
  .ns-app .mybrief-card{
    display: block;
    padding: 13px 14px;
    margin-bottom: 8px;
    background: #FFFFFF;
    border: 0.5px solid #ECE7DD;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .14s ease, border-color .14s ease;
    cursor: pointer;
  }
  .ns-app .mybrief-card:active{
    transform: scale(.985);
    border-color: #0A8D9C;
  }
  .ns-app .mybrief-card .title{
    font: 600 14.5px/1.4 var(--sans);
    color: #1A1A1A;
    margin: 0 0 5px;
    letter-spacing: -.01em;
  }
  .ns-app .mybrief-card .summary{
    font: 13px/1.5 var(--sans);
    color: #5F5E5A;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ns-app .mybrief-card .meta{
    font: 11.5px/1 var(--sans);
    color: #87857E;
    display: flex; gap: 8px; align-items: center;
  }
  .ns-app .mybrief-card .meta .src{ font-weight: 600; color: #5F5E5A; }
  .ns-app .mybrief-card .meta .topic{
    color: #0A8D9C;
    background: rgba(10,141,156,.08);
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10.5px;
  }
  /* Sprint #391 · «Показати ще» button + search toast */
  .ns-app .mybrief-more{
    display: block; width: 100%;
    margin: 12px 0 4px;
    padding: 13px;
    background: #FFFFFF;
    border: 1px dashed #D8D4C8;
    border-radius: 12px;
    font: 600 13.5px/1 var(--sans);
    color: #5F5E5A;
    cursor: pointer;
    text-align: center;
    transition: background .15s, border-color .15s;
  }
  .ns-app .mybrief-more:hover,
  .ns-app .mybrief-more:active{
    background: #F1EEE7;
    border-color: #0A8D9C;
    color: #0A8D9C;
  }
  .ns-app .search-toast{
    position: fixed;
    left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px);
    transform: translateX(-50%) translateY(-12px);
    background: rgba(26,26,26,.92);
    color: #FFFFFF;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 18px;
    border-radius: 999px;
    font: 600 13px/1 var(--sans);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 120;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
  }
  .ns-app .search-toast.on{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ===== CHAT ROWS (bundle b3 line 342) ===== */
  .ns-app .list{ padding:0 0 8px; }
  .ns-app .crow{ display:flex; gap:13px; padding:10px 16px 0; cursor:pointer; }
  .ns-app .crow:active{ background:#F6F4EF; }
  /* Sprint #365 — прибрали overflow:hidden, щоб пімпочка (з white border)
     відображалась повним маленьким кружечком на корнері, а не клипалась як півмісяць.
     Якщо колись додаватимемо img-аватари — даємо їм окремий border-radius для clip. */
  .ns-app .av{ width:54px; height:54px; border-radius:999px; display:grid; place-items:center; color:#fff; font:700 18px/1 var(--sans); flex:none; position:relative; }
  .ns-app .av > img{ width:100%; height:100%; border-radius:999px; object-fit:cover; }
  .ns-app .av.sm{ width:38px; height:38px; font-size:14px; }
  .ns-app .av.lg{ width:84px; height:84px; font-size:30px; }
  .ns-app .av .kind{ position:absolute; right:-1px; bottom:-1px; width:19px; height:19px; border-radius:999px; border:2.5px solid #fff; display:grid; place-items:center; font-size:9px; overflow:visible; }
  .ns-app .av.sm .kind{ width:15px; height:15px; font-size:7px; border-width:2px; }
  .ns-app .av.lg .kind{ width:26px; height:26px; font-size:12px; }
  /* Sprint #362+#364 — tier palette near logos: teal=general, purple=specialized, red=exclusive
     Канонічно: маленькі цяточки внизу-справа аватара. Ring (Sprint #363) reverted — користувач
     обрав compact dots. */
  .ns-app .av .kind.news{ background:#0A8D9C; }      /* загально-політичні · бірюзова */
  .ns-app .av .kind.author{ background:#6553D0; }    /* спеціалізовані · фіолетова */
  .ns-app .av .kind.bot{ background:#B8475C; }       /* ексклюзивні · червона */
  .ns-app .crow .mid{ flex:1; min-width:0; border-bottom:1px solid #F0ECE3; padding-bottom:10px; }
  .ns-app .crow:last-child .mid{ border-bottom:0; }
  .ns-app .crow .top{ display:flex; align-items:center; gap:6px; }
  .ns-app .crow .nm{ font:600 16px/1.2 var(--sans); color:#1A1A1A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .ns-app .crow .vf{ color:#0A8D9C; font-size:13px; flex:none; }
  .ns-app .crow .mute{ color:#B8B2A6; flex:none; display:inline-flex; } .ns-app .crow .mute svg{ width:15px; height:15px; }
  .ns-app .crow .tm{ font:13px/1 var(--sans); color:#A8A399; flex:none; margin-left:auto; }
  .ns-app .crow .pv{ display:flex; gap:8px; margin-top:4px; align-items:flex-start; }
  .ns-app .crow .pv .txt{ flex:1; min-width:0; font:14.5px/1.32 var(--sans); color:#7C7870; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ns-app .crow .pv .txt .pre{ color:#0A8D9C; } .ns-app .crow .pv .txt b{ color:#33322E; }
  .ns-app .crow .pv .txt .thumb{ display:inline-block; width:16px; height:16px; border-radius:3px; vertical-align:-3px; margin-right:4px; }
  /* Sprint #320 — Badge тепер використовує vertical theme accent color */
  .ns-app .crow .badge{ flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:#fff; font:700 11.5px/1 var(--sans); display:grid; place-items:center; margin-top:2px; }
  .ns-app .crow .badge.mute{ background:#C4BFB4; }
  .ns-app .crow .pin{ color:#C4BFB4; flex:none; margin-top:3px; } .ns-app .crow .pin svg{ width:15px; height:15px; }

  /* ===== TABS (bundle b3 line 364) ===== */
  .ns-app .tabs{ flex:none; display:flex; background:#fff; border-top:1px solid #EDE9E0; padding:7px 0 9px; }
  .ns-app .tabs .tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:#A8A399; cursor:pointer; }
  .ns-app .tabs .tab svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .ns-app .tabs .tab span{ font:500 10px/1 var(--sans); }
  .ns-app .tabs .tab.on{ color:#0A8D9C; }
  .ns-app .tabs .tab .wrap{ position:relative; }
  .ns-app .tabs .tab .dot{ position:absolute; top:-3px; right:-8px; background:#0A8D9C; color:#fff; font:700 9px/1 var(--sans); min-width:16px; height:16px; padding:0 4px; border-radius:999px; display:grid; place-items:center; border:2px solid #fff; }

  /* ===== STORY VIEWER (bundle b3 line 372) ===== */
  .ns-app .storyview{ position:absolute; inset:0; background:var(--g); color:#fff; display:flex; flex-direction:column; padding:14px 16px 16px; }
  .ns-app .storyview .prog{ display:flex; gap:4px; }
  .ns-app .storyview .prog i{ flex:1; height:2.5px; background:rgba(255,255,255,.4); border-radius:9px; overflow:hidden; }
  .ns-app .storyview .prog i.on::after,.ns-app .storyview .prog i.done::after{ content:''; display:block; height:100%; background:#fff; }
  .ns-app .storyview .prog i.on::after{ width:55%; } .ns-app .storyview .prog i.done::after{ width:100%; }
  .ns-app .storyview .shead{ display:flex; align-items:center; gap:9px; margin-top:14px; }
  .ns-app .storyview .shead .av{ width:34px; height:34px; font-size:13px; border:1.5px solid rgba(255,255,255,.6); }
  .ns-app .storyview .shead .snm{ font:600 13.5px/1.1 var(--sans); color:#fff; }
  .ns-app .storyview .shead .snm s{ display:block; text-decoration:none; font:400 11px/1.3 var(--sans); color:rgba(255,255,255,.7); margin-top:2px; }
  .ns-app .storyview .shead .x{ margin-left:auto; font-size:20px; cursor:pointer; opacity:.9; }
  .ns-app .storyview .sbody{ flex:1; display:flex; flex-direction:column; justify-content:center; }
  .ns-app .storyview .slbl{ font:700 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:12px; }
  .ns-app .storyview .sbody h2{ font:700 28px/1.18 var(--serif); margin:0; letter-spacing:-.01em; text-shadow:0 2px 18px rgba(0,0,0,.3); }
  .ns-app .storyview .sbody p{ font:16px/1.55 var(--sans); color:rgba(255,255,255,.92); margin:16px 0 0; }
  .ns-app .storyview .sbrief{ margin-top:20px; }
  .ns-app .storyview .sbrief .bi{ display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid rgba(255,255,255,.18); font:600 15px/1.3 var(--sans); }
  .ns-app .storyview .sbrief .bi:last-child{ border-bottom:1px solid rgba(255,255,255,.18); }
  .ns-app .storyview .sbrief .bn{ width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,.2); display:grid; place-items:center; font:700 12px/1 var(--sans); flex:none; }
  .ns-app .storyview .sfoot{ display:flex; align-items:center; gap:11px; }
  .ns-app .storyview .sreply{ flex:1; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:11px 16px; font:13px/1 var(--sans); color:rgba(255,255,255,.75); }
  .ns-app .storyview .sopen{ border:0; background:#fff; color:#0A5258; font:700 13px/1 var(--sans); padding:13px 16px; border-radius:999px; cursor:pointer; flex:none; }

  /* ===== CHANNEL / CHAT shared bg (bundle b3 line 394) ===== */
  .ns-app .chatbg{ background-color:#EDE7DC; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.035' stroke-width='1.4'%3E%3Cpath d='M20 14l4 4-4 4-4-4z'/%3E%3Cpath d='M60 54l4 4-4 4-4-4z'/%3E%3Ccircle cx='62' cy='18' r='4'/%3E%3Ccircle cx='18' cy='60' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
  .ns-app .daysep{ text-align:center; margin:14px 0 6px; }
  .ns-app .daysep span{ font:600 12px/1 var(--sans); color:#fff; background:rgba(90,84,74,.55); padding:5px 11px; border-radius:999px; }

  /* ===== POST CARD (bundle b3 line 398) ===== */
  /* Sprint #475 · Editorial unification — більше повітря (margin 8→16) +
     уніфікований radius 14→12px + м'якша тінь для журнально-paper-look */
  .ns-app .post{ background:#fff; border-radius:12px; margin:16px 14px; box-shadow:0 1px 1px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.04); overflow:hidden; max-width:none; }
  .ns-app .post .ph{ padding:9px 13px 0; display:flex; align-items:center; gap:8px; }
  .ns-app .post .ph .nm{ font:700 13px/1 var(--sans); color:#0A8D9C; }
  .ns-app .post .ph .tag{ font:11px/1 var(--sans); color:#A8A399; }
  .ns-app .post .pim{ height:148px; background:linear-gradient(135deg,var(--ic),#1A1A1A); background-size:cover; background-position:center; margin-top:9px; display:grid; place-items:end start; }
  .ns-app .post .pim .cap{ font:600 10px/1 var(--sans); color:rgba(255,255,255,.85); padding:9px 11px; letter-spacing:.04em; text-transform:uppercase; }
  .ns-app .post .pb{ padding:9px 13px 7px; }
  .ns-app .post .pb h4{ font:700 16px/1.3 var(--serif); color:#1A1A1A; margin:0 0 5px; }
  .ns-app .post .pb p{ font:14px/1.5 var(--sans); color:#33322E; margin:0; }
  .ns-app .post .pb .more{ color:#0A8D9C; font-weight:600; cursor:pointer; }
  .ns-app .post .rc{ display:flex; gap:6px; padding:2px 13px 9px; flex-wrap:wrap; }
  .ns-app .post .rc .r{ font:600 13px/1 var(--sans); padding:6px 10px; border-radius:999px; background:#EAF6F4; color:#0A8D9C; cursor:pointer; }
  .ns-app .post .rc .r.on{ background:#0A8D9C; color:#fff; }
  .ns-app .post .pf{ display:flex; align-items:center; padding:0 13px 10px; }
  .ns-app .post .pf .vw{ font:12px/1 var(--sans); color:#A8A399; display:flex; align-items:center; gap:5px; }
  .ns-app .post .pf .vw svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; }
  .ns-app .post .pf .tt{ margin-left:auto; font:12px/1 var(--sans); color:#A8A399; }

  /* ===== JOIN BAR (bundle b3 line 406) ===== */
  .ns-app .joinbar{ flex:none; background:#fff; border-top:1px solid #E9E5DD; padding:11px 14px; display:flex; gap:10px; }
  .ns-app .joinbar.sub{ justify-content:center; }
  .ns-app .joinbar .jb{ flex:1; border:0; background:#0A8D9C; color:#fff; font:700 15px/1 var(--sans); padding:14px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
  .ns-app .joinbar .jb svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; }
  .ns-app .joinbar .jb.ghost{ background:#fff; color:#B23A3A; border:1px solid #E3DECF; }
  .ns-app .joinbar .jb.sm{ flex:0 0 auto; padding:14px 20px; background:#0A8D9C; color:#fff; }
  .ns-app .joinbar .m{ color:#9A958C; font:14px/1 var(--sans); display:flex; align-items:center; gap:8px; }
  .ns-app .joinbar .m svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; }
  .ns-app .joinbar .m b{ color:#0F6E56; }

  /* ===== POST DETAIL (bundle b3 line 413) ===== */
  .ns-app .detail{ padding-bottom:30px; }
  .ns-app .detail .hero{ height:200px; background:linear-gradient(135deg,var(--ic),#1A1A1A); background-size:cover; background-position:center; display:grid; place-items:end start; }
  .ns-app .detail .hero .cap{ font:600 11px/1 var(--sans); color:rgba(255,255,255,.85); padding:14px 16px; letter-spacing:.05em; text-transform:uppercase; }
  .ns-app .detail .dw{ padding:16px 18px; }
  .ns-app .detail .src{ display:flex; align-items:center; gap:9px; margin-bottom:13px; }
  .ns-app .detail .src .nm{ font:700 14px/1.2 var(--sans); color:#1A1A1A; }
  .ns-app .detail .src .nm s{ display:block; text-decoration:none; font:12px/1.3 var(--sans); color:#A8A399; font-weight:400; }
  .ns-app .detail h1{ font:700 24px/1.26 var(--serif); letter-spacing:-.01em; margin:0 0 13px; color:#1A1A1A; }
  .ns-app .detail .lede{ font:16px/1.6 var(--sans); color:#33322E; margin:0 0 14px; }
  .ns-app .detail .chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px; }
  .ns-app .detail .chip{ font:13px/1 var(--sans); color:#5F5E5A; background:#F1EEE7; border-radius:999px; padding:8px 12px; }
  .ns-app .detail .chip b{ color:#0A8D9C; font-weight:700; }
  .ns-app .detail .blk{ font:14.5px/1.6 var(--sans); color:#5F5E5A; margin:0 0 12px; }
  .ns-app .detail .blk b{ color:#1A1A1A; }
  .ns-app .detail .acts{ display:flex; gap:9px; }
  .ns-app .detail .acts button{ flex:1; border:1px solid #E3DECF; background:#fff; color:#1A1A1A; font:600 13px/1 var(--sans); padding:13px 6px; border-radius:11px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .ns-app .detail .acts button svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; }
  .ns-app .detail .acts button.on{ color:#0A8D9C; border-color:#0A8D9C; background:#EAF6F4; }

  /* ===== SEARCH SCREEN (bundle b3 line 422) ===== */
  .ns-app .searchbar{ display:flex; align-items:center; gap:8px; padding:calc(env(safe-area-inset-top, 0px) + 9px) 12px 9px; background:#fff; border-bottom:1px solid #E9E5DD; flex:none; }
  .ns-app .nss-head{ flex:none; padding:calc(env(safe-area-inset-top, 0px) + 9px) 12px 9px; display:flex; flex-direction:row; align-items:center; gap:9px; background:transparent; }
  .ns-app .nss-cloud{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:5px 15px 5px 5px; border-radius:999px; background:color-mix(in srgb, var(--bg-card, #fff) 72%, transparent); -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 22px rgba(26,26,26,.14); font:600 13px/1 var(--sans); color:var(--fg1); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .ns-app .nss-cloud .nss-ic{ width:30px; height:30px; border-radius:999px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
  .ns-app .nss-cloud .nss-ic svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ns-app .nss-pill{ align-items:center; }
  .ns-app .nss-sic{ flex:none; display:flex; align-items:center; color:#9A958C; }
  .ns-app .nss-sic svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .ns-app .nss-seg{ display:flex; background:color-mix(in srgb, var(--bg-sunk,#F1EEE7) 60%, transparent); border-radius:12px; padding:3px; margin:0 12px 8px; }
  .ns-app .nss-seg-o{ flex:1; text-align:center; font:600 13.5px/1 var(--sans); padding:9px 0; border-radius:9px; color:#8A867C; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease,color .15s ease; }
  .ns-app .nss-seg-o.on{ background:#fff; color:#1A1A1A; box-shadow:0 1px 3px rgba(0,0,0,.08); }
  .ns-app .nss-hint{ padding:44px 24px; text-align:center; color:var(--fg3); font:var(--t-body-sm); }
  .ns-app .sech .nss-hist-clear{ float:right; color:var(--accent); font:600 12px/1 var(--sans); cursor:pointer; text-transform:none; letter-spacing:0; }
  .ns-app .nss-hist-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; }
  .ns-app .nss-hist-row:active{ background:#F5F2EA; }
  .ns-app .nss-hist-ic{ width:19px; height:19px; flex:none; fill:none; stroke:#9A958C; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .ns-app .nss-hist-q{ flex:1; min-width:0; font:400 15px/1.3 var(--sans); color:#1A1A1A; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ns-app .nss-hist-x{ flex:none; color:#B5B0A6; font-size:15px; padding:2px 8px; }
  .ns-app .ch-unread{ margin-left:auto; flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent,#0A8D9C); color:#fff; font:600 11px/18px var(--sans); text-align:center; }
  .ns-app #nsEmbed{ display:flex; flex-direction:column; overflow:hidden; }
  .ns-app #nsEmbed iframe{ flex:1; width:100%; }
  .ns-app .nss-reslist{ padding:2px 0 24px; }
  .ns-app .nss-res{ display:block; text-decoration:none; color:inherit; padding:13px 16px; border-bottom:1px solid #EFEBE2; }
  .ns-app .nss-res:active{ background:#F5F2EA; }
  .ns-app .nss-res-top{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
  .ns-app .nss-res-av{ width:22px; height:22px; border-radius:999px; flex:none; object-fit:cover; }
  .ns-app .nss-res-avph{ display:flex; align-items:center; justify-content:center; color:#fff; font:600 9px/1 var(--sans); }
  .ns-app .nss-res-src{ font:600 12.5px/1 var(--sans); color:#5F5E5A; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ns-app .nss-res-time{ font:400 12px/1 var(--sans); color:#9A958C; margin-left:auto; flex:none; }
  .ns-app .nss-res-title{ font:600 15px/1.4 var(--sans); color:#1A1A1A; }
  .ns-app .nss-res-sum{ font:400 13.5px/1.5 var(--sans); color:#6B6862; margin-top:4px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .ns-app .searchbar .ic{ width:34px; height:34px; display:grid; place-items:center; cursor:pointer; flex:none; color:#1A1A1A; }
  .ns-app .searchbar .ic svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; }
  .ns-app .searchbar input{ flex:1; border:0; background:#F1EEE7; border-radius:11px; padding:11px 14px; font:15px/1 var(--sans); color:#1A1A1A; outline:none; }
  .ns-app .sech{ font:700 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#9A958C; padding:16px 16px 9px; }
  .ns-app .cats{ display:flex; gap:8px; padding:0 14px 6px; flex-wrap:wrap; }
  .ns-app .cats .cc{ font:600 13px/1 var(--sans); padding:8px 13px; border-radius:999px; background:#F1EEE7; color:#5F5E5A; cursor:pointer; }
  .ns-app .cats .cc.on{ background:#0A8D9C; color:#fff; }
  .ns-app .reslist .res{ display:flex; gap:12px; align-items:center; padding:9px 14px; }
  .ns-app .reslist .res:active{ background:#F6F4EF; }
  .ns-app .reslist .res .rl{ display:flex; gap:12px; flex:1; min-width:0; align-items:center; cursor:pointer; }
  .ns-app .reslist .res .m{ flex:1; min-width:0; }
  .ns-app .reslist .res .nm{ font:600 15px/1.2 var(--sans); color:#1A1A1A; display:flex; align-items:center; gap:6px; }
  .ns-app .reslist .res .nm .vf{ color:#0A8D9C; font-size:12px; }
  .ns-app .reslist .res .sub{ font:13px/1.3 var(--sans); color:#9A958C; margin-top:2px; }
  .ns-app .reslist .res .sbtn{ border:1px solid #0A8D9C; color:#0A8D9C; background:#fff; font:700 12.5px/1 var(--sans); padding:8px 14px; border-radius:999px; cursor:pointer; flex:none; }
  .ns-app .reslist .res .sbtn.on{ background:#0A8D9C; color:#fff; }
  .ns-app .empty{ padding:30px 16px; text-align:center; color:#9A958C; font:14px/1.5 var(--sans); }

  /* ===== CHANNEL PROFILE (bundle b3 line 431) ===== */
  .ns-app .phead{ background:#0A8D9C; padding:22px 18px 26px; text-align:center; color:#fff; }
  .ns-app .phead .pn{ font:700 21px/1.2 var(--serif); margin-top:13px; }
  .ns-app .phead .ps{ font:13px/1.4 var(--sans); opacity:.85; margin-top:5px; }
  .ns-app .pcard{ margin:12px; background:#fff; border-radius:14px; padding:15px 16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
  .ns-app .pcard .lab{ font:11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#9A958C; margin-bottom:8px; }
  .ns-app .pcard p{ font:14.5px/1.55 var(--sans); color:#33322E; margin:0; }
  .ns-app .pcard.rows{ padding:0; overflow:hidden; }
  .ns-app .pcard .prow{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid #F0ECE3; }
  .ns-app .pcard .prow:last-child{ border-bottom:0; }
  .ns-app .pcard .prow span:first-child{ font-size:17px; }
  .ns-app .pcard .prow .t{ flex:1; font:14.5px/1.3 var(--sans); color:#1A1A1A; }
  .ns-app .pcard .prow .v{ font:13px/1 var(--sans); color:#9A958C; }
  .ns-app .pcard .prow .v b{ color:#0F6E56; }
  .ns-app .plast{ margin:0 12px 14px; }
  .ns-app .plast .pl{ background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:8px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04); }
  .ns-app .plast .pl .h{ font:700 14.5px/1.3 var(--serif); color:#1A1A1A; }
  .ns-app .plast .pl .m{ font:12px/1.3 var(--sans); color:#A8A399; margin-top:4px; }

  /* ===== CHAT (bundle b3 line 438) ===== */
  .ns-app .msgs{ display:flex; flex-direction:column; gap:3px; padding:12px 12px 6px; }
  .ns-app .mb{ max-width:80%; padding:8px 12px 7px; border-radius:15px; font:14.5px/1.42 var(--sans); position:relative; word-wrap:break-word; }
  .ns-app .mb .t{ font:10.5px/1 var(--sans); opacity:.55; float:right; margin:5px 0 0 9px; }
  .ns-app .mb.them{ align-self:flex-start; background:#fff; color:#1A1A1A; border-bottom-left-radius:5px; box-shadow:0 1px 1px rgba(0,0,0,.07); }
  .ns-app .mb.me{ align-self:flex-end; background:#0A8D9C; color:#fff; border-bottom-right-radius:5px; }
  .ns-app .mb.me .t{ color:rgba(255,255,255,.75); }
  .ns-app .mb.card{ padding:0; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.1); align-self:flex-start; width:80%; }
  .ns-app .mb.card .ci{ height:92px; }
  .ns-app .mb.card .cc{ padding:9px 12px 11px; }
  .ns-app .mb.card .cc b{ font:700 14px/1.3 var(--serif); color:#1A1A1A; display:block; margin-bottom:3px; }
  .ns-app .mb.card .cc span{ font:12.5px/1.4 var(--sans); color:#7C7870; }

  /* Sprint #339 — brief-note bubble (color-coded topic from brief.html) */
  .ns-app .mb.brief-note{
    align-self:flex-start; width:88%;
    background:#fff; color:#1A1A1A;
    padding:11px 14px 12px 16px;
    border-radius:15px; border-bottom-left-radius:5px;
    box-shadow:0 1px 2px rgba(0,0,0,.08);
    position:relative; overflow:hidden;
    margin:2px 0;
  }
  .ns-app .mb.brief-note::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  }
  .ns-app .mb.brief-note .bn-topic{
    display:flex; align-items:center; gap:7px;
    font:600 12.5px/1 var(--sans);
    letter-spacing:0.2px;
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .ns-app .mb.brief-note .bn-topic .bn-dot{
    width:8px; height:8px; border-radius:50%;
  }
  .ns-app .mb.brief-note .bn-body{
    font:14.5px/1.45 var(--serif);
    color:#1A1A1A;
    letter-spacing:-0.05px;
  }
  .ns-app .mb.brief-note .bn-body b{ font-weight:700; }
  .ns-app .mb.brief-note .bn-meta{
    margin-top:7px; font:11px/1 var(--sans); color:#9AA0AB;
    display:flex; gap:8px; align-items:center;
  }
  .ns-app .mb.brief-note.plan-1::before{ background:#2F8F5C; }
  .ns-app .mb.brief-note.plan-1 .bn-topic{ color:#2F8F5C; }
  .ns-app .mb.brief-note.plan-1 .bn-dot{ background:#2F8F5C; }
  .ns-app .mb.brief-note.plan-2::before{ background:#6553D0; }
  .ns-app .mb.brief-note.plan-2 .bn-topic{ color:#6553D0; }
  .ns-app .mb.brief-note.plan-2 .bn-dot{ background:#6553D0; }
  .ns-app .mb.brief-note.plan-3::before{ background:#C28524; }
  .ns-app .mb.brief-note.plan-3 .bn-topic{ color:#C28524; }
  .ns-app .mb.brief-note.plan-3 .bn-dot{ background:#C28524; }
  /* Sprint #348 — Full TOP STORY card in chat (with 4 beats inside) */
  .ns-app .mb.top-story{
    align-self:flex-start; width:92%;
    background:#fff; color:#1A1A1A;
    border-radius:18px; border-bottom-left-radius:6px;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    margin:8px 0;
    overflow:hidden;
    position:relative;
  }
  .ns-app .mb.top-story .ts-strip{
    height:5px; background:#5C6470;
  }
  .ns-app .mb.top-story .ts-hero{
    position:relative; height:160px;
    background:#1A1A1A center/cover no-repeat;
    cursor:zoom-in;
    overflow:hidden;
  }
  .ns-app .mb.top-story .ts-hero::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
    pointer-events:none;
  }
  .ns-app .mb.top-story .ts-hero-overlay{
    position:absolute; left:12px; right:12px; bottom:10px;
    color:#fff; font:600 16px/1.25 var(--serif, Georgia, serif);
    letter-spacing:-0.2px;
    text-shadow:0 1px 3px rgba(0,0,0,0.4);
    z-index:1;
  }
  .ns-app .mb.top-story .ts-hero-zoom{
    position:absolute; top:8px; right:8px;
    width:28px; height:28px; border-radius:50%;
    background:rgba(0,0,0,0.45); backdrop-filter:blur(8px);
    color:#fff; display:grid; place-items:center;
    font-size:13px; z-index:2;
  }
  .ns-app .mb.top-story .ts-beat-image{
    margin-top:8px; height:90px;
    background:#1A1A1A center/cover no-repeat;
    border-radius:8px; cursor:zoom-in;
    position:relative;
  }
  .ns-app .mb.top-story .ts-beat-image::after{
    content:'⤢'; position:absolute; top:6px; right:6px;
    width:22px; height:22px; border-radius:50%;
    background:rgba(0,0,0,0.45); color:#fff;
    display:grid; place-items:center; font-size:11px;
  }
  /* Lightbox overlay */
  #ns-lightbox{
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,0.92);
    display:none; align-items:center; justify-content:center;
    padding:env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px);
    cursor:zoom-out;
  }
  #ns-lightbox.on{ display:flex; }
  #ns-lightbox img{
    max-width:100%; max-height:88vh; border-radius:12px;
    box-shadow:0 10px 60px rgba(0,0,0,0.5);
  }
  #ns-lightbox .ns-lb-caption{
    position:absolute; left:16px; right:16px; bottom:24px;
    color:#fff; font:14px/1.4 var(--sans);
    text-align:center; opacity:0.85;
    text-shadow:0 1px 4px rgba(0,0,0,0.6);
  }
  #ns-lightbox .ns-lb-x{
    position:absolute; top:env(safe-area-inset-top, 16px); right:16px;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,0.15); color:#fff;
    display:grid; place-items:center;
    font:300 24px/1 var(--sans); cursor:pointer;
  }
  .ns-app .mb.top-story.plan-1 .ts-strip{ background:linear-gradient(90deg, #2F8F5C, #5DCAA5); }
  .ns-app .mb.top-story.plan-2 .ts-strip{ background:linear-gradient(90deg, #6553D0, #AFA9EC); }
  .ns-app .mb.top-story.plan-3 .ts-strip{ background:linear-gradient(90deg, #C28524, #EF9F27); }
  .ns-app .mb.top-story .ts-head{
    padding:12px 14px 8px;
    display:flex; align-items:flex-start; gap:10px;
  }
  .ns-app .mb.top-story .ts-head .ts-icon{
    width:34px; height:34px; border-radius:10px;
    display:grid; place-items:center;
    flex:none; font-size:18px;
  }
  .ns-app .mb.top-story.plan-1 .ts-head .ts-icon{ background:rgba(47,143,92,0.15); }
  .ns-app .mb.top-story.plan-2 .ts-head .ts-icon{ background:rgba(101,83,208,0.15); }
  .ns-app .mb.top-story.plan-3 .ts-head .ts-icon{ background:rgba(194,133,36,0.15); }
  .ns-app .mb.top-story .ts-head .ts-meta{ flex:1; }
  .ns-app .mb.top-story .ts-title{
    font:600 15px/1.25 var(--serif, Georgia, serif);
    letter-spacing:-0.1px;
    color:#1A1A1A; margin-bottom:3px;
  }
  .ns-app .mb.top-story .ts-src{
    font:11px/1.3 var(--sans);
    color:var(--text-3, #888);
  }
  .ns-app .mb.top-story .ts-listen{
    flex:none; align-self:center;
    padding:7px 12px; border-radius:999px;
    background:linear-gradient(135deg, #0F6E56, #0A8D9C);
    color:#fff; border:0; cursor:pointer;
    font:600 11.5px/1 var(--sans);
    display:inline-flex; align-items:center; gap:5px;
    box-shadow:0 1px 4px rgba(10,141,156,0.3);
  }
  .ns-app .mb.top-story .ts-listen.playing{
    background:#B8475C;
    box-shadow:0 1px 4px rgba(184,71,92,0.3);
  }
  /* Beats inside the card */
  .ns-app .mb.top-story .ts-beat{
    padding:8px 14px 10px;
    border-top:0.5px solid rgba(0,0,0,0.06);
  }
  .ns-app .mb.top-story .ts-beat .ts-beat-label{
    font:600 10px/1 var(--sans);
    letter-spacing:0.8px; text-transform:uppercase;
    margin-bottom:5px;
    display:inline-flex; align-items:center; gap:5px;
  }
  .ns-app .mb.top-story .ts-beat .ts-beat-label::before{
    content:''; width:3px; height:11px; border-radius:1px; display:inline-block;
  }
  .ns-app .mb.top-story.plan-1 .ts-beat .ts-beat-label{ color:#2F8F5C; }
  .ns-app .mb.top-story.plan-1 .ts-beat .ts-beat-label::before{ background:#2F8F5C; }
  .ns-app .mb.top-story.plan-2 .ts-beat .ts-beat-label{ color:#6553D0; }
  .ns-app .mb.top-story.plan-2 .ts-beat .ts-beat-label::before{ background:#6553D0; }
  .ns-app .mb.top-story.plan-3 .ts-beat .ts-beat-label{ color:#C28524; }
  .ns-app .mb.top-story.plan-3 .ts-beat .ts-beat-label::before{ background:#C28524; }
  .ns-app .mb.top-story .ts-beat .ts-beat-text{
    font:14.5px/1.4 var(--serif, Georgia, serif);
    color:#1A1A1A;
  }
  .ns-app .mb.top-story .ts-beat .ts-beat-text b.num{
    color:#C28524; font-weight:700;
    padding:0 2px;
  }
  .ns-app .mb.top-story .ts-beat .ts-beat-text b.name{
    background:rgba(10,141,156,0.1);
    color:#0A8D9C; font-weight:600;
    padding:1px 6px; border-radius:4px;
    border:0.5px solid rgba(10,141,156,0.2);
  }
  .ns-app .mb.top-story .ts-beat .ts-beat-text b.loc{
    color:#5C6470; font-weight:600;
    padding:1px 4px 1px 16px;
    position:relative;
  }
  .ns-app .mb.top-story .ts-beat .ts-beat-text b.loc::before{
    content:'📍'; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:0.85em;
  }
  .ns-app .mb.top-story .ts-beat.speaking{
    background:rgba(10,141,156,0.06);
  }
  .ns-app .mb.top-story .ts-foot{
    padding:8px 14px 11px;
    display:flex; gap:8px;
    border-top:0.5px solid rgba(0,0,0,0.06);
    background:rgba(0,0,0,0.02);
  }
  .ns-app .mb.top-story .ts-foot .ts-action{
    padding:6px 12px; border-radius:999px;
    background:transparent; border:0.5px solid var(--border, rgba(0,0,0,0.1));
    font:11px/1 var(--sans); color:var(--text-2, #555);
    cursor:pointer;
  }

  /* Brief header bubble — intro before topic notes */
  .ns-app .mb.brief-head{
    align-self:flex-start; width:88%;
    background:linear-gradient(135deg, #0A8D9C 0%, #0F6E56 100%);
    color:#fff;
    padding:11px 14px 12px;
    border-radius:15px; border-bottom-left-radius:5px;
    box-shadow:0 2px 6px rgba(10,141,156,0.2);
    margin:2px 0 6px;
  }
  .ns-app .mb.brief-head .bh-label{
    display:flex; align-items:center; gap:6px;
    font:600 11px/1 var(--sans); letter-spacing:0.5px;
    text-transform:uppercase; opacity:0.85; margin-bottom:5px;
  }
  .ns-app .mb.brief-head .bh-label::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background:#fff; box-shadow:0 0 6px rgba(255,255,255,0.6);
    animation:nsAiPulse 2s infinite;
  }
  .ns-app .mb.brief-head .bh-title{
    font:600 15px/1.3 var(--serif);
    letter-spacing:-0.1px;
  }
  @keyframes nsAiPulse{ 0%,100%{opacity:1} 50%{opacity:0.4} }

  /* ===================== Sprint #340 — BriefStream (TikTok-style brief player) ===================== */
  #ns-brief-stream{
    position:fixed; inset:0; z-index:9999;
    background:#000;
    display:none; overflow:hidden;
    font-family: var(--sans, -apple-system, "SF Pro Text", sans-serif);
    color:#fff;
  }
  #ns-brief-stream.on{ display:block; }
  #ns-brief-stream .bs-canvas{
    position:absolute; inset:0;
    transition:background 600ms ease;
    background:#000;
  }
  #ns-brief-stream .bs-scene{
    position:absolute; inset:0;
    opacity:0; transition:opacity 600ms ease;
    display:grid; place-items:center;
  }
  #ns-brief-stream .bs-scene.on{ opacity:1; }
  #ns-brief-stream .bs-scene svg{ width:62%; max-width:340px; height:auto; opacity:0.92; }
  #ns-brief-stream .bs-scene .bs-glow{
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at 50% 35%, transparent 0%, rgba(0,0,0,0.55) 75%);
  }
  /* Progress bar — segmented per topic */
  #ns-brief-stream .bs-prog{
    position:absolute; top:calc(env(safe-area-inset-top, 0px) + 10px);
    left:14px; right:14px; height:3px;
    display:flex; gap:5px; z-index:5;
  }
  #ns-brief-stream .bs-prog i{
    flex:1; height:100%; border-radius:2px; background:rgba(255,255,255,0.25);
    position:relative; overflow:hidden;
  }
  #ns-brief-stream .bs-prog i b{
    position:absolute; left:0; top:0; bottom:0; width:0%; background:#fff;
    transition:width 200ms linear;
  }
  /* Header — close button + brand */
  #ns-brief-stream .bs-head{
    position:absolute; top:calc(env(safe-area-inset-top, 0px) + 22px);
    left:0; right:0; padding:0 16px; z-index:5;
    display:flex; align-items:center; gap:10px;
  }
  #ns-brief-stream .bs-head .bs-av{
    width:30px; height:30px; border-radius:50%;
    background:linear-gradient(135deg, #0F6E56, #0A8D9C);
    display:grid; place-items:center;
    font:700 11px/1 var(--sans); color:#fff;
  }
  #ns-brief-stream .bs-head .bs-brand{
    flex:1; font:600 14px/1 var(--sans); color:#fff;
  }
  #ns-brief-stream .bs-head .bs-brand small{
    display:block; font:11px/1.2 var(--sans); opacity:0.65; margin-top:2px; font-weight:400;
  }
  #ns-brief-stream .bs-head .bs-x{
    width:36px; height:36px; border-radius:50%;
    background:rgba(0,0,0,0.4); color:#fff;
    display:grid; place-items:center; cursor:pointer;
    font:300 22px/1 var(--sans);
    backdrop-filter:blur(10px);
  }
  /* Caption — bottom 40% gradient + text */
  #ns-brief-stream .bs-foot{
    position:absolute; left:0; right:0; bottom:0; z-index:5;
    padding:32px 22px calc(env(safe-area-inset-bottom, 0px) + 22px);
    background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
  }
  #ns-brief-stream .bs-topic{
    display:flex; align-items:center; gap:8px;
    font:600 12px/1 var(--sans);
    text-transform:uppercase; letter-spacing:0.6px;
    margin-bottom:12px;
  }
  #ns-brief-stream .bs-topic .bs-dot{
    width:9px; height:9px; border-radius:50%;
  }
  #ns-brief-stream .bs-caption{
    font:500 19px/1.35 var(--serif, Georgia, serif);
    letter-spacing:-0.2px;
    color:#fff;
    min-height:90px;
  }
  #ns-brief-stream .bs-caption b{
    background:linear-gradient(transparent 60%, rgba(255,209,102,0.5) 60%);
    font-weight:600;
  }
  /* Sprint #346 — semantic caption highlighters */
  #ns-brief-stream .bs-caption b.num{
    background:none;
    color:#FFD166;
    font-weight:700;
    font-size:1.08em;
    text-shadow:0 0 12px rgba(255,209,102,0.5);
    padding:0 3px;
    animation:bsFlash 1.2s ease-out;
  }
  #ns-brief-stream .bs-caption b.name{
    background:none;
    color:#fff;
    font-weight:700;
    padding:1px 8px;
    border-radius:4px;
    background:rgba(255,255,255,0.18);
    border:0.5px solid rgba(255,255,255,0.4);
    font-size:0.94em;
  }
  #ns-brief-stream .bs-caption b.loc{
    background:none;
    color:#fff;
    font-weight:600;
    padding:1px 6px 1px 18px;
    border-radius:4px;
    background:rgba(255,255,255,0.12);
    position:relative;
    font-size:0.94em;
  }
  #ns-brief-stream .bs-caption b.loc::before{
    content:'📍';
    position:absolute; left:3px; top:50%; transform:translateY(-50%); font-size:0.85em;
  }
  @keyframes bsFlash{
    0% { transform:scale(1); text-shadow:0 0 0 transparent; }
    35% { transform:scale(1.12); text-shadow:0 0 20px rgba(255,209,102,0.85); }
    100% { transform:scale(1); text-shadow:0 0 12px rgba(255,209,102,0.5); }
  }
  /* Beat-type label above caption */
  #ns-brief-stream .bs-beat-label{
    display:inline-flex; align-items:center; gap:6px;
    font:600 10.5px/1 var(--sans);
    text-transform:uppercase; letter-spacing:1px;
    opacity:0.65; margin-bottom:8px;
  }
  #ns-brief-stream .bs-beat-label::before{
    content:''; width:4px; height:4px; border-radius:50%; background:currentColor;
  }
  /* Mini progress within a topic (beats sub-segments) */
  #ns-brief-stream .bs-beats-progress{
    display:flex; gap:3px; margin-top:6px;
  }
  #ns-brief-stream .bs-beats-progress i{
    flex:1; height:2px; background:rgba(255,255,255,0.25); border-radius:1px; position:relative; overflow:hidden;
  }
  #ns-brief-stream .bs-beats-progress i.done{ background:rgba(255,255,255,0.7); }
  #ns-brief-stream .bs-beats-progress i.on{ background:rgba(255,255,255,0.7); }
  #ns-brief-stream .bs-beats-progress i.on::after{
    content:''; position:absolute; left:0; top:0; bottom:0; right:0;
    background:linear-gradient(to right, transparent, rgba(255,255,255,0.6));
    animation:bsBeatPulse 1.5s ease-in-out infinite;
  }
  @keyframes bsBeatPulse{ 0%,100%{opacity:0.4} 50%{opacity:1} }

  /* ===================== Sprint #344 — Сюжетна стрічка (Storyline Stream) =====================
     Per-storyline persistent aggregation channel. Telegram-style bubbles
     з 6-label fragment taxonomy. Append-never-overwrite (Bellingcat). */
  .ns-app .ss-head{
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 16px 10px;
    background:linear-gradient(135deg, #0F6E56, #0A8D9C);
    color:#fff;
  }
  .ns-app .ss-head .ss-av{
    width:42px; height:42px; border-radius:10px;
    background:rgba(255,255,255,0.18); backdrop-filter:blur(10px);
    display:grid; place-items:center;
    font-size:22px; flex:none;
  }
  .ns-app .ss-head .ss-meta{ flex:1; }
  .ns-app .ss-head .ss-title{ font:600 15px/1.2 var(--sans); margin-bottom:3px; }
  .ns-app .ss-head .ss-status{ font:11px/1.3 var(--sans); opacity:0.85; }
  .ns-app .ss-head .ss-status .live-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:#5DCAA5; margin-right:5px; box-shadow:0 0 8px #5DCAA5;
    animation:bsBeatPulse 1.5s ease-in-out infinite;
  }
  .ns-app .ss-head .ss-x{
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,0.18); color:#fff;
    display:grid; place-items:center; cursor:pointer;
    font:300 20px/1 var(--sans);
  }
  /* Actor chip row */
  .ns-app .ss-actors{
    display:flex; gap:6px; padding:8px 16px; overflow-x:auto;
    background:rgba(15,110,86,0.08); border-bottom:0.5px solid var(--border);
    scrollbar-width:none;
  }
  .ns-app .ss-actors::-webkit-scrollbar{ display:none; }
  .ns-app .ss-actor-chip{
    padding:4px 10px; border-radius:999px;
    background:#fff; border:0.5px solid var(--border);
    font:600 11px/1 var(--sans); white-space:nowrap;
    cursor:pointer; transition:all 0.15s;
  }
  .ns-app .ss-actor-chip .ss-actor-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    margin-right:4px; vertical-align:middle;
  }
  .ns-app .ss-actor-chip[data-role="driver"] .ss-actor-dot{ background:#2F8F5C; }
  .ns-app .ss-actor-chip[data-role="stakes"] .ss-actor-dot{ background:#6553D0; }
  .ns-app .ss-actor-chip[data-role="patron"] .ss-actor-dot{ background:#C28524; }
  .ns-app .ss-actor-chip[data-role="ally"] .ss-actor-dot{ background:#0A8D9C; }
  .ns-app .ss-actor-chip[data-role="antagonist"] .ss-actor-dot{ background:#B8475C; }
  .ns-app .ss-actor-chip[data-role="affected"] .ss-actor-dot{ background:#5C6470; }

  /* Day separator */
  .ns-app .ss-day{ text-align:center; margin:12px 0 6px; }
  .ns-app .ss-day span{
    font:600 11px/1 var(--sans); color:#fff;
    background:rgba(90,84,74,0.55); padding:4px 10px; border-radius:999px;
  }

  /* Fragment bubble */
  .ns-app .ss-frag{
    background:#fff; border-radius:14px; border-bottom-left-radius:5px;
    padding:10px 13px 11px;
    margin:5px 12px;
    box-shadow:0 1px 1px rgba(0,0,0,0.06);
    position:relative;
    border-left:4px solid transparent;
    max-width:88%;
  }
  /* Provenance row */
  .ns-app .ss-frag .ss-prov{
    display:flex; align-items:center; gap:6px;
    font:11px/1 var(--sans); color:var(--text-3, #888);
    margin-bottom:6px;
  }
  .ns-app .ss-frag .ss-prov .ss-tier{
    width:6px; height:6px; border-radius:50%;
  }
  /* Sprint #362 — tier palette aligned: teal/purple/red */
  .ns-app .ss-frag .ss-prov .ss-tier.general{ background:#0A8D9C; }      /* загально-політичні · бірюзова */
  .ns-app .ss-frag .ss-prov .ss-tier.specialized{ background:#6553D0; }  /* спеціалізовані · фіолетова */
  .ns-app .ss-frag .ss-prov .ss-tier.paid{ background:#B8475C; }         /* ексклюзивні · червона */
  .ns-app .ss-frag .ss-prov .ss-src{ color:#1A1A1A; font-weight:500; }
  .ns-app .ss-frag .ss-prov .ss-time{ margin-left:auto; }
  /* Body */
  .ns-app .ss-frag .ss-body{
    font:14px/1.4 var(--serif, Georgia, serif);
    color:#1A1A1A;
  }
  .ns-app .ss-frag .ss-body b{ font-weight:700; }
  /* Label chips */
  .ns-app .ss-frag .ss-labels{
    display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;
  }
  .ns-app .ss-frag .ss-lbl{
    font:600 10px/1 var(--sans);
    padding:3px 7px; border-radius:4px;
    display:inline-flex; align-items:center; gap:3px;
  }
  /* 6-label taxonomy (Greimas + Bellingcat) */
  .ns-app .ss-frag.consensus{ border-left-color:#5C6470; }
  .ns-app .ss-frag.consensus .ss-lbl.tax{ background:rgba(92,100,112,0.15); color:#5C6470; }
  .ns-app .ss-frag.addition{ border-left-color:#2F8F5C; }
  .ns-app .ss-frag.addition .ss-lbl.tax{ background:rgba(47,143,92,0.15); color:#2F8F5C; }
  .ns-app .ss-frag.dissent{ border-left-color:#B8475C; }
  .ns-app .ss-frag.dissent .ss-lbl.tax{ background:rgba(184,71,92,0.15); color:#B8475C; }
  .ns-app .ss-frag.contradiction{ border-left-color:#C28524; background:rgba(255,209,102,0.05); }
  .ns-app .ss-frag.contradiction .ss-lbl.tax{ background:rgba(194,133,36,0.18); color:#C28524; }
  .ns-app .ss-frag.verification-update{ border-left-color:#0A8D9C; background:rgba(10,141,156,0.04); }
  .ns-app .ss-frag.verification-update .ss-lbl.tax{ background:rgba(10,141,156,0.15); color:#0A8D9C; }
  .ns-app .ss-frag.claim-only{ border-left-color:#9AA0AB; background:rgba(255,250,235,0.5); border:0.5px dashed rgba(154,160,171,0.6); }
  .ns-app .ss-frag.claim-only .ss-lbl.tax{ background:rgba(154,160,171,0.18); color:#5C6470; }
  /* Strikethrough for superseded fragments */
  .ns-app .ss-frag.superseded .ss-body{ text-decoration:line-through; opacity:0.5; }
  .ns-app .ss-frag.superseded::after{
    content:'оновлено · див. фрагмент нижче'; font:10.5px/1 var(--sans);
    color:#0A8D9C; display:block; margin-top:6px;
  }
  /* Role tag */
  .ns-app .ss-frag .ss-lbl.role{
    background:rgba(255,255,255,0.5); color:#5C6470;
    border:0.5px solid var(--border);
  }
  .ns-app .ss-frag .ss-lbl.role[data-role="driver"]{ color:#2F8F5C; border-color:rgba(47,143,92,0.3); }
  .ns-app .ss-frag .ss-lbl.role[data-role="antagonist"]{ color:#B8475C; border-color:rgba(184,71,92,0.3); }
  .ns-app .ss-frag .ss-lbl.role[data-role="patron"]{ color:#C28524; border-color:rgba(194,133,36,0.3); }

  /* Reactions strip */
  .ns-app .ss-frag .ss-react{
    display:flex; gap:4px; margin-top:8px; padding-top:6px;
    border-top:0.5px solid rgba(0,0,0,0.05);
  }
  .ns-app .ss-frag .ss-react .ss-reaction{
    padding:3px 8px; border-radius:999px;
    background:rgba(0,0,0,0.04); cursor:pointer;
    font:11px/1 var(--sans); color:var(--text-2, #555);
    display:inline-flex; align-items:center; gap:3px;
    transition:all 0.15s;
  }
  .ns-app .ss-frag .ss-react .ss-reaction:hover{ background:rgba(0,0,0,0.08); }
  .ns-app .ss-frag .ss-react .ss-reaction.on{ background:rgba(10,141,156,0.15); color:#0A8D9C; }

  /* Brief composer hint */
  .ns-app .ss-brief-hint{
    margin:14px 12px; padding:10px 12px;
    background:linear-gradient(135deg, rgba(10,141,156,0.08), rgba(15,110,86,0.05));
    border:0.5px solid rgba(10,141,156,0.25);
    border-radius:10px;
    font:12px/1.4 var(--sans); color:var(--text-2, #555);
  }
  .ns-app .ss-brief-hint b{ color:#0A8D9C; }

  /* Composer (read-only display for now) */
  .ns-app .ss-composer{
    display:flex; gap:8px; padding:8px 12px;
    background:#fff; border-top:0.5px solid var(--border);
    align-items:center;
  }
  .ns-app .ss-composer .ss-pill{
    flex:1; padding:9px 14px; border-radius:999px;
    background:rgba(0,0,0,0.04); color:var(--text-3, #888);
    font:13px/1 var(--sans);
  }
  .ns-app .ss-composer .ss-pill.pro{
    background:linear-gradient(135deg, #6553D0, #0A8D9C);
    color:#fff; cursor:pointer;
  }
  #ns-brief-stream .bs-meta{
    margin-top:14px;
    font:11.5px/1 var(--sans); opacity:0.7;
    display:flex; align-items:center; gap:6px;
  }
  /* Plan colors for caption */
  #ns-brief-stream.plan-1 .bs-topic{ color:#5DCAA5; }
  #ns-brief-stream.plan-1 .bs-topic .bs-dot{ background:#5DCAA5; }
  #ns-brief-stream.plan-1 .bs-canvas{ background:radial-gradient(circle at 50% 40%, #1F4838 0%, #06150F 75%); }
  #ns-brief-stream.plan-2 .bs-topic{ color:#AFA9EC; }
  #ns-brief-stream.plan-2 .bs-topic .bs-dot{ background:#AFA9EC; }
  #ns-brief-stream.plan-2 .bs-canvas{ background:radial-gradient(circle at 50% 40%, #2B2151 0%, #110B26 75%); }
  #ns-brief-stream.plan-3 .bs-topic{ color:#EF9F27; }
  #ns-brief-stream.plan-3 .bs-topic .bs-dot{ background:#EF9F27; }
  #ns-brief-stream.plan-3 .bs-canvas{ background:radial-gradient(circle at 50% 40%, #4A3210 0%, #1A0F03 75%); }
  /* Tap controls overlay (invisible click zones) */
  #ns-brief-stream .bs-tap-left,
  #ns-brief-stream .bs-tap-right,
  #ns-brief-stream .bs-tap-mid{
    position:absolute; top:90px; bottom:170px; z-index:3;
  }
  #ns-brief-stream .bs-tap-left{ left:0; width:30%; }
  #ns-brief-stream .bs-tap-mid{ left:30%; right:30%; }
  #ns-brief-stream .bs-tap-right{ right:0; width:30%; }
  /* Pause indicator */
  #ns-brief-stream .bs-pause-ic{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0.3);
    width:80px; height:80px; border-radius:50%;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(20px);
    display:grid; place-items:center; z-index:4;
    opacity:0; pointer-events:none;
    transition:opacity 200ms, transform 200ms;
  }
  #ns-brief-stream.paused .bs-pause-ic{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  #ns-brief-stream .bs-pause-ic svg{ width:38px; height:38px; fill:#fff; }

  .ns-app .typing{ align-self:flex-start; background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.07); border-radius:15px; border-bottom-left-radius:5px; padding:12px 14px; display:flex; gap:4px; }
  .ns-app .typing i{ width:7px; height:7px; border-radius:999px; background:#B8B2A6; animation:nsTp 1.2s infinite; }
  .ns-app .typing i:nth-child(2){ animation-delay:.2s; }
  .ns-app .typing i:nth-child(3){ animation-delay:.4s; }
  @keyframes nsTp{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-5px); opacity:1 } }
  .ns-app .suggest{ display:flex; gap:8px; padding:6px 12px 4px; overflow-x:auto; flex:none; }
  .ns-app .suggest::-webkit-scrollbar{ height:0; }
  .ns-app .suggest .sg{ flex:none; font:600 13px/1 var(--sans); color:#0A8D9C; background:#fff; border:1px solid #CDE8E4; border-radius:999px; padding:9px 14px; cursor:pointer; white-space:nowrap; }
  .ns-app .composer{ flex:none; background:transparent; padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  /* ЄДИНИЙ мінімал-композер (статичний — щоб не було пізньої підложки) */
  .nsm-comp-row{ display:flex; align-items:flex-end; gap:9px; }
  .nsm-comp-side{ width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center; color:#8A867C; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .nsm-comp-side svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
  .nsm-comp-pill{ flex:1; min-width:0; display:flex; align-items:flex-end; gap:8px; background:color-mix(in srgb, var(--bg-card,#fff) 50%, transparent); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border-radius:20px; padding:6px 12px 6px 15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 12px rgba(26,26,26,.07); }
  .nsm-comp-pill input,.nsm-comp-pill textarea{ flex:1; min-width:0; border:none; outline:none; background:transparent; font:400 15px/1.35 var(--sans,-apple-system,sans-serif); color:var(--fg1,#1A1A1A); resize:none; max-height:110px; padding:5px 0; display:block; }
  .nsm-comp-emoji{ flex:none; display:flex; align-items:center; color:#9A958C; cursor:pointer; padding-bottom:4px; -webkit-tap-highlight-color:transparent; }
  .nsm-comp-emoji svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .nsm-comp-act{ width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center; color:#8A867C; cursor:pointer; border-radius:999px; -webkit-tap-highlight-color:transparent; transition:background .15s ease,color .15s ease,width .15s ease,height .15s ease; }
  .nsm-comp-act svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .nsm-comp-act.on{ width:34px; height:34px; background:var(--accent,#0A8D9C); color:var(--on-accent,#fff); }
  .nsm-comp-act.on svg{ width:19px; height:19px; }
  .ns-app .composer .ic{ width:38px; height:38px; display:grid; place-items:center; cursor:pointer; flex:none; color:#9A958C; }
  .ns-app .composer .ic svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .ns-app .composer .field{ flex:1; background:#F1EEE7; border-radius:20px; padding:9px 14px; }
  .ns-app .composer textarea{ width:100%; border:0; background:transparent; resize:none; outline:none; font:15px/1.35 var(--sans); color:#1A1A1A; max-height:96px; }
  .ns-app .composer .snd{ width:42px; height:42px; border-radius:999px; background:#0A8D9C; color:#fff; border:0; display:grid; place-items:center; cursor:pointer; flex:none; }
  .ns-app .composer .snd svg{ width:21px; height:21px; fill:#fff; }

  /* toast (production positioning) */
  .ns-toast{
    position:absolute; left:50%; bottom:70px;
    transform:translateX(-50%) translateY(20px);
    background:#1A1A1A; color:#fff;
    font:600 13px/1.3 var(--sans);
    padding:11px 16px; border-radius:11px;
    opacity:0; transition:all .3s;
    z-index:10100; pointer-events:none;   /* 22.07 · тост над оверлеями */
    max-width:80%; text-align:center;
  }
  .ns-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* magic-link modal (production data-flow layer — preserved verbatim) */
  .nsm-modal{
    position:fixed; inset:0;
    background:rgba(26,26,26,0.6);
    display:none;
    align-items:center; justify-content:center;
    z-index:10050;   /* 22.07 · над bnav(9999) — модалка не пробивається знизу */
    padding:20px;
  }
  .nsm-modal.on{ display:flex; }
  .nsm-modal-card{
    background:#fff; border-radius:20px;
    width:100%; max-width:380px;
    padding:24px 22px;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
  }
  .nsm-modal h2{ margin:0 0 8px; font:700 20px/1.2 var(--sans); color:var(--ink-900); }
  .nsm-modal p{ margin:0 0 16px; font:14px/1.4 var(--sans); color:var(--ink-500); }
  .nsm-modal input{
    width:100%; padding:12px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    font:15px var(--sans);
    margin-bottom:10px;
    outline:none;
  }
  .nsm-modal input:focus{ border-color:var(--teal-accent); }
  .nsm-modal-actions{ display:flex; gap:8px; }
  .nsm-modal button{
    flex:1; padding:11px 16px;
    border:none; border-radius:10px;
    font:600 14px var(--sans);
    cursor:pointer;
  }
  .nsm-modal .btn-send{ background:var(--teal-accent); color:#fff; }
  .nsm-modal .btn-send:hover{ background:var(--teal-700); }
  .nsm-modal .btn-cancel{ background:var(--paper-sunk); color:var(--ink-700); }
  .nsm-modal .nsm-status{
    margin-top:10px;
    font:13px var(--sans);
    color:var(--ink-500);
    min-height:18px;
  }


  /* ============================================================
     Sprint #284 — Laptop 4-pane layout (>=1025px).
     Source: _laptop_v2_template.html (laptop bundle 1).
     Selectors: .rail .pane.list .pane.mid .pane.right .lp-* .mp-* .rp-*
     Mobile/tablet (<=1024px) untouched: existing .ns-phone preserved.
     Browser .win .chrome mock NOT adopted (visual preview only).
     ============================================================ */
  @media (min-width:1025px){
    body{
      background:#D9D5CC;
      display:block;
      padding:0;
      min-height:100vh;
    }
    /* Convert ns-phone into a fullscreen laptop window (no chrome). */
    .ns-phone{
      width:100vw; max-width:none;
      height:100vh; max-height:none;
      background:#fff;
      border-radius:0;
      box-shadow:none;
      display:flex; flex-direction:column;
      overflow:hidden;
    }
    .ns-status, .ns-island, .ns-home-indicator{ display:none !important; }
    /* The .ns-app becomes the .lapp 4-pane container at laptop width. */
    .ns-app.lapp{ flex:1; display:flex; min-height:0; overflow:hidden; }
    /* Hide the legacy mobile screen stack when laptop layout is active. */
    .ns-app.lapp .screen{ display:none !important; }

    /* RAIL — verbatim from _laptop_v2_template.html lines 245-251 */
    .lapp .rail{ width:68px; flex:none; background:#0E3A33; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 0; }
    .lapp .rail .logo{ width:40px; height:40px; border-radius:11px; background:#0A8D9C; color:#fff; font:700 15px/1 var(--sans); display:grid; place-items:center; margin-bottom:10px; }
    .lapp .rail .nv{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:rgba(255,255,255,.6); cursor:pointer; }
    .lapp .rail .nv svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .lapp .rail .nv:hover{ background:rgba(255,255,255,.08); color:#fff; }
    .lapp .rail .nv.on{ background:#0A8D9C; color:#fff; }
    .lapp .rail .nv.bottom{ margin-top:auto; }

    /* PANES — verbatim lines 253-256 */
    .lapp .pane{ display:flex; flex-direction:column; min-height:0; }
    .lapp .pane.list{ width:360px; flex:none; border-right:1px solid #ECE7DD; background:#fff; }
    .lapp .pane.mid{ flex:1; min-width:0; border-right:1px solid #ECE7DD; }
    .lapp .pane.right{ width:400px; flex:none; background:#FAF9F5; }

    /* AVATAR — verbatim lines 258-262 */
    /* Sprint #365 — прибрали overflow:hidden (raptop view) */
    .lapp .av{ border-radius:999px; display:grid; place-items:center; color:#fff; font:700 16px/1 var(--sans); flex:none; position:relative; width:48px; height:48px; }
    .lapp .av > img{ width:100%; height:100%; border-radius:999px; object-fit:cover; }
    .lapp .av.sm{ width:38px; height:38px; font-size:14px; }
    .lapp .av.lg{ width:82px; height:82px; font-size:30px; }
    .lapp .av .kb{ position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; border-radius:999px; border:2.5px solid #fff; display:grid; place-items:center; font-size:8px; }
    .lapp .av.lg .kb{ width:26px; height:26px; font-size:12px; }
    /* Sprint #362+#364 — tier palette near logos (laptop view): teal/purple/red
       Маленькі цяточки залишаються видимі. Ring reverted. */
    .lapp .av .kb.news{ background:#0A8D9C; }      /* загально-політичні · бірюзова */
    .lapp .av .kb.author{ background:#6553D0; }    /* спеціалізовані · фіолетова */
    .lapp .av .kb.bot{ background:#B8475C; }       /* ексклюзивні · червона */

    /* LIST PANE — verbatim lines 264-280 */
    .lapp .lp-head{ padding:16px 16px 10px; border-bottom:1px solid #F0ECE3; flex:none; }
    .lapp .lp-head .wm{ font:600 20px/1 var(--sans); letter-spacing:-.6px; color:#0A8D9C; margin-bottom:12px; }
    .lapp .lp-head .srch{ display:flex; align-items:center; gap:9px; background:#F1EEE7; border-radius:11px; padding:10px 13px; color:#9A958C; font:14px/1 var(--sans); cursor:text; }
    .lapp .lp-head .srch .i svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; vertical-align:-3px; }
    .lapp .lp-stories{ display:flex; gap:14px; padding:12px 16px; overflow-x:auto; border-bottom:1px solid #F0ECE3; flex:none; }
    .lapp .lp-stories::-webkit-scrollbar{ height:0; }
    .lapp .lp-stories .st{ text-align:center; flex:none; width:56px; cursor:pointer; }
    .lapp .lp-stories .ring{ width:54px; height:54px; border-radius:999px; padding:2.2px; margin:0 auto; }
    .lapp .lp-stories .ring.new{ background:conic-gradient(from 210deg,#0A8D9C,#3FC2A3,#0F6E56,#0A8D9C); }
    .lapp .lp-stories .ring.seen{ background:#E0DACE; }
    .lapp .lp-stories .in{ width:100%; height:100%; border-radius:999px; border:2.2px solid #fff; display:grid; place-items:center; color:#fff; font:700 16px/1 var(--sans); }
    .lapp .lp-stories .st span{ display:block; font:500 10.5px/1.2 var(--sans); color:#33322E; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .lapp .lp-list{ flex:1; overflow-y:auto; }
    .lapp .lp-list .row{ display:flex; gap:12px; padding:11px 14px; cursor:pointer; border-left:3px solid transparent; }
    .lapp .lp-list .row:hover{ background:#F8F6F1; }
    .lapp .lp-list .row.on{ background:#EAF6F4; border-left-color:#0A8D9C; }
    .lapp .lp-list .row .mid{ flex:1; min-width:0; }
    .lapp .lp-list .top{ display:flex; align-items:center; gap:6px; }
    .lapp .lp-list .nm{ font:600 15px/1.2 var(--sans); color:#1A1A1A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
    .lapp .lp-list .vf{ color:#0A8D9C; font-size:12px; flex:none; }
    .lapp .lp-list .tm{ font:12px/1 var(--sans); color:#A8A399; flex:none; margin-left:auto; }
    .lapp .lp-list .pv{ display:flex; gap:7px; margin-top:4px; align-items:flex-start; }
    .lapp .lp-list .txt{ flex:1; min-width:0; font:13.5px/1.32 var(--sans); color:#7C7870; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .lapp .lp-list .txt .pre{ color:#0A8D9C; }
    .lapp .lp-list .txt b{ color:#33322E; }
    .lapp .lp-list .bdg{ flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#0A8D9C; color:#fff; font:700 11.5px/1 var(--sans); display:grid; place-items:center; }
    .lapp .lp-list .bdg.mute{ background:#C4BFB4; }
    .lapp .lp-list .pin{ font-size:11px; flex:none; }

    /* MID PANE — verbatim lines 282-300 */
    .lapp .mp-head{ display:flex; align-items:center; gap:11px; padding:11px 18px; border-bottom:1px solid #ECE7DD; flex:none; background:#fff; }
    .lapp .mp-head .ti{ flex:1; min-width:0; }
    .lapp .mp-head .ti b{ font:600 16px/1.2 var(--sans); display:block; }
    .lapp .mp-head .ti span{ font:12px/1.2 var(--sans); color:#9A958C; }
    .lapp .mp-head .binfo{ border:1px solid #E3DECF; background:#fff; color:#5F5E5A; font:600 12.5px/1 var(--sans); padding:9px 13px; border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:7px; }
    .lapp .mp-head .binfo svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
    .lapp .mp-head .binfo.on{ background:#EAF6F4; color:#0A8D9C; border-color:#0A8D9C; }
    .lapp .chatbg{ background-color:#EDE7DC; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.035' stroke-width='1.4'%3E%3Cpath d='M20 14l4 4-4 4-4-4z'/%3E%3Cpath d='M60 54l4 4-4 4-4-4z'/%3E%3Ccircle cx='62' cy='18' r='4'/%3E%3Ccircle cx='18' cy='60' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
    .lapp .mp-feed{ flex:1; overflow-y:auto; padding:0 0 6px; }
    .lapp .daysep{ text-align:center; margin:14px 0 8px; }
    .lapp .daysep span{ font:600 12px/1 var(--sans); color:#fff; background:rgba(90,84,74,.55); padding:5px 11px; border-radius:999px; }
    .lapp .pc{ background:#fff; border-radius:14px; margin:9px auto; max-width:560px; box-shadow:0 1px 1.5px rgba(0,0,0,.08); overflow:hidden; cursor:pointer; border:2px solid transparent; }
    .lapp .pc:hover{ box-shadow:0 4px 16px rgba(0,0,0,.1); }
    .lapp .pc.active{ border-color:#0A8D9C; }
    .lapp .pc .h{ padding:11px 15px 0; display:flex; align-items:center; gap:8px; }
    .lapp .pc .h .nm{ font:700 13px/1 var(--sans); color:#0A8D9C; }
    .lapp .pc .h .tag{ font:11px/1 var(--sans); color:#A8A399; }
    .lapp .pc .im{ height:170px; background:linear-gradient(135deg,var(--ic),#1A1A1A); margin-top:10px; display:grid; place-items:end start; }
    .lapp .pc .im .cap{ font:600 10px/1 var(--sans); color:rgba(255,255,255,.85); padding:10px 13px; letter-spacing:.04em; text-transform:uppercase; }
    .lapp .pc .b{ padding:10px 15px 7px; }
    .lapp .pc .b h4{ font:700 17px/1.3 var(--serif); color:#1A1A1A; margin:0 0 5px; }
    .lapp .pc .b p{ font:14.5px/1.5 var(--sans); color:#33322E; margin:0; }
    .lapp .pc .rc{ display:flex; gap:6px; padding:3px 15px 9px; flex-wrap:wrap; }
    .lapp .pc .rc .r{ font:600 13px/1 var(--sans); padding:6px 10px; border-radius:999px; background:#EAF6F4; color:#0A8D9C; cursor:pointer; }
    .lapp .pc .rc .r.on{ background:#0A8D9C; color:#fff; }
    .lapp .pc .f{ display:flex; align-items:center; padding:0 15px 11px; }
    .lapp .pc .f .vw{ font:12px/1 var(--sans); color:#A8A399; display:flex; align-items:center; gap:5px; }
    .lapp .pc .f .vw svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; }
    .lapp .pc .f .tt{ margin-left:auto; font:12px/1 var(--sans); color:#A8A399; }
    .lapp .joinbar{ flex:none; background:#fff; border-top:1px solid #E9E5DD; padding:11px 16px; display:flex; justify-content:center; }
    .lapp .joinbar.sub{ color:#9A958C; font:14px/1 var(--sans); display:flex; align-items:center; justify-content:center; gap:8px; }
    .lapp .joinbar.sub b{ color:#0F6E56; }
    .lapp .joinbar svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; vertical-align:-3px; }
    .lapp .joinbar .jb{ border:0; background:#0A8D9C; color:#fff; font:700 14px/1 var(--sans); padding:13px 40px; border-radius:11px; cursor:pointer; display:flex; align-items:center; gap:8px; }

    /* RIGHT PANE — verbatim lines 302-318 */
    .lapp .rp-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid #ECE7DD; flex:none; background:#fff; }
    .lapp .rp-head .lab{ font:700 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#9A958C; }
    .lapp .rp-head .x{ font:600 12.5px/1 var(--sans); color:#0A8D9C; cursor:pointer; }
    .lapp .rp-head.teal{ background:#0A8D9C; }
    .lapp .rp-head.teal .lab{ color:rgba(255,255,255,.85); }
    .lapp .rp-head.teal .x{ color:#fff; }
    /* RP tabs (Стаття / Канал / Асистент) */
    .lapp .rp-tabs{ display:flex; border-bottom:1px solid #ECE7DD; background:#fff; flex:none; }
    .lapp .rp-tabs .rt{ flex:1; text-align:center; padding:11px 4px; font:600 12.5px/1 var(--sans); color:#9A958C; cursor:pointer; border-bottom:2px solid transparent; }
    .lapp .rp-tabs .rt.on{ color:#0A8D9C; border-bottom-color:#0A8D9C; }
    .lapp .rp-scroll{ flex:1; overflow-y:auto; }
    .lapp .hero{ height:190px; background:linear-gradient(135deg,var(--ic),#1A1A1A); display:grid; place-items:end start; }
    .lapp .hero .cap{ font:600 11px/1 var(--sans); color:rgba(255,255,255,.85); padding:13px 16px; letter-spacing:.05em; text-transform:uppercase; }
    .lapp .rd{ padding:16px 20px 30px; }
    .lapp .rd .src{ display:flex; align-items:center; gap:9px; margin-bottom:13px; }
    .lapp .rd .src .nm{ font:700 14px/1.2 var(--sans); color:#1A1A1A; }
    .lapp .rd .src .nm s{ display:block; text-decoration:none; font:12px/1.3 var(--sans); color:#A8A399; font-weight:400; }
    .lapp .rd h1{ font:700 23px/1.26 var(--serif); letter-spacing:-.01em; margin:0 0 13px; color:#1A1A1A; }
    .lapp .rd .lede{ font:16px/1.62 var(--sans); color:#33322E; margin:0 0 14px; }
    .lapp .rd .chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px; }
    .lapp .rd .chip{ font:13px/1 var(--sans); color:#5F5E5A; background:#F1EEE7; border-radius:999px; padding:8px 12px; }
    .lapp .rd .chip b{ color:#0A8D9C; font-weight:700; }
    .lapp .rd .blk{ font:14.5px/1.6 var(--sans); color:#5F5E5A; margin:0 0 12px; }
    .lapp .rd .blk b{ color:#1A1A1A; }
    .lapp .rd .acts{ display:flex; gap:9px; margin-top:4px; }
    .lapp .rd .acts button{ flex:1; border:1px solid #E3DECF; background:#fff; color:#1A1A1A; font:600 13px/1 var(--sans); padding:12px 6px; border-radius:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; }
    .lapp .rd .acts button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
    .lapp .rd .acts button.on{ color:#0A8D9C; border-color:#0A8D9C; background:#EAF6F4; }
    .lapp .ihead{ background:#0A8D9C; padding:22px 18px 24px; text-align:center; color:#fff; }
    .lapp .ihead .pn{ font:700 20px/1.2 var(--serif); margin-top:12px; }
    .lapp .ihead .ps{ font:13px/1.4 var(--sans); opacity:.85; margin-top:5px; }
    .lapp .icard{ margin:12px; background:#fff; border:1px solid #ECE7DD; border-radius:13px; padding:14px 16px; }
    .lapp .icard .lab{ font:11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#9A958C; margin-bottom:8px; }
    .lapp .icard p{ font:14px/1.55 var(--sans); color:#33322E; margin:0; }
    .lapp .icard.rows{ padding:0; overflow:hidden; }
    .lapp .icard .ir{ display:flex; align-items:center; gap:11px; padding:12px 15px; border-bottom:1px solid #F0ECE3; }
    .lapp .icard .ir:last-child{ border-bottom:0; }
    .lapp .icard .ir .t{ flex:1; font:14px/1.3 var(--sans); }
    .lapp .icard .ir .v{ font:13px/1 var(--sans); color:#9A958C; }
    .lapp .icard .ir .v b{ color:#0F6E56; }
    .lapp .il{ margin:0 12px 8px; background:#fff; border:1px solid #ECE7DD; border-radius:11px; padding:11px 14px; cursor:pointer; }
    .lapp .il:hover{ border-color:#0A8D9C; }
    .lapp .il .h{ font:700 14px/1.3 var(--serif); color:#1A1A1A; }
    .lapp .il .m{ font:12px/1.3 var(--sans); color:#A8A399; margin-top:4px; }
    .lapp .lab{ font:700 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#9A958C; }
    .lapp .tipcard{ background:#fff; border:1px solid #ECE7DD; border-radius:13px; padding:14px 16px; margin-bottom:11px; }
    .lapp .tipcard b{ font:700 14px/1.2 var(--sans); color:#1A1A1A; }
    .lapp .tipcard p{ font:13px/1.5 var(--sans); color:#6B6660; margin:6px 0 0; }
    .lapp .empty{ padding:60px 24px; text-align:center; color:#9A958C; font:14px/1.55 var(--sans); }
    .lapp .empty b{ display:block; color:#33322E; font:700 16px/1.3 var(--sans); margin-bottom:8px; }
  }

  /* ============================================================
     Sprint #286 — Floating pill containers (Telegram iOS pattern).
     Frosted-glass pills float above scrolling content with sticky
     positioning. Top toolbar (3 pills: Edit / brand / icons),
     bottom tab bar (1 pill) + separate Search pill, and inner
     channel header (1 pill) replace the solid bars on mobile/tablet.
     Laptop 4-pane (>=1025px) layout is untouched — see media gate
     at the end of this block.
     ============================================================ */
  .ns-app .float-pill{
    /* Sprint #306 — Адаптивні pills до ключового фону vertical theme.
       UA/PL/Recovery/Books light themes → light glass. NRK/Politech
       dark themes → dark glass automatically (через --paper-card variable). */
    background: color-mix(in srgb, var(--paper-card) 40%, transparent);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-radius: 999px;
    box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 0 0 0.5px rgba(255,255,255,.1) inset;
    border: 0.5px solid color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink);
    /* Sprint #303 — uniform min-height for visual stability */
    min-height: 48px;
    box-sizing: border-box;
  }

  /* Sprint #306 — Адаптивність керується vertical theme, не системою.
     OS dark mode НЕ override pill background (це робив #302).
     Тільки label/active states адаптуються до dark mode. */
  @media (prefers-color-scheme: dark) {
    /* Float-pill background залишається vertical-theme-adaptive */
    /* Inactive tabs: muted white */
    .ns-app .bottombar-pills .pill-tabs .tab{
      color: rgba(255, 255, 255, 0.55);
    }
    /* Active tab: filled pill background + iOS blue accent */
    .ns-app .bottombar-pills .pill-tabs .tab.on{
      color: #5ac8fa;
      position: relative;
    }
    /* Sprint #397 · FIX: було inset: -4px -10px — розпирало активний таб
       на +20px ширини за межі flex cell, інші 3 в межах → перший виглядав
       ширшим і «стрибав» при тапі. Тепер inset: 0 — bg строго в межах. */
    .ns-app .bottombar-pills .pill-tabs .tab.on::before{
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.10);
      border-radius: 12px;
      z-index: -1;
    }
    /* Badge: keep visible на dark background */
    .ns-app .bottombar-pills .pill-tabs .tab .dot{
      border: 2px solid rgba(28, 28, 30, 0.9);
    }
    /* Search circle */
    .ns-app .bottombar-pills .pill-search{
      color: rgba(255, 255, 255, 0.85);
    }
    /* Top bar adaptations */
    .ns-app .topbar-pills .pill-edit{
      color: #5ac8fa;
    }
    .ns-app .topbar-pills .pill-brand{
      color: rgba(255, 255, 255, 0.92);
    }
  }

  /* ---------- TOP toolbar (3 pills) — fixed to viewport, safe-area aware ---------- */
  .ns-app .topbar-pills{
    /* Sprint #316 — Тепер WebView edge-to-edge (MainViewController.swift).
       Pills positioning повертається до safe-area-aware: 4px нижче
       Dynamic Island. Без overlap, не надто низько. */
    position:fixed; top:calc(env(safe-area-inset-top, 0px) + 4px);
    left:50%; transform:translateX(-50%);
    width:calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-width:456px;
    z-index:100;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    pointer-events:none;
  }
  .ns-app .topbar-pills .float-pill{ pointer-events:auto; }
  .ns-app .topbar-pills .pill-edit{
    padding:8px 14px;
    font:600 14px/1 var(--sans); color: var(--accent);
    cursor:pointer; flex:none;
    display:flex; align-items:center; justify-content:center;
    min-height:36px;
  }
  .ns-app .topbar-pills .pill-brand{
    padding:6px 14px 6px 6px;
    display:flex; align-items:center; gap:8px;
    cursor:pointer;
    min-height:40px;
  }
  .ns-app .topbar-pills .pill-brand .brand-av{
    width:28px; height:28px; border-radius:999px;
    background: var(--accent); color:#fff;
    display:grid; place-items:center;
    font:700 12px/1 var(--sans); flex:none;
  }
  .ns-app .topbar-pills .pill-brand .brand-tt{
    font:700 14.5px/1 var(--sans); color: var(--ink); letter-spacing:-.2px;
  }
  .ns-app .topbar-pills .pill-brand .brand-tt b{ color: var(--accent); }
  .ns-app .topbar-pills .pill-brand .brand-chev{
    color: var(--ink-soft); font-size:11px; margin-left:1px;
  }
  .ns-app .topbar-pills .pill-icons{
    padding:6px 6px;
    display:flex; align-items:center; gap:2px;
    min-height:40px;
  }
  .ns-app .topbar-pills .pill-icons .ic{
    width:32px; height:32px; border-radius:999px;
    display:grid; place-items:center; cursor:pointer;
    color: var(--ink); background:transparent;
  }
  .ns-app .topbar-pills .pill-icons .ic:hover{
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
  .ns-app .topbar-pills .pill-icons .ic svg{
    width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round;
  }
  /* Sprint #309 — Правий pill (icons) поступово виходить з glass zone,
     fade-out на правому краю, щоб бортик візуально був вільним. */
  .ns-app .topbar-pills .pill-icons{
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.4) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.4) 100%);
  }

  /* ---------- BOTTOM tabs pill + search pill — fixed to viewport, safe-area aware ---------- */
  /* Sprint #308 — Bottom panel ще нижче (від 8px до 0px + safe-area).
     Тепер pill прямо на safe-area edge — впритул до home indicator. */
  .ns-app .bottombar-pills{
    position:fixed; bottom: env(safe-area-inset-bottom, 0px);
    left:50%; transform:translateX(-50%);
    width:calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-width:456px;
    z-index:100;
    display:flex; align-items:center; gap:10px;
    pointer-events:none;
  }
  .ns-app .bottombar-pills .float-pill{ pointer-events:auto; }
  .ns-app .bottombar-pills .pill-tabs{
    flex:1; min-width:0;
    padding:8px 12px;
    display:flex; align-items:center; justify-content:space-around; gap:4px;
  }
  .ns-app .bottombar-pills .pill-tabs .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    color: var(--ink-soft); cursor:pointer; padding:2px 0;
  }
  .ns-app .bottombar-pills .pill-tabs .tab svg{
    width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .ns-app .bottombar-pills .pill-tabs .tab span{
    font:500 10px/1 var(--sans);
  }
  .ns-app .bottombar-pills .pill-tabs .tab.on{ color: var(--accent); }
  .ns-app .bottombar-pills .pill-tabs .tab .wrap{ position:relative; }
  .ns-app .bottombar-pills .pill-tabs .tab .dot{
    position:absolute; top:-3px; right:-7px;
    background: var(--accent); color:#fff;
    font:700 9px/1 var(--sans);
    min-width:15px; height:15px; padding:0 4px; border-radius:999px;
    display:grid; place-items:center;
    border:2px solid color-mix(in srgb, var(--paper-card) 75%, transparent);
  }
  .ns-app .bottombar-pills .pill-search{
    width:44px; height:44px; border-radius:999px;
    display:grid; place-items:center;
    color: var(--ink); cursor:pointer; flex:none;
    padding:0;
  }
  .ns-app .bottombar-pills .pill-search svg{
    width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }

  /* ---------- INNER channel header pill — fixed to viewport, safe-area aware ---------- */
  .ns-app .channelbar-pill{
    /* Sprint #316 — Channel pill 4px нижче Dynamic Island (edge-to-edge активний) */
    position:fixed; top:calc(env(safe-area-inset-top, 0px) + 4px);
    left:50%; transform:translateX(-50%);
    width:calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-width:456px;
    z-index:100;
    pointer-events:none;
  }
  .ns-app .channelbar-pill .float-pill{
    pointer-events:auto;
    padding:6px 14px 6px 6px;
    display:flex; align-items:center; gap:10px;
    min-height:48px;
  }
  .ns-app .channelbar-pill .ic-back{
    width:36px; height:36px; border-radius:999px;
    display:grid; place-items:center; cursor:pointer;
    color: var(--ink); background:transparent; flex:none;
  }
  .ns-app .channelbar-pill .ic-back svg{
    width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .ns-app .channelbar-pill .av.sm{
    width:34px; height:34px; border-radius:999px;
    display:grid; place-items:center; color:#fff;
    font:700 13px/1 var(--sans); flex:none;
  }
  .ns-app .channelbar-pill .ch-info{
    flex:1; min-width:0; cursor:pointer;
    display:flex; flex-direction:column; gap:1px;
  }
  .ns-app .channelbar-pill .ch-info b{
    font:600 14.5px/1.15 var(--sans); color: var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:block;
  }
  .ns-app .channelbar-pill .ch-info span{
    font:12px/1.2 var(--sans); color: var(--ink-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* ---------- Content padding when pills are present ----------
     Sprint #313 — REVERT content padding (+72px назад). Pills піднято
     ВГОРУ через зміну top:calc(safe-area + 12) → top:8px (~80px up). */
  .ns-app .scr.with-top-pills,
  .ns-app .scr.with-channel-pill{
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
  }
  .ns-app .scr.with-bottom-pills{
    /* Sprint #475 · solid bnav ~49px замість floating pill ~74px */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 55px);
  }
  /* Sprint #307 — Fade ефект: контент під pills плавно затьмарюється до 50%.
     Mask gradient створює смугу 40pt вгорі і внизу де opacity спадає. */
  .ns-app .scr{
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .ns-app .scr.with-top-pills,
  .ns-app .scr.with-channel-pill{
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.5) calc(env(safe-area-inset-top, 0px) + 50px),
      rgba(0,0,0,1)   calc(env(safe-area-inset-top, 0px) + 90px),
      rgba(0,0,0,1)   100%);
    mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.5) calc(env(safe-area-inset-top, 0px) + 50px),
      rgba(0,0,0,1)   calc(env(safe-area-inset-top, 0px) + 90px),
      rgba(0,0,0,1)   100%);
  }
  .ns-app .scr.with-bottom-pills{
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1)   0,
      rgba(0,0,0,1)   calc(100% - env(safe-area-inset-bottom, 0px) - 90px),
      rgba(0,0,0,0.5) calc(100% - env(safe-area-inset-bottom, 0px) - 50px),
      rgba(0,0,0,0.5) 100%);
    mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1)   0,
      rgba(0,0,0,1)   calc(100% - env(safe-area-inset-bottom, 0px) - 90px),
      rgba(0,0,0,0.5) calc(100% - env(safe-area-inset-bottom, 0px) - 50px),
      rgba(0,0,0,0.5) 100%);
  }
  /* Combined: top + bottom — обидві smug-and затьмарюються */
  .ns-app .scr.with-top-pills.with-bottom-pills,
  .ns-app .scr.with-channel-pill.with-bottom-pills{
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.5) calc(env(safe-area-inset-top, 0px) + 50px),
      rgba(0,0,0,1)   calc(env(safe-area-inset-top, 0px) + 90px),
      rgba(0,0,0,1)   calc(100% - env(safe-area-inset-bottom, 0px) - 90px),
      rgba(0,0,0,0.5) calc(100% - env(safe-area-inset-bottom, 0px) - 50px),
      rgba(0,0,0,0.5) 100%);
    mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.5) calc(env(safe-area-inset-top, 0px) + 50px),
      rgba(0,0,0,1)   calc(env(safe-area-inset-top, 0px) + 90px),
      rgba(0,0,0,1)   calc(100% - env(safe-area-inset-bottom, 0px) - 90px),
      rgba(0,0,0,0.5) calc(100% - env(safe-area-inset-bottom, 0px) - 50px),
      rgba(0,0,0,0.5) 100%);
  }

  /* ---------- Laptop guard (>=1025px) ---------- */
  /* Inside laptop 4-pane the legacy mobile screens are display:none,
     so .topbar-pills / .bottombar-pills never render. But if any
     pill markup were ever inserted into a .pane, hide it defensively. */
  @media (min-width:1025px){
    .lapp .topbar-pills,
    .lapp .bottombar-pills,
    .lapp .channelbar-pill{ display:none !important; }
  }

/* Sprint #519 · кнопка «Показати ще 20» у chat-list */
.ns-load-more-btn {
  display: block;
  /* 19.07: нижній запас = висота нижньої панелі + safe-area, щоб у кінці
     скролу кнопка завжди опинялася НАД панеллю, а не під нею */
  margin: 12px auto calc(env(safe-area-inset-bottom, 0px) + 64px);  /* 19.07: фінальний баланс — над панеллю, без зайвого повітря */
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line, #ECE7DD);
  border-radius: 20px;
  color: var(--accent, #0A8D9C);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  width: calc(100% - 24px);
  max-width: 360px;
}
.ns-load-more-btn:hover { background: var(--sunk, #F1EEE7); border-color: var(--accent, #0A8D9C); }
.ns-load-more-btn:active { background: var(--paper-sunk, #E1F5EE); }
@media (prefers-color-scheme: dark) {
  .ns-load-more-btn { border-color: #1f2426; color: #6fc7d2; }
  .ns-load-more-btn:hover { background: #16292c; }
}


/* Sprint #521 · топік-chip у рядках chat-list (L1 keyword matching) */
.topic-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  margin: 0 6px 0 4px;
  vertical-align: middle;
  letter-spacing: 0.2px;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crow.has-topic .nm { color: var(--text, #1A1A1A); }
@media (prefers-color-scheme: dark) {
  .topic-chip { color: #fff; }
}

/* ── 19.07 · Рядок новини за затвердженим макетом ─────────────────────
   Лого (оригінальний логотип джерела) + контекст одразу (2 рядки) +
   технологічна строчка: #тема · ▤ матеріали · ⌾ коментарі · 🕐 час. */
.crow .ntx{ font: 400 15px/1.4 var(--sans, -apple-system, sans-serif);
  color: var(--ink-900, #1A1A1A);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }  /* 19.07: 2 рядки — впорядкованіше */
.crow .ntech{ display: flex; align-items: center; gap: 12px; margin-top: 6px;
  font: 500 12px/1 var(--sans, -apple-system, sans-serif); color: var(--ink-400, #87857E); min-width: 0;
  padding-right: 6px; }  /* 21.07 · час публікації трохи далі від правого краю */
.crow .ntech .ntag{ color: var(--accent, #0A8D9C); font-weight: 600;
  white-space: nowrap; flex: none; }  /* 19.07: тег повністю, без обрізання */
.crow .ntech .nmet{ display: inline-flex; align-items: center; gap: 3px; flex: none; }
.crow .ntech .nmet b{ font: 600 11px/1 var(--mono, monospace); color: var(--ink-500, #5F5E5A); }
.crow .ntech svg{ width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.crow .ntech .ntags{ display: inline-flex; align-items: center; gap: 8px;
  margin-right: auto; min-width: 0; }  /* 19.07: тег зліва повністю, решта — праворуч */
/* порожні async-слоти метрик не займають місця — самотній лічильник впритул до часу */
.crow .ntech .nmet:empty{ display: none; }
.crow .ntech .nclk{ display: inline-flex; align-items: center; gap: 2px;
  font: 400 11px/1 var(--mono, monospace); white-space: nowrap; flex: none; }  /* 19.07: щільніше, 42m/2h */
/* 19.07 · загальні хештеги — сірі (~70%), тонші за персональний акцентний */
.crow .ntech .ngen{ color: rgba(95,94,90,.75); font-weight: 500;
  white-space: nowrap; flex: none; }  /* 19.07: тег повністю, без обрізання */
/* 20.07 · актуальні теми (поза списком юзера) — 40% сірого, третій рівень */
.crow .ntech .ntre{ color: rgba(95,94,90,.45); font-weight: 500;
  white-space: nowrap; flex: none; }
/* 20.07 · ім'я бота-персони — ПРІОРИТЕТ нижньої строчки: іде першим,
   отримує стільки місця, скільки треба; хеш-тег гарантовано вміщається
   (flex:none), а ім'я обрізається трикрапкою лише коли справді тісно */
.crow .ntech .nbot{ color: rgba(95,94,90,.7); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0; }
.crow .ntech .ntag, .crow .ntech .ngen, .crow .ntech .ntre{ flex: none; }