/* AI › Ask: the composer (DR-646). One box holds the prompt, the attached files and the bar with the attach button and
   Send, like the chat products people know. The box, not the textarea, shows the focus. */
.ai-composer { border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; padding: 10px 12px 8px; }
.ai-composer:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(16, 33, 54, .08); }
.ai-composer.is-off { background: var(--g3); }
.ai-composer.is-over { border-color: var(--teal-dark); background: #f2fafa; }
/* The textarea keeps the portal's shared focus ring (test/ui-rules.test.js); the box only tints its border. */
.ai-composer textarea { border: 0; padding: 4px 2px; border-radius: 6px; resize: none; min-height: 72px; max-height: 50vh; background: transparent; }
.ai-composer-bar { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ai-composer-note { flex: 1; font-size: 12px; color: var(--muted); }
.ai-composer-native input[type=file] { width: auto; max-width: 320px; padding: 4px; font-size: 13px; }
.ai-attach { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--navy); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.ai-attach svg.ico { width: 18px; height: 18px; }
.ai-attach:hover:not(:disabled) { background: var(--g2); } .ai-attach:disabled { opacity: .45; cursor: not-allowed; }
/* Send: a round button in the primary pale blue with an up arrow (aria-label "Send"), like the chat products people know */
.ai-send { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--btn); background: var(--btn); color: var(--navy); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.ai-send svg.ico { width: 18px; height: 18px; }
.ai-send:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--btn-hover); } .ai-send:disabled { opacity: .45; cursor: not-allowed; }
.ai-composer-files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ai-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; border: 1px solid var(--g1); background: var(--g2); border-radius: 10px; padding: 6px 8px 6px 10px; font-size: 13px; }
.ai-file .ai-file-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--navy); }
.ai-file .ai-file-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ai-file-remove { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--slate); display: inline-grid; place-items: center; cursor: pointer; padding: 0; line-height: 1; font-size: 16px; }
.ai-file-remove:hover { background: var(--g1); color: var(--navy); }
@media (max-width: 600px) { .ai-file .ai-file-name { max-width: 160px; } .ai-composer-note { display: none; } }
/* The answer: Markdown from the model rendered through richText (tables, code, lists) */
.ai-answer { overflow-wrap: anywhere; }
.ai-answer table { border-collapse: collapse; width: 100%; margin: 0 0 .9em; font-size: 14px; }
.ai-answer th, .ai-answer td { border: 1px solid var(--g1); padding: 6px 9px; text-align: left; vertical-align: top; }
.ai-answer th { background: var(--g2); color: var(--navy); font-weight: 600; }
.ai-answer pre { background: var(--g2); border: 1px solid var(--g1); border-radius: 8px; padding: 10px 12px; overflow: auto; font-size: 13px; }
.ai-answer code { font-size: 13px; }
.ai-answer hr { border: 0; border-top: 1px solid var(--g1); margin: 14px 0; }
.ai-answer p:last-child, .ai-answer ul:last-child, .ai-answer ol:last-child { margin-bottom: 0; }