/* suggest.js: the strip above the composer, in the reading column, and the
 * header's Inbox icon. The priority actions (in the open Inbox, and a chat's
 * own pill) are bolder pills; the home's offers stay quiet. Pills wrap: on a phone each priority action is a 44px
 * row of its own, readable without glasses (Hamet, 2026-10-23 and
 * 2026-10-25); on a desktop a 32px pill, no taller than it must be. The Inbox
 * row, when open, scrolls sideways. Not a card: the chat stays the chat.
 * Pills are fills, never outlines (Rey, 2026-10-28). */

.suggest {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-1);
  width: min(100% - 2 * var(--sv-space-5), var(--reading));
  margin: var(--sv-space-1) 0 0;
  animation: sv-enter-pop var(--sv-dur-fast) var(--sv-ease-out) both;
}
.suggest[hidden] { display: none; }
.suggest-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  max-width: min(26rem, 100%);
  border: 0;
  border-radius: 999px;
  background: var(--sv-fill-1);
  transition: background-color var(--sv-dur-instant) var(--sv-ease-out), color var(--sv-dur-instant) var(--sv-ease-out);
  color: var(--sv-ink-secondary);
  font-size: var(--ui-meta);
}
.suggest-pill:hover { background: var(--sv-fill-3); color: var(--sv-ink); }
.suggest-go, .suggest-x { display: inline-flex; align-items: center; min-height: 28px; background: transparent; border: 0; color: inherit; font-weight: 400; }
.suggest-go { gap: var(--sv-space-1); min-width: 0; padding: 0 var(--sv-space-1) 0 var(--sv-space-3); font-size: inherit; }
.suggest-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-x { flex: none; padding: 0 var(--sv-space-2) 0 var(--sv-space-1); color: var(--sv-ink-tertiary); }
.suggest-x:hover { color: var(--sv-ink); }
.suggest .icon { flex: none; }
.suggest-x .icon { width: 12px; height: 12px; }

/* The priority actions: the ink, not the gray; heavier and larger. */
.suggest-top { color: var(--sv-ink); background: var(--sv-fill-2); font-size: var(--ui-text); }
.suggest-top .suggest-go { font-weight: 600; min-height: 32px; }

.suggest-count { font-variant-numeric: tabular-nums; font-weight: 600; }
/* The Inbox row the header's icon opens: it scrolls sideways. */
.suggest-inbox { flex: 1 0 100%; display: flex; gap: var(--sv-space-1); overflow-x: auto; scrollbar-width: none; }

/* The header's Inbox: a ghost icon like Details, its count on a small
 * neutral badge at the glyph's corner (green is the call button's alone). */
.topbar .inbox-toggle { position: relative; }
.topbar .inbox-toggle[hidden] { display: none; }
.topbar .inbox-toggle[aria-expanded="true"] { background: var(--ws-selected); color: var(--sv-ink); }
.inbox-count {
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% + 3px);
  min-width: 16px;
  height: 16px;
  padding: 0 var(--sv-space-1);
  border-radius: 999px;
  background: var(--sv-ink-secondary);
  box-shadow: 0 0 0 2px var(--sv-surface);
  color: var(--sv-surface);
  font: 600 var(--ui-meta) / 16px var(--sv-font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 760px) {
  /* Beside the phone's 22px glyph, on its 44px target. */
  .inbox-count { top: calc(50% - 19px); left: calc(50% + 4px); min-width: 20px; height: 20px; line-height: 20px; }
  .suggest { width: calc(100% - 2 * var(--sv-space-3)); }
  .suggest-go, .suggest-x { min-height: 44px; }
  .suggest-x { min-width: 44px; justify-content: center; padding: 0; }
  /* A priority action is a row of its own, at reading size. */
  .suggest-top { flex: 1 0 100%; max-width: 100%; font-size: 1.0625rem; }
  .suggest-top .suggest-go { flex: 1; min-height: 44px; }
}

/* On a call: one small count stands for the strip until it is tapped. */
.suggest-fold { gap: var(--sv-space-1); min-height: 30px; padding: 0 var(--sv-space-3); color: var(--sv-ink); }
.suggest-fold[aria-expanded="true"] { background: var(--sv-fill-3); }
.suggest-fold .icon { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .suggest-fold { min-height: 44px; min-width: 44px; }
}