/* Agent drawer. Colors are the Tailwind gray scale used everywhere else:
   gray-50 #f9fafb, gray-100 #f3f4f6, gray-200 #e5e7eb, gray-500 #6b7280,
   gray-600 #4b5563, gray-800 #1f2937, gray-900 #111827, gray-950 #030712. */
.agent-panel { background: #f9fafb; box-shadow: -12px 0 60px rgba(3, 7, 18, 0.08); }
.agent-panel-header { background: #fff; padding: 18px 20px; border-bottom: 1px solid #e5e7eb; }
.agent-eyebrow { font-size: 12px; font-weight: 600; color: #6b7280; }
.agent-orb { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.agent-orb img { width: 20px; height: 20px; }
.agent-question { margin-left: 36px; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 12px 12px 4px 12px; background: #f3f4f6; font-size: 14px; line-height: 1.6; color: #111827; white-space: pre-wrap; }
.agent-answer { max-width: 72ch; font-size: 14px; line-height: 1.75; color: #1f2937; overflow-wrap: anywhere; }
.agent-answer p + p, .agent-answer ul, .agent-answer ol { margin-top: 12px; }
.agent-answer li { margin-left: 20px; padding-left: 3px; list-style: disc; }
.agent-answer ol li { list-style: decimal; }
.agent-answer h2, .agent-answer h3, .agent-answer h4 { margin-top: 16px; font-size: 15px; font-weight: 600; color: #030712; }
.agent-answer a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }
.agent-checks { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 10px 12px; font-size: 12px; color: #4b5563; }
.agent-checks summary { cursor: pointer; color: #4b5563; }
.agent-composer { padding: 12px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; }
.agent-composer textarea { border: 0; background: transparent; box-shadow: none; resize: vertical; min-height: 76px; }
.agent-composer textarea:focus { box-shadow: none; }
.agent-composer:focus-within { border-color: #111827; box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.1); }
.agent-starter { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: auto; min-height: 48px; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: none; text-align: left; font-size: 14px; font-weight: 500; color: #1f2937; white-space: normal; transition: border-color .15s, background .15s; }
.agent-starter:hover { background: #f9fafb; border-color: #d1d5db; }
@media (max-width: 480px) { .agent-panel-header { padding: 14px 16px; } .agent-orb { width: 32px; height: 32px; } .agent-question { margin-left: 16px; } }