/* On Easy app — home grid of bots + per-bot thread, on top of member.css tokens.
   Phone (<700px): one-pane push shell, full bleed — never a centered 390 postage stamp.
   Tablet (700–899): same push, still full width. Laptop (>= 900px): sidebar + main thread.
   Wide (>= 1200px): optional lesson/context third pane when it is already open. */
:root {
  --oe-left: clamp(17.5rem, 24vw, 22rem);
  --oe-right: clamp(18rem, 22vw, 24rem);
  --oe-sat: env(safe-area-inset-top, 0px);
  --oe-sab: env(safe-area-inset-bottom, 0px);
  --oe-sal: env(safe-area-inset-left, 0px);
  --oe-sar: env(safe-area-inset-right, 0px);
  --oe-thread-top-h: calc(3.75rem + var(--oe-sat));
  --oe-frost: rgba(14, 14, 18, 0.62);
  --oe-frost-line: rgba(255, 255, 255, 0.14);
  --oe-meta: #dddde8;
}

html { background: #000; touch-action: pan-x pan-y; overflow-x: hidden; max-width: 100%; }
body.oe-app { background: #000; min-height: 100vh; min-height: 100dvh; margin: 0; overflow: hidden; overflow-x: hidden; height: 100vh; height: 100dvh; touch-action: pan-x pan-y; max-width: 100%; }
body.oe-app:before { display: none; }
.oe-app [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oe-hint { color: var(--oe-meta, #c4c4d0); font-size: 0.88rem; line-height: 1.45; margin: 0; }
.oe-row { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; margin: 0.35rem 0; }
.btn.oe-small { min-height: 2.75rem; padding: 0.35rem 0.85rem; font-size: 0.86rem; } /* 44px tap floor; same type, taller hit area */

/* Unsigned: Sign in / Create account only. Never flash chats, composer, or helpers. */
html:not(.oe-has-seat) .oe-shell,
html:not(.oe-has-seat) #account-pop,
html:not(.oe-has-seat) #market,
html:not(.oe-has-seat) #home-site,
html:not(.oe-has-seat) #create-helper,
html:not(.oe-has-seat) #settings,
body[data-auth="out"] .oe-shell { display: none !important; }
#oe-auth-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(1.25rem + var(--oe-sat)) 1rem calc(1.25rem + var(--oe-sab));
  box-sizing: border-box;
}
html.oe-has-seat #oe-auth-gate,
body[data-auth="in"] #oe-auth-gate { display: none !important; }
.oe-auth-card { width: min(26rem, 100%); }
.oe-auth-actions { display: grid; gap: 0.55rem; width: 100%; margin-top: 0.35rem; }
.oe-auth-actions input {
  width: 100%; font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--pill); padding: 0.7rem 1rem; font-size: 1rem;
  box-sizing: border-box;
}
.oe-auth-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.oe-auth-row .btn { flex: 1 1 8rem; }
.oe-auth-or { margin: 0.15rem 0 0; text-align: center; color: var(--oe-meta, #c4c4d0); font-size: 0.82rem; }

.oe-shell { height: 100%; width: 100%; max-width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr; padding-left: var(--oe-sal); padding-right: var(--oe-sar); box-sizing: border-box; }
.oe-home, .oe-thread { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.oe-thread { position: relative; }

/* One tap = action. pan-x/pan-y on the page kills pinch + double-tap zoom; buttons stay tap-only. */
.oe-app button,
.oe-app [role="button"] {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* icon buttons */
.oe-icon-btn {
  width: 2.75rem; height: 2.75rem; /* 44px tap floor; glyph stays 1.25rem */ border-radius: 0.72rem; border: 1px solid var(--rule); background: var(--panel);
  color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; font: inherit; font-size: 1.2rem; padding: 0;
  touch-action: manipulation;
}
.oe-icon-btn svg { width: 1.25rem; height: 1.25rem; }
.oe-icon-btn:hover { border-color: #f4f4f748; background: #1c1c22; }
.oe-icon-btn:active,
.oe-icon-btn[aria-pressed="true"] { border-color: var(--rim-hot); color: #fff; background: #221e30; box-shadow: 0 0 18px #8b7cff44; }

/* ---------------------------------------------------------------- home (home.js draws the header, grid and list; this file only places it) */
.oe-home-root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: var(--oe-sat); }
.oe-home-root .oeh-scroll { padding-bottom: calc(0.5rem + var(--oe-sab)); }
.oe-hud-line:empty,
.oe-hud-line[hidden] { display: none !important; }
#mac-inbox-hint[hidden] { display: none !important; }
.oe-settings-lesson { margin: 0.35rem 1rem 0.7rem; }
.oe-settings-lesson[hidden] { display: none !important; }

.oe-account-pop {
  position: fixed;
  z-index: 80;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 16px));
  padding: 0.45rem;
  border-radius: 0.85rem;
  border: 1px solid var(--rule, #f4f4f722);
  background: var(--panel, #131319);
  box-shadow: 0 12px 40px #0008;
  display: grid;
  gap: 0.2rem;
}
.oe-account-pop[hidden] { display: none !important; }
.oe-account-pop-email {
  margin: 0.2rem 0.55rem 0.35rem;
  font-size: 0.82rem;
  color: var(--dim, #9a9aa8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oe-account-pop button {
  min-height: 44px;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--ink, #f4f4f7);
  font: inherit;
  text-align: left;
  padding: 0 0.7rem;
  cursor: pointer;
}
.oe-account-pop button:hover, .oe-account-pop button:focus-visible { background: #3a3a3c; }

.oe-ident-preview { display: flex; justify-content: center; padding: 0.4rem 0 0.8rem; }
.oe-ident-swatches, .oe-ident-marks {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  padding: 0 0.2rem 0.8rem;
}
.oe-ident-swatches button, .oe-ident-marks button {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 999px; border: 2px solid transparent;
  padding: 0; cursor: pointer; background: #2a2a2e;
}
.oe-ident-swatches button[aria-pressed="true"],
.oe-ident-marks button[aria-pressed="true"] { border-color: #f4f4f7; }
#chat-identity-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: #08080bcc;
  z-index: 198;
}
#chat-identity-scrim:not([hidden]) { display: block; }
#chat-identity[open],
#chat-identity.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(92dvh, 42rem);
  border-radius: var(--radius);
  z-index: 200;
  background: var(--panel, #131319);
}
#chat-identity:not([open]):not(.is-open) { display: none !important; }
#chat-identity-name { width: 100%; }
.oe-top { display: flex; align-items: center; gap: 0.5rem; padding: calc(0.6rem + var(--oe-sat)) 1rem 0.6rem; flex: none; }
.oe-top-spacer { flex: 1; }
.oe-avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--rim); cursor: pointer; padding: 0;
  background: linear-gradient(180deg, #2a2440, #17131f); color: #f3f0ff; font: inherit; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
}
.oe-search { padding: 0 1rem 0.5rem; flex: none; }
.oe-search input {
  width: 100%; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--pill); padding: 0.55rem 1rem; font-size: 0.95rem;
}
.oe-install { display: flex; align-items: center; gap: 0.5rem; margin: 0 1rem 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--rim); border-radius: 0.9rem; background: var(--glass); font-size: 0.86rem; flex: none; }
.oe-install span { flex: 1; min-width: 0; }
.oe-install svg { width: 1rem; height: 1rem; vertical-align: -0.2em; }
.oe-home-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.oe-account-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; max-width: 58%;
  padding: 0.25rem 0.85rem 0.25rem 0.25rem; border-radius: var(--pill);
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
/* Phone: account is the header disc. Never bottom-left (Grok Bot phone lock). */
@media (max-width: 899px) {
  .oe-account-btn { display: none !important; }
}
.oe-account-btn .oe-face { width: 2rem; height: 2rem; flex: none; }
.oe-account-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-home-foot-right { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.oe-dismiss { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; margin: -0.35rem -0.35rem -0.35rem 0; } /* 44px hit area, visually the same small × */
/* home-site.css loads after this file and sets 2.5rem; the element selector wins on specificity */
button.oe-home-site-btn { min-height: 2.75rem; }

.oe-home-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.oe-msg.is-error .oe-retry { display: block; margin-top: 0.5rem; }
.oe-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
/* the face, from the kit (projects/oneasy/brand/easy-face.svg.json): an open ring in the bot's colour and one line
   resting low inside it (app.js face() draws the SVG). data-state = what is happening, never mood:
   listening / thinking / done / quiet / needs_you; unread is the ring opening at one o'clock, never a dot. */
.oe-face { width: 4.5rem; height: 4.5rem; display: inline-flex; flex: none; transition: transform 0.15s ease; color: var(--face, #8b7cff); }
.oe-face.has-photo { position: relative; border-radius: 999px; overflow: hidden; }
.oe-face.has-photo svg { display: none; }
.oe-face-photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.oe-face svg { width: 100%; height: 100%; display: block; overflow: visible; }
.oe-face .oe-ring { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; transform-box: view-box; transform-origin: 50px 47px; }
.oe-face .oe-line { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.oe-face-sm { width: 2.4rem; height: 2.4rem; }
.oe-face-xs { width: 2.1rem; height: 2.1rem; }
.oe-face-xl { width: 4.75rem; height: 4.75rem; }
.oe-face.is-new .oe-ring { stroke-dasharray: 6 7; } /* dashed until you name it */
.oe-face[data-state="needs_you"] .oe-ring { stroke-dasharray: 150 25.9; transform: rotate(-34deg); }
.oe-face[data-state="thinking"] .oe-line { stroke-dasharray: 10 22; }
.oe-face[data-state="done"] .oe-f { transform: translateY(-3px); } /* the ring lifts three units and stays */
.oe-face[data-state="quiet"] { opacity: 0.45; }

/* ---------------------------------------------------------------- thread */
/* Chat chrome lock (Grok Bot): Back | name pill | Computer. Frosted overlay so
   messages scroll underneath — never solid black. Files/Tasks live in Settings. */
.oe-thread-top {
  display: grid;
  /* Back | name pill (hug, max 40%) | spacer that pins Computer to the right.
     The pill must not sit in a 1fr track — that was the full-bleed centered bar. */
  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  padding: calc(0.5rem + var(--oe-sat)) max(0.65rem, var(--oe-sar)) 0.5rem max(0.65rem, var(--oe-sal));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 24;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  container-type: inline-size;
  background: var(--oe-frost, rgba(14, 14, 18, 0.62));
  border-bottom: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  backdrop-filter: blur(28px) saturate(1.55);
  pointer-events: auto;
}
.oe-thread-top > :not(#btn-back):not(#btn-thread-banner):not(#thread-computer) {
  display: none !important;
}
#oe-thread-top #btn-back { grid-column: 1; }
#oe-thread-top #thread-computer { grid-column: 3; justify-self: end; }
.oe-back {
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
}
.oe-back:hover, .oe-back:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--oe-frost-line, rgba(255, 255, 255, 0.14));
}
.oe-back:active { background: rgba(139, 124, 255, 0.22); border-color: #8b7cff88; }
.oe-back svg { width: 1.4rem; height: 1.4rem; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .oe-thread-top { background: rgba(12, 12, 16, 0.92); }
}
.oe-thread-banner {
  grid-column: 2;
  justify-self: start;
  min-width: 0;
  width: auto;
  max-width: 40%;
  max-width: 40cqi;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  margin: 0;
  padding: 0.2rem 0.85rem 0.2rem 0.35rem;
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  border-radius: 999px;
  background: #1c1c1e;
  color: inherit;
  font: inherit;
  text-align: left;
  min-height: 2.75rem;
  cursor: pointer;
  touch-action: manipulation;
  box-sizing: border-box;
  overflow: hidden;
}
.oe-thread-banner:hover, .oe-thread-banner:focus-visible {
  background: #252528;
  border-color: rgba(255, 255, 255, 0.22);
}
.oe-thread-banner:active { border-color: #8b7cffaa; background: #221e30; }
.oe-thread-banner:focus-visible { outline: 2px solid var(--focus, #8b7cff); outline-offset: 2px; }
.oe-thread-banner .oe-face { width: 22px; height: 22px; flex: none; }
.oe-thread-title { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.oe-thread-title h1 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-thread-title p { display: none; } /* name pill is mark + name; purpose lives on the overview */
.oe-thread-title p:empty { display: none; }
.oe-notice { margin: 0.75rem 1rem 0; padding: 0.9rem 1rem; flex: none; }
.oe-thread > .oe-notice,
.oe-thread > .oe-hud,
.oe-thread > .oe-mail-strip,
.oe-thread > .oe-interfaces-line {
  margin-top: calc(var(--oe-thread-top-h) + 0.4rem);
}
/* Pinned thread banners: no accent-purple rim (member.css .glass uses --rim). */
.oe-thread .oe-notice.glass {
  border: 1px solid var(--rule);
  box-shadow: none;
}
.oe-notice p { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.5; }
.oe-notice .kicker { margin: 0 0 0.3rem; }
.oe-mail-strip { margin: 0.6rem 1rem 0; padding: 0.7rem 0.85rem; flex: none; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); }
.oe-mail-strip .kicker { margin: 0 0 0.25rem; }
.oe-mail-strip .oe-hint { margin: 0 0 0.4rem; }
.oe-mail-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.oe-mail-strip li { font-size: 0.88rem; line-height: 1.35; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); }
.oe-mail-strip li:last-child { padding-bottom: 0; border-bottom: 0; }
.oe-mail-row { display: grid; gap: 0.1rem; width: 100%; margin: 0; padding: 0.35rem 0.2rem; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.oe-mail-row:hover { background: #ffffff0a; }
.oe-mail-row:focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }
.oe-mail-from { color: var(--text, inherit); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-mail-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-mail-snip { color: var(--dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.oe-messages { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.55rem; padding: calc(var(--oe-thread-top-h) + 0.35rem) 1rem 0.85rem; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.oe-thread-earlier {
  align-self: center;
  margin: 0.15rem auto 0.35rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.oe-thread-later {
  align-self: center;
  margin: 0.35rem auto 0.15rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.oe-msg-stack { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; min-width: 0; }
.oe-msg-stack .oe-msg { max-width: 100%; }
.oe-msg { max-width: 88%; border-radius: 1.1rem; padding: 0.6rem 0.9rem; font-size: 0.97rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.oe-msg.is-user { align-self: flex-end; background: #7c5cff26; border: 1px solid #7c5cff55; }
.oe-msg.is-model { align-self: flex-start; background: var(--panel); border: 1px solid var(--rule); }
.oe-msg.is-ask { border-color: var(--rim-hot); }
.oe-msg.is-error { align-self: stretch; border: 1px solid #ff4b8a55; background: #ff4b8a12; color: #ffd0da; }
.oe-msg.is-streaming:after { content: "▍"; color: var(--accent); }
.oe-msg.is-waiting {
  display: inline-flex; align-items: center; gap: 0.55rem;
  max-width: max-content; width: auto;
  background: var(--panel-2);
  border: 1px solid #f4f4f728;
  border-radius: 999px; padding: 0.48rem 0.95rem 0.48rem 0.72rem;
  font-size: 0.92rem; line-height: 1.2; color: var(--dim);
  white-space: nowrap;
}
.oe-msg.is-waiting:after { content: none; }
.oe-wait-dots { display: inline-flex; align-items: center; gap: 0.22rem; }
.oe-wait-dots i {
  width: 0.38rem; height: 0.38rem; border-radius: 50%;
  background: currentColor; opacity: 0.28;
}
.oe-wait-line { color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: no-preference) {
  .oe-msg.is-streaming:after { animation: oe-breath 1.8s ease-in-out infinite; }
  @keyframes oe-breath { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
  .oe-wait-dots i { animation: oe-wait-dot 1.7s ease-in-out infinite; }
  .oe-wait-dots i:nth-child(2) { animation-delay: 0.28s; }
  @keyframes oe-wait-dot {
    0%, 100% { opacity: 0.2; transform: scale(0.84); }
    50% { opacity: 0.92; transform: scale(1); }
  }
  .oe-mic[aria-pressed="true"] { animation: oe-pulse 1.2s ease-in-out infinite; }
  @keyframes oe-pulse { 50% { box-shadow: 0 0 0 6px #ff4b8a33; } }
  /* Idle breathe/look/blink lives on .oe-life (living-mark.css). Bare faces still lift. */
  .oe-face:not(.oe-life):not(.oe-life--static) .oe-f { animation: oe-lift 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.9s); }
  @keyframes oe-lift { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-2.5px); } }
  .oe-face[data-state="thinking"] .oe-line { animation: oe-think 1.4s linear infinite; }
  @keyframes oe-think { to { stroke-dashoffset: -32; } }
  .oe-face[data-state="done"] .oe-f { animation: oe-done 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  @keyframes oe-done { 0% { transform: translateY(0); } 55% { transform: translateY(-4.5px); } 100% { transform: translateY(-3px); } }
}
.oe-mic[aria-pressed="true"] { border-color: #ff4b8a; color: #ffb0c0; }

/* Jump-to-latest: dark circle above the composer, bottom-right. Fade via .is-on — never [hidden]
   (that rule is display:none !important and would kill the fade). */
.oe-compose-stack { position: relative; flex: none; display: flex; flex-direction: column; }
.oe-jump-bottom {
  position: absolute;
  right: max(0.75rem, var(--oe-sar));
  bottom: calc(100% + 0.55rem);
  z-index: 6;
  width: 40px; height: 40px; padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: #2c2c2e; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.oe-jump-bottom.is-on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.oe-jump-bottom svg { width: 20px; height: 20px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .oe-jump-bottom { transition: none; transform: none; }
}

.oe-msg { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }
.oe-msg.is-selecting { -webkit-user-select: text; user-select: text; caret-color: var(--accent, #8b7cff); }
.oe-msg-text { -webkit-user-select: text; user-select: text; }
/* Markdown in bubbles. Same type on phone and desktop.
   Layout: phone (<900px) uses the thread width; desktop (>=900px) stays in the bubble column. */
.oe-msg-text .oe-md-p { margin: 0 0 0.45rem; }
.oe-msg-text .oe-md-p:last-child { margin-bottom: 0; }
.oe-msg-text .oe-md-list { margin: 0.2rem 0 0.45rem; padding-left: 1.2rem; }
.oe-msg-text .oe-md-link { color: var(--accent, #8b7cff); }
.oe-msg-text .oe-md-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.05em 0.28em;
  border-radius: 0.25rem;
}
.oe-msg-text .oe-md-pre {
  margin: 0.35rem 0;
  padding: 0.55rem 0.7rem;
  overflow-x: auto;
  background: #12121a;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.oe-msg-text .oe-md-pre .oe-md-code { background: none; padding: 0; }
.oe-lex-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin: 0.35rem 0 0.6rem; }
.oe-lex-cta-hint { margin: 0; font-size: 0.82rem; color: var(--dim); max-width: 36rem; }
.oe-msg.is-ref-hit { outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }
.oe-ref-chip {
  display: inline-flex; margin: 0.35rem 0.35rem 0 0; padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule); border-radius: 999px; background: transparent;
  color: inherit; font: inherit; font-size: 0.82rem; cursor: pointer;
}
/* In-chat cards. Same mechanics on phone and desktop.
   Layout: phone (<900px) cards use the full thread width.
   Desktop (>=900px) caps them at 34rem, the same column as bubbles. */
.oe-widget { align-self: flex-start; max-width: 100%; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.75rem 0.9rem; }
.oe-widget-prompt, .oe-widget-done, .oe-cloud-status { margin: 0; }
.oe-choice-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.oe-secret-form { display: flex; gap: 0.4rem; align-items: center; }
.oe-secret-input {
  flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: 10px;
  border: 1px solid var(--rule); background: transparent; color: inherit; font: inherit;
  -webkit-user-select: text; user-select: text;
}
@media (min-width: 900px) {
  .oe-widget { max-width: 34rem; }
  .oe-lex-cta, .oe-msg-text .oe-md-pre { max-width: 34rem; }
}
.oe-msg.is-waiting,
.oe-msg button,
.oe-card,
.oep-card,
.oe-action,
[data-oep-action] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.oe-msg-react {
  display: inline-flex; margin: 0.35rem 0 0; padding: 0.1rem 0.4rem;
  border-radius: 999px; background: #2c2c2e; font-size: 0.95rem; line-height: 1.2;
}
.oe-reply-chip {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0 0.35rem 0.4rem; padding: 0.4rem 0.55rem 0.4rem 0.75rem;
  border-radius: 0.85rem; background: #1c1c1e; color: var(--ink);
  font-size: 0.86rem; line-height: 1.3;
}
.oe-reply-chip[hidden] { display: none; }
.oe-reply-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reply-chip-x {
  width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--dim); font: inherit; cursor: pointer;
}

.oe-ms { position: fixed; inset: 0; z-index: 95; }
.oe-ms-dim {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0;
  background: #00000088; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.oe-messages .oe-msg.is-picked { visibility: hidden; }
.oe-ms-lift {
  position: absolute; left: 16px; right: 16px; bottom: 52%;
  z-index: 2; pointer-events: none;
}
.oe-ms.is-high .oe-ms-lift {
  top: calc(12px + var(--oe-sat));
  bottom: auto;
  opacity: 0.55;
}
.oe-ms-lift .oe-msg { max-width: 88%; visibility: visible; }
.oe-ms-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  max-height: 92dvh; overflow: auto;
  background: #0e0e10; border-radius: 18px 18px 0 0;
  padding: 6px 12px calc(18px + var(--oe-sab));
  /* Rest shows Copy + primary row; openMsgSheet animates from 100%. */
  transform: translate3d(0, var(--ms-y, 22%), 0);
  will-change: transform;
}
.oe-ms.is-high .oe-ms-sheet { --ms-y: 0%; }
.oe-ms.is-enter .oe-ms-sheet { --ms-y: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .oe-ms-sheet { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
}
.oe-ms.is-drag .oe-ms-sheet, body.oe-ms-drag .oe-ms-sheet { transition: none; }
.oe-ms-handle {
  width: 36px; height: 5px; border-radius: 99px; background: #3a3a3c;
  margin: 6px auto 12px;
}
.oe-ms-react {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 6px;
  padding: 2px 4px 16px; justify-items: center;
}
.oe-ms-emoji {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: #2c2c2e; color: #fff; font-size: 1.25rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
}
.oe-ms-emoji-add { font-weight: 500; font-size: 1.4rem; color: #c7c7cc; }
.oe-ms-group {
  background: #1c1c1e; border-radius: 14px; margin: 0 0 10px; overflow: hidden;
}
.oe-ms-group button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 16px;
  border: 0; border-top: 1px solid #2a2a2c;
  background: transparent; color: #fff; font: inherit; font-size: 17px; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.oe-ms-group button:first-child { border-top: 0; }
.oe-ms-group svg { width: 22px; height: 22px; flex: none; color: #e5e5ea; }
@media (prefers-reduced-motion: reduce) {
  .oe-ms-dim { backdrop-filter: none; -webkit-backdrop-filter: none; background: #000000b3; }
}

/* Bottom dock: solid bed under the pill. The fade sits ABOVE the dock so a
   mid-box gradient stop cannot paint a hairline through the composer. */
.oe-compose {
  position: relative;
  flex: none;
  margin: 0;
  padding: 1.15rem 0.65rem max(0.45rem, var(--oe-sab));
  border-top: 0;
  background: #000;
  box-shadow: 0 calc(var(--oe-sab) + 2px) 0 0 #000;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.oe-compose:before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 1.15rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
}
.oe-attach-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.45rem 0.15rem; }
.oe-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; padding: 0.2rem 0.35rem 0.2rem 0.65rem; font-size: 0.78rem; color: var(--ink); max-width: 100%; }
.oe-chip-media {
  padding: 0.18rem 0.28rem 0.18rem 0.18rem;
  border-radius: 1rem;
  max-width: 11.5rem;
}
.oe-chip-thumb {
  width: 2.35rem; height: 2.35rem; flex: none;
  border-radius: 0.72rem;
  object-fit: cover;
  background: var(--panel-2, #1a1a22);
  display: block;
}
.oe-chip-glyph {
  width: 2.35rem; height: 2.35rem; flex: none;
  border-radius: 0.72rem;
  background: var(--panel-2, #1a1a22);
  color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.oe-chip-name {
  min-width: 0; max-width: 6.4rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oe-chip-x { width: 1.35rem; height: 1.35rem; border: 0; border-radius: 50%; background: transparent; color: var(--dim); cursor: pointer; font: inherit; line-height: 1; padding: 0; }
.oe-chip-media .oe-chip-x { width: 1.55rem; height: 1.55rem; background: #00000066; color: #fff; }

/* Thread media: 1 single · 2 stack · 3+ fan/counter → grid. Never a black void. */
.oe-msg.has-media { padding: 0.4rem; max-width: min(16.5rem, 88%); }
.oe-msg.has-media .oe-msg-text { padding: 0.35rem 0.5rem 0.25rem; }
.oe-media {
  position: relative;
  width: 13.4rem;
  max-width: 100%;
  min-height: 0;
}
.oe-media[data-layout] { min-height: 8.6rem; }
.oe-media[data-layout="single"] { min-height: 0; }
.oe-media[data-layout="stack"],
.oe-media[data-layout="fan"] {
  height: 11.6rem;
}
.oe-media[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
  width: 14.2rem;
  min-height: 0;
  height: auto;
}
.oe-media-tile {
  position: relative;
  overflow: hidden;
  border-radius: 0.95rem;
  background: #2a2a34;
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.18));
  box-shadow: 0 10px 22px #00000080;
  color: #e5e5ea;
  min-height: 7.4rem;
  cursor: pointer;
}
.oe-media[data-layout="single"] .oe-media-tile { min-height: 9.2rem; }
.oe-media[data-layout="stack"] .oe-media-tile,
.oe-media[data-layout="fan"] .oe-media-tile {
  position: absolute;
  width: 8.6rem; height: 10.2rem;
  left: 50%; top: 50%;
  margin: -5.1rem 0 0 -4.3rem;
}
.oe-media[data-layout="stack"] .oe-media-tile:nth-child(1) {
  transform: rotate(-12deg) translate(-34%, 12%);
  z-index: 1;
}
.oe-media[data-layout="stack"] .oe-media-tile:nth-child(2) {
  transform: rotate(10deg) translate(30%, -8%);
  z-index: 2;
}
.oe-media[data-layout="fan"] .oe-media-tile:nth-child(1) {
  transform: rotate(-18deg) translate(-46%, 14%);
  z-index: 1;
}
.oe-media[data-layout="fan"] .oe-media-tile:nth-child(2) {
  transform: rotate(-2deg) translate(-4%, 2%);
  z-index: 2;
}
.oe-media[data-layout="fan"] .oe-media-tile:nth-child(3) {
  transform: rotate(16deg) translate(42%, -10%);
  z-index: 3;
}
.oe-media[data-layout="fan"] .oe-media-tile:nth-child(n+4) { display: none; }
.oe-media[data-layout="grid"] .oe-media-tile {
  min-height: 6.4rem;
  aspect-ratio: 1;
}
.oe-media-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}
.oe-media-tile.is-loading,
.oe-media-tile.is-failed,
.oe-media-tile.is-audio {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}
.oe-media-tile.is-loading {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)),
    #2a2a34;
}
.oe-media-tile.is-failed { color: #ffd0d8; }
.oe-media-count {
  position: absolute; right: 0.4rem; bottom: 0.4rem;
  min-width: 1.7rem; height: 1.7rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #000000b8; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
  z-index: 4;
}
.oe-media-audio {
  width: 100%;
  max-width: 13.4rem;
  margin: 0.15rem 0 0;
}

/* Full-screen / clear preview before send. Frost bar — not Computer chrome. */
.oe-att-preview {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: #14141cee;
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  color: var(--ink);
}
.oe-att-preview[hidden] { display: none !important; }
.oe-att-preview-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: calc(0.55rem + var(--oe-sat)) 0.75rem 0.55rem;
  background: var(--oe-frost, rgba(14, 14, 18, 0.62));
  border-bottom: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
}
.oe-att-preview-title {
  margin: 0; text-align: center;
  font-size: 0.95rem; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oe-att-preview-act {
  min-height: 2.75rem; padding: 0 0.85rem;
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  border-radius: 1.4rem;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 0.86rem; font-weight: 600;
  cursor: pointer;
}
.oe-att-preview-act.is-clear { color: #ffd0d8; border-color: #ffb0c055; }
.oe-att-preview-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 0.85rem;
}
.oe-att-preview-frame {
  display: flex; align-items: center; justify-content: center;
  min-width: min(18rem, 88vw);
  min-height: min(18rem, 52dvh);
  padding: 0.7rem;
  border-radius: 1.2rem;
  background: #2a2a34;
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.18));
  box-shadow: 0 18px 48px #00000073;
}
.oe-att-preview-stage img,
.oe-att-preview-stage audio {
  max-width: min(100%, 40rem);
  max-height: calc(100dvh - 11rem);
  border-radius: 0.85rem;
}
.oe-att-preview-stage img {
  width: auto; height: auto;
  object-fit: contain;
  background: #2a2a34;
}
.oe-att-preview-empty,
.oe-att-preview-fail {
  max-width: 18rem;
  padding: 1.4rem 1.1rem;
  border-radius: 1.1rem;
  background: var(--oe-frost, rgba(14, 14, 18, 0.62));
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  text-align: center;
  font-weight: 600;
}
.oe-att-preview-fail { color: #ffd0d8; }
.oe-att-preview-hint {
  margin: 0 0.85rem calc(0.7rem + var(--oe-sab));
  text-align: center;
  color: var(--dim);
  font-size: 0.82rem;
}
.oe-compose-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.oe-compose-bar > .oe-pill {
  flex: 1 1 auto;
  width: auto;
}
.oe-compose-bar > .oe-send {
  align-self: flex-end;
  margin-bottom: 0.15rem;
}
.oe-pill.is-listening ~ .oe-send {
  background: #f4f4f7;
  color: #0b0b12;
}
.oe-pill.is-listening ~ .oe-send:hover { background: #e4e4e8; }
.oe-pill {
  display: flex; align-items: flex-end; gap: 0.28rem;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  border-radius: 1.35rem; padding: 0.2rem 0.2rem 0.2rem 0.16rem; min-height: 3.05rem; /* tighter rim so 44px controls keep the pill ~50px, Grok-sized */
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.oe-pill:focus-within {
  border-color: #8b7cffaa;
  box-shadow: 0 0 0 1px #8b7cff55, 0 0 18px #8b7cff22;
}
.oe-pill.is-listening {
  align-items: center;
}
.oe-pill-plus, .oe-pill-action {
  width: 2.75rem; height: 2.75rem; /* 44px tap floor */ border-radius: 50%; border: 0; background: var(--panel-2, #1a1a22); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; font: inherit;
}
.oe-pill-plus svg, .oe-pill-action svg { width: 1.15rem; height: 1.15rem; }
.oe-pill-plus:hover, .oe-pill-action:hover { background: #24242e; }
#prompt {
  flex: 1; min-width: 0; font: inherit; color: #fff; background: transparent; border: 0; border-radius: 0;
  padding: 0.68rem 0.35rem; line-height: 1.4; resize: none; max-height: 9rem; font-size: 1rem; /* 0.68rem×2 + 1.4em = 44px one-line height */
  caret-color: #fff;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
  background-clip: padding-box;
}
#prompt::placeholder { color: var(--dim); text-decoration: none; }
#prompt:focus { outline: none; box-shadow: none; }
#prompt:disabled { opacity: 0.5; }
.oe-send { background: var(--accent); color: var(--on-accent, #f6f4ff); }
.oe-send:hover { background: var(--accent-hover, #a499ff); }
.oe-send:disabled { opacity: 0.4; cursor: default; }
.oe-mic { background: var(--panel-2, #1a1a22); color: var(--ink); }
.oe-mic-wrap, .oe-voice-pause-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.oe-listen-hit, .oe-mic-hit {
  position: absolute;
  left: 50%; top: 50%;
  width: 4.8rem; height: 3.3rem;
  margin: -1.65rem 0 0 -2.4rem;
  border-radius: 1.7rem;
  background: #8e8e93;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 72%;
  z-index: 0;
}
.oe-mic-hit { width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; }
.oe-voice-pause-wrap.is-press .oe-listen-hit,
.oe-mic-wrap.is-press .oe-mic-hit { opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .oe-listen-hit, .oe-mic-hit { transition: opacity 70ms ease-out, transform 70ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .oe-listen-hit, .oe-mic-hit { transition: none; }
}
.oe-listen-pill {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.32rem;
  width: auto; height: auto; min-height: 44px; min-width: 44px;
  padding: 0 0.62rem 0 0.55rem;
  border: 0; border-radius: 999px;
  background: #2c2c2e; color: #fff;
  cursor: pointer; flex: none;
  font: inherit;
}
.oe-listen-stop { width: 0.62rem; height: 0.62rem; background: #fff; border-radius: 0.12rem; flex: none; }
.oe-listen-word {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
}
.oe-listen-pill #listen-timer {
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: 0.01em;
}
/* Pause is the same control on phone and desktop. It stays inside the composer pill. */
.oe-listen-pause {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 1.4rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer; flex: none;
  font: inherit; font-size: 0.82rem; font-weight: 600;
}
.oe-listen-pause:hover { background: var(--panel-2, #1a1a22); }
.oe-listen-discard {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 1.4rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer; flex: none;
  font: inherit; font-size: 0.82rem; font-weight: 600;
}
.oe-listen-discard:hover { background: var(--panel-2, #1a1a22); }
.oe-listen-state {
  min-height: 1.1rem;
  margin: 0 0.5rem 0.3rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--dim);
}
.oe-listen-state[hidden] { display: none; }
.oe-listen-state[data-voice-state="need-permission"] { color: #ffb0c0; }
.oe-mic-recover-row { margin: 0 0.5rem 0.45rem; }
.oe-mic-recover-row[hidden] { display: none; }
.oe-mic-recover {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 0.95rem;
  border: 1px solid rgba(255, 176, 192, 0.45);
  border-radius: 1.4rem;
  background: rgba(255, 176, 192, 0.08);
  color: #ffd0d8;
  cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 600;
}
.oe-mic-recover:hover { background: rgba(255, 176, 192, 0.16); }
.oe-pill[data-voice="preview"] { align-items: center; }
.oe-listen-wave {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex: none;
  min-width: 0;
  height: 0.95rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.oe-pill.is-listening .oe-listen-wave { display: inline-flex; }
#listen-timer { font-size: 0.82rem; color: #fff; letter-spacing: 0.01em; }
.oe-pill.is-listening ~ .oe-send {
  background: #f4f4f7;
  color: #0b0b12;
}
.oe-pill.is-listening ~ .oe-send:hover { background: #e4e4e8; }
/* Right slot is exclusive (empty → mic, text → send). Narrow padding on 390, never the 44px targets. */
@media (max-width: 420px) {
  .oe-pill { padding-left: 0.1rem; gap: 0.18rem; }
  #prompt { padding-left: 0.2rem; padding-right: 0.2rem; }
  .oe-compose-stack, .oe-home, .oe-thread, .oe-home-foot, .oeh-top {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .oe-home-foot { flex-wrap: wrap; }
  .oe-home-site-btn { min-width: 0; flex: 1 1 10rem; }
  .oe-coach-row { min-width: 0; }
}
.oe-level-dots { display: inline-flex; align-items: flex-end; gap: 0.09rem; height: 0.95rem; flex: none; }
.oe-level-dots i { display: block; width: 0.12rem; height: 0.85rem; border-radius: 1px; background: currentColor; transform-origin: center bottom; transform: scaleY(0.2); opacity: 0.4; animation: none; }
/* Bar height is scaleY from the live AnalyserNode. No CSS bounce while listening. */
.oe-listen-live {
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.86rem; color: #e5e5ea; letter-spacing: 0.01em;
}
.oe-listen-live[hidden] { display: none !important; }
.oe-pill.is-listening .oe-listen-wave { gap: 0.4rem; }
/* Keep mic bars visible beside live words — hiding them made listen feel dead
   the moment transcript appeared (2026-09-18). */
.oe-pill.is-listening .oe-listen-wave.has-live .oe-level-dots { display: inline-flex; }
.oe-pill.is-listening .oe-listen-wave.has-live { gap: 0.35rem; }
.oe-status { min-height: 1.1rem; margin: 0.3rem 0.5rem 0; }
.oe-status:empty { display: none; min-height: 0; margin: 0; }

.oe-toast {
  position: fixed;
  inset: unset;
  top: auto;
  right: auto;
  left: 50%;
  bottom: calc(1.25rem + var(--oe-sab));
  transform: translateX(-50%);
  margin: 0;
  z-index: 120;
  min-height: 2.75rem;
  max-width: min(22rem, calc(100% - 2rem));
  width: max-content;
  padding: 0.65rem 1rem;
  border-radius: var(--pill);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 28px #00000066;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}
.oe-toast:popover-open { display: block; }
.oe-toast.is-ok { border-color: #3ddc97aa; }
.oe-toast.is-warn { border-color: #ffb020aa; }
.oe-toast.is-error { border-color: #ff4b8aaa; }
.oe-toast[hidden] { display: none !important; }

.oe-pair-code-mono {
  margin: 0.75rem 0 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  letter-spacing: 0.18em;
  text-align: center;
  font-weight: 700;
}
.oe-coach-row { margin: 0 0 0.35rem; }
.oe-compose #btn-stop { margin: 0.35rem 0 0 0.15rem; }
.oe-speak-btn { width: auto; border-radius: 999px; padding: 0 0.7rem 0 0.45rem; gap: 0.3rem; }
.oe-speak-word { font-size: 0.78rem; font-weight: 600; }
.oe-speak-btn[aria-pressed="true"] { background: #7c5cff33; }
.oe-pill-plus:focus-visible, .oe-pill-action:focus-visible, .oe-listen-pill:focus-visible, .oe-listen-pause:focus-visible, .oe-listen-discard:focus-visible, .oe-msg-act:focus-visible, .oe-speak-btn:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.oe-msg { position: relative; }
/* Assistant footer: icon row, not a full-width labeled pill. Hit area is the button; glyph stays ~22px. */
.oe-msg-actions {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 2px;
  width: max-content; max-width: 100%; margin: 0.15rem 0 0; padding: 0;
}
.oe-msg-act {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--dim, #9a9aa8);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  font: inherit; cursor: pointer; line-height: 0;
}
.oe-msg-act svg { width: 22px; height: 22px; display: block; flex: none; }
.oe-msg-act:hover, .oe-msg-act[aria-pressed="true"] { color: var(--ink, #f4f4f7); background: rgba(255, 255, 255, 0.06); }
.oe-msg-act .oe-msg-act-off { display: none; }
.oe-msg-act[aria-pressed="true"] .oe-msg-act-on { display: none; }
.oe-msg-act[aria-pressed="true"] .oe-msg-act-off { display: block; }

/* action cards (same shape as the Desk) */
.oe-card { padding: 0.7rem 0.85rem; align-self: stretch; }
.oe-connect { border-color: #4cc9f055; background: linear-gradient(135deg, #4cc9f014, transparent 60%), var(--panel); }
.oe-connect-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.45rem; }
.oe-connect-mark { width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; background: #4cc9f0; color: #08080b; display: grid; place-items: center; font-weight: 800; font-size: 1rem; flex: none; }
.oe-connect-titles { flex: 1; min-width: 0; }
.oe-connect-titles .kicker { margin: 0; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.oe-connect-name { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.oe-connect-why { margin: 0 0 0.35rem; font-size: 0.92rem; }
.oe-connect-keep { margin: 0 0 0.5rem; }
.oe-connect[data-state="done"] .oe-approve, .oe-connect[data-state="done"] .oe-hold, .oe-connect[data-state="done"] .oe-signed,
.oe-connect[data-state="held"] .oe-approve, .oe-connect[data-state="held"] .oe-signed, .oe-connect[data-state="held"] .oe-hold { display: none; }
.oe-connect[data-gstate="connected"] .oe-approve, .oe-connect[data-gstate="connected"] .oe-hold, .oe-connect[data-gstate="connected"] .oe-signed,
.oe-connect[data-gstate="pending"] .oe-approve, .oe-connect[data-gstate="pending"] .oe-hold, .oe-connect[data-gstate="pending"] .oe-signed { display: none; }
.oe-connect[data-state="waiting"] .oe-approve { display: none; }
.oe-card-head { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.oe-card-summary { margin: 0 0 0.35rem; font-size: 0.92rem; }
.oe-card-body summary { cursor: pointer; color: var(--dim); font-size: 0.82rem; }
.oe-card-body pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; max-height: 14rem; overflow: auto; background: var(--panel); border-radius: 0.6rem; padding: 0.5rem 0.65rem; margin: 0.35rem 0 0; }
.oe-card[data-state="done"] .oe-card-state { color: #8ee0c0; border-color: #3ddc9744; }
.oe-card[data-state="held"] .oe-card-state, .oe-card[data-state="invalid"] .oe-card-state { color: #ffb0c0; border-color: #ff4b8a44; }
.oe-card[data-state="done"] .oe-approve, .oe-card[data-state="held"] .oe-approve, .oe-card[data-state="invalid"] .oe-approve,
.oe-card[data-state="done"] .oe-hold, .oe-card[data-state="invalid"] .oe-hold { display: none; }
.oe-card[data-state="queued"] .oe-send-mac, .oe-card[data-state="done"] .oe-send-mac,
.oe-card[data-state="held"] .oe-send-mac, .oe-card[data-state="invalid"] .oe-send-mac { display: none; }
.oe-mail-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; margin: 0 0 0.45rem; font-size: 0.9rem; }
.oe-mail-fields dt { color: var(--dim); }
.oe-mail-fields dd { margin: 0; overflow-wrap: anywhere; }
.oe-mail-body { margin: 0 0 0.5rem; padding: 0.55rem 0.7rem; background: var(--panel); border-radius: 0.6rem; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; }
.oe-card[data-state="needs-scope"] .oe-approve { display: none; }
.oe-card[data-state="needs-scope"] .oe-card-state { color: #ffd580; border-color: #ff9f4344; }
.oe-mac-inbox { margin: 0.75rem 0; padding: 0.7rem 0.8rem; border: 1px solid var(--rule); border-radius: 12px; }
#mac-pair-code { font-size: 1.35rem; letter-spacing: 0.16em; color: var(--ink); }
.oe-mac-inbox { margin: 0.5rem 1rem; }

/* ---------------------------------------------------------------- settings sheet (grouped iOS-style cards) */
.oe-sheet-head-left { justify-content: flex-start; }
.oe-set-group { margin: 1rem 0.25rem 0.35rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.oe-set-card { border: 1px solid var(--rule); border-radius: 1rem; background: var(--panel); overflow: hidden; margin: 0.6rem 0; }
.oe-set-row {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem; padding: 0.6rem 0.9rem;
  background: none; border: 0; border-top: 1px solid var(--rule); color: var(--ink); font: inherit; text-align: left; cursor: default;
}
.oe-set-card > .oe-set-row:first-child { border-top: 0; }
button.oe-set-row, a.oe-set-row { cursor: pointer; text-decoration: none; color: inherit; }
button.oe-set-row:hover, button.oe-set-row:focus-visible,
a.oe-set-row:hover, a.oe-set-row:focus-visible { background: var(--panel-2, #1a1a22); }
.oe-set-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.oe-set-name { font-weight: 700; font-size: 1rem; }
.oe-set-sub { color: var(--dim); font-size: 0.8rem; line-height: 1.35; }
.oe-set-value { color: var(--dim); font-size: 0.88rem; white-space: nowrap; }
.oe-set-chev { color: var(--dim); font-size: 1.3rem; line-height: 1; }
.oe-set-panel { padding: 0.4rem 0.9rem 0.8rem; border-top: 1px solid var(--rule); }
.oe-set-panel[hidden] { display: none; }
.oe-set-select { font: inherit; color: var(--ink); background: var(--panel-2, #1a1a22); border: 1px solid var(--rule); border-radius: 0.7rem; padding: 0.45rem 0.7rem; min-height: 2.75rem; }
.oe-usage-bar { height: 0.4rem; border-radius: 999px; background: var(--panel-2, #1a1a22); overflow: hidden; margin: 0.4rem 0; }
.oe-usage-bar i { display: block; height: 100%; background: var(--accent); width: 0; }
.oe-approval-list { list-style: none; margin: 0; padding: 0.4rem 0.9rem 0.6rem; display: grid; gap: 0.5rem; }
.oe-approval-list li { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.9rem; }
.oe-approval-list[hidden] { display: none; }
/* iOS-style switch; green when on. The approve lock is on and disabled — the lock is visible, never flippable. */
.oe-switch { position: relative; display: inline-flex; width: 3.1rem; height: 1.9rem; flex: none; }
.oe-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.oe-switch input:disabled { cursor: default; }
.oe-switch-knob { position: absolute; inset: 0; border-radius: 999px; background: #3a3a44; transition: background 0.15s ease; }
.oe-switch-knob:before { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.oe-switch input:checked + .oe-switch-knob { background: #34c759; }
.oe-switch input:checked + .oe-switch-knob:before { transform: translateX(1.2rem); }
.oe-switch input:focus-visible + .oe-switch-knob { outline: 2px solid var(--focus); outline-offset: 2px; }
/* full-screen sheets: Connected apps stays in Settings. Computers + agent profile are stack panes. */
#connected-apps {
  position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--ink); overflow: auto;
  padding: var(--oe-sat) var(--oe-sar) var(--oe-sab) var(--oe-sal);
}
#computers, #files, #tasks, #create-helper, #create-group {
  position: fixed; inset: 0; z-index: 70; background: #000; color: var(--ink); overflow: auto;
  padding: calc(10px + var(--oe-sat)) 17px calc(22px + var(--oe-sab));
  transform: translate3d(100%, 0, 0);
  pointer-events: none;
}
body[data-screen="computers"] #computers,
body[data-screen="files"] #files,
body[data-screen="tasks"] #tasks,
body[data-screen="create-helper"] #create-helper,
body[data-screen="create-group"] #create-group {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
/* Chat Settings is an overlay sheet on the same thread — never a full-page route.
   Phone: bottom sheet. Desktop (>=900): right dock, about a third of the viewport. */
.oe-settings-scrim {
  position: fixed;
  inset: 0;
  z-index: 75;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 8, 12, 0.28);
  cursor: pointer;
}
.oe-settings-scrim[hidden] { display: none !important; }
#agent-profile.oe-settings-sheet,
#agent-instructions.oe-settings-sheet {
  position: fixed;
  z-index: 80;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: min(92dvh, 100%);
  margin: 0;
  box-sizing: border-box;
  background: #0c0c0e;
  color: var(--ink);
  overflow: auto;
  padding: 0.65rem 1rem calc(1rem + var(--oe-sab));
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.45);
  transform: translate3d(0, 110%, 0);
  pointer-events: none;
}
#agent-instructions.oe-settings-sheet { z-index: 81; }
body[data-screen="agent-profile"] #agent-profile,
body[data-screen="agent-instructions"] #agent-instructions,
body[data-screen="agent-instructions"] #agent-profile {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
body[data-screen="agent-instructions"] #agent-profile { pointer-events: none; }
@media (min-width: 900px) {
  #agent-profile.oe-settings-sheet,
  #agent-instructions.oe-settings-sheet {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    height: auto;
    width: clamp(20rem, 36vw, 40vw);
    max-width: 40vw;
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding: calc(10px + var(--oe-sat)) 17px calc(22px + var(--oe-sab));
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
    transform: translate3d(110%, 0, 0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  #computers, #files, #tasks, #create-helper, #create-group,
  #agent-profile.oe-settings-sheet, #agent-instructions.oe-settings-sheet { transition: transform 300ms ease-out; }
  body.oe-nav-drag #computers, body.oe-nav-drag #files, body.oe-nav-drag #tasks,
  body.oe-nav-drag #agent-profile, body.oe-nav-drag #agent-instructions,
  body.oe-nav-drag #create-helper, body.oe-nav-drag #create-group { transition: none; }
}
.oe-screen-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; }
.oe-screen-head h2 { margin: 0; font-size: 1.1rem; }
.oe-screen-body { padding: 0 1rem 2rem; }
#connected-apps-detail .oe-connector { border-top: 1px solid var(--rule); }
.oe-notice-line p:last-of-type { margin: 0; }
.oe-card-risks { margin: 0 0 0.35rem; color: #ffd580; }
.oe-connect[data-state="soon"] .oe-approve { opacity: 0.5; }
.oe-connect[data-state="queued"] .oe-approve, .oe-connect[data-state="queued"] .oe-hold { display: none; }
/* ---------------------------------------------------------------- sheets */
.oe-sheet { border: 1px solid var(--rim); padding: 1.1rem 1.25rem calc(1.1rem + var(--oe-sab)); width: min(30rem, 100%); max-width: 100%; max-height: 92dvh; color: var(--ink); margin: auto auto 0; overflow: auto; border-radius: var(--radius) var(--radius) 0 0; box-sizing: border-box; }
.oe-sheet::backdrop { background: #08080bcc; }
.oe-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.oe-sheet-head h2 { margin: 0; font-size: 1.1rem; }
.oe-sheet-section { border-top: 1px solid var(--rule); margin-top: 0.9rem; padding-top: 0.7rem; }
.oe-sheet-section h3 { margin: 0 0 0.25rem; font-size: 0.9rem; }
.oe-fieldset { border: 1px solid var(--rule); border-radius: 0.85rem; padding: 0.6rem 0.85rem; margin: 0.6rem 0 0.9rem; display: grid; gap: 0.3rem; }
.oe-fieldset legend { padding: 0 0.3rem; font-size: 0.85rem; font-weight: 600; }
.oe-radio { display: flex; gap: 0.5rem; align-items: center; font-size: 0.92rem; }
.oe-radio.is-off { color: var(--dim); }
.oe-radio em { font-style: normal; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.oe-sheet .field { margin: 0.6rem 0; }
.oe-sheet .field label { display: block; margin-bottom: 0.25rem; }
.oe-sheet .field input, .oe-sheet .field select, .oe-sheet .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 0.8rem; padding: 0.55rem 0.8rem; font-size: 0.95rem;
  min-height: 2.75rem; box-sizing: border-box;
}
#tts-voice-section input[type="range"] { padding: 0; accent-color: var(--accent); }
#tts-voice-section .oe-radio input { width: 1.35rem; height: 1.35rem; }
#tts-voice-section #btn-tts-sample { min-height: 2.75rem; }
#tts-volume-hint { margin-top: 0.3rem; }
.oe-connector { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0; }
.oe-connector-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.oe-connector-name { font-weight: 600; font-size: 0.92rem; }
.oe-sheet-actions { margin-top: 0.75rem; }
.oe-bot-preview { display: flex; justify-content: center; margin: 0.25rem 0 0.5rem; }
.oe-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oe-swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.oe-swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--rim-hot); }

/* ---------------------------------------------------------------- views */
.oe-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 0.95rem;
  padding: calc(var(--oe-thread-top-h) + 1.25rem) 1.1rem 1.25rem;
  box-sizing: border-box;
}
.oe-thread-empty-line {
  margin: 0;
  text-align: center;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.35rem 0;
  min-height: 44px;
  cursor: pointer;
}
body[data-active] .oe-thread-empty { display: none; }
body:not([data-active]) .oe-thread > :not(.oe-thread-empty) { display: none; }

/* Empty-thread identity card. Hidden until Settings → Tips (v120). A ready chat hides the whole empty thread. */
.oe-onboard {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 26rem;
  text-align: center;
  padding: 1.35rem 1.15rem 1.1rem;
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  border-radius: 1.35rem;
  background: rgba(18, 16, 24, 0.72);
}
.oe-onboard-mark { display: flex; justify-content: center; }
.oe-onboard-tile {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.15rem;
  background: #121018;
  border: 1px solid rgba(76, 201, 240, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oe-onboard-tile svg { width: 3.15rem; height: 3.15rem; display: block; }
.oe-onboard-title {
  margin: 0;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.oe-onboard-lead { margin: 0; max-width: 22rem; color: var(--oe-meta, #c4c4d0); }
.oe-onboard-actions { display: grid; gap: 0.4rem; width: 100%; }
.oe-onboard-act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border-radius: 1rem;
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  background: var(--panel);
  color: inherit;
  font: inherit;
  text-align: left;
  touch-action: manipulation;
}
.oe-onboard-act strong { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.oe-onboard-act span { color: var(--oe-meta, #dddde8); font-size: 0.82rem; line-height: 1.3; }
.oe-onboard-act:hover, .oe-onboard-act:focus-visible { border-color: #8b7cff88; background: #1a1824; }
.oe-onboard-act:active { border-color: #8b7cff; }
.oe-onboard-dismiss {
  justify-self: center;
  min-height: 44px;
  padding: 0.35rem 0;
  color: var(--oe-meta, #c4c4d0);
}
#home-root .oe-onboard {
  margin: 0.75rem 1rem 0.35rem;
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .oe-onboard-act { transition: none; }
}
/* Phone + tablet: iOS-style horizontal push. Home slides left off; thread enters from
   the right. Back: thread exits right; home enters from the left. Full bleed — no 390
   wrapper. Desktop (>=900) is a two-pane grid, never this push. */
@media (max-width: 699px) {
  .oe-shell { width: 100%; max-width: 100%; }
}
@media (max-width: 899px) {
  .oe-shell { display: block; position: relative; overflow: hidden; }
  .oe-home, .oe-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
  }
  .oe-home { z-index: 1; }
  .oe-thread { z-index: 2; }
  body[data-view="home"] .oe-home { transform: translate3d(0, 0, 0); }
  body[data-view="home"] .oe-thread { transform: translate3d(100%, 0, 0); pointer-events: none; }
  body[data-view="thread"] .oe-home { transform: translate3d(-100%, 0, 0); pointer-events: none; }
  body[data-view="thread"] .oe-thread { transform: translate3d(0, 0, 0); }
  body[data-screen]:not([data-screen="connected-apps"]):not([data-screen="agent-profile"]):not([data-screen="agent-instructions"])[data-view="home"] .oe-home { transform: translate3d(-100%, 0, 0); pointer-events: none; }
  body[data-screen]:not([data-screen="connected-apps"]):not([data-screen="agent-profile"]):not([data-screen="agent-instructions"])[data-view="thread"] .oe-thread { transform: translate3d(-100%, 0, 0); pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) {
    .oe-home, .oe-thread { transition: transform 300ms ease-out; }
    body.oe-nav-drag .oe-home,
    body.oe-nav-drag .oe-thread { transition: none; }
  }
}
.oe-gutter { display: none; }
.oe-mouth { margin: 0 1rem 0.28rem; }
.oe-compose-stack .oe-mouth { margin: 0 0 0.2rem; }
.oe-mouth-toggle { width: 100%; text-align: left; font: inherit; font-size: 0.78rem; color: var(--oe-meta, #c4c4d0); background: var(--panel); border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14)); border-radius: 0.65rem; padding: 0.28rem 0.7rem; cursor: pointer; min-height: 2.15rem; }
.oe-mouth-pane { margin-top: 0.3rem; display: grid; gap: 0.35rem; }
.oe-mouth-pane textarea, .oe-mouth-pane select { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 0.65rem; padding: 0.45rem 0.6rem; }
.oe-mouth-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Pane-focus is a laptop two-pane affordance. Default layout sets
   data-focus="thread", so an inset --rim-hot rim framed the whole phone chat
   in purple. Never paint that on the chat surface; laptop keeps a neutral hairline. */
body[data-focus="home"] .oe-home,
body[data-focus="thread"] .oe-thread,
body[data-focus="course"] #course-panel { box-shadow: none; }
.oe-home:focus, .oe-home:focus-visible,
.oe-thread:focus, .oe-thread:focus-visible,
#course-panel:focus, #course-panel:focus-visible { outline: none; }

@media (min-width: 900px) {
  body[data-focus="home"] .oe-home,
  body[data-focus="thread"] .oe-thread,
  body[data-focus="course"] #course-panel {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  @media (prefers-reduced-motion: no-preference) {
    .oe-shell { transition: transform 300ms ease-out; }
    body.oe-nav-drag .oe-shell { transition: none; }
  }
  body[data-screen]:not([data-screen="connected-apps"]):not([data-screen="agent-profile"]):not([data-screen="agent-instructions"]) .oe-shell { transform: translate3d(-100%, 0, 0); pointer-events: none; }
  .oe-shell { grid-template-columns: var(--oe-left) 8px minmax(0, 1fr); width: 100%; max-width: 100%; }
  /* Computer is a fixed right rail. Pad the shell so chat ends on that edge and the gutter is the boundary. */
  body:has(#computer-preview[open]) .oe-shell {
    box-sizing: border-box;
    width: 100%;
    padding-right: calc(var(--oe-computer, clamp(18rem, 33.333vw, 36vw)) + var(--oe-sar, 0px));
  }
  body[data-course="open"] .oe-shell { grid-template-columns: var(--oe-left) 8px minmax(0, 1fr); }
  body[data-pane-home="off"] .oe-shell { grid-template-columns: minmax(0, 1fr); }
  body[data-pane-home="off"][data-course="open"] .oe-shell { grid-template-columns: minmax(0, 1fr); }
  body[data-pane-home="off"] .oe-home,
  body[data-pane-home="off"] #gutter-left { display: none; }
  body[data-home="open"] .oe-shell { visibility: hidden; } /* your site (home-site.css) has the whole screen */
  .oe-home { border-right: 0; background: #000; }
  .oe-thread { background: #0e0e10; }
  .oe-thread-empty {
    align-items: center;
    justify-content: center;
    padding: calc(var(--oe-thread-top-h) + 2rem) 2.25rem 2.75rem;
    color: var(--ink);
    font-size: 1.05rem;
    max-width: none;
  }
  .oe-thread-empty-line { text-align: center; }
  .oe-gutter { display: block; position: relative; cursor: col-resize; background: var(--rule); touch-action: none; }
  .oe-gutter::after { content: ""; position: absolute; inset: 0 -6px; }
  .oe-gutter:hover { background: var(--accent); }
  #gutter-right { display: none; }
  /* Back hides because the rail stays up. The pill stays column 2 (left);
     Computer stays column 3. Do not give the pill the 1fr track. */
  .oe-back { display: none; }
  .oe-sheet { margin: auto; border-radius: var(--radius); padding-bottom: 1.1rem; }
  .oe-msg, .oe-msg-stack { max-width: 72%; }
}
@media (min-width: 1200px) {
  body[data-course="open"] .oe-shell {
    grid-template-columns: var(--oe-left) 8px minmax(0, 1fr) 8px minmax(16rem, var(--oe-right));
  }
  body[data-pane-home="off"][data-course="open"] .oe-shell {
    grid-template-columns: minmax(0, 1fr) 8px minmax(16rem, var(--oe-right));
  }
  body[data-course="open"] #gutter-right { display: block; }
}
@media (min-width: 1400px) {
  /* Do not reset --oe-left here. Gutter drag writes an inline px value; a
     22rem override made persisted thirds look like a no-op on wide laptops. */
}
.oe-guide-glow {
  position: relative;
  border-color: #e8c48a88 !important;
  box-shadow:
    0 0 0 1px #e8c48a55,
    0 0 18px #e8c48a44,
    0 0 36px #7c5cff33 !important;
  animation: oe-guide-pulse 1.8s ease-in-out infinite;
}
.oe-next-arrow { position: relative; }
.oe-next-arrow::before {
  content: "→";
  position: absolute;
  left: -1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #e8c48a;
  font-weight: 800;
  pointer-events: none;
}
.oe-next-hit[data-next-hint]::after {
  content: attr(data-next-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  transform: translateX(-50%);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #e8c48a;
  color: #1a1408;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes oe-guide-pulse {
  0%, 100% { box-shadow: 0 0 0 1px #e8c48a44, 0 0 14px #e8c48a33, 0 0 28px #7c5cff22; }
  50% { box-shadow: 0 0 0 2px #e8c48a77, 0 0 22px #e8c48a55, 0 0 40px #7c5cff44; }
}
@media (prefers-reduced-motion: reduce) {
  .oe-guide-glow { animation: none; }
}

.oe-advanced { margin: 1rem 0; border-top: 1px solid var(--rule); padding-top: 0.75rem; }
.oe-advanced > summary {
  cursor: pointer; font-weight: 600; color: var(--dim); list-style: none;
  padding: 0.4rem 0;
}
.oe-advanced > summary::-webkit-details-marker { display: none; }
.oe-advanced[open] > summary { color: var(--ink); margin-bottom: 0.5rem; }


/* Wave 2 tool status cards (calendar + vault) — same tokens as progress cards */
.oe-tool-card {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 0.35rem;
  width: 100%;
  max-width: 22rem;
  margin: 0.35rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius, 1.1rem);
  background: var(--panel);
  color: var(--ink);
}
.oe-tool-kicker {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.oe-tool-title { margin: 0; font-size: 1rem; font-weight: 650; }
.oe-tool-line { margin: 0; font-size: 0.88rem; color: var(--ink); }
.oe-tool-body {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  font-size: 0.85rem;
  color: var(--dim);
  max-height: 12rem;
  overflow: auto;
}
.oe-tool-card[data-state="need"],
.oe-tool-card[data-state="failed"] { border-color: #e8c48a88; }
.oe-tool-card[data-state="ok"],
.oe-tool-card[data-state="done"] { border-color: #3ddc9755; }

/* A− micro-win after a Coach answer */
.oe-win {
  margin: 0 0 0.35rem; padding: 0.35rem 0.75rem; border-radius: 999px;
  display: inline-flex; align-self: flex-start;
  font-size: 0.82rem; font-weight: 650; letter-spacing: 0.01em;
  color: #fff; background: #3ddc9733; border: 1px solid #3ddc9788;
  opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.oe-win.is-on { opacity: 1; transform: translateY(0); }
.oe-compose .oe-win { margin-left: 0.35rem; }


/* Phone: dock hugs the bottom edge; coach Next/Lesson stay in the same dark bed. */
@media (max-width: 899px) {
  .oe-compose {
    padding-left: max(0.65rem, var(--oe-sal));
    padding-right: max(0.65rem, var(--oe-sar));
    padding-bottom: max(0.35rem, var(--oe-sab));
    padding-top: 0.28rem;
  }
  .oe-coach-row { margin: 0 0 0.18rem; }
  .oe-status { margin-bottom: 0; }
  .oe-ask-hint { margin-bottom: 0.22rem; padding: 0.35rem 0.65rem; max-height: 3.2rem; font-size: 0.86rem; }
}

body[data-coach="off"] #coach-row,
body[data-coach="off"] #oe-ask-hint,
body[data-coach="off"] #oe-win,
body[data-coach="off"] #coach-loading,
body[data-coach="off"] #hud-line,
body[data-coach="off"] #hud-panel,
body[data-coach="off"] #hud-interfaces,
body[data-coach="off"] #mac-inbox-hint,
body[data-coach="off"] #settings-lesson-line,
body[data-coach="off"] #thread-empty-line,
body[data-coach="off"] #oe-mouth,
body[data-coach="off"] #oe-mouth-thread { display: none !important; }
body[data-coach="off"] .oeh-tile[data-tile-id="coach"],
body[data-coach="off"] .oeh-row[data-row-id="coach"] { display: none !important; }
body:not([data-active="coach"]) #oe-mouth,
body:not([data-active="coach"]) #oe-mouth-thread { display: none !important; }


/* Current Coach ask sits above the pill — full sentence, never clipped in the placeholder. */
.oe-ask-hint {
  margin: 0 0.35rem 0.45rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.4;
  max-height: 5.6rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.oe-ask-hint[hidden] { display: none; }
.oe-coach-row { margin: 0 0 0.45rem; gap: 0.4rem; flex-wrap: wrap; }
#prompt {
  min-height: 2.75rem;
}
#prompt::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 899px) {
  .oe-ask-hint { max-height: 3.2rem; font-size: 0.86rem; }
  .oe-compose { padding-top: 0.28rem; }
}

/* ================================================================ PIXEL SPEC (HOME-LAYOUT-SPEC.md, 2026-09-17)
   Measured from the reference at 390 pt. Dark: page #000 · sheet #0e0e10 · card #1c1c1e · chip #2c2c2e · text #fff ·
   secondary #8e8e93 · rule #2a2a2c · toggle on #34c759 · primary pill white/black · secondary pill #2c2c2e/#8e8e93.
   home.js / connected-apps.js / computers.js draw the DOM; their stylesheets are theirs, so the sizes are set from
   here with more specific selectors. */
:root { --px-page: #000; --px-sheet: #0e0e10; --px-card: #1c1c1e; --px-chip: #2c2c2e; --px-text: #fff; --px-dim: #8e8e93; --px-rule: #2a2a2c; --px-on: #34c759; --px-unread: #0a84ff; }
/* Home header: avatar 38 at (17, 60); two 38 round buttons #1c1c1e, 9 apart, 17 from the right.
   The visible disc is 38; the element stays 44 (the tap floor the funnel a11y check measures) with the disc painted
   inside it, and the paddings/gaps are pulled in by the 3px overhang so the discs land where the reference has them. */
.oe-home-root .oeh-top { gap: 3px; padding: calc(var(--oe-sat) + 10px) 14px 5px; }
.oe-home-root .oeh-avatar, .oe-home-root .oeh-icon-btn {
  width: 44px; height: 44px; min-width: 44px; margin: 0; border: 0; color: var(--px-text);
  background: radial-gradient(circle at center, var(--px-card) 19px, transparent 19.5px);
}
.oe-home-root .oeh-icon-btn svg { width: 18px; height: 18px; }
.oe-home-root .oeh-avatar .oeh-face-sm { width: 24px; height: 24px; }
/* Pinned grid: 3 columns, face 76 round, name 17 regular #8e8e93 12 below, unread dot 8 #0a84ff, row pitch 120. */
.oe-home-root .oeh-grid { grid-template-columns: repeat(3, 1fr); gap: 0 8px; padding: 12px 17px 8px; }
.oe-home-root .oeh-tile { height: auto; min-height: 120px; box-sizing: border-box; }
.oe-home-root .oeh-tile-btn { gap: 10px; padding: 0 2px 6px; }
.oe-home-root .oeh-face-lg { width: 76px; height: 76px; }
.oe-home-root .oeh-tile-name { font-size: 16px; font-weight: 500; line-height: 19px; color: var(--oe-meta, #c4c4d0); padding-right: 0; }
.oe-home-root .oeh-dot { width: 8px; height: 8px; background: var(--px-unread); margin-left: 6px; }
/* Recent list: row 71, face 38 at x 17, name 17 semibold white, preview 15 #8e8e93, time 15 at the name baseline, no rules. */
.oe-home-root .oeh-list { padding: 0 0 16px; }
.oe-home-root .oeh-row-btn { height: auto; min-height: 71px; padding: 12px 17px; gap: 12px; border-radius: 0; }
.oe-home-root .oeh-row-btn:hover, .oe-home-root .oeh-row-btn:focus-visible { background: var(--px-card); }
.oe-home-root .oeh-face-md { width: 38px; height: 38px; }
.oe-home-root .oeh-row-name { font-size: 17px; font-weight: 600; line-height: 22px; color: var(--px-text); }
.oe-home-root .oeh-row-preview { font-size: 15px; line-height: 20px; color: var(--oe-meta, #c4c4d0); }
.oe-home-root .oeh-row-meta { align-self: stretch; justify-content: flex-start; padding-top: 2px; gap: 8px; }
.oe-home-root .oeh-row-time { font-size: 15px; line-height: 20px; font-weight: 550; color: var(--oe-meta, #c4c4d0); }
.oe-home-root .oeh-row .oeh-dot { margin: 0; }
.oe-home-root .oeh-more-row { right: 6px; }
/* Settings: full-bleed takeover. Type, spacing, and surfaces a grade above the old sheet. */
#settings.oe-sheet, #settings.oe-settings-full {
  background: var(--px-sheet); border: 0; border-radius: 0;
  width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0;
  padding: calc(22px + var(--oe-sat)) 28px calc(28px + var(--oe-sab));
  color: var(--px-text);
  box-sizing: border-box;
}
#settings::backdrop { background: #050506f2; }
#settings .oe-sheet-head { margin: 0 0 10px; gap: 16px; }
#settings .oe-sheet-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
#settings .oe-icon-btn { width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--px-card); color: var(--px-text); font-size: 20px; }
#settings .oe-set-group { margin: 28px 0 10px 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--px-dim); }
#settings .oe-set-card { margin: 28px 0 0; border: 0; border-radius: 14px; background: var(--px-card); }
#settings .oe-set-group + .oe-set-card { margin-top: 0; }
#settings .oe-set-row { position: relative; min-height: 42px; padding: 0 16px 0 22px; border-top: 0; gap: 12px; }
#settings .oe-set-card > * + *::before { content: ""; position: absolute; left: 22px; right: 0; top: 0; height: 1px; background: var(--px-rule); }
#settings .oe-set-panel { position: relative; border-top: 0; padding: 8px 22px 16px; }
#settings .oe-set-main > span:first-child { font-size: 17px; line-height: 22px; color: var(--px-text); }
#settings .oe-set-value { font-size: 17px; color: var(--px-dim); }
#settings .oe-set-chev { color: var(--px-dim); font-size: 22px; }
#settings .oe-set-sub { font-size: 15px; line-height: 20px; color: var(--px-dim); }
#settings .oe-set-row--sub { min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
#settings .oe-set-row--account { min-height: 61px; }
#settings .oe-set-row--account .oe-set-name { font-size: 20px; font-weight: 600; line-height: 24px; }
#settings .oe-set-row--account .oe-set-sub,
#settings .oe-seat-email { overflow-wrap: anywhere; }
#settings .oe-seat-email { margin: 0.15rem 0 0.45rem; font-size: 17px; line-height: 22px; color: var(--px-text); }
#settings .oe-set-row--out { color: #e8c4bc; }
#settings .oe-set-row--account .oe-face-sm { width: 38px; height: 38px; }
#settings .oe-set-row--card { min-height: 56px; }
#settings .oe-set-row--card .oe-set-main > span:first-child { font-size: 20px; font-weight: 600; line-height: 24px; }
#settings button.oe-set-row:hover, #settings button.oe-set-row:focus-visible,
#settings a.oe-set-row:hover, #settings a.oe-set-row:focus-visible { background: #232325; }
#settings .oe-switch { width: 51px; height: 31px; }
#settings .oe-switch-knob { background: #39393d; }
#settings .oe-switch-knob:before { top: 2px; left: 2px; width: 27px; height: 27px; }
#settings .oe-switch input:checked + .oe-switch-knob { background: var(--px-on); }
#settings .oe-switch input:checked + .oe-switch-knob:before { transform: translateX(20px); }
#settings .oe-set-select { border: 0; background: transparent; color: var(--px-dim); font-size: 17px; padding-right: 0; text-align: right; }
#settings .oe-legal-links { display: flex; align-items: center; gap: 0.4rem; }
#settings .oe-legal-links a {
  color: inherit; text-decoration: none;
  min-height: 2.75rem; display: inline-flex; align-items: center;
}
#settings .oe-legal-links a:hover { color: var(--px-text, #f4f4f7); }
#settings .oe-set-card--voice { margin-top: 26px; padding: 8px 22px 16px; }
#settings .oe-set-card--voice h3 { font-size: 17px; font-weight: 600; margin: 8px 0 4px; }
#settings .oe-advanced { margin: 26px 0 0; border-top: 0; padding-top: 0; }
#settings .oe-advanced > summary { font-size: 17px; color: var(--px-dim); }
#settings .oe-sheet-actions { margin-top: 22px; }
#settings .oe-about-footer { margin: 36px 0 8px; }
#settings .oe-about-actions { display: flex; flex-direction: column; gap: 10px; }
#settings .oe-about-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px; padding: 0 18px; margin: 0;
  border: 0; border-radius: 14px;
  background: var(--px-card); color: var(--px-text);
  font: inherit; font-size: 17px; line-height: 22px; text-decoration: none; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
#settings .oe-about-row .oe-set-chev { color: var(--px-dim); font-size: 22px; }
#settings .oe-about-row--out { color: #e8c4bc; }
#settings .oe-about-emblem {
  margin: 48px 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
#settings .oe-about-emblem .oe-face { width: 72px; height: 72px; color: #fff; --face: #fff; }
#settings .oe-about-name { margin: 0; font-size: 17px; font-weight: 600; line-height: 22px; color: var(--px-text); }
#settings .oe-about-ver { margin: 0; font-size: 13px; line-height: 18px; color: var(--px-dim); }
#settings .oe-sheet .field input, #settings .field input, #settings .field select, #settings .field textarea { background: var(--px-chip); border: 0; color: var(--px-text); }
#settings .oe-approval-list { padding: 8px 22px 16px; }
#settings .oe-approval-list li strong { font-size: 17px; font-weight: 500; }
#settings .oe-approval-list li .oe-hint { font-size: 15px; color: var(--px-dim); }
#settings .oe-usage-bar { background: var(--px-chip); }
#settings .oe-usage-bar i { background: var(--px-on); }
/* Screens inside the sheet: the form steps aside while one is up. */
body[data-screen] #settings-form { display: none; }
#connected-apps { position: static; padding: 0; background: transparent; }
#connected-apps .oe-screen-head, #computers .oe-screen-head, #files .oe-screen-head, #tasks .oe-screen-head, #agent-profile .oe-screen-head, #agent-instructions .oe-screen-head, #create-helper .oe-screen-head, #create-group .oe-screen-head { padding: 0 0 12px; gap: 14px; }
#connected-apps .oe-screen-head h2, #computers .oe-screen-head h2, #files .oe-screen-head h2, #tasks .oe-screen-head h2, #agent-profile .oe-screen-head h2, #agent-instructions .oe-screen-head h2, #create-helper .oe-screen-head h2, #create-group .oe-screen-head h2 { font-size: 19px; font-weight: 600; }
/* Helper overview + Instructions (Grok stack, On Easy kit marks). */
#agent-profile .oe-profile-head, #agent-instructions .oe-profile-head, #create-helper .oe-profile-head, #create-group .oe-profile-head { position: sticky; top: 0; z-index: 2; background: #000; padding-bottom: 8px; }
#agent-profile .oe-profile-head .oe-icon-btn, #agent-instructions .oe-profile-head .oe-icon-btn, #create-helper .oe-profile-head .oe-icon-btn, #create-group .oe-profile-head .oe-icon-btn { border: 0; background: transparent; }
#agent-profile .oe-profile-head h2 {
  position: static; left: auto; transform: none; flex: 1 1 auto; min-width: 0; max-width: none;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#agent-profile .oe-profile-head .oe-top-spacer { display: none; }
#agent-profile .oe-profile-head h2[hidden] { display: none; }
#agent-profile .oe-profile-hero, #create-helper .oe-profile-hero { display: flex; justify-content: center; padding: 10px 0 18px; }
#agent-profile .oe-profile-avatar-btn {
  border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 999px;
  color: inherit;
}
#agent-profile .oe-profile-avatar-btn:hover,
#agent-profile .oe-profile-avatar-btn:focus-visible { box-shadow: 0 0 0 2px #fff; }
#agent-profile .oe-field-label {
  display: block; margin: 14px 4px 6px; font-size: 15px; font-weight: 600; color: #fff;
}
#agent-profile .oe-profile-name,
#agent-profile .oe-profile-subtitle,
#agent-profile .oe-profile-description { text-align: left; padding-left: 14px; padding-right: 14px; }
#agent-profile .oe-profile-description {
  display: block; width: 100%; box-sizing: border-box; min-height: 96px; margin: 0 0 8px;
  border: 0; border-radius: 14px; background: var(--px-card, #1c1c1e); color: #fff;
  font: inherit; font-size: 16px; resize: vertical; padding-top: 12px; padding-bottom: 12px;
}
#agent-profile .oe-chat-prefs { margin-top: 12px; }
#agent-profile .oe-pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 16px; border-top: 1px solid var(--px-rule, #2a2a2c); font-size: 17px;
}
#agent-profile .oe-pref-row:first-child { border-top: 0; }
#agent-profile .oe-pref-row select {
  margin-left: auto; max-width: 58%; border: 0; background: transparent; color: #8e8e93;
  font: inherit; font-size: 17px; text-align: right;
}
.oe-avatar-sheet {
  width: min(26rem, calc(100vw - 1.5rem));
  background: #1c1c1e;
  color: #fff;
  border: 0;
  border-radius: 22px;
  padding: 18px 16px 16px;
}
.oe-avatar-sheet::backdrop { background: #00000099; }
.oe-avatar-preview { display: flex; justify-content: center; padding: 8px 0 14px; }
.oe-avatar-tabs {
  display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 4px;
  border-radius: 14px; background: #111;
}
.oe-avatar-tabs button {
  flex: 1; min-height: 36px; border: 0; border-radius: 10px; background: transparent;
  color: #8e8e93; font: inherit; font-size: 15px; cursor: pointer;
}
.oe-avatar-tabs button[aria-selected="true"],
.oe-avatar-tabs button:hover,
.oe-avatar-tabs button:focus-visible { background: #2c2c2e; color: #fff; }
.oe-avatar-panel textarea {
  width: 100%; box-sizing: border-box; min-height: 140px; margin: 0;
  border: 0; border-radius: 14px; background: #000; color: #fff; font: inherit; font-size: 16px;
  padding: 14px; resize: vertical;
}
.oe-avatar-go, .oe-avatar-drop .btn {
  display: block; width: 100%; margin-top: 12px; min-height: 44px; border: 0; border-radius: 12px;
  background: #2c2c2e; color: #fff; font: inherit; font-size: 17px; cursor: pointer;
}
.oe-avatar-drop {
  min-height: 180px; margin-top: 4px; padding: 28px 16px;
  border: 1px dashed #3a3a3c; border-radius: 16px; text-align: center; color: #8e8e93;
}
.oe-avatar-drop.is-over { border-color: #fff; color: #fff; }
.oe-avatar-or { margin: 10px 0; color: #8e8e93; }
.oe-avatar-drop .btn { width: auto; min-width: 140px; margin: 8px auto 0; padding: 0 18px; }
#create-helper .oe-profile-hero { padding: 28px 0 36px; }
#agent-profile .oe-profile-name, #agent-profile .oe-profile-subtitle, #create-helper .oe-profile-name {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; border: 0; border-radius: 14px;
  background: var(--px-card, #1c1c1e); color: var(--px-text, #fff); font: inherit; text-align: center;
}
#agent-profile .oe-profile-name, #create-helper .oe-profile-name { height: 52px; font-size: 20px; font-weight: 600; }
#create-helper .oe-profile-name { font-weight: 400; }
#create-helper .oe-profile-name::placeholder { color: var(--px-dim, #8e8e93); }
#agent-profile .oe-profile-subtitle { height: 48px; font-size: 16px; font-weight: 400; margin-bottom: 4px; }
#agent-profile .oe-profile-subtitle::placeholder { color: var(--px-dim, #8e8e93); }
#agent-profile .oe-profile-kicker { margin: 22px 4px 8px; font-size: 14px; color: var(--px-dim, #8e8e93); }
#agent-profile .oe-profile-card { background: var(--px-card, #1c1c1e); border-radius: 17px; overflow: hidden; }
#agent-profile .oe-profile-marks, #chat-avatar .oe-profile-marks, #create-helper .oe-profile-marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; padding: 20px 12px 6px; }
#agent-profile .oe-profile-mark, #chat-avatar .oe-profile-mark, #create-helper .oe-profile-mark {
  width: 100%; min-height: 52px; border: 0; background: transparent; border-radius: 50%; padding: 4px;
  color: inherit; display: flex; align-items: center; justify-content: center;
}
#agent-profile .oe-profile-mark[aria-pressed="true"], #chat-avatar .oe-profile-mark[aria-pressed="true"], #create-helper .oe-profile-mark[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #8e8e93; }
#agent-profile .oe-profile-mark .oe-face, #chat-avatar .oe-profile-mark .oe-face, #create-helper .oe-profile-mark .oe-face { width: 44px; height: 44px; }
#agent-profile .oe-profile-swatches, #chat-avatar .oe-profile-swatches, #create-helper .oe-profile-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 8px; padding: 16px 14px 10px; justify-items: center; }
#agent-profile .oe-profile-swatch, #create-helper .oe-profile-swatch { width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0; background: currentColor; }
#agent-profile .oe-profile-swatch[aria-pressed="true"], #chat-avatar .oe-profile-swatch[aria-pressed="true"], #create-helper .oe-profile-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
#agent-profile .oe-profile-reset {
  display: block; width: 100%; margin: 0; padding: 16px 22px; border: 0; border-top: 1px solid var(--px-rule, #2a2a2c);
  background: transparent; color: var(--px-text, #fff); font: inherit; font-size: 17px; text-align: left;
}
#agent-profile .oe-profile-caption { margin: 8px 4px 0; font-size: 14px; line-height: 1.35; color: var(--px-dim, #8e8e93); }
#agent-profile .oe-profile-row {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 16px 0 0; padding: 0 16px; min-height: 52px;
  border: 0; border-radius: 17px; background: var(--px-card, #1c1c1e); color: var(--px-text, #fff);
  font: inherit; font-size: 17px; text-align: left;
}
#agent-profile .oe-profile-row svg { width: 22px; height: 22px; flex: none; color: var(--px-dim, #8e8e93); }
#agent-profile .oe-profile-row span { flex: 1; }
#agent-profile .oe-profile-chevron { flex: none; color: var(--px-dim, #8e8e93); font-size: 22px; }
#agent-profile .oe-profile-routines .oe-profile-empty { margin: 0; padding: 16px 22px 12px; font-size: 17px; color: var(--px-dim, #8e8e93); }
#agent-profile .oe-profile-add {
  display: block; width: 100%; margin: 0; padding: 12px 22px 16px; border: 0; border-top: 1px solid var(--px-rule, #2a2a2c);
  background: transparent; color: #0a84ff; font: inherit; font-size: 17px; text-align: left;
}
#agent-profile .oe-profile-notify { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; margin-top: 16px; font-size: 17px; }
#agent-profile .oe-profile-share { color: #0a84ff; }
#agent-profile .oe-profile-share svg { color: #0a84ff; }
#agent-profile .oe-profile-share[aria-disabled="true"] { opacity: 1; }
#agent-instructions .oe-profile-save, #create-group .oe-profile-save {
  flex: none; min-height: 32px; padding: 6px 16px; border: 0; border-radius: 999px;
  background: #2c2c2e; color: #fff; font: inherit; font-size: 17px;
}
#create-group .oe-profile-save:disabled { opacity: 0.45; }
.oe-create-menu {
  position: fixed; top: calc(var(--oe-sat) + 58px); right: 14px; z-index: 90;
  min-width: 220px; padding: 6px 0; border-radius: 14px; background: #2c2c2e;
  box-shadow: 0 10px 32px #00000080;
}
.oe-create-menu button {
  display: block; width: 100%; margin: 0; padding: 12px 18px; border: 0; background: transparent;
  color: #fff; font: inherit; font-size: 17px; text-align: left;
}
.oe-create-menu button:hover, .oe-create-menu button:focus-visible { background: #3a3a3c; }
.oe-create-submit {
  display: block; width: 100%; margin: 28px 0 8px; min-height: 48px; border: 0; border-radius: 999px;
  background: #2c2c2e; color: #fff; font: inherit; font-size: 17px;
}
.oe-create-submit:disabled { opacity: 0.45; }
.oe-create-to {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 10px; padding: 0 14px;
  border-radius: 12px; background: var(--px-card, #1c1c1e);
}
.oe-create-to label { flex: none; color: var(--px-dim, #8e8e93); font-size: 17px; }
.oe-create-to input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 17px; padding: 10px 0;
}
.oe-create-to input::placeholder { color: var(--px-dim, #8e8e93); }
.oe-create-list { display: flex; flex-direction: column; }
.oe-create-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 8px 4px;
  border: 0; background: transparent; color: #fff; font: inherit; font-size: 17px; text-align: left;
}
.oe-create-pick[aria-pressed="true"] { color: #fff; }
.oe-create-pick .oe-face { width: 36px; height: 36px; flex: none; }
.oe-create-pick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-create-pick-check { flex: none; width: 1.1rem; color: #0a84ff; visibility: hidden; }
.oe-create-pick[aria-pressed="true"] .oe-create-pick-check { visibility: visible; }
#agent-instructions textarea {
  width: 100%; min-height: 180px; box-sizing: border-box; margin: 8px 0 0; padding: 16px 18px;
  border: 0; border-radius: 18px; background: var(--px-card, #1c1c1e); color: var(--px-text, #fff);
  font: inherit; font-size: 17px; line-height: 1.35; resize: vertical;
}
.oe-screen-body { padding: 0 0 22px; }
#computers .oe-cp-header, #files .oe-cp-header, #tasks .oe-cp-header { display: none; } /* the sheet's own back-row titles it */
#computers .oe-cp-body, #files .oe-cp-body, #tasks .oe-cp-body { padding: 0; }
#computers .oe-cp-card { background: var(--px-card); border: 0; border-radius: 17px; }
/* Connected apps: back 38 at (22,22), title 19 semibold 14 right; pill 37 #1c1c1e, icons 17 overlapping 6; search 37 #1c1c1e
   with a magnifier; section header 14 #8e8e93 + View all 15; rows pitch 80, icon 32 r7, name 17 semibold, sub 15 two lines,
   chips 26 #2c2c2e + green check; buttons 28 tall, 24 side padding, white/black or #2c2c2e/#8e8e93. */
#connected-apps .oe-ca-header { padding: 0 0 14px; gap: 14px; }
#connected-apps .oe-ca-back { width: 38px; height: 38px; min-width: 38px; border: 0; background: var(--px-card); color: var(--px-text); font-size: 26px; }
#connected-apps .oe-ca-header h2 { font-size: 19px; font-weight: 600; color: var(--px-text); }
#connected-apps .oe-ca-pill { height: 37px; padding: 0 14px 0 10px; gap: 8px; border: 0; background: var(--px-card); color: var(--px-text); font-size: 17px; }
#connected-apps .oe-ca-pill-icon { width: 17px; height: 17px; border-radius: 4px; margin: 0; }
#connected-apps .oe-ca-pill-icon + .oe-ca-pill-icon { margin-left: -6px; }
#connected-apps .oe-ca-pill span:last-child { display: inline; }
#connected-apps .oe-ca-search { padding: 0 0 18px; }
#connected-apps .oe-ca-search-input {
  height: 37px; padding: 0 14px 0 38px; border: 0; border-radius: 999px; background: var(--px-card); color: var(--px-text); font-size: 17px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat; background-size: 17px 17px; background-position: 14px center;
}
#connected-apps .oe-ca-search-input::placeholder { color: var(--px-dim); }
#connected-apps .oe-ca-body { padding: 0; }
#connected-apps .oe-ca-section { margin-bottom: 18px; }
#connected-apps .oe-ca-section-head h3 { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--px-dim); }
#connected-apps .oe-ca-viewall { font-size: 15px; color: var(--px-text); padding: 6px 0; }
#connected-apps .oe-ca-list { gap: 0; }
#connected-apps .oe-ca-row { min-height: 80px; box-sizing: border-box; padding: 12px 0; gap: 14px; border: 0; border-radius: 0; background: transparent; }
#connected-apps .oe-ca-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 7px; background: #fff; }
#connected-apps .oe-ca-name { font-size: 17px; font-weight: 600; color: var(--px-text); }
#connected-apps .oe-ca-line { font-size: 15px; line-height: 20px; color: var(--px-dim); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#connected-apps .oe-ca-chips { gap: 6px; margin-top: 8px; }
#connected-apps .oe-ca-chip { height: 26px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; background: var(--px-chip); color: var(--px-text); font-size: 15px; }
#connected-apps .oe-ca-chip--ok::after { content: "✓"; color: var(--px-on); font-weight: 700; }
#connected-apps .oe-ca-btn { height: 28px; min-height: 28px; padding: 0 24px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 600; }
#connected-apps .oe-ca-btn--connect, #connected-apps .oe-ca-btn--add-on-mac, #connected-apps .oe-ca-btn--pair-first { background: #fff; color: #000; }
#connected-apps .oe-ca-btn--added, #connected-apps .oe-ca-btn--soon { background: var(--px-chip); color: var(--px-dim); opacity: 1; }
#connected-apps-detail .oe-connector { border-top: 1px solid var(--px-rule); padding: 14px 0; }
@media (max-width: 899px) {
  #settings.oe-sheet, #settings.oe-settings-full { width: 100%; max-width: 100%; margin: 0; height: 100dvh; max-height: 100dvh; }
  /* Phone chat Settings: bottom sheet starts under the thread header so the header stays. */
  .oe-settings-scrim { top: var(--oe-thread-top-h); }
  #agent-profile.oe-settings-sheet,
  #agent-instructions.oe-settings-sheet {
    top: var(--oe-thread-top-h);
    height: auto;
    max-height: calc(100dvh - var(--oe-thread-top-h));
  }
}
@media (min-width: 900px) {
  /* Desktop account Settings: full-bleed sheet, readable column so rows scan. */
  #settings.oe-settings-full #settings-form {
    width: min(40rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}


/* wave1-390-clip */
#computers, #computers .oe-screen-body, #computers-panel, .oe-cp-body, .oe-cp-card {
  max-width: 100%;
  box-sizing: border-box;
}
#computers .oe-screen-body, #computers-panel, .oe-cp-body {
  overflow-x: hidden;
}
.oe-cp-pair-row, .oe-cp-card-head, .oe-cp-actions {
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 520px) {
  #computers, #settings.oe-sheet { overflow-x: hidden; }
  .oe-cp-name { overflow-wrap: anywhere; }
}

/* wave1-390-clip-v2 */
#computers { width: 100%; max-width: 100vw; overflow-x: hidden; }