/* A box to ask an AI, as america.gov does: an example cycles while it is empty, the answer comes from api-ask.js. Needs ../base/base.css. */

/* the questions box, as america.gov does: an example cycles in the empty box, the answer comes from this page's text */
.ask{max-width:760px;margin:clamp(44px,5vw,72px) auto 0;display:grid;gap:14px}
.ask-t{text-align:center;font-size:var(--t-lead);font-weight:640;letter-spacing:-.02em}
.ask-bar{position:relative;display:flex;align-items:center;height:64px;padding:0 8px 0 26px;border-radius:999px;background:var(--fondo-2);box-shadow:inset 0 0 0 1.5px var(--riga-2);transition:box-shadow .25s var(--e-ui)}
.ask-bar:focus-within{box-shadow:inset 0 0 0 1.5px var(--blu-t),0 0 0 5px oklch(57% .2 258/.16)}
.ask-bar input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:calc(18 * var(--px));outline:0}
.ask-bar input:focus-visible{outline:0}
.ask-try{position:absolute;left:26px;right:74px;top:50%;transform:translateY(-50%);overflow:hidden;color:var(--ink-3);font-size:calc(18 * var(--px));white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:opacity .35s var(--e-ui)}
.ask-try.out,.ask-bar.typed .ask-try{opacity:0}
.ask-bar button{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blu);color:var(--su-blu);transition:background-color .2s var(--e-ui),transform .4s var(--e-molla)}
.ask-bar button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ask-bar button:disabled{opacity:.6}
@media (hover:hover){.ask-bar button:hover{background:var(--blu-su);transform:translateX(2px)}}
.ask-note{text-align:center;font-size:calc(14 * var(--px));color:var(--ink-3)}
.ask-answer[hidden]{display:none}
.ask-answer{display:grid;gap:10px;padding:20px 24px;border-radius:22px;background:var(--fondo-2);box-shadow:inset 0 0 0 1px var(--riga);animation:sale .6s var(--e-esce)}
.ask-answer small{font-size:calc(14 * var(--px));font-weight:600;color:var(--blu-t)}
.ask-answer p{font-size:calc(17.5 * var(--px));line-height:1.5;color:var(--ink);text-wrap:pretty}
.ask-answer .btn-link{justify-self:start;min-height:0;font-size:calc(16 * var(--px))}
.ask-dots{display:flex;gap:6px;padding:6px 0}
.ask-dots i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);animation:punto 1s var(--e-ui) infinite}
.ask-dots i:nth-child(2){animation-delay:.15s}.ask-dots i:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}

@media (max-width:760px){
  .ask-bar{height:58px;padding-left:20px}
  .ask-bar input,.ask-try{font-size:calc(16 * var(--px))}
  .ask-try{left:20px;right:64px}
  .ask-bar button{width:44px;height:44px}
}

/* the same box floating at the bottom of the screen once the first screen is past (america.gov's "Ask anything"); its
   answer opens above it */
.ask-fisso{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:95;width:min(640px,100% - 24px);margin:0;gap:10px;transform:translate(-50%,calc(100% + 48px));opacity:0;transition:transform .6s var(--e-molla),opacity .3s var(--e-ui)}
.ask-fisso.su{transform:translate(-50%,0);opacity:1}
.ask-fisso.su.via{transform:translate(-50%,calc(100% + 48px));opacity:0;pointer-events:none}   /* a block with its own field is on screen */
.immersivo .ask-fisso.su:not(:focus-within){transform:translate(-50%,calc(100% + 48px));opacity:0;pointer-events:none}   /* a sentence as big as the screen has it to itself (base.js), unless someone is typing */
.ask-fisso .ask-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ask-fisso .ask-note{display:none}
.ask-fisso .ask-bar{height:60px;background:oklch(21% .05 262/.94);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.22),inset 0 0 0 1px oklch(100% 0 0/.12),0 24px 60px -24px oklch(5% .05 262/.95)}
.ask-fisso .ask-answer{order:-1;position:relative;max-height:min(46vh,420px);overflow:auto;padding-right:52px;background:oklch(21% .05 262/.96);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.2),inset 0 0 0 1px oklch(100% 0 0/.1),0 24px 60px -24px oklch(5% .05 262/.95)}
/* over a day section (base.js puts .sul-giorno on it): milk glass */
.ask-fisso.sul-giorno .ask-bar,.ask-fisso.sul-giorno .ask-answer{background:oklch(100% 0 0/.84);box-shadow:inset 0 1px 0 oklch(100% 0 0),0 0 0 1px oklch(28% .04 262/.1),0 24px 60px -24px oklch(30% .08 262/.4)}
.ask-fisso.sul-giorno .ask-answer{background:oklch(100% 0 0/.92)}
.ask-chiudi{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--ink-3);font-size:calc(22 * var(--px));line-height:1}
@media (hover:hover){.ask-chiudi:hover{background:var(--piano-2);color:var(--ink)}}