/* ============================================================
   tryit.css: "Try it" on the Receptionist page (tryit.js, 13 October 2026)

   One row above the cards: a label, a field, a button. The answers open under it in the Inbox's own bubbles
   (.msg .bub from app.css), so nothing here brings a new colour. The card's corner is 14px and the row sits 6px
   inside it, so the field and the button take 8px (14 - 6). It is as wide as what is under it: the section
   list (168) + the gap (40) + the cards (720), and the cards alone once the list becomes tabs.
   ============================================================ */
.try{max-width:928px;margin-bottom:20px;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);box-shadow:var(--edge)}
.try-f{display:flex;align-items:center;gap:8px;padding:6px}
.try-l{display:inline-flex;align-items:center;gap:8px;flex:none;padding:0 4px 0 10px;font-size:var(--fs-sm);font-weight:600;color:var(--ink);white-space:nowrap}
.try-l svg.i{width:16px;height:16px;stroke-width:2;color:var(--ink-3)} /* beside 600-weight text */
.try-f .input{flex:1;min-width:0;height:36px;border-radius:var(--r-btn)}
.try-f .btn{flex:none;height:36px;padding:0 14px;border-radius:var(--r-btn)}

.try-log{display:flex;flex-direction:column;gap:8px;max-height:min(38vh,280px);overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 4px;border-top:1px solid var(--line)}
.try-log .msg{max-width:min(74%,620px)}
.try-log .msg.us + .msg.them,.try-log .try-note + .msg.them,.try-log .try-err + .msg.them{margin-top:8px}
.try-note{align-items:center;gap:8px;margin-top:-2px;font-size:var(--fs-sm)}
.try-n{color:var(--ink-2);line-height:1.45}
.try-add{padding:0;border:0;background:none;font:inherit;font-size:var(--fs-sm);cursor:pointer}
/* a link that stands alone is a control: 24px to press with a mouse, 44px under a thumb (the area is widened, the words stay where they are) */
.try-note .link{display:inline-flex;align-items:center;min-height:24px;position:relative}
@media (pointer:coarse){.try-note .link::after{content:"";position:absolute;inset:-10px 0}}
.try-err{align-self:flex-start;font-size:var(--fs-sm);line-height:1.45;color:var(--err-ink)}
.try-foot{display:flex;justify-content:flex-end;padding:4px 8px 8px}

/* waiting for the answer: three dots that breathe, and still dots when motion is turned down */
.try-wait{display:inline-flex;align-items:center;gap:4px;min-height:21px}
.try-wait i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);opacity:.45}
@media (prefers-reduced-motion:no-preference){
  .try-wait i{animation:try-dot 1.2s ease-in-out infinite}
  .try-wait i:nth-child(2){animation-delay:.15s}
  .try-wait i:nth-child(3){animation-delay:.3s}
}
@keyframes try-dot{0%,60%,100%{opacity:.3}30%{opacity:1}}

@media (max-width:1000px){.try{max-width:720px}}

/* a phone: the label gives its place to the field, which already says what to type; thumbs get 44px */
@media (max-width:720px){
  .try{margin-bottom:12px}
  .try-l{padding-inline-start:8px}
  .try-l span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .try-f .input{height:44px} /* the field keeps 44 (16px text, no zoom); Send stays 36 to see and gets 44 from its edge */
  .try-log{padding:12px 12px 4px}
  .try-log .msg{max-width:88%}
}