/**
 * File:          public/css/chat2_header.css
 * Version:       0.1.0
 * Last Modified: 2026-11-01 08:04 PM EST
 * Changes:       New. Chat 2.0 step 3: header = rail button slot (step 2) · title button (avatar 23 px, name 16.5/600 ⌄,
 *                subline 11.5 "<dot> <type>") · floating pill [Search | ⋯] (40 px, var(--c2-float), soft shadow).
 *                The ⋯ menu (menu.css look: rows 42 px / 15.5 px, 19 px outline icons, no borders) is a bottom sheet on
 *                phones and a popover on desktop. Replaces top_bar.css. Values from the UI 2.0 redesign header.css / menu.css.
 */
/* The old hidden click targets stay hidden (the ⋯ menu clicks them). */
html body #header #help-showme-btn, html body #header #help-guide-btn { display: none !important; }

html body #header {
  position: sticky; top: 0; flex: 0 0 auto; box-sizing: border-box; display: flex; align-items: center; flex-wrap: nowrap;
  height: 60px !important; min-height: 60px !important; padding: 8px 16px !important; gap: 8px !important;
  background: var(--c2-bg) !important; border-bottom: 0 !important; overflow: visible !important; z-index: 60;
}
@media (max-width: 768px) { html body #header { padding: 8px 12px !important; gap: 6px !important; } }

/* Title button: avatar · name ⌄ · status subline. Keeps the same size when the keyboard opens (fixed header height). */
html body #header #header-title { display: flex !important; flex: 1 1 auto; min-width: 0; overflow: visible; font-size: inherit; }
#c2-title-btn { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 560px; height: 46px; padding: 0 10px 0 6px; margin: 0;
  border: 0; border-radius: 23px; background: transparent; color: var(--c2-text); font: inherit; text-align: left; cursor: pointer; }
#c2-title-btn:hover, #c2-title-btn[aria-expanded="true"] { background: var(--c2-surface-2); }
#c2-title-btn:focus-visible { outline: 2px solid var(--c2-accent); outline-offset: 1px; }
.c2-title-avatar { display: grid; place-items: center; flex: none; width: 23px; height: 23px; }
.c2-title-avatar[hidden] { display: none; }
.c2-title-avatar-img { display: grid; place-items: center; width: 23px !important; height: 23px !important; border-radius: 50%; overflow: hidden; font-size: 10px; font-weight: 650;
  background: var(--c2-surface-3); color: var(--c2-text); }
.c2-title-avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.c2-title-avatar-img.mw-avatar-model-logo img { object-fit: contain; }
.c2-icon-avatar { border-radius: 7px; background: var(--c2-surface-2); color: var(--c2-text-2); }
.c2-icon-avatar svg { width: 62%; height: 62%; }
.c2-title-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.c2-title-name { display: flex; align-items: center; gap: 3px; min-width: 0; }
html body #header #header-session-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16.5px !important; font-weight: 600; letter-spacing: -.3px; color: var(--c2-text) !important; }
.c2-title-name > svg { flex: none; color: var(--c2-muted); }
.c2-title-sub { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--c2-muted); white-space: nowrap; }
#c2-title-type { overflow: hidden; text-overflow: ellipsis; }
#c2-title-type:empty { display: none; }
#c2-title-offline[hidden] { display: none; }

/* The pill. */
.c2-pill { display: flex; align-items: center; flex: 0 0 auto; height: 40px; margin-left: auto; padding: 0 3px; box-sizing: border-box;
  border-radius: 20px; background: var(--c2-float); border: 1px solid var(--c2-float-line); box-shadow: var(--c2-float-shadow); }
.c2-pill > button { display: grid; place-items: center; width: 40px; height: 34px; padding: 0; border: 0; border-radius: 17px;
  background: transparent; color: var(--c2-text); cursor: pointer; }
.c2-pill > button + button { position: relative; margin-left: 3px; }
.c2-pill > button + button::before { content: ''; position: absolute; left: -2px; top: 8px; width: 1px; height: 18px; background: var(--c2-line-2); }
.c2-pill > button:hover, .c2-pill > button[aria-expanded="true"], .c2-pill > button:active { background: var(--c2-surface-3); }
.c2-pill > button:focus-visible { outline: 2px solid var(--c2-accent); outline-offset: -2px; }
body.c2-searching #c2-search-btn { color: var(--c2-accent); }

/* Shared scrim + bottom-sheet grab handle (menu + title sheet). */
.c2-scrim { position: fixed; inset: 0; z-index: 10050; background: rgba(0, 0, 0, .5); }
.c2-grab { width: 38px; height: 5px; flex: none; border-radius: 3px; background: var(--c2-line-2); margin: 0 auto 10px; }

/* ⋯ menu. */
.c2-menu { position: fixed; z-index: 10060; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px 0; overflow-y: auto;
  background: var(--c2-sheet); color: var(--c2-text); font-family: var(--c2-font); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
.c2-menu.is-popover { width: 280px; max-height: calc(100dvh - 90px); border: 1px solid var(--c2-line-2); border-radius: 20px; }
.c2-menu.is-phone { left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 60px); padding: 10px 0 calc(16px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0; border-top: 1px solid var(--c2-line-2); }
.c2-menu hr { margin: 5px 0; border: 0; border-top: 1px solid var(--c2-line); }
.c2-menu-row { display: flex; align-items: center; gap: 13px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 0; background: transparent;
  color: var(--c2-text); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; }
.c2-menu.is-phone .c2-menu-row { min-height: 48px; }
.c2-menu-row:hover, .c2-menu-row:focus-visible { background: var(--c2-surface-2); outline: none; }
.c2-menu-row > svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--c2-text-2); }
.c2-menu-label { flex: 1 1 auto; min-width: 0; }
.c2-menu-value { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c2-muted); font-size: 13px; }
.c2-menu-badge { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--c2-accent); color: var(--c2-accent-ink);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.c2-menu-row.is-danger, .c2-menu-row.is-danger > svg { color: var(--c2-failed); }
.c2-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--c2-surface-3); transition: background .15s; }
.c2-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--c2-text); transition: transform .15s; }
.c2-menu-row[aria-checked="true"] .c2-switch { background: var(--c2-accent); }
.c2-menu-row[aria-checked="true"] .c2-switch::before { transform: translateX(16px); background: var(--c2-accent-ink); }
/* === END OF FILE (FILENAME: public/css/chat2_header.css) === */