/* Refinements from the 2026-10-30 app review: calmer proportions, nothing hidden behind other things,
   one clear main action per screen. Loaded last so it settles the layered v8 styles. */

/* ---------- sidebar: a slim upgrade row that never covers the list ---------- */
.side .upgrade-cta { margin: 6px 10px 2px; width: calc(100% - 20px); padding: 7px 10px; border-radius: 10px; min-height: 0; font-size: 13px; }
.side .upgrade-cta .uc-sub { display: none; }
.side .upgrade-cta .uc-logo { width: 22px; height: 22px; border-radius: 6px; }
.side .wm-bar { padding-top: 2px; padding-bottom: 2px; }
.side .nav-sub[data-group="More"] { margin-top: 6px; }

/* ---------- home ---------- */
.home-calm { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--hover); color: var(--text2); font-size: 13.5px; }
.home .hint { color: var(--text3); }
.home .suggest { margin-top: 18px; }

/* ---------- agent intro pages: who they are and how to start, above the fold ---------- */
.content.agent-intro { text-align: left; max-width: 920px; margin: 0 auto; padding: 40px 32px 120px; }
.agent-intro .welcome-orb-wrap {
  display: grid !important; grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: 'face info' 'face cta' 'cards cards';
  align-items: center; column-gap: 36px; row-gap: 18px !important; padding: 0 !important;
}
.agent-intro .welcome-orb-wrap > :nth-child(1) { grid-area: face; justify-self: center; transform: scale(.82); transform-origin: center; margin: -18px 0; }
.agent-intro .welcome-orb-wrap > :nth-child(2) { grid-area: info; align-self: end; }
.agent-intro .welcome-orb-wrap > :nth-child(3) { grid-area: cards; max-width: none !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin-top: 10px; }
.agent-intro .welcome-orb-wrap > :nth-child(4) { grid-area: cta; justify-self: start; align-self: start; margin-top: 0 !important; padding: 11px 26px !important; border-radius: 999px; }
.agent-intro .welcome-orb-wrap > div > div[style*="font-size:22px"] { font-size: 36px !important; margin-bottom: 10px !important; }
.agent-intro .welcome-orb-wrap > div > div[style*="max-width"] { margin: 12px 0 0 !important; max-width: 52ch !important; font-size: 16px !important; color: var(--text2) !important; }
.agent-intro .welcome-orb-wrap > div:nth-child(3) > .card { padding: 14px !important; border-radius: 14px !important; min-height: 96px; transition: border-color .15s, transform .15s; }
.agent-intro .welcome-orb-wrap > div:nth-child(3) > .card:hover { border-color: var(--text3) !important; transform: translateY(-1px); }
@media (max-width: 860px) {
  .content.agent-intro { padding: 20px 16px 110px; }
  .agent-intro .welcome-orb-wrap { grid-template-columns: 1fr; grid-template-areas: 'face' 'info' 'cta' 'cards'; text-align: center; }
  .agent-intro .welcome-orb-wrap > :nth-child(1) { transform: scale(.7); margin: -30px 0 -26px; }
  .agent-intro .welcome-orb-wrap > :nth-child(4) { justify-self: center; }
  .agent-intro .welcome-orb-wrap > div > div[style*="max-width"] { margin: 10px auto 0 !important; }
  .agent-intro .welcome-orb-wrap > :nth-child(3) { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- friendly notes in place of raw errors ---------- */
.cg-note { text-align: center; padding: 48px 20px; color: var(--text2); }
.cg-note h3 { margin: 0 0 6px; font-size: 17px; color: var(--text); }
.cg-note p { margin: 0 auto 14px; max-width: 46ch; line-height: 1.55; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .composer .comp-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .composer .comp-bar::-webkit-scrollbar { display: none; }
  .composer .comp-bar .pj-home-chip, .composer .comp-bar .comp-voice-btn, .composer .comp-bar .perm-wrap { display: none; }
  .composer .comp-bar [data-v8c="mic"] { display: inline-flex; }
  .composer textarea { min-height: 52px; }
  .home .home-head .wordmark { font-size: 24px; }
}

/* One microphone: when voice conversation is available, it also fills the box, so dictation hides.
   Phones hide the voice button above and keep dictation, so this applies only on wider screens. */
@media (min-width: 641px) {
  .composer .comp-voice-btn:not([style*="none"]) ~ [data-v8c="mic"] { display: none; }
}

/* ---------- top bar trail ---------- */
#crumb .crumb-parent { color: var(--text3); font-weight: 500; }
#crumb .crumb-sep { color: var(--text3); margin: 0 7px; }