/* Isolated, nonmodal widget; native gallery dialogs stay in the browser top layer. */
.ask-howard { position: fixed; inset: 0; z-index: 1020; pointer-events: none; }
.ask-howard button, .ask-howard-panel { pointer-events: auto; }
.ask-howard-launcher { position: absolute; right: max(var(--ask-howard-right, 12px), env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); transform: translateY(calc(12px - var(--ask-howard-launcher-bottom, var(--ask-howard-bottom, 12px)))); width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--sis-accent); border-radius: 50%; background: var(--sis-surface); color: var(--sis-accent); box-shadow: 0 6px 24px rgb(0 0 0 / 15%); }
.ask-howard:not([hidden]) ~ .back-to-top { right: max(100px, calc(env(safe-area-inset-right) + 100px)); }
.ask-howard-panel { position: absolute; right: max(var(--ask-howard-right, 12px), env(safe-area-inset-right)); bottom: max(var(--ask-howard-bottom, 12px), env(safe-area-inset-bottom)); width: min(400px, var(--ask-howard-width, calc(100% - 24px))); height: min(620px, var(--ask-howard-height, calc(100dvh - 120px))); display: grid; grid-template-rows: auto minmax(80px, 1fr) auto auto auto; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--sis-line); border-radius: 18px; background: var(--sis-surface); color: var(--sis-ink); box-shadow: 0 12px 42px rgb(0 0 0 / 20%); font-size: 0.9375rem; line-height: 1.6; }
.ask-howard-header { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid var(--sis-line); }
.ask-howard-panel { grid-template-columns: minmax(0, 1fr); }
.ask-howard-panel > * { min-width: 0; }
.ask-howard-header h2 { margin: 0; font-size: 1rem; line-height: 1.45; flex: 1; }
.ask-howard-close { width: 36px; height: 36px; flex: none; border: 1px solid var(--sis-line); border-radius: 8px; background: var(--sis-surface); color: var(--sis-ink); font-size: 1.25rem; line-height: 1; }
.ask-howard-conversation { min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.ask-howard-welcome { margin: 0; color: var(--sis-muted); }
.ask-howard-message { margin: 0 0 16px; padding: 12px; border: 1px solid var(--sis-line); border-radius: 10px; }
.ask-howard-user { background: var(--sis-soft); }
.ask-howard-speaker { color: var(--sis-accent); font-size: 0.8125rem; font-weight: 650; margin: 0 0 6px; }
.ask-howard-message-text { margin: 0; white-space: pre-wrap; }
.ask-howard-sources { margin-top: 10px; color: var(--sis-muted); font-size: 0.8125rem; }
.ask-howard-sources a { display: inline-block; margin: 0 10px 4px 0; }
.ask-howard-suggestions { display: grid; gap: 6px; padding: 0 16px 12px; }
.ask-howard-followups { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sis-line); }
.ask-howard-suggestion { text-align: left; border: 1px solid var(--sis-line); border-radius: 8px; padding: 6px 10px; background: var(--sis-surface); color: var(--sis-accent); font-size: 0.8125rem; line-height: 1.5; }
.ask-howard-form { border-top: 1px solid var(--sis-line); padding: 12px 16px 0; }
.ask-howard-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.ask-howard-entry { display: flex; align-items: stretch; gap: 8px; }
.ask-howard-input { flex: 1; min-width: 0; resize: none; border: 1px solid var(--sis-line); border-radius: 8px; background: var(--sis-surface); color: var(--sis-ink); padding: 8px 10px; font: inherit; font-size: 1rem; line-height: 1.5; }
.ask-howard-input::placeholder { color: var(--sis-muted); opacity: 1; }
.ask-howard-send { align-self: stretch; border: 1px solid #006e88; border-radius: 8px; padding: 8px 12px; background: #006e88; color: #fff; font-size: 0.875rem; font-weight: 600; }
.ask-howard-toolbar { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: var(--sis-muted); font-size: 0.8125rem; }
.ask-howard-clear { padding: 4px 0; border: 0; background: transparent; color: var(--sis-accent); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ask-howard-status { min-height: 24px; font-size: 0.8125rem; color: var(--sis-muted); overflow-wrap: anywhere; }
.ask-howard-spinner { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 2px solid var(--sis-line); border-top-color: var(--sis-accent); border-radius: 50%; }
.ask-howard-notes { padding: 8px 16px 14px; color: var(--sis-muted); font-size: 0.8125rem; line-height: 1.5; }
.ask-howard-notes p { margin: 0; }
.ask-howard-notes p + p { margin-top: 6px; }
.ask-howard button:disabled { cursor: wait; }
.ask-howard-send:disabled { background: #526c80; border-color: #526c80; }
.ask-howard button { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.ask-howard-close:hover, .ask-howard-suggestion:hover { border-color: var(--sis-accent); background: var(--sis-soft); }
.ask-howard-launcher:hover { box-shadow: 0 8px 28px rgb(0 110 136 / 20%); }
.ask-howard-send:hover:not(:disabled) { background: #005970; }
.ask-howard-compact .ask-howard-suggestions { display: none; }
.ask-howard-compact .ask-howard-header { position: sticky; top: 0; z-index: 1; background: var(--sis-surface); padding: 8px 12px; }
.ask-howard-compact .ask-howard-form { padding: 8px 12px 0; }
@media (prefers-reduced-motion: no-preference) {
    .ask-howard-panel:not([hidden]) { animation: ask-howard-enter 180ms cubic-bezier(0.22, 1, 0.36, 1); }
    .ask-howard-spinner:not([hidden]) { animation: ask-howard-spin 800ms linear infinite; }
    .ask-howard-followups:not([hidden]) { animation: ask-howard-followup-enter 180ms cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes ask-howard-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ask-howard-spin { to { transform: rotate(360deg); } }
@keyframes ask-howard-followup-enter { from { transform: translateY(4px); } to { transform: none; } }
@media (max-height: 600px) {
    .ask-howard-header { padding: 10px 12px; }
    .ask-howard-conversation { padding: 10px 12px; }
    .ask-howard-suggestions { gap: 4px; padding: 0 12px 8px; }
    .ask-howard-form { padding: 8px 12px 0; }
    .ask-howard-notes { padding: 6px 12px 10px; font-size: 0.8125rem; }
}