.advisor-panel {
  margin-top: 16px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

.advisor-heading,
.advisor-latest-heading,
.advisor-controls,
.advisor-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.advisor-heading { cursor: pointer; list-style: none; }
.advisor-heading::-webkit-details-marker { display: none; }
.advisor-heading::before { content: "▶"; color: var(--accent-dark); font-size: .8rem; }
.advisor-panel[open] > .advisor-heading { margin-bottom: 12px; }
.advisor-panel[open] > .advisor-heading::before { content: "▼"; }
.advisor-heading #advisor-status { margin-left: auto; text-align: right; }
.advisor-heading h2 { margin: 0; }
.advisor-kicker,
.advisor-label,
.advisor-muted-label,
.advisor-chat-role {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#advisor-status { color: var(--muted); font-size: .78rem; }
#advisor-status[data-state="ready"] { color: var(--accent-dark); }
#advisor-status[data-state="error"],
#advisor-status[data-state="stale"] { color: var(--warn); }

.advisor-body { display: grid; grid-template-columns: minmax(240px, 1.1fr) minmax(240px, .9fr); gap: 14px; }
.advisor-latest,
.advisor-chat {
  min-width: 0;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.advisor-latest-heading { justify-content: space-between; margin-bottom: 7px; }
.advisor-cached { color: var(--muted); font-size: .7rem; }
.advisor-recommended { display: block; color: var(--accent-dark); font-size: 1.2rem; }
.advisor-recommended.is-stale { color: var(--warn); text-decoration: line-through; }
.advisor-meta,
.advisor-reasoning,
.advisor-alternatives,
.advisor-warning,
.advisor-plan { margin: 7px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.advisor-confidence { color: var(--ink); text-transform: capitalize; }
.advisor-plan ul { margin: 4px 0 0 18px; padding: 0; }
.advisor-warning { color: var(--warn); }
.advisor-watch { margin: 7px 0 0; color: var(--accent-dark); font-size: .82rem; }
.advisor-usage { margin: 8px 0 0; color: var(--muted); font-size: .7rem; }
.advisor-empty { margin: 0; color: var(--muted); font-size: .82rem; }

.advisor-controls { flex-wrap: wrap; margin: 12px 0 0; }
.advisor-settings { flex: 1 1 100%; }
.advisor-settings summary { display: inline-block; color: var(--muted); cursor: pointer; font-size: .76rem; font-weight: 800; }
.advisor-settings-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.advisor-controls label { min-width: 150px; flex: 1 1 160px; }
.advisor-controls label.advisor-checkbox { display: flex; align-items: center; gap: 6px; min-width: auto; flex: 0 0 auto; }
.advisor-controls label.advisor-checkbox span { text-transform: none; }
.advisor-controls input[type="checkbox"] { width: auto; height: auto; }
.advisor-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.advisor-actions button { white-space: nowrap; }
.advisor-chat-header { justify-content: space-between; margin-bottom: 8px; }
.advisor-chat { display: flex; flex-direction: column; min-height: 280px; }
.advisor-chat-log { display: grid; align-content: start; gap: 7px; flex: 1 1 auto; min-height: 0; max-height: 320px; overflow-y: auto; margin-bottom: 8px; }
.advisor-chat-message { padding: 7px 9px; border-radius: 5px; background: var(--panel-raised); }
.advisor-chat-message.is-user { background: var(--info-soft); }
.advisor-chat-message p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.35; }
.advisor-chat-form { display: flex; gap: 8px; margin-top: auto; flex: 0 0 auto; }
.advisor-snapshot { color: var(--muted); font-size: .72rem; margin: 0 0 7px; }
.advisor-chat-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.advisor-chat-form input { flex: 1 1 auto; min-width: 0; }
.advisor-chat-form button { flex: 0 0 auto; }

@media (max-width: 760px) {
  .advisor-body { grid-template-columns: 1fr; }
  .advisor-settings-fields { grid-template-columns: 1fr; }
  .advisor-actions { width: 100%; }
  .advisor-actions button { flex: 1 1 auto; }
  .advisor-chat-form { align-items: stretch; flex-direction: column; }
}