/* topbar.css — icon buttons, page title, search, language picker, bell, user.
 *
 * A toolbar, in the platform sense: it sits over the content rather than above
 * it, so it is translucent and blurred and the page slides underneath. Its
 * controls carry no frame of their own — a glyph button is a hover fill and
 * nothing else, which is what keeps a row of six of them from looking like a
 * row of six boxes. */
.topbar{height:60px;flex:0 0 auto;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-line);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:20}

.icon-btn{width:34px;height:34px;flex:0 0 auto;border:0;background:transparent;border-radius:var(--r-md);cursor:pointer;color:var(--ink-3);display:flex;align-items:center;justify-content:center;position:relative}
.icon-btn.sm{width:32px;height:32px;border-radius:var(--r-sm)}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.icon-btn:active{transform:scale(.9)}

.page-title{font-size:15.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-sub{font-size:12px;color:var(--ink-4);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}

/* A capsule, like every search field the platform draws. It has no border at
   rest — the recessed fill is the affordance — and grows one only when it is
   focused and has become somewhere text is going. */
.search{display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--r-pill);padding:0 14px;height:34px;background:var(--hover);width:230px;max-width:32vw}
.search input{border:0;background:transparent;outline:none;width:100%;font-size:13px}
.search:focus-within{border-color:var(--accent);background:var(--raised);box-shadow:var(--focus-ring-strong)}

#lang{display:flex;align-items:center}
.dot{position:absolute;top:4px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--surface);animation:bellPulse 2600ms ease-in-out infinite}
.bell svg{transform-origin:50% 20%}
.bell.unread svg{animation:bellNudge 5200ms ease-in-out infinite}

/* The user block is a button, so its hover fill needs corners of its own on
   every side. The divider is drawn into the topbar's gap by ::before rather
   than carried as a border-left: a border sits inside the button, which put
   the fill's square left edge hard against the line and cut the corner off. */
.me{position:relative;display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border:0;border-radius:var(--r-pill);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.me::before{content:"";position:absolute;left:-6px;top:50%;margin-top:-11px;width:1px;height:22px;background:var(--line-mid)}
.me:hover{background:var(--hover)}
.me:active{transform:scale(.97)}
.me .who{line-height:1.25;min-width:0}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:0;flex:0 0 auto}
.avatar.grey{background:var(--line-mid);color:var(--ink-3)}
.avatar.sm{width:28px;height:28px;font-size:11px}
.me .n{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.me .t{font-size:11.5px;color:var(--muted);white-space:nowrap}