/* Product UI refinement: quiet surfaces, clear hierarchy and native-feeling controls. */
:root {
  --refined-canvas: oklch(0.975 0.004 255);
  --refined-surface: oklch(1 0 0);
  --refined-surface-raised: oklch(0.992 0.003 255);
  --refined-ink: oklch(0.225 0.022 258);
  --refined-muted: oklch(0.48 0.018 258);
  --refined-line: oklch(0.9 0.008 258);
  --refined-accent: oklch(0.52 0.175 256);
  --refined-accent-strong: oklch(0.43 0.17 256);
  --refined-accent-soft: oklch(0.94 0.035 256);
  --refined-danger: oklch(0.52 0.19 28);
  --app-bg: var(--refined-canvas);
  --app-surface: var(--refined-surface);
  --app-surface-soft: var(--refined-surface-raised);
  --app-border: var(--refined-line);
  --app-text: var(--refined-ink);
  --app-muted: var(--refined-muted);
  --font-title: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-content: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  --refined-canvas: oklch(0.18 0.012 258);
  --refined-surface: oklch(0.215 0.012 258);
  --refined-surface-raised: oklch(0.25 0.012 258);
  --refined-ink: oklch(0.95 0.005 258);
  --refined-muted: oklch(0.72 0.014 258);
  --refined-line: oklch(0.33 0.012 258);
  --refined-accent: oklch(0.7 0.15 255);
  --refined-accent-strong: oklch(0.77 0.13 255);
  --refined-accent-soft: oklch(0.29 0.04 255);
}

body,
.app-shell,
.mock-conversations,
.mock-contacts,
.messages-screen,
.internal-chat,
.reports-screen {
  background: var(--refined-canvas);
}

/* Turbo keeps navigation responsive while the remote Chatwoot data is being fetched. */
.app-navigation-shell {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: stretch center;
  overflow: hidden;
  visibility: hidden;
  background: var(--workspace-canvas, var(--refined-canvas));
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out, visibility 0s linear 140ms;
}

html.pwa-navigation--loading .app-navigation-shell {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.app-navigation-shell__frame {
  width: min(520px, 100%);
  background: var(--workspace-canvas, var(--refined-canvas));
}

.app-navigation-shell__header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  border-bottom: 1px solid var(--workspace-line, var(--refined-line));
  background: var(--workspace-surface, var(--refined-surface));
}

.app-navigation-shell__button,
.app-navigation-shell__title,
.app-navigation-shell__eyebrow,
.app-navigation-shell__heading,
.app-navigation-shell__line,
.app-navigation-shell__row {
  display: block;
  background: var(--workspace-raised, var(--refined-surface-raised));
}

.app-navigation-shell__button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--workspace-line, var(--refined-line));
  border-radius: 11px;
  background: var(--workspace-surface, var(--refined-surface));
}

.app-navigation-shell__title {
  width: min(148px, 72%);
  height: 14px;
  justify-self: center;
  border-radius: 5px;
}

.app-navigation-shell__content {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px 14px;
}

.app-navigation-shell__eyebrow {
  width: 72px;
  height: 10px;
  border-radius: 4px;
}

.app-navigation-shell__heading {
  width: min(216px, 68%);
  height: 20px;
  border-radius: 6px;
}

.app-navigation-shell__line {
  width: min(294px, 92%);
  height: 11px;
  border-radius: 4px;
}

.app-navigation-shell__line--short {
  width: min(168px, 55%);
  margin-bottom: 8px;
}

.app-navigation-shell__list {
  overflow: hidden;
  border: 1px solid var(--workspace-line, var(--refined-line));
  border-radius: 13px;
  background: var(--workspace-surface, var(--refined-surface));
}

.app-navigation-shell__row {
  height: 68px;
  border-bottom: 1px solid var(--workspace-line, var(--refined-line));
  background: var(--workspace-surface, var(--refined-surface));
}

.app-navigation-shell__row:last-child {
  border-bottom: 0;
}

.app-navigation-shell__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
a[role="button"],
.floating-navbar__item,
.mock-conversations__card-link,
.mock-contacts__card-link,
.conversation-actions__picker-item,
.conversation-actions__drawer-option,
.linked-accounts__option {
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--refined-accent);
  outline-offset: 2px;
}

/* Persistent navigation: deliberately solid, not a floating glass ornament. */
.floating-navbar {
  bottom: 0;
  width: min(560px, 100%);
  min-height: 64px;
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--refined-line);
  border-radius: 0;
  background: var(--refined-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.floating-navbar__item {
  min-height: 48px;
  border-radius: 10px;
  color: var(--refined-muted);
}

.floating-navbar__item--active {
  background: var(--refined-accent-soft);
  color: var(--refined-accent-strong);
}

.floating-navbar__item:active,
.mock-conversations__card-link:active .mock-conversations__card,
.mock-contacts__card-link:active .mock-contacts__card {
  transform: none;
  background: var(--refined-surface-raised);
}

.floating-navbar__label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
}

.floating-navbar__avatar,
.floating-navbar__badge {
  box-shadow: none;
}

/* Login: one restrained authentication surface, no marketing-card treatment. */
.app-shell--login,
.app-shell--login .chatwoot-login {
  background: var(--refined-canvas);
}

.app-shell--login .chatwoot-login {
  width: min(100%, 420px);
  max-width: 420px;
  padding: 28px 24px 30px;
  border: 1px solid var(--refined-line);
  border-radius: 16px;
  background: var(--refined-surface);
  box-shadow: none;
}

.chatwoot-login__logo {
  margin-bottom: 28px;
}

.chatwoot-login__title {
  color: var(--refined-ink);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.chatwoot-login__subtitle,
.chatwoot-login__info,
.chatwoot-login__divider {
  color: var(--refined-muted);
}

.chatwoot-login__input,
.conversation-actions__drawer-input,
.reports-filter__select,
.scheduled-messages__textarea,
.kanban-detail-note-form__input {
  border-color: var(--refined-line);
  border-radius: 10px;
  background: var(--refined-surface);
  color: var(--refined-ink);
  box-shadow: none;
}

.chatwoot-login__input:focus,
.conversation-actions__drawer-input:focus,
.reports-filter__select:focus,
.scheduled-messages__textarea:focus,
.kanban-detail-note-form__input:focus {
  border-color: var(--refined-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--refined-accent) 15%, transparent);
}

.chatwoot-login__submit,
.conversation-actions__drawer-save,
.reports-filter__submit,
.scheduled-messages__save,
.kanban-detail-inline-form__button,
.messages-screen__composer-send {
  border-radius: 10px;
  background: var(--refined-accent);
  box-shadow: none;
}

.chatwoot-login__submit:hover,
.conversation-actions__drawer-save:hover,
.reports-filter__submit:hover,
.scheduled-messages__save:hover,
.kanban-detail-inline-form__button:hover,
.messages-screen__composer-send:hover {
  background: var(--refined-accent-strong);
  transform: translateY(-1px);
}

/* Shared screen chrome and data lists. */
.mock-conversations__header,
.mock-contacts__header,
.messages-screen__header,
.internal-chat__header {
  border-bottom: 1px solid var(--refined-line);
  background: var(--refined-surface);
  box-shadow: none;
}

.mock-conversations__icon-button,
.mock-conversations__filter,
.messages-screen__back,
.messages-screen__resolve-button,
.messages-screen__more-button,
.contact-show__back,
.contact-show__edit-button {
  border-color: var(--refined-line);
  border-radius: 10px;
  background: var(--refined-surface);
  color: var(--refined-ink);
  box-shadow: none;
}

.mock-conversations__inbox-title,
.messages-screen__conversation-title,
.contact-show__title,
.contact-show__name,
.internal-chat__title {
  color: var(--refined-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.mock-conversations__search {
  border: 1px solid var(--refined-line);
  border-radius: 10px;
  background: var(--refined-surface-raised);
}

.mock-conversations__search:focus-within {
  border-color: var(--refined-accent);
  background: var(--refined-surface);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--refined-accent) 12%, transparent);
}

.mock-conversations__tabs {
  border-bottom-color: var(--refined-line);
  background: var(--refined-surface);
}

.mock-conversations__tab,
.conversation-actions__chip,
.conversation-actions__chip-button,
.conversation-actions__secondary-button,
.status-badge {
  border-radius: 8px;
}

.mock-conversations__tab {
  background: var(--refined-surface-raised);
  color: var(--refined-muted);
  font-weight: 600;
}

.mock-conversations__tab--active {
  background: var(--refined-accent-soft);
  color: var(--refined-accent-strong);
}

.mock-conversations__list,
.mock-contacts__list,
.messages-screen__list {
  background: var(--refined-surface);
}

.mock-conversations__card,
.mock-contacts__card {
  border-bottom-color: var(--refined-line);
}

.mock-conversations__card:hover,
.mock-contacts__card:hover {
  background: var(--refined-surface-raised);
}

.mock-conversations__contact,
.mock-contacts__name,
.mock-contacts__title,
.mock-conversations__contact-cell strong {
  color: var(--refined-ink);
}

.mock-conversations__message,
.mock-conversations__time,
.mock-contacts__subtitle,
.mock-contacts__subtitle-text {
  color: var(--refined-muted);
}

.mock-conversations__badge,
.mock-conversations__filter-badge {
  background: var(--refined-accent);
  box-shadow: 0 0 0 2px var(--refined-surface);
}

/* Sheets, filters and action panes share one predictable mobile vocabulary. */
.conversation-actions__drawer-backdrop {
  background: color-mix(in oklch, var(--refined-ink) 35%, transparent);
}

.conversation-actions__drawer,
.messages-screen__macro-drawer {
  border: 1px solid var(--refined-line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--refined-surface);
  box-shadow: none;
}

.conversation-actions__drawer-handle,
.messages-screen__macro-handle {
  background: var(--refined-line);
}

.conversation-actions__drawer-title,
.conversation-actions__section-title,
.conversation-actions__subsection-title {
  color: var(--refined-ink);
  letter-spacing: -0.012em;
}

