/* ============================================================
   Assistant — panneau de la page « Actions à réaliser »
   ============================================================ */
.as-panel{ margin-bottom:16px }

.as-fil{ display:flex; flex-direction:column; gap:7px; margin-bottom:12px; max-height:230px; overflow-y:auto; overscroll-behavior:contain }
.as-bulle{ font-size:13px; line-height:1.5; padding:9px 12px; border-radius:12px; max-width:88%; word-break:break-word }
.as-bulle.moi{ align-self:flex-end; background:var(--accent); color:var(--paper); border-bottom-right-radius:4px }
.as-bulle.lui{ align-self:flex-start; background:var(--surface-2); border-bottom-left-radius:4px }

.as-attente{ font-size:12.5px; color:var(--ink-faint); font-style:italic; margin-bottom:10px }

/* La proposition : ce que l'application VA faire, formulé par elle-même. */
.as-proposition{ background:var(--info-bg); border-radius:12px; padding:12px 14px; margin-bottom:12px }
.as-proposition.sensible{ background:var(--warn-bg) }
.as-prop-titre{ font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-soft) }
.as-prop-liste{ margin:7px 0 0; padding-left:18px; font-size:13.5px; line-height:1.6 }
.as-prop-act{ display:flex; gap:8px; justify-content:flex-end; margin-top:11px; flex-wrap:wrap }

/* Sur la page de Kelly, la conversation occupe la place : c'est ce qu'on
   vient y faire. Dans le panneau de la page Actions, elle reste discrète. */
.as-pleine .as-fil{ max-height:min(52vh,520px) }

.as-exemples{ display:grid; gap:14px }
.as-ex-bloc{ display:flex; flex-direction:column; gap:6px }
.as-ex-titre{ font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-faint) }
.as-ex{ text-align:left; font-size:13px; line-height:1.5; padding:9px 12px; border-radius:10px;
        background:var(--surface-2); border:1px solid var(--line-soft); color:var(--ink-soft); cursor:pointer }
.as-ex:hover{ border-color:var(--accent); color:var(--ink) }

.as-saisie-ligne{ display:flex; gap:8px; align-items:center }
.as-saisie-ligne input{ flex:1; min-width:0; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); font-size:14px }
.as-saisie-ligne input:focus{ outline:none; border-color:var(--accent); background:var(--surface) }
/* Le micro pulse pendant l'écoute : sans retour visible, on ne sait pas si
   l'appareil entend, et on répète sa phrase. */
.as-micro{ animation:none }
.as-saisie-ligne .btn.danger.as-micro{ animation:as-pulse 1.2s ease-in-out infinite }
@keyframes as-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

@media (max-width:720px){
  .as-saisie-ligne{ flex-wrap:wrap }
  .as-saisie-ligne input{ flex:1 1 100%; order:1 }
  .as-saisie-ligne .btn{ order:2; flex:1 }
  .as-bulle{ max-width:100% }
  .as-prop-act .btn{ flex:1 }
}