:root {
  /* Palette: "Midnight". Every color in the app comes from here. */
  --bg: #000000;              /* page behind everything */
  --sidebar: #0b0b0c;
  --card: #1c1c1e;            /* agent cards, dialogs, composer */
  --surface-2: #2c2c2e;       /* people's bubbles, inputs, chips */
  --surface-3: #3a3a3c;       /* your bubbles, highlights */
  --hover: #2c2c2e;
  --border: #2c2c2e;
  --border-strong: #48484a;
  --field-border: #5a5a5e;    /* text fields: 3:1 against cards */
  --text: #f2f2f7;
  --muted: #a1a1a8;
  --accent: #636366;          /* neutral gray: scroll chevron, primary buttons */
  --accent-hover: #7c7c80;
  --accent-soft: #2c2c2e;
  --accent-text: #f0b07a;     /* links and accent text on dark */
  --on-accent: #ffffff;
  --mine: var(--surface-3);
  --live: #4cd27a;            /* "typing…" */
  --success: #4cd27a;
  --success-bg: #12301d;
  --success-border: #1f5a34;
  --warning-text: #f5b562;
  --warning-line: #48484a;
  --warning-bg: #1c1c1e;
  --danger: #ff6b5e;
  --danger-text: #ffb4ab;
  --danger-bg: #3a1714;
  --danger-border: #6e2a24;
  --overlay: rgb(0 0 0 / 0.55);
  --backdrop: rgb(0 0 0 / 0.65);
  --shadow: rgb(0 0 0 / 0.6);
  --avatar-you: #5a5a60;      /* agents' avatar colors come from their config */
  --avatar-fallback: #5a5a60;
  --radius: 22px;
  --content-w: 760px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon.dots { stroke-width: 3.2; }

.boot { display: grid; place-items: center; height: 100dvh; color: var(--muted); }

/* --- Signed in: conversation list beside the open conversation --- */
.shell {
  position: relative;
  display: flex;
  height: 100dvh;
  background: var(--bg);
}
.sidebar {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 300px;
  min-height: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 64px;
  padding: 14px 14px 10px 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo { flex: none; height: 30px; max-width: 120px; object-fit: contain; }
.brand-edit {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.drawer-close { display: none; }
.brand-edit:hover { background: var(--surface-2); color: var(--text); }
.new-conv {
  margin: 6px 14px 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.new-conv:hover { background: var(--surface-2); }
.sidebar-actions { display: flex; gap: 8px; margin: 6px 14px 8px; }
.sidebar-actions .new-conv { flex: 1; margin: 0; }
.sidebar-actions .agents-btn { flex: 1 1 0; }
.sidebar-actions .new-conv { flex: 1 1 0; min-width: 0; white-space: nowrap; } /* (eqbtn-1026) Agents and + New conversation 50/50 */
.new-conv:disabled { opacity: 0.45; cursor: default; }
.new-conv:disabled:hover { background: var(--card); }
.drawer-backdrop { display: none; }
.conv-list { flex: 1; overflow-y: auto; padding: 4px 10px; display: flex; flex-direction: column; gap: 4px; }
.conv-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
}
.conv-item:hover { background: var(--card); }
.conv-item.active { background: var(--surface-2); }
.conv-top { display: flex; align-items: baseline; gap: 8px; }
.conv-title { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { flex: none; font-size: 12px; color: var(--muted); }
.conv-preview { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-empty { display: flex; flex-direction: column; gap: 4px; margin: 16px 10px; color: var(--muted); font-size: 14px; }
.conv-empty strong { color: var(--text); }
.sidebar-settings {
  margin: 8px 14px 14px;
  padding: 11px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.sidebar-settings:hover { background: var(--surface-2); }

.me {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 18px;
  background: var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.me:hover { background: var(--surface-3); }
.me-name { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-tag, .chip-owner, .chip-off {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.signout { color: var(--danger-text); }

.app {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.empty-pane { display: grid; place-items: center; }

/* --- Top bar: menu, the agent's face, more --- */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 8px;
}
.topbar-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: start;
  gap: 8px;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
}
.circle-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.circle-btn:hover, .circle-btn[aria-expanded="true"] { background: var(--surface-2); }
.hero {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0 4px;
}
.hero-avatar { display: grid; place-items: center; min-height: 72px; }
.hero-name {
  position: relative;
  max-width: 100%;
  margin-top: -12px;
  padding: 3px 12px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-name:empty { display: none; }

.participants { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px; }
.participants:empty { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13px;
  transition: box-shadow 0.2s, background 0.2s;
}
.chip.speaking { box-shadow: inset 0 0 0 2px var(--agent-color); background: color-mix(in srgb, var(--agent-color) 18%, var(--card)); }
.chip.speaking .avatar { animation: pulse 1.4s infinite ease-in-out; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.chip-name { font-weight: 600; }

.avatar {
  position: relative;
  overflow: hidden;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  user-select: none;
}
.avatar.sm { width: 24px; height: 24px; font-size: 12px; }
.avatar.lg { width: 60px; height: 60px; font-size: 24px; }
.avatar.xl { width: 72px; height: 72px; font-size: 30px; }
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--card);
}

.chip-avatar {
  position: relative;
  display: inline-grid;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.chip-avatar::after {
  content: "✎";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--overlay);
  color: var(--on-accent);
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s;
}
.chip-avatar:hover::after, .chip-avatar:focus-visible::after { opacity: 1; }

/* Grok Bot avatar shapes; circle is the default. */
.shape-squircle { border-radius: 32%; }
.shape-blob { border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; }
.shape-pebble { border-radius: 55% 45% 50% 50% / 62% 62% 38% 38%; }
.shape-cloud { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; }
.shape-teardrop { border-radius: 50% 0 50% 50%; }

.chip-remove {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.chip-remove:hover { background: var(--surface-2); color: var(--text); }
.chip-connect {
  padding: 1px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.chip-connect:hover { background: var(--accent); color: var(--on-accent); }
.chip-connect.on { color: var(--success); background: var(--success-bg); }

/* --- Thread --- */
.thread-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.thread {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
}
.thread > * { width: 100%; max-width: var(--content-w); margin-inline: auto; }
.thread > .note, .thread > .state { width: auto; }

.state {
  margin: auto;
  max-width: 420px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.state strong { color: var(--text); font-weight: 650; font-size: 17px; }
.state.load-error strong { color: var(--danger); }
.state .look-btn, .state .retry { margin-top: 8px; }

.msg { display: flex; flex-direction: column; gap: 8px; }
.msg-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; font-size: 13px; }
.speaker { font-weight: 650; }
.time { color: var(--muted); font-size: 12px; }

.bubble {
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* Agents: wide dark cards with rich text. */
.msg.agent .bubble {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--card);
}
/* Other people: rounded bubbles. */
.msg.person { align-items: flex-start; }
.msg.person .bubble {
  max-width: 85%;
  padding: 10px 16px;
  border-radius: 22px;
  border-top-left-radius: 8px;
  background: var(--surface-2);
}
/* You: lighter bubble on the right. */
.msg.mine { align-items: flex-end; }
.msg.mine .bubble {
  max-width: 85%;
  padding: 10px 16px;
  border-radius: 22px;
  border-bottom-right-radius: 8px;
  background: var(--mine);
}
.msg.mine .meta { padding-right: 6px; }
.msg.error .bubble { background: var(--danger-bg); color: var(--danger-text); white-space: pre-wrap; }
.mine-meta { display: flex; justify-content: flex-end; }

/* Photos: a rounded thumbnail in the card or bubble; tap to open. */
.msg-photo { display: block; width: fit-content; max-width: 100%; border-radius: 16px; overflow: hidden; }
.msg-photo img { display: block; max-width: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; }
.msg-photo + .rich { margin-top: 10px; }
.msg-photo-fallback { display: block; padding: 12px 14px; border-radius: 14px; background: var(--surface-3); color: var(--text); }
.bubble:has(> .msg-photo:only-child) { padding: 6px; }

/* Rich text inside messages */
.rich > * { margin: 0; }
.rich > * + * { margin-top: 10px; }
.rich p { white-space: normal; }
.rich ul, .rich ol { padding-left: 1.3em; }
.rich li + li { margin-top: 4px; }
.rich li::marker { color: var(--muted); }
.rich strong { font-weight: 700; }
.rich a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.rich-h { font-weight: 700; font-size: 17px; }
.rich-h1 { font-size: 20px; }
.rich-code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-3);
  font: 0.88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.rich-pre {
  padding: 12px 14px;
  border-radius: 14px;
  background: #0e0e10;
  overflow-x: auto;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}
.rich blockquote { padding-left: 12px; border-left: 3px solid var(--surface-3); color: var(--muted); }
.rich hr { border: 0; border-top: 1px solid var(--surface-3); }

/* Link preview cards: cover on top, then a title row. */
.link-cards { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 560px; }
.msg.mine .link-cards, .msg.person .link-cards { max-width: 420px; }
.link-card { display: block; border-radius: var(--radius); background: var(--card); color: inherit; text-decoration: none; overflow: hidden; }
.link-cover {
  display: block;
  height: 150px;
  background:
    radial-gradient(120% 90% at 85% 10%, hsl(var(--hue) 70% 55% / 0.85), transparent 60%),
    linear-gradient(135deg, hsl(calc(var(--hue) + 40) 45% 22%), hsl(var(--hue) 35% 12%));
}
.link-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; }
.link-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: hsl(var(--hue) 40% 30%);
  color: #fff;
  font-weight: 700;
}
.link-title { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row .icon { flex: none; color: var(--muted); }
.link-card:hover .link-title { text-decoration: underline; }

.synced-tag, .manual-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
}

.note {
  align-self: center;
  max-width: 85%;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.status-word { font-size: 12px; color: var(--muted); }
.status-word::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
  background: currentColor;
}
.status-typing { color: var(--live); }
.status-error { color: var(--danger); }

.retry {
  align-self: flex-start;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.retry:hover { background: var(--danger-border); }
.retry:disabled { opacity: 0.5; cursor: default; }
.state .retry { align-self: center; }

.typing {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  padding: 6px 4px;
  color: var(--muted);
  font-size: 15px;
}
.thread > .typing { width: fit-content; margin-left: max(0px, calc((100% - var(--content-w)) / 2)); }
.typing-faces { display: flex; }
.typing.no-reply { opacity: .7; } /* (wakestatus-1031) */
.typing-faces .avatar + .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg, #111); }
.typing-text {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, #d0d0d0 50%, var(--muted) 60%, var(--muted) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: working-shimmer 2.2s linear infinite;
}
@keyframes working-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* Floating "jump to latest" chevron */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 22px var(--shadow);
  transform: translateX(-50%);
  cursor: pointer;
  animation: rise 0.18s ease-out;
}
.scroll-down:hover { background: var(--accent-hover); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* --- Composer pill --- */
.composer { padding: 6px 16px 14px; }
.composer-pill {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  max-width: var(--content-w);
  min-height: 54px;
  margin: 0 auto;
  padding: 5px 6px;
  border-radius: 28px;
  background: var(--card);
}
.composer-pill:focus-within { box-shadow: inset 0 0 0 1px var(--border-strong); }
.composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  padding: 10px 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 24px;
  min-height: 44px;
  max-height: 200px;
  overflow-y: hidden;
  outline: none;
}
.composer textarea::placeholder { color: var(--muted); opacity: 1; }
.composer-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.composer-icon:hover { background: var(--surface-2); }
#mic-btn.recording { color: #fff; background: #d93025; animation: mic-pulse 1.2s ease-in-out infinite; }
#mic-btn.recording:hover { background: #c5221f; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(217, 48, 37, 0); } }
.voice-note { margin: 4px 14px 0; font-size: 13px; color: var(--muted); }

/* --- Bottom navigation --- */


@media (prefers-reduced-motion: reduce) {
  .typing-text { animation: none; background: none; color: var(--muted); }
  .scroll-down, .chip.speaking .avatar { animation: none; }
  #mic-btn.recording { animation: none; }
}

/* --- Dialogs --- */
.picker {
  width: min(520px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 48px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 0 24px 60px var(--shadow);
  color: var(--text);
}
.picker[open] { display: flex; flex-direction: column; }
.picker::backdrop { background: var(--backdrop); }
.picker.dlg-full { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border: 0; border-radius: 0; }
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 10px 22px;
}
.picker-head h2 { margin: 0; font-size: 19px; font-weight: 700; }
.picker-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.picker-close:hover { color: var(--text); background: var(--surface-3); }
.picker-body { padding: 4px 14px 18px; overflow-y: auto; }
.picker-section h3 {
  margin: 12px 8px 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.picker-row:hover:not(:disabled) { background: var(--surface-2); }
.picker-row:disabled { cursor: default; }
.picker-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.picker-name { font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.picker-desc { color: var(--muted); font-size: 14px; }
.picker-note { font-size: 13px; color: var(--warning-text); }
.picker-action {
  flex: none;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
}
.picker-row.added .picker-action { background: var(--success-bg); color: var(--success); }

.connect { width: min(600px, calc(100vw - 24px)); }
.connect-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 22px 22px; }
.connect-body p { margin: 0; }
.connect-intro { line-height: 1.55; }
.connect-status {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
}
.connect-status.on { background: var(--success-bg); color: var(--success); }
.connect-warn { font-size: 13px; color: var(--warning-text); }
.connect-muted { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.connect-key {
  align-self: flex-start;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.connect-key:hover { background: var(--accent-hover); }
.connect-key:disabled { opacity: 0.6; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 13px; font-weight: 600; }
.field-row { display: flex; gap: 8px; align-items: flex-start; }
.field-value {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0e0e10;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
  white-space: pre;
}
.field-value.secret { background: var(--warning-bg); border-color: var(--warning-line); }
.copy {
  flex: none;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.copy:hover { background: var(--surface-3); }

.look { width: min(520px, calc(100vw - 24px)); }
.look-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 22px 22px; }
.look-body p { margin: 0; }
.look-section { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 14px; border-bottom: 1px solid var(--border); }
.look-section:last-child { border-bottom: 0; }
.look-section h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.look-error {
  padding: 10px 14px;
  border: 1px solid var(--danger-border);
  border-radius: 14px;
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 14px;
}
.look-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.look-btn {
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.look-btn:hover { background: var(--surface-3); }
.look-btn.primary { background: var(--accent); color: var(--on-accent); }
.look-btn.primary:hover { background: var(--accent-hover); }
.look-btn:disabled { opacity: 0.6; cursor: default; }
.look-btn.signout { color: var(--danger-text); }
.look-link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-size: 13px;
  cursor: pointer;
}
.look-link:hover { text-decoration: underline; }
.logo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-preview {
  display: grid;
  place-items: center;
  width: 140px;
  height: 64px;
  padding: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  background: #0e0e10;
}
.logo-preview img { display: block; max-width: 124px; max-height: 48px; object-fit: contain; }
.name-form { display: flex; gap: 8px; }
.name-form input, .auth-form input:not([type=checkbox]), .create-form input, .invite-days {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--field-border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}
.name-form input::placeholder, .create-form input::placeholder, .auth-form input::placeholder { color: var(--muted); opacity: 1; }
.name-form input:focus, .auth-form input:focus, .create-form input:focus, .invite-days:focus {
  outline: 2px solid var(--accent-text);
  outline-offset: -1px;
}
.avatar-editor { display: flex; align-items: center; gap: 14px; }
.avatar-editor-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.avatar-editor-name { font-weight: 650; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Sign in, create account, invites --- */
.auth { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.auth-card {
  width: min(420px, 100%);
  padding: 28px 26px 24px;
  border-radius: 28px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth-card > div:last-child { display: flex; flex-direction: column; gap: 14px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.auth-title { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -0.01em; }
.auth-intro { margin: 0; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.form-label { margin-top: 6px; font-size: 14px; font-weight: 600; }
.form-hint { margin: 0; font-size: 13px; color: var(--muted); }
.show-pass { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; color: var(--muted); cursor: pointer; }
.show-pass input { accent-color: var(--accent); }
.auth-form .look-error { margin: 6px 0 0; }
.auth-submit, .auth-secondary {
  margin-top: 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
  cursor: pointer;
}
.auth-submit:hover { background: var(--accent-hover); }
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-secondary { margin-top: 0; background: var(--surface-2); color: var(--text); }
.auth-secondary:hover { background: var(--surface-3); }
.auth-switch { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.invite-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--accent-soft);
}
.invite-from { font-size: 13px; color: var(--accent-text); }
.invite-title { font-size: 17px; overflow-wrap: anywhere; }

/* --- People dialog --- */
.member { display: flex; align-items: center; gap: 12px; }
.member-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 650; }
.member-agents { font-size: 13px; color: var(--muted); }
.invite-row { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-days { min-width: 180px; padding: 9px 12px; }
.invite-list { display: flex; flex-direction: column; gap: 6px; }
.invite-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); }
.invite-meta { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }

/* --- Create your own agent (Add Agent dialog) --- */
.create-agent { padding: 0 8px; }
.create-agent h3 { margin-inline: 0; }
.create-hint, .picker-intro { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.picker-intro { margin: 12px 8px 4px; font-size: 14px; }
.create-form { display: flex; flex-direction: column; gap: 8px; }
.create-form .look-btn { align-self: flex-start; }
.create-agent .look-error { margin: 0 0 8px; }
.form-label + .name-form { margin-top: -2px; }

/* --- Phones: one screen at a time --- */
/* On a computer the list is always beside the conversation. */
@media (min-width: 721px) {
  #menu-btn { visibility: hidden; }
}

@media (max-width: 720px) {
  .shell { height: 100dvh; }
  .sidebar { width: 100%; border-right: 0; background: var(--bg); }
  .shell.has-conv .sidebar { display: none; }
  .shell.has-conv.drawer-open .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: 100vw;
    border-right: 0;
    background: var(--sidebar);
  }
  .shell.has-conv.drawer-open .drawer-close { display: block; }
  .shell.has-conv.drawer-open .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: var(--backdrop); }
  .shell:not(.has-conv) .app { display: none; }
  .app, .sidebar { padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding: 10px 14px 6px; gap: 8px; }
  .thread { padding: 10px 14px 20px; gap: 18px; }
  .msg.agent .bubble { padding: 15px 16px; }
  .composer { padding: 4px 12px 8px; }
  .composer textarea, .auth-form input, .name-form input, .create-form input { font-size: 16px; }
  .picker-row { padding: 10px 6px; }
  .picker {
    width: 100vw;
    max-width: 100vw;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: 28px 28px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 1019-delagent */
.look-btn.danger-btn { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); align-self: flex-start; }
.look-btn.danger-btn:hover { background: var(--danger-border); }

/* 1019-pickdel */
.picker-row-wrap { display: flex; align-items: center; gap: 6px; }
.picker-row-wrap .picker-row { flex: 1; min-width: 0; }
.picker-del { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--danger-border); background: var(--danger-bg); color: var(--danger-text); font: inherit; font-size: 14px; cursor: pointer; }
.picker-del:hover { background: var(--danger-border); }
.picker-del:disabled { opacity: .6; cursor: default; }

/* 1019-trash */
.trash-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.trash-btn:not(.armed) { padding: 6px 9px; }
.trash-btn svg { display: block; }

/* 1019-convtrash */
.conv-row { display: flex; align-items: center; gap: 4px; }
.conv-row .conv-item { flex: 1; min-width: 0; }
.conv-del { flex: none; border: 1px solid var(--danger-border); background: var(--danger-bg); color: var(--danger-text); border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; }
.conv-del:not(.armed) { padding: 5px 7px; background: transparent; border-color: transparent; color: var(--muted); }
.conv-del:not(.armed):hover { color: var(--danger-text); }
.conv-del.armed { padding: 5px 10px; }
.conv-del svg { width: 16px; height: 16px; }

/* 1019-swipe */
.conv-row { position: relative; overflow: hidden; border-radius: 14px; display: block; }
.conv-row .conv-item { position: relative; z-index: 1; display: flex; touch-action: pan-y; transition: transform .2s ease; background: var(--sidebar, var(--bg)); }
.conv-row .conv-item.active { background: var(--surface-2); }
.conv-swipe-del { position: absolute; top: 0; right: 0; bottom: 0; width: 84px; z-index: 0; border: 0; background: #d93025; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.conv-swipe-del:disabled { opacity: .6; }
.conv-row:not(.open) .conv-swipe-del { visibility: hidden; }
.conv-row.open .conv-swipe-del { visibility: visible; } /* (swipesmooth-1028) :has([style*=translateX]) removed: re-matched on every move */
a.sidebar-settings { display: block; text-align: center; text-decoration: none; } /* (1019-wakesettings) */
.push-note { margin: 8px 0 0; font-size: 13px; opacity: 0.7; line-height: 1.4; }

/* (1020-wake2) Auto-wake */
.wake-list { display: grid; gap: 6px; }
.wake-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wake-row .wake-name { flex: 1; font-weight: 600; }
.wake-row .wake-label, .wake-word { font-size: 0.85em; opacity: 0.8; }
.wake-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; flex: none; display: inline-block; }
.wake-dot.ok { background: #1e9e4a; } .wake-dot.never { background: #e0a100; } .wake-dot.failing { background: #d93025; }
.wake-row.sel { outline: 2px solid var(--accent, #3b6fe0); }
.wake-banner { display: block; width: calc(100% - 24px); margin: 6px 12px 0; padding: 8px 12px; border: 1px solid #e0a100; background: #fff8e1; color: #3a3a3c; border-radius: 10px; font: inherit; font-size: 0.9em; text-align: left; cursor: pointer; }
.wake-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.wake-paste { font: inherit; width: 100%; box-sizing: border-box; min-height: 84px; padding: 8px 10px; border: 1px solid var(--line, #ccc); border-radius: 8px; }
.wake-found { font-size: 0.9em; }
.wake-result { padding: 10px 12px; border-radius: 10px; background: #f1f3f4; }
.wake-result.good { background: #e6f4ea; color: #0d652d; } .wake-result.bad { background: #fce8e6; color: #a50e0e; }
.wake-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip-wake { border: none; background: none; padding: 0 4px; display: inline-flex; gap: 4px; align-items: center; font: inherit; font-size: 0.8em; cursor: pointer; color: inherit; }

/* (1020-presence) */
.wake-dot.p-wake, .wake-dot.p-resident { background: #1e9e4a; }
.wake-dot.p-none { background: #9aa0a6; }
.wake-dot.p-failing { background: #d93025; }
.wake-dot.p-saver { background: #f2a600; } /* (1020-budget) 省额模式 */

/* (1020-delconv) Desktop hover ⋯ menu on owned conversations: Delete only. */
.conv-row.menu-open { overflow: visible; z-index: 5; }
.conv-menu-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 3; display: none; border: none; background: var(--surface-2); border-radius: 6px; padding: 0 7px; font-size: 18px; line-height: 24px; cursor: pointer; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
@media (hover: hover) and (pointer: fine) {
  .conv-row:hover .conv-menu-btn, .conv-row.menu-open .conv-menu-btn, .conv-menu-btn:focus-visible { display: block; }
}
.conv-menu { display: none; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 4; background: var(--surface-2); border: 1px solid rgba(0,0,0,.12); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 4px; min-width: 110px; }
.conv-row.menu-open .conv-menu { display: block; }
.conv-menu-del { display: block; width: 100%; text-align: left; border: none; background: none; color: #d93025; font: inherit; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.conv-menu-del:hover { background: rgba(217,48,37,.1); }

/* (1021-react) message actions, reactions, reply, composer emoji */
.msg.has-actions { position: relative; }
.msg-actions { position: absolute; top: -14px; right: 8px; display: none; gap: 2px; padding: 3px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35); z-index: 5; }
.msg.mine .msg-actions { right: auto; left: 8px; }
@media (hover: hover) { .msg.has-actions:hover > .msg-actions { display: flex; } }
.msg.actions-open > .msg-actions, .msg-actions:focus-within { display: flex; }
.msg-act { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.msg-act:hover { background: var(--hover); color: var(--text); }
.react-pop { position: absolute; top: 36px; right: 0; display: flex; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.react-choice { border: 0; background: transparent; font-size: 20px; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; }
.react-choice:hover { background: var(--hover); }
.react-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.msg.mine .react-pills { justify-content: flex-end; }
.react-pill { border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 2px 9px; font-size: 13px; cursor: pointer; }
.react-pill.mine { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.reply-quote { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding: 6px 10px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.05); border-radius: 6px; font-size: 13px; cursor: pointer; max-width: 100%; }
.reply-quote-who { font-weight: 650; color: var(--accent-text); }
.reply-quote-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.flash .bubble { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.composer { position: relative; }
.reply-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 10px; background: var(--card); border-left: 3px solid var(--accent); border-radius: 8px; font-size: 13px; color: var(--muted); }
.reply-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar-who { color: var(--accent-text); font-weight: 650; }
.reply-bar-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.emoji-pop { position: absolute; bottom: calc(100% + 6px); right: 8px; width: min(320px, calc(100vw - 24px)); max-height: 240px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 20; }
.emoji-choice { border: 0; background: transparent; font-size: 22px; height: 36px; border-radius: 8px; cursor: pointer; }
.emoji-choice:hover { background: var(--hover); }
.mini-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 8px 14px; background: var(--surface-3); color: var(--text); border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100; }
.mini-toast.show { opacity: 1; }

/* (1021-owner) */
.owner-tag { flex: none; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 11px; opacity: .8; }

/* (1022-composer) pill restyle: dark fill, thin border, white line icons */
.composer-pill { background: #141414; border: 1px solid #373737; border-radius: 999px; gap: 0; padding: 4px 6px; min-height: 52px; align-items: center; }
.composer-pill:focus-within { box-shadow: none; border-color: #4a4a4a; }
.composer textarea { padding: 10px 4px; }
.composer textarea::placeholder { color: #8e8e93; }
.composer-icon { width: 40px; height: 40px; color: #fff; }
.composer-icon .icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; width: 22px; height: 22px; }
.composer-icon[hidden] { display: none; }
#send-btn { background: transparent; }

/* (1022-preview) rows must not shrink in the flex list: overflow:hidden made min-height 0 and clipped the preview line */
.conv-list > .conv-row, .conv-list > .conv-item { flex-shrink: 0; }

/* (1022-preview2) Softer preview line; unread rows get a brighter, bolder preview and name. */
.conv-item .conv-preview { font-size: 13px; color: color-mix(in srgb, var(--muted) 78%, var(--bg, #000)); }
.conv-item .conv-speaker { font-weight: 500; }
.conv-item.unread .conv-title { font-weight: 750; }
.conv-item.unread .conv-preview { color: var(--text); font-weight: 600; }
.conv-item.unread .conv-time { color: var(--text); }

/* (avatar-1022) Fallback gradient avatars; glow after speaking (~4s, then still). */
.avatar-letter { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.avatar.glow { overflow: visible; animation: avatar-breathe 2s ease-in-out 2; }
.avatar.glow .avatar-img { border-radius: 50%; }
@keyframes avatar-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 14px 4px rgba(150,170,255,.55); }
}
.reduce-motion-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .avatar.glow { animation: none; } }

/* (overlap-1022) Header never covers messages: solid, non-shrinking header with a divider; no fade over the first message. */
.topbar { flex: none; position: relative; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--border); }
.thread { mask-image: none; -webkit-mask-image: none; overscroll-behavior: contain; padding-top: 14px; }
.thread-wrap { position: relative; z-index: 1; overflow: hidden; }

/* (pwa-1022) Full-screen standalone: fill the screen, keep content clear of notch / home bar. */
html, body { height: 100%; min-height: 100dvh; }
.shell { height: 100dvh; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.topbar { padding-top: max(10px, env(safe-area-inset-top)); }
.sidebar { padding-top: env(safe-area-inset-top); }
.app, .sidebar { padding-bottom: env(safe-area-inset-bottom); }

/* (float-1022) Grok-style: list fills the screen; controls + composer float as frosted glass. */
:root { --float-top: 112px; --float-bottom: 84px; }
.app { position: relative; overflow: hidden; }
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  background: transparent; border-bottom: 0; pointer-events: none;
  padding-top: calc(max(10px, env(safe-area-inset-top)) + 14px); /* (hdrpos-1023) +14px */
}
.topbar::before {
  content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.topbar .circle-btn, .topbar .hero, .topbar .wake-banner { pointer-events: auto; }
.topbar .circle-btn, .hero-name {
  background: rgba(60,60,67,.42); border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.topbar .circle-btn:hover { background: rgba(90,90,98,.5); }
.hero-avatar .avatar { box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.thread-wrap { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.thread {
  height: 100%;
  padding-top: calc(var(--float-top) + env(safe-area-inset-top));
  padding-bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom));
}
.composer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.composer-pill { background: rgba(44,44,46,.55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.10); }
.scroll-down { bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom) + 8px); }
.app { padding-bottom: 0; }

/* (multiav-1022) Group header: every agent's face side by side, slightly overlapping. */
.hero-avatar.multi { display: flex; align-items: center; justify-content: center; min-height: 72px; }
.hero-avatar.multi .hero-face { width: 56px; height: 56px; font-size: 22px; border: 2px solid rgba(255,255,255,.22); }
.hero-avatar.multi .hero-face + .hero-face { margin-left: -10px; }
.hero-more { display: grid; place-items: center; color: #fff; font-weight: 650; background: rgba(60,60,67,.5) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.hero-avatar.multi + .hero-name { margin-top: -8px; max-width: 240px; }

/* (anim-1022) Header faces: slow gradient flow (~14s), faint breathing (~6s), ring pulse when speaking. */
.hero-avatar .avatar {
  overflow: visible;
  background-size: 220% 220% !important;
  animation: hero-flow 14s ease-in-out var(--flow-delay, 0s) infinite alternate, hero-breathe 6s ease-in-out var(--flow-delay, 0s) infinite;
}
.hero-avatar .avatar .avatar-img { border-radius: 50%; }
.hero-avatar .avatar.glow { animation: hero-flow 14s ease-in-out var(--flow-delay, 0s) infinite alternate, hero-breathe 6s ease-in-out var(--flow-delay, 0s) infinite; }
.hero-avatar .avatar::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; opacity: 0;
}
.hero-avatar .avatar.glow::after { animation: hero-ring 2s ease-out var(--glow-delay, 0s) 2; }
.hero-more { animation: none !important; }
@keyframes hero-flow { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes hero-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes hero-ring {
  0% { opacity: .9; box-shadow: 0 0 0 0 rgba(150,170,255,.7), 0 0 10px 2px rgba(150,170,255,.5); }
  100% { opacity: 0; box-shadow: 0 0 0 10px rgba(150,170,255,0), 0 0 18px 6px rgba(150,170,255,0); }
}
.reduce-motion .hero-avatar .avatar, .reduce-motion .hero-avatar .avatar::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hero-avatar .avatar, .hero-avatar .avatar::after { animation: none !important; } }

/* (bottom-1022) Tighter bottom: composer sits closer to the home bar. */
.composer { padding-bottom: max(6px, calc(env(safe-area-inset-bottom) - 22px)); }
:root { --float-bottom: 72px; }
.thread { padding-bottom: calc(var(--float-bottom) + max(6px, calc(env(safe-area-inset-bottom) - 22px))); }
.scroll-down { bottom: calc(var(--float-bottom) + max(6px, calc(env(safe-area-inset-bottom) - 22px)) + 8px); }

/* (scroll-1022) Agents panel on phone: body scrolls inside the dialog, header clears the status bar, chips wrap instead of running off screen */
.picker[open] { overflow: hidden; }
.picker-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.picker-head { flex: none; }
.picker.dlg-full .picker-head { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
.picker.dlg-full { padding-bottom: env(safe-area-inset-bottom, 0px); }
.picker .participants .chip { flex: 0 1 auto; max-width: 100%; min-width: 0; flex-wrap: wrap; }
.picker .participants .chip-wake { white-space: normal; text-align: left; min-width: 0; }

/* (scroll-1022) Agents dialog on phones: body scrolls inside the dialog, header clears the status bar, chips never overflow sideways. */
.picker[open] { overflow: hidden; }
.picker-head { flex: none; }
.picker-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.picker.dlg-full .picker-head { padding-top: max(18px, calc(env(safe-area-inset-top) + 6px)); }
.picker.dlg-full { padding-bottom: env(safe-area-inset-bottom); }
.picker .participants { padding: 0 4px; }
.picker .chip { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.picker .chip-wake { min-width: 0; overflow: hidden; }
.picker .chip-wake > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.picker .wake-row .wake-label { min-width: 0; }
.wake-row .wake-name { flex: none; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.wake-row .wake-label { flex: 1; min-width: 0; }
/* (scroll-1022b) Phone sidebar list scrolls; Auto-wake rows keep names on one line. */
.sidebar { min-height: 0; }
.conv-list { min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.wake-row .wake-name { flex: none; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.wake-row .wake-label { flex: 1 1 auto; min-width: 0; }

/* (fillbottom-1022) iPhone home-screen app: pin the app to the real screen edges (100dvh can come up short), and sit the composer like Grok (just above the home bar). */
.shell { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: auto; }
.composer { padding-bottom: max(8px, calc(env(safe-area-inset-bottom) - 6px)); }
.thread { padding-bottom: calc(var(--float-bottom) + max(8px, calc(env(safe-area-inset-bottom) - 6px))); }
.scroll-down { bottom: calc(var(--float-bottom) + max(8px, calc(env(safe-area-inset-bottom) - 6px)) + 8px); }

/* (birthav-1022) Birth avatars: soft placeholder while faces are pending (temporary), 3-choice picker, signature motions. */
.avatar.birth-pending {
  background: conic-gradient(from 210deg, hsl(262 70% 72%), hsl(200 75% 70%), hsl(320 70% 75%), hsl(262 70% 72%)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.birth-spark { display: inline-block; animation: birth-twinkle 2.4s ease-in-out infinite; }
@keyframes birth-twinkle { 0%, 100% { transform: scale(.85) rotate(0deg); opacity: .7; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
.birth-grid { display: flex; gap: 12px; justify-content: center; margin: 10px 0; }
.birth-cand { width: 84px; height: 84px; padding: 0; border-radius: 50%; overflow: hidden; border: 3px solid transparent; background: rgba(127,127,127,.15); cursor: pointer; display: grid; place-items: center; font-size: 24px; color: rgba(255,255,255,.75); }
.birth-cand img { width: 100%; height: 100%; display: block; }
.birth-cand.selected { border-color: #7aa2ff; box-shadow: 0 0 0 3px rgba(122,162,255,.3); }
.birth-cand-wait { background: conic-gradient(from 210deg, hsl(262 50% 60% / .5), hsl(200 55% 60% / .5), hsl(320 50% 60% / .5), hsl(262 50% 60% / .5)); animation: birth-twinkle 2.4s ease-in-out infinite; }
.birth-motions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.birth-motion-btn { border: 1px solid rgba(127,127,127,.4); background: none; color: inherit; border-radius: 14px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.birth-motion-btn.selected { background: #7aa2ff; border-color: #7aa2ff; color: #fff; }
.birth-motion .avatar-img { transform-origin: 50% 70%; }
.hero-avatar .birth-motion.motion-blink .avatar-img { animation: bm-blink 5s ease-in-out infinite; }
.hero-avatar .birth-motion.motion-ear-twitch .avatar-img { transform-origin: 50% 100%; animation: bm-twitch 4.5s ease-in-out infinite; }
.hero-avatar .birth-motion.motion-breathe .avatar-img { animation: bm-breathe 4s ease-in-out infinite; }
.hero-avatar .birth-motion.motion-bounce .avatar-img { animation: bm-bounce 3s ease-in-out infinite; }
.hero-avatar .birth-motion.motion-tilt .avatar-img { animation: bm-tilt 6s ease-in-out infinite; }
@keyframes bm-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.9); } }
@keyframes bm-twitch { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-4deg); } 88% { transform: rotate(3deg); } 92% { transform: rotate(0); } }
@keyframes bm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes bm-bounce { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-6%); } 86% { transform: translateY(0); } 92% { transform: translateY(-2%); } }
@keyframes bm-tilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 50% { transform: rotate(0); } }
.reduce-motion .birth-spark, .reduce-motion .birth-cand-wait, .reduce-motion .birth-motion .avatar-img { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .birth-spark, .birth-cand-wait, .birth-motion .avatar-img { animation: none !important; } }

/* (kbclean-1022) iPhone home-screen app: ONE sizing rule. The inline script sets --app-h/--app-top from
   visualViewport (full screen when keyboard closed; exactly the visible area when open), so the header stays
   at the top of what you see and the composer sits right above the keyboard. Replaces screenh/kb/kblow/kbpad. */
html.pwa-fix, html.pwa-fix body { height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; background: #000; }
html.pwa-fix .shell { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); bottom: auto; height: var(--app-h, 100%); }
html.pwa-fix.kb-open .shell, html.pwa-fix.kb-open .app, html.pwa-fix.kb-open .sidebar { padding-bottom: 0 !important; }
html.pwa-fix.kb-open .composer { padding-bottom: 6px !important; }
html.pwa-fix.kb-open .thread { padding-bottom: calc(var(--float-bottom) + 6px) !important; }
html.pwa-fix.kb-open .scroll-down { bottom: calc(var(--float-bottom) + 14px) !important; }

/* (full812-1022) iPhone home-screen app, keyboard closed: iOS reports 761 but paints to 812. Size html/body/shell
   to --app-h (screen height when that small gap exists) so nothing clips at 761; composer stays absolute inside .app. */
html.pwa-fix, html.pwa-fix body { height: var(--app-h, 100%); min-height: 0; max-height: none; overflow: hidden; }
html.pwa-fix .shell { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); bottom: auto; height: var(--app-h, 100%); max-height: none; }
html.pwa-fix .app { height: 100%; }
html.pwa-fix .composer { position: absolute; bottom: 0; }

/* (nodiag-1023) diag bar temporarily ON again (blackbar-1023) */

/* (userav-1023) Cartoon face picker: 8 options, wraps on small screens. */
.faces-grid { flex-wrap: wrap; gap: 10px; }
.faces-grid .birth-cand { width: 60px; height: 60px; }
.faces-section .look-btn { display: block; margin: 6px auto 0; }

/* (kbgap-1023) keyboard open: no safe-area padding anywhere at the bottom; composer sits on the visible bottom. */
html.pwa-fix.kb-open .composer { bottom: 0 !important; padding-bottom: 6px !important; margin-bottom: 0 !important; }
html.pwa-fix.kb-open .app { height: 100% !important; padding-bottom: 0 !important; }

/* (blackbar-1023) background behind anything iOS paints below the shell */
html.pwa-fix.full812, html.pwa-fix.full812 body { background:#000; }

/* (banner-1023) dismiss x */
.wake-banner{position:relative;padding-right:36px}
.wake-banner-x{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:28px;height:28px;line-height:28px;text-align:center;font-size:20px;border-radius:50%;color:#3a3a3c;cursor:pointer}
.wake-banner-x:active{background:rgba(0,0,0,.08)}

/* (1023-accbar) contenteditable composer */
.composer .composer-input { flex: 1; min-width: 0; padding: 10px 4px; border: 0; background: transparent; color: var(--text); font: inherit; line-height: 24px; min-height: 44px; max-height: 200px; overflow-y: hidden; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; cursor: text; box-sizing: border-box; }
.composer .composer-input.is-empty::before { content: attr(data-placeholder); color: #8e8e93; pointer-events: none; }
@media (max-width: 720px) { .composer .composer-input { font-size: 16px; } }

/* (1023-accbar2) */
dialog:not([open]) { display: none !important; }

/* (listui-1023) conversation list: face cluster + unread dot */
.conv-item { flex-direction: row !important; align-items: center; gap: 10px; }
.conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-faces { flex: none; position: relative; width: 44px; height: 44px; }
.conv-faces .avatar.list-face { position: absolute; width: 30px; height: 30px; font-size: 13px; box-shadow: 0 0 0 2px var(--sidebar, var(--bg, #000)); }
.conv-faces .avatar.list-face:only-child { width: 44px; height: 44px; font-size: 18px; left: 0; top: 0; }
.conv-faces.n2 .list-face:nth-child(1) { left: 0; top: 0; }
.conv-faces.n2 .list-face:nth-child(2) { right: 0; bottom: 0; }
.conv-faces.n3 .list-face:nth-child(1) { left: 7px; top: 0; }
.conv-faces.n3 .list-face:nth-child(2) { left: 0; bottom: 0; }
.conv-faces.n3 .list-face:nth-child(3) { right: 0; bottom: 0; }
.conv-faces .list-more { display: grid; place-items: center; background: #3a3a3c; color: #fff; font-size: 11px; font-weight: 600; border-radius: 50%; }
.conv-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #0a84ff); align-self: center; }

/* (align-1023) line up member chips: fixed name column */
.chip-name { display:inline-block; min-width:5.2em; }

/* (whitebtn-1023) brown buttons -> white bg, black text */
.picker-row:not(.added) .picker-action, .look-btn.primary, .connect-key, .auth-submit, .scroll-down, .chip-connect:not(.on):hover { background:#fff; color:#111; }

/* (nowrap-1023) keep x on same line when "working..." shows */
.picker .participants .chip { flex-wrap: nowrap; }
.picker .participants .chip .status-word { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; }

/* (whitetext-1023) brown/orange text -> white */
:root { --accent-text: #f2f2f2; --warning-text: #f2f2f2; }

/* (nameonly-1023) picker rows: name only */
.picker-row .picker-desc, .picker-row .picker-note, .picker-row .synced-tag { display:none; }

/* (wakecol-1023) fixed status column so every chip is same length */
.picker .participants .chip-wake { min-width:6.2em; justify-content:flex-start; }

/* (smallwake-1023) smaller auto-wake rows */
.picker .wake-row { padding: 6px 12px; font-size: 14px; min-height: 0; border-radius: 9px; }

/* (chatmenu-1023) top-right ⋯ menu, profile sheet, find bar */
.cm-pop { position: fixed; z-index: 60; right: 12px; top: calc(max(10px, env(safe-area-inset-top)) + 14px + 48px); min-width: 220px; padding: 6px; border-radius: 16px; background: rgba(40,40,44,.72); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.45); display: flex; flex-direction: column; }
.cm-item { appearance: none; background: none; border: 0; color: #f2f2f2; text-align: left; font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.cm-item:hover, .cm-item:active { background: rgba(255,255,255,.1); }
.cm-item.cm-danger { color: var(--danger); border-top: 1px solid rgba(255,255,255,.1); border-radius: 0 0 10px 10px; margin-top: 4px; }
.cm-sheet-back { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.cm-sheet { width: 100%; max-width: 520px; max-height: 75vh; overflow: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: rgba(32,32,36,.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); color: #f2f2f2; }
.cm-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cm-sheet-title { font-weight: 600; font-size: 16px; }
.cm-x { appearance: none; background: rgba(255,255,255,.1); border: 0; color: #f2f2f2; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.cm-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.07); }
.cm-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #b9b9b9; white-space: nowrap; }
.cm-empty { color: #b9b9b9; }
.cm-find { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cm-find-input { flex: 1; min-width: 0; font-size: 16px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #f2f2f2; }
.cm-count { font-size: 13px; color: #b9b9b9; min-width: 34px; text-align: center; }
.cm-nav { appearance: none; background: rgba(255,255,255,.1); border: 0; color: #f2f2f2; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; }
.msg.cm-hit .bubble { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }

/* (findtap-1023) topbar is pointer-events:none; let the find bar be tapped */
.topbar .cm-find, .topbar .cm-find * { pointer-events: auto; }
/* (hero32-1023) >4 agents: smaller faces, 3 on top, 2 below centered and tucked up */
.hero-avatar.multi.hero32 { flex-direction: column; min-height: 72px; }
.hero-avatar.multi.hero32 .hero-row { display: flex; justify-content: center; }
.hero-avatar.multi.hero32 .hero-row2 { margin-top: -9px; position: relative; z-index: 1; }
.hero-avatar.multi.hero32 .hero-face { width: 36px; height: 36px; font-size: 14px; }
.hero-avatar.multi.hero32 .hero-face + .hero-face { margin-left: -6px; }
.hero-avatar.multi.hero32 .hero-more { font-size: 12px; }

/* (bluedot-1023) brighter unread dot */
.conv-dot { width: 10px; height: 10px; background: #0a84ff; }

/* (unreadglow-1023) unread row: whole border pulses blue */
@keyframes atUnreadPulse { 0%,100% { box-shadow: inset 0 0 0 1.5px rgba(10,132,255,.25); } 50% { box-shadow: inset 0 0 0 2px rgba(10,132,255,1); } }
.conv-item.unread { animation: atUnreadPulse 1.6s ease-in-out infinite; border-radius: 12px; }
.reduce-motion .conv-item.unread { animation: none; box-shadow: inset 0 0 0 2px #0a84ff; }

/* (noactive-1023) phone: no lighter highlight on the last-opened row */
@media (max-width: 720px) {
  .conv-item.active, .conv-row .conv-item.active { background: var(--sidebar, var(--bg)); }
}

/* (bannerui-1023) wake banner: dark card matching the app */
#wake-banner { background: #1c1c1e !important; color: #f2f2f2 !important; border: 1px solid rgba(255,159,10,.25); box-shadow: 0 6px 24px rgba(0,0,0,.45); border-radius: 14px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; padding: 10px 40px 10px 30px !important; position: relative; }
#wake-banner::before { content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #ff9f0a; }
#wake-banner .wake-banner-x { color: #8e8e93 !important; font-size: 20px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

/* (bannerpulse-1023) wake banner border pulses like unread rows */
@keyframes atBannerPulse { 0%,100% { border-color: rgba(255,159,10,.25); box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(255,159,10,0); } 50% { border-color: rgba(255,159,10,1); box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,159,10,.9); } }
#wake-banner { animation: atBannerPulse 1.6s ease-in-out infinite; }
.reduce-motion #wake-banner { animation: none; border-color: #ff9f0a !important; }

/* (listclear-1023) desktop list readability */
@media (min-width: 721px) {
  .conv-faces { min-width: 44px; margin-left: 2px; }
  .conv-item .conv-title { font-size: 15px; color: var(--text); }
  .conv-item:not(.unread) .conv-preview { font-size: 14px; color: #b8b8be; }
  .conv-item.unread .conv-preview { font-size: 14px; }
  .conv-item:not(.unread) .conv-time { font-size: 13px; color: #a1a1a8; }
  .conv-item.unread .conv-time { font-size: 13px; }
}

/* (ime2-1024) placeholder out of the text flow so it never mixes with IME text */
.composer .composer-input { position: relative; }
.composer .composer-input.is-empty::before { position: absolute; top: 10px; left: 4px; right: 4px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.birth-reroll { margin-top: 8px; } /* (ind-1024) */

/* (align-1024) Status columns line up on every row (iPhone + desktop). */
.picker .participants .chip-name { flex: 0 0 5.6em; width: 5.6em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .participants .chip-wake { flex: 0 0 6.9em; width: 6.9em; min-width: 0; justify-content: flex-start; text-align: left; }
.cm-status { flex: 0 0 7.6em; width: 7.6em; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; }
.wake-row .wake-name { flex: 0 0 38%; width: 38%; max-width: 38%; }
.wake-row .wake-label { flex: 1 1 auto; min-width: 0; text-align: left; }

/* (avedit-1024) Edit-avatar sheet */
.av-editable, .cm-av-btn { cursor: pointer; }
.cm-av-btn { border: 0; padding: 0; background: none; border-radius: 50%; display: inline-flex; }
.picker-row[aria-disabled="true"] { cursor: default; }
.picker-row[aria-disabled="true"]:hover { background: transparent; }
.av-preview { display: flex; justify-content: center; margin: 4px 0 6px; }
.av-preview img, .av-preview .avatar { width: 112px; height: 112px; border-radius: 50%; font-size: 44px; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.av-preview-name { text-align: center; font-weight: 650; margin-bottom: 12px; }
.av-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #1d1d20; border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.av-seg-btn { flex: 1; border: 0; padding: 8px 0; border-radius: 9px; background: none; color: #b9b9b9; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.av-seg-btn.on { background: #fff; color: #111; }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.av-grid-faces { grid-template-columns: repeat(3, 1fr); }
.av-cell { aspect-ratio: 1; border: 2px solid transparent; border-radius: 16px; padding: 0; overflow: hidden; background: #2a2a2e; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #777; }
.av-cell img { width: 100%; height: 100%; display: block; }
.av-cell.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.av-colors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 6px; }
.av-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); padding: 0; cursor: pointer; }
.av-color.on { border-color: #fff; box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; }
.av-reset { display: block; margin: 6px auto 0; }
.av-newbatch { display: block; margin: 12px auto 0; }
.av-save { width: 100%; margin-top: 16px; }
.av-note { text-align: center; margin-top: 6px; }
/* (avfix-1024) Save always visible at the bottom of the sheet */
/* (savebar-1024) sticky removed: Save is in .av-foot */
.av-save:disabled { opacity: 1; background: #3a3a3e; color: #aaa; }
/* (nojump-1024) loading tiles keep their size; soft shimmer */
.av-wait { font-size: 22px; color: #6a6a70; }
.av-shimmer { background: linear-gradient(100deg, #2a2a2e 30%, #38383d 50%, #2a2a2e 70%); background-size: 250% 100%; animation: av-shim 1.3s linear infinite; }
@keyframes av-shim { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .av-shimmer { animation: none; } }
.av-newbatch { min-width: 120px; }
/* (savebar-1024) Edit-avatar footer: outside the scroll body, opaque, safe-area aware */
#avatar-dialog[open] { display: flex; flex-direction: column; }
#avatar-dialog #avatar-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.av-foot { flex: none; padding: 10px 22px calc(12px + env(safe-area-inset-bottom)); background: var(--card, #1c1c1e); border-top: 1px solid rgba(255,255,255,.08); }
.av-foot .av-save { width: 100%; margin: 0; }
.av-foot .av-note { margin: 6px 0 0; }
/* (savebar2-1024) Compact footer: the dialog's own safe-area padding moves into the footer (not added twice). */
#avatar-dialog[open] { padding-bottom: 0; }
#avatar-dialog:has(#avatar-foot[hidden]) { padding-bottom: env(safe-area-inset-bottom); }
.av-foot { padding: 8px 22px calc(6px + env(safe-area-inset-bottom)); }
.av-foot .av-save { height: 44px; padding: 0 16px; }
.av-foot .av-note { margin: 4px 0 0; font-size: 12px; }
/* (sheetfit-1024) Bottom sheets always fit the VISIBLE screen (svh = with Safari's bars showing) and
   the last row can scroll fully into view above the home bar. The bottom space lives inside the
   scroll area, not on the dialog, so it's never added twice. */
.picker { max-height: min(680px, calc(100dvh - 48px), calc(100svh - 24px)); }
.picker-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 720px) {
  .picker { max-height: min(calc(100dvh - env(safe-area-inset-top) - 12px), calc(100svh - env(safe-area-inset-top) - 12px)); padding-bottom: 0; }
}
.picker.dlg-full { height: 100dvh; max-height: 100svh; padding-bottom: 0; }
@supports not (height: 1svh) { .picker.dlg-full { max-height: 100dvh; } }
/* Edit avatar keeps its own footer (savebar2): body only needs normal space above it. */
#avatar-dialog:has(#avatar-foot:not([hidden])) #avatar-body { padding-bottom: 16px; }
#avatar-dialog:has(#avatar-foot[hidden]) { padding-bottom: 0; }
.cm-sheet { max-height: min(75dvh, 75svh); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* (agfull-1024) Phones: Agents is always a full page, from any entry point. */
@media (max-width: 720px) {
  #picker.picker[open] { position: fixed; inset: 0; top: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100svh; border: 0; border-radius: 0; padding-bottom: 0; transform: none; }
  @supports not (height: 1svh) { #picker.picker[open] { max-height: 100dvh; } }
  #picker .picker-head { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
  #picker .picker-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
/* (agclean-1024) Phones: solid header bar, sheet fills the real screen (no svh cap = no black strip). */
@media (max-width: 720px) {
  #picker.picker[open] { top: 0; bottom: 0; left: 0; right: 0; height: auto; min-height: 100%; max-height: none; overflow: hidden; background: var(--card); }
  #picker .picker-head { position: relative; z-index: 2; flex: none; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; opacity: 1; border-bottom: 1px solid rgba(255,255,255,.08); }
  #picker .picker-body { position: relative; z-index: 1; -webkit-mask-image: none; mask-image: none; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
/* (createfix-1024) group chooser: name left, Add right */
.browse-add-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; }
.browse-add-name { flex: 1 1 auto; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browse-add-row .picker-action { flex: none; margin-left: auto; min-width: 64px; text-align: center; }
/* (agmock-1024) Agents page per Jay's mockup */
.picker-head h2 { font-size: 17px; font-weight: 600; }
.create-card { margin: 10px 4px 6px; }
.create-card .create-form { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; background: #f2f2f4; color: #111; }
.create-card-plus { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: 24px; line-height: 1; font-weight: 400; }
.create-card-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.create-card-text strong { font-size: 16px; font-weight: 700; color: #111; }
.create-card-text small { font-size: 13px; color: #6b6b70; }
.create-card-btn { flex: none; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: #111; color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
.create-card-btn:disabled { opacity: .6; }
.picker-row-wrap { position: relative; }
.picker-more { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #2c2c2e; color: #d0d0d4; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.picker-more:disabled { opacity: .5; }
.picker-menu { position: absolute; right: 0; top: calc(100% - 4px); z-index: 5; min-width: 140px; padding: 6px; border-radius: 14px; background: #2c2c2e; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.picker-menu-del { width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: #ff6b6b; font: inherit; font-weight: 600; cursor: pointer; }
.picker-menu-del:hover { background: rgba(255,107,107,.12); }
#picker .create-card .create-form { flex-direction: row; flex-wrap: nowrap; align-items: center; text-align: left; }
#picker .create-card .create-card-text { align-items: flex-start; text-align: left; }
#picker .create-card .create-card-btn { width: auto; margin: 0; }
/* (agmenu-1024) light frosted ⋯ menu */
#picker .picker-menu { min-width: 210px; padding: 8px; border-radius: 22px; background: rgba(248,248,250,.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 18px 44px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15); top: calc(100% + 2px); }
#picker .picker-menu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border: 0; border-radius: 14px; background: transparent; color: #1c1c1e; font: inherit; font-size: 16.5px; font-weight: 500; text-align: left; cursor: pointer; }
#picker .picker-menu-item svg { flex: none; }
#picker .picker-menu-item:hover, #picker .picker-menu-item:active { background: rgba(0,0,0,.06); }
#picker .picker-menu-item.picker-menu-del { color: #e5383b; font-weight: 500; }
/* (agmenufix-1024) menu is a fixed layer now */
#picker > .picker-menu { position: fixed; top: auto; touch-action: manipulation; }
#picker .picker-menu-item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ===== (themeonly-1024) Light / Dark switch. Dark = unchanged. Light = same UI recolored. ===== */
.theme-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.theme-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.theme-seg button[aria-checked="true"] { background: var(--text); color: var(--bg); }

html[data-theme="light"] {
  --bg: #f2f2f5; --sidebar: #ececf0; --card: #ffffff; --surface-2: #e9e9ee; --surface-3: #dcdce3;
  --hover: #e6e6ec; --border: #d6d6dd; --border-strong: #bdbdc6; --field-border: #b0b0b9;
  --text: #111114; --muted: #64646c; --accent-soft: #e9e9ee; --accent-text: #111114;
  --success-bg: #e3f6ea; --success-border: #a6dcb8; --warning-text: #3a3a3c; --warning-bg: #f2f2f5; --warning-line: #bdbdc6;
  --danger-text: #b3261e; --danger-bg: #fde8e6; --danger-border: #f2b8b2;
  --overlay: rgb(0 0 0 / 0.2); --backdrop: rgb(30 30 40 / 0.3); --shadow: rgb(0 0 0 / 0.15);
  color-scheme: light;
}
html[data-theme="light"], html[data-theme="light"] body { background: #f2f2f5 !important; color: var(--text); }
html[data-theme="light"] .shell, html[data-theme="light"] .app, html[data-theme="light"] .thread-wrap, html[data-theme="light"] .sidebar { background: var(--bg) !important; }
html[data-theme="light"] .topbar::before, html[data-theme="light"] .topbar::after { background: linear-gradient(#f2f2f5 30%, rgba(242,242,245,0)) !important; }
html[data-theme="light"] body, html[data-theme="light"] .conv-item, html[data-theme="light"] .picker, html[data-theme="light"] .cm-sheet, html[data-theme="light"] .picker-name, html[data-theme="light"] .wake-name, html[data-theme="light"] .site-name, html[data-theme="light"] .picker-head h2, html[data-theme="light"] .hero-name { color: var(--text) !important; }
html[data-theme="light"] .connect-muted, html[data-theme="light"] .picker-section h3, html[data-theme="light"] .wake-label, html[data-theme="light"] .conv-time, html[data-theme="light"] .picker-desc { color: var(--muted) !important; }
/* surfaces that were hard-coded dark */
html[data-theme="light"] .picker, html[data-theme="light"] .cm-sheet, html[data-theme="light"] .cm-pop { background: #ffffff !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="light"] .picker .picker-head { background: #ffffff !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] .cm-pop button, html[data-theme="light"] .cm-pop .cm-row { color: var(--text) !important; }
html[data-theme="light"] .composer-pill { background: #ffffff !important; border: 1px solid var(--border) !important; color: var(--text); }
html[data-theme="light"] .composer-pill .composer-input, html[data-theme="light"] .composer-icon { color: var(--text) !important; }
html[data-theme="light"] .circle-btn, html[data-theme="light"] .picker-close, html[data-theme="light"] .brand-edit, html[data-theme="light"] .new-conv, html[data-theme="light"] .scroll-down { background: #ffffff !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
html[data-theme="light"] .picker-more { background: var(--surface-2) !important; color: #333 !important; }
html[data-theme="light"] .wake-row { background: #ffffff !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
html[data-theme="light"] .conv-item.active, html[data-theme="light"] .conv-item:hover { background: #ffffff !important; }
html[data-theme="light"] .picker .participants .chip { background: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="light"] .create-card .create-form { background: #ffffff !important; border: 1px solid var(--border); }
html[data-theme="light"] .av-seg { background: var(--surface-2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .av-seg-btn { color: #555 !important; }
html[data-theme="light"] .av-seg-btn.on { background: #111 !important; color: #fff !important; }
html[data-theme="light"] .av-foot { background: #ffffff !important; border-top-color: var(--border) !important; }
html[data-theme="light"] .av-save:disabled { background: var(--surface-2) !important; color: #777 !important; }
html[data-theme="light"] .picker-action { box-shadow: inset 0 0 0 1px var(--border); }

/* ===== (float-1024) Grok-style floating liquid-glass chrome. Light + Dark. Visual only. ===== */
:root {
  --fl-glass: rgba(58,58,64,.48); --fl-glass-hi: rgba(80,80,88,.55);
  --fl-rim: rgba(255,255,255,.16); --fl-hi: rgba(255,255,255,.18); --fl-lo: rgba(0,0,0,.25);
  --fl-shadow: 0 6px 20px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  --fl-ink: #f2f2f7; --fl-fade: 0,0,0;
  --fl-blur: blur(20px) saturate(180%);
}
html[data-theme="light"] {
  --fl-glass: rgba(255,255,255,.62); --fl-glass-hi: rgba(255,255,255,.8);
  --fl-rim: rgba(255,255,255,.85); --fl-hi: #ffffff; --fl-lo: rgba(0,0,0,.06);
  --fl-shadow: 0 8px 24px rgba(30,30,50,.14), 0 1px 3px rgba(30,30,50,.10);
  --fl-ink: #111114; --fl-fade: 242,242,245;
}
/* the glass recipe */
.topbar .circle-btn, .topbar .hero-name, .hero-more, .scroll-down, .composer-pill,
.sidebar-head .brand, .sidebar-actions .new-conv, a.sidebar-settings, .sidebar-settings {
  background: var(--fl-glass) !important; color: var(--fl-ink) !important;
  -webkit-backdrop-filter: var(--fl-blur) !important; backdrop-filter: var(--fl-blur) !important;
  border: 1px solid var(--fl-rim) !important;
  box-shadow: inset 0 1px 0 var(--fl-hi), inset 0 -1px 3px var(--fl-lo), var(--fl-shadow) !important;
}
.topbar .circle-btn { width: 46px; height: 46px; border-radius: 999px; }
.topbar .circle-btn .icon { stroke: var(--fl-ink); }
.topbar .circle-btn:hover { background: var(--fl-glass-hi) !important; }
.topbar .hero-name { color: var(--fl-ink) !important; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 650; }
.scroll-down { border-radius: 999px; color: var(--fl-ink) !important; }
.composer-pill { border-radius: 999px !important; }
.composer-pill .composer-input, .composer-pill .composer-icon { color: var(--fl-ink) !important; }

/* progressive blur behind header: 3 stacked layers, stronger at the top */
.topbar::before {
  inset: 0 0 -36px 0 !important;
  background: linear-gradient(to bottom, rgba(var(--fl-fade),.72) 0%, rgba(var(--fl-fade),.35) 55%, rgba(var(--fl-fade),0) 100%) !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%) !important;
}
.topbar::after {
  content: ""; position: absolute; inset: 0 0 20% 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  background: none !important;
}
/* progressive blur behind composer */
.composer { background: none !important; }
.composer::before {
  content: ""; position: absolute; inset: -30px 0 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--fl-fade),.7) 0%, rgba(var(--fl-fade),.3) 55%, rgba(var(--fl-fade),0) 100%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 100%); mask-image: linear-gradient(to top, #000 50%, transparent 100%);
}
/* first/last messages clear the floating chrome */
.thread { padding-top: calc(var(--float-top) + env(safe-area-inset-top) + 12px) !important; padding-bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom) + 20px) !important; }
/* light: agent bubbles = soft grey cards */
html[data-theme="light"] .bubble { background: #ffffff; color: #111 !important; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
html[data-theme="light"] .msg.agent .bubble { background: #e9e9ee !important; border-color: transparent; }

/* group list (phones): header + actions float as glass; the list scrolls underneath */
@media (max-width: 720px) {
  .sidebar { position: relative; }
  .sidebar-head, .sidebar-actions { position: absolute; left: 0; right: 0; z-index: 6; margin: 0; background: transparent !important; }
  .sidebar-head { top: 0; padding: calc(env(safe-area-inset-top) + 10px) 14px 6px 14px; min-height: 0; }
  .sidebar-actions { top: calc(env(safe-area-inset-top) + 64px); padding: 0 14px; }
  .sidebar-head .brand { padding: 6px 14px 6px 8px; border-radius: 999px; font-size: 16px; }
  .sidebar-actions .new-conv { border-radius: 999px !important; }
  .sidebar::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top) + 130px); z-index: 5; pointer-events: none;
    background: linear-gradient(to bottom, rgba(var(--fl-fade),.75) 0%, rgba(var(--fl-fade),.35) 60%, rgba(var(--fl-fade),0) 100%);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  }
  .conv-list { padding-top: calc(env(safe-area-inset-top) + 120px) !important; padding-bottom: calc(env(safe-area-inset-bottom) + 90px) !important; }
  .sidebar-settings { position: absolute; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 10px); z-index: 6; margin: 0 !important; border-radius: 999px !important; }
  .sidebar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(env(safe-area-inset-bottom) + 90px); z-index: 5; pointer-events: none;
    background: linear-gradient(to top, rgba(var(--fl-fade),.7), rgba(var(--fl-fade),0));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%); mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  }
}

/* ===== (motion-1024) TEST ONLY ===== */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) button, html:not(.reduce-motion) .picker-row, html:not(.reduce-motion) a.sidebar-settings {
    transition: transform 380ms var(--spring, cubic-bezier(.34,1.56,.64,1));
  }
  html:not(.reduce-motion) button:active:not(:disabled), html:not(.reduce-motion) a.sidebar-settings:active { transform: scale(.94); transition-duration: 90ms; }
  html:not(.reduce-motion) .picker-row:active:not(:disabled) { transform: scale(.98); transition-duration: 90ms; }
}
/* Light/Dark knob */
.theme-seg { position: relative; }
.theme-seg .seg-knob { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: var(--text); pointer-events: none; z-index: 0; }
.theme-seg button { position: relative; z-index: 1; background: transparent !important; transition: color 200ms; }
.theme-seg button[aria-checked="true"] { color: var(--bg) !important; box-shadow: none !important; }
/* working: tiny waveform (rows keep mr1 equal width; pink border stays) */
.wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 6px; vertical-align: middle; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--agent-color, var(--live)); transform-origin: bottom; animation: wave 900ms ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -700ms; } .wave i:nth-child(3) { animation-delay: -450ms; } .wave i:nth-child(4) { animation-delay: -200ms; }
@keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.chip.speaking .chip-name::after { content: ""; display: inline-block; width: 0; }
.typing .typing-text::before { content: none; }
html.reduce-motion .wave i { animation: none; transform: scaleY(.6); }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; transform: scaleY(.6); } }

/* ---- ported from prod: mr1 + nc1/nc2 ---- */
/* (memrow-1024) Agents › In this conversation: full-width equal rows, no truncated live-status word
   (the "● …" was the live status word — online/working — squeezed to nothing; presence already shows on the right). */
.picker .participants { display: flex; flex-direction: column; gap: 8px; }
.picker .participants .chip { display: flex; align-items: center; flex: 0 0 auto; width: 100%; max-width: 100%; box-sizing: border-box; flex-wrap: nowrap; gap: 8px; }
.picker .participants .chip .status-word.status-typing { display: none; } /* working is already shown by the pulsing border */
.picker .participants .chip .status-word { flex: none; overflow: visible; text-overflow: clip; }
.picker .participants .chip-name { flex: 1 1 auto; width: auto; min-width: 0; }
.picker .participants .chip-connect, .picker .participants .chip-off, .picker .participants .chip-owner { flex: none; }
.picker .participants .chip-wake { flex: 0 0 7.4em; width: 7.4em; }
.picker .participants .chip-remove { flex: none; margin-left: auto; }

/* (ncpad-1024) New conversation full-screen sheet: header clears the status-bar area (+14px), solid so nothing blurs it. */
#new-conv-dialog.dlg-full .picker-head { padding-top: calc(env(safe-area-inset-top, 0px) + 24px); position: relative; z-index: 2; background: var(--card); }
/* (ncpad2-1024) Phones: New conversation always opens as a full-screen page from the top (not a bottom sheet), header below the status bar. */
@media (max-width: 720px) {
  #new-conv-dialog.picker[open] { position: fixed; inset: 0; margin: 0; width: 100vw; max-width: 100vw; height: auto; min-height: 100%; max-height: none; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0px); transform: none; }
  #new-conv-dialog[open] .picker-head { padding-top: calc(env(safe-area-inset-top, 0px) + 24px); position: relative; z-index: 2; background: var(--card); }
}
/* (motion3-1024) press-spring on every tappable */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) :is(.conv-item, [role="button"], label, .chip-avatar, .av-cell, .av-color, .wake-row, .cm-item, .picker-menu-item, .browse-add-row, summary) { transition: transform 380ms var(--spring, cubic-bezier(.34,1.56,.64,1)); }
  html:not(.reduce-motion) :is(.conv-item, [role="button"], label, .av-cell, .av-color, .wake-row, .cm-item, .picker-menu-item, .browse-add-row, summary):active { transform: scale(.97); transition-duration: 90ms; }
  html:not(.reduce-motion) :is(.chip-avatar, .av-color):active { transform: scale(.9); transition-duration: 90ms; }
}

/* (motion4-1024) calm press + no blur while moving */
.mo-moving, .mo-moving * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.mo-moving { will-change: transform, opacity; transform: translateZ(0); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) :is(button, a.sidebar-settings, .picker-row, .conv-item, [role="button"], label, .chip-avatar, .av-cell, .av-color, .wake-row, .cm-item, .picker-menu-item, .browse-add-row, summary) { transition: transform var(--t-press, 160ms) var(--ease-close, cubic-bezier(.32,.72,0,1)) !important; }
  html:not(.reduce-motion) :is(button, a.sidebar-settings, .picker-row, .conv-item, [role="button"], label, .av-cell, .av-color, .wake-row, .cm-item, .picker-menu-item, .browse-add-row, summary):active:not(:disabled) { transform: scale(.92) !important; transition-duration: var(--t-press, 160ms) !important; transition-timing-function: cubic-bezier(.32,.72,0,1) !important; }
}
.wave i { will-change: transform; }

/* (motion5-1024) no glass blur on anything that moves; solid surfaces, small static shadow */
:is(dialog, .picker, .cm-sheet, .cm-sheet-back, .cm-pop, .picker-menu, #sidebar, #drawer-backdrop, .create-card, .wake-row, .auth-card),
:is(dialog, .picker, .cm-sheet, .cm-pop, .picker-menu, #sidebar) * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
dialog::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(0,0,0,.45) !important; }
.cm-sheet-back, #drawer-backdrop { background: rgba(0,0,0,.45) !important; }
:is(dialog.picker, .picker, .cm-sheet, #sidebar) { background: var(--card, #17181c) !important; box-shadow: 0 2px 8px rgba(0,0,0,.25) !important; }
#picker .picker-menu { background: #f4f4f6 !important; }
html:not([data-theme="light"]) body .cm-pop { background: #26272c !important; box-shadow: 0 2px 8px rgba(0,0,0,.25) !important; }
html[data-theme="light"] :is(dialog.picker, .picker, .cm-sheet, #sidebar) { background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; }
html[data-theme="light"] body :is(.cm-pop, #picker .picker-menu) { background: #fff !important; }
.mo-moving { box-shadow: none !important; }

/* (motion8-1024) pause infinite loops (avatar breathing etc.) while a sheet opens/closes */
html.mo-busy :is(.hero-face, .hero-avatar .avatar, .hero-avatar .avatar-img, .birth-spark, .birth-cand-wait, .wave i, .chip.speaking .avatar, .av-shimmer, .conv-item.unread, #wake-banner, .status-typing, .typing) { animation-play-state: paused !important; }
dialog::backdrop { transition: opacity var(--t-close, 300ms) cubic-bezier(.4,0,.2,1); }
dialog.mo-closing::backdrop { opacity: 0; }

/* (opq-1024) sheet panels are solid (their old blur is off, so a translucent fill looked see-through) */
html:not([data-theme="light"]) .cm-sheet { background: #202024 !important; }

/* (connfull-1024) Phones: the agent connection page is a full-screen page from the top, like New conversation. */
@media (max-width: 720px) {
  #connect.picker[open] { position: fixed; inset: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100%; min-height: 100%; max-height: none; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--card) !important; overflow-y: auto; }
  #connect[open] .picker-head { padding-top: calc(env(safe-area-inset-top, 0px) + 24px); position: relative; z-index: 2; background: var(--card); }
}

/* (copyfb-1024) Copy button feedback */
.copy.copied { color: #22c55e !important; }
.copy.copy-failed { color: #ef4444 !important; }
.copy { white-space: nowrap; }
.copy.copy-fb{min-width:7em;text-align:center;justify-content:center}

/* (copyA-1024) */
.copy.copied{background:#22c55e!important;color:#fff!important;border-color:#22c55e!important}
.copy.copy-failed{background:#ef4444!important;color:#fff!important;border-color:#ef4444!important}
.copy .ck{display:inline-block;margin-left:2px}
.copy.copy-pop{animation:cpA-pop 360ms cubic-bezier(.34,1.3,.64,1)}
.copy.copy-pop .ck{animation:cpA-ck 420ms cubic-bezier(.34,1.6,.64,1)}
@keyframes cpA-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes cpA-ck{0%{transform:scale(0)}60%{transform:scale(1.5)}100%{transform:scale(1)}}

/* (redbar-1025) red Delete layer only while swiping or open; never at rest */
.conv-row:not(.open):not(.swiping) .conv-swipe-del { visibility: hidden !important; }

/* (rb7-1025) rows never scale: press = subtle tint only; red layer exists only while the card is actually moved */
.conv-item, .conv-row, .conv-swipe-del { -webkit-tap-highlight-color: transparent; }
html:not(.reduce-motion) a.conv-item.conv-item:is(:active, :hover), html:not(.reduce-motion) a.conv-item.conv-item:active:not(:disabled), html.reduce-motion a.conv-item.conv-item:active { transform: none !important; }
.conv-item:active { background-image: linear-gradient(rgba(127,127,127,.12), rgba(127,127,127,.12)) !important; }
.conv-row .conv-swipe-del { top: 1px; right: 1px; bottom: 1px; border-radius: 0 13px 13px 0; }
.conv-row:not(.open-ish) .conv-swipe-del { visibility: hidden !important; opacity: 0 !important; width: 0 !important; padding: 0 !important; overflow: hidden; }
.conv-row.open-ish .conv-swipe-del { visibility: visible !important; opacity: 1 !important; }

/* (grphdr-1025) "Agents in “Suno”" header: icon + name + count, plus a one-line hint */
#here-section > h3.here-head { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; min-width: 0; margin-bottom: 2px; }
#here-section .here-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, #0a84ff 16%, transparent); color: #0a84ff; }
#here-section .here-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#here-section .here-pre { color: var(--muted); font-weight: 500; }
#here-section .here-name { font-weight: 700; color: var(--text); }
#here-section .here-count { flex: none; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.18)); color: var(--muted); }
#here-section .here-hint { margin: 0 0 10px 34px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }

/* (onelink-1025) big "Copy invite link" */
.invite-box { margin: 6px 0 14px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, #0a84ff 10%, transparent); border: 1px solid color-mix(in srgb, #0a84ff 35%, transparent); }
.invite-box .connect-muted { margin: 4px 0 10px; }
.invite-box .invite-copy { display: block; width: 100%; min-height: 50px; font-size: 17px; font-weight: 700; border-radius: 14px; background: #0a84ff !important; color: #fff !important; border: 0; }
.invite-box .invite-copy.copied { background: #22c55e !important; }
.invite-box .invite-copy:disabled { opacity: .6; }
.invite-box .invite-or { margin: 10px 0 0; font-size: 12.5px; }

/* (autowake-1025) scheduled-check agents count as online */
.wake-dot.p-checks { background: #1e9e4a; }

/* (aw4-1025) connect help on the Auto-wake page */
.wake-step-line { font-weight: 600; margin: 8px 0 4px; }
#wake-invite, #wake-reminder { margin: 6px 0; }

/* (x-1025) the × is drawn only; the banner handles the tap by position */
#wake-banner .wake-banner-x { pointer-events: none; }

/* (guide-1026) Auto-wake two-step */
.wake-2step { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 12px; margin: 8px 0; display: grid; gap: 8px; }
.wake-step-input { width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px; border-radius: 8px; border: 1px solid var(--line, #ccc); }
.wake-step-done { color: #1a7f37; font-weight: 600; margin: 0; }

/* (viewer-1026) fullscreen photo viewer */
.img-viewer{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;z-index:2147483000;background-color:#000;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box;overflow:hidden;touch-action:none;overscroll-behavior:contain;animation:imgv-in .16s ease-out}
.img-viewer.closing{opacity:0;transition:opacity .16s}
.img-viewer img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .2s;transform-origin:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.img-viewer-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 12px);width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(40,40,40,.85);color:#fff;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 3px;cursor:pointer;z-index:1;-webkit-tap-highlight-color:transparent}
@keyframes imgv-in{from{opacity:0}to{opacity:1}}

/* (viewer2-1026) keep × always visible: reserved top bar and bottom bar, × fixed above everything */
.img-viewer{padding:calc(env(safe-area-inset-top,0px) + 68px) env(safe-area-inset-right,0px) calc(env(safe-area-inset-bottom,0px) + 64px) env(safe-area-inset-left,0px)}
.img-viewer img{position:relative;z-index:1}
.img-viewer-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;width:44px;height:44px;z-index:2147483600;background:#222;border:2px solid rgba(255,255,255,.9);color:#fff;font-size:30px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.img-viewer-closetext{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:2147483600;min-height:44px;padding:0 28px;border-radius:22px;border:1px solid rgba(255,255,255,.5);background:#222;color:#fff;font-size:17px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* (viewer3-1026) no bottom Close button: small bottom margin only */
.img-viewer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}

/* (viewer4-1026) Grok-style viewer */
.gv{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:2147483000;background-color:#000;display:flex;flex-direction:column;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 76px) env(safe-area-inset-right,0px) calc(env(safe-area-inset-bottom,0px) + 10px) env(safe-area-inset-left,0px);overflow:hidden;touch-action:none;overscroll-behavior:contain;animation:imgv-in .16s ease-out}
.gv.closing{opacity:0;transition:opacity .16s}
.gv-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 12px}
.gv-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .2s;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.gv-cap{flex:0 0 auto;color:#ddd;font-size:16px;line-height:1.35;text-align:center;padding:12px 20px 4px;max-height:3.6em;overflow:hidden}
.gv-strip{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:12px 12px 4px;scrollbar-width:none;touch-action:pan-x}
.gv-strip::-webkit-scrollbar{display:none}
.gv-thumb{flex:0 0 auto;width:60px;height:60px;padding:0;border:2px solid transparent;border-radius:10px;background:#111;overflow:hidden;cursor:pointer;opacity:.7;-webkit-tap-highlight-color:transparent}
.gv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gv-thumb.on{border-color:#fff;opacity:1}
.gv-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 16px);width:52px;height:52px;border-radius:50%;border:0;background:#2c2c2e;display:flex;align-items:center;justify-content:center;padding:0;z-index:2147483600;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent}

/* (compact-1027) smaller Agents panel */
#picker .create-card { margin: 6px 4px 4px; }
#picker .create-card .create-form { gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; }
#picker .create-card-plus { width: 32px; height: 32px; font-size: 20px; }
#picker .create-card-text { gap: 0; }
#picker .create-card-text strong { font-size: 14.5px; }
#picker .create-card-text small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#picker .create-card-btn { height: 32px; padding: 0 14px; font-size: 14px; }
#picker .picker-section h3 { margin: 8px 4px 4px; font-size: 11.5px; }
#picker .wake-list { gap: 4px; }
#picker .wake-row { gap: 8px; padding: 5px 10px; font-size: 13px; border-radius: 8px; min-height: 0; }
#picker .wake-row .wake-dot { width: 8px; height: 8px; }
#picker .wake-row .wake-name { flex: 0 0 34%; width: 34%; max-width: 34%; }
#picker .wake-row .wake-label { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#picker .participants .picker-row { padding: 5px 8px; gap: 8px; font-size: 13.5px; }

/* (nogroup-1027) Agents panel: no "In this conversation" section */
#picker:not(.add-only) #here-section { display: none !important; } /* (addconv-1027) still hidden in Agents panel, shown on Add agent page */

/* (sec2-1028) Message history section + privacy link */
.history-section .invite-row { margin-bottom: 4px; }
.history-clear { height: 10px; }
.history-privacy { display: block; margin: 14px 2px 2px; font-size: 13px; opacity: .62; color: inherit; text-decoration: none; }
.history-privacy:hover { opacity: .9; text-decoration: underline; }

/* (homeui-1028) Light touches from the reference home: borderless list rows, softer spacing, calm blue unread dot. Layout unchanged. */
.conv-list { gap: 0; padding: 4px 6px; }
.conv-list .conv-item, .conv-list .conv-row .conv-item,
html[data-theme="light"] .conv-list .conv-item, html[data-theme="dark"] .conv-list .conv-item {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 14px; padding: 11px 10px; gap: 12px;
}
.conv-list .conv-row { background: transparent !important; border: 0 !important; }
.conv-list .conv-row .conv-item { background: transparent !important; } /* swipe Delete stays hidden until swiped (visibility) */

.conv-list .conv-item.active, .conv-list .conv-row .conv-item.active { background: color-mix(in srgb, var(--text, #000) 6%, transparent) !important; }
.conv-list .conv-item .conv-title { font-weight: 600; }
.conv-list .conv-item .conv-top { align-items: center; }
/* unread: no pulsing ring, just bold title + blue dot */
.conv-list .conv-item.unread, .reduce-motion .conv-list .conv-item.unread { animation: none !important; box-shadow: none !important; }
.conv-list .conv-dot { width: 9px; height: 9px; background: #0a84ff; margin-left: 2px; }

/* (homeui2-1028) Reference-style home: top avatar + round plus, pinned agents, floating Agents + Search bar. */
.sidebar.hm-on .sidebar-head .brand, .sidebar.hm-on .sidebar-actions, .sidebar.hm-on > .sidebar-settings { display: none !important; }
.sidebar.hm-on .sidebar-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; }
.hm-top { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.hm-me, .hm-plus, .hm-agents { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text, #000) 10%, transparent); background: var(--bg, #fff); color: var(--text);
  box-shadow: 0 2px 10px rgba(0,0,0,.08); -webkit-tap-highlight-color: transparent; }
.hm-me { border: 0; background: transparent; box-shadow: none; }
.hm-me .avatar { width: 44px !important; height: 44px !important; font-size: 18px; }
.hm-me:active, .hm-plus:active, .hm-agents:active { transform: scale(.94); }
.hm-pins { display: flex; justify-content: center; gap: 28px; padding: 12px 16px 14px; flex-shrink: 0; }
.hm-pins.hm-hide { display: none; }
.hm-pin { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text); width: 96px; -webkit-tap-highlight-color: transparent; }
.hm-pin .avatar { width: 88px !important; height: 88px !important; font-size: 30px; }
.hm-pin-name { font-size: 13px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar.hm-on .conv-list { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
.hm-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; align-items: center; z-index: 6;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(to top, var(--bg, #fff) 55%, color-mix(in srgb, var(--bg, #fff) 0%, transparent)); }
.sidebar.hm-on { position: relative; }
.hm-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 24px; color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--text, #000) 10%, transparent); background: var(--bg, #fff); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.hm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; -webkit-appearance: none; }
.hm-search input::placeholder { color: var(--muted); }
html[data-theme="light"] .hm-plus, html[data-theme="light"] .hm-agents, html[data-theme="light"] .hm-search { background: #fff !important; }
.sidebar.hm-on .sidebar-head { position: relative !important; top: auto !important; left: auto !important; right: auto !important; flex-shrink: 0; background: transparent !important; }
.sidebar.hm-on .conv-list { padding-top: 4px !important; margin-top: 0 !important; }
.hm-pin .avatar, .hm-pin .avatar-img { filter: none !important; animation: none !important; }
.hm-pins.hm-hide { display: none !important; }

/* ===== (homeui6-1028) reference look: full-screen scroll, floating corner buttons, halo avatars, soft fades ===== */
.sidebar.hm-on { --hm-bg: #ffffff; --hm-fg: #0b0b0c; --hm-time: #b4b4ba; --hm-sub: #8e8e93; overflow: hidden; background: var(--hm-bg) !important; }
html:not([data-theme="light"]) .sidebar.hm-on { --hm-bg: #000000; --hm-fg: #f5f5f7; --hm-time: #6b6b70; --hm-sub: #8e8e93; }
html:not([data-theme="light"]) #sidebar.hm-on { background: #000 !important; }
html[data-theme="light"] #sidebar.hm-on { background: #fff !important; }
.sidebar.hm-on::before, .sidebar.hm-on::after { display: none !important; content: none !important; }
/* corner buttons float over the scroll */
.sidebar.hm-on .sidebar-head { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 8; padding: calc(env(safe-area-inset-top, 0px) + 54px) 16px 0 !important; pointer-events: none; background: transparent !important; }
.sidebar.hm-on .sidebar-head > * { pointer-events: auto; }
.hm-me, .hm-plus, .hm-agents { width: 50px; height: 50px; border: 0 !important; background: var(--hm-bg) !important; color: var(--hm-fg) !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.10) !important; }
.hm-me { padding: 3px !important; } .hm-me .avatar { width: 44px !important; height: 44px !important; }
html:not([data-theme="light"]) .hm-me, html:not([data-theme="light"]) .hm-plus, html:not([data-theme="light"]) .hm-agents { background: #1c1c1e !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.6) !important; }
/* soft top fade (no blur) */
.hm-fade-top { position: absolute; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top, 0px) + 120px); z-index: 7; pointer-events: none;
  background: linear-gradient(to bottom, var(--hm-bg) 0%, color-mix(in srgb, var(--hm-bg) 85%, transparent) 35%, color-mix(in srgb, var(--hm-bg) 0%, transparent) 100%); }
/* the list is the one full-screen scroller, edge to edge under the status bar */
.sidebar.hm-on .conv-list { position: absolute !important; inset: 0 !important; overflow-y: auto !important; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 110px) !important; margin: 0 !important; background: transparent !important; -webkit-overflow-scrolling: touch; }
/* big halo avatars row (scroll content) */
.sidebar.hm-on .hm-pins { display: flex; justify-content: center; gap: 46px; padding: calc(env(safe-area-inset-top, 0px) + 2px) 80px 18px !important; background: transparent !important; }
.sidebar.hm-on .hm-pins[hidden] { display: none !important; }
.hm-pin { width: 112px !important; gap: 10px !important; color: var(--hm-fg) !important; }
.hm-face { position: relative; width: 112px; height: 112px; display: block; }
.hm-face > .avatar, .hm-face > .avatar-img, .hm-face > * { position: absolute; inset: 0; width: 112px !important; height: 112px !important; border-radius: 50% !important; font-size: 40px !important; box-shadow: none !important; animation: none !important; }
.hm-face > .hm-glow { filter: blur(16px) saturate(1.3) !important; transform: scale(1.16); opacity: .75; }
.hm-face > :not(.hm-glow):not(.hm-star) { -webkit-mask-image: radial-gradient(circle, #000 62%, rgba(0,0,0,.55) 72%, transparent 76%); mask-image: radial-gradient(circle, #000 62%, rgba(0,0,0,.55) 72%, transparent 76%); filter: none !important; }
.hm-star { position: absolute !important; inset: auto !important; right: -2px !important; bottom: 4px !important; width: 34px !important; height: 34px !important; border-radius: 50%; display: grid !important; place-items: center; color: #fff; background: #e8a33d; box-shadow: 0 0 0 3px var(--hm-bg), 0 2px 6px rgba(0,0,0,.15) !important; z-index: 2; }
.hm-pin-name { font-size: 15px !important; font-weight: 400; max-width: 112px !important; }
/* rows: borderless, light weight, grey time */
.sidebar.hm-on .conv-item { padding: 12px 20px !important; gap: 16px !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.sidebar.hm-on .conv-title { font-size: 18px !important; font-weight: 400 !important; color: var(--hm-fg) !important; }
.sidebar.hm-on .conv-time { font-size: 14px !important; color: var(--hm-time) !important; font-weight: 400 !important; }
.sidebar.hm-on .conv-preview, .sidebar.hm-on .conv-last, .sidebar.hm-on .conv-sub { font-size: 16px !important; color: var(--hm-sub) !important; }
.sidebar.hm-on .conv-faces { transform: scale(1.18); transform-origin: left center; margin-right: 8px; }
/* bottom: floating buttons, list fades out behind them */
.hm-bar { background: linear-gradient(to top, var(--hm-bg) 0%, color-mix(in srgb, var(--hm-bg) 80%, transparent) 45%, color-mix(in srgb, var(--hm-bg) 0%, transparent) 100%) !important;
  padding: 36px 34px calc(env(safe-area-inset-bottom, 0px) + 22px) !important; gap: 14px !important; z-index: 8; }
.hm-search { height: 50px !important; border-radius: 25px !important; border: 0 !important; background: var(--hm-bg) !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.10) !important; padding: 0 18px !important; color: var(--hm-fg) !important; }
.hm-search input { font-size: 19px !important; } .hm-search input::placeholder { color: var(--hm-sub) !important; }
html:not([data-theme="light"]) .hm-search { background: #1c1c1e !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.6) !important; }
.sidebar.hm-on .hm-pins { gap: 34px !important; padding-left: 60px !important; padding-right: 60px !important; padding-top: calc(env(safe-area-inset-top, 0px) - 6px) !important; } /* (homeui6-1028) 2 big faces between the corner buttons */
/* (homeui6-1028) tune: lighter top fade, stronger halo */
.hm-fade-top { height: calc(env(safe-area-inset-top, 0px) + 64px) !important; background: linear-gradient(to bottom, color-mix(in srgb, var(--hm-bg) 92%, transparent) 0%, color-mix(in srgb, var(--hm-bg) 0%, transparent) 100%) !important; }
.hm-face > .hm-glow { filter: blur(18px) saturate(1.6) !important; transform: scale(1.22) translateY(4px); opacity: .9; }
/* (homeui6-1028) tune 2 */
.hm-agents { flex: none !important; width: 50px !important; min-width: 50px !important; height: 50px !important; }
.hm-face, .hm-face > * { width: 100px !important; height: 100px !important; }
.hm-pin { width: 100px !important; } .hm-pin-name { max-width: 100px !important; }
.sidebar.hm-on .hm-pins { gap: 52px !important; padding-bottom: 30px !important; padding-top: calc(env(safe-area-inset-top, 0px) - 10px) !important; }
.hm-face > .hm-star { width: 32px !important; height: 32px !important; right: -2px !important; bottom: 4px !important; left: auto !important; top: auto !important; } /* (homeui6-1028) */
.sidebar.hm-on .hm-bar { left: 0 !important; right: 0 !important; width: auto !important; box-sizing: border-box !important; padding-left: 32px !important; padding-right: 32px !important; } .hm-search { min-width: 0 !important; flex: 1 1 auto !important; } .sidebar.hm-on .hm-pins { padding-bottom: 40px !important; } /* (homeui6-1028) */

/* ===== (homeui7-1028) recording match ===== */
html, body { margin: 0 !important; padding: 0 !important; }
.sidebar.hm-on { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.sidebar.hm-on .conv-list { padding-top: 0 !important; }
/* big avatars: sharp, faint same-colour shadow */
.hm-face > .hm-glow { filter: blur(14px) saturate(1.1) !important; transform: scale(1.0) translateY(6px) !important; opacity: .22 !important; }
.hm-face > :not(.hm-glow):not(.hm-star) { -webkit-mask-image: none !important; mask-image: none !important; }
.hm-face > .hm-star { width: 24px !important; height: 24px !important; right: 2px !important; bottom: 4px !important; background: #f28c28 !important; box-shadow: 0 0 0 2px var(--hm-bg) !important; }
.hm-star svg { width: 13px; height: 13px; }
.hm-pin-name { font-size: 13px !important; font-weight: 500 !important; color: var(--hm-sub) !important; }
.sidebar.hm-on .hm-pins { transform-origin: 50% 40%; will-change: transform, opacity; padding-top: calc(env(safe-area-inset-top, 0px) + 6px) !important; padding-bottom: 24px !important; }
/* fixed top buttons ~44px; + white with thin grey border */
.hm-me, .hm-plus, .hm-agents { width: 44px !important; height: 44px !important; min-width: 44px !important; }
.hm-me { padding: 0 !important; box-shadow: none !important; background: transparent !important; } .hm-me .avatar { width: 44px !important; height: 44px !important; }
.hm-plus, .hm-agents { border: 1px solid #e3e3e6 !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }
html:not([data-theme="light"]) .hm-plus, html:not([data-theme="light"]) .hm-agents { border-color: #2c2c2e !important; }
.sidebar.hm-on .sidebar-head { padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important; }
.sidebar.hm-on .hm-top { position: relative; }
.hm-fade-top { height: calc(env(safe-area-inset-top, 0px) + 72px) !important; background: linear-gradient(to bottom, var(--hm-bg) 0%, color-mix(in srgb, var(--hm-bg) 70%, transparent) 55%, color-mix(in srgb, var(--hm-bg) 0%, transparent) 100%) !important; }
/* unread pill */
.hm-unread { position: absolute; left: 50%; top: 50%; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 17px;
  background: #1d8cf8; color: #fff; font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 6px 16px rgba(29,140,248,.35); cursor: pointer; white-space: nowrap;
  transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; transition: transform .22s ease-in, opacity .18s ease-in; }
.hm-unread.on { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; transition: transform .45s cubic-bezier(.34,1.8,.5,1), opacity .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .hm-unread, .hm-unread.on { transition: opacity .15s !important; } }
/* rows ~75px, avatar 50, separator from text edge */
.sidebar.hm-on .conv-item { position: relative; min-height: 75px; box-sizing: border-box; padding: 12px 20px !important; gap: 14px !important; align-items: center; }
.sidebar.hm-on .conv-faces { transform: none !important; width: 50px !important; height: 50px !important; margin-right: 0 !important; flex: none; }
.sidebar.hm-on .conv-faces .avatar.list-face:only-child { width: 50px !important; height: 50px !important; }
.sidebar.hm-on .conv-faces .avatar.list-face { width: 34px !important; height: 34px !important; }
.sidebar.hm-on .conv-item::after { content: ""; position: absolute; left: 84px; right: 0; bottom: 0; height: 1px; background: #ececee; }
html:not([data-theme="light"]) .sidebar.hm-on .conv-item::after { background: #1f1f22; }
.sidebar.hm-on .conv-title { font-size: 16px !important; font-weight: 500 !important; }
.sidebar.hm-on .conv-time { font-size: 13px !important; color: #8e8e93 !important; }
.sidebar.hm-on .conv-preview, .sidebar.hm-on .conv-last, .sidebar.hm-on .conv-sub { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.sidebar.hm-on .conv-dot { position: absolute !important; right: 20px; top: 50% !important; transform: translateY(-50%); width: 8px !important; height: 8px !important; border-radius: 50%; background: #1d8cf8 !important; margin: 0 !important; }
/* bottom */
.hm-search { box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; border: 0 !important; }
.hm-agents { box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }
html:not([data-theme="light"]) .hm-search, html:not([data-theme="light"]) .hm-agents { box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) !important; }
.sidebar.hm-on .conv-top, .sidebar.hm-on .conv-body, .sidebar.hm-on .conv-text { position: static !important; } .sidebar.hm-on .conv-item { margin: 0 !important; width: 100% !important; max-width: none !important; } .sidebar.hm-on .conv-row { margin: 0 !important; padding: 0 !important; } .sidebar.hm-on .conv-list > * { margin-left: 0 !important; margin-right: 0 !important; } /* (homeui7-1028) dot centred on the row; separator to the screen edge */

/* ===== (homeui7b-1028) measured from Jay's recording (390pt wide) ===== */
:root { --hm-sat: env(safe-area-inset-top, 0px); --hm-sab: env(safe-area-inset-bottom, 0px); }
.sidebar.hm-on .sidebar-head { padding: calc(var(--hm-sat) + 7px) 18px 0 !important; }
.hm-me, .hm-plus { width: 44px !important; height: 44px !important; }
.sidebar.hm-on .hm-pins { gap: 38px !important; padding: calc(var(--hm-sat) + 99px) 0 26px !important; transform-origin: 50% 30%; }
.hm-pin { width: 92px !important; gap: 8px !important; }
.hm-face, .hm-face > * { width: 92px !important; height: 92px !important; }
.hm-face > .hm-star { width: 24px !important; height: 24px !important; right: -2px !important; bottom: 2px !important; }
.hm-pin-name { font-size: 12px !important; font-weight: 500 !important; color: #3a3a3c !important; max-width: 110px !important; }
html:not([data-theme="light"]) .hm-pin-name { color: #c7c7cc !important; }
.hm-fade-top { height: calc(var(--hm-sat) + 78px) !important; background: linear-gradient(to bottom, var(--hm-bg) 0%, var(--hm-bg) 45%, color-mix(in srgb, var(--hm-bg) 0%, transparent) 100%) !important; }
/* rows: 83pt pitch, 48 avatar, no separators */
.sidebar.hm-on .conv-item { min-height: 83px !important; padding: 0 22px !important; gap: 14px !important; animation: none !important; }
.sidebar.hm-on .conv-item::after { display: none !important; }
.sidebar.hm-on .conv-faces { width: 48px !important; height: 48px !important; }
.sidebar.hm-on .conv-faces .avatar.list-face:only-child { width: 48px !important; height: 48px !important; }
.sidebar.hm-on .conv-faces .avatar.list-face { width: 32px !important; height: 32px !important; }
.sidebar.hm-on .conv-title { font-size: 15.5px !important; font-weight: 500 !important; }
.sidebar.hm-on .conv-time { font-size: 12.5px !important; color: #aeaeb2 !important; }
.sidebar.hm-on .conv-preview, .sidebar.hm-on .conv-item.unread .conv-preview, .sidebar.hm-on .conv-speaker { font-size: 14px !important; font-weight: 400 !important; color: #8e8e93 !important; }
.sidebar.hm-on .conv-item.unread .conv-title { font-weight: 500 !important; } .sidebar.hm-on .conv-item.unread .conv-time { color: #aeaeb2 !important; }
.sidebar.hm-on .conv-dot { right: 22px !important; width: 9px !important; height: 9px !important; background: #1f8bff !important; box-shadow: none !important; animation: none !important; }
/* pill: in the button row, centred */
.hm-unread { height: 30px !important; padding: 0 13px 0 15px !important; gap: 5px !important; font-size: 13px !important; font-weight: 500 !important; background: #1f8bff !important; box-shadow: 0 4px 12px rgba(31,139,255,.28) !important; }
/* bottom: 48pt Agents circle + 48pt pill, bottom edge 30pt above the home indicator area */
.sidebar.hm-on .hm-bar { padding: 70px 30px calc(var(--hm-sab) + 30px) 30px !important; gap: 14px !important;
  background: linear-gradient(to top, var(--hm-bg) 0%, color-mix(in srgb, var(--hm-bg) 85%, transparent) 40%, color-mix(in srgb, var(--hm-bg) 0%, transparent) 100%) !important; }
.hm-agents, .hm-search { height: 48px !important; } .hm-agents { width: 48px !important; min-width: 48px !important; }
.sidebar.hm-on .conv-list { padding-bottom: calc(var(--hm-sab) + 120px) !important; }

/* (homeui7b-1028) tune vs frames */
.sidebar.hm-on .hm-pins { padding-top: calc(var(--hm-sat) + 86px) !important; padding-bottom: 35px !important; }
.sidebar.hm-on .hm-bar { padding-bottom: max(8px, calc(var(--hm-sab) - 4px)) !important; }
.hm-face, .hm-face > :not(.hm-star) { width: 84px !important; height: 84px !important; } .hm-pin { width: 84px !important; } .sidebar.hm-on .hm-pins { gap: 46px !important; padding-top: calc(var(--hm-sat) + 90px) !important; padding-bottom: 39px !important; } .hm-unread { height: 34px !important; font-size: 14px !important; padding: 0 15px 0 17px !important; } /* (homeui7b-1028) tune 2 */

/* (avfix-1028) big avatar row: never blurred */
.sidebar.hm-on .hm-pins, .sidebar.hm-on .hm-pins * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.sidebar.hm-on .hm-pins, .hm-face > :not(.hm-glow), .hm-pin-name { filter: none !important; }
.sidebar.hm-on .hm-pins { position: relative; z-index: 0; } .sidebar.hm-on .conv-list > :not(.hm-pins) { position: relative; z-index: 1; }

/* (avsmooth-1028) scroll-driven values only: no transitions/animations/filters on the avatar row; GPU layer */
.sidebar.hm-on .hm-pins { transition: none !important; animation: none !important; filter: none !important; will-change: transform, opacity; backface-visibility: hidden; transform-origin: 50% 30%; contain: layout paint; }
.sidebar.hm-on .hm-pins *, .hm-face > * { transition: none !important; }
.sidebar.hm-on .conv-list { -webkit-overflow-scrolling: auto !important; overscroll-behavior-y: auto; }
/* (noX-1028) home: hide the drawer close X; the + sits exactly where the X was (centre x=355,y=29 at 390 wide) */
.sidebar.hm-on #drawer-close, .sidebar.hm-on .drawer-close { display: none !important; }
.sidebar.hm-on .sidebar-head { padding-right: 13px !important; }
/* (avsize-1028) big avatars one step smaller: 84 -> 70px; badge + name scaled */
.hm-face, .hm-face > :not(.hm-star) { width: 70px !important; height: 70px !important; }
.hm-pin { width: 76px !important; gap: 7px !important; }
.hm-face > .hm-star { width: 20px !important; height: 20px !important; right: -2px !important; bottom: 1px !important; }
.hm-star svg { width: 11px !important; height: 11px !important; }
.hm-pin-name { font-size: 11px !important; max-width: 92px !important; }
.sidebar.hm-on .hm-pins { gap: 52px !important; }
/* (avbtn-1028) top-left avatar + top-right + moved down 8px (both equally); fade untouched */
.sidebar.hm-on .sidebar-head { padding-top: calc(var(--hm-sat) + 15px) !important; }

/* (newbtn-1028) top-right: + then a "新建" text pill, same height and centre line */
.hm-right { display: inline-flex; align-items: center; gap: 8px; }
.hm-new { height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid #e3e3e6; background: #fff; color: #0b0b0c; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .5px; box-shadow: 0 2px 8px rgba(0,0,0,.06); cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.hm-new:active { transform: scale(.95); } .hm-new:disabled { opacity: .55; }
html:not([data-theme="light"]) .hm-new { background: #1c1c1e; color: #f5f5f7; border-color: #2c2c2e; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.6); }

/* (settings2-1028) Settings redesign: grey sheet, white rounded cards, icon + label + chevron rows */
#settings.s2 { --s2-sheet: #f2f2f5; --s2-card: #ffffff; --s2-line: #e4e4ea; --s2-sub: #7a7a82; --s2-red: #d1242f; background: var(--s2-sheet) !important; }
html[data-theme="dark"] #settings.s2 { --s2-sheet: #000000; --s2-card: #1c1c1e; --s2-line: #2e2e31; --s2-sub: #98989f; --s2-red: #ff6b5e; }
#settings.s2 .s2-head { display: grid !important; grid-template-columns: 40px 1fr 40px; align-items: center; background: var(--s2-sheet) !important; border: 0 !important; padding: 14px 16px 8px; }
#settings.s2 .s2-head h2 { grid-column: 2; text-align: center; font-size: 17px; font-weight: 600; }
#settings.s2 .s2-head .picker-close { grid-column: 3; justify-self: end; }
#settings.s2 .s2-back { grid-column: 1; grid-row: 1; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--s2-line); background: var(--s2-card); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; }
#settings.s2 .s2-back[hidden] { display: none; }
#settings.s2 .s2-body { padding: 6px 16px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.s2-page[hidden] { display: none !important; }
.s2-card { background: var(--s2-card); border-radius: 20px; margin: 0 0 16px; overflow: hidden; border: 0 !important; }
.s2-card.s2-pad { padding: 14px 16px; }
.s2-card.s2-pad h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--s2-sub); }
.s2-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; position: relative; box-sizing: border-box; }
.s2-row + .s2-row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--s2-line); }
.s2-row.s2-opt + .s2-row::before, .s2-card .s2-row:not(:has(.s2-ico)) + .s2-row::before { left: 16px; }
.s2-row:active:not(.s2-static) { background: var(--s2-line); }
.s2-static { cursor: default; }
.s2-ico { flex: none; color: var(--text); }
.s2-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s2-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2-sub { font-size: 13px; color: var(--s2-sub); line-height: 1.3; }
.s2-chev { flex: none; color: var(--s2-sub); }
.s2-count { flex: none; color: var(--s2-sub); font-size: 15px; }
.s2-check { flex: none; color: var(--text); font-weight: 600; visibility: hidden; }
.s2-opt[aria-checked="true"] .s2-check { visibility: visible; }
.s2-danger { justify-content: center; color: var(--s2-red) !important; font-weight: 500; }
.s2-danger .s2-label { color: var(--s2-red); }
.s2-h { margin: 6px 4px 8px; font-size: 13px; font-weight: 600; color: var(--s2-sub); }
.s2-note { margin: -6px 6px 16px; font-size: 13px; color: var(--s2-sub); }
.s2-version { text-align: center; font-size: 12px; color: var(--s2-sub); margin: 4px 0 8px; }
.s2-soon { background: var(--s2-card); border-radius: 20px; padding: 32px 20px; text-align: center; }
.s2-soon strong { font-size: 17px; } .s2-soon p { margin: 6px 0 0; color: var(--s2-sub); font-size: 14px; }
.s2-acct { padding: 8px 10px; } .s2-acct .me { width: 100%; }
.s2-agent .avatar { flex: none; }
.s2-agent .wake-dot { flex: none; }
.s2-empty { padding: 18px 16px; color: var(--s2-sub); font-size: 14px; }
#settings.s2 { height: min(780px, 94dvh); }
#settings.s2 .s2-body, html[data-theme="light"] #settings.s2 .s2-body { background: var(--s2-sheet) !important; flex: 1 1 auto; }
html[data-theme="light"] #settings.s2, html[data-theme="light"] #settings.s2 .picker-head { background: var(--s2-sheet) !important; }
#settings.s2 .s2-card { background: var(--s2-card) !important; }
#settings.s2 .s2-acct .me { background: transparent !important; }

/* (datactl-1028) Data controls page */
.s2-info p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--text); }
.s2-info a { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: underline; }
.s2-off { cursor: default; opacity: .55; }
.s2-danger.s2-off .s2-sub { color: var(--s2-sub); }

/* (devices-1028) Devices list */
.s2-dev-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.s2-badge { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--s2-line); color: var(--text); }
.s2-dev-out { flex: none; border: 0; background: transparent; color: var(--s2-red); font: inherit; font-size: 15px; font-weight: 500; padding: 8px 2px 8px 8px; cursor: pointer; }
.s2-dev-out:disabled { opacity: .5; }
#settings.s2 #signout[hidden] { display: none !important; }

/* (help-1028) Report an issue */
.s2-textarea { width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical; border: 1px solid var(--s2-line); border-radius: 14px; padding: 12px; font: inherit; font-size: 16px; background: var(--s2-sheet); color: var(--text); }
.s2-issue-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.s2-submit { border: 0; border-radius: 999px; padding: 9px 20px; font: inherit; font-weight: 600; font-size: 15px; background: var(--text); color: var(--s2-card); cursor: pointer; }
.s2-submit:disabled { opacity: .4; cursor: default; }
#s2-issue-msg { margin: 10px 0 0; } #s2-issue-msg.s2-ok { color: var(--text); font-weight: 600; }
.s2-issue-text { white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.s2-issue { align-items: flex-start; }

/* (rmnew-1028) + restored to its pre-homeui7 look (50px, borderless, soft shadow); avatar + + moved 10px lower and drawn above the top fade */
.sidebar.hm-on .sidebar-head { padding-top: calc(var(--hm-sat) + 25px) !important; }
.sidebar.hm-on .hm-top { position: relative; z-index: 9 !important; }
.hm-plus { width: 50px !important; height: 50px !important; min-width: 50px !important; border: 0 !important; background: var(--hm-bg) !important; color: var(--hm-fg) !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.10) !important; }
html:not([data-theme="light"]) .hm-plus { background: #1c1c1e !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.6) !important; }

/* (agentdetail-1028) Settings agent detail page */
.s2-ad-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 20px 16px !important; }
.s2-ad-av { border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; }
.s2-ad-name { font-size: 18px; font-weight: 600; margin-top: 4px; }

/* (unread-1028) Unread indicator back to the pre-homeui look (from styles.css.bak-sec-prod-1028: bluedot-1023 + unreadglow-1023 + 1022-preview2):
   whole row border pulses blue, 10px #0a84ff dot inline on the title line, bold title/preview/time. Sizes and layout unchanged. */
.sidebar.hm-on .conv-list .conv-item.unread { animation: atUnreadPulse 1.6s ease-in-out infinite !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1.5px rgba(10,132,255,.25) !important; }
.reduce-motion .sidebar.hm-on .conv-list .conv-item.unread { animation: none !important; box-shadow: inset 0 0 0 2px #0a84ff !important; }
.sidebar.hm-on .conv-dot { position: static !important; transform: none !important; flex: none !important; align-self: center !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #0a84ff !important; margin: 0 0 0 2px !important; }
.sidebar.hm-on .conv-item.unread .conv-title { font-weight: 750 !important; }
.sidebar.hm-on .conv-item.unread .conv-preview { color: var(--text) !important; font-weight: 600 !important; }
.sidebar.hm-on .conv-item.unread .conv-time { color: var(--text) !important; }


/* (unreadring-1028) Unread ring, no pulse: drawn on ::before, 10px in from the screen edges, 4px top/bottom, 14px radius (= .conv-row clip), 2px blue at 60% */
.sidebar.hm-on .conv-list .conv-item.unread { box-shadow: none !important; animation: none !important; }
.sidebar.hm-on .conv-list .conv-item.unread::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 10px; right: 10px; border: 2px solid rgba(10,132,255,.6); border-radius: 14px; pointer-events: none; box-sizing: border-box; }

/* (unreadorange-1028) Unread indicator colour: orange #FF9500 (ring at 60%, dot solid); geometry unchanged. Reduce motion: same steady ::before ring (no extra inset shadow). */
.sidebar.hm-on .conv-list .conv-item.unread::before { border-color: rgba(255,149,0,.6) !important; }
.sidebar.hm-on .conv-dot { background: #FF9500 !important; }
.reduce-motion .sidebar.hm-on .conv-list .conv-item.unread { box-shadow: none !important; }

/* (orangepulse-1028) Slow pulse on the ring layer only: 3s ease-in-out, opacity .3 -> 1; Reduce motion = steady ring */
@keyframes atOrangePulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.sidebar.hm-on .conv-list .conv-item.unread::before { border-color: #FF9500 !important; animation: atOrangePulse 3s ease-in-out infinite !important; }
.reduce-motion .sidebar.hm-on .conv-list .conv-item.unread::before { animation: none !important; opacity: 1; border-color: rgba(255,149,0,.6) !important; }
@media (prefers-reduced-motion: reduce) { .sidebar.hm-on .conv-list .conv-item.unread::before { animation: none !important; opacity: 1; border-color: rgba(255,149,0,.6) !important; } }

/* (swipecircle-1028) swipe-left actions: two separate 56px circles, vertically centred, 12px gap, 16px right margin; row background stays the page colour */
.conv-row .conv-swipe-del, .conv-row .conv-swipe-pin { position: absolute; top: 50%; bottom: auto; left: auto; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: #fff; z-index: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.conv-row .conv-swipe-del { right: 16px; background: #FF3B30; }
.conv-row .conv-swipe-pin { right: 84px; background: #C7C7CC; }
html:not([data-theme="light"]) .conv-row .conv-swipe-pin { background: #636366; }
.conv-row .conv-swipe-del, .conv-row .conv-swipe-pin { opacity: var(--rv, 0); transform: scale(calc(.5 + .5 * var(--rv, 0))); transition: transform .25s cubic-bezier(.3,1.3,.5,1), opacity .2s ease-out; will-change: transform, opacity; }
.conv-row .conv-item { will-change: transform; transition: transform .25s cubic-bezier(.3,1.15,.5,1) !important; }
.conv-row.swiping .conv-item, .conv-row.swiping .conv-swipe-del, .conv-row.swiping .conv-swipe-pin { transition: none !important; }
.conv-row.open .conv-swipe-del:active, .conv-row.open .conv-swipe-pin:active { transform: scale(.9); }
.conv-row .conv-swipe-pin { visibility: hidden; }
.conv-row.open .conv-swipe-del, .conv-row.swiping .conv-swipe-del, .conv-row.open .conv-swipe-pin, .conv-row.swiping .conv-swipe-pin { visibility: visible !important; opacity: var(--rv, 0) !important; width: 56px !important; height: 56px !important; padding: 0 !important; overflow: visible !important; }

/* (swipesmooth-1028) rows move with the CSS translate property (rb7-1025 forces transform:none on :active/:hover, which froze the row under the finger on iOS); own compositor layers; snap .28s iOS-like ease; unread ring/pulse never repaints the moving row */
.conv-row .conv-item { will-change: translate; backface-visibility: hidden; transition: translate .28s cubic-bezier(.2,.9,.25,1) !important; }
.conv-row.swiping .conv-item { transition: none !important; }
.conv-row .conv-swipe-del, .conv-row .conv-swipe-pin { transition: transform .28s cubic-bezier(.2,.9,.25,1), opacity .2s ease-out; }
.sidebar.hm-on .conv-list .conv-item.unread::before { will-change: opacity; }

/* (swiperef-1028) Grok-Bot reference: 48px circles fixed on the background (red 18px from the right, 14px gap, grey), each scales/fades in as uncovered;
   0.2s ease-out snap, no bounce; flat row (no rounded clip, no press highlight) */
.conv-row .conv-swipe-del, .conv-row .conv-swipe-pin { width: 48px !important; height: 48px !important; margin-top: -24px; transform: scale(calc(.3 + .7 * var(--rv, 0))); transition: transform .2s cubic-bezier(0,0,.2,1), opacity .2s cubic-bezier(0,0,.2,1) !important; }
.conv-row .conv-swipe-del { right: 18px; } .conv-row .conv-swipe-pin { right: 80px; }
.conv-row.swiping .conv-swipe-del, .conv-row.swiping .conv-swipe-pin { transition: none !important; }
.conv-row .conv-item { transition: translate .2s cubic-bezier(0,0,.2,1) !important; }
.conv-row.swiping .conv-item { transition: none !important; }
.sidebar .conv-list .conv-row, .sidebar.hm-on .conv-list .conv-row { border-radius: 0 !important; }
.conv-row.swiping .conv-item, .conv-row.open .conv-item, .conv-row.swiping .conv-item:active, .conv-row.open .conv-item:active { background-image: none !important; background-color: transparent !important; }
.conv-row.open .conv-swipe-del:active, .conv-row.open .conv-swipe-pin:active { transform: scale(.9); }

/* (swiperef2-1028) 48px also while open/swiping (beats the swipecircle 56px !important rule) */
.conv-row.open .conv-swipe-del, .conv-row.swiping .conv-swipe-del, .conv-row.open .conv-swipe-pin, .conv-row.swiping .conv-swipe-pin { width: 48px !important; height: 48px !important; }

/* (pin-1028) small orange star badge on a pinned group's avatar (like the home pinned agents) */
.conv-faces { position: relative; }
.conv-pin-star { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: #f28c28; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--hm-bg, #fff); z-index: 2; pointer-events: none; }
html:not([data-theme="light"]) .conv-pin-star { box-shadow: 0 0 0 2px var(--hm-bg, #000); }

.conv-faces-wrap { position: relative; flex: none; display: inline-flex; } /* (pin-1028) */
.conv-faces-wrap > .conv-pin-star { right: -3px; bottom: -3px; }

/* (stickyrow-1028) touch screens: no sticky :hover / leftover .active tint after going back; grey only while the finger is down */
@media (hover: none), (pointer: coarse) {
  .conv-list .conv-item:hover, .conv-list .conv-item.active, .conv-list .conv-row .conv-item.active { background: transparent !important; }
  html[data-theme="light"] .conv-list .conv-item:hover, html[data-theme="light"] .conv-list .conv-item.active, html[data-theme="light"] .conv-list .conv-row .conv-item.active { background: #ffffff !important; }
  .conv-list .conv-row:not(.swiping):not(.open) .conv-item:active { background: color-mix(in srgb, var(--text, #000) 6%, transparent) !important; }
}

/* (pintop-1028) pinned group in the big top row: its stacked avatar, scaled to the big face */
.hm-gface { display: grid !important; place-items: center; overflow: visible; background: transparent !important; }
.hm-gface > .conv-faces { position: relative; }
.sidebar.hm-on .hm-gface > .conv-faces { zoom: 1; width: 70px !important; height: 70px !important; margin: 0 !important; }
.sidebar.hm-on .hm-gface .conv-faces .avatar.list-face { width: 46px !important; height: 46px !important; font-size: 18px !important; box-shadow: 0 0 0 2px var(--hm-bg, #fff) !important; }
.sidebar.hm-on .hm-gface .conv-faces .avatar.list-face:only-child { width: 70px !important; height: 70px !important; font-size: 28px !important; box-shadow: none !important; }
.sidebar.hm-on .hm-gface .conv-faces.n3 .list-face:nth-child(1) { left: 12px; }
.hm-pin-group { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* (pinonly-1028) compact gap under the pinned row; with 0 pins the row is hidden and the list starts just under the top bar */
.sidebar.hm-on .hm-pins { padding-bottom: 14px !important; }
.sidebar.hm-on .conv-list:has(> .hm-pins[hidden]) { padding-top: calc(var(--hm-sat, 0px) + 80px) !important; }

/* (tight-1028) top row packed from the left with a compact gap (Jay "离太远了"), not spread across the width */
.sidebar.hm-on .hm-pins { justify-content: flex-start !important; gap: 14px !important; padding-left: 20px !important; padding-right: 20px !important; }
.sidebar.hm-on .hm-pins .hm-pin { width: 78px !important; flex: none !important; }
/* (tight-1028) stacked group face at 70px: smaller faces, neat layout, first face on top, star stays clear */
.sidebar.hm-on .hm-gface .conv-faces.n2 .avatar.list-face { width: 44px !important; height: 44px !important; font-size: 17px !important; }
.sidebar.hm-on .hm-gface .conv-faces.n2 .list-face:nth-child(1) { left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; z-index: 2; }
.sidebar.hm-on .hm-gface .conv-faces.n2 .list-face:nth-child(2) { right: 0 !important; bottom: 0 !important; left: auto !important; top: auto !important; z-index: 1; }
.sidebar.hm-on .hm-gface .conv-faces.n3 .avatar.list-face { width: 38px !important; height: 38px !important; font-size: 15px !important; }
.sidebar.hm-on .hm-gface .conv-faces.n3 .list-face:nth-child(1) { left: 16px !important; top: 0 !important; right: auto !important; bottom: auto !important; z-index: 3; }
.sidebar.hm-on .hm-gface .conv-faces.n3 .list-face:nth-child(2) { right: 0 !important; bottom: 0 !important; top: auto !important; left: auto !important; z-index: 2; }
.sidebar.hm-on .hm-gface .conv-faces.n3 .list-face:nth-child(3) { left: 0 !important; bottom: 0 !important; top: auto !important; right: auto !important; z-index: 1; } /* +N bottom-left so the star never covers it */
.sidebar.hm-on .hm-gface .conv-faces .list-more { font-size: 13px !important; }
.sidebar.hm-on .hm-pin-group .hm-face > .hm-star { z-index: 5; }

/* (center-1028) pinned tiles as one compact group centered (Jay "集中在中间一点") */
.sidebar.hm-on .hm-pins { justify-content: center !important; gap: 14px !important; padding-left: 20px !important; padding-right: 20px !important; }


/* ==== glass-test-1031: iOS-style glassmorphism (visual only, no layout changes) ==== */
.topbar::before { background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 100%); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.composer-pill { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.cm-sheet, .conv-menu, .picker-menu, .msg-actions, .create-card, .link-card {
  background: rgba(28,28,30,.55); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.msg.agent .bubble, .msg.person .bubble, .msg.mine .bubble { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.msg.mine .bubble { background: rgba(255,255,255,.16); }
.msg.person .bubble { background: rgba(255,255,255,.10); }
.circle-btn, .topbar .circle-btn, .hero-name, .composer-icon, .look-btn, .link-btn, .create-card-btn, .conv-menu-btn, .av-seg-btn, .cm-av-btn {
  background-color: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 14px rgba(0,0,0,.3);
}
.composer-icon { background-color: transparent; box-shadow: none; }
.topbar .circle-btn:hover, .circle-btn:hover { background-color: rgba(255,255,255,.2); }
/* ==== end glass-test-1031 ==== */

/* (settings5-1031) Legal links, in-app confirm dialog */
.s2 a.s2-row { color: inherit; text-decoration: none; display: flex; align-items: center; }
dialog.s2-ask { border: 0; padding: 0; background: transparent; max-width: min(340px, calc(100vw - 40px)); width: 100%; color: var(--text, CanvasText); }
dialog.s2-ask::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.s2-ask-box { margin: 0; padding: 20px 18px 14px; border-radius: 18px; background: var(--panel, Canvas); box-shadow: 0 12px 40px rgba(0,0,0,.25); border: 1px solid rgba(127,127,127,.18); font-size: 14.5px; line-height: 1.45; }
.s2-ask-box h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; text-align: center; }
.s2-ask-box p { margin: 6px 0; }
.s2-ask-list { margin: 6px 0; padding-left: 18px; }
.s2-ask-box input { width: 100%; box-sizing: border-box; margin: 8px 0 2px; padding: 10px 12px; font-size: 16px; border-radius: 10px; border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit; }
.s2-ask-err { color: #ff3b30; font-size: 13px; }
.s2-ask-btns { display: flex; gap: 10px; margin-top: 14px; }
.s2-ask-btns button { flex: 1; min-height: 44px; border-radius: 12px; border: 0; font-size: 16px; font-weight: 600; background: rgba(127,127,127,.16); color: inherit; }
.s2-ask-btns button.s2-ask-yes { background: #0a84ff; color: #fff; }
.s2-ask-btns button.s2-ask-yes.danger { background: #ff3b30; }
.s2-ask-btns button:disabled { opacity: .5; }