/* flat-core.css */
/* Base visual global. Gerado a partir de flat.css para organizar os quatro blocos do atendimento. */

:root {
  --bg: #0f1111;
  --bg-strong: #151718;
  --ink: #f7f9fa;
  --muted: #bcc5c8;
  --accent: #24b286;
  --accent-dark: #b8f7dc;
  --accent-strong: #147a5d;
  --accent-stronger: #0d563f;
  --accent-soft: #103f35;
  --accent-contrast: #ffffff;
  --focus-ring: color-mix(in srgb, var(--accent) 34%, transparent);
  --panel: #1b1d1e;
  --panel-strong: #232628;
  --header: #1b1d1e;
  --chat-bg: #131716;
  --stroke: rgba(247, 249, 250, 0.18);
  --glass: #1b1d1e;
  --glass-strong: #232628;
  --glass-border: rgba(247, 249, 250, 0.18);
  --shadow: none;
  --shadow-soft: none;
  --liquid-shadow: none;
  --flat-hover: #303335;
  --flat-green-live: #147a5d;
  --flat-green: #147a5d;
  --flat-green-deep: #0d563f;
  --flat-green-dark: #0b4638;
  --conversation-open-unassigned: #19a86b;
  --conversation-closing: #d9a21b;
  --conversation-closed: color-mix(in srgb, var(--muted) 46%, var(--panel-strong));
  --brand-icon-filter: brightness(0) invert(1);
  --ui-icon-filter: brightness(0) invert(0.92);
  --ui-icon-strong-filter: brightness(0) invert(1);
  --flat-motion-fast: 120ms;
  --flat-motion-medium: 180ms;
  --flat-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

body {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  background-image: none;
  background-attachment: fixed;
  background-size: auto;
  animation: none;
  clip-path: inset(0);
}

body::before {
  content: none;
}

body[data-art-theme="dark"] {
  --bg: #0f1111;
  background: #0f1111;
}

body[data-art-theme="light"] {
  --bg: #f7f9fa;
  background: #f7f9fa;
}

body[data-art-theme="cream"] {
  --bg: #f3eddf;
  background: #f3eddf;
}

body[data-art-theme="light"] {
  --ink: #0a0f1a;
  --muted: #334155;
  --panel: #ffffff;
  --panel-strong: #eef2f6;
  --chat-bg: #e7edf2;
  --stroke: rgba(10, 15, 26, 0.32);
  --glass: #ffffff;
  --glass-strong: #eef2f6;
  --glass-border: rgba(10, 15, 26, 0.26);
  --flat-hover: #dbe4ec;
}

body[data-art-theme="cream"] {
  --ink: #1c1308;
  --muted: #4d3a24;
  --panel: #fffaf1;
  --panel-strong: #f2e4cf;
  --chat-bg: #e9dac2;
  --stroke: rgba(58, 38, 16, 0.36);
  --glass: #fffaf1;
  --glass-strong: #f2e4cf;
  --glass-border: rgba(58, 38, 16, 0.32);
  --flat-hover: #e3d2b8;
}

@keyframes cornerShineSweep {
  0% {
    opacity: 0.34;
    transform: translate3d(-10%, -9%, 0) scale(1.18) rotate(-2deg);
  }

  36% {
    opacity: 0.78;
  }

  58% {
    opacity: 0.5;
    transform: translate3d(5%, 4%, 0) scale(1.18) rotate(4deg);
  }

  100% {
    opacity: 0.34;
    transform: translate3d(9%, 8%, 0) scale(1.18) rotate(7deg);
  }
}

.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 38%,
    transparent 72%
  );
  filter: blur(0.55rem);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: opacity 120ms ease;
  z-index: 10000;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

body.has-cursor-glow .cursor-glow {
  opacity: 0.58;
}

.bg-grid {
  display: none;
}

button {
  transition:
    background-color var(--flat-motion-fast) var(--flat-motion-ease),
    color var(--flat-motion-fast) var(--flat-motion-ease),
    border-color var(--flat-motion-fast) var(--flat-motion-ease),
    transform var(--flat-motion-fast) var(--flat-motion-ease);
}

button:active {
  transform: none;
}

.app::after,
body[data-file-dragging="true"] .app::after {
  box-shadow: none;
}

.auth-card,
.topbar,
.panel,
.panel-left,
.panel-center,
.panel-right,
.metric-card,
.dashboard-panel,
.art-card,
.settings-quick-card,
.settings-section,
.modal,
.menu,
.emoji-picker,
.toast {
  background: var(--panel-strong);
  border-color: var(--glass-border);
  box-shadow: none;
  backdrop-filter: none;
}

.panel-left,
.panel-center,
.panel-right {
  background: var(--panel-strong);
}

.panel,
.metric-card {
  animation: none;
}

.nav-btn.active .nav-icon img,
.composer .ghost.is-recording .button-icon img {
  filter: var(--ui-icon-strong-filter);
}

.brand-dot,
.user-avatar,
.avatar,
.chat-avatar,
.profile-avatar {
  background: var(--accent-soft);
  color: #ffffff;
  box-shadow: none;
}

body .pill,
body .tag,
body .composer .ghost,
body .composer-field input,
body .modal-input input,
body .template-var-field input,
body .quotation-form-field input,
body .quotation-form-field select,
body .forward-contact-search input,
body .forward-contact-item,
body .transfer-user-item,
body .template-list-item,
body .template-image-dropzone {
  background: var(--panel-strong);
  border-color: var(--glass-border);
  color: var(--ink);
}

body .tag-info {
  background: rgba(59, 120, 255, 0.14);
  border-color: rgba(59, 120, 255, 0.22);
  color: #8ab4ff;
}

body .tag-muted,
body .tag-away {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-color: var(--stroke);
  color: var(--muted);
}

.sticker-library-panel {
  max-height: min(28rem, 58dvh);
  overflow: hidden;
}

.sticker-library-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.52rem;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.15rem;
  overscroll-behavior: contain;
}

.sticker-library-preview img {
  padding: 0.18rem;
}

.search-box,
.media-history-panel,
.media-history-item,
.composer-attachment-card,
.profile-card,
.contact-item,
.info-item,
.timeline,
.empty-state,
.settings-card,
.integration-item,
.signal-card,
.integration-checklist,
.integration-check,
.settings-user-row,
.art-color-control,
.template-list-item,
.transfer-user-item,
.template-image-dropzone {
  background: var(--panel);
  border-color: var(--glass-border);
  box-shadow: none;
  backdrop-filter: none;
}

.dept-card.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
}

.avatar[data-unread="true"]::before,
.integration-banner-led,
.integration-banner.is-live .integration-banner-led,
.integration-banner.is-mock .integration-banner-led,
.integration-banner.is-offline .integration-banner-led,
.system-chip::before {
  box-shadow: none;
}

.avatar[data-unread="true"]::before,
.recording-dot {
  animation: none;
}

.status-live,
body .status-live {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-dark);
}

