/* D-399G: the public how-to's Ask box (server/how-to.js askBox, /assets/howto-ask.js). Theme tokens from theme.css. */
.ht-ask { margin: 48px 0 0; padding: 20px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel-bg); }
.ht-ask[hidden] { display: none; }
.ht-ask h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; }
.ht-ask-lead { margin: 0 0 14px; color: var(--txt-2); font-size: 14.5px; line-height: 1.6; }
.ht-ask-log { display: flex; flex-direction: column; gap: 10px; }
.ht-ask-log:not(:empty) { margin-bottom: 14px; }
.ht-ask-msg { max-width: 100%; padding: 10px 14px; border-radius: 12px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.ht-ask-me { align-self: flex-end; max-width: 85%; background: var(--violet); color: #fff; white-space: pre-line; }
.ht-ask-bot { align-self: flex-start; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--txt); }
.ht-ask-wait { color: var(--txt-3); }
.ht-ask-err { border-color: #e5484d; }
.ht-ask-text { margin: 0; white-space: pre-line; }
.ht-ask-lead2 { margin: 0 0 6px; color: var(--txt-2); }
.ht-ask-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ht-ask-mini { font-size: 12.5px; color: var(--txt-3); margin-inline-end: 4px; }
.ht-ask-chip { display: inline-block; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; color: inherit; text-decoration: none; }
.ht-ask-chip:hover { border-color: var(--violet); }
.ht-ask-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ht-ask-acts .btn { font-size: 14px; }
.ht-ask-form { display: flex; gap: 8px; }
.ht-ask-form input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--ink-2); color: var(--txt); font: inherit; font-size: 16px; }
.ht-ask-form input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25); }
@media (max-width: 640px) { .ht-ask { padding: 16px; } }