/* Agent Tom (/product/agent-tom). Shared parts are in css/tomnext.css.
   Every name and figure in these visuals is fictitious. */

/* Question and answer, used in the hero */
.tn-at-q,.tn-at-a{display:flex;align-items:flex-start;gap:10px}
.tn-at-q p{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border-top-left-radius:3px;background:var(--tn-mist);color:var(--tn-midnight)}
.tn-at-a{margin-top:16px}
.tn-at-a-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;min-width:0}
.tn-at-a-body p{color:var(--tn-midnight);line-height:1.55}
.tn-at-avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--tn-volt-blue);color:var(--tn-white);font-size:11px;font-weight:700;letter-spacing:.02em}
.tn-at-avatar--you{background:var(--tn-fog);color:var(--tn-midnight)}

/* Hero: the answer beside the page it cites */
.tn-at-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,180px);gap:16px;align-items:center}
.tn-at-page{min-height:250px}
.tn-at-page .tn-doc-page{color:var(--tn-volt-blue-dark);font-weight:600}
@media(max-width:599px){
  .tn-at-hero-grid{grid-template-columns:minmax(0,1fr)}
  .tn-at-page{min-height:0;margin:0 24px}
  .tn-at-page .tn-doc-bar:nth-of-type(n+8){display:none}
}