/* Ask Claude (round 27): the chat panel (js/assist.js). Full screen on phones, a side panel from 900 px; the
   RiftRoster tokens of app.css. */
.ask-btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; font-size: 0.85rem;
           border-color: rgba(167, 139, 250, 0.45); background: rgba(124, 58, 237, 0.16); cursor: pointer; }
.ask-btn:hover { background: rgba(124, 58, 237, 0.3); }
.ask-mark { color: var(--purple-2); }
.stagec .ask-btn { margin-top: 0.4rem; }

.ask-problems { display: grid; gap: 0.5rem; }
.ask-problems h3 { margin: 0.4rem 0 0; color: var(--bad); }
.ask-problem { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: 1rem;
               border: 1px solid rgba(248, 113, 113, 0.45);
               background: linear-gradient(rgba(248, 113, 113, 0.08), rgba(248, 113, 113, 0.08)), var(--bg-1); }
.ask-problem-title { font-weight: 700; color: var(--bad); word-break: break-word; }
.ask-problem .grow, .assist .grow { flex: 1 1 auto; min-width: 0; }

dialog.assist {
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
    border: none; color: var(--text-0); background: var(--bg-0);
    display: none; flex-direction: column;
}
dialog.assist[open] { display: flex; }
dialog.assist::backdrop { background: rgba(5, 4, 9, 0.6); backdrop-filter: blur(3px); }
@media (min-width: 900px) {
    dialog.assist { left: auto; width: min(480px, 42vw); border-left: 1px solid var(--border);
                    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); }
}

.assist-head { display: flex; align-items: center; gap: 0.5rem;
               padding: calc(0.6rem + var(--safe-t)) calc(0.8rem + var(--safe-r)) 0.6rem calc(0.8rem + var(--safe-l));
               border-bottom: 1px solid var(--border);
               background: linear-gradient(to bottom, rgba(124, 58, 237, 0.18), rgba(12, 10, 18, 0.9)); }
.assist-head h2 { margin: 0; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.assist-head .icon-btn { flex: none; min-width: var(--tap); min-height: var(--tap); font-size: 1.25rem;
                         background: transparent; border: none; color: var(--text-1); cursor: pointer; }
.assist-head .pill { margin-top: 0.2rem; }

.assist-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start;
               gap: 0.6rem; padding: 0.9rem calc(0.9rem + var(--safe-r)) 1rem calc(0.9rem + var(--safe-l)); }
.assist-body h3 { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--text-1); }
.assist-foot { display: grid; gap: 0.5rem; padding: 0.6rem calc(0.8rem + var(--safe-r)) calc(0.6rem + var(--safe-b))
               calc(0.8rem + var(--safe-l)); border-top: 1px solid var(--border); background: var(--bg-1); }
.assist-input { width: 100%; min-height: var(--tap); resize: vertical; padding: 0.65rem 0.8rem; border-radius: 0.9rem;
                border: 1px solid var(--border); background: var(--bg-0); font-size: 16px; }
.assist-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

.assist-list { display: grid; gap: 0.4rem; }
.assist-row { display: flex; align-items: center; gap: 0.6rem; min-height: var(--tap); padding: 0.55rem 0.8rem;
              border-radius: 0.9rem; border: 1px solid var(--border); background: var(--bg-1); text-align: left;
              cursor: pointer; }
.assist-row:hover { border-color: var(--purple-2); }

.assist-stream { display: grid; gap: 0.45rem; }
.assist-msg { max-width: 92%; padding: 0.6rem 0.85rem; border-radius: 1.1rem; line-height: 1.45; overflow-wrap: anywhere; }
.assist-msg p { margin: 0 0 0.5rem; } .assist-msg p:last-child { margin-bottom: 0; }
.assist-msg ul { margin: 0.2rem 0 0.5rem; padding-left: 1.2rem; }
.assist-msg code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85em; }
.assist-msg code { padding: 0.05rem 0.3rem; border-radius: 0.35rem; background: rgba(167, 139, 250, 0.14); }
.assist-msg.me { justify-self: end; white-space: pre-wrap; color: #fff;
                 background: linear-gradient(135deg, var(--purple-1), #9333ea); border-bottom-right-radius: 0.35rem; }
.assist-msg.claude { justify-self: start; background: var(--bg-2); border: 1px solid var(--border);
                     border-bottom-left-radius: 0.35rem; }
.assist-msg.error { justify-self: stretch; max-width: none; color: var(--bad); border: 1px solid rgba(248, 113, 113, 0.5);
                    background: rgba(248, 113, 113, 0.08); }
.assist-tool { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.78rem; color: var(--text-2);
               padding-left: 0.4rem; overflow-wrap: anywhere; }
.assist-tool.blocked { color: var(--warn); }
.assist-note { text-align: center; }
.assist-thinking { animation: assist-pulse 1.4s ease-in-out infinite; }
@keyframes assist-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .assist-thinking { animation: none; } }

.assist-code { margin: 0.3rem 0; padding: 0.6rem 0.7rem; border-radius: 0.7rem; background: var(--bg-0);
               border: 1px solid var(--border); overflow-x: auto; font-size: 0.78rem; line-height: 1.4; white-space: pre; }
.assist-code.diff .a { color: var(--good); } .assist-code.diff .d { color: var(--bad); }
.assist-code.diff .h { color: var(--info); } .assist-code.diff .f { color: var(--text-1); font-weight: 700; }

.assist-card { display: grid; gap: 0.45rem; padding: 0.85rem; border-radius: 1.1rem; border: 1px solid var(--purple-2);
               background: linear-gradient(rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.04)), var(--bg-1);
               box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.assist-card .row { display: flex; align-items: center; gap: 0.5rem; }
.assist-card p { margin: 0; }
.assist-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; font-size: 0.82rem; }
.assist-files li { display: flex; gap: 0.4rem; } .assist-files .mono { overflow-wrap: anywhere; }
.assist-files .add { color: var(--good); } .assist-files .del { color: var(--bad); }
.assist-diff { max-height: 50vh; overflow: auto; }
.assist-ok { color: var(--good); } .assist-ok ul { margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--text-1); }
.assist-warn { color: var(--warn); margin: 0; }
.assist-err { color: var(--bad); margin: 0; }
.bad-text { color: var(--bad); }
.spinner-sm { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em; border-radius: 50%;
              border: 2px solid rgba(167, 139, 250, 0.3); border-top-color: var(--purple-2);
              animation: assist-spin 0.9s linear infinite; }
@keyframes assist-spin { to { transform: rotate(360deg); } }