/* The chat's Ask AI tab (public/assist.js), in the app and on the home page. */
.as-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #F5F5FC; }
.as-pane[hidden] { display: none; }
.as-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 8px; }
.as-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font: 15px/1.45 Inter, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; animation: as-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.as-bot { align-self: flex-start; border: 1px solid #E5E7EB; border-bottom-left-radius: 4px; background: #fff; color: #171719; }
.as-me { align-self: flex-end; border-bottom-right-radius: 4px; background: #3B40D5; color: #fff; }
@keyframes as-in { from { opacity: 0; transform: translateY(8px); } }
.as-vid { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 10px; border-radius: 10px; background: #000; }
.as-yt { position: relative; padding: 0; border: 0; overflow: hidden; cursor: pointer; }
.as-yt img, .as-yt iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.as-yt i { position: absolute; left: 50%; top: 50%; width: 56px; height: 40px; margin: -20px 0 0 -28px; border-radius: 10px; background: #f00; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.as-yt i::after { content: ""; position: absolute; left: 22px; top: 12px; border-left: 15px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.as-yt:hover i { background: #cc0000; }
.as-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.as-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9D9FEA; animation: as-dot 1s ease-in-out infinite; }
.as-typing i:nth-child(2) { animation-delay: .15s; }
.as-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes as-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.as-acts, .as-chips { display: flex; flex-wrap: wrap; gap: 6px; animation: as-in .32s .08s cubic-bezier(.2, .8, .2, 1) both; }
.as-act { padding: 8px 14px; border: 0; border-radius: 999px; background: #3B40D5; color: #fff; font: 600 13px Inter, sans-serif; cursor: pointer; }
.as-act:hover { background: #2F33AA; }
.as-chips button { padding: 8px 13px; border: 1px solid #C8D6F7; border-radius: 999px; background: #fff; color: #3B40D5; font: 600 13px Inter, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.as-chips button:hover { border-color: #3B40D5; background: #EBECF9; }
.as-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 12px; padding: 6px 6px 6px 14px; border: 1px solid #C2C2C7; border-radius: 22px; background: #fff; }
.as-form:focus-within { border-color: #3B40D5; box-shadow: 0 0 0 3px #EBECF9; }
.as-form textarea { flex: 1; min-height: 24px; max-height: 120px; margin: 5px 0; padding: 0; border: 0; outline: 0; resize: none; background: none; font: 15px/1.45 Inter, sans-serif; color: #171719; }
.as-send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #3B40D5; color: #fff; cursor: pointer; }
.as-send:disabled { opacity: .5; cursor: default; }
.as-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .as-msg, .as-acts, .as-chips, .as-typing i { animation: none !important; } }