/* Ask Pin (ask-pin.js). The dialog frame, head and options come from guided-start.css so Pin's two dialogs match;
   this sheet adds the answer box, the Say it button, the summary list and the next steps. Colours and type from tokens.css. */
.ap-head-actions{display:flex;gap:8px;align-self:flex-start;flex-wrap:wrap;justify-content:flex-end}
.ap-talk[aria-pressed="true"]{color:#fff;border-color:var(--ev-sky)}
.ap-ack{margin:6px 0 0;font-size:var(--text-sm);font-weight:650;color:var(--accentText)}
.ap-dialog .eg-q:focus{outline:none}
.ap-hint{margin:-6px 0 14px;font-size:var(--text-sm);color:var(--dim);line-height:var(--leading-normal)}
.ap-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ap-choice{min-height:56px;text-align:center}
.ap-answer{display:flex;gap:10px;align-items:flex-start;margin-top:12px}
.ap-choices+.ap-answer{margin-top:14px}
.ap-input{flex:1;min-width:0;font:inherit;font-size:var(--text-base);color:var(--field-ink);background:var(--panel2);border:1.5px solid var(--field-border);border-radius:var(--btn-r);padding:10px 12px;min-height:var(--btn-h)}
textarea.ap-input{resize:vertical;line-height:var(--leading-normal)}
.ap-input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--accent)}
.ap-btn{font:inherit;font-size:var(--text-ui);font-weight:650;min-height:var(--btn-h);padding:8px 16px;border-radius:var(--btn-r);border:1px solid var(--line2);background:var(--panel2);color:var(--accentText);cursor:pointer;white-space:nowrap}
.ap-btn:hover{border-color:var(--accent)}
.ap-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.ap-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.ap-foot-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ap-mic{font:inherit;font-size:var(--text-ui);font-weight:650;display:inline-flex;align-items:center;gap:8px;min-height:var(--btn-h-sm);padding:6px 14px 6px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);color:var(--ev-navy);cursor:pointer}
.ap-mic::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.ap-mic.on{border-color:var(--accent);background:var(--panel)}
.ap-mic.on::before{background:var(--ev-bad);animation:apPulse 1.1s ease-in-out infinite}
@keyframes apPulse{50%{transform:scale(1.35);opacity:.6}}
@media(prefers-reduced-motion:reduce){.ap-mic.on::before{animation:none}}
.ap-sorry{margin:12px 0 0;font-size:var(--text-sm);font-weight:600;color:var(--ev-warn)}
.ap-mic-note{margin:12px 0 0;font-size:var(--text-xs);color:var(--dim);line-height:var(--leading-normal)}
.ap-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ap-list li{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);font-size:var(--text-sm)}
.ap-list li:first-child{border-top:0}
.ap-list span{color:var(--dim)}
.ap-list b{color:var(--ev-navy);font-weight:650;overflow-wrap:anywhere;white-space:pre-line}
.ap-list .eg-link{padding:4px 0}
.ap-next-steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ap-pin[data-mood="listening"] svg{animation:apBob 1.4s ease-in-out infinite}
@keyframes apBob{50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.ap-pin[data-mood="listening"] svg{animation:none}}
@media(max-width:700px){
 .ap-head-actions{flex-direction:column;align-items:stretch}
 .ap-choices{grid-template-columns:1fr 1fr}
 .ap-answer{flex-wrap:wrap}
 .ap-answer .ap-next{width:100%}
 .ap-list li{grid-template-columns:1fr auto;gap:2px 12px}
 .ap-list span{grid-column:1/-1;font-size:var(--text-xs)}
}