/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* The chat page and its card: one narrow column that fits a phone, long words broken rather than scrolled. */
body { max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
#messages { list-style: none; padding: 0; }
.message { overflow-wrap: anywhere; }
.message .body { white-space: pre-wrap; }
.message.in { text-align: right; }
.message.note { color: #666; font-size: 0.9em; }
textarea, input[type=text] { width: 100%; box-sizing: border-box; }
.card { border: 1px solid #ccc; border-radius: 6px; padding: 0.75rem; overflow-wrap: anywhere; }
.card .features { padding-left: 1rem; }

/* A data answer: a chart as wide as the column, a wide table scrolled inside its own box. A failed entry is a note. */
.data-answer .chart { width: 100%; height: 18rem; }
.table-box { overflow-x: auto; max-width: 100%; }
.table-box table { border-collapse: collapse; }
.table-box th, .table-box td { border: 1px solid #ccc; padding: 0.25rem 0.5rem; text-align: left; overflow-wrap: normal; }
.metric-value { font-size: 1.4em; }
.block-text { white-space: pre-wrap; }
.message.out.failed { color: #666; font-size: 0.9em; }

/* An app's AI key form: its fields one under another, the password field as wide as the column. */
.ai-key { border-top: 1px solid #ccc; margin-top: 0.5rem; padding-top: 0.5rem; }
.ai-key label { display: block; margin-top: 0.25rem; }
.ai-key input[type=password] { width: 100%; box-sizing: border-box; }