.conversation-actions__drawer-option,
.conversation-actions__picker-item,
.linked-accounts__option,
.conversation-actions__label-option,
.account-theme-option {
  border-color: var(--refined-line);
  border-radius: 10px;
  background: var(--refined-surface);
  box-shadow: none;
}

.conversation-actions__drawer-option--active,
.conversation-actions__picker-item--active,
.linked-accounts__option--active,
.account-theme-option:has(input:checked) {
  border-color: var(--refined-accent);
  background: var(--refined-accent-soft);
  color: var(--refined-accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--refined-accent) 20%, transparent);
}

.conversation-filter__status-chip-face,
.conversation-filter__priority-chip-face,
.conversation-filter__kanban-chip-face {
  min-height: 40px;
  border-color: var(--refined-line);
  border-radius: 9px;
  background: var(--refined-surface);
  color: var(--refined-ink);
  box-shadow: none;
}

/* Conversation: reduce visual noise so the thread remains the focal point. */
.messages-screen__header {
  background: var(--refined-surface);
}

.messages-screen__date-separator span {
  border: 1px solid var(--refined-line);
  border-radius: 999px;
  background: var(--refined-surface-raised);
  color: var(--refined-muted);
}

.messages-screen__bubble {
  border-color: var(--refined-line);
  border-radius: 14px;
  background: var(--refined-surface);
  color: var(--refined-ink);
  box-shadow: none;
}

.messages-screen__bubble--mine {
  border-color: color-mix(in oklch, var(--refined-accent) 26%, var(--refined-line));
  background: var(--refined-accent-soft);
  color: var(--refined-ink);
}

.messages-screen__bubble--private {
  border-color: oklch(0.79 0.1 72);
  background: oklch(0.96 0.04 72);
  color: oklch(0.34 0.07 55);
}

.messages-screen__composer {
  border-top-color: var(--refined-line);
  background: var(--refined-surface);
}

.messages-screen__composer-card,
.messages-screen__composer-mode,
.messages-screen__audio-preview-player {
  border-color: var(--refined-line);
  border-radius: 12px;
  background: var(--refined-surface-raised);
  box-shadow: none;
}

.messages-screen__composer-input {
  color: var(--refined-ink);
}

.messages-screen__composer-input::placeholder {
  color: var(--refined-muted);
}

.messages-screen__composer-mode input:checked + .messages-screen__composer-tab {
  border-radius: 8px;
  background: var(--refined-surface);
  color: var(--refined-accent-strong);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--refined-ink) 10%, transparent);
}

.messages-screen__composer-icon,
.messages-screen__composer-mic {
  color: var(--refined-muted);
}

.messages-screen__composer-mic {
  background: var(--refined-accent);
  color: white;
}

/* Secondary screens: cards act as grouped settings, never as decoration. */
.conversation-actions__card,
.contact-show__card,
.contact-show__section,
.internal-chat__room,
.scheduled-messages__card,
.reports-card,
.kanban-detail-insight,
.kanban-detail-block,
.kanban-detail-agent-progress {
  border-color: var(--refined-line);
  border-radius: 12px;
  background: var(--refined-surface);
  box-shadow: none;
}

.conversation-actions__card,
.contact-show__card,
.contact-show__section,
.scheduled-messages__card,
.kanban-detail-block {
  border-width: 1px;
}

.contact-show__header,
.internal-chat__header,
.scheduled-messages__header {
  border-bottom-color: var(--refined-line);
  background: var(--refined-surface);
}

.internal-chat__room:hover,
.scheduled-messages__card:hover,
.reports-card:hover {
  border-color: color-mix(in oklch, var(--refined-accent) 30%, var(--refined-line));
}

.scheduled-messages__card-icon,
.reports-card__icon {
  border-radius: 10px;
  background: var(--refined-accent-soft);
  color: var(--refined-accent-strong);
}

.reports-hero {
  border: 1px solid var(--refined-line);
  border-radius: 12px;
  background: var(--refined-surface);
  box-shadow: none;
}

/* Reports use a compact operational summary and grouped rows, not a metric-card dashboard. */
.reports-summary {
  display: grid;
  gap: 18px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--refined-line);
  background: var(--refined-surface);
}

.reports-summary h1 {
  margin: 0;
  color: var(--refined-ink);
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.reports-summary p {
  margin: 4px 0 0;
  color: var(--refined-muted);
  font-size: 13px;
}

.reports-summary__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.reports-summary__metrics div {
  min-width: 0;
}

.reports-summary__metrics dt {
  overflow: hidden;
  color: var(--refined-muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-summary__metrics dd {
  margin: 3px 0 0;
  color: var(--refined-ink);
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.reports-section {
  margin-top: 20px;
}

.reports-section h2 {
  margin: 0 0 8px;
  color: var(--refined-muted);
  font-size: 13px;
  font-weight: 650;
}

.reports-grid,
.reports-grid--compact {
  display: block;
  overflow: hidden;
  border: 1px solid var(--refined-line);
  border-radius: 12px;
  background: var(--refined-surface);
}

.reports-card,
.reports-card--compact {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--refined-line);
  border-radius: 0;
  background: transparent;
}

.reports-card:last-child {
  border-bottom: 0;
}

.reports-card__icon {
  grid-row: span 2;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  box-shadow: none;
}

.reports-card__label {
  color: var(--refined-ink);
  font-size: 13px;
  font-weight: 650;
}

.reports-card__value {
  grid-column: 3;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--refined-ink);
  font-size: 19px;
  font-weight: 720;
}

.reports-card__hint {
  margin: 2px 0 0;
  color: var(--refined-muted);
  font-size: 11px;
  font-weight: 500;
}

/* Status selection reads as a native choice list instead of four competing feature cards. */
.conversation-actions__status-grid {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--refined-line);
  border-radius: 12px;
  background: var(--refined-surface);
}

.conversation-actions__status-form + .conversation-actions__status-form {
  border-top: 1px solid var(--refined-line);
}

.conversation-actions__status-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.conversation-actions__status-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: none;
}

.conversation-actions__status-card-icon svg {
  width: 17px;
  height: 17px;
}

.conversation-actions__status-card-copy {
  gap: 1px;
}

.conversation-actions__status-card-label {
  color: var(--refined-ink);
  font-size: 14px;
}

.conversation-actions__status-card-hint {
  color: var(--refined-muted);
  font-size: 12px;
}

.conversation-actions__status-card--active {
  background: var(--refined-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--refined-accent) 22%, transparent);
}

.conversation-actions__status-card--active .conversation-actions__status-card-label {
  color: var(--refined-accent-strong);
}

.conversation-actions__status-card-check {
  position: static;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--refined-accent);
  color: white;
}

.conversation-actions__snooze-panel {
  border-color: var(--refined-line);
  border-radius: 12px;
  background: var(--refined-surface-raised);
  box-shadow: none;
}

html[data-theme="dark"] .reports-summary,
html[data-theme="dark"] .reports-grid,
html[data-theme="dark"] .conversation-actions__status-grid {
  border-color: var(--refined-line);
  background: var(--refined-surface);
}

.reports-hero__eyebrow,
.reports-hero__insight span {
  color: var(--refined-muted);
}

.reports-hero__main strong,
.reports-card__value,
.kanban-detail-hero__title {
  color: var(--refined-ink);
  letter-spacing: -0.025em;
}

.reports-card::after,
.kanban-detail-hero__kicker {
  display: none;
}

.kanban-detail-hero,
.kanban-detail-outcome-banner {
  border-color: var(--refined-line);
  border-radius: 12px;
  background: var(--refined-surface);
  box-shadow: none;
}

.kanban-detail-pill,
.kanban-detail-hero__id,
.kanban-detail-block__summary::after {
  border-radius: 8px;
}

html[data-theme="dark"] .floating-navbar,
html[data-theme="dark"] .mock-conversations__header,
html[data-theme="dark"] .mock-contacts__header,
html[data-theme="dark"] .messages-screen__header,
html[data-theme="dark"] .internal-chat__header,
html[data-theme="dark"] .chatwoot-login,
html[data-theme="dark"] .conversation-actions__drawer,
html[data-theme="dark"] .messages-screen__macro-drawer,
html[data-theme="dark"] .messages-screen__composer,
html[data-theme="dark"] .mock-conversations__list,
html[data-theme="dark"] .mock-contacts__list,
html[data-theme="dark"] .messages-screen__list,
html[data-theme="dark"] .conversation-actions__card,
html[data-theme="dark"] .contact-show__card,
html[data-theme="dark"] .contact-show__section,
html[data-theme="dark"] .internal-chat__room,
html[data-theme="dark"] .scheduled-messages__card,
html[data-theme="dark"] .reports-card,
html[data-theme="dark"] .reports-hero,
html[data-theme="dark"] .kanban-detail-hero,
html[data-theme="dark"] .kanban-detail-outcome-banner,
html[data-theme="dark"] .kanban-detail-block,
html[data-theme="dark"] .kanban-detail-insight,
html[data-theme="dark"] .kanban-detail-agent-progress,
html[data-theme="dark"] .messages-screen__bubble,
html[data-theme="dark"] .mock-conversations__search,
html[data-theme="dark"] .chatwoot-login__input,
html[data-theme="dark"] .conversation-actions__drawer-input,
html[data-theme="dark"] .reports-filter__select,
html[data-theme="dark"] .scheduled-messages__textarea,
html[data-theme="dark"] .kanban-detail-note-form__input,
html[data-theme="dark"] .messages-screen__composer-card,
html[data-theme="dark"] .messages-screen__composer-mode,
html[data-theme="dark"] .messages-screen__audio-preview-player,
html[data-theme="dark"] .conversation-actions__drawer-option,
html[data-theme="dark"] .conversation-actions__picker-item,
html[data-theme="dark"] .linked-accounts__option,
html[data-theme="dark"] .account-theme-option,
html[data-theme="dark"] .conversation-filter__status-chip-face,
html[data-theme="dark"] .conversation-filter__priority-chip-face,
html[data-theme="dark"] .conversation-filter__kanban-chip-face {
  background: var(--refined-surface);
  border-color: var(--refined-line);
  color: var(--refined-ink);
}

