:root {
  color-scheme: light;
  --ink: #1d2733;
  --muted: #718094;
  --line: #dce4eb;
  --soft: #f5f8fb;
  --blue: #2164d6;
  --blue-dark: #164ca9;
  --green: #18875d;
  --orange: #c57916;
  font-family: Inter, "Noto Sans JP", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: #edf2f6; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.app-header { position: sticky; top: 0; z-index: 1000; background: #172331; box-shadow: 0 5px 18px rgba(15, 27, 40, .16); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px clamp(20px, 5vw, 72px) 10px; background: #172331; color: white; }
.topbar-brand { flex: 0 0 auto; }
.topbar h1 { margin: 3px 0 0; font-size: 26px; letter-spacing: .02em; }
.eyebrow { margin: 0; color: #86a9d7; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.topbar .eyebrow { color: #8ea6c5; }
.topbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
.header-badge { display: inline-flex; min-height: 31px; align-items: center; gap: 7px; border: 1px solid #49627d; border-radius: 999px; padding: 7px 11px; color: #cfe0f3; font-size: 12px; line-height: 1; white-space: nowrap; }
.header-badge strong { color: white; font-size: 12px; font-weight: 900; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #f1b34d; }
.mode-badge.shared { border-color: #5a9b72; color: #d6f1df; }
.mode-badge.shared .status-dot { background: var(--green); }
.warning-badge { border-color: #8d6834; color: #ffd79d; }
.warning-badge strong { color: #ffc46c; }
.app-tabs { display: flex; gap: 6px; padding: 0 clamp(20px, 5vw, 72px); background: #172331; }
.app-tab { position: relative; border: 0; border-radius: 9px 9px 0 0; padding: 12px 18px; background: transparent; color: #9fb3c9; font-size: 12px; font-weight: 800; }
.app-tab:hover { color: white; }
.app-tab.is-active { background: #edf2f6; color: #22384e; }
main { width: min(1180px, calc(100% - 32px)); margin: 16px auto 60px; }
.panel { border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 4px 16px rgba(23, 35, 49, .04); }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr); grid-template-areas: "source conversation" "compose history"; gap: 18px; align-items: start; }
.source-panel { grid-area: source; }
.conversation-panel { grid-area: conversation; min-width: 0; }
.compose-flow-panel { grid-area: compose; }
.history-panel { grid-area: history; }
.compose-flow-panel .target-setup { margin-top: 0; padding-top: 0; border-top: 0; }
.panel { padding: 26px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.panel-heading.compact { padding-bottom: 16px; }
h2 { margin: 5px 0 0; font-size: 20px; }
.step-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.form-grid, .schedule-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.cast-combobox { position: relative; }
.cast-combobox input { padding-right: 40px; }
.cast-combobox-toggle { position: absolute; top: 1px; right: 1px; width: 38px; height: calc(100% - 2px); border: 0; border-left: 1px solid #d7e0e8; border-radius: 0 7px 7px 0; background: transparent; color: #526477; font-size: 18px; line-height: 1; }
.cast-combobox-toggle:hover { background: var(--soft); }
.cast-options { position: absolute; z-index: 40; top: calc(100% + 4px); right: 0; left: 0; max-height: 260px; overflow-y: auto; border: 1px solid #cbd7e2; border-radius: 8px; background: white; box-shadow: 0 12px 28px rgba(23, 35, 49, .16); }
.cast-options[hidden] { display: none; }
.cast-option { display: block; width: 100%; border: 0; padding: 9px 12px; background: white; color: var(--ink); font-size: 12px; text-align: left; }
.cast-option:hover, .cast-option:focus, .cast-option.is-selected { background: #eaf2fc; color: var(--blue-dark); outline: none; }
.cast-options-empty { padding: 12px; color: var(--muted); font-size: 11px; text-align: center; }
.compact-form-grid { margin-top: 14px; }
.single-control-grid { grid-template-columns: 1fr; }
.setup-section { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.source-setup { margin-top: 0; padding-top: 0; border-top: 0; }
.setup-heading { display: flex; align-items: flex-start; gap: 11px; }
.setup-number { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 8px; background: #e7f0fb; color: #235f9e; font-size: 12px; font-weight: 900; }
.setup-heading strong, .setup-heading small { display: block; }
.setup-heading strong { color: var(--ink); font-size: 14px; }
.setup-heading small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
label > span:first-child { display: block; margin-bottom: 7px; }
select, input, textarea { width: 100%; border: 1px solid #cbd7e2; border-radius: 7px; background: white; color: var(--ink); padding: 11px 12px; outline: none; }
select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33, 100, 214, .12); }
.audience-info { margin-top: 12px; padding: 10px 12px; border-radius: 7px; background: var(--soft); color: #526477; font-size: 12px; }
.audience-info strong { color: var(--ink); }
.individual-recipient { display: block; margin-top: 14px; padding: 14px; border: 1px solid #d7e4ed; border-radius: 9px; background: #f6fbff; }
.individual-recipient > span { display: block; margin-bottom: 7px; color: var(--ink); font-size: 12px; font-weight: 800; }
.individual-recipient small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.conversation-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; margin-top: 15px; }
.conversation-refresh-state { margin: 10px 0 0; color: #617487; font-size: 10px; font-weight: 700; }
.conversation-refresh-state.updated { color: #16865b; }
.conversation-refresh-state.warning { color: #a66012; }
.conversation-list { display: grid; gap: 9px; max-height: 430px; margin-top: 12px; padding-right: 3px; overflow: auto; }
.conversation-empty { padding: 24px 16px; border: 1px dashed #cbd9e5; border-radius: 10px; background: #f8fbfd; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.7; }
.conversation-item { padding: 12px 13px; border: 1px solid #dbe5ed; border-radius: 10px; background: #fff; }
.conversation-item-head, .conversation-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conversation-item-head strong { font-size: 12px; }
.conversation-identity { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.conversation-nickname { max-width: 100%; border: 0; padding: 0; background: transparent; color: var(--blue); font-size: 13px; font-weight: 900; text-align: left; text-decoration: underline; text-decoration-color: rgba(33, 100, 214, .3); text-underline-offset: 3px; overflow-wrap: anywhere; }
.conversation-nickname:hover { text-decoration-color: currentColor; }
.conversation-member-id { color: var(--muted); font-size: 9px; white-space: nowrap; }
.conversation-item-head time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.conversation-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.conversation-badge { padding: 3px 7px; border-radius: 999px; background: #edf2f6; color: #64778a; font-size: 9px; font-weight: 800; }
.conversation-badge.unread { background: #fff0dc; color: #945d16; }
.conversation-badge.unreplied { background: #f8e9f2; color: #9a4f78; }
.conversation-preview { width: fit-content; max-width: 94%; margin-top: 9px; border: 1px solid #dbe5ed; border-radius: 5px 13px 13px 13px; padding: 8px 11px; background: #f7f9fb; }
.conversation-preview.customer { border-color: #b8dff3; background: #e9f7ff; }
.conversation-preview.cast { margin-left: auto; border-color: #e99ab9; border-radius: 13px 5px 13px 13px; background: #ffdbe9; }
.conversation-preview.unknown { border-color: #ebd4a7; background: #fff7e7; }
.conversation-message { margin: 0; color: #455b70; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.conversation-item-actions { justify-content: flex-end; margin-top: 10px; }
.conversation-item-actions a, .conversation-select { border: 0; background: transparent; color: var(--blue); font-size: 10px; font-weight: 800; text-decoration: none; }
.conversation-item-actions a:hover, .conversation-select:hover { text-decoration: underline; }
.conversation-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; color: var(--muted); text-align: center; font-size: 10px; }
.conversation-more button { min-height: 30px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--blue); font: inherit; font-weight: 800; cursor: pointer; }
.conversation-more button:hover { border-color: var(--blue); }
.conversation-badge.blocked { background: #ece7e1; color: #6e5d54; }
.target-warning { display: block; margin-top: 6px; color: #a85d21 !important; }
.filter-section { margin-top: 14px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; }
.advanced-filters > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; color: var(--ink); font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.advanced-filters > summary::-webkit-details-marker { display: none; }
.advanced-filters > summary::before { content: "+"; color: var(--blue); font-size: 17px; line-height: 1; }
.advanced-filters[open] > summary::before { content: "−"; }
.advanced-filters > summary span { flex: 1; }
.advanced-filters > summary small { color: var(--muted); font-size: 10px; }
.advanced-filter-body { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.advanced-filter-body > label:first-child { margin-top: 13px; }
.filter-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); font-size: 12px; font-weight: 800; }
.filter-heading small { color: var(--muted); font-size: 10px; font-weight: 400; }
.filter-grid { margin-top: 14px; }
.safety-exclusions { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 14px 0 0; padding: 12px; border: 1px solid #d7e2eb; border-radius: 8px; background: #f5f9fc; }
.safety-exclusions legend { padding: 0 5px; color: var(--ink); font-size: 11px; font-weight: 800; }
.safety-exclusions > p { grid-column: 1 / -1; margin: 1px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.check-option { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid #dbe5ed; border-radius: 8px; background: white; cursor: pointer; }
.check-option input { width: 17px; height: 17px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--blue); }
.check-option span { display: block; margin: 0 !important; }
.check-option strong, .check-option small { display: block; }
.check-option strong { color: var(--ink); font-size: 11px; }
.check-option small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.exclude-field { margin-top: 14px; }.exclude-field input { padding: 9px 10px; }
.bulk-target-limit { display: grid; gap: 8px; min-width: 0; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.bulk-target-limit textarea { min-height: 70px; min-width: 0; }
.bulk-target-limit p { margin: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.bulk-target-limit .error { color: #b44438; }
.target-setup > .audience-info { margin-top: 10px; }
.target-setup .bulk-target-limit { margin: 0; padding: 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.target-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; margin-top: 14px; }
.target-options-grid > .filter-section { min-width: 0; margin-top: 0; }
.target-options-grid .advanced-filters > summary { gap: 6px; padding: 12px 10px; font-size: 11px; }
.target-options-grid .advanced-filters > summary span { min-width: 0; }
.target-options-grid .advanced-filters > summary small { flex: 0 0 auto; white-space: nowrap; }
.target-options-grid .advanced-filter-body { padding: 0 10px 10px; }
.target-options-grid .bulk-target-limit { padding: 10px; }
@media (max-width: 760px) { .target-options-grid { grid-template-columns: minmax(0, 1fr); } }
.message-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; margin-top: 14px; }
.message-source-grid > details { min-width: 0; margin-top: 0; }
@media (max-width: 760px) { .message-source-grid { grid-template-columns: minmax(0, 1fr); } }
.compose-helper, .send-options { min-width: 0; }
.compose-helper-body, .send-options-body { padding: 14px; border-top: 1px solid var(--line); }
.compose-helper .template-row { margin-top: 0; }
.send-options .bulk-order-option:first-child { margin-top: 0; }
.message-setup .event-review-panel { background: #fbfcfd; }
.message-setup .message-field { display: block; margin-top: 20px; }
.message-setup .message-field textarea { min-height: 185px; }
.message-setup .compose-schedule-row { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.compose-schedule-row:has(.schedule-date input:disabled) { grid-template-columns: minmax(0, 1fr); }
.compose-schedule-row .schedule-date:has(input:disabled) { display: none; }
.message-setup #bulkImageFirstWrap.is-disabled { display: none; }
.compose-privacy { margin-top: 14px; color: var(--muted); font-size: 11px; }
.compose-privacy summary { width: fit-content; cursor: pointer; }
.compose-privacy .privacy-note { margin-top: 8px; line-height: 1.6; }
.bulk-target-preview { max-height: 180px; overflow: auto; padding-left: 20px; overflow-wrap: anywhere; }
.template-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 18px; }
.template-row .grow { flex: 1 1 200px; min-width: 0; }
.template-row select { width: 100%; min-width: 0; }
.template-library, .event-review-panel { min-width: 0; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.message-source-grid > .event-review-panel { padding: 0; }
.message-source-grid > .event-review-panel > summary { min-height: 44px; box-sizing: border-box; }
.message-source-grid > .event-review-panel > .event-review-body { padding: 0 12px 12px; }
.template-library textarea, .event-review-body textarea, .event-review-body input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.template-library-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.template-library p, .template-library small, .event-review-body p { display: block; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.template-library small { color: var(--muted); }
.event-review-panel summary { cursor: pointer; font-weight: 700; font-size: 12px; overflow-wrap: anywhere; }
.event-review-body { display: grid; gap: 9px; min-width: 0; margin-top: 12px; }
.event-review-body label { margin: 0; }
.event-review-body .secondary-button { white-space: normal; }
.event-url-details { min-width: 0; }
.event-url-details > summary { cursor: pointer; font-size: 12px; }
.event-url-details > label { display: block; margin-top: 9px; }
.event-url-details > input { margin-top: 6px; }
.event-read-actions { display: grid; grid-template-columns: minmax(0, 92px) max-content; align-items: center; gap: 9px; min-width: 0; }
.event-read-actions > div { min-width: 0; }
.event-read-actions select { box-sizing: border-box; height: 38px; padding: 0 8px; line-height: normal; }
.event-read-actions .secondary-button { box-sizing: border-box; height: 38px; min-width: 0; padding: 0 16px; }
.event-review-status { margin: 0; padding: 10px; background: var(--soft); border-left: 3px solid var(--blue-dark); border-radius: 4px; }
.event-review-status[hidden] { display: none; }
.event-summary-panel { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid #cbddec; border-radius: 9px; background: #f5faff; }
.event-summary-panel[hidden] { display: none; }
.event-summary-panel > strong { color: var(--ink); font-size: 13px; }
.event-summary-panel label { color: var(--ink); }
.event-summary-panel textarea { min-height: 110px; }
.event-summary-panel > small { color: var(--muted); font-size: 11px; line-height: 1.55; }
.event-summary-panel > small:empty { display: none; }
.event-summary-panel > button { justify-self: start; }
.event-source-details { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: white; }
.event-source-details > summary { padding: 12px; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 700; }
.event-source-body { display: grid; gap: 9px; min-width: 0; padding: 12px; border-top: 1px solid var(--line); }
.event-source-body .secondary-button { white-space: normal; }
.template-row .secondary-button { white-space: normal; }
.preview-dialog.template-picker-dialog { width: min(760px, calc(100% - 24px)); max-height: min(90vh, 880px); overflow-y: auto; }
#eventAnnouncementPickerDialog[open] { box-sizing: border-box; display: flex; flex-direction: column; width: min(1020px, calc(100% - 24px)); height: min(90dvh, 880px); overflow: hidden; }
.event-picker-heading { flex: 0 0 auto; }
.event-picker-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; flex: 1 1 0; min-height: 0; margin-top: 16px; }
.event-picker-source-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.event-picker-scroll { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.event-picker-scroll .event-picker-variants-title { margin-top: 0; }
.event-picker-scroll .template-picker-list { margin-top: 0; }
.template-picker-list { display: grid; gap: 12px; min-width: 0; margin-top: 16px; }
.template-picker-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.template-picker-card.is-selected { border-color: var(--blue); background: var(--soft); }
.template-picker-card h3 { margin: 0 0 9px; font-size: 14px; }
.template-picker-card pre { max-width: 100%; margin: 0 0 10px; font: inherit; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.template-picker-card small { display: block; margin-bottom: 10px; color: var(--muted); line-height: 1.5; }
.template-picker-card button { max-width: 100%; }
#templatePickerStatus { margin: 8px 0 0; font-size: 12px; color: #9a5c17; }
.event-picker-source { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.event-picker-source h3, .event-picker-variants-title { margin: 0 0 9px; font-size: 14px; }
.event-picker-source pre { max-height: 230px; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12px; line-height: 1.7; }
#eventAnnouncementPickerDialog .event-picker-source pre { flex: 1 1 auto; min-height: 0; max-height: none; }
.event-picker-point-details { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.event-picker-point-details summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.event-picker-point-details label { display: block; margin-top: 12px; }
.event-picker-point-details input { box-sizing: border-box; width: 100%; min-width: 0; }
.event-picker-point-details small { display: block; margin-top: 7px; color: var(--muted); line-height: 1.5; }
.event-picker-variants-title { margin-top: 20px; }
@media (max-width: 800px) { .event-picker-columns { display: flex; flex-direction: column; }.event-picker-source-column { flex: 0 1 auto; max-height: min(40dvh, 360px); }.event-picker-source { flex: 0 0 auto; }#eventAnnouncementPickerDialog .event-picker-source pre { max-height: min(230px, 24dvh); }.event-picker-scroll { flex: 1 1 0; } }
@media (max-width: 600px) { .preview-dialog.template-picker-dialog { padding: 16px; }.template-picker-card { padding: 12px; }.template-picker-card button { width: 100%; } }
.grow { flex: 1; }
.message-field { position: relative; margin-top: 18px; }
textarea { min-height: 170px; resize: vertical; line-height: 1.7; }
.message-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.message-tools > span { font-weight: 800; color: var(--ink); }
.message-tools small { font-size: 10px; line-height: 1.45; }
.message-token-button { border: 1px solid #cbd7e2; border-radius: 999px; padding: 6px 10px; background: #f8fbfd; color: #455b70; font-size: 10px; font-weight: 700; cursor: pointer; }
.message-token-button:hover { background: var(--soft); }
.message-token-button code { color: var(--blue-dark); font-weight: 800; }
.attachment-field { margin-top: 18px; }
.attachment-field input { padding: 9px 10px; }
.attachment-field small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.image-optimization-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.image-optimization-actions button { white-space: normal; }
.attachment-field:has(#bulkAttachmentPreviewWrap.hidden) .image-optimization-actions,
.attachment-field:has(#bulkAttachmentPreviewWrap.hidden) #bulkImageOptimizationNote { display: none; }
.preview-dialog.image-optimization-dialog { width: min(880px, calc(100% - 24px)); max-height: 90vh; overflow: auto; }
.image-optimization-dialog .dialog-actions { flex-wrap: wrap; }
.image-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.image-comparison-grid figure { margin: 0; min-width: 0; }
.image-comparison-grid figcaption { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.image-comparison-grid figcaption span { display: block; margin: 5px 0; font-weight: 400; }
.image-comparison-viewport { height: 300px; overflow: auto; border: 1px solid var(--line); background: repeating-conic-gradient(#e7e7e7 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; }
.image-comparison-viewport img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-optimization-dialog.actual-size .image-comparison-viewport img { width: auto; height: auto; max-width: none; }
@media (max-width: 600px) { .image-comparison-grid { grid-template-columns: minmax(0, 1fr); } .image-comparison-viewport { height: 220px; } }
.bulk-order-option { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 11px 12px; border: 1px solid #d7e0e8; border-radius: 8px; background: #f8fbfd; cursor: pointer; }
.bulk-order-option input { width: auto; margin-top: 3px; }
.bulk-order-option span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.bulk-order-option strong { color: var(--ink); font-size: 12px; }
.bulk-order-option small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.bulk-order-option.is-disabled { background: #eef2f5; cursor: not-allowed; opacity: .72; }
.bulk-pause-size { display: grid; gap: 6px; margin-top: 10px; min-width: 0; }
.bulk-pause-size select { width: 100%; min-width: 0; }
.bulk-pause-size small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.field-meta { position: absolute; right: 10px; bottom: 9px; margin: 0 !important; color: var(--muted); font-size: 11px !important; font-weight: 400; }
.schedule-date:has(input:disabled) { color: var(--muted); }
.schedule-date input:disabled { border-color: #d9e0e6; background: #eef2f5; color: #9aa6b2; cursor: not-allowed; opacity: 1; }
.validation-box { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; }
.validation-box strong { font-size: 12px; }
.validation-box ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.validation-box li.ok { color: var(--green); }.validation-box li.warn { color: var(--orange); }.validation-box li.error { color: #cc4b4b; }.muted { color: var(--muted); }
.action-row, .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.primary-button, .secondary-button { border-radius: 7px; padding: 11px 15px; font-weight: 800; font-size: 12px; }
.primary-button { border: 1px solid var(--blue); background: var(--blue); color: white; }.primary-button:hover { background: var(--blue-dark); }
.secondary-button { border: 1px solid #cbd7e2; background: white; color: #455b70; }.secondary-button:hover { background: var(--soft); }
.secondary-button:disabled, .secondary-button:disabled:hover { border-color: #d9e0e6; background: #eef2f5; color: #9aa6b2; cursor: not-allowed; opacity: 1; box-shadow: none; }
.privacy-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; }
.section-route-note { margin: 9px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.history-list { min-height: 150px; padding-top: 10px; }
.sync-bar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 18px 0 4px; padding: 12px 14px; border: 1px solid #e3eaf0; border-radius: 12px; background: #f8fbfd; }
.sync-state { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sync-state strong, .sync-state small { display: block; }
.sync-state strong { font-size: 12px; }
.sync-state small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.sync-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #aab7c4; box-shadow: 0 0 0 4px #e9eef2; }
.sync-dot.ready { background: var(--green); box-shadow: 0 0 0 4px #e1f2eb; }
.sync-dot.syncing { background: var(--blue); box-shadow: 0 0 0 4px #e1effb; }
.sync-dot.warn { background: #d89130; box-shadow: 0 0 0 4px #fff0dc; }
.sync-actions { display: grid; grid-template-columns: 108px 64px 76px 64px 64px; align-items: end; gap: 8px; }
.sync-actions label { width: auto; }
.sync-actions label span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.sync-actions .secondary-button { display: inline-flex; width: 100%; align-items: center; justify-content: center; padding: 0 6px; line-height: 1; white-space: nowrap; }
.sync-actions select { width: 100%; }
.sync-actions button { white-space: nowrap; }
.sync-actions select, .sync-actions .secondary-button { height: 42px; min-height: 42px; }
.sync-bar .secondary-button { padding: 9px 14px; }
.has-tooltip { position: relative; }
.has-tooltip::after {
  display: none;
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  padding: 7px 9px;
  border-radius: 7px;
  background: #243342;
  color: white;
  box-shadow: 0 7px 20px rgba(23, 35, 49, .2);
  content: attr(data-tooltip);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}
.has-tooltip:hover::after, .has-tooltip:focus::after, .has-tooltip:focus-within::after { display: block; opacity: 1; transform: translate(-50%, 0); }
.sync-actions .has-tooltip::after { left: auto; right: 0; transform: translateY(4px); }
.sync-actions .has-tooltip:hover::after, .sync-actions .has-tooltip:focus::after, .sync-actions .has-tooltip:focus-within::after { transform: translateY(0); }
.sync-note { margin: 8px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.sync-help { min-width: 0; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.sync-help summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.sync-help > p { overflow-wrap: anywhere; }
.credential-coverage { margin: 7px 2px 0; color: var(--green); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.credential-coverage.warning { color: #9a641b; }
.hidden { display: none !important; }
.batch-progress { margin: 8px 0 4px; padding: 10px 14px; border: 1px solid #d8e5e0; border-radius: 10px; background: #f6fbf8; }
.batch-progress.is-running { border-color: #9dcbe3; background: #f1f9ff; }
.batch-phase { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: #17684f; font-size: 12px; font-weight: 800; line-height: 1.5; }
.batch-progress.is-running .batch-phase { color: #185e9b; }
.batch-phase-mark { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #28a16e; }
.batch-progress.is-running .batch-phase-mark { background: #298fd0; box-shadow: 0 0 0 4px #dceffc; animation: batch-pulse 1.6s ease-in-out infinite; }
.batch-progress strong, .batch-progress small { display: block; font-size: 11px; line-height: 1.5; }
.batch-progress small { color: var(--muted); overflow-wrap: anywhere; white-space: pre-line; }
.batch-progress progress { display: block; width: 100%; height: 10px; margin: 7px 0; }
.batch-status-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.batch-status-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; background: #e8f3ee; color: #17684f; font-size: 10px; font-weight: 800; }
.batch-status-chip.pending { background: #eef2f6; color: #66788a; }
.batch-status-chip.warning { background: #fff0dc; color: #945d16; }
.batch-status-chip.error { background: #fde9e9; color: #a63f3f; }
.batch-failure-details { margin-top: 8px; border-top: 1px solid #dce8e2; padding-top: 7px; }
.batch-failure-details summary { width: fit-content; color: #5b7181; font-size: 10px; font-weight: 800; cursor: pointer; }
.batch-failure-details small { margin-top: 7px; }
.batch-floating { position: fixed; z-index: 20; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: min(390px, calc(100vw - 36px)); padding: 13px 15px; border: 1px solid #b6dbea; border-radius: 16px; background: linear-gradient(125deg, #f4fcff 0%, #f8fff8 100%); color: #1c3e53; box-shadow: 0 14px 38px rgba(26, 74, 103, .18); transition: transform .2s ease, box-shadow .2s ease; animation: batch-appear .35s ease-out; }
.batch-floating:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(26, 74, 103, .24); }
.batch-floating-spark { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px; background: #dff4f1; color: #138975; font-size: 24px; animation: batch-spark 2.4s ease-in-out infinite; }
.batch-floating-copy { min-width: 0; }
.batch-floating-copy strong, .batch-floating-copy > span { display: block; line-height: 1.45; }
.batch-floating-copy strong { font-size: 12px; }
.batch-floating-copy > span { margin-top: 2px; color: #527386; font-size: 11px; overflow-wrap: anywhere; }
.batch-floating-count { flex: 0 0 auto; align-self: flex-start; border-radius: 999px; padding: 3px 8px; background: #e0edf7; color: #276289; font-size: 11px; font-weight: 800; }
.batch-floating-dots { display: inline-flex; gap: 3px; margin-left: 2px; vertical-align: middle; }
.batch-floating-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: batch-dot 1.2s ease-in-out infinite; }
.batch-floating-dots i:nth-child(2) { animation-delay: .15s; }
.batch-floating-dots i:nth-child(3) { animation-delay: .3s; }
.batch-overlay { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(62, 42, 39, .24); backdrop-filter: blur(6px); }
.batch-overlay-card { width: min(480px, 100%); max-height: min(90vh, 720px); overflow: auto; padding: 32px 30px 28px; border: 1px solid #f3d2c6; border-radius: 18px; background: linear-gradient(145deg, #fff0e0, #fff4e5); color: #352c2e; text-align: center; box-shadow: 0 18px 50px rgba(73, 38, 37, .18); animation: batch-card-in .3s ease-out; }
.batch-overlay-icon { position: relative; width: 78px; height: 70px; margin: 0 auto 10px; }
.batch-overlay-mouth svg { width: 78px; height: 70px; overflow: visible; }
.mouth-top, .mouth-bottom { fill: #e78194; stroke: #a85171; stroke-width: 2; stroke-linejoin: round; }
.mouth-bottom { transform-origin: 50% 36px; animation: batch-mouth 1.05s ease-in-out infinite; }
.mouth-line { fill: none; stroke: #9b4869; stroke-width: 2; stroke-linecap: round; }
.mouth-sound { position: absolute; top: 17px; right: -4px; width: 6px; height: 12px; border-right: 2px solid #c280a4; border-radius: 50%; animation: batch-sound 1.05s ease-in-out infinite; }
.mouth-sound-two { right: -13px; top: 12px; height: 21px; animation-delay: .14s; }
.batch-overlay-check { display: none; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border: 4px solid #22a25d; border-radius: 50%; color: #22a25d; font-size: 30px; font-weight: 800; }
.batch-overlay.is-result .batch-overlay-mouth { display: none; }
.batch-overlay.is-result .batch-overlay-check { display: grid; }
.batch-overlay.is-warning .batch-overlay-check { border-color: #cc8b38; color: #cc8b38; }
.batch-overlay-card h2 { margin: 0; font-size: clamp(20px, 5vw, 24px); }
.batch-overlay-card > p { margin: 18px 0 0; color: #735b60; font-size: 14px; line-height: 1.65; }
.batch-overlay-meter { margin: 22px 0 0; padding: 13px 15px; border: 1px solid #f0d7c8; border-radius: 10px; background: rgba(255, 255, 255, .34); }
.batch-overlay-meter progress { display: block; width: 100%; height: 9px; margin-bottom: 8px; accent-color: #c079aa; }
.batch-overlay-meter span { color: #765c70; font-size: 12px; font-weight: 800; }
.batch-overlay-card .batch-overlay-note { margin-top: 13px; font-size: 12px; }
.batch-overlay-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.batch-overlay-actions .secondary-button { border-color: #ebcfc7; background: #fff3e8; color: #69474f; }
.batch-overlay-actions .secondary-button:hover { background: #ffe6d5; }
.batch-overlay-actions .secondary-button:disabled { opacity: .5; cursor: default; }
@keyframes batch-card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes batch-mouth { 0%, 100% { transform: translateY(0) scaleY(.78); } 45% { transform: translateY(5px) scaleY(1.14); } }
@keyframes batch-sound { 0%, 100% { opacity: .15; transform: scale(.7); } 45% { opacity: 1; transform: scale(1); } }
@keyframes batch-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes batch-pulse { 50% { box-shadow: 0 0 0 7px #dceffc; } }
@keyframes batch-spark { 50% { transform: rotate(13deg) scale(1.12); } }
@keyframes batch-dot { 50% { opacity: .3; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .batch-floating, .batch-floating-spark, .batch-floating-dots i, .batch-progress.is-running .batch-phase-mark, .batch-overlay-card, .mouth-bottom, .mouth-sound { animation: none; } }
@media (max-width: 640px) { .batch-floating { right: 12px; bottom: 12px; left: 12px; max-width: none; } }
@media (max-width: 640px) { .batch-overlay { padding: 15px; }.batch-overlay-card { padding: 27px 20px 23px; } }
@media (max-width: 640px) { .sync-bar { align-items: stretch; flex-direction: column; }.sync-actions { grid-template-columns: 1fr 1fr; align-items: end; }.sync-actions label { grid-column: 1 / -1; width: auto; }.sync-actions .secondary-button { width: 100%; }.has-tooltip::after { display: none; } }
.history-empty { padding: 28px 4px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.history-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #edf1f4; }.history-item:last-child { border-bottom: 0; }
.history-mark { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: var(--blue); }.history-mark.draft { background: #9aaabd; }.history-mark.sent { background: var(--green); }
.history-item strong { display: block; font-size: 12px; }.history-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.history-item-main { min-width: 0; flex: 1; }.history-item .history-error { color: #b44e47; line-height: 1.5; }.history-cancel-button { align-self: center; flex: 0 0 auto; border: 1px solid #d8e0e7; border-radius: 7px; padding: 6px 8px; background: #fff; color: #6f7f8e; font-size: 10px; font-weight: 700; cursor: pointer; }.history-cancel-button:hover { border-color: #b9c7d3; color: #33485c; }
.integration-card { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 13px; border-radius: 8px; background: #eef5ff; color: #385a83; }.integration-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; background: #d8e8ff; font-weight: 800; }.integration-card strong { display: block; color: #244a7b; font-size: 12px; }.integration-card p { margin: 4px 0 0; font-size: 11px; line-height: 1.5; }.coming-soon { margin-left: auto; color: #5e83b1; font-size: 10px; white-space: nowrap; }
.preview-dialog { width: min(620px, calc(100% - 32px)); border: 0; border-radius: 12px; padding: 24px; color: var(--ink); box-shadow: 0 18px 70px rgba(16, 30, 46, .25); }.preview-dialog::backdrop { background: rgba(12, 22, 32, .5); }.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.icon-button { border: 0; background: transparent; color: var(--muted); font-size: 25px; line-height: 1; }.preview-table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 12px; }.preview-table th, .preview-table td { padding: 10px 0; border-bottom: 1px solid #edf1f4; text-align: left; vertical-align: top; }.preview-table th { width: 115px; color: var(--muted); font-weight: 700; }.preview-message { padding: 13px; border-radius: 7px; background: var(--soft); white-space: pre-wrap; line-height: 1.7; font-size: 13px; }.preview-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }.dialog-warning { padding: 12px; border-radius: 7px; background: #fff6e8; color: #8a5a1d; font-size: 12px; line-height: 1.6; }.dialog-warning strong { display: block; }.confirm-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--ink); font-size: 12px; font-weight: 700; }.confirm-check input { width: auto; }.confirm-phrase { display: block; margin-top: 12px; }.confirm-phrase span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }.confirm-phrase input { padding: 9px 10px; }.dialog-actions .primary-button:disabled { cursor: not-allowed; opacity: .45; }
.conversation-dialog { width: min(760px, calc(100% - 28px)); max-height: min(88vh, 860px); border: 0; border-radius: 14px; padding: 0; color: var(--ink); box-shadow: 0 22px 80px rgba(16, 30, 46, .28); overflow: hidden; }
.conversation-dialog::backdrop, .conversation-confirm-dialog::backdrop { background: rgba(12, 22, 32, .55); backdrop-filter: blur(2px); }
.conversation-dialog-heading { padding: 22px 24px 17px; background: #fff; }
.conversation-dialog-meta { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.conversation-dialog-status { min-height: 38px; padding: 11px 24px; background: #f5f8fb; color: #526477; font-size: 11px; font-weight: 700; }
.conversation-dialog-status.error { background: #fff3e7; color: #9a5c17; }
.conversation-thread { min-height: 220px; max-height: 45vh; padding: 20px 24px; background: #edf2f6; color: #33495e; font-size: 12px; line-height: 1.75; overflow: auto; overflow-wrap: anywhere; }
.conversation-thread.loading { display: grid; place-items: center; color: var(--muted); text-align: center; }
.conversation-thread.chat-layout { display: flex; flex-direction: column; gap: 13px; }
.conversation-thread-raw { white-space: pre-wrap; }
.chat-date { display: flex; justify-content: center; margin: 5px 0; }
.chat-date span { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .82); color: #718094; font-size: 9px; font-weight: 800; }
.chat-row { display: flex; width: 100%; }
.chat-row.customer { justify-content: flex-start; }
.chat-row.cast { justify-content: flex-end; }
.chat-message { display: flex; width: min(78%, 520px); flex-direction: column; }
.chat-row.cast .chat-message { align-items: flex-end; }
.chat-sender { display: flex; align-items: center; gap: 6px; margin: 0 6px 4px; color: #64778a; font-size: 9px; }
.chat-sender strong { color: #33495e; font-size: 10px; }
.chat-sender span { padding: 1px 5px; border-radius: 999px; background: #dde6ed; font-weight: 800; }
.chat-row.customer .chat-sender span { background: #d8effc; color: #28769b; }
.chat-row.cast .chat-sender { flex-direction: row-reverse; }
.chat-row.cast .chat-sender span { background: #f8d4e3; color: #a65378; }
.chat-bubble { width: fit-content; max-width: 100%; border: 1px solid #d8e2ea; border-radius: 5px 14px 14px 14px; padding: 10px 12px; background: #fff; box-shadow: 0 2px 8px rgba(29, 39, 51, .05); color: #33495e; line-height: 1.7; white-space: pre-wrap; }
.chat-row.customer .chat-bubble { border-color: #b8dff3; background: #e9f7ff; }
.chat-row.cast .chat-bubble { border-color: #e99ab9; border-radius: 14px 5px 14px 14px; background: #ffdbe9; color: #4f3542; }
.chat-message time { margin: 3px 5px 0; color: #8290a0; font-size: 9px; }
.conversation-composer { padding: 18px 24px 22px; background: #fff; }
.conversation-token-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 9px; color: var(--muted); font-size: 10px; }
.conversation-token-row > span { font-weight: 800; }
.conversation-token-row .message-token-button { min-height: 28px; padding: 5px 9px; }
.conversation-token-row small { margin: 0; }
.conversation-attachment-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.conversation-attachment-row > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.conversation-attachment-button { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid #c7d2dc; border-radius: 7px; padding: 5px 10px; background: #f8fafc; color: #315978; font-size: 11px; font-weight: 800; cursor: pointer; }
.conversation-attachment-button:hover { border-color: #8fa9bd; background: #eef5fa; }
.conversation-attachment-button.is-disabled { opacity: .45; pointer-events: none; }
.conversation-attachment-row > small { flex: 1 1 220px; margin: 0; }
.conversation-attachment-preview { display: flex; align-items: center; gap: 8px; max-width: 100%; border: 1px solid #d9e2e9; border-radius: 8px; padding: 5px 7px; background: #f8fafc; }
.conversation-attachment-preview img { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; }
.conversation-attachment-preview span { max-width: 280px; color: #526477; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-attachment-preview button { border: 0; padding: 4px; background: transparent; color: #a14848; font-size: 10px; font-weight: 800; }
.conversation-composer-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; align-items: stretch; }
.conversation-composer textarea { height: 44px; min-height: 44px; resize: vertical; }
.conversation-composer .primary-button { min-height: 44px; }
.conversation-composer small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.conversation-composer small.error { color: #aa3e30; font-weight: 700; }
.conversation-confirm-dialog { width: min(440px, calc(100% - 28px)); border: 0; border-radius: 13px; padding: 24px; color: var(--ink); box-shadow: 0 22px 80px rgba(16, 30, 46, .28); }
.conversation-confirm-dialog h2 { margin-top: 0; }
.conversation-confirm-dialog > p { color: #526477; font-size: 12px; line-height: 1.7; }
.conversation-confirm-message { margin: 13px 0; padding: 12px; border: 1px solid #e99ab9; border-radius: 10px; background: #ffdbe9; color: #4f3542; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation-confirm-attachment { margin: 13px 0; border: 1px solid #e99ab9; border-radius: 10px; padding: 10px; background: #fff5f8; text-align: center; }
.conversation-confirm-attachment img { display: block; width: auto; max-width: 100%; max-height: 260px; margin: 0 auto; border-radius: 7px; object-fit: contain; }
.conversation-confirm-attachment p { margin: 8px 0 0; color: #6e5360; font-size: 10px; overflow-wrap: anywhere; }
.bulk-send-progress-dialog { width: min(560px, calc(100% - 28px)); }
.bulk-send-progress-dialog .dialog-actions { flex-wrap: wrap; }
.windows-notification-controls { flex-wrap: wrap; justify-content: flex-start; }
.windows-notification-controls small { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.bulk-send-progress-dialog progress { display: block; width: 100%; height: 12px; margin: 14px 0 10px; }
.bulk-send-progress-dialog .batch-status-summary { margin-bottom: 12px; }
.bulk-send-progress-dialog .batch-failure-details small { display: block; max-height: 180px; overflow: auto; white-space: pre-line; }
.credentials-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.management-view { width: 100%; }
.management-panel { max-width: 980px; margin: 0 auto; }
.management-heading { align-items: end; }
.management-heading p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.management-store { width: min(220px, 42vw); flex: 0 0 auto; }
.management-block { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfd; }
.management-block-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.management-block-heading strong, .management-block-heading small { display: block; }
.management-block-heading strong { font-size: 14px; }
.management-block-heading small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
.management-status { border-radius: 999px; padding: 5px 9px; background: #eef2f6; color: #66788a; font-size: 10px; font-weight: 800; }
.management-status.is-ready { background: #e4f3eb; color: #17684f; }
.management-status.is-warning { background: #fff0dc; color: #945d16; }
.management-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 16px; }
.management-form .secondary-button { min-height: 42px; }
.management-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.management-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.management-feedback { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.management-feedback.is-success { color: var(--green); }
.management-feedback.is-error { color: #b34646; }
.cast-table-wrap { margin-top: 8px; overflow-x: auto; }
.cast-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cast-table th, .cast-table td { padding: 11px 10px; border-bottom: 1px solid #e2e9ef; text-align: left; vertical-align: middle; }
.cast-table th { color: var(--muted); font-size: 10px; letter-spacing: .03em; }
.cast-table td:first-child { font-weight: 800; }
.cast-table td:last-child { width: 80px; text-align: right; }
.credential-state { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 800; }
.credential-state::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.credential-state.is-ready { background: #e4f3eb; color: #17684f; }
.credential-state.is-missing { background: #fff0dc; color: #945d16; }
.cast-edit-button { border: 0; padding: 6px 8px; background: transparent; color: var(--blue); font-size: 11px; font-weight: 800; }
.cast-edit-button:hover { text-decoration: underline; }
.cast-credential-dialog { width: min(620px, calc(100% - 32px)); border: 0; border-radius: 14px; padding: 24px; color: var(--ink); box-shadow: 0 18px 70px rgba(16, 30, 46, .25); }
.cast-credential-dialog::backdrop { background: rgba(12, 22, 32, .5); }
.cast-credential-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.cast-url-field { grid-column: 1 / -1; }
@media (max-width: 1060px) { .workspace-grid { grid-template-columns: 1fr; grid-template-areas: "source" "conversation" "compose" "history"; } }
@media (max-width: 760px) { .topbar { align-items: flex-start; flex-direction: column; gap: 9px; }.topbar-actions { width: 100%; justify-content: flex-start; }.header-badge { min-height: 29px; padding: 6px 9px; font-size: 11px; }.header-badge strong { font-size: 11px; }.workspace-grid { grid-template-columns: 1fr; grid-template-areas: "source" "conversation" "compose" "history"; }.form-grid, .schedule-row, .safety-exclusions, .conversation-toolbar { grid-template-columns: 1fr; }.safety-exclusions > p { grid-column: 1; }.panel { padding: 20px; }.conversation-item-head { align-items: flex-start; flex-direction: column; gap: 3px; }.conversation-item-actions { align-items: flex-end; flex-direction: column; }.conversation-composer-row { grid-template-columns: minmax(0, 1fr) 76px; }.chat-message { width: 86%; } }
@media (max-width: 760px) { .management-heading, .management-block-heading { align-items: stretch; flex-direction: column; }.management-store { width: 100%; }.management-form, .cast-credential-grid { grid-template-columns: 1fr; }.cast-url-field { grid-column: auto; }.management-actions { display: grid; grid-template-columns: 1fr 1fr; }.cast-table th:nth-child(2), .cast-table td:nth-child(2) { display: none; } }
/* Durable bulk-send records are kept separate from the browser-only history. */
.saved-deliveries { margin-bottom: 24px; }
.saved-delivery-row { padding: 12px 0; border-bottom: 1px solid #cdbfa9; overflow-wrap: anywhere; }
.saved-deliveries .field-hint { line-height: 1.6; }
.delivery-resume-dialog { max-height: 90vh; overflow-y: auto; }
.delivery-resume-dialog > label { display: block; margin: 12px 0; }
.delivery-resume-dialog .dialog-actions { flex-wrap: wrap; }
.delivery-resume-dialog input[type="checkbox"] { width: auto; }
.delivery-resume-dialog > img { max-width: 100%; max-height: 180px; object-fit: contain; }
#deliveryResumeSummary, .delivery-resume-rows p { white-space: pre-wrap; overflow-wrap: anywhere; }
.delivery-resume-rows { max-height: 35vh; overflow-y: auto; margin: 16px 0; }
.delivery-resume-rows article { padding: 12px 0; border-bottom: 1px solid #cdbfa9; }