.record-detail-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(860px, calc(100vh - 28px)); padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: var(--white); box-shadow: 0 28px 80px rgba(6, 25, 38, .34); }
.record-detail-dialog::backdrop { background: rgba(6, 25, 38, .7); backdrop-filter: blur(3px); }
.record-detail-shell { display: grid; max-height: calc(100vh - 28px); grid-template-rows: auto minmax(0, 1fr) auto; }
.record-detail-header, .record-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.record-detail-header h2 { margin: 0; }
.record-detail-header .eyebrow { margin-bottom: 4px; color: var(--teal-dark); }
.record-detail-footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
.record-detail-body { overflow: auto; padding: 24px; background: var(--paper); }
.detail-hero { display: flex; justify-content: space-between; gap: 20px; padding: 20px; margin-bottom: 18px; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--ink), #16445b); }
.detail-hero h3 { margin: 4px 0 8px; font-size: 22px; }
.detail-hero p { margin: 0; color: rgba(255,255,255,.78); }
.detail-kicker { color: var(--cyan); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.detail-section { padding: 20px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.detail-section > h3 { margin-bottom: 15px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-field { min-width: 0; padding: 12px; border-radius: 10px; background: var(--paper); }
.detail-field span, .detail-field strong { display: block; overflow-wrap: anywhere; }
.detail-field span { margin-bottom: 5px; color: var(--ink-soft); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.detail-summary { margin-top: 15px; padding: 15px; border-left: 4px solid var(--teal); border-radius: 8px; white-space: pre-wrap; line-height: 1.55; background: var(--teal-soft); }
.detail-notes { display: grid; gap: 8px; margin: 0; padding-left: 24px; }
.detail-notes li { padding: 9px 12px; border-radius: 8px; background: var(--paper); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--ink-soft); font-size: 12px; }
:root { --conversation-customer-bg: #ffffff; --conversation-customer-text: #183247; --conversation-customer-label: #17665f; --conversation-customer-time: #526477; --conversation-assistant-bg: #183247; --conversation-assistant-text: #f3f7fc; --conversation-assistant-label: #8ce3d8; --conversation-assistant-time: #c0cedc; }
:root[data-theme="dark"] { --conversation-customer-bg: #26384a; --conversation-customer-text: #edf3fa; --conversation-customer-label: #8ce3d8; --conversation-customer-time: #becbd9; --conversation-assistant-bg: #173e43; --conversation-assistant-text: #edf8f7; --conversation-assistant-label: #8ce3d8; --conversation-assistant-time: #bdd4d5; }
.conversation-thread { display: grid; gap: 12px; }
.conversation-bubble { width: min(86%, 560px); padding: 13px 15px; border-radius: 14px; background: var(--conversation-customer-bg); color: var(--conversation-customer-text); box-shadow: 0 5px 14px rgba(11,36,54,.07); }
.conversation-bubble.assistant { margin-left: auto; color: var(--conversation-assistant-text); background: var(--conversation-assistant-bg); }
.conversation-bubble span { display: block; margin-bottom: 6px; color: var(--conversation-customer-label); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.conversation-bubble.assistant span { color: var(--conversation-assistant-label); }
.conversation-bubble p { color: inherit; overflow-wrap: anywhere; margin: 0 0 7px; line-height: 1.5; white-space: pre-wrap; }
.conversation-bubble time { display: block; color: var(--conversation-customer-time); font-size: 12px; text-align: right; }
.conversation-bubble.assistant time { color: var(--conversation-assistant-time); }
@media (max-width: 620px) { .record-detail-header, .record-detail-body, .record-detail-footer { padding: 16px; } .detail-grid { grid-template-columns: 1fr; } .detail-hero { align-items: flex-start; flex-direction: column; } .conversation-bubble { width: 94%; } }