html[data-theme="dark"] .messages-screen__bubble--mine,
html[data-theme="dark"] .floating-navbar__item--active,
html[data-theme="dark"] .mock-conversations__tab--active,
html[data-theme="dark"] .conversation-actions__drawer-option--active,
html[data-theme="dark"] .conversation-actions__picker-item--active,
html[data-theme="dark"] .linked-accounts__option--active,
html[data-theme="dark"] .account-theme-option:has(input:checked) {
  background: var(--refined-accent-soft);
  color: var(--refined-accent-strong);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Second-pass app composition: the shared page classes make the screen architecture explicit. */
:root {
  --workspace-canvas: oklch(0.965 0.007 255);
  --workspace-surface: oklch(1 0 0);
  --workspace-raised: oklch(0.987 0.004 255);
  --workspace-ink: oklch(0.21 0.018 258);
  --workspace-muted: oklch(0.46 0.016 258);
  --workspace-faint: oklch(0.63 0.012 258);
  --workspace-line: oklch(0.875 0.008 258);
  --workspace-accent: oklch(0.5 0.16 252);
  --workspace-accent-soft: oklch(0.93 0.035 252);
}

html[data-theme="dark"] {
  --workspace-canvas: oklch(0.17 0.01 258);
  --workspace-surface: oklch(0.215 0.01 258);
  --workspace-raised: oklch(0.255 0.01 258);
  --workspace-ink: oklch(0.94 0.005 258);
  --workspace-muted: oklch(0.71 0.012 258);
  --workspace-faint: oklch(0.57 0.01 258);
  --workspace-line: oklch(0.335 0.01 258);
  --workspace-accent: oklch(0.72 0.13 252);
  --workspace-accent-soft: oklch(0.29 0.035 252);
}

.app-shell {
  background: var(--workspace-canvas);
}

.app-page {
  color: var(--workspace-ink);
}

/* Application bars and list pages. */
.app-page.mock-conversations,
.app-page.mock-contacts {
  max-width: 520px;
  background: var(--workspace-canvas);
}

.app-page .mock-conversations__header,
.app-page .mock-contacts__header {
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 0;
  background: var(--workspace-canvas);
}

.app-page .mock-conversations__header-top,
.app-page .mock-conversations__topbar {
  min-height: 42px;
  align-items: center;
}

.app-page .mock-conversations__inbox-title {
  gap: 8px;
  color: var(--workspace-ink);
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.app-page .mock-conversations__inbox-title svg {
  width: 19px;
  height: 19px;
  color: var(--workspace-accent);
}

.app-page .mock-conversations__icon-button,
.app-page .mock-conversations__filter {
  width: 40px;
  height: 40px;
  border: 1px solid var(--workspace-line);
  border-radius: 11px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
}

.app-page .mock-conversations__icon-button:hover,
.app-page .mock-conversations__filter:hover {
  border-color: color-mix(in oklch, var(--workspace-accent) 42%, var(--workspace-line));
  background: var(--workspace-raised);
}

.app-page .mock-conversations__search-row {
  margin-top: 14px;
  gap: 8px;
}

.app-page .mock-conversations__search {
  min-height: 44px;
  border: 1px solid var(--workspace-line);
  border-radius: 11px;
  background: var(--workspace-surface);
}

.app-page .mock-conversations__search input {
  color: var(--workspace-ink);
  font-size: 14px;
}

.app-page .mock-conversations__search input::placeholder {
  color: var(--workspace-faint);
}

.app-page .mock-conversations__tabs {
  gap: 4px;
  padding: 12px 16px 6px;
  border: 0;
  background: var(--workspace-canvas);
}

.app-page .mock-conversations__tab {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page .mock-conversations__tab--active {
  border-color: var(--workspace-line);
  background: var(--workspace-surface);
  color: var(--workspace-ink);
}

.app-page .mock-conversations__list,
.app-page .mock-contacts__list {
  margin: 0 10px;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: var(--workspace-surface);
}

/* Keep the loading state in the same shell as the loaded conversation list. */
.app-page--inbox .mock-conversations__skeleton {
  margin: 0 10px;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: var(--workspace-surface);
}

.app-page--inbox .mock-conversations__skeleton-card {
  border-bottom-color: var(--workspace-line);
}

.app-page .mock-conversations__card,
.app-page .mock-contacts__card {
  min-height: 68px;
  padding: 12px 14px;
  border-bottom-color: var(--workspace-line);
  background: transparent;
}

.app-page .mock-conversations__card:last-child,
.app-page .mock-contacts__card:last-child {
  border-bottom: 0;
}

.app-page .mock-conversations__card:hover,
.app-page .mock-contacts__card:hover {
  background: var(--workspace-raised);
}

.app-page .mock-conversations__empty,
.app-page .mock-contacts__empty {
  min-height: 88px;
  margin: 0;
  padding: 24px 16px;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

.app-page--thread .mock-conversations__empty,
.app-page--team-thread .mock-conversations__empty {
  align-self: center;
  margin: auto 0;
}

.app-page .mock-conversations__avatar {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.app-page .mock-conversations__contact,
.app-page .mock-contacts__name,
.app-page .mock-conversations__row strong {
  color: var(--workspace-ink);
  font-size: 14px;
  font-weight: 680;
}

.app-page .mock-conversations__message,
.app-page .mock-conversations__time,
.app-page .mock-contacts__subtitle-text,
.app-page .mock-conversations__snippet {
  color: var(--workspace-muted);
}

.app-page .mock-conversations__badge,
.app-page .mock-conversations__filter-badge,
.app-page .notifications__count-badge {
  background: var(--workspace-accent);
}

.app-page .notifications__type-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

/* Native bottom navigation: fixed to the edge, state comes from weight and tint. */
.floating-navbar {
  width: min(520px, 100%);
  min-height: 66px;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
}

.floating-navbar__item {
  min-height: 50px;
  gap: 3px;
  border-radius: 9px;
  color: var(--workspace-faint);
}

.floating-navbar__item--active {
  background: transparent;
  color: var(--workspace-accent);
}

.floating-navbar__item--active .floating-navbar__icon {
  stroke-width: 2.5;
}

.floating-navbar__label {
  font-size: 10px;
  font-weight: 620;
}

.floating-navbar__item--active .floating-navbar__label {
  font-weight: 760;
}

.floating-navbar__avatar {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
}

/* Conversation threads: one restrained reading surface with a clear composer. */
.app-page.messages-screen,
.app-page.contact-show {
  max-width: 520px;
  background: var(--workspace-canvas);
}

.app-page.messages-screen {
  min-height: 0;
  height: 100%;
}

.app-page .messages-screen__header,
.app-page .contact-show__header {
  min-height: 64px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
}

.app-page .messages-screen__back,
.app-page .messages-screen__resolve-button,
.app-page .messages-screen__more-button,
.app-page .contact-show__edit-button {
  width: 38px;
  height: 38px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
}

.app-page .messages-screen__conversation-title,
.app-page .messages-screen__header-title-text,
.app-page .contact-show__conversation-title {
  color: var(--workspace-ink);
  font-size: 14px;
  font-weight: 700;
}

.app-page .messages-screen__list {
  padding: 16px 14px 12px;
  background: var(--workspace-canvas);
}

.app-page .messages-screen__date-separator {
  margin: 6px 0 14px;
}

.app-page .messages-screen__date-separator span {
  border: 0;
  background: transparent;
  color: var(--workspace-faint);
  font-size: 11px;
  font-weight: 650;
}

.app-page .messages-screen__bubble {
  max-width: min(82%, 360px);
  padding: 10px 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
}

.app-page .messages-screen__bubble--mine {
  border-color: color-mix(in oklch, var(--workspace-accent) 28%, var(--workspace-line));
  background: var(--workspace-accent-soft);
}

.app-page .messages-screen__bubble--private {
  border-color: oklch(0.8 0.08 74);
  background: oklch(0.96 0.035 74);
  color: oklch(0.33 0.05 63);
}

.app-page .messages-screen__time {
  color: var(--workspace-faint);
}

.app-page .messages-screen__composer {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 0;
  background: var(--workspace-canvas);
}

.app-page .messages-screen__composer-card {
  border-color: var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-raised);
}

.app-page .messages-screen__composer-input {
  min-height: 44px;
  color: var(--workspace-ink);
}

.app-page .messages-screen__composer-send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--workspace-accent);
}

/* Keep the composer in the thread layout so messages never scroll beneath it. */
.app-page--thread .messages-screen__body,
.app-page--team-thread .messages-screen__body {
  min-height: 0;
}

.app-page--thread .messages-screen__composer,
.app-page--team-thread .messages-screen__composer {
  position: relative;
  bottom: auto;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
}

.app-page--thread .messages-screen__list,
.app-page--team-thread .messages-screen__list {
  margin-bottom: 0;
  padding-bottom: 16px;
}

/* Detail, settings and action surfaces are grouped content rather than scattered cards. */
.app-page .messages-screen__body,
.app-page .contact-show__body {
  background: var(--workspace-canvas);
}

.app-page .conversation-actions,
.app-page .scheduled-messages {
  padding: 20px 14px var(--page-navbar-bottom-space);
  background: var(--workspace-canvas);
}

.app-page .conversation-actions__section-title,
.app-page .contact-show__section-title {
  margin: 20px 2px 8px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.app-page .conversation-actions__section-title--first {
  margin-top: 0;
}

.app-page .conversation-actions__card,
.app-page .contact-show__card,
.app-page .scheduled-messages__card,
.app-page .kanban-detail-block {
  overflow: hidden;
  border-color: var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
}

.app-page .conversation-actions__row,
.app-page .contact-show__row {
  min-height: 48px;
  padding: 12px 14px;
  border-bottom-color: var(--workspace-line);
}

.app-page .conversation-actions__row:last-child,
.app-page .contact-show__row:last-child {
  border-bottom: 0;
}

.app-page--actions .conversation-actions__row--before-secondary-action {
  border-bottom: 0;
}

.app-page .conversation-actions__label,
.app-page .contact-show__row strong {
  color: var(--workspace-ink);
  font-size: 13px;
}

.app-page .conversation-actions__value,
.app-page .contact-show__row span {
  color: var(--workspace-muted);
  font-size: 13px;
}

.app-page .contact-show__profile-card {
  margin: 0;
  padding: 20px 14px 16px;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: var(--workspace-surface);
}

.app-page .contact-show__profile-card .contact-show__avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}

.app-page .contact-show__name {
  color: var(--workspace-ink);
  font-size: 21px;
  letter-spacing: -0.025em;
}

.app-page .contact-show__quick-actions {
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
}

.app-page .contact-show__quick-action {
  min-height: 42px;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
}

.app-page .contact-show__metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 12px 14px 0;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
}

.app-page .contact-show__metric {
  padding: 12px 6px;
  border: 0;
  border-right: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
}

.app-page .contact-show__metric:last-child {
  border-right: 0;
}

.app-page .contact-show__metric strong {
  color: var(--workspace-ink);
  font-size: 18px;
}

.app-page .contact-show__metric span {
  color: var(--workspace-muted);
  font-size: 11px;
}

/* Contact detail: an identity moment followed by compact, mobile-native lists. */
.app-page--contact .contact-show__body {
  gap: 0;
  padding: 76px 0 var(--page-navbar-bottom-space);
  background: var(--workspace-canvas);
}

.app-page--contact .contact-show__profile-card {
  margin: 0 14px;
  padding: 20px 14px 16px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.app-page--contact .contact-show__profile-card .contact-show__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
  font-size: 25px;
}

.app-page--contact .contact-show__profile-copy {
  justify-items: center;
  gap: 6px;
}

.app-page--contact .contact-show__name {
  font-size: 22px;
  line-height: 1.1;
}

.app-page--contact .status-badge {
  justify-self: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}

.app-page--contact .contact-show__quick-actions {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  margin: 0 14px;
  padding: 6px;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: var(--workspace-surface);
}

.app-page--contact .contact-show__quick-action {
  min-height: 52px;
  gap: 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--workspace-ink);
  font-size: 12px;
}

.app-page--contact .contact-show__quick-action:hover {
  background: var(--workspace-raised);
}

.app-page--contact .contact-show__quick-action svg {
  color: var(--workspace-accent);
}

.app-page--contact .contact-show__metrics {
  margin: 16px 14px 0;
  border-radius: 14px;
}

.app-page--contact .contact-show__metric {
  min-height: 62px;
  padding: 11px 10px;
}

.app-page--contact .contact-show__metric strong {
  font-size: 20px;
  letter-spacing: -0.025em;
}

.app-page--contact .contact-show__metric span {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
}

.app-page--contact .contact-show__card {
  margin: 20px 14px 0;
  padding: 0;
  border-radius: 16px;
}

.app-page--contact .contact-show__section-title {
  margin: 0;
  padding: 14px 14px 10px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.app-page--contact .contact-show__empty {
  padding: 0 14px 16px;
  color: var(--workspace-muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-page--contact .contact-show__channel,
.app-page--contact .contact-show__conversation,
.app-page--contact .contact-show__row {
  min-height: 50px;
  padding: 12px 14px;
  border-bottom-color: var(--workspace-line);
}

.app-page--contact .contact-show__section-title + .contact-show__channel,
.app-page--contact .contact-show__section-title + .contact-show__conversation,
.app-page--contact .contact-show__section-title + .contact-show__row {
  border-top: 1px solid var(--workspace-line);
}

.app-page--contact .contact-show__channel strong,
.app-page--contact .contact-show__conversation strong,
.app-page--contact .contact-show__row strong {
  color: var(--workspace-ink);
  font-size: 13px;
}

.app-page--contact .contact-show__channel span,
.app-page--contact .contact-show__conversation small,
.app-page--contact .contact-show__conversation em,
.app-page--contact .contact-show__row span {
  color: var(--workspace-muted);
  font-size: 12px;
}

.app-page--contact .contact-show__row {
  align-items: center;
}

.app-page--contact .contact-show__row span {
  max-width: 58%;
  font-variant-numeric: tabular-nums;
}

.app-page--contact .contact-show__conversation time {
  color: var(--workspace-faint);
  font-variant-numeric: tabular-nums;
}

/* Reports and Kanban lean on data hierarchy, not decorative dashboard panels. */
.app-page .reports-screen {
  margin: 0;
  padding: 0 14px var(--page-navbar-bottom-space);
  background: var(--workspace-canvas);
}

.app-page .reports-summary {
  margin: 4px -14px 0;
  padding: 20px 16px 18px;
  border-bottom: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
}

.app-page .reports-summary h1 {
  color: var(--workspace-ink);
  font-size: 21px;
  font-weight: 720;
}

.app-page .reports-summary p,
.app-page .reports-summary__metrics dt,
.app-page .reports-card__hint {
  color: var(--workspace-muted);
}

.app-page .reports-summary__metrics dd,
.app-page .reports-card__value,
.app-page .reports-card__label {
  color: var(--workspace-ink);
}

.app-page .reports-grid {
  border-color: var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
}

.app-page .reports-card {
  padding: 14px;
  border-bottom-color: var(--workspace-line);
}

.app-page .kanban-detail-hero,
.app-page .kanban-detail-outcome-banner,
.app-page .kanban-detail-insight,
.app-page .kanban-detail-agent-progress {
  border-color: var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page .kanban-detail-hero__title,
.app-page .kanban-detail-insight strong {
  color: var(--workspace-ink);
}

.app-page .kanban-detail-hero__desc,
.app-page .kanban-detail-insight span,
.app-page .kanban-detail-insight small {
  color: var(--workspace-muted);
}

/* Forms and sheets carry the same compact platform language. */
.app-page .conversation-actions__drawer,
.app-page .messages-screen__macro-drawer {
  border-color: var(--workspace-line);
  border-radius: 16px 16px 0 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page .conversation-actions__drawer-input,
.app-page .reports-filter__select,
.app-page .scheduled-messages__textarea,
.app-page .kanban-detail-note-form__input {
  min-height: 44px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
}

.app-page .conversation-actions__drawer-save,
.app-page .scheduled-messages__save,
.app-page .kanban-detail-inline-form__button {
  min-height: 44px;
  border-radius: 10px;
  background: var(--workspace-accent);
  box-shadow: none;
}

.app-page .conversation-actions__drawer-save:hover,
.app-page .scheduled-messages__save:hover,
.app-page .kanban-detail-inline-form__button:hover {
  background: color-mix(in oklch, var(--workspace-accent) 88%, black);
}

/* View changes are a compact list of destinations, not two competing cards. */
.app-page .view-switcher__sheet {
  max-height: calc(100dvh - 14px);
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
}

.app-page .view-switcher__sheet .conversation-actions__drawer-title {
  margin: 2px 2px 14px;
  color: var(--workspace-ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.018em;
  text-align: left;
}

.app-page .view-switcher__options {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  background: var(--workspace-surface);
}

.app-page .view-switcher__option {
  min-height: 64px;
  gap: 3px;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
  color: var(--workspace-ink);
}

.app-page .view-switcher__option:last-child {
  border-bottom: 0;
}

.app-page .view-switcher__option span {
  font-size: 13px;
  font-weight: 700;
}

.app-page .view-switcher__option small {
  overflow: hidden;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-page .view-switcher__option--active {
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page .view-switcher__option--active small {
  color: var(--workspace-accent);
}

/* Account gets a proper settings hierarchy instead of a generic message pane. */
.app-page--account .conversation-actions {
  padding-top: 18px;
}

.app-page--account .messages-screen__body {
  padding-bottom: var(--page-navbar-bottom-space);
}

.app-page--account .linked-accounts,
.app-page--account .account-theme-options {
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
}

.app-page--account .linked-accounts__option,
.app-page--account .account-theme-option {
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
}

.app-page--account .linked-accounts__option:last-child,
.app-page--account .account-theme-option:last-child {
  border-bottom: 0;
}

/* Account: settings groups, not a stack of promotional calls to action. */
.app-page--account .conversation-actions {
  padding: 16px 14px var(--page-navbar-bottom-space);
}

.app-page--account .conversation-actions__section-title {
  margin: 20px 2px 8px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 700;
}

.app-page--account .conversation-actions__card {
  border-radius: 14px;
}

.app-page--account .conversation-actions__row {
  min-height: 48px;
  padding: 12px 14px;
}

.app-page--account .conversation-actions__muted-block {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 14px;
  border-top-color: var(--workspace-line);
}

.app-page--account .conversation-actions__muted-label {
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 700;
}

.app-page--account .conversation-actions__muted-body--signature {
  color: var(--workspace-ink);
  font-size: 13px;
  line-height: 1.45;
}

.app-page--account .message-signature-form__button {
  width: auto;
  min-height: 36px;
  margin-top: 4px;
  padding: 0 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 9px;
  background: var(--workspace-raised);
  color: var(--workspace-accent);
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}

.app-page--account .message-signature-form__button:hover {
  background: var(--workspace-accent-soft);
}

.app-page--account .account-theme-card {
  padding: 14px;
}

.app-page--account .account-theme-options {
  gap: 0;
  margin-top: 8px;
  border-radius: 10px;
}

.app-page--account .account-theme-option {
  min-height: 38px;
  border-right: 1px solid var(--workspace-line);
  border-bottom: 0;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 700;
}

.app-page--account .account-theme-option:last-child {
  border-right: 0;
}

.app-page--account .account-theme-option:has(input:checked) {
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
  box-shadow: none;
}

.app-page--account .account-notification-settings__summary {
  margin: 0;
  color: var(--workspace-muted);
  font-size: 12px;
}

.app-page--account .linked-accounts {
  gap: 0;
  margin: 0;
  border-radius: 14px;
}

.app-page--account .linked-accounts__option {
  min-height: 66px;
  padding: 10px 12px;
}

.app-page--account .linked-accounts__option-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
  font-size: 13px;
}

.app-page--account .linked-accounts__option--active {
  background: var(--workspace-accent-soft);
}

.app-page--account .linked-accounts__option-name {
  color: var(--workspace-ink);
  font-size: 14px;
  font-weight: 700;
}

.app-page--account .linked-accounts__option-meta {
  color: var(--workspace-muted);
  font-size: 12px;
}

.app-page--account .linked-accounts__option-check {
  color: var(--workspace-accent);
}

.app-page--account .messages-screen__account-logout-form--full {
  margin-top: 20px;
}

.app-page--account .messages-screen__account-logout {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid color-mix(in oklch, var(--refined-danger) 35%, var(--workspace-line));
  border-radius: 12px;
  background: color-mix(in oklch, var(--refined-danger) 7%, var(--workspace-surface));
  color: var(--refined-danger);
  box-shadow: none;
  font-size: 13px;
}

.app-page--account .messages-screen__account-logout:hover,
.app-page--account .messages-screen__account-logout:active {
  background: color-mix(in oklch, var(--refined-danger) 12%, var(--workspace-surface));
}

/* Login becomes an app entry screen on phones, while keeping a measured desktop surface. */
.app-page--login .chatwoot-login__title {
  font-size: 26px;
  font-weight: 740;
  letter-spacing: -0.03em;
}

.app-page--login .chatwoot-login__subtitle {
  color: var(--workspace-muted);
}

.app-page--login .chatwoot-login__input {
  min-height: 50px;
  border-color: var(--workspace-line);
  border-radius: 11px;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page--login .chatwoot-login__submit {
  min-height: 50px;
  border-radius: 11px;
  background: var(--workspace-accent);
  box-shadow: none;
}

.app-page--login .chatwoot-login__actions {
  margin-top: 16px;
}

.app-page--login .chatwoot-login__link {
  min-height: 34px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page--login .chatwoot-login__link:hover,
.app-page--login .chatwoot-login__link:active {
  background: transparent;
  color: var(--workspace-accent);
}

.app-page--login .chatwoot-login__link-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 540px) {
  .app-shell--login {
    justify-content: center;
    padding: calc(56px + env(safe-area-inset-top)) 24px 32px;
    background: var(--workspace-canvas);
  }

  .app-shell--login .chatwoot-login {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .app-page .mock-conversations__list,
  .app-page .mock-contacts__list {
    margin: 0 8px;
  }
}

html[data-theme="dark"] .app-page .mock-conversations__header,
html[data-theme="dark"] .app-page .mock-contacts__header,
html[data-theme="dark"] .app-page .mock-conversations__list,
html[data-theme="dark"] .app-page .mock-contacts__list,
html[data-theme="dark"] .app-page .messages-screen__header,
html[data-theme="dark"] .app-page .messages-screen__composer,
html[data-theme="dark"] .app-page .conversation-actions__card,
html[data-theme="dark"] .app-page .contact-show__card,
html[data-theme="dark"] .app-page .reports-summary,
html[data-theme="dark"] .app-page .reports-grid,
html[data-theme="dark"] .app-page .kanban-detail-hero {
  background: var(--workspace-surface);
  border-color: var(--workspace-line);
}

html[data-theme="dark"] .app-page .messages-screen__composer {
  background: var(--workspace-canvas);
}

/* Conversation details: one calm operational sheet instead of a stack of feature cards. */
.app-page--actions .conversation-actions {
  padding: 16px 14px var(--page-navbar-bottom-space);
}

.app-page--actions .conversation-actions__section-title {
  margin: 22px 2px 8px;
}

.app-page--actions .conversation-actions__status-grid {
  gap: 8px;
  margin: 0;
}

.app-page--actions .conversation-actions__status-card {
  min-height: 64px;
  gap: 9px;
  padding: 10px;
  border-color: var(--workspace-line);
  border-radius: 12px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
  box-shadow: none;
}

.app-page--actions .conversation-actions__status-card:hover {
  border-color: color-mix(in oklch, var(--workspace-accent) 42%, var(--workspace-line));
  background: var(--workspace-raised);
  box-shadow: none;
}

.app-page--actions .conversation-actions__status-card--active {
  border-color: var(--workspace-accent);
  background: var(--workspace-accent-soft);
}

.app-page--actions .conversation-actions__status-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--actions .conversation-actions__status-card--active .conversation-actions__status-card-icon {
  background: var(--workspace-surface);
  color: var(--workspace-accent);
}

.app-page--actions .conversation-actions__status-card-label {
  font-size: 13px;
  font-weight: 720;
}

.app-page--actions .conversation-actions__status-card-hint {
  color: var(--workspace-muted);
  font-size: 11px;
  font-weight: 550;
}

.app-page--actions .conversation-actions__status-card-check {
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: var(--workspace-accent);
}

.app-page--actions .conversation-actions__snooze-panel {
  margin: 8px 0 0;
  padding: 12px;
  border-color: var(--workspace-line);
  border-radius: 12px;
  background: var(--workspace-raised);
}

.app-page--actions .conversation-actions__snooze-copy strong {
  color: var(--workspace-ink);
  font-size: 13px;
}

.app-page--actions .conversation-actions__snooze-copy span {
  color: var(--workspace-muted);
}

.app-page--actions .conversation-actions__quick-row {
  gap: 6px;
  margin-top: 10px;
}

.app-page--actions .conversation-actions__chip-button {
  min-height: 36px;
  border-color: var(--workspace-line);
  border-radius: 9px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
  font-size: 12px;
}

.app-page--actions .conversation-actions__app-link {
  min-height: 58px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-color: var(--workspace-line);
  border-radius: 12px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
  box-shadow: none;
}

.app-page--actions .conversation-actions__app-link-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--actions .conversation-actions__app-link strong {
  font-size: 13px;
  font-weight: 720;
}

.app-page--actions .conversation-actions__app-link small {
  color: var(--workspace-muted);
  font-size: 11px;
}

.app-page--actions .conversation-actions__card--elevated {
  box-shadow: none;
}

.app-page--actions .conversation-actions__entity-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--actions .conversation-actions__link-button {
  color: var(--workspace-accent);
  font-size: 12px;
}

.app-page--actions .conversation-actions__secondary-button {
  width: calc(100% - 20px);
  min-height: 38px;
  margin: 2px 10px 10px;
  border-color: color-mix(in oklch, #dc2626 32%, var(--workspace-line));
  border-radius: 9px;
  background: transparent;
  color: #c92525;
  font-size: 12px;
}

.app-page--actions .conversation-actions__secondary-button--success {
  border-color: color-mix(in oklch, #15803d 32%, var(--workspace-line));
  color: #15803d;
}

.app-page--actions .conversation-actions__mini-list {
  padding: 6px 10px 10px;
  border-top: 0;
}

.app-page--actions .conversation-actions__mini-title {
  margin: 5px 4px 7px;
  color: var(--workspace-muted);
  font-size: 11px;
}

.app-page--actions .conversation-actions__list-button {
  min-height: 44px;
  margin-top: 0;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
  color: var(--workspace-ink);
  font-size: 13px;
}

.app-page--actions .conversation-actions__list-button:last-child {
  border-bottom: 0;
}

.app-page--actions .conversation-actions__list-button--macro small {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--actions .conversation-actions__labels-list {
  gap: 6px;
  padding: 10px 12px 12px;
}

.app-page--actions .conversation-actions__chip {
  margin: 0;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 12px;
}

/* Keep the global tab bar precise and platform-like on every screen. */
.floating-navbar {
  background: var(--workspace-surface);
  border-top-color: var(--workspace-line);
}

.floating-navbar__item {
  border-radius: 9px;
  color: var(--workspace-muted);
}

.floating-navbar__item--active {
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.floating-navbar__label {
  font-size: 10px;
  font-weight: 650;
}

.floating-navbar__avatar {
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.floating-navbar__item--active .floating-navbar__avatar {
  box-shadow: none;
}

.floating-navbar__badge {
  border: 2px solid var(--workspace-surface);
  background: #d92d20;
}

.floating-navbar__item--active .floating-navbar__badge {
  background: #d92d20;
}

/* Fallback identities stay calm and recognizable without rainbow avatar treatments. */
.app-page .mock-conversations__avatar,
.app-page .mock-contacts__avatar,
.app-page .messages-screen__avatar,
.app-page .conversation-actions__picker-avatar {
  background: var(--workspace-accent-soft) !important;
  color: var(--workspace-accent);
}

.app-page--inbox .mock-conversations__avatar:has(> .mock-conversations__avatar-image:not(.mock-conversations__avatar-image--hidden)) {
  background: transparent !important;
}

.app-page--inbox .mock-conversations__avatar {
  border-radius: 50%;
}

.app-page .messages-screen__avatar {
  border-radius: 10px;
}

.app-page .conversation-actions__picker-avatar {
  border-radius: 8px;
}

/* Contact creation follows the same calm, reachable sheet pattern as filtering. */
.app-page--contacts .contact-create-drawer__sheet {
  display: flex;
  max-height: calc(100dvh - 14px);
  min-height: 0;
  flex-direction: column;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  border: 1px solid var(--workspace-line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page--contacts .contact-create-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 16px;
}

.app-page--contacts .contact-create-drawer__header .conversation-actions__drawer-title {
  margin: 0;
  text-align: left;
  color: var(--workspace-ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.018em;
}

.app-page--contacts .contact-create-drawer__header p {
  margin: 3px 0 0;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--contacts .contact-create-drawer__close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--contacts .contact-create-drawer__form {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.app-page--contacts .contact-create-drawer__content {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  padding: 0 2px;
  overscroll-behavior: contain;
}

.app-page--contacts .contact-create-drawer__content .conversation-actions__drawer-label {
  margin-top: 7px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page--contacts .contact-create-drawer__content .conversation-actions__drawer-input {
  min-height: 48px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
  font-size: 14px;
  box-shadow: none;
}

.app-page--contacts .contact-create-drawer__form .conversation-actions__drawer-row {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  margin: 14px 0 0;
  padding: 14px 2px 2px;
  border-top: 1px solid var(--workspace-line);
}

.app-page--contacts .contact-create-drawer__form .conversation-actions__drawer-close--inline,
.app-page--contacts .contact-create-drawer__form .conversation-actions__drawer-save--inline {
  min-height: 46px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
}

.app-page--contacts .contact-create-drawer__form .conversation-actions__drawer-close--inline {
  border-color: var(--workspace-line);
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

/* Account settings drawers keep long preference lists focused and easy to exit. */
.app-page--account .account-drawer {
  display: flex;
  max-height: calc(100dvh - 14px);
  flex-direction: column;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  border: 1px solid var(--workspace-line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page--account .account-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 16px;
}

.app-page--account .account-drawer__header .conversation-actions__drawer-title {
  margin: 0;
  text-align: left;
  color: var(--workspace-ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.018em;
}

.app-page--account .account-drawer__header p {
  margin: 3px 0 0;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--account .account-drawer__close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--account .account-drawer .message-signature-form,
.app-page--account .account-drawer .account-notification-settings__form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.app-page--account .account-drawer .conversation-actions__drawer-label,
.app-page--account .account-drawer .account-notification-settings__title {
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page--account .account-drawer .message-signature-form__textarea {
  min-height: 124px;
  margin-top: 7px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
  box-shadow: none;
}

.app-page--account .account-drawer .message-signature-form__actions,
.app-page--account .account-drawer .account-notification-settings__footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--workspace-line);
}

.app-page--account .account-drawer .account-notification-settings__content {
  min-height: 0;
  overflow-y: auto;
  padding: 0 2px;
  overscroll-behavior: contain;
}

/* Filter sheet: a compact control surface with a reachable action bar. */
.app-page--inbox .conversation-filter__sheet {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 14px);
  padding: 10px 18px calc(16px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page--inbox .conversation-filter__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 2px;
}

.app-page--inbox .conversation-filter__header .conversation-actions__drawer-title {
  margin: 0;
  text-align: left;
  color: var(--workspace-ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.018em;
}

.app-page--inbox .conversation-filter__description {
  margin: 3px 0 0;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--inbox .conversation-filter__close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--inbox .conversation-filter__close:hover,
.app-page--inbox .conversation-filter__close:active {
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--inbox .conversation-filter__form {
  min-height: 0;
  flex: 1;
  gap: 18px;
  overflow-y: auto;
  padding: 0 2px 2px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.app-page--inbox .conversation-filter__form::-webkit-scrollbar {
  display: none;
}

.app-page--inbox .conversation-filter__field {
  margin: 0;
}

.app-page--inbox .conversation-filter__field .conversation-actions__drawer-label,
.app-page--inbox .conversation-filter__kanban-legend {
  margin-bottom: 7px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page--inbox .mock-conversations__tabs--drawer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  background: var(--workspace-line);
}

.app-page--inbox .mock-conversations__tabs--drawer .mock-conversations__tab {
  min-height: 54px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 11px;
  border: 0;
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.15;
}

.app-page--inbox .mock-conversations__tabs--drawer .mock-conversations__tab--active {
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
  box-shadow: none;
}

.app-page--inbox .mock-conversations__tabs--drawer .mock-conversations__tab-count {
  color: inherit;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.app-page--inbox .conversation-actions__drawer-input {
  min-height: 48px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
  font-size: 14px;
  box-shadow: none;
}

.app-page--inbox .conversation-actions__drawer-input:focus {
  border-color: var(--workspace-accent);
  background: var(--workspace-surface);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--workspace-accent) 15%, transparent);
}

.app-page--inbox .conversation-filter__kanban-fieldset {
  margin: 0;
}

.app-page--inbox .conversation-filter__kanban-chips {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 8px;
}

.app-page--inbox .conversation-filter__kanban-chip-face {
  min-height: 44px;
  justify-content: flex-start;
  padding: 8px 10px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
}

.app-page--inbox .conversation-filter__kanban-chip--only .conversation-filter__kanban-chip-face {
  border-color: var(--workspace-line);
  background: var(--workspace-raised);
  color: var(--workspace-ink);
}

.app-page--inbox .conversation-filter__kanban-chip--only .conversation-filter__kanban-icon {
  color: var(--workspace-muted);
}

.app-page--inbox .conversation-filter__kanban-input:checked + .conversation-filter__kanban-chip-face {
  border-color: var(--workspace-accent);
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--workspace-accent) 18%, transparent);
}

.app-page--inbox .conversation-filter__actions {
  position: sticky;
  bottom: 0;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  margin: 0 -2px;
  padding: 14px 2px 2px;
  border-top: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
}

.app-page--inbox a.conversation-actions__drawer-close.conversation-filter__clear,
.app-page--inbox .conversation-actions__drawer-save--inline {
  min-height: 46px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
}

.app-page--inbox a.conversation-actions__drawer-close.conversation-filter__clear {
  border-color: var(--workspace-line);
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--inbox a.conversation-actions__drawer-close.conversation-filter__clear:hover {
  border-color: var(--workspace-line);
  background: var(--workspace-canvas);
  color: var(--workspace-ink);
}

.app-page--inbox .conversation-actions__drawer-save--inline {
  background: var(--workspace-accent);
}

/* Scheduled messages: one composition flow followed by an operational queue. */
.app-page--scheduled .messages-screen__body {
  background: var(--workspace-canvas);
}

.app-page--scheduled .scheduled-messages {
  display: block;
  padding: 20px 14px var(--page-navbar-bottom-space);
}

.app-page--scheduled .scheduled-messages__intro {
  margin: 0 2px 14px;
}

.app-page--scheduled .scheduled-messages__intro .conversation-actions__section-title {
  margin: 0;
  color: var(--workspace-ink);
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.app-page--scheduled .scheduled-messages__intro p {
  margin: 5px 0 0;
  color: var(--workspace-muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-page--scheduled .scheduled-messages__composer {
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
  background: var(--workspace-surface);
}

.app-page--scheduled .scheduled-messages__form {
  gap: 0;
}

.app-page--scheduled .scheduled-messages__form > .conversation-actions__drawer-label {
  margin: 0;
  padding: 13px 14px 6px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page--scheduled .scheduled-messages__form > .conversation-actions__drawer-input {
  width: calc(100% - 28px);
  min-height: 46px;
  margin: 0 14px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
  box-shadow: none;
}

.app-page--scheduled .scheduled-messages__textarea {
  min-height: 88px;
}

.app-page--scheduled .scheduled-messages__toggle {
  min-height: 42px;
  margin: 12px 14px 0;
  color: var(--workspace-ink);
  font-size: 13px;
  font-weight: 650;
}

.app-page--scheduled .scheduled-messages__toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--workspace-accent);
}

.app-page--scheduled .scheduled-messages__toggle + .conversation-actions__drawer-input {
  margin-top: 8px;
}

.app-page--scheduled .scheduled-messages__save {
  min-height: 48px;
  margin: 16px 0 0;
  border-radius: 0;
  border-top: 1px solid color-mix(in oklch, var(--workspace-accent) 26%, var(--workspace-line));
  background: var(--workspace-accent);
  box-shadow: none;
  font-size: 13px;
}

.app-page--scheduled .scheduled-messages__list-title {
  margin: 24px 2px 8px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 700;
}

.app-page--scheduled .scheduled-messages__list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: var(--workspace-surface);
}

.app-page--scheduled .scheduled-messages__card {
  gap: 10px;
  padding: 13px 12px;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
}

.app-page--scheduled .scheduled-messages__card:last-child {
  border-bottom: 0;
}

.app-page--scheduled .scheduled-messages__card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--scheduled .scheduled-messages__card-main {
  gap: 4px;
}

.app-page--scheduled .scheduled-messages__card-head strong {
  color: var(--workspace-ink);
  font-size: 14px;
  font-weight: 700;
}

.app-page--scheduled .scheduled-messages__status {
  padding: 3px 7px;
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
  font-size: 10px;
  font-weight: 700;
}

.app-page--scheduled .scheduled-messages__card-main p {
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--scheduled .scheduled-messages__meta {
  gap: 6px;
}

.app-page--scheduled .scheduled-messages__meta span {
  padding: 0;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 11px;
  font-weight: 600;
}

.app-page--scheduled .scheduled-messages__meta span + span::before {
  content: "·";
  margin-right: 6px;
  color: var(--workspace-faint);
}

.app-page--scheduled .scheduled-messages__delete {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--workspace-faint);
}

.app-page--scheduled .scheduled-messages__delete:hover,
.app-page--scheduled .scheduled-messages__delete:active {
  border-color: color-mix(in oklch, var(--refined-danger) 24%, var(--workspace-line));
  background: color-mix(in oklch, var(--refined-danger) 8%, transparent);
  color: var(--refined-danger);
}

.app-page--scheduled .scheduled-messages__empty {
  padding: 18px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

/* Team chat: creation is a compact choice flow, not a stack of feature cards. */
.app-page--team .internal-chat-create-drawer {
  gap: 0;
  max-height: calc(100dvh - 14px);
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page--team .internal-chat-create-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 16px;
}

.app-page--team .internal-chat-create-drawer__header .conversation-actions__drawer-title {
  margin: 0;
  text-align: left;
  color: var(--workspace-ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.018em;
}

.app-page--team .internal-chat-create-drawer__header p {
  margin: 3px 0 0;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--team .internal-chat-create-drawer__close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--team .internal-chat-create-drawer__close:hover,
.app-page--team .internal-chat-create-drawer__close:active {
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--team .internal-chat-create-drawer__mode-options {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  background: var(--workspace-surface);
}

.app-page--team .internal-chat-create-drawer__mode-card {
  min-height: 60px;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
  color: var(--workspace-ink);
}

.app-page--team .internal-chat-create-drawer__mode-card:last-child {
  border-bottom: 0;
}

.app-page--team .internal-chat-create-drawer__mode-card strong {
  font-size: 13px;
  font-weight: 700;
}

.app-page--team .internal-chat-create-drawer__mode-card span {
  color: var(--workspace-muted);
  font-size: 12px;
}

.app-page--team #internal_chat_kind_direct:checked ~ .internal-chat-create-drawer__mode-options label[for="internal_chat_kind_direct"],
.app-page--team #internal_chat_kind_group:checked ~ .internal-chat-create-drawer__mode-options label[for="internal_chat_kind_group"] {
  border-color: var(--workspace-line);
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--team .internal-chat-create-drawer__mode-input:focus-visible ~ .internal-chat-create-drawer__mode-options .internal-chat-create-drawer__mode-card {
  outline: 2px solid var(--workspace-accent);
  outline-offset: -2px;
}

.app-page--team .internal-chat-create-drawer__panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 14px;
  padding: 0 2px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.app-page--team .internal-chat-create-drawer__panels::-webkit-scrollbar {
  display: none;
}

.app-page--team .internal-chat-create-drawer__section {
  gap: 8px;
  padding: 0;
  border: 0;
}

.app-page--team .internal-chat-create-drawer__section-title {
  margin: 0 0 2px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 700;
}

.app-page--team .internal-chat-create-drawer__form {
  gap: 8px;
}

.app-page--team .internal-chat-create-drawer__form .conversation-actions__drawer-label {
  margin: 0;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page--team .internal-chat-create-drawer__form .conversation-actions__drawer-input {
  min-height: 46px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
  font-size: 14px;
  box-shadow: none;
}

.app-page--team .internal-chat-create-drawer__form .conversation-actions__drawer-save {
  min-height: 46px;
  margin-top: 6px;
  border-radius: 10px;
  background: var(--workspace-accent);
  box-shadow: none;
  font-size: 13px;
}

.app-page--team .internal-chat-create-drawer__agent-list {
  gap: 0;
  max-height: 182px;
  overflow: hidden auto;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-surface);
}

.app-page--team .internal-chat-create-drawer__agent-option {
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
  color: var(--workspace-ink);
  font-size: 13px;
  font-weight: 650;
}

.app-page--team .internal-chat-create-drawer__agent-option:last-child {
  border-bottom: 0;
}

.app-page--team .internal-chat-create-drawer__agent-option:has(input:checked) {
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--team .internal-chat-create-drawer__agent-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--workspace-accent);
}

.app-page--team-thread .internal-chat-message__menu {
  min-width: 164px;
  padding: 5px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-surface);
  box-shadow: 0 5px 12px color-mix(in oklch, var(--workspace-ink) 12%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-page--team-thread .internal-chat-message__action {
  border-radius: 7px;
  color: var(--workspace-ink);
  font-size: 12px;
  font-weight: 650;
}

.app-page--team-thread .internal-chat-message__action:hover,
.app-page--team-thread .internal-chat-message__action:active {
  background: var(--workspace-raised);
}

.app-page--team-thread .internal-chat-message__action--save {
  background: var(--workspace-accent);
  color: white;
}

.app-page--team-thread .internal-chat-message__action--danger {
  background: transparent;
  color: var(--refined-danger);
}

.app-page--team-thread .internal-chat-composer__editing {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-color: color-mix(in oklch, var(--workspace-accent) 28%, var(--workspace-line));
  border-radius: 10px;
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--team-thread .internal-chat-composer__editing p {
  color: var(--workspace-muted);
}

.app-page--team-thread .internal-chat-composer__editing button {
  border-radius: 8px;
  background: var(--workspace-surface);
  color: var(--workspace-accent);
}

/* Notifications: a purpose-built activity list instead of a copied inbox. */
.app-page--notifications .mock-conversations__header {
  padding-bottom: 16px;
}

.app-page--notifications .notifications__summary {
  margin: 10px 2px 0 48px;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--notifications .notifications__count-badge {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid color-mix(in oklch, var(--workspace-accent) 28%, var(--workspace-line));
  border-radius: 9px;
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

.app-page--notifications .mock-conversations__list {
  margin-top: 0;
}

.app-page--notifications .mock-conversations__card {
  position: relative;
  min-height: 74px;
  gap: 12px;
  padding: 13px 42px 13px 14px;
}

.app-page--notifications .mock-conversations__card--unread {
  background: color-mix(in oklch, var(--workspace-accent-soft) 42%, var(--workspace-surface));
}

.app-page--notifications .mock-conversations__card--unread::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--workspace-accent);
}

.app-page--notifications .notifications__type-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--workspace-line);
  border-radius: 9px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--notifications .notifications__type-icon--message,
.app-page--notifications .notifications__type-icon--user,
.app-page--notifications .notifications__type-icon--mention,
.app-page--notifications .notifications__type-icon--bell {
  background: var(--workspace-raised);
  color: var(--workspace-accent);
}

.app-page--notifications .notifications__type-icon--avatar {
  border-radius: 9px;
  background: var(--workspace-raised);
}

.app-page--notifications .mock-conversations__content {
  gap: 3px;
}

.app-page--notifications .mock-conversations__row strong {
  color: var(--workspace-ink);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.3;
}

.app-page--notifications .mock-conversations__snippet {
  margin: 0;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--notifications .notifications__load-more.conversation-actions__drawer-save {
  width: calc(100% - 24px);
  min-height: 42px;
  margin: 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-accent);
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
}

.app-page--notifications .notifications__load-more.conversation-actions__drawer-save:hover {
  background: var(--workspace-accent-soft);
}

.app-page--notifications .mock-conversations__empty {
  padding: 24px 16px;
  color: var(--workspace-muted);
  font-size: 13px;
  text-align: center;
}

/* Kanban: stage color is a cue, while the work itself stays visually quiet. */
.app-page--inbox .kanban-mobile {
  padding-inline: 14px;
  background: var(--workspace-canvas);
}

.app-page--inbox .kanban-mobile__columns {
  gap: 10px;
  padding: 12px 0 var(--page-navbar-bottom-space);
  scroll-snap-type: x proximity;
}

.app-page--inbox .kanban-mobile__column {
  flex-basis: calc(100% - 28px);
  max-width: 410px;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: var(--workspace-raised);
}

.app-page--inbox .kanban-mobile__column-header {
  gap: 9px;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
}

.app-page--inbox .kanban-mobile__stage-dot {
  width: 8px;
  height: 8px;
}

.app-page--inbox .kanban-mobile__column-header h2 {
  color: var(--workspace-ink);
  font-family: var(--font-content);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.app-page--inbox .kanban-mobile__column-header p {
  padding: 3px 7px;
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  background: var(--workspace-surface);
  color: var(--workspace-muted);
  font-size: 11px;
  font-weight: 650;
}

.app-page--inbox .kanban-mobile__cards {
  gap: 8px;
  padding: 10px;
}

.app-page--inbox .kanban-mobile__card {
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
  box-shadow: none;
}

.app-page--inbox .kanban-mobile__card:hover,
.app-page--inbox .kanban-mobile__card:active {
  border-color: color-mix(in oklch, var(--workspace-accent) 38%, var(--workspace-line));
  background: var(--workspace-surface);
}

.app-page--inbox .kanban-mobile__card strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.app-page--inbox .kanban-mobile__card span {
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--inbox .kanban-mobile__card footer {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--workspace-line);
}

.app-page--inbox .kanban-mobile__card small,
.app-page--inbox .kanban-mobile__card em {
  color: var(--workspace-muted);
  font-size: 11px;
  font-weight: 650;
}

.app-page--inbox .kanban-mobile__card em {
  color: var(--workspace-accent);
  font-style: normal;
}

.app-page--inbox .kanban-mobile__empty-stage {
  padding: 16px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

/* Reports: the scope is explicit and numbers read as an operational snapshot. */
.app-page--reports .reports-screen {
  min-height: 0;
  padding: 0 14px var(--page-navbar-bottom-space);
  scroll-padding-top: 18px;
}

.app-page--reports .mock-conversations__header-top {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.app-page--reports .mock-conversations__icon-button--ghost {
  display: none;
}

.app-page--reports .mock-conversations__inbox-title {
  justify-content: flex-start;
}

.app-page--reports .reports-summary {
  gap: 16px;
  margin: 0 -14px;
  padding: 18px 16px;
  border-bottom: 0;
  background: transparent;
}

.app-page--reports .reports-summary h1 {
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.app-page--reports .reports-summary p {
  margin-top: 4px;
  font-size: 12px;
}

.app-page--reports .reports-summary__metrics {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
}

.app-page--reports .reports-summary__metrics div {
  padding: 12px 10px;
  border-right: 1px solid var(--workspace-line);
}

.app-page--reports .reports-summary__metrics div:last-child {
  border-right: 0;
}

.app-page--reports .reports-summary__metrics dt {
  color: var(--workspace-muted);
  font-size: 10px;
  font-weight: 650;
}

.app-page--reports .reports-summary__metrics dd {
  margin-top: 4px;
  color: var(--workspace-ink);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.app-page--reports .reports-section {
  margin-top: 20px;
}

.app-page--reports .reports-section h2 {
  margin: 0 2px 8px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 700;
}

.app-page--reports .reports-grid {
  border-radius: 13px;
}

.app-page--reports .reports-card {
  min-height: 64px;
  padding: 12px 14px;
}

.app-page--reports .reports-card__label {
  font-size: 13px;
  font-weight: 680;
}

.app-page--reports .reports-card__value {
  font-size: 19px;
  font-weight: 720;
}

.app-page--reports .reports-card__hint {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
}

.app-page--reports .reports-card--compact {
  display: flex;
  min-height: 68px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-right: 56px;
}

.app-page--reports .reports-card--compact .reports-card__label {
  display: block;
}

.app-page--reports .reports-card--compact .reports-card__hint {
  display: block;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

.app-page--reports .reports-card--compact .reports-card__value {
  position: absolute;
  top: 50%;
  right: 14px;
  margin: 0;
  transform: translateY(-50%);
}

.app-page--reports .conversation-filter__sheet {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 14px);
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page--reports .reports-filter__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 16px;
}

.app-page--reports .reports-filter__header .conversation-actions__drawer-title {
  margin: 0;
  text-align: left;
  color: var(--workspace-ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.018em;
}

.app-page--reports .reports-filter__header p {
  margin: 3px 0 0;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--reports .reports-filter__close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--reports .reports-filter {
  min-height: 0;
  flex: 1;
  gap: 8px;
  overflow-y: auto;
  padding: 0 2px 2px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.app-page--reports .reports-filter::-webkit-scrollbar {
  display: none;
}

.app-page--reports .reports-filter .conversation-actions__drawer-label {
  margin: 8px 0 0;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page--reports .reports-filter__select {
  min-height: 46px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
  font-size: 14px;
  box-shadow: none;
}

.app-page--reports .reports-filter__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  margin: 8px -2px 0;
  padding: 14px 2px 2px;
  border-top: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
}

.app-page--reports .reports-filter__clear,
.app-page--reports .reports-filter__submit {
  display: inline-flex;
  min-height: 46px;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.app-page--reports .reports-filter__clear {
  border: 1px solid var(--workspace-line);
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--reports .reports-filter__submit {
  border: 0;
  background: var(--workspace-accent);
  color: white;
  box-shadow: none;
}

/* Kanban detail: a work record with grouped facts, not a dashboard of mini-cards. */
.app-page--kanban-detail .kanban-item-detail-page {
  padding: 18px 14px var(--page-navbar-bottom-space);
}

.app-page--kanban-detail .kanban-detail-outcome-banner {
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--workspace-surface);
  color: var(--workspace-ink);
}

.app-page--kanban-detail .kanban-detail-outcome-banner--won {
  gap: 10px;
}

.app-page--kanban-detail .kanban-detail-outcome-banner__check {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
  box-shadow: none;
}

.app-page--kanban-detail .kanban-detail-outcome-banner strong {
  font-size: 14px;
  font-weight: 700;
}

.app-page--kanban-detail .kanban-detail-outcome-banner__desc {
  color: var(--workspace-muted);
  font-size: 12px;
}

.app-page--kanban-detail .kanban-detail-hero {
  padding: 16px 14px;
  border-radius: 14px;
}

.app-page--kanban-detail .kanban-detail-hero__main {
  gap: 5px;
}

.app-page--kanban-detail .kanban-detail-hero__title {
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.app-page--kanban-detail .kanban-detail-hero__desc {
  color: var(--workspace-muted);
  font-size: 13px;
}

.app-page--kanban-detail .kanban-detail-hero__id {
  padding: 5px 7px;
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
  font-size: 11px;
}

.app-page--kanban-detail .kanban-detail-hero__chips {
  gap: 6px;
  margin-top: 12px;
}

.app-page--kanban-detail .kanban-detail-pill,
.app-page--kanban-detail .kanban-detail-stage-chip {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
  font-size: 11px;
  font-weight: 650;
}

.app-page--kanban-detail .kanban-detail-pill--status {
  border-color: color-mix(in oklch, var(--workspace-accent) 28%, var(--workspace-line));
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.app-page--kanban-detail .kanban-detail-hero__facts {
  gap: 0;
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
}

.app-page--kanban-detail .kanban-detail-hero__facts div {
  min-height: 58px;
  padding: 10px;
  border: 0;
  border-right: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
}

.app-page--kanban-detail .kanban-detail-hero__facts div:last-child {
  border-right: 0;
}

.app-page--kanban-detail .kanban-detail-hero__facts span {
  color: var(--workspace-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.app-page--kanban-detail .kanban-detail-hero__facts strong {
  color: var(--workspace-ink);
  font-size: 12px;
  font-weight: 680;
}

.app-page--kanban-detail .kanban-detail-insights {
  gap: 0;
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
}

.app-page--kanban-detail .kanban-detail-insight {
  min-height: 72px;
  gap: 2px;
  padding: 11px 12px;
  border: 0;
  border-right: 1px solid var(--workspace-line);
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
}

.app-page--kanban-detail .kanban-detail-insight:nth-child(2n) {
  border-right: 0;
}

.app-page--kanban-detail .kanban-detail-insight:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.app-page--kanban-detail .kanban-detail-insight span,
.app-page--kanban-detail .kanban-detail-insight small {
  color: var(--workspace-muted);
  font-size: 10px;
  font-weight: 600;
}

.app-page--kanban-detail .kanban-detail-insight strong {
  color: var(--workspace-ink);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.app-page--kanban-detail .kanban-detail-block {
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--workspace-line);
  border-radius: 13px;
  background: var(--workspace-surface);
}

.app-page--kanban-detail .kanban-detail-block__summary {
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--workspace-ink);
  font-size: 13px;
  font-weight: 680;
}

.app-page--kanban-detail .kanban-detail-block__summary:hover {
  border-color: transparent;
  background: var(--workspace-raised);
}

.app-page--kanban-detail .kanban-detail-block__summary::after {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
  font-size: 16px;
  line-height: 22px;
}

.app-page--kanban-detail .kanban-detail-block[open] .kanban-detail-block__summary {
  border-bottom: 1px solid var(--workspace-line);
  background: var(--workspace-raised);
}

.app-page--kanban-detail .kanban-detail-block[open] .kanban-detail-block__summary::after {
  font-size: 18px;
  line-height: 20px;
}

.app-page--kanban-detail .kanban-detail-block__body .conversation-actions__card,
.app-page--kanban-detail .kanban-offers {
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.app-page--kanban-detail .kanban-detail-editor {
  gap: 10px;
}

.app-page--kanban-detail .kanban-detail-checklist {
  gap: 0;
}

.app-page--kanban-detail .kanban-detail-checklist__item {
  gap: 9px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
}

.app-page--kanban-detail .kanban-detail-checklist__item:last-child {
  border-bottom: 0;
}

.app-page--kanban-detail .kanban-detail-checklist__check {
  width: 20px;
  height: 20px;
  border-color: var(--workspace-line);
  border-radius: 6px;
  background: var(--workspace-raised);
  color: var(--workspace-accent);
}

.app-page--kanban-detail .kanban-detail-checklist__check--done {
  border-color: color-mix(in oklch, var(--workspace-accent) 32%, var(--workspace-line));
  background: var(--workspace-accent-soft);
}

.app-page--kanban-detail .kanban-detail-checklist__text {
  color: var(--workspace-ink);
  font-size: 13px;
  font-weight: 650;
}

.app-page--kanban-detail .kanban-offers {
  gap: 0;
}

.app-page--kanban-detail .kanban-offer-card {
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-page--kanban-detail .kanban-offer-card:last-child {
  border-bottom: 0;
}

.app-page--kanban-detail .kanban-offer-card__media {
  width: 64px;
  height: 64px;
  border-radius: 9px;
  background: var(--workspace-raised);
}

.app-page--kanban-detail .kanban-offer-card__title {
  color: var(--workspace-ink);
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -0.012em;
}

.app-page--kanban-detail .kanban-offer-card__type {
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.app-page--kanban-detail .kanban-offer-card__value {
  color: var(--workspace-ink);
  font-size: 16px;
  font-weight: 720;
}

.app-page--kanban-detail .kanban-offer-card__meta,
.app-page--kanban-detail .kanban-offer-card__desc {
  color: var(--workspace-muted);
  font-size: 12px;
}

/* Contacts: loading, list, and filtering use the same stable screen geometry. */
.app-page--contacts .mock-contacts__skeleton {
  margin: 0 10px;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: var(--workspace-surface);
}

.app-page--contacts .mock-contacts__skeleton-card {
  border-bottom-color: var(--workspace-line);
}

.app-page--contacts .mock-contacts__card {
  min-height: 70px;
  padding: 12px 14px;
}

.app-page--contacts .mock-contacts__name {
  color: var(--workspace-ink);
  font-size: 14px;
  font-weight: 680;
}

.app-page--contacts .mock-contacts__subtitle-text {
  color: var(--workspace-muted);
  font-size: 12px;
}

.app-page--contacts .status-badge {
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 650;
}

.app-page--contacts .conversation-filter__sheet {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 14px);
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.app-page--contacts .contact-filter__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 16px;
}

.app-page--contacts .contact-filter__header .conversation-actions__drawer-title {
  margin: 0;
  text-align: left;
  color: var(--workspace-ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.018em;
}

.app-page--contacts .contact-filter__header p {
  margin: 3px 0 0;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-page--contacts .contact-filter__close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--contacts .conversation-filter__form {
  min-height: 0;
  flex: 1;
  gap: 16px;
  overflow-y: auto;
  padding: 0 2px 2px;
  overscroll-behavior: contain;
}

.app-page--contacts .conversation-filter__field,
.app-page--contacts .conversation-filter__ddd-field {
  margin: 0;
}

.app-page--contacts .conversation-filter__field .conversation-actions__drawer-label,
.app-page--contacts .conversation-filter__ddd-field .conversation-actions__drawer-label {
  margin-bottom: 7px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-page--contacts .conversation-filter__ddd-hint {
  margin: -1px 0 8px;
  color: var(--workspace-muted);
  font-size: 12px;
}

.app-page--contacts .conversation-filter__form .conversation-actions__drawer-input {
  min-height: 48px;
  border-color: var(--workspace-line);
  border-radius: 10px;
  background: var(--workspace-raised);
  color: var(--workspace-ink);
  font-size: 14px;
  box-shadow: none;
}

.app-page--contacts .conversation-filter__actions {
  position: sticky;
  bottom: 0;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  margin: 0 -2px;
  padding: 14px 2px 2px;
  border-top: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
}

.app-page--contacts a.conversation-actions__drawer-close.conversation-filter__clear,
.app-page--contacts .conversation-actions__drawer-save--inline {
  min-height: 46px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
}

.app-page--contacts a.conversation-actions__drawer-close.conversation-filter__clear {
  border-color: var(--workspace-line);
  background: var(--workspace-raised);
  color: var(--workspace-muted);
}

.app-page--contacts .conversation-actions__drawer-save--inline {
  background: var(--workspace-accent);
}