/*
 * Small, hand-written helpers that sit beside the compiled design system in tailwind.css
 * (ClientSrc/tailwind-input.css). Colors come from that file's --ui-* custom properties so
 * there is still exactly one palette.
 *
 * The named width helpers below exist because the CSP's style-src has no 'unsafe-inline':
 * views can't use style="" attributes, so one-off widths live here as classes instead. See
 * docs/ARCHITECTURE.md's "Rate limiting and security headers" section.
 */

.max-w-420 { max-width: 420px; }

/* Application-scoped conversations reuse the platform palette and native form controls. */
.conversation-shell { padding-block: 2.5rem; }
.conversation-heading { margin-block-end: 1.75rem; }
.conversation-heading h1 { margin-block: 1rem; overflow-wrap: anywhere; }
.conversation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.conversation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; gap: 1.5rem; margin-block-start: 1.5rem; }
.conversation-main { min-width: 0; overflow: hidden; }
.conversation-panel-heading, .conversation-compose, .conversation-aside { padding: 1.5rem; }
.conversation-panel-heading { border-bottom: 1px solid var(--ui-line); }
.conversation-panel-heading h2, .conversation-aside h2 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .75rem; }
.conversation-panel-heading p, .conversation-aside p { color: var(--ui-ink-2); line-height: 1.75; margin: 0; }
.conversation-aside form { display: grid; gap: 1rem; margin-block: 1.5rem; }
.conversation-aside .ui-hint { margin-block-start: 1rem; }
.conversation-initial { padding: 1rem 1.5rem; border-bottom: 1px solid var(--ui-line); }
.conversation-initial p, .conversation-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: .5rem 0 0; line-height: 1.8; }
.conversation-messages { display: flex; flex-direction: column; gap: 1.25rem; list-style: none; margin: 0; padding: 1.5rem; }
.conversation-message { align-self: flex-start; width: min(92%, 40rem); border: 1px solid var(--ui-line); border-radius: 1rem; padding: 1rem; background: var(--ui-canvas); }
.conversation-message.is-mine { align-self: flex-end; border-inline-start: 3px solid var(--ui-primary); }
.conversation-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--ui-ink-2); font-size: .8125rem; }
.conversation-message-meta strong { color: var(--ui-ink); }
.conversation-message-meta time { font-size: .75rem; }
.conversation-attachment { display: inline-flex; gap: .5rem; margin-block-start: .75rem; overflow-wrap: anywhere; }
.conversation-attachment bdi { min-width: 0; }
.conversation-compose { border-top: 1px solid var(--ui-line); }
.conversation-compose .ui-input { width: 100%; }
.conversation-compose textarea { resize: vertical; min-height: 7rem; }
.conversation-compose .ui-label { display: block; margin-block-end: .5rem; }
.conversation-compose .ui-btn { margin-block-start: .75rem; }
.conversation-empty, .conversation-readonly { margin: 1.5rem; }
.conversation-pagination { padding-inline: 1.5rem; margin-block-start: .75rem; }
.conversation-inbox { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.conversation-inbox-link { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; text-decoration: none; color: var(--ui-ink); border-radius: inherit; }
.conversation-inbox-link:hover { color: var(--ui-primary); }
.conversation-inbox-copy { min-width: 0; }
.conversation-inbox-copy h2 { font-size: 1.125rem; overflow-wrap: anywhere; margin: 0 0 .5rem; }
.conversation-inbox-copy p { color: var(--ui-ink-2); }
.conversation-inbox-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; flex-shrink: 0; font-size: .875rem; }
.conversation-inbox-meta > span:last-child { display: inline-flex; align-items: center; gap: .5rem; }
.conversation-shell a:focus-visible, .conversation-shell button:focus-visible, .conversation-shell input:focus-visible, .conversation-shell textarea:focus-visible, .conversation-shell select:focus-visible { outline: 3px solid var(--ui-primary); outline-offset: 3px; }
@media (max-width: 900px) {
    .conversation-layout { grid-template-columns: minmax(0, 1fr); }
    .conversation-aside { order: -1; }
}
@media (max-width: 540px) {
    .conversation-shell { padding-block: 1.5rem; }
    .conversation-inbox-link { flex-direction: column; gap: 1rem; }
    .conversation-inbox-meta { align-items: flex-start; }
    .conversation-panel-heading, .conversation-compose, .conversation-aside, .conversation-messages { padding: 1rem; }
    .conversation-message { width: 100%; }
}
.max-w-500 { max-width: 500px; }
.max-w-520 { max-width: 520px; }
.max-w-560 { max-width: 560px; }
.max-w-600 { max-width: 600px; }
.max-w-640 { max-width: 640px; }
.max-w-700 { max-width: 700px; }
.max-w-760 { max-width: 760px; }
.max-w-800 { max-width: 800px; }

.w-8rem { width: 8rem; }

.logo-preview { max-height: 80px; }

/* Admin notice panel (e.g. Admin/Plans "subscriptions are closed" banner) */
.restricted-panel {
  border: 1px dashed var(--ui-line-strong);
  border-radius: 1rem;
  background: #F6F5F3;
  color: var(--ui-ink-2);
  padding: 1.25rem 1.5rem;
  text-align: center;
  line-height: 1.6;
}
.panel-solid-start { border-style: solid; text-align: start; }