/* The assistant panel (web/agent-panel.ts). Uses the tokens from /styles.css. */
.ra-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 60; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,.08); }
.ra-panel.hidden { display: none; }
@media (min-width: 1100px) { body.ra-open .main { margin-right: 420px; } }
.ra-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ra-head b { font-size: 14px; }
.ra-convs { flex: 1; min-width: 0; height: 32px; font-size: 13px; }
.ra-btn { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.ra-btn:hover { background: var(--hover); }
.ra-btn.primary { background: var(--text); color: var(--surface); border-color: var(--text); }
.ra-ctx { padding: 6px 14px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ra-ctx.hidden { display: none; }
.ra-log { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ra-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ra-msg p { margin: 0 0 6px; } .ra-msg p:last-child { margin-bottom: 0; } .ra-msg ul { margin: 4px 0 6px; padding-left: 18px; }
.ra-msg code { font-size: 12px; background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.ra-msg.me { align-self: flex-end; background: var(--text); color: var(--surface); }
.ra-msg.ai { align-self: flex-start; background: var(--surface-2); }
.ra-msg.err { align-self: stretch; background: var(--bad-soft); color: var(--bad); }
.ra-typing { color: var(--muted); font-style: italic; }
.ra-tool { align-self: flex-start; font-size: 12px; color: var(--muted); padding: 2px 8px; border-left: 2px solid var(--border); }
.ra-tool.error { color: var(--bad); } .ra-tool.declined { text-decoration: line-through; }
.ra-empty { color: var(--muted); font-size: 13px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ra-chip { font: inherit; font-size: 12.5px; text-align: left; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.ra-chip:hover { background: var(--hover); }
.ra-pending { margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--warn); background: var(--warn-soft); font-size: 13px; }
.ra-pending.hidden { display: none; }
.ra-pending ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 4px; }
.ra-pending label { display: flex; gap: 8px; align-items: flex-start; flex-direction: row; color: var(--text); font-size: 13px; }
.ra-row { display: flex; gap: 8px; }
.ra-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.ra-form textarea { flex: 1; resize: none; font: inherit; font-size: 13.5px; }
.ra-send { font: inherit; font-size: 13px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--text); color: var(--surface); cursor: pointer; }
.ra-foot { margin: 0; padding: 0 14px 10px; font-size: 11.5px; color: var(--muted); }