.status-warning,
body .status-warning {
  background: color-mix(in srgb, #f0b429 16%, transparent);
  color: #ffd77a;
}

body[data-art-theme="light"] .status-warning,
body[data-art-theme="cream"] .status-warning {
  color: #7a5b00;
}

.status-offline,
body .status-offline {
  background: color-mix(in srgb, #d65656 14%, transparent);
  color: #ffb7b7;
}

body[data-art-theme="light"] .status-offline,
body[data-art-theme="cream"] .status-offline {
  color: #a12d2d;
}

.reply-preview-author,
body .reply-preview-author {
  color: var(--accent-dark);
}

.reply-preview-text {
  color: var(--muted);
}

.reply-preview-cancel,
body .reply-preview-cancel {
  background: var(--panel);
  border-color: var(--stroke);
  color: var(--muted);
  box-shadow: none;
}

.message-file-icon,
.media-history-icon,
.composer-file-icon,
.team-chat-file-icon {
  display: grid;
  place-items: center;
}

.message-file-icon img,
.message-pdf-marker img,
.media-history-icon img,
.composer-file-icon img,
.team-chat-file-icon img {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  object-fit: contain;
  filter: var(--ui-icon-filter);
  opacity: 0.9;
}

.media-history-icon img,
.composer-file-icon img,
.team-chat-file-icon img {
  width: 1.45rem;
  height: 1.45rem;
}

@keyframes flatSendingDots {
  0% {
    clip-path: inset(0 66% 0 0);
  }

  34% {
    clip-path: inset(0 33% 0 0);
  }

  67%,
  100% {
    clip-path: inset(0);
  }
}

.metrics-view > .view-header,
.clients-view > .view-header,
.subscription-view > .view-header,
.settings-view > .view-header,
.quotation-view > .view-header,
.calculator-view > .view-header,
.file-manager-view > .view-header,
.art-view > .view-header {
  color: var(--ink);
  text-shadow: none;
}

.metrics-view > .view-header p,
.clients-view > .view-header p,
.subscription-view > .view-header p,
.settings-view > .view-header p,
.quotation-view > .view-header p,
.calculator-view > .view-header p,
.file-manager-view > .view-header p,
.art-view > .view-header p {
  color: var(--muted);
}

.metric-card.highlight {
  background: var(--accent-strong);
  color: var(--accent-contrast);
}

.metric-card.highlight p,
.metric-card.highlight span,
.metric-card.highlight strong,
.metric-card.highlight small {
  color: var(--accent-contrast);
}

.dashboard-bar-fill {
  background: var(--accent-strong);
}

.art-dropzone,
.art-dropzone:hover,
.art-dropzone.is-dragging {
  background: var(--panel-strong);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius);
  transform: none;
}

.art-card-head h3,
.art-card-head p,
.art-dropzone strong,
.art-dropzone span:last-child,
.art-background-status,
.art-theme-option span,
.art-theme-option small {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.art-dropzone-icon,
.system-chip-live,
body .system-chip-live,
.status-live,
body .status-live,
.tag-alert,
.tag-online,
.settings-user-badge,
.integration-check[data-ok="true"] .integration-mark,
.toast[data-tone="success"] .toast-icon {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

body[data-art-theme="light"] *,
body[data-art-theme="light"] *::before,
body[data-art-theme="light"] *::after,
body[data-art-theme="cream"] *,
body[data-art-theme="cream"] *::before,
body[data-art-theme="cream"] *::after {
  text-shadow: none;
}

body[data-art-theme="light"] .app,
body[data-art-theme="cream"] .app,
body[data-art-theme="light"] .topbar,
body[data-art-theme="cream"] .topbar,
body[data-art-theme="light"] .top-nav,
body[data-art-theme="cream"] .top-nav,
body[data-art-theme="light"] .brand,
body[data-art-theme="cream"] .brand,
body[data-art-theme="light"] .panel,
body[data-art-theme="cream"] .panel,
body[data-art-theme="light"] .panel-left,
body[data-art-theme="cream"] .panel-left,
body[data-art-theme="light"] .panel-center,
body[data-art-theme="cream"] .panel-center,
body[data-art-theme="light"] .panel-right,
body[data-art-theme="cream"] .panel-right,
body[data-art-theme="light"] .chat-header,
body[data-art-theme="cream"] .chat-header,
body[data-art-theme="light"] .composer,
body[data-art-theme="cream"] .composer,
body[data-art-theme="light"] .message,
body[data-art-theme="cream"] .message,
body[data-art-theme="light"] .message-attachment,
body[data-art-theme="cream"] .message-attachment,
body[data-art-theme="light"] .composer-attachment-card,
body[data-art-theme="cream"] .composer-attachment-card,
body[data-art-theme="light"] .modal,
body[data-art-theme="cream"] .modal,
body[data-art-theme="light"] .menu,
body[data-art-theme="cream"] .menu,
body[data-art-theme="light"] .emoji-picker,
body[data-art-theme="cream"] .emoji-picker,
body[data-art-theme="light"] .toast,
body[data-art-theme="cream"] .toast,
body[data-art-theme="light"] .metric-card,
body[data-art-theme="cream"] .metric-card,
body[data-art-theme="light"] .dashboard-panel,
body[data-art-theme="cream"] .dashboard-panel,
body[data-art-theme="light"] .art-card,
body[data-art-theme="cream"] .art-card,
body[data-art-theme="light"] .settings-quick-card,
body[data-art-theme="cream"] .settings-quick-card,
body[data-art-theme="light"] .settings-section,
body[data-art-theme="cream"] .settings-section {
  box-shadow: none;
  filter: none;
}

body[data-art-theme="light"] .search-box:focus-within,
body[data-art-theme="cream"] .search-box:focus-within,
body[data-art-theme="light"] .composer-field input:focus,
body[data-art-theme="cream"] .composer-field input:focus,
body[data-art-theme="light"] .auth-field input:focus,
body[data-art-theme="cream"] .auth-field input:focus,
body[data-art-theme="light"] .modal-input input:focus,
body[data-art-theme="cream"] .modal-input input:focus,
body[data-art-theme="light"] .template-var-field input:focus,
body[data-art-theme="cream"] .template-var-field input:focus,
body[data-art-theme="light"] .forward-contact-search input:focus,
body[data-art-theme="cream"] .forward-contact-search input:focus {
  box-shadow: 0 0 0 0.08rem color-mix(in srgb, var(--accent) 16%, transparent);
}

body[data-art-theme="light"] .nav-btn.active .nav-icon img,
body[data-art-theme="cream"] .nav-btn.active .nav-icon img,
body[data-art-theme="light"] .composer .ghost.is-recording .button-icon img,
body[data-art-theme="cream"] .composer .ghost.is-recording .button-icon img {
  filter: var(--ui-icon-strong-filter);
}

body[data-art-theme="light"] .topbar,
body[data-art-theme="cream"] .topbar,
body[data-art-theme="light"] .panel,
body[data-art-theme="cream"] .panel,
body[data-art-theme="light"] .panel-left,
body[data-art-theme="cream"] .panel-left,
body[data-art-theme="light"] .panel-center,
body[data-art-theme="cream"] .panel-center,
body[data-art-theme="light"] .panel-right,
body[data-art-theme="cream"] .panel-right,
body[data-art-theme="light"] .metric-card,
body[data-art-theme="cream"] .metric-card,
body[data-art-theme="light"] .dashboard-panel,
body[data-art-theme="cream"] .dashboard-panel,
body[data-art-theme="light"] .art-card,
body[data-art-theme="cream"] .art-card,
body[data-art-theme="light"] .settings-quick-card,
body[data-art-theme="cream"] .settings-quick-card,
body[data-art-theme="light"] .settings-section,
body[data-art-theme="cream"] .settings-section,
body[data-art-theme="light"] .modal,
body[data-art-theme="cream"] .modal,
body[data-art-theme="light"] .menu,
body[data-art-theme="cream"] .menu,
body[data-art-theme="light"] .emoji-picker,
body[data-art-theme="cream"] .emoji-picker,
body[data-art-theme="light"] .toast,
body[data-art-theme="cream"] .toast {
  background: var(--panel-strong);
  border-color: var(--glass-border);
}

body[data-art-theme="light"] .brand,
body[data-art-theme="cream"] .brand {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-art-theme="light"] .primary,
body[data-art-theme="cream"] .primary,
body[data-art-theme="light"] .start-service-btn,
body[data-art-theme="cream"] .start-service-btn,
body[data-art-theme="light"] .brand-dot,
body[data-art-theme="cream"] .brand-dot {
  color: var(--accent-contrast);
}

body[data-art-theme="light"] .metric-card.highlight,
body[data-art-theme="cream"] .metric-card.highlight {
  background: var(--accent-strong);
  color: var(--accent-contrast);
}

body[data-art-theme="light"] .metric-card.highlight p,
body[data-art-theme="light"] .metric-card.highlight span,
body[data-art-theme="light"] .metric-card.highlight strong,
body[data-art-theme="light"] .metric-card.highlight small,
body[data-art-theme="cream"] .metric-card.highlight p,
body[data-art-theme="cream"] .metric-card.highlight span,
body[data-art-theme="cream"] .metric-card.highlight strong,
body[data-art-theme="cream"] .metric-card.highlight small {
  color: var(--accent-contrast);
}

body[data-art-theme="light"] .metric-card-positive h3,
body[data-art-theme="light"] .metric-card-template h3,
body[data-art-theme="cream"] .metric-card-positive h3,
body[data-art-theme="cream"] .metric-card-template h3 {
  color: var(--accent-dark);
}

body[data-art-theme="light"] .metric-card-danger h3,
body[data-art-theme="cream"] .metric-card-danger h3,
body[data-art-theme="light"] .system-chip-offline,
body[data-art-theme="cream"] .system-chip-offline,
body[data-art-theme="light"] .status-offline,
body[data-art-theme="cream"] .status-offline,
body[data-art-theme="light"] .health-card.is-offline h4,
body[data-art-theme="cream"] .health-card.is-offline h4,
body[data-art-theme="light"] .menu-item.danger,
body[data-art-theme="cream"] .menu-item.danger {
  color: #991b1b;
}

body[data-art-theme="light"] .tag-info,
body[data-art-theme="cream"] .tag-info {
  background: rgba(37, 99, 235, 0.11);
  border-color: rgba(37, 99, 235, 0.24);
  color: #1d4ed8;
}

body[data-art-theme="light"] .tag-muted,
body[data-art-theme="light"] .tag-away,
body[data-art-theme="cream"] .tag-muted,
body[data-art-theme="cream"] .tag-away {
  background: color-mix(in srgb, var(--muted) 12%, var(--panel));
  color: var(--muted);
}

.settings-card:hover,
.template-list-item:hover,
.template-list-item:focus-visible,
.transfer-user-item:hover,
.transfer-user-item:focus-visible,
.template-image-dropzone:hover,
.template-image-dropzone:focus-visible {
  background: var(--flat-hover);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  transform: none;
}

.integration-banner,
.integration-banner.is-live,
.integration-banner.is-mock,
.integration-banner.is-offline,
.health-card {
  background: var(--panel);
  border-color: var(--glass-border);
}

body[data-art-theme="light"] .health-card,
body[data-art-theme="cream"] .health-card,
body[data-art-theme="light"] .integration-banner,
body[data-art-theme="cream"] .integration-banner {
  border-color: var(--stroke);
}

.modal-backdrop {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: none;
  z-index: 180;
}

.modal-backdrop[hidden] {
  display: none !important;
}

.toast-stack {
  z-index: 220;
  width: min(22rem, calc(100vw - 2rem));
  gap: 0.52rem;
}

.toast.is-clickable {
  cursor: pointer;
}

.transfer-notification-backdrop {
  z-index: 170;
}

.transfer-notification-card {
  width: min(27rem, calc(100vw - 2rem));
  grid-template-columns: 2rem minmax(0, 1fr) 1.75rem;
  gap: 0.7rem;
  padding: 0.82rem;
  border-left: 0.18rem solid var(--accent-strong);
  box-shadow: 0 1rem 2.25rem rgba(0, 0, 0, 0.28);
}

.transfer-notification-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
}

.transfer-notification-body h3 {
  font-size: 0.9rem;
  line-height: 1.2;
}

.transfer-notification-body p {
  margin-top: 0.22rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.transfer-notification-close {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
}

.native-file-input {
  position: fixed;
  left: 0;
  top: 0;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.toast {
  transform: none;
  position: relative;
  grid-template-columns: 1.55rem minmax(0, 1fr) 1.55rem;
  gap: 0.62rem;
  align-items: start;
  overflow: hidden;
  padding: 0.68rem 0.7rem;
  border-left-width: 0.18rem;
  background: color-mix(in srgb, var(--panel-strong) 94%, #000 6%);
  color: var(--ink);
}

.toast[data-tone="success"] {
  border-left-color: var(--accent-strong);
}

.toast[data-tone="info"] {
  border-left-color: color-mix(in srgb, #3b82f6 70%, var(--accent));
}

.toast[data-tone="warning"] {
  border-left-color: #f59e0b;
}

.toast[data-tone="error"] {
  border-left-color: #ef4444;
}

.toast::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.125rem;
  background: color-mix(in srgb, var(--accent) 56%, transparent);
  transform-origin: left;
  animation: toastProgress var(--toast-duration, 4200ms) linear both;
}

.toast:hover::after {
  animation-play-state: paused;
}

.toast.is-leaving::after {
  animation: none;
  opacity: 0;
}

.toast-icon {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  line-height: 1;
}

.toast.is-progress .toast-icon {
  position: relative;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 88%, white);
}

.toast.is-progress .toast-icon::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 0.125rem solid currentColor;
  border-right-color: transparent;
  animation: toastProgressSpin 0.75s linear infinite;
}

@keyframes toastProgressSpin {
  to {
    transform: rotate(360deg);
  }
}

.toast[data-tone="info"] .toast-icon {
  background: color-mix(in srgb, #3b82f6 16%, transparent);
  color: #93c5fd;
}

.toast-title {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.2;
}

.toast-text {
  margin-top: 0.16rem;
  color: color-mix(in srgb, var(--muted) 84%, var(--ink));
  font-size: 0.74rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toast-close {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.45rem;
  border: 0.0625rem solid color-mix(in srgb, var(--muted) 32%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
  font-size: 0.9rem;
}

.toast.is-visible,
.toast.is-leaving {
  transform: none;
}

@keyframes toastProgress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@keyframes flatViewEnter {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flatToastEnter {
  from {
    opacity: 0;
    transform: translateX(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flatModalEnter {
  from {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes uiSoftRise {
  from {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes uiListReveal {
  from {
    opacity: 0;
    transform: translateX(-0.35rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes uiSubtlePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }

  50% {
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--accent) 14%, transparent);
  }
}

@keyframes uiStatusBlink {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.metrics,
.metrics *,
.metrics *::before,
.metrics *::after {
  animation: none !important;
}

/* Deep UI normalization layer */
:root {
  --ui-radius: var(--radius);
  --ui-control-height: 2.55rem;
  --ui-control-height-sm: 2.15rem;
  --ui-pad-x: 0.75rem;
  --ui-surface: var(--panel);
  --ui-surface-raised: var(--panel-strong);
  --ui-border: var(--glass-border);
  --ui-border-strong: color-mix(in srgb, var(--accent) 34%, var(--glass-border));
  --ui-hover: var(--flat-hover, color-mix(in srgb, var(--muted) 10%, var(--panel-strong)));
  --ui-active: color-mix(in srgb, var(--accent) 16%, var(--panel-strong));
  --ui-danger: #ef4444;
  --ui-warning: #f59e0b;
  --ui-info: #0ea5e9;
}

body[data-art-theme="light"],
body[data-art-theme="cream"] {
  --ui-border: var(--stroke);
  --ui-hover: color-mix(in srgb, var(--accent) 7%, var(--panel-strong));
  --ui-active: color-mix(in srgb, var(--accent) 12%, var(--panel-strong));
}

:where(.panel, .metric-card, .dashboard-panel, .clients-summary-card, .quotation-summary-card, .settings-section, .settings-quick-card, .art-card, .modal, .menu, .toast) {
  border-radius: var(--ui-radius);
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  box-shadow: none;
}

:where(.panel, .metric-card, .dashboard-panel, .settings-section, .settings-quick-card, .art-card):focus-within {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--ui-border));
}

:where(.primary, .start-service-btn, .ghost, .clients-open-btn, .quotation-file-link, .quotation-form-file-button, .template-use-btn, .metrics-tab, .nav-btn) {
  border-radius: var(--ui-radius);
  min-height: var(--ui-control-height-sm);
  font-weight: 900;
  transition:
    background-color var(--flat-motion-fast) var(--flat-motion-ease),
    color var(--flat-motion-fast) var(--flat-motion-ease),
    border-color var(--flat-motion-fast) var(--flat-motion-ease);
}

:where(.ghost, .clients-open-btn, .quotation-file-link, .quotation-form-file-button, .template-use-btn) {
  background: var(--ui-surface-raised);
  border: 0.0625rem solid var(--ui-border);
  color: var(--ink);
}

:where(.ghost, .clients-open-btn, .quotation-file-link, .quotation-form-file-button, .template-use-btn):hover,
:where(.ghost, .clients-open-btn, .quotation-file-link, .quotation-form-file-button, .template-use-btn):focus-visible {
  background: var(--ui-hover);
  border-color: var(--ui-border-strong);
  color: var(--ink);
}

:where(.composer-field input, .search-box, .clients-search input, .quotation-search input, .modal-input input, .auth-field input, .quotation-form-field input, .quotation-form-field select, .calculator-field input, .calculator-field select, .calculator-table input, .sheet-calculator-controls input, .sheet-calculator-controls select, .template-var-field input, .forward-contact-search input) {
  border-radius: var(--ui-radius);
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ink);
}

:where(.composer-field input, .search-box, .clients-search input, .quotation-search input, .modal-input input, .auth-field input, .quotation-form-field input, .quotation-form-field select, .calculator-field input, .calculator-field select, .calculator-table input, .sheet-calculator-controls input, .sheet-calculator-controls select, .template-var-field input, .forward-contact-search input):focus,
:where(.search-box):focus-within {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--ui-border));
  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

:where(.pill, .tag, .chat-info-chip, .quotation-status-pill, .quotation-status-select, .clients-status-pill, .status-pill, .system-chip, .health-card) {
  border-color: var(--ui-border);
}

:where(.pill.active, .nav-btn.active, .metrics-tab.active) {
  background: var(--ui-active);
  border-color: var(--ui-border-strong);
  color: var(--accent-dark);
}

:where(.clients-table-wrap, .quotation-table-wrap, .employee-table-wrap, .calculator-table-wrap, .dashboard-panel, .integration-banner, .health-card) {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
}

:where(.clients-table th, .quotation-table th, .employee-performance-table th, .calculator-table th) {
  background: color-mix(in srgb, var(--ui-surface-raised) 88%, var(--ui-surface));
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
}

:where(.clients-table td, .quotation-table td, .employee-performance-table td, .calculator-table td) {
  border-bottom-color: var(--ui-border);
}

:where(.clients-table tbody tr:hover td, .quotation-table tbody tr:hover td, .employee-performance-table tbody tr:hover td, .calculator-table tbody tr:hover td) {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.metric-card {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
}

.metric-card h3,
.dashboard-stat-card strong {
  letter-spacing: 0;
}

.metric-card p,
.dashboard-panel-header p,
.dashboard-empty,
.metric-trend,
.dashboard-stat-card span,
.dashboard-stat-card small,
.employee-identity small {
  color: color-mix(in srgb, var(--muted) 94%, var(--ink));
}

:where(.view-header p, .conversation-preview, .conversation-secondary, .conversation-time, .message-time, .chat-info-sub, .toast-text, .health-card span, .integration-check span, .settings-note, .art-card-head p) {
  color: color-mix(in srgb, var(--muted) 94%, var(--ink));
}

:where(.search-box, .composer-field input, .clients-search input, .quotation-search input, .modal-input input, .auth-field input, .quotation-form-field input, .quotation-form-field select, .calculator-field input, .calculator-field select, .calculator-table input, .sheet-calculator-controls input, .sheet-calculator-controls select, .template-var-field input, .forward-contact-search input) {
  border-color: color-mix(in srgb, var(--ui-border) 82%, var(--muted));
}

:where(.ghost, .clients-open-btn, .quotation-file-link, .quotation-form-file-button, .template-use-btn):disabled {
  color: color-mix(in srgb, var(--muted) 90%, transparent);
}

.dashboard-bar-row,
.dashboard-stat-card {
  border-radius: var(--ui-radius);
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-raised) 76%, transparent);
}

.dashboard-bar-track,
.monthly-track {
  background: color-mix(in srgb, var(--muted) 15%, var(--ui-surface));
}

.dashboard-bar-fill,
.monthly-fill {
  min-width: 0.22rem;
}

.employee-rank {
  background: color-mix(in srgb, var(--accent) 16%, var(--ui-surface-raised));
}

.empty-state,
.dashboard-empty {
  border-radius: var(--ui-radius);
}

.toast {
  border-radius: var(--ui-radius);
  border-color: var(--ui-border);
}

body[data-art-theme="light"] :where(.panel, .metric-card, .dashboard-panel, .clients-summary-card, .quotation-summary-card, .settings-section, .settings-quick-card, .art-card, .modal, .menu, .toast),
body[data-art-theme="cream"] :where(.panel, .metric-card, .dashboard-panel, .clients-summary-card, .quotation-summary-card, .settings-section, .settings-quick-card, .art-card, .modal, .menu, .toast) {
  background: var(--panel-strong);
  border-color: var(--ui-border);
}

body[data-art-theme="light"] :where(.metric-card-positive h3, .metric-card-template h3, .dashboard-stat-card.is-positive strong, .dashboard-stat-card.is-template strong),
body[data-art-theme="cream"] :where(.metric-card-positive h3, .metric-card-template h3, .dashboard-stat-card.is-positive strong, .dashboard-stat-card.is-template strong) {
  color: var(--accent-dark);
}

body[data-art-theme="light"] :where(.metric-card-danger h3, .dashboard-stat-card.is-danger strong, .employee-quality-badge.is-danger),
body[data-art-theme="cream"] :where(.metric-card-danger h3, .dashboard-stat-card.is-danger strong, .employee-quality-badge.is-danger) {
  color: #991b1b;
}

body[data-art-theme="light"] :where(.message-file-icon, .composer-file-icon, .team-chat-file-icon),
body[data-art-theme="cream"] :where(.message-file-icon, .composer-file-icon, .team-chat-file-icon) {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-strong));
  color: var(--accent-stronger);
}

body[data-art-theme="light"] .employee-rank,
body[data-art-theme="cream"] .employee-rank {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-strong));
  color: var(--accent-stronger);
}

body[data-art-theme="light"] .employee-quality-badge,
body[data-art-theme="cream"] .employee-quality-badge {
  background: color-mix(in srgb, var(--accent) 13%, var(--panel-strong));
  color: var(--accent-stronger);
}

body[data-art-theme="light"] .employee-quality-badge.is-warning,
body[data-art-theme="cream"] .employee-quality-badge.is-warning {
  background: #fff3cd;
  color: #9a5b00;
}

body[data-art-theme="light"] .employee-quality-badge.is-danger,
body[data-art-theme="cream"] .employee-quality-badge.is-danger {
  background: #ffe1e4;
  color: #991b1b;
}

/* app-header-flat.css */
/* Header. Gerado a partir de flat.css para organizar os quatro blocos do atendimento. */

.brand {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body .brand {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.brand-logo {
  width: 11.6rem;
  height: 2.55rem;
  filter: brightness(0) invert(1);
  opacity: 1;
}

.nav-btn .nav-icon img,
.button-icon img,
.art-dropzone-icon img {
  filter: var(--ui-icon-filter);
  opacity: 1;
}

body .brand-logo {
  filter: brightness(0) invert(1);
}

body .nav-btn .nav-icon img,
body .button-icon img,
body .art-dropzone-icon img {
  filter: var(--ui-icon-filter);
}

body .nav-btn:hover .nav-icon img,
body .nav-btn:focus-visible .nav-icon img,
body .nav-btn.active .nav-icon img,
body .ghost:hover .button-icon img,
body .topbar .ghost:hover .button-icon img,
body .art-dropzone:hover .art-dropzone-icon img,
body .art-dropzone.is-dragging .art-dropzone-icon img {
  filter: var(--ui-icon-strong-filter);
}

body .brand-dot {
  background: var(--accent-strong);
  color: #ffffff;
}

.ghost,
.topbar .ghost,
.user-chip,
.system-chip {
  background: var(--panel-strong);
  border-color: var(--stroke);
  border-radius: var(--radius);
  box-shadow: none;
  backdrop-filter: none;
}

.ghost:hover,
.topbar .ghost:hover {
  background: var(--flat-hover);
}

body .ghost,
body .topbar .ghost,
body .user-chip,
body .system-chip {
  background: var(--panel-strong);
  border-color: var(--glass-border);
}

body .ghost:hover,
body .topbar .ghost:hover {
  background: var(--flat-hover);
}

.top-nav,
body .top-nav {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border-color: color-mix(in srgb, var(--glass-border) 72%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}

.topbar {
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr) max-content;
  column-gap: 1.45rem;
  row-gap: 0.45rem;
  min-height: 4.35rem;
  padding: 0.45rem 1.25rem;
  border-color: color-mix(in srgb, var(--glass-border) 76%, transparent);
}

.nav-btn {
  position: relative;
  box-shadow: none;
}

.nav-btn.has-notifications::after {
  content: attr(data-notification-count);
  position: absolute;
  top: 0.14rem;
  right: 0.14rem;
  min-width: 0.92rem;
  height: 0.92rem;
  padding: 0 0.18rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--accent-contrast);
  border: 0.0625rem solid color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.nav-btn:hover {
  background: var(--flat-hover);
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

.nav-btn.active {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: #ffffff;
  box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--accent) 22%, transparent), 0 0 1.25rem color-mix(in srgb, var(--accent) 18%, transparent);
}

body .nav-btn:hover {
  background: var(--flat-hover);
}

body .nav-btn.active {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent-dark);
  box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--accent) 22%, transparent), 0 0 1.25rem color-mix(in srgb, var(--accent) 18%, transparent);
}

.nav-btn:hover .nav-icon,
.nav-btn:focus-visible .nav-icon,
.nav-btn.active .nav-icon {
  background: transparent;
}

body[data-art-theme="light"] .brand-logo,
body[data-art-theme="cream"] .brand-logo {
  filter: none;
}

body[data-art-theme="light"] .nav-btn .nav-icon img,
body[data-art-theme="cream"] .nav-btn .nav-icon img,
body[data-art-theme="light"] .button-icon img,
body[data-art-theme="cream"] .button-icon img,
body[data-art-theme="light"] .art-dropzone-icon img,
body[data-art-theme="cream"] .art-dropzone-icon img {
  filter: var(--ui-icon-filter);
  opacity: 0.9;
}

body[data-art-theme="light"] .brand-logo,
body[data-art-theme="cream"] .brand-logo,
body[data-art-theme="light"] .nav-btn:hover .nav-icon img,
body[data-art-theme="cream"] .nav-btn:hover .nav-icon img,
body[data-art-theme="light"] .nav-btn:focus-visible .nav-icon img,
body[data-art-theme="cream"] .nav-btn:focus-visible .nav-icon img,
body[data-art-theme="light"] .ghost:hover .button-icon img,
body[data-art-theme="cream"] .ghost:hover .button-icon img {
  filter: var(--ui-icon-strong-filter);
}

body[data-art-theme="light"] .brand-logo,
body[data-art-theme="cream"] .brand-logo {
  filter: none;
}

body[data-art-theme="light"] .nav-btn.has-notifications::after,
body[data-art-theme="cream"] .nav-btn.has-notifications::after {
  color: var(--accent-contrast);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--panel));
}

/* conversation-list-flat.css */
/* Bloco da esquerda. Gerado a partir de flat.css para organizar os quatro blocos do atendimento. */

body .pill.active,
body .tag-alert,
body .tag-online,
body .transfer-user-badge,
body .template-list-badge,
body .dept-badge {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-dark);
}

body .search-box {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--glass-border));
  box-shadow: none;
}

.search-box:focus-within {
  background: var(--panel-strong);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

body .search-box:focus-within {
  background: var(--panel-strong);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--accent) 18%, transparent);
}

body .search-icon,
body .search-clear-btn {
  color: var(--muted);
}

body .search-box:focus-within .search-icon,
body .search-box:focus-within .search-clear-btn {
  color: var(--accent-dark);
}

.pill,
.pill.active {
  background: var(--panel);
  border-color: var(--glass-border);
  border-radius: var(--radius);
}

.pill.active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #ffffff;
}

.conversation-card {
  border-bottom-color: var(--stroke);
}

.conversation-card:hover,
body .conversation-card:hover {
  background: var(--flat-hover);
}

.conversation-card.active,
body .conversation-card.active {
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  box-shadow: 0 0.4rem 1rem color-mix(in srgb, var(--accent) 10%, transparent);
  border: 0.0625rem solid color-mix(in srgb, var(--accent) 38%, var(--stroke));
  border-left: 0.25rem solid var(--flat-green-live);
}

body .conversation-card.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border-left-color: var(--accent);
}

.conversation-card.has-unread,
body .conversation-card.has-unread,
body .conversation-card.active.has-unread {
  background: #ffffff;
}

body .conversation-card.has-unread,
body .conversation-card.active.has-unread {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 12%, var(--panel)),
    var(--panel) 72%
  );
}

body .conversation-card.active.has-unread {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 16%, var(--panel)),
    color-mix(in srgb, var(--accent) 6%, var(--panel)) 72%
  );
}

.conversation-card.active::after {
  content: none;
  display: none;
}

.conversation-card.needs-response,
body .conversation-card.needs-response {
  border-left: 0.1875rem solid var(--accent);
}

.conversation-card.conversation-tone {
  --conversation-tone-color: var(--accent);
  --conversation-tone-bg: color-mix(in srgb, var(--conversation-tone-color) 8%, var(--panel));
  --conversation-tone-bg-strong: color-mix(in srgb, var(--conversation-tone-color) 13%, var(--panel));
  border-left: 0.25rem solid var(--conversation-tone-color);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--conversation-tone-color) 13%, var(--panel)) 0%,
    var(--conversation-tone-bg) 30%,
    var(--panel) 100%
  );
}

body .conversation-card.conversation-tone {
  border-left-color: var(--conversation-tone-color) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--conversation-tone-color) 14%, var(--panel)) 0%,
    color-mix(in srgb, var(--conversation-tone-color) 8%, var(--panel)) 34%,
    var(--panel) 100%
  ) !important;
}

.conversation-card.conversation-tone:hover,
body .conversation-card.conversation-tone:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--conversation-tone-color) 18%, var(--panel)) 0%,
    color-mix(in srgb, var(--conversation-tone-color) 10%, var(--panel)) 38%,
    var(--panel) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--conversation-tone-color) 40%, var(--stroke));
  border-left-color: var(--conversation-tone-color) !important;
}

.conversation-card.conversation-tone.active,
body .conversation-card.conversation-tone.active,
.conversation-card.conversation-tone.active.has-unread,
body .conversation-card.conversation-tone.active.has-unread,
.conversation-card.conversation-tone.has-unread,
body .conversation-card.conversation-tone.has-unread {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--conversation-tone-color) 20%, var(--panel)) 0%,
    color-mix(in srgb, var(--conversation-tone-color) 11%, var(--panel)) 42%,
    var(--panel) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--conversation-tone-color) 46%, var(--stroke));
  border-left-color: var(--conversation-tone-color) !important;
  box-shadow:
    inset 0.18rem 0 0 color-mix(in srgb, var(--conversation-tone-color) 90%, transparent),
    0 0.35rem 0.75rem color-mix(in srgb, var(--conversation-tone-color) 7%, transparent);
}

.conversation-card.conversation-tone-mine-open {
  --conversation-tone-color: var(--accent);
}

.conversation-card.conversation-tone-unassigned-open {
  --conversation-tone-color: var(--conversation-open-unassigned);
}

.conversation-card.conversation-tone-closing {
  --conversation-tone-color: var(--conversation-closing);
}

.conversation-card.conversation-tone-closed {
  --conversation-tone-color: var(--conversation-closed);
  background: color-mix(in srgb, var(--muted) 7%, transparent);
  opacity: 0.74;
}

.conversation-card.conversation-tone-closed:hover {
  background: color-mix(in srgb, var(--muted) 10%, var(--panel-strong));
  opacity: 0.86;
}

.conversation-card.conversation-tone-closed.active {
  background: color-mix(in srgb, var(--muted) 12%, var(--panel-strong));
  opacity: 0.9;
}

.conversation-card.conversation-tone .conversation-unread-badge {
  background: var(--conversation-tone-color) !important;
  color: #ffffff;
}

.conversation-name,
.conversation-phone,
.conversation-card.has-unread .conversation-name,
.conversation-card.has-unread .conversation-preview {
  color: var(--ink);
}

.conversation-preview,
.conversation-secondary,
.conversation-time,
.conversation-owner {
  color: var(--muted);
}

.conversation-unread-badge {
  min-width: 1.16rem;
  height: 1.16rem;
  padding: 0 0.32rem;
  background: var(--accent-strong);
  color: #ffffff;
  font-size: 0.64rem;
  box-shadow: none;
}

.conversation-card.needs-response .conversation-unread-badge {
  background: var(--accent-strong);
}

.status-pill,
body .status-pill {
  border-color: var(--stroke);
  box-shadow: none;
  text-shadow: none;
}

body[data-art-theme="light"],
body[data-art-theme="cream"] {
  color-scheme: light;
  --conversation-closed: color-mix(in srgb, var(--muted) 58%, var(--panel-strong));
}

body[data-art-theme="light"] .status-warning,
body[data-art-theme="cream"] .status-warning,
body[data-art-theme="light"] .status-mock,
body[data-art-theme="cream"] .status-mock,
body[data-art-theme="light"] .health-card.is-mock h4,
body[data-art-theme="cream"] .health-card.is-mock h4,
body[data-art-theme="light"] .quotation-status-pill.is-producao,
body[data-art-theme="light"] .quotation-status-select.is-producao,
body[data-art-theme="cream"] .quotation-status-pill.is-producao,
body[data-art-theme="cream"] .quotation-status-select.is-producao {
  color: #713f12;
}

body[data-art-theme="light"] .conversation-card,
body[data-art-theme="cream"] .conversation-card {
  border-bottom-color: var(--stroke);
}

body[data-art-theme="light"] .conversation-card:hover,
body[data-art-theme="cream"] .conversation-card:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-strong));
}

body[data-art-theme="light"] .conversation-card.has-unread,
body[data-art-theme="cream"] .conversation-card.has-unread {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--panel-strong)), var(--panel-strong) 46%, transparent);
}

/* chat-panel-flat.css */
/* Bloco central. Gerado a partir de flat.css para organizar os quatro blocos do atendimento. */

.composer .ghost.is-recording .button-icon img {
  filter: none;
}

body .composer .ghost.is-recording .button-icon img {
  filter: none;
}

.primary,
.start-service-btn {
  border: 0.0625rem solid var(--accent-strong);
  border-radius: var(--radius);
  box-shadow: none;
}

body .composer .ghost:hover,
body .forward-contact-item:hover,
body .forward-contact-item:focus-visible,
body .transfer-user-item:hover,
body .transfer-user-item:focus-visible,
body .template-list-item:hover,
body .template-list-item:focus-visible,
body .template-image-dropzone:hover,
body .template-image-dropzone:focus-visible {
  background: var(--flat-hover);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

body .composer .ghost:disabled,
body .composer .emoji-toggle:disabled,
body .composer .primary:disabled,
body .composer-field input:disabled {
  background: color-mix(in srgb, var(--muted) 12%, var(--panel-strong));
  border-color: var(--glass-border);
  color: var(--muted);
  box-shadow: none;
  opacity: 0.72;
}

.chat-header,
.composer {
  background: var(--header);
  border-color: var(--stroke);
  backdrop-filter: none;
}

.chat-header {
  min-height: auto;
}

.chat-title {
  color: var(--ink);
}

.chat-meta,
.chat-window-text {
  color: var(--muted);
}

body .chat-header-info-line,
body .chat-header-info-part.is-neutral,
body .chat-header-info-separator {
  color: var(--muted);
}

body .chat-window-state .chat-header-info-part {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .chat-header-info-part.is-pending-finalization {
  color: #ffd08a;
}

body .chat-header-info-part.is-finalized {
  color: #8ff0c3;
}

body .chat-header-info-part.is-closed {
  color: #ffb4b4;
}

body[data-art-theme="light"] .chat-header-info-part.is-pending-finalization,
body[data-art-theme="cream"] .chat-header-info-part.is-pending-finalization {
  color: #9a5a00;
}

body[data-art-theme="light"] .chat-header-info-part.is-finalized,
body[data-art-theme="cream"] .chat-header-info-part.is-finalized {
  color: #0b6848;
}

body[data-art-theme="light"] .chat-header-info-part.is-closed,
body[data-art-theme="cream"] .chat-header-info-part.is-closed {
  color: #b91c1c;
}

body .chat-info-chip,
body .chat-info-chip.is-open,
body .chat-info-chip.is-timer,
body .chat-info-chip.is-employee,
body .chat-info-chip.is-number,
body .chat-info-chip.is-reference,
body .chat-info-chip.is-closed,
body .chat-info-chip.is-muted {
  --chip-accent: var(--accent);
  --chip-fg: #c8f7e6;
  --chip-bg: color-mix(in srgb, var(--accent) 19%, var(--panel));
  --chip-border: color-mix(in srgb, var(--accent) 62%, var(--glass-border));
  --chip-icon-bg: color-mix(in srgb, var(--accent) 28%, transparent);
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--chip-fg);
  box-shadow: none;
  text-shadow: none;
}

body .chat-info-chip.is-finalized {
  --chip-accent: #22c78a;
  --chip-fg: #8ff0c3;
  --chip-bg: color-mix(in srgb, #0f6f4c 38%, var(--panel));
  --chip-border: color-mix(in srgb, #22c78a 68%, var(--glass-border));
  --chip-icon-bg: color-mix(in srgb, #22c78a 28%, transparent);
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--chip-fg);
}

body .chat-info-chip.is-pending-finalization {
  --chip-accent: #f59e0b;
  --chip-fg: #ffd08a;
  --chip-bg: color-mix(in srgb, #7c3f00 42%, var(--panel));
  --chip-border: color-mix(in srgb, #f59e0b 72%, var(--glass-border));
  --chip-icon-bg: color-mix(in srgb, #f59e0b 28%, transparent);
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--chip-fg);
}

body .chat-info-chip.is-neutral {
  --chip-accent: var(--muted);
  --chip-fg: var(--muted);
  --chip-bg: transparent;
  --chip-border: transparent;
  --chip-icon-bg: transparent;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

body .chat-window-state .chat-info-chip.is-open,
body .chat-window-state .chat-info-chip.is-timer,
body .chat-window-state .chat-info-chip.is-number,
body .chat-window-state .chat-info-chip.is-reference,
body .chat-window-state .chat-info-chip.is-employee,
body .chat-window-state .chat-info-chip.is-muted {
  --chip-accent: var(--muted);
  --chip-fg: var(--muted);
  --chip-bg: transparent;
  --chip-border: transparent;
  --chip-icon-bg: transparent;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

body .chat-window-state .chat-info-chip-icon,
body .chat-window-state .chat-info-avatar-stack {
  display: none;
}

body .chat-info-chip.is-neutral + .chat-info-chip.is-neutral::before {
  color: var(--muted);
}

body .chat-info-chip.is-closed {
  --chip-accent: #ef4444;
  --chip-fg: #ffb4b4;
  --chip-bg: color-mix(in srgb, #7f1d1d 42%, var(--panel));
  --chip-border: color-mix(in srgb, #ef4444 72%, var(--glass-border));
  --chip-icon-bg: color-mix(in srgb, #ef4444 28%, transparent);
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--chip-fg);
}

body[data-art-theme="light"] .chat-info-chip,
body[data-art-theme="cream"] .chat-info-chip,
body[data-art-theme="light"] .chat-info-chip.is-open,
body[data-art-theme="cream"] .chat-info-chip.is-open,
body[data-art-theme="light"] .chat-info-chip.is-timer,
body[data-art-theme="cream"] .chat-info-chip.is-timer,
body[data-art-theme="light"] .chat-info-chip.is-employee,
body[data-art-theme="cream"] .chat-info-chip.is-employee,
body[data-art-theme="light"] .chat-info-chip.is-number,
body[data-art-theme="cream"] .chat-info-chip.is-number,
body[data-art-theme="light"] .chat-info-chip.is-reference,
body[data-art-theme="cream"] .chat-info-chip.is-reference,
body[data-art-theme="light"] .chat-info-chip.is-closed,
body[data-art-theme="cream"] .chat-info-chip.is-closed,
body[data-art-theme="light"] .chat-info-chip.is-muted,
body[data-art-theme="cream"] .chat-info-chip.is-muted {
  --chip-fg: var(--accent-dark);
  --chip-bg: color-mix(in srgb, var(--accent) 14%, #ffffff);
  --chip-border: color-mix(in srgb, var(--accent) 44%, var(--glass-border));
  --chip-icon-bg: color-mix(in srgb, var(--accent) 16%, transparent);
}

body[data-art-theme="light"] .chat-info-chip.is-finalized,
body[data-art-theme="cream"] .chat-info-chip.is-finalized {
  --chip-fg: #0b6848;
  --chip-bg: color-mix(in srgb, #22c78a 15%, #ffffff);
  --chip-border: color-mix(in srgb, #22c78a 50%, var(--glass-border));
  --chip-icon-bg: color-mix(in srgb, #22c78a 18%, transparent);
}

body[data-art-theme="light"] .chat-info-chip.is-pending-finalization,
body[data-art-theme="cream"] .chat-info-chip.is-pending-finalization {
  --chip-fg: #92400e;
  --chip-bg: color-mix(in srgb, #f59e0b 16%, #ffffff);
  --chip-border: color-mix(in srgb, #f59e0b 54%, var(--glass-border));
  --chip-icon-bg: color-mix(in srgb, #f59e0b 20%, transparent);
}

body[data-art-theme="light"] .chat-info-chip-icon,
body[data-art-theme="cream"] .chat-info-chip-icon {
  opacity: 0.88;
}

.chat-window {
  background-color: var(--chat-bg);
  background-image: url("../SVGs/chat-wallpaper-pattern.svg?v=20260605-v2") !important;
  background-size: 22.5rem 22.5rem;
  background-position: 1.5rem 1rem;
  background-repeat: repeat;
}

body[data-art-wallpaper="custom"] .chat-window {
  background-image: var(--art-chat-background) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Composer controls share one visual scale across chat and AI. */
.composer {
  gap: 0.65rem;
  padding: 0.65rem 0.8rem;
}

.composer-left,
.composer-field {
  gap: 0.5rem;
}

.composer .icon-only-btn,
.composer .emoji-toggle,
.composer-field input {
  height: 3.25rem;
  min-height: 3.25rem;
  border-radius: 0.65rem;
}

.composer .icon-only-btn,
.composer .emoji-toggle {
  width: 3.25rem;
  min-width: 3.25rem;
}

.ai-chat-form {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.65rem;
  padding-block: 0.65rem;
}

.ai-chat-attachment-draft,
.ai-chat-form .ai-error {
  grid-column: 1 / -1;
}

.ai-chat-toolbar {
  grid-column: auto;
  flex-wrap: nowrap;
}

.ai-chat-toolbar .ghost,
.ai-chat-form textarea,
.ai-chat-form .primary {
  width: auto;
  height: 3.25rem;
  min-height: 3.25rem;
  border: 0.0625rem solid var(--stroke);
  border-radius: 0.65rem;
  box-shadow: none;
}

.ai-chat-form .ai-chat-icon-btn {
  width: 3.25rem;
  min-width: 3.25rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.ai-chat-form .button-icon {
  width: 1.32rem;
  height: 1.32rem;
}

.ai-chat-form .button-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-chat-toolbar .ghost {
  padding-inline: 0;
  background: var(--panel-strong);
}

.ai-chat-form textarea {
  max-height: 7rem;
  padding: 0.82rem 0.9rem;
  background: var(--panel-strong);
  line-height: 1.45;
}

.ai-chat-form .primary {
  align-self: stretch;
  min-width: 3.25rem;
  padding-inline: 0;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.message,
.art-preview-message {
  border-color: var(--stroke);
  box-shadow: none;
  backdrop-filter: none;
}

.message-reply-preview,
.composer-reply-preview {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-strong));
  border-color: var(--stroke);
  border-left-color: var(--accent);
  box-shadow: none;
}

body .message-reply-preview,
body .composer-reply-preview {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-strong));
  border-color: var(--stroke);
  border-left-color: var(--accent);
}

body .message,
body .art-preview-message {
  border-color: var(--stroke);
  box-shadow: none;
  text-shadow: none;
}

.message:not(.outbound):not(.note),
.art-preview-message.inbound {
  background: var(--art-inbound-bubble, var(--panel-strong));
  color: var(--art-inbound-text, var(--ink));
}

body .message:not(.outbound):not(.note),
body .art-preview-message.inbound {
  background: var(--art-inbound-bubble, var(--panel-strong));
  color: var(--art-inbound-text, var(--ink));
}

.message.outbound,
.art-preview-message.outbound {
  background: var(--art-outbound-bubble, #176f59);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--art-outbound-text, #f2fff8);
}

body .message.outbound,
body .art-preview-message.outbound {
  background: var(--art-outbound-bubble, var(--accent-strong));
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--art-outbound-text, #f2fff8);
}

.message p,
.message-caption,
.message-author,
.message-time,
.message-file-body strong,
.message-file-body span,
.message-status-label,
.message-tool-btn,
.message-retry-btn,
.composer-attachment-title-row strong,
.composer-attachment-name,
.composer-attachment-meta,
.composer-attachment-status {
  text-shadow: none;
}

.message-link {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.message-link:hover,
.message-link:focus-visible {
  color: var(--accent-dark);
  outline: none;
}

.message-author,
body .message-author {
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
}

.message-time,
body .message.inbound .message-time,
body .message.outbound .message-time,
.message-file-body span,
.composer-attachment-meta {
  color: color-mix(in srgb, currentColor 0%, var(--muted));
}

.message-status-label.is-neutral,
body .message-status-label.is-neutral,
.composer-attachment-status {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.message-status-label.is-pending,
body .message-status-label.is-pending,
.composer-attachment-status.is-sending {
  background: rgba(59, 120, 255, 0.14);
  color: #8ab4ff;
}

.message-status-label.is-success,
body .message-status-label.is-success,
.composer-attachment-status.is-sent {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-dark);
}

.message-status-label.is-failed,
body .message-status-label.is-failed,
.composer-attachment-status.is-failed,
.composer-attachment-error {
  background: rgba(214, 86, 86, 0.14);
  color: #ffb7b7;
}

.message-note,
.message.note,
body .message.note {
  background: color-mix(in srgb, #f0b429 16%, var(--panel-strong));
  color: var(--ink);
  border-color: color-mix(in srgb, #f0b429 26%, transparent);
  box-shadow: none;
}

.message-attachment,
body .message-attachment,
.message-pdf-frame-wrap,
.message-file-icon {
  background: color-mix(in srgb, var(--muted) 10%, var(--panel-strong));
  border-color: var(--stroke);
  box-shadow: none;
  color: inherit;
}

.message-pdf-marker img {
  width: 1.7rem;
  height: 1.7rem;
}

.message-audio-card {
  width: min(20rem, 100%);
  min-width: min(16rem, 100%);
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 8%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--stroke) 72%, transparent);
}

.message.message-kind-audio {
  width: min(20rem, 90%);
  min-width: min(16rem, 90%);
  max-width: min(90%, 20rem);
}

.message.message-kind-audio .message-audio-card,
.message.message-kind-audio .audio-transcription-panel {
  width: 100%;
}

.message-audio-icon {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.message-audio-body {
  min-width: 0;
  display: grid;
}

.message-audio {
  width: 100%;
  min-width: 0;
  height: 2rem;
  display: block;
  border-radius: 999px;
  color-scheme: dark;
  accent-color: var(--accent);
}

.message-audio::-webkit-media-controls-panel {
  background: color-mix(in srgb, var(--panel-strong) 82%, var(--accent) 6%);
}

.message-audio::-webkit-media-controls-current-time-display,
.message-audio::-webkit-media-controls-time-remaining-display {
  color: var(--ink);
  text-shadow: none;
}

.message.outbound .message-audio-card {
  background: color-mix(in srgb, var(--accent-stronger) 46%, transparent);
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

.message-tools-trigger,
.message-tool-btn,
body .message-tools-trigger,
body .message-tool-btn,
.message-retry-btn,
body .message-retry-btn {
  background: color-mix(in srgb, var(--muted) 10%, var(--panel-strong));
  border-color: var(--stroke);
  color: var(--ink);
  box-shadow: none;
}

.message-tool-btn:hover,
.message-tools-trigger:hover,
.message-tools-trigger:focus-visible,
.message-tools.is-open .message-tools-trigger,
.message-retry-btn:hover:not(:disabled) {
  background: var(--flat-hover);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.message-has-only-media .message-tools-trigger {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border-color: color-mix(in srgb, var(--stroke) 62%, transparent);
  color: var(--muted);
}

.message-has-only-media .message-tools-trigger:hover,
.message-has-only-media .message-tools-trigger:focus-visible,
.message-has-only-media .message-tools.is-open .message-tools-trigger {
  background: var(--panel-strong);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--stroke));
  color: var(--ink);
}

.message-tools-menu,
body .message-tools-menu {
  background: var(--panel-strong);
  border-color: var(--stroke);
  box-shadow: none;
}

.message-error,
body .message-error {
  color: #ffb7b7;
}

.message-image,
.message-video,
.message-media-frame,
.message-attachment,
.message-file-icon,
.media-history-preview,
.composer-attachment-preview {
  border-radius: var(--radius);
}

.message-media-frame {
  background: color-mix(in srgb, var(--muted) 10%, var(--panel-strong));
  border: 0.0625rem solid var(--stroke);
}

.message-media-frame.is-sticker {
  border: 0;
  background: transparent;
}

.message.outbound.message-sending::after {
  content: "";
  display: inline-block;
  width: 1.35rem;
  height: 0.35rem;
  margin-left: 0.45rem;
  vertical-align: -0.08rem;
  border-radius: 999px;
  background:
    radial-gradient(circle, currentColor 45%, transparent 48%) 0 50% / 0.35rem 0.35rem no-repeat,
    radial-gradient(circle, currentColor 45%, transparent 48%) 50% 50% / 0.35rem 0.35rem no-repeat,
    radial-gradient(circle, currentColor 45%, transparent 48%) 100% 50% / 0.35rem 0.35rem no-repeat;
  opacity: 0.85;
  animation: flatSendingDots 1s steps(3, end) infinite;
  pointer-events: none;
  position: static;
  inset: auto;
  transform: none;
}

.message.outbound.message-sending .message-status-label {
  color: currentColor;
  border-color: currentColor;
}

.message-has-only-media {
  box-shadow: none;
}

.composer-attachment-card,
body .composer-attachment-card {
  background: var(--panel-strong);
  border-color: var(--stroke);
  box-shadow: none;
}

.composer-attachment-card.is-sending,
body .composer-attachment-card.is-sending {
  background: color-mix(in srgb, #0ea5e9 10%, var(--panel-strong));
  border-color: color-mix(in srgb, #0ea5e9 28%, transparent);
}

.composer-attachment-card.is-sent,
body .composer-attachment-card.is-sent {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.composer-attachment-card.is-failed,
body .composer-attachment-card.is-failed {
  background: color-mix(in srgb, #d65656 12%, var(--panel-strong));
  border-color: color-mix(in srgb, #d65656 32%, transparent);
}

.composer-attachment-preview {
  background: color-mix(in srgb, var(--muted) 10%, var(--panel));
}

.composer .icon-only-btn,
.emoji-toggle,
.mobile-back-btn,
.menu-btn,
.toast-close {
  border-radius: var(--radius);
}

.composer .ghost {
  background: var(--panel-strong);
  border-color: var(--stroke);
  box-shadow: none;
}

.composer .ghost:hover {
  background: var(--flat-hover);
}

.composer .ghost.is-recording,
body .composer .ghost.is-recording {
  background: #b42318;
  border-color: #b42318;
  box-shadow: none;
  animation: none;
}

.emoji-toggle {
  background: var(--panel-strong);
  border-color: var(--stroke);
}

.composer-field input,
body .composer-field input,
.auth-field input,
.modal-input input,
body .modal-input input,
.quotation-form-field input,
.quotation-form-field select,
body .quotation-form-field input,
body .quotation-form-field select,
.template-var-field input {
  background: var(--panel-strong);
  border-color: var(--stroke);
}

.composer-field input:focus,
body .composer-field input:focus,
.auth-field input:focus,
.modal-input input:focus,
body .modal-input input:focus,
.quotation-form-field input:focus,
.quotation-form-field select:focus,
body .quotation-form-field input:focus,
body .quotation-form-field select:focus,
.template-var-field input:focus,
body .template-var-field input:focus,
.forward-contact-search input:focus,
body .forward-contact-search input:focus {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}

.emoji-toggle:hover,
.emoji-toggle[aria-expanded="true"],
.menu-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent-dark);
}

.art-card,
.art-card-head,
.art-card-head > div,
.art-dropzone,
.art-appearance-grid,
.art-theme-toggle,
.art-theme-option,
.art-color-control,
.art-accent-swatches,
.art-chat-preview {
  min-width: 0;
}

.art-chat-preview {
  background-color: var(--chat-bg);
  background-image: none;
  border: 0.0625rem solid var(--stroke);
  border-radius: var(--radius);
}

body[data-art-theme="light"] .composer .ghost.is-recording .button-icon img,
body[data-art-theme="cream"] .composer .ghost.is-recording .button-icon img {
  filter: none;
}

body[data-art-theme="light"] .message:not(.outbound):not(.note),
body[data-art-theme="cream"] .message:not(.outbound):not(.note),
body[data-art-theme="light"] .art-preview-message.inbound,
body[data-art-theme="cream"] .art-preview-message.inbound {
  border-color: rgba(17, 24, 39, 0.1);
}

body[data-art-theme="light"] .message.outbound,
body[data-art-theme="cream"] .message.outbound,
body[data-art-theme="light"] .art-preview-message.outbound,
body[data-art-theme="cream"] .art-preview-message.outbound {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

:where(.primary, .start-service-btn) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-contrast);
}

:where(.primary, .start-service-btn):hover:not(:disabled),
:where(.primary, .start-service-btn):focus-visible:not(:disabled) {
  background: var(--accent-stronger);
  border-color: var(--accent-stronger);
}

:where(.composer-field input, .clients-search input, .quotation-search input, .modal-input input, .auth-field input, .quotation-form-field input, .quotation-form-field select, .calculator-field input, .calculator-field select, .calculator-table input, .sheet-calculator-controls input, .sheet-calculator-controls select, .template-var-field input, .forward-contact-search input)::placeholder {
  color: color-mix(in srgb, var(--muted) 92%, transparent);
}

body[data-art-theme="light"] :where(.avatar, .chat-avatar, .user-avatar, .profile-avatar),
body[data-art-theme="cream"] :where(.avatar, .chat-avatar, .user-avatar, .profile-avatar) {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-strong));
  color: var(--accent-stronger);
}

body[data-art-theme="light"] :where(.avatar[data-unread="true"]::before, .avatar[data-status]::after, .chat-avatar[data-status]::after),
body[data-art-theme="cream"] :where(.avatar[data-unread="true"]::before, .avatar[data-status]::after, .chat-avatar[data-status]::after) {
  border-color: var(--panel-strong);
}

body[data-art-theme="light"] :where(.message-attachment, .message-document, .message-pdf-preview, .message-media-fallback),
body[data-art-theme="cream"] :where(.message-attachment, .message-document, .message-pdf-preview, .message-media-fallback) {
  background: color-mix(in srgb, var(--muted) 8%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--ink) 12%, var(--stroke));
  color: var(--ink);
}

body[data-art-theme="light"] .message-audio,
body[data-art-theme="cream"] .message-audio {
  color-scheme: light;
}

body[data-art-theme="light"] .message-audio::-webkit-media-controls-panel,
body[data-art-theme="cream"] .message-audio::-webkit-media-controls-panel {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-strong));
}

body[data-art-theme="light"] :where(.message-file-body strong, .message-caption),
body[data-art-theme="cream"] :where(.message-file-body strong, .message-caption) {
  color: var(--ink);
}

body[data-art-theme="light"] :where(.message-file-body span, .composer-attachment-meta),
body[data-art-theme="cream"] :where(.message-file-body span, .composer-attachment-meta) {
  color: color-mix(in srgb, var(--ink) 68%, var(--muted));
}

/* right-panel-flat.css */
/* Bloco da direita. Gerado a partir de flat.css para organizar os quatro blocos do atendimento. */

body[data-art-theme="light"] .right-panel-tab,
body[data-art-theme="cream"] .right-panel-tab {
  background: color-mix(in srgb, var(--ink) 5%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--ink) 10%, var(--stroke));
}

body[data-art-theme="light"] .right-panel-tab img,
body[data-art-theme="cream"] .right-panel-tab img {
  filter: var(--ui-icon-filter);
  opacity: 0.72;
}

.right-panel-tab img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.right-panel-tab#rightPanelAiBtn img {
  width: 1.42rem;
  height: 1.42rem;
}

body[data-art-theme="light"] .right-panel-tab:hover,
body[data-art-theme="cream"] .right-panel-tab:hover,
body[data-art-theme="light"] .right-panel-tab:focus-visible,
body[data-art-theme="cream"] .right-panel-tab:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--stroke));
}

body[data-art-theme="light"] .right-panel-tab:hover img,
body[data-art-theme="cream"] .right-panel-tab:hover img,
body[data-art-theme="light"] .right-panel-tab:focus-visible img,
body[data-art-theme="cream"] .right-panel-tab:focus-visible img {
  filter: var(--ui-icon-strong-filter);
  opacity: 0.9;
}

body[data-art-theme="light"] .right-panel-tab.active,
body[data-art-theme="cream"] .right-panel-tab.active {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--accent) 48%, var(--stroke));
}

body[data-art-theme="light"] .right-panel-tab.active img,
body[data-art-theme="cream"] .right-panel-tab.active img {
  filter: var(--ui-icon-strong-filter);
  opacity: 1;
}

body[data-art-theme="light"] .right-panel-tab.has-notifications::after,
body[data-art-theme="cream"] .right-panel-tab.has-notifications::after {
  border-color: var(--panel-strong);
}

/* flat-responsive.css */
/* Overrides responsivos do tema flat. Carregar por ultimo. */

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-glow {
    display: none;
  }
}

@media (min-width: 75.01rem) {
  .shell {
    grid-template-columns: minmax(21rem, 24rem) minmax(0, 1fr) minmax(18rem, 21rem);
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message.outbound.message-sending::after {
    animation: none;
    clip-path: inset(0);
  }
}

@media (max-width: 45rem) {
  .toast-stack {
    left: max(0.65rem, calc(env(safe-area-inset-left) + 0.65rem));
    right: max(0.65rem, calc(env(safe-area-inset-right) + 0.65rem));
    top: max(0.65rem, calc(env(safe-area-inset-top) + 0.65rem));
    width: auto;
    gap: 0.45rem;
  }

  .toast {
    grid-template-columns: 1.45rem minmax(0, 1fr) 1.45rem;
    padding: 0.62rem 0.64rem;
  }

  .toast-icon,
  .toast-close {
    width: 1.45rem;
    height: 1.45rem;
  }

  .transfer-notification-card {
    width: min(25rem, calc(100vw - 1.25rem));
    grid-template-columns: 1.85rem minmax(0, 1fr) 1.65rem;
    padding: 0.72rem;
  }

  .sticker-library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 24rem) {
  .sticker-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .view.active > * {
    animation: flatViewEnter var(--flat-motion-medium) var(--flat-motion-ease) both;
  }

  .nav-btn,
  .ghost,
  .primary,
  .clients-open-btn,
  .settings-card,
  .template-list-item,
  .transfer-user-item,
  .template-image-dropzone,
  .clients-summary-card,
  .quotation-summary-card,
  .metric-card,
  .health-card,
  .signal-card,
  .integration-item,
  .chat-info-chip {
    transition:
      background-color var(--flat-motion-fast) var(--flat-motion-ease),
      border-color var(--flat-motion-fast) var(--flat-motion-ease),
      color var(--flat-motion-fast) var(--flat-motion-ease),
      opacity var(--flat-motion-fast) var(--flat-motion-ease),
      transform var(--flat-motion-fast) var(--flat-motion-ease);
  }

  .nav-btn:hover,
  .nav-btn:focus-visible,
  .ghost:hover:not(:disabled),
  .ghost:focus-visible:not(:disabled),
  .primary:hover:not(:disabled),
  .primary:focus-visible:not(:disabled),
  .clients-open-btn:hover,
  .clients-open-btn:focus-visible,
  .settings-card:hover,
  .settings-card:focus-visible,
  .template-list-item:hover,
  .template-list-item:focus-visible,
  .transfer-user-item:hover,
  .transfer-user-item:focus-visible,
  .template-image-dropzone:hover,
  .template-image-dropzone:focus-visible,
  button.chat-info-chip:hover,
  button.chat-info-chip:focus-visible {
    transform: translateY(-0.0625rem);
  }

  .nav-btn:active,
  .ghost:active,
  .primary:active,
  .clients-open-btn:active,
  .settings-card:active,
  .template-list-item:active,
  .transfer-user-item:active,
  button.chat-info-chip:active {
    transform: translateY(0);
  }

  .nav-icon img,
  .button-icon img,
  .chat-info-chip-icon {
    transition:
      opacity var(--flat-motion-fast) var(--flat-motion-ease),
      filter var(--flat-motion-fast) var(--flat-motion-ease),
      transform var(--flat-motion-fast) var(--flat-motion-ease);
  }

  .nav-btn:hover .nav-icon img,
  .nav-btn:focus-visible .nav-icon img,
  .nav-btn.active .nav-icon img,
  button.chat-info-chip:hover .chat-info-chip-icon,
  button.chat-info-chip:focus-visible .chat-info-chip-icon {
    transform: scale(1.05);
  }

  .clients-table tbody tr,
  .quotation-table tbody tr,
  .calculator-table tbody tr {
    transition: background-color var(--flat-motion-fast) var(--flat-motion-ease);
  }

  .modal-backdrop[data-open="true"] .modal {
    animation: flatModalEnter var(--flat-motion-medium) var(--flat-motion-ease) both;
  }

  .toast.is-visible {
    animation: flatToastEnter var(--flat-motion-medium) var(--flat-motion-ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view.active > *,
  .modal-backdrop[data-open="true"] .modal,
  .toast.is-visible {
    animation: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .view.active :where(.view-header, .panel, .settings-section, .metric-card, .dashboard-panel, .clients-summary-card, .quotation-summary-card, .art-card, .subscription-current-card, .subscription-plan-card) {
    animation: uiSoftRise var(--flat-motion-medium) var(--flat-motion-ease) both;
  }

  .view.active :where(.view-header) {
    animation-delay: 0ms;
  }

  .view.active :where(.panel, .settings-section, .metric-card, .dashboard-panel, .clients-summary-card, .quotation-summary-card, .art-card, .subscription-current-card, .subscription-plan-card):nth-child(2) {
    animation-delay: 45ms;
  }

  .view.active :where(.panel, .settings-section, .metric-card, .dashboard-panel, .clients-summary-card, .quotation-summary-card, .art-card, .subscription-current-card, .subscription-plan-card):nth-child(3) {
    animation-delay: 90ms;
  }

  :where(.conversation-card, .settings-user-row, .template-settings-row, .sticker-library-item, .team-chat-message, .quotation-table tbody tr, .clients-table tbody tr) {
    transition:
      background-color var(--flat-motion-fast) var(--flat-motion-ease),
      border-color var(--flat-motion-fast) var(--flat-motion-ease),
      box-shadow var(--flat-motion-fast) var(--flat-motion-ease),
      opacity var(--flat-motion-fast) var(--flat-motion-ease),
      transform var(--flat-motion-fast) var(--flat-motion-ease);
  }

  :where(.conversation-card, .settings-user-row, .template-settings-row, .sticker-library-item, .team-chat-message):hover {
    transform: translateY(-0.0625rem);
  }

  :where(.conversation-card, .settings-user-row, .template-settings-row, .sticker-library-item, .team-chat-message):active {
    transform: translateY(0);
  }

  .settings-users-list .settings-user-row:nth-child(-n + 12),
  .template-settings-list .template-settings-row:nth-child(-n + 12) {
    animation: uiListReveal var(--flat-motion-medium) var(--flat-motion-ease) both;
  }

  .settings-users-list .settings-user-row:nth-child(2),
  .template-settings-list .template-settings-row:nth-child(2) {
    animation-delay: 25ms;
  }

  .settings-users-list .settings-user-row:nth-child(3),
  .template-settings-list .template-settings-row:nth-child(3) {
    animation-delay: 50ms;
  }

  .settings-users-list .settings-user-row:nth-child(4),
  .template-settings-list .template-settings-row:nth-child(4) {
    animation-delay: 75ms;
  }

  .settings-users-list .settings-user-row:nth-child(n + 5):nth-child(-n + 12),
  .template-settings-list .template-settings-row:nth-child(n + 5):nth-child(-n + 12) {
    animation-delay: 100ms;
  }

  :where(.start-service-btn, #sendBtn:not(:disabled), #recordAudioBtn.is-recording, .chat-info-chip.is-timer) {
    animation: uiSubtlePulse 4.6s ease-in-out infinite;
  }

  :where(.system-chip-live, .admin-ai-dot[data-tone="live"], .avatar[data-unread="true"]::before, .conversation-unread-badge) {
    animation: uiStatusBlink 2.4s ease-in-out infinite;
  }

  :where(input, textarea, select, .search-box, .composer-field input) {
    transition:
      background-color var(--flat-motion-fast) var(--flat-motion-ease),
      border-color var(--flat-motion-fast) var(--flat-motion-ease),
      box-shadow var(--flat-motion-fast) var(--flat-motion-ease),
      transform var(--flat-motion-fast) var(--flat-motion-ease);
  }

  :where(input, textarea, select):focus {
    transform: translateY(-0.03125rem);
  }

  .modal-backdrop[data-open="true"] {
    animation: flatToastEnter var(--flat-motion-fast) var(--flat-motion-ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view.active :where(.view-header, .panel, .settings-section, .metric-card, .dashboard-panel, .clients-summary-card, .quotation-summary-card, .art-card, .subscription-current-card, .subscription-plan-card),
  .settings-users-list .settings-user-row,
  .template-settings-list .template-settings-row,
  :where(.start-service-btn, #sendBtn:not(:disabled), #recordAudioBtn.is-recording, .chat-info-chip.is-timer),
  :where(.system-chip-live, .admin-ai-dot[data-tone="live"], .avatar[data-unread="true"]::before, .conversation-unread-badge),
  .modal-backdrop[data-open="true"] {
    animation: none;
  }
}

@media (max-width: 45rem) {
  .app {
    padding: 0;
    background: var(--bg);
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) max-content;
    min-height: auto;
    gap: 0.75rem;
    padding: calc(0.75rem + env(safe-area-inset-top)) 0.875rem 0.75rem;
    border-width: 0.0625rem;
    border-radius: var(--radius);
  }

  .brand {
    width: 12.2rem;
    height: 2.75rem;
    padding: 0.35rem 0.55rem;
    justify-self: start;
  }

  .brand-logo {
    width: 8.1rem;
    height: 2rem;
  }

  .top-actions {
    gap: 0.5rem;
  }

  .top-actions .ghost {
    min-height: 2.45rem;
    padding: 0.55rem 0.7rem;
  }

  .top-nav {
    left: 0;
    right: 0;
    bottom: 0;
    min-height: calc(3.75rem + env(safe-area-inset-bottom));
    padding: 0.375rem calc(0.375rem + env(safe-area-inset-right)) calc(0.375rem + env(safe-area-inset-bottom)) calc(0.375rem + env(safe-area-inset-left));
    border-width: 0.0625rem 0 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .nav-btn {
    height: 2.85rem;
    min-width: 2.75rem;
    border-radius: 0.5rem;
  }

  .nav-icon {
    width: 1.45rem;
    height: 1.45rem;
  }

  .nav-icon img,
  .nav-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .views {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  }

  .shell {
    min-height: 0;
  }

  .panel-left,
  .panel-center {
    border-radius: 0;
  }

  .panel-header {
    padding: 0.75rem 0.75rem 0.5rem;
  }

  .search-box {
    margin: 0 0.625rem 0.5rem;
    min-height: 2.65rem;
  }

  .conversation-list {
    padding-bottom: 0.75rem;
  }

  .conversation-card {
    min-height: 4.65rem;
    padding: 0.675rem 0.75rem;
  }

  .conversation-card.active {
    box-shadow: none;
  }

  .chat-header {
    min-height: 3.75rem;
    padding: calc(0.5rem + env(safe-area-inset-top)) 0.625rem 0.5rem;
  }

  .chat-actions .ghost.small {
    min-height: 2.35rem;
    padding: 0.45rem 0.6rem;
  }

  .chat-window {
    padding: 0.625rem 0.625rem 0.5rem;
    gap: 0.55rem;
  }

  .message {
    max-width: 92%;
  }

  .composer {
    gap: 0.45rem;
    padding: 0.45rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .composer-left {
    gap: 0.375rem;
  }

  #attachBtn,
  #recordAudioBtn,
  #templateBtn,
  .emoji-toggle {
    width: 2.55rem;
    min-width: 2.55rem;
    height: 2.55rem;
  }

  .composer-field input {
    border-radius: var(--radius);
    min-height: 2.75rem;
    padding: 0.7rem 0.85rem;
  }

  #sendBtn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
  }

  .metrics,
  .metrics-view,
  .clients-view,
  .subscription-view,
  .settings-view,
  .quotation-view,
  .art-view,
  .calculator-view,
  .tools-view {
    padding-inline: 0.625rem;
  }

  .dashboard-panel,
  .dashboard-panel-wide,
  .art-card,
  .settings-card,
  .settings-section,
  .integration-item,
  .signal-card,
  .health-card {
    border-radius: 0.5rem;
  }

  .settings-user-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .settings-user-actions {
    justify-content: space-between;
  }

  .settings-user-admin-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 45rem) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    position: fixed;
    inset: 0;
  }

  .app {
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
  }

  .topbar {
    position: relative;
    z-index: 45;
    flex: 0 0 auto;
    width: 100%;
    min-height: auto;
    align-items: center;
    row-gap: 0.65rem;
    padding: calc(0.62rem + env(safe-area-inset-top)) 0.625rem 0.65rem;
  }

  .top-actions {
    min-width: 0;
  }

  .top-actions .ghost {
    white-space: nowrap;
  }

  .top-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    width: 100%;
  }

  body[data-mobile-chat-open="true"] .top-nav {
    display: none;
  }

  .nav-btn {
    width: 100%;
    min-width: 0;
  }

  .views {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding-top: 0;
    padding-bottom: calc(4.15rem + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  body[data-mobile-chat-open="true"] .views {
    padding-bottom: 0;
  }

  .view,
  .view.active {
    min-height: 0;
    overflow: hidden;
  }

  .view.active > * {
    min-height: 0;
  }

  .metrics-view,
  .clients-view,
  .subscription-view,
  .settings-view,
  .quotation-view,
  .calculator-view,
  .art-view {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0.75rem calc(0.9rem + env(safe-area-inset-bottom));
    scrollbar-gutter: auto;
  }

  .subscription-view {
    width: min(calc(100% - 1.25rem), 96rem);
    margin-inline: auto;
    padding: 0 0 calc(0.9rem + env(safe-area-inset-bottom));
  }

  .art-view {
    width: min(calc(100% - 1.25rem), 96rem);
    margin-inline: auto;
    padding: 0 0 calc(0.9rem + env(safe-area-inset-bottom));
  }

  .art-panel {
    width: 100%;
    margin-inline: 0;
  }

  .art-dropzone {
    padding-inline: 0.65rem;
  }

  .art-dropzone strong {
    font-size: 0.82rem;
  }

  .view-header {
    gap: 0.2rem;
  }

  .view-header h2,
  .settings-view > .view-header h2 {
    font-size: 1.35rem;
    line-height: 1.1;
  }

  .view-header p {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .shell {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .panel-left,
  .panel-center {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .is-mobile-hidden {
    display: none !important;
  }

  .panel-header {
    flex: 0 0 auto;
  }

  .filters {
    margin-inline: -0.05rem;
    padding-bottom: 0.45rem;
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filters .pill {
    min-height: 2.15rem;
  }

  .search-box {
    flex: 0 0 auto;
  }

  .conversation-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 0.35rem 0.95rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .conversation-card {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    min-height: 5.75rem;
    height: auto;
    align-items: flex-start;
    padding: 0.72rem 0.75rem;
    overflow: hidden;
  }

  .conversation-body {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0.22rem;
    min-width: 0;
    overflow: hidden;
  }

  .conversation-top {
    align-items: flex-start;
    line-height: 1.18;
  }

  .conversation-title-wrap {
    align-items: flex-start;
  }

  .conversation-name {
    line-height: 1.18;
  }

  .conversation-time {
    line-height: 1.2;
    padding-top: 0.05rem;
  }

  .conversation-secondary,
  .conversation-preview {
    margin: 0;
    line-height: 1.25;
  }

  .conversation-secondary {
    align-items: flex-start;
  }

  .conversation-preview,
  .conversation-phone,
  .conversation-owner {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .conversation-main,
  .conversation-copy,
  .conversation-secondary {
    min-width: 0;
  }

  .chat-header {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .chat-contact {
    grid-column: 1;
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
  }

  .chat-copy {
    min-width: 0;
    row-gap: 0.12rem;
  }

  .chat-title {
    max-width: 100%;
    font-size: 0.9rem;
  }

  .chat-meta {
    max-width: 100%;
    font-size: 0.7rem;
  }

  .chat-window-state {
    max-width: calc(100vw - 6.75rem);
    overflow: hidden;
    padding: 0.1rem 0 0.12rem;
    justify-items: start;
  }

  .chat-header-info-line {
    justify-content: flex-start;
    flex-wrap: nowrap;
    row-gap: 0.12rem;
    font-size: 0.66rem;
  }

  .chat-info-chip {
    flex: 0 0 auto;
    max-width: min(13rem, 72vw);
    min-height: 1.75rem;
    font-size: 0.66rem;
  }

  .chat-info-chip-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .chat-actions {
    grid-column: 2;
    flex: 0 0 auto;
    min-width: 0;
  }

  .chat-actions .ghost.small {
    min-width: 0;
    max-width: 4.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .media-history-panel {
    max-height: 32dvh;
    overflow-y: auto;
  }

  .media-history-grid {
    grid-template-columns: 1fr;
  }

  .chat-window {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 0.65rem;
  }

  .message {
    max-width: 94%;
    font-size: 0.9rem;
  }

  .message-has-only-media {
    max-width: 94%;
  }

  .message-media-frame,
  .message-image,
  .message-video,
  .message-pdf-preview {
    width: min(19rem, 78vw);
  }

  .message-media-frame,
  .message-media-frame .message-image,
  .message-media-frame .message-video {
    max-height: min(20rem, 48dvh);
  }

  .message p {
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .message-tools-menu {
    max-width: min(12rem, calc(100vw - 2rem));
  }

  .composer {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-áreas:
      "attachments attachments"
      "utility utility"
      "field send";
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom));
  }

  .composer-left {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .composer-left::-webkit-scrollbar {
    display: none;
  }

  .composer-field {
    min-width: 0;
  }

  .composer-start-service {
    min-height: 2.75rem;
    white-space: normal;
  }

  .composer-field input {
    min-width: 0;
    font-size: 0.9rem;
  }

  .attachment-menu {
    position: fixed;
    left: max(0.5rem, env(safe-area-inset-left));
    right: max(0.5rem, env(safe-area-inset-right));
    bottom: calc(6.35rem + env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    z-index: 190;
    padding: 0.45rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.34);
  }

  .attachment-menu .menu-item {
    min-height: 2.85rem;
    text-align: center;
  }

  .emoji-picker {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc(3.8rem + env(safe-area-inset-bottom));
    width: auto;
    max-height: 38dvh;
    overflow-y: auto;
    z-index: 60;
  }

  .composer-attachment {
    max-height: 24dvh;
    overflow-y: auto;
  }

  .composer-attachment-card {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.65rem;
  }

  .composer-attachment-preview {
    width: 3.25rem;
    height: 3.25rem;
    min-height: 3.25rem;
  }

  .composer-attachment-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .composer-attachment-actions .ghost {
    flex: 1 1 0;
  }

  .native-file-input {
    position: fixed;
    left: 0;
    top: 0;
    width: 0.0625rem;
    height: 0.0625rem;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
  }

  .modal-backdrop {
    align-items: flex-end;
    justify-content: stretch;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom));
    z-index: 180;
  }

  .modal {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.9rem 0.9rem 0.5rem 0.5rem;
    padding: 1rem;
  }

  .modal-actions {
    position: sticky;
    bottom: -1rem;
    z-index: 1;
    margin: 0 -1rem -1rem;
    padding: 0.75rem 1rem 1rem;
    background: var(--glass-strong);
    border-top: 0.0625rem solid var(--glass-border);
  }

  .modal-actions > * {
    flex: 1 1 0;
    min-height: 2.75rem;
  }

  .template-list,
  .template-vars-form,
  .transfer-user-list,
  .forward-contact-list {
    max-height: 48dvh;
  }

  .clients-summary,
  .quotation-summary,
  .dashboard-stat-grid,
  .system-health-grid,
  .integration-grid,
  .integration-signal-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .calculator-grid,
  .sheet-calculator-grid,
  .calculator-controls,
  .sheet-calculator-controls {
    grid-template-columns: 1fr;
  }

  .calculator-actions,
  .settings-actions,
  .art-accent-swatches {
    justify-content: stretch;
  }

  .calculator-actions > *,
  .settings-actions > *,
  .art-accent-swatches > * {
    flex: 1 1 auto;
  }

  .calculator-summary-row {
    grid-template-columns: 1fr;
  }

  .clients-panel,
  .quotation-panel,
  .calculator-card,
  .calculator-summary,
  .dashboard-panel,
  .settings-section,
  .settings-quick-card,
  .art-card {
    width: 100%;
    min-width: 0;
  }

  .clients-panel,
  .quotation-panel {
    min-height: auto;
    overflow: visible;
  }

  .clients-toolbar,
  .quotation-toolbar {
    position: sticky;
    top: -0.75rem;
    z-index: 2;
    padding: 0.65rem;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .clients-search input,
  .quotation-search input {
    min-height: 2.7rem;
  }

  .clients-result-count,
  .quotation-result-count {
    align-self: flex-start;
  }

  .clients-table-wrap,
  .quotation-table-wrap,
  .calculator-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .clients-table,
  .quotation-table,
  .calculator-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .clients-table thead,
  .quotation-table thead,
  .calculator-table thead {
    display: none;
  }

  .clients-table tbody,
  .quotation-table tbody,
  .calculator-table tbody {
    display: grid;
    gap: 0.65rem;
  }

  .clients-table tr,
  .quotation-table tr,
  .calculator-table tr {
    display: grid;
    gap: 0.42rem;
    padding: 0.72rem;
    border: 0.0625rem solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--panel-strong);
  }

  .clients-table td,
  .quotation-table td,
  .calculator-table td {
    display: grid;
    grid-template-columns: minmax(5.7rem, 36%) minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    width: 100% !important;
    padding: 0;
    border-bottom: 0;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
  }

  .clients-table td::before,
  .quotation-table td::before,
  .calculator-table td::before {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .clients-table td:nth-child(1)::before {
    content: "Ranking";
  }

  .clients-table td:nth-child(2)::before {
    content: "Funcionario";
  }

  .clients-table td:nth-child(3)::before {
    content: "Conversas";
  }

  .clients-table td:nth-child(4)::before {
    content: "Finalizadas";
  }

  .clients-table td:nth-child(5)::before {
    content: "Score";
  }

  .quotation-table td:nth-child(1)::before {
    content: "Código";
  }

  .quotation-table td:nth-child(2)::before {
    content: "Tipo";
  }

  .quotation-table td:nth-child(3)::before {
    content: "Cliente";
  }

  .quotation-table td:nth-child(4)::before {
    content: "Item";
  }

  .quotation-table td:nth-child(5)::before {
    content: "Valor";
  }

  .quotation-table td:nth-child(6)::before {
    content: "Status";
  }

  .quotation-table td:nth-child(7)::before {
    content: "Responsável";
  }

  .quotation-table td:nth-child(8)::before {
    content: "Data";
  }

  .calculator-table td:nth-child(1)::before {
    content: "Item";
  }

  .calculator-table td:nth-child(2)::before {
    content: "Largura";
  }

  .calculator-table td:nth-child(3)::before {
    content: "Altura";
  }

  .calculator-table td:nth-child(4)::before {
    content: "Qtd.";
  }

  .calculator-table td:nth-child(5)::before {
    content: "Total";
  }

  .calculator-table td:nth-child(6)::before {
    content: "Ações";
  }

  .clients-open-btn,
  .quotation-status-pill,
  .quotation-status-select,
  .calculator-table input,
  .calc-remove-row {
    width: 100%;
    max-width: none;
  }

  .quotation-status-pill,
  .quotation-status-select {
    justify-content: center;
  }

  .art-panel,
  .settings-admin-grid,
  .integration-card,
  .integration-banner,
  .settings-inline-card,
  .art-card-head,
  .art-appearance-grid,
  .art-theme-toggle {
    grid-template-columns: 1fr;
  }

  .settings-admin-grid-optimized {
    grid-template-areas:
      "company"
      "business"
      "users"
      "ai";
  }

  .art-card-head,
  .settings-section-head,
  .integration-banner {
    align-items: stretch;
  }
}

@media (max-width: 24rem) {
  .brand {
    width: 8.6rem;
  }

  .brand-logo {
    width: 7.95rem;
  }

  .top-actions .ghost {
    padding-inline: 0.58rem;
  }

  .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .chat-actions .ghost.small {
    display: none;
  }

  .message {
    max-width: 96%;
  }

  .clients-table td,
  .quotation-table td,
  .calculator-table td {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

@media (max-width: 45rem) {
  .calculator-view {
    gap: 0.85rem;
    padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }

  .calculator-grid,
  .sheet-calculator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    width: 100%;
    min-height: auto;
  }

  .sheet-calculator-grid {
    padding-top: 0.75rem;
    border-top-color: var(--glass-border);
  }

  .calculator-card,
  .calculator-summary {
    min-width: 0;
    width: 100%;
  }

  .calculator-summary {
    align-self: stretch;
    position: static;
    z-index: auto;
  }

  .calculator-total-card {
    min-height: 4.95rem;
  }

  .calculator-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border: 0.0625rem solid var(--glass-border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--panel-strong) 70%, transparent);
    -webkit-overflow-scrolling: touch;
  }

  .calculator-table {
    display: table;
    width: 100%;
    min-width: 34rem;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .calculator-table thead {
    display: table-header-group;
  }

  .calculator-table tbody {
    display: table-row-group;
  }

  .calculator-table tr {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .calculator-table th,
  .calculator-table td {
    display: table-cell;
    width: auto !important;
    padding: 0.45rem 0.5rem;
    border-bottom: 0.0625rem solid var(--stroke);
    vertical-align: middle;
  }

  .calculator-table th::before,
  .calculator-table td::before {
    content: none !important;
    display: none !important;
  }

  .calculator-table th:first-child,
  .calculator-table td:first-child {
    width: 3rem !important;
  }

  .calculator-table th:nth-child(2),
  .calculator-table td:nth-child(2),
  .calculator-table th:nth-child(3),
  .calculator-table td:nth-child(3) {
    width: 10rem !important;
  }

  .calculator-table th:nth-child(4),
  .calculator-table td:nth-child(4) {
    width: 5.25rem !important;
  }

  .calculator-table th:nth-child(5),
  .calculator-table td:nth-child(5) {
    width: 7.5rem !important;
  }

  .calculator-table th:last-child,
  .calculator-table td:last-child {
    width: 2.75rem !important;
    text-align: center;
  }

  .calculator-table input {
    width: 100%;
    max-width: none;
  }

  .calc-remove-row {
    width: 1.85rem;
    max-width: 1.85rem;
    height: 1.85rem;
    margin: 0 auto;
  }

  .sheet-calculator-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .sheet-calculator-controls .calculator-field {
    min-width: 0;
  }
}

@media (max-width: 24rem) {
  .calculator-table td {
    display: table-cell;
    grid-template-columns: none;
    gap: 0;
  }
}

@media (max-width: 45rem) {
  :root {
    --ui-control-height: 2.75rem;
  }

  .app {
    padding: 0.45rem;
  }

  .view-header h2 {
    font-size: 1.28rem;
  }

  .view-header p {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .metric-card {
    min-height: auto;
  }

  .clients-table-wrap,
  .quotation-table-wrap,
  .calculator-table-wrap {
    border: 0;
    background: transparent;
  }
}

body .chat-actions .ghost.small.chat-call-btn {
  width: 2.375rem;
  min-width: 2.375rem;
  max-width: 2.375rem;
  height: 2.375rem;
  min-height: 2.375rem;
  max-height: 2.375rem;
  padding: 0;
  color: var(--ink);
}

body .chat-actions .ghost.small.chat-call-btn .chat-call-icon {
  width: 1.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  min-height: 1.15rem;
  object-fit: contain;
  filter: var(--ui-icon-strong-filter, brightness(0) invert(1));
  opacity: 0.96;
}