/* Shared presentation for the workspace, account pages and public tools.
   styles.css owns component layout; these tokens and primitives own appearance. */
:root {
  --ink: #1d1d1f;
  --muted: #6d6d73;
  --line: #e1e1e6;
  --panel: #ffffff;
  --page: #f5f5f7;
  --page-glow: none;
  --nav: #ececef;
  --nav-text: #38383d;
  --input: #f7f7f9;
  --card-hover: #f1f1f4;
  --accent: #0066cc;
  --accent-strong: #0056ad;
  --accent-soft: #e1eeff;
  --amber: #996000;
  --rose: #c93641;
  --steel: #4279a3;
  --success: #208642;
  --brand: #14795b;
  --message-in: #ffffff;
  --message-out: #0066cc;
  --timeline-wash: none;
  --surface-raised: #ffffff;
  --surface-muted: #f2f2f5;
  --focus-ring: rgb(0 102 204 / 22%);
  --shadow: 0 16px 48px rgb(0 0 0 / 10%);
  --soft-shadow: 0 1px 3px rgb(0 0 0 / 3%);
  --radius-control: 9px;
  --radius-card: 16px;
  --radius-window: 22px;
  --transition-fast: 160ms ease;
  --transition-smooth: 240ms ease;
  --transition-emphasis: 280ms ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #f5f5f7;
  --muted: #a6a6ae;
  --line: #3b3b40;
  --panel: #2c2c2e;
  --page: #1c1c1e;
  --nav: #252527;
  --nav-text: #e6e6eb;
  --input: #343437;
  --card-hover: #38383c;
  --accent: #64aaff;
  --accent-strong: #8ebfff;
  --accent-soft: #243e60;
  --amber: #e8b563;
  --rose: #ff858e;
  --steel: #89b7dd;
  --success: #7bd492;
  --message-in: #343437;
  --message-out: #075fbe;
  --surface-raised: #303033;
  --surface-muted: #232326;
  --focus-ring: rgb(100 170 255 / 25%);
  --shadow: 0 16px 48px rgb(0 0 0 / 30%);
  --soft-shadow: 0 1px 3px rgb(0 0 0 / 12%);
  color-scheme: dark;
}

body, .public-page, .auth-gate { background: var(--page); }
h1, h2, h3, h4, .public-brand strong, .public-brand span { font-family: inherit; }
h1, h2 { font-weight: 650; letter-spacing: -.035em; }
h3, h4, strong { font-weight: 600; }
button { font-weight: 500; }
input, textarea, select { accent-color: var(--accent); }
::selection { background: var(--accent-soft); color: var(--ink); }

/* A quiet sidebar and toolbar, with clear selection and keyboard focus. */
.nav-rail { background: var(--nav); color: var(--nav-text); border-color: var(--line); box-shadow: none; backdrop-filter: none; }
.brand-mark, .brand-mark:hover { border: 0; border-radius: 0; background: transparent; color: #fff; box-shadow: none; transform: none; }
.sole-symbol { display: block; width: 100%; height: 100%; object-fit: contain; }
.public-brand > .sole-symbol { flex: 0 0 38px; width: 38px; height: 38px; }
.settings-sidebar-brand > .sole-symbol { flex: 0 0 36px; width: 36px; height: 36px; }
.brand-sun { display: none; }
.brand-copy strong { color: var(--ink); letter-spacing: .04em; }
.brand-copy span, .rail-section-label, .workspace-switcher small, .rail-system-state small { color: var(--muted); }
.rail-section-label { font-size: 10px; letter-spacing: .05em; font-weight: 600; }
.workspace-switcher { border-color: var(--line); border-radius: var(--radius-control); background: var(--panel); color: var(--ink); box-shadow: none; }
.workspace-switcher:hover { border-color: var(--line); background: var(--card-hover); transform: none; }
.workspace-avatar { background: var(--surface-muted); color: var(--muted); }
.workspace-switcher svg { color: var(--muted); }
.rail-button { color: var(--nav-text); border: 0; border-radius: var(--radius-control); }
.rail-button:hover { border: 0; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.rail-button.active { border: 0; background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.rail-button::before { display: none; }
.rail-button svg { width: 20px; height: 20px; }
.rail-label { font-size: 12px; font-weight: 500; }
.rail-button.active .rail-label { font-weight: 600; }
.rail-badge, .rail-badge.new { border: 0; background: var(--surface-muted); color: var(--muted); font-size: 8px; text-transform: none; }
.rail-system-state { border-color: var(--line); }
.rail-system-state strong { color: var(--muted); font-size: 10px; font-weight: 500; }
.conversation-reply-badge { box-shadow: none; }
.topbar { background: var(--panel); border-color: var(--line); backdrop-filter: none; }
.topbar h1 { font-size: 21px; font-weight: 650; }
.topbar-heading .eyebrow { color: var(--muted); letter-spacing: .02em; font-weight: 500; }
.topbar-subtitle { font-size: 12px; }
.topbar-metrics { background: var(--input); border-radius: var(--radius-control); }
.topbar-metric small { font-size: 10px; font-weight: 500; text-transform: none; }
.topbar-metric strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.topbar-metric:hover { background: var(--card-hover); }
.metric-signal { width: 18px; height: 18px; clip-path: none; border-radius: 5px; opacity: .8; }
.metric-signal.violet { color: var(--success); }
.metric-signal.blue { color: var(--accent); }
.metric-signal.pink { color: var(--amber); }
.connection-pill { border-color: var(--line); background: var(--input); color: var(--muted); font-weight: 500; }
.status-dot.connected, .live-pulse { background: var(--success); box-shadow: none; animation: none; }
.brand-sun, .live-pulse, .metric-signal { animation: none; }
.workspace::before, .workspace::after, .topbar::after, .topbar-metric::after,
.connection-pill::after, .auth-gate::before, .metric-card::before, .metric-card::after { display: none; }

/* Shared controls and surfaces. Component-specific sizing remains in styles.css. */
.send-button, .send-button:hover:not(:disabled) { border: 0; border-radius: var(--radius-control); background: #0066cc; color: #fff; box-shadow: none; transform: none; font-weight: 600; }
.send-button:hover:not(:disabled) { background: #0056ad; }
.send-button:active:not(:disabled) { background: #004a95; }
.secondary-button, .google-button { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--input); color: var(--accent); box-shadow: none; font-weight: 500; }
.secondary-button:hover:not(:disabled), .google-button:hover:not(:disabled) { border-color: var(--line); background: var(--accent-soft); color: var(--accent); transform: none; }
.icon-button { border-color: var(--line); border-radius: var(--radius-control); background: var(--input); color: var(--muted); box-shadow: none; }
.icon-button:hover:not(:disabled) { border-color: var(--line); background: var(--accent-soft); color: var(--accent); transform: none; }
.danger-button { border-color: color-mix(in srgb, var(--rose) 22%, var(--line)); border-radius: var(--radius-control); background: color-mix(in srgb, var(--rose) 7%, var(--panel)); color: var(--rose); box-shadow: none; font-weight: 500; }
.danger-button:hover:not(:disabled) { background: color-mix(in srgb, var(--rose) 13%, var(--panel)); transform: none; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: none; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--input); color: var(--ink); box-shadow: none; font-weight: 400;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
:is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.search-box { border-color: var(--line); border-radius: var(--radius-control); background: var(--input); }
.search-box input, .search-box input:focus { border: 0 !important; background: transparent; box-shadow: none; }
.segmented, .auth-switch { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-muted); padding: 3px; }
.segmented button, .auth-switch button { border-radius: 6px; color: var(--muted); font-weight: 500; }
.segmented button.active, .auth-switch button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 10%); }
.segmented { height: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.segmented button { min-height: 30px; padding-inline: 3px; }
.segmented .planned-channel { grid-column: 1 / -1; min-height: 24px; }
.lead-column, .conversation-column, .profile-panel, .metric-card, .dashboard-section,
.contacts-table-wrap, .pipeline-column, .automation-card, .bot-tester,
.forms-catalog, .form-submissions, .ai-explain-panel, .public-card {
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); box-shadow: var(--soft-shadow); backdrop-filter: none;
}
.metric-card:nth-child(n) { background: var(--panel); }
.metric-card:hover, .dashboard-section:hover, .automation-card:hover { border-color: var(--line); box-shadow: var(--soft-shadow); transform: none; }
.eyebrow, .section-label { color: var(--muted); font-weight: 600; letter-spacing: .055em; }
.dashboard-heading h2, .contacts-heading h2, .bot-heading h2 { font-size: clamp(25px, 2.2vw, 32px); line-height: 1.2; }
.dashboard-heading h2::before, .contacts-heading h2::before { display: none; }
.dashboard-heading p:not(.eyebrow), .contacts-heading p:not(.eyebrow), .bot-heading p:not(.eyebrow) { font-size: 14px; line-height: 1.6; }
.empty-state { color: var(--muted); }
.empty-state strong { color: var(--ink); }
.toast { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }

/* The inbox keeps everyday filters visible and secondary filters in one disclosure. */
.lead-column { --inbox-divider: color-mix(in srgb, var(--line) 65%, transparent); }
.lead-column > .filters { position: relative; z-index: 3; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 14px 12px; border-bottom-color: var(--inbox-divider); }
.lead-column .search-box { height: 38px; grid-template-columns: 17px minmax(0, 1fr); gap: 7px; border-color: transparent; border-radius: 10px; box-shadow: none; }
.lead-column .search-box svg { width: 17px; height: 17px; }
.lead-column .search-box input { min-height: 0; padding: 0; font-family: inherit; font-size: 13px; }
.lead-column .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.lead-column .segmented { grid-template-columns: 1fr .75fr .8fr 1.6fr .9fr; height: 36px; gap: 2px; padding: 3px; border-color: transparent; border-radius: 9px; }
.lead-column .segmented button { min-height: 28px; font-size: 12px; font-weight: 500; }
.inbox-filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.inbox-filter-bar > .conversation-filter { height: 34px; min-height: 34px; padding: 4px 9px; border-color: transparent; background-color: transparent; font-size: 12px; color: var(--muted); }
.inbox-refinements { position: relative; }
.inbox-refinements > summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 500; list-style: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); }
.inbox-refinements > summary::-webkit-details-marker { display: none; }
.inbox-refinements > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.inbox-refinements > summary:hover, .inbox-refinements[open] > summary { background: var(--surface-muted); color: var(--ink); }
.inbox-refinements.has-active-filters > summary { color: var(--accent); background: var(--accent-soft); }
.inbox-filter-count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding-inline: 3px; border-radius: 50%; color: var(--accent); background: var(--panel); font-size: 10px; font-variant-numeric: tabular-nums; }
.inbox-filter-count[hidden] { display: none; }
.inbox-filter-options { position: absolute; z-index: 5; top: calc(100% + 7px); right: 0; display: grid; gap: 14px; width: 226px; max-width: calc(100vw - 42px); padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.inbox-filter-options label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 500; }
.inbox-filter-options .conversation-filter { height: 38px; min-height: 38px; padding: 6px 9px; font-size: 12px; }
.lead-column .lead-list { padding: 8px; scrollbar-width: thin; }

/* Conversations read as compact rows, with metadata on a quiet second line. */
.lead-card {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 3px 11px;
  min-height: 0;
  margin-bottom: 2px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.lead-card::after { display: none; }
.lead-card:hover { border-color: transparent; background: var(--card-hover); box-shadow: none; transform: none; }
.lead-card.priority { border-color: transparent; }
.lead-card.active { border-color: transparent; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: none; transform: none; }
.lead-card.active.is-just-selected { animation: none; }
.lead-card:focus-visible { outline-offset: -3px; }
.lead-card-content { min-width: 0; align-self: center; }
.lead-card header { gap: 8px; min-height: 22px; }
.lead-card h3 { min-width: 0; margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -.2px; }
.lead-card p { margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 1.5; }
.lead-card-badges { flex: 0 0 auto; gap: 5px; }
.lead-card .unread-count { min-width: 20px; height: 20px; padding: 0 6px; background: #0066cc; color: #fff; font-size: 10px; font-weight: 600; box-shadow: none; }
.lead-card .priority-star { color: var(--amber); font-size: 14px; text-shadow: none; }
.lead-card footer { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: start; gap: 2px 6px; min-width: 0; margin: 1px 0 0; }
.lead-card .channel-badge-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.lead-card .lead-card-status { display: contents; }
.lead-card footer :is(.channel-badge, .stage-badge) { display: inline-flex; gap: 6px; min-height: 16px; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.5; white-space: nowrap; }
.lead-card .stage-badge::before { content: "·"; color: var(--muted); }
:root[data-theme="dark"] .lead-card footer :is(.channel-badge, .stage-badge) { background: transparent; color: var(--muted); }
.avatar { border: 0; border-radius: 11px; background: var(--surface-muted); color: var(--muted); box-shadow: none; }
.lead-card .avatar, .lead-card:hover .avatar { grid-row: 1 / 3; width: 42px; height: 42px; margin-top: 2px; border-radius: 50%; background: var(--surface-muted); color: var(--muted); font-size: 14px; font-weight: 600; box-shadow: none; transform: none; }
.lead-card.active .avatar { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); }
.lead-main strong { font-weight: 600; }
.lead-title h2 { font-size: 16px; font-weight: 600; }
.message-timeline, .webchat-messages { background: var(--surface-muted); background-image: none; }
.message, .webchat-message { border: 0; border-radius: 15px 15px 15px 5px; background: var(--message-in); color: var(--ink); box-shadow: var(--soft-shadow); font-size: 13px; }
.message.out, .webchat-message.visitor { border: 0; border-radius: 15px 15px 5px 15px; background: var(--message-out); color: #fff; }
.message.out span, .webchat-message.visitor span { color: rgb(255 255 255 / 80%); }
.message.out a, .webchat-message.visitor a { color: #fff; }
.message.internal { border: 1px solid color-mix(in srgb, var(--amber) 25%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--panel)); color: var(--ink); }
.composer textarea { font-size: 13px; }

/* Compact conversation toolbar; settings and message tools open on demand. */
.conversation-header { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 9px 14px; background: var(--panel); box-shadow: none; }
.conversation-header .lead-title { flex: 1 1 auto; width: auto; min-width: 0; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
.conversation-header .lead-title .avatar { width: 36px; height: 36px; border-radius: 12px; }
.conversation-header .lead-title h2 { font-size: 15px; line-height: 18px; }
.conversation-header .lead-title p { display: block; font-size: 11px; }
.lead-context { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lead-context #leadMeta { flex: 0 1 auto; max-width: 90px; }
.header-field { display: block; flex: 0 1 auto; min-width: 0; }
.conversation-header .header-field :is(#assigneeSelect, #stageSelect) { display: block; width: 100px; min-width: 0; max-width: 100%; height: 24px; min-height: 24px; padding: 0 20px 0 6px; border: 0; border-radius: 5px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2387878d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 6 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 3px center / 14px; color: var(--muted); appearance: none; font: inherit; font-size: 11px; font-weight: 500; text-overflow: ellipsis; cursor: pointer; }
.conversation-header .header-field #stageSelect { width: 96px; }
.conversation-header .header-field select:hover:not(:disabled) { background-color: var(--surface-muted); color: var(--ink); }
.conversation-header .header-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }
.conversation-menu-actions { display: grid; gap: 4px; }
.conversation-menu-actions button { min-height: 36px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.conversation-menu-actions button:hover:not(:disabled) { background: var(--surface-muted); }
.conversation-status-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.conversation-status-actions .conversation-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 36px; min-width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; white-space: nowrap; }
.conversation-action svg { width: 18px; height: 18px; }
.conversation-status-actions #priorityToggle span { display: none; }
.conversation-status-actions #closeConversationButton { width: auto; padding-inline: 8px; }
.conversation-status-actions .is-priority { color: var(--amber); }
.conversation-status-actions .is-closed { color: var(--success); }
.conversation-settings { position: relative; flex: 0 0 auto; z-index: 5; }
.profile-panel-toggle { flex: 0 0 auto; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }
.profile-panel-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profile-panel-toggle:hover { background: var(--surface-muted); color: var(--ink); }
.profile-panel-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.profile-panel-toggle[aria-expanded="false"] .profile-toggle-arrow { transform: scaleX(-1); transform-origin: 10px 12px; }
.conversation-settings > summary, .composer-tools-menu > summary { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: var(--muted); cursor: pointer; list-style: none; }
.conversation-settings > summary::-webkit-details-marker, .composer-tools-menu > summary::-webkit-details-marker { display: none; }
.conversation-settings > summary svg, .composer-tools-menu > summary svg { width: 20px; height: 20px; fill: currentColor; }
.conversation-settings > summary:hover, .composer-tools-menu > summary:hover, .conversation-settings[open] > summary, .composer-tools-menu[open] > summary { background: var(--surface-muted); color: var(--ink); }
.conversation-header .conversation-actions { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: 240px; padding: 16px; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.conversation-field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 500; }
.conversation-field[hidden] { display: none; }
.conversation-header .conversation-actions :is(#outboundChannelSelect, #assigneeSelect, #stageSelect, #categorySelect) { display: block; width: 100%; min-width: 0; max-width: none; height: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--input); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.conversation-actions .segment-control:has(select) { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 6px; }
#categoryFilter { grid-column: 1 / -1; }
.conversation-header select:disabled { color: var(--muted); cursor: default; }
.conversation-column .composer { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--panel); box-shadow: none; }
.composer-editor { display: grid; grid-row: 1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 22px; background: var(--input); }
.composer-editor:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.composer-editor #messageInput { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; min-height: 38px; max-height: 110px; padding: 9px 2px; border: 0; border-radius: 0; background: transparent; font-size: 13px; line-height: 20px; resize: none; box-shadow: none; outline: none; }
.composer-editor #messageInput:focus { box-shadow: none; outline: none; }
.composer-editor > .send-button { display: grid; grid-column: 3; grid-row: 1; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; }
.composer-editor > .send-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.composer-editor > .send-button svg { display: block; width: 18px; height: 18px; }
.composer-tools-menu { grid-column: 1; grid-row: 1; position: relative; }
.composer-tools-menu[hidden] { display: none; }
.composer-tools { position: absolute; bottom: calc(100% + 10px); left: 0; display: grid; width: 220px; padding: 6px; gap: 2px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); z-index: 5; }
.composer-tools .composer-tool { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.composer-tools .composer-tool[hidden] { display: none; }
.composer-tool svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }
.composer .composer-tool:disabled { opacity: .42; cursor: default; }
.composer-toolbar { display: flex; grid-row: 2; align-items: center; gap: 8px; }
.composer-modes { display: flex; gap: 12px; padding-left: 8px; }
.composer-mode { position: relative; min-height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
.composer-mode[aria-pressed="true"] { color: var(--accent); }
.composer-mode[aria-pressed="true"]::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 2px; border-radius: 2px; background: currentColor; content: ''; }
.composer-mode:hover:not(:disabled) { color: var(--ink); }
.composer-mode:disabled { opacity: .5; cursor: default; }
.conversation-column .composer > .attachment-preview { grid-column: 1; grid-row: 3; }
.composer-hint:not(.sr-only) { grid-row: 4; margin: 0; padding-left: 8px; color: var(--amber); font-size: 11px; line-height: 1.4; }
.conversation-column .composer.internal-mode { background: var(--panel); }
.composer.internal-mode .composer-mode[aria-pressed="true"] { color: var(--amber); }
.composer.internal-mode .composer-editor { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); background: color-mix(in srgb, var(--amber) 5%, var(--panel)); }
.conversation-column .composer:focus-within { box-shadow: none; }
@media (max-width: 1000px) {
  .conversation-header .lead-title { grid-template-columns: 36px 36px minmax(0, 1fr); gap: 6px; }
  .conversation-status-actions .conversation-action, .conversation-settings > summary, .composer-tools-menu > summary { width: 44px; height: 44px; }
  .conversation-status-actions #closeConversationButton { width: 44px; padding: 0; }
  .conversation-status-actions #closeConversationButton span { display: none; }
  .conversation-header .conversation-actions select { min-height: 44px; }
  .composer-mode { min-height: 36px; }
  .composer-editor #messageInput { min-height: 44px; font-size: 16px; padding-block: 12px; }
  .composer-editor > .send-button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  .conversation-column .composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@container (max-width: 360px) {
  .conversation-header { padding-inline: 8px; gap: 2px; }
  .conversation-header .lead-title .avatar { display: none; }
  .conversation-header .lead-title { grid-template-columns: 36px minmax(0, 1fr); }
}
@container (max-width: 580px) {
  .conversation-header .conversation-status-actions { display: none; }
  .lead-context #leadMeta { display: none; }
  .conversation-header .lead-title h2 { margin-bottom: 0; }
  .lead-context { gap: 2px; }
  .conversation-header .header-field :is(#assigneeSelect, #stageSelect) { height: 26px; min-height: 26px; padding-left: 2px; }
}
.panel-section { border-color: var(--line); }
.profile-panel { scrollbar-width: thin; }
.profile-panel .panel-section { padding: 20px; border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); background: transparent; }
.profile-panel .panel-section:hover { background: transparent; }
.profile-panel .section-label { display: block; margin: 0 0 12px; color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.profile-panel .profile-summary { padding-top: 24px; }
.profile-head { grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 10px; }
.profile-head .avatar.large { width: 44px; height: 44px; border-radius: 50%; font-size: 16px; font-weight: 500; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--accent); }
.profile-head-copy { min-width: 0; }
.profile-head h3 { font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: -.25px; }
.profile-head p { font-size: 12px; line-height: 1.5; }
.profile-panel .profile-edit-button { width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 8px; background: transparent; }
.profile-edit-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.profile-panel .profile-fields { gap: 0; margin-top: 20px; }
.profile-panel .profile-fields > div { align-items: baseline; gap: 12px; padding: 7px 0; }
.profile-panel .profile-fields :is(dt, dd) { font-size: 12px; line-height: 1.5; }
.profile-panel .profile-fields dd { min-width: 0; max-width: 65%; overflow-wrap: anywhere; font-weight: 500; font-variant-numeric: tabular-nums; }
.profile-panel .tag-list { gap: 6px; }
.profile-panel .removable-tag { gap: 6px; min-width: 0; max-width: 100%; min-height: 27px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: 7px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 400; text-align: left; }
.profile-panel .removable-tag > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.profile-panel .removable-tag svg { flex: 0 0 12px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .6; }
.profile-panel .removable-tag:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.profile-empty-hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-panel .tag-editor { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.profile-panel .tag-editor input { height: 36px; min-height: 36px; padding: 7px 10px; font-size: 12px; }
.profile-panel .tag-editor .secondary-button { min-height: 36px; padding: 4px 8px; border-color: transparent; background: transparent; font-size: 12px; }
.profile-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.profile-section-heading .section-label { margin: 0; }
.profile-panel .profile-save-notes { width: auto; min-height: 30px; padding: 4px 6px; border-color: transparent; background: transparent; font-size: 11px; }
.profile-panel .notes-input { display: block; height: 94px; min-height: 94px; max-height: 280px; margin: 0; padding: 10px 11px; border-color: color-mix(in srgb, var(--line) 70%, transparent); border-radius: 10px; font-family: inherit; font-size: 12px; line-height: 1.65; }
.profile-panel .profile-disclosure { padding: 0 20px; }
.profile-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.profile-disclosure > summary::-webkit-details-marker { display: none; }
.profile-disclosure > summary svg { flex: 0 0 13px; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--transition-fast); }
.profile-disclosure[open] > summary { color: var(--ink); }
.profile-disclosure[open] > summary svg { transform: rotate(90deg); }
.profile-disclosure-content { padding-bottom: 18px; }
.profile-panel .routing-list { gap: 0; }
.profile-panel .routing-list :is(div, label) { gap: 8px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; font-size: 11px; }
.profile-panel .routing-list strong { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.profile-panel .profile-actions { display: flex; padding: 12px 20px; border: 0; }
.profile-panel .profile-actions .danger-button { width: auto; min-height: 32px; padding: 4px 0; border-color: transparent; background: transparent; font-size: 11px; font-weight: 400; }
@media (max-width: 1000px), (pointer: coarse) {
  .lead-column .search-box { height: 44px; }
  .lead-column .search-box input { font-size: 16px; }
  .lead-column .segmented { height: 44px; }
  .lead-column .segmented button { min-height: 36px; }
  .inbox-filter-bar > .conversation-filter, .inbox-refinements > summary, .inbox-filter-options .conversation-filter { min-height: 44px; height: 44px; }
  .inbox-filter-options .conversation-filter { font-size: 16px; }
  .profile-panel .profile-head { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .profile-panel .profile-edit-button { width: 44px; height: 44px; }
  .profile-panel :is(.removable-tag, .profile-save-notes), .profile-panel .profile-actions .danger-button { min-height: 44px; }
  .profile-panel .tag-editor :is(input, button) { height: 44px; min-height: 44px; }
  .profile-panel .tag-editor input, .profile-panel .notes-input { font-size: 16px; }
}
.profile-fields dd, .routing-list strong { font-weight: 500; }
.channel-badge, .stage-badge, .tag { font-weight: 500; border-radius: 6px; }
.channel-badge.whatsapp { background: color-mix(in srgb, var(--success) 12%, var(--panel)); color: var(--success); }
.channel-badge.webchat { background: var(--accent-soft); color: var(--accent); }
.stage-badge.new, .tag { background: var(--surface-muted); color: var(--muted); }
.removable-tag { border: 0; padding: 5px 8px; }
.removable-tag:hover { background: var(--accent-soft); color: var(--accent); }

/* Performance, contacts, forms and the assistant share the same card hierarchy. */
.metric-card { padding: 22px; }
.metric-card strong { font-size: 34px; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric-card span { font-size: 13px; font-weight: 500; }
.metric-card small { font-size: 12px; }
.dashboard-section header h3 { font-size: 17px; font-weight: 600; }
.dashboard-updated { border-color: var(--line); background: var(--panel); color: var(--muted); font-weight: 500; }
.chart-bar.incoming, .legend-incoming, .stage-row i { background: var(--accent); }
.chart-bar.outgoing, .legend-outgoing { background: var(--steel); }
.contacts-toolbar { background: transparent; border-color: var(--line); box-shadow: none; }
.contacts-heading-actions button, .forms-heading-actions button, .bot-heading-actions button, .bot-tester-header button { width: auto; padding: 10px 14px; flex: 0 0 auto; white-space: nowrap; }
.bot-test-composer .send-button { align-self: end; min-height: 44px; padding: 10px 16px; }
.follow-up-form input { min-height: 38px; padding: 8px; font-size: 13px; }
.contacts-table thead { background: var(--input); }
.contacts-table th { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.contacts-table td { font-size: 13px; }
.contacts-table .contacts-actions { width: 72px; min-width: 72px; box-sizing: border-box; padding-inline: 12px; text-align: center; background: var(--panel); }
.contacts-table th.contacts-actions { z-index: 2; background: var(--input); }
.contact-delete-button { width: 44px; height: 44px; padding: 0; margin-inline: auto; border: 1px solid color-mix(in srgb, var(--rose) 22%, var(--line)); }
.contact-delete-button svg { width: 20px; height: 20px; fill: currentColor; }
.contact-delete-button:hover:not(:disabled) { color: var(--rose); }
.contacts-table tbody tr:hover { background: var(--card-hover); transform: none; }
@media (min-width: 1024px) {
  .contacts-table { table-layout: fixed; }
  .contacts-col-name { width: 20%; }
  .contacts-col-phone { width: 12%; }
  .contacts-col-email { width: 18%; }
  .contacts-col-channel { width: 12%; }
  .contacts-col-stage { width: 8%; }
  .contacts-col-owner { width: 11%; }
  .contacts-col-activity { width: 11%; }
  .contacts-col-actions { width: 8%; }
  .contacts-table th, .contacts-table td { padding-inline: 10px; white-space: normal; overflow-wrap: anywhere; }
  .contacts-table .contacts-actions { width: auto; min-width: 0; padding-inline: 8px; }
  .contacts-table .contact-link { width: 100%; min-width: 0; }
  .contacts-table .contact-link > span:last-child { min-width: 0; }
  .contacts-table :is(.channel-badge-list, .channel-badge, .stage-badge) { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
}
.pipeline-column { background: var(--surface-muted); }
.pipeline-board { min-width: 0; overflow-x: auto; padding-bottom: 12px; overscroll-behavior-x: contain; }
.pipeline-column > header { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.pipeline-column h3 { font-weight: 600; }
.pipeline-card { border-color: var(--line); border-radius: 11px; background: var(--panel); box-shadow: var(--soft-shadow); }
.pipeline-stage-control select { color: transparent; }
.form-card, .submission-card, .ai-analysis-grid div { background: var(--input); border-radius: 10px; }
.form-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.form-field-row input:not([type="checkbox"]) { min-height: 36px; padding: 8px; font-size: 12px; }
.bot-test-messages { background: var(--surface-muted); }
.bot-test-message { border-color: var(--line); background: var(--panel); border-radius: 13px; }
.bot-test-message.user { background: var(--accent-soft); color: var(--ink); }

/* Workflow colors identify node types; the surrounding editor stays neutral. */
.automation-view, :root[data-theme="dark"] .automation-view { background: var(--page); }
.workflow-builder-topbar { background: var(--panel); box-shadow: none; }
.workflow-canvas-panel, .workflow-canvas { background-color: var(--surface-muted); }
.workflow-canvas { background-image: radial-gradient(circle, var(--line) 1px, transparent 1.25px); }
.workflow-library, .workflow-inspector { background: var(--panel); }
.workflow-stage { align-content: start; }
.workflow-field input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; margin: 0; }
.workflow-list-item:hover, .workflow-list-item:focus-within, .workflow-list-item.is-selected { border-color: transparent; background: var(--accent-soft); }
.workflow-list-icon { background: #0066cc; box-shadow: none; }
.workflow-node, .workflow-branch-node { border-color: var(--line); border-radius: 13px; background: var(--panel); color: var(--ink); box-shadow: 0 3px 10px rgb(0 0 0 / 5%); }
.workflow-node:hover { border-color: var(--accent); box-shadow: 0 5px 14px rgb(0 0 0 / 8%); transform: none; }
.workflow-node header { border-color: var(--line); background: var(--input); }
.workflow-node > div small, .workflow-node-menu, .workflow-branch-node small { color: var(--muted); }
.workflow-canvas-toolbar, .workflow-zoom-controls { border-color: var(--line); background: var(--panel); color: var(--muted); box-shadow: var(--soft-shadow); }
.workflow-fullscreen-button, .workflow-zoom-controls button, .workflow-add-step button { border-color: var(--line); background: var(--input); color: var(--muted); }
.workflow-fullscreen-button:hover, .workflow-zoom-controls button:hover, .workflow-add-step button:hover { background: var(--accent-soft); color: var(--accent); }
.workflow-connector, .workflow-connector::before, .workflow-connector::after { background: var(--accent); border-color: var(--surface-muted); }
.workflow-connector span { background: var(--panel); color: var(--accent); }
.workflow-publish-status.is-published { color: var(--success); }
.workflow-builder-actions .send-button { white-space: nowrap; }

/* Dialogs, access and visitor pages use the same window and form primitives. */
dialog:not(#settingsDialog) { border: 1px solid var(--line); border-radius: var(--radius-window); background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(20 20 25 / 32%); backdrop-filter: blur(8px); }
.modal-header { border-color: var(--line); }
.modal-header h2 { font-size: 22px; font-weight: 650; }
.form-grid label, .modal-label { color: var(--ink); font-weight: 500; }
.workspace-option { border-color: var(--line); background: var(--input); color: var(--ink); }
.workspace-option:hover, .workspace-option.is-active { background: var(--accent-soft); }
.auth-gate { padding: 32px 18px; }
.auth-card { width: min(440px, 100%); padding: 36px; gap: 22px; border: 1px solid var(--line); border-radius: var(--radius-window); background: var(--panel); color: var(--ink); box-shadow: var(--shadow); backdrop-filter: none; animation: none; }
.auth-brand, .auth-copy, .auth-footnote, .auth-divider { color: var(--muted); }
.auth-brand { font-size: 12px; font-weight: 500; }
.auth-card .brand-mark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 0; }
.auth-card h1 { font-size: 28px; line-height: 1.2; }
.auth-card label { color: var(--ink); font-weight: 500; }
.auth-card input { min-height: 46px; padding: 11px 13px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font-size: 15px; }
.auth-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.auth-divider::before, .auth-divider::after { background: var(--line); }
.auth-link { color: var(--accent); line-height: 1.5; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-card .send-button, .auth-card .google-button { min-height: 46px; font-size: 14px; }
.google-button { color: var(--ink); background: var(--panel); }
.form-error, .public-feedback { margin: 0; padding: 12px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--rose) 8%, var(--panel)); color: var(--rose); line-height: 1.5; font-weight: 500; }
.form-success { padding: 12px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--success) 10%, var(--panel)); color: var(--success); line-height: 1.5; }
.auth-card h1 + .form-error, .auth-card h1 + .form-success { margin-top: 12px; }
.public-shell { gap: 24px; padding-block: 36px; }
.public-brand span { background: var(--brand); font-size: 13px; }
.public-brand strong { font-size: 17px; font-weight: 650; }
.public-card { border-radius: var(--radius-window); box-shadow: var(--shadow); }
.public-card-heading h1, .public-unavailable h1, .public-success h1 { font-size: clamp(27px, 4vw, 34px); font-weight: 650; letter-spacing: -.035em; line-height: 1.2; }
.public-field { font-weight: 500; gap: 9px; }
.public-field input, .public-field select, .public-field textarea, .webchat-composer textarea { padding: 12px; font-size: 15px; }
.public-consent { color: var(--muted); font-weight: 400; line-height: 1.6; }
.public-footer { font-size: 11px; line-height: 1.6; }
.webchat-avatar { background: var(--brand); }
.webchat-header { background: var(--panel); }
.webchat-header h1 { font-size: 16px; font-weight: 600; }
.webchat-card { padding: 0; }
.webchat-messages { padding: 20px; gap: 12px; }
.webchat-composer { padding: 14px; }

@media (min-width: 1101px) {
  .app-shell { grid-template-columns: 212px minmax(0, 1fr); }
  .nav-rail { padding: 18px 12px 14px; }
  .rail-button { height: 44px; }
  .brand-lockup { margin-bottom: 18px; }
}
@media (min-width: 761px) {
  .workspace { grid-template-rows: 80px minmax(0, 1fr); }
  .topbar { min-height: 80px; }
  .inbox-grid { gap: 12px; padding: 14px; }
}
@media (max-width: 1000px) {
  .inbox-grid { padding: 8px; }
}
@media (max-width: 760px) {
  .nav-rail { background: var(--nav); border-bottom-color: var(--line); }
  .nav-rail .rail-button { width: 44px; height: 44px; flex: 0 0 44px; }
  .topbar h1 { font-size: 19px; }
  .topbar-subtitle { font-size: 11px; }
  .dashboard-view, .contacts-view, .pipeline-view, .forms-view, .bot-view { padding: 20px 14px; }
  .dashboard-heading, .contacts-heading, .bot-heading { gap: 16px; }
  .contacts-heading-actions, .forms-heading-actions { width: 100%; gap: 8px; }
  .contacts-heading-actions button, .forms-heading-actions button { flex: 1 1 auto; min-height: 44px; }
  .bot-test-composer .send-button { width: 100%; }
  .lead-column, .conversation-column { border-radius: 12px; }
  .metric-card { padding: 18px; }
  .metric-card strong { font-size: 30px; }
  .public-shell { padding: 24px 14px; gap: 18px; }
  .webchat-page .public-shell { padding-inline: 14px; }
  .auth-card { padding: 28px 24px; }
  .auth-card h1 { font-size: 26px; }
  .public-card:not(.webchat-card) { padding: 24px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px; }
  .search-box input { font-size: 14px; }
  .secondary-button, .danger-button, .send-button, .form-card-actions button, .field-type-buttons button { min-height: 44px; }
  .workflow-builder-topbar .secondary-button, .workflow-builder-topbar .send-button { min-height: 44px; }
  .public-footer { padding-inline: 8px; }
}
@media (max-width: 380px) {
  .auth-card { padding: 24px 20px; }
  .public-card:not(.webchat-card) { padding: 22px 18px; }
}
@media (max-width: 600px) {
  .webchat-page .public-shell { grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; min-height: 100dvh; padding: 12px 14px; gap: 12px; }
  .webchat-page .public-brand, .webchat-page .public-footer { margin-inline: 0; }
  .webchat-page .webchat-card { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto; border: 1px solid var(--line); border-radius: var(--radius-window); }
  .webchat-page:has(.webchat-setup:not([hidden])) { overflow: auto; }
  .webchat-page .public-shell:has(> .webchat-setup:not([hidden])) { height: auto; grid-template-rows: auto auto auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

.crm-page-controls { display: flex; justify-content: center; gap: 12px; padding: 12px; flex-wrap: wrap; }

.crm-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; line-height: 1.5; }
.crm-loading[hidden] { display: none; }
.loading-spinner { flex: 0 0 auto; width: 15px; height: 15px; border: 2px solid var(--accent-soft); border-top-color: currentColor; border-radius: 50%; animation: sole-loading-spin 800ms linear infinite; }
.crm-loading-centered { position: absolute; z-index: 10; top: min(50%, 50dvh); left: 50%; transform: translate(-50%, -50%); flex-direction: column; gap: 12px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); box-shadow: var(--soft-shadow); max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.crm-loading-centered .loading-spinner { width: 30px; height: 30px; border-width: 3px; }
@keyframes sole-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; } }

/* Destructive confirmations share the workspace palette in both themes. */
.confirmation-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-window);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.confirmation-dialog::backdrop { background: rgb(0 0 0 / 44%); backdrop-filter: blur(4px); }
.confirmation-content { padding: 24px; }
.confirmation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.confirmation-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: color-mix(in srgb, var(--rose) 12%, var(--panel)); color: var(--rose); }
.confirmation-icon svg { width: 24px; height: 24px; }
.confirmation-dialog .confirmation-close { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; font-size: 24px; line-height: 1; }
.confirmation-dialog h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.confirmation-dialog p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.confirmation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.confirmation-actions button { width: auto; min-height: 44px; min-width: 104px; max-width: 100%; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; cursor: pointer; }
.confirmation-actions .secondary-button { color: var(--ink); }
.confirmation-actions .danger-button { background: #bf2f3b; border: 1px solid transparent; color: #fff; }
.confirmation-actions .danger-button:hover { background: #a82631; }
.confirmation-actions .danger-button:active { background: #92212a; }
.confirmation-dialog[open] { animation: confirmation-arrive 160ms ease-out; }
@keyframes confirmation-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .confirmation-content { padding: 20px; }
  .confirmation-actions button { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .confirmation-dialog[open] { animation: none; } }