/* LittleLives APP — App Header Bars. Source: Figma Super App Uniform, node 2135:2136.
   52px top bar: leading icon + title/center + right actions. 11 types composed from shared atoms.
   Tokens → semantics.app.json + typography.app.json. */

:root {
  --ll-content-neutral-primary: #333333;
  --ll-content-neutral-secondary: #545454;
  --ll-content-neutral-tertiary: #8B8B8B;
  --ll-content-brand: #0076A8;
  --ll-content-white: #FFFFFF;
  --ll-surface-white: #FFFFFF;
  --ll-surface-brand-soft: #E6F8FD;
  --ll-surface-brand-strong: #0076A8;
  --ll-surface-neutral-soft-primary: #F5F5F5;
  --ll-strawberry-700: #A92D3D;
  --ll-font-body: 'Nunito Sans', system-ui, sans-serif;
}

/* ===== bar ===== */
.ll-appbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  min-height: 52px;   /* lock 52px even inside a shrinking flex/grid parent */
  flex: 0 0 auto;     /* never shrink/grow as a flex item (e.g. app-shell column) */
  padding: 0 16px;
  width: 100%;
  background: var(--ll-surface-white);
  font-family: var(--ll-font-body);
  color: var(--ll-content-neutral-primary);
}

/* leading / right icon buttons (24px) */
.ll-appbar__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; background: transparent; padding: 0; margin: 0;
  color: var(--ll-content-neutral-primary); cursor: pointer; position: relative;
}
.ll-appbar__icon svg { display: block; width: 24px; height: 24px; }
.ll-appbar__right { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; }

/* unread dot + count badge (bell / chat) */
.ll-appbar__dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ll-strawberry-700); }
.ll-appbar__badge {
  position: absolute; top: -2px; left: 14px; min-width: 18px; height: 18px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
  background: var(--ll-strawberry-700); color: var(--ll-content-white);
  border-radius: 9999px; font-size: 12px; font-weight: 700; line-height: 1.5;
}

/* ===== title / center ===== */
.ll-appbar__title-area { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; }
.ll-appbar__title { font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--ll-content-neutral-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* MA B2 16/Bold */
.ll-appbar__title--lg { font-size: 18px; }                                  /* Main Module (condensed) */
.ll-appbar__title--placeholder { font-weight: 400; color: var(--ll-content-neutral-tertiary); }  /* Properties Input "Field Name" */
.ll-appbar__spacer { flex: 1 1 0; min-width: 0; }

/* ===== chat entity ===== */
.ll-appbar__chat { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ll-appbar__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9999px; border: 0.5px solid rgba(0,0,0,0.06); background: #E6E6E6 50% / cover no-repeat; overflow: hidden; }
.ll-appbar__chat-text { min-width: 0; display: flex; flex-direction: column; }
.ll-appbar__name { font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--ll-content-neutral-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-appbar__sub  { font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--ll-content-neutral-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== search field ===== */
/* search type links the canonical Search Bar component into this slot */
.ll-appbar__search-slot { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.ll-appbar__search {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: 9999px;
  background: var(--ll-surface-neutral-soft-primary);
}
.ll-appbar__search svg { flex: 0 0 auto; display: block; width: 24px; height: 24px; color: var(--ll-content-neutral-secondary); }
.ll-appbar__search input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--ll-content-neutral-primary); }
.ll-appbar__search input::placeholder { color: var(--ll-content-neutral-secondary); opacity: 1; }

/* ===== header buttons (h32 pill) ===== */
.ll-appbar__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 8px; border: 0; border-radius: 9999px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1.4; background: transparent;
}
.ll-appbar__btn svg { display: block; width: 24px; height: 24px; }
.ll-appbar__btn--tonal  { background: var(--ll-surface-brand-soft); color: var(--ll-content-brand); border: 1px solid rgba(0,0,0,0.02); }
.ll-appbar__btn--filled { background: var(--ll-surface-brand-strong); color: var(--ll-content-white); padding: 0 14px; }
.ll-appbar__btn--text   { color: var(--ll-content-neutral-secondary); }
.ll-appbar__btn--brand  { color: var(--ll-content-brand); }