/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Kanban Drag and Drop Styles */
.kanban-ghost {
  opacity: 0.4;
  background: #c8ebfb;
  border: 2px dashed var(--primary);
}

.kanban-drag {
  opacity: 1;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: rotate(3deg);
}

.kanban-chosen {
  box-shadow: 0 0 0 2px var(--primary);
}

body.is-dragging * {
  cursor: grabbing !important;
}

/* Ensure drag handle is visible and clickable */
[data-drag-handle] {
  touch-action: none;
  user-select: none;
}

/* Fallback clone for better cross-browser drag support */
.kanban-fallback {
  opacity: 0.9;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Make cards draggable */
[data-kanban-target="card"] {
  cursor: grab;
  user-select: none;
}

[data-kanban-target="card"]:active {
  cursor: grabbing;
}

/* Trix Editor Customizations */

/* Hide toolbar completely - we just need a simple text area */
trix-toolbar {
  display: none !important;
}

/* Editor container wrapper */
.trix-wrapper {
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.trix-wrapper:focus-within {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.dark .trix-wrapper {
  border-color: var(--neutral-600) !important;
}

.dark .trix-wrapper:focus-within {
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25) !important;
}

/* Editor content area - Light mode */
trix-editor {
  border: none !important;
  padding: 0.875rem 1rem !important;
  min-height: 120px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  background-color: #ffffff !important;
  color: var(--neutral-800) !important;
  font-size: 0.875rem !important;
  line-height: 1.625 !important;
  font-family: inherit !important;
}

trix-editor:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Editor content area - Dark mode */
.dark trix-editor {
  background-color: var(--neutral-800) !important;
  color: var(--neutral-50) !important;
}

/* Placeholder styling */
trix-editor[placeholder]:empty::before {
  color: var(--neutral-400) !important;
  content: attr(placeholder);
  pointer-events: none;
}

.dark trix-editor[placeholder]:empty::before {
  color: var(--neutral-500) !important;
}

/* Text selection */
trix-editor ::selection {
  background-color: var(--blue-300) !important;
  color: var(--blue-900) !important;
}

.dark trix-editor ::selection {
  background-color: var(--blue-700) !important;
  color: var(--blue-200) !important;
}

/* Links inside editor */
trix-editor a {
  color: var(--primary) !important;
  text-decoration: underline !important;
}

.dark trix-editor a {
  color: var(--blue-500) !important;
}

/* Scrollbar styling */
trix-editor::-webkit-scrollbar {
  width: 8px;
}

trix-editor::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

trix-editor::-webkit-scrollbar-thumb {
  background-color: var(--neutral-300);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

trix-editor::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-400);
}

.dark trix-editor::-webkit-scrollbar-thumb {
  background-color: var(--neutral-600);
}

.dark trix-editor::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-500);
}

/* The WYSIWYG contract template editor and the customer note editor show the
   default Trix toolbar (minus file attachments); the other note editors do not. */
[data-controller~="wysiwyg"] trix-toolbar,
.customer-note-editor trix-toolbar {
  display: block !important;
  padding: 0.5rem 0.75rem 0.25rem;
  border-bottom: 1px solid var(--neutral-200);
  background-color: #ffffff;
}

.customer-note-editor trix-toolbar {
  padding: 0.375rem 0.5rem 0.125rem;
  border-bottom-color: var(--border);
  background-color: var(--muted);
}

.customer-note-editor trix-toolbar .trix-button-group {
  border-color: var(--border);
  margin-bottom: 0.25rem;
}

.customer-note-editor .trix-wrapper {
  border-radius: 0.75rem !important;
}

.dark [data-controller~="wysiwyg"] trix-toolbar,
.dark .customer-note-editor trix-toolbar {
  border-color: var(--neutral-600);
  background-color: var(--neutral-800);
}

.dark [data-controller~="wysiwyg"] trix-toolbar .trix-button,
.dark .customer-note-editor trix-toolbar .trix-button {
  border-color: var(--neutral-600);
}

.dark [data-controller~="wysiwyg"] trix-toolbar .trix-button--icon::before,
.dark .customer-note-editor trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

[data-controller~="wysiwyg"] .trix-button-group--file-tools {
  display: none !important;
}

.customer-note-body .trix-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.customer-note-body .trix-content figure.attachment,
.customer-note-editor trix-editor figure.attachment {
  margin: 0.5rem 0;
}

.customer-note-editor trix-editor .attachment__toolbar {
  color: var(--muted-foreground);
}

.customer-note-editor trix-editor {
  min-height: 96px !important;
}

/* Rich text of customer notes, in the editor and rendered: Tailwind's preflight
   resets lists, emphasis and headings. */
:is(.customer-note-body .trix-content, .customer-note-editor trix-editor) ul {
  list-style: disc outside;
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}

:is(.customer-note-body .trix-content, .customer-note-editor trix-editor) ol {
  list-style: decimal outside;
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}

:is(.customer-note-body .trix-content, .customer-note-editor trix-editor) li {
  margin: 0.125rem 0;
}

:is(.customer-note-body .trix-content, .customer-note-editor trix-editor) :is(strong, b) {
  font-weight: 600;
}

:is(.customer-note-body .trix-content, .customer-note-editor trix-editor) :is(em, i) {
  font-style: italic;
}

.customer-note-body .trix-content a {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is(.customer-note-body .trix-content, .customer-note-editor trix-editor) blockquote {
  border-left: 3px solid var(--border);
  margin: 0.25rem 0;
  padding-left: 0.75rem;
  color: var(--muted-foreground);
}

:is(.customer-note-body .trix-content, .customer-note-editor trix-editor) h1 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  margin: 0.25rem 0;
}

[data-controller~="wysiwyg"] trix-editor {
  min-height: 480px !important;
  max-height: 70vh !important;
}

/* Slim, subtle scrollbar for horizontal scroll regions (e.g. journey stepper).
   Removes the chunky native arrow buttons and fat track so it blends with the
   surrounding card design in both light and dark modes. */
.scrollbar-thin {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--neutral-300) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--neutral-300);
  border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-400);
}
.scrollbar-thin::-webkit-scrollbar-button {
  display: none;
}
.dark .scrollbar-thin {
  scrollbar-color: var(--neutral-600) transparent;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--neutral-600);
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-500);
}

/* Cursor style */
trix-editor {
  cursor: text;
}

/* ==========================================================================
   Tom Select — matches standard input theme:
   border-gray-300 / dark:border-gray-600 / dark:bg-gray-700 / dark:text-white
   shadow-sm / focus:border-indigo-500 / focus:ring-indigo-500
   ========================================================================== */

/* --- Wrapper reset (remove any inherited border/shadow) --- */
.ts-wrapper {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* --- Single-select control (matches <input> / <select>) --- */
.ts-wrapper.single .ts-control {
  background-color: #ffffff;
  border: 1px solid var(--neutral-300);            /* border-gray-300 */
  border-radius: 0.375rem;              /* rounded-md */
  padding: 0.5rem 0.75rem;              /* px-3 py-2 */
  font-size: 0.875rem;                  /* sm:text-sm */
  line-height: 1.25rem;
  color: var(--neutral-900);                        /* text-gray-900 */
  height: 38px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}

.ts-wrapper.single .ts-control > .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  line-height: 1.25rem;
}

.ts-wrapper.single .ts-control > input {
  min-width: 0;
  color: var(--neutral-900);
  background: transparent;
}

.ts-wrapper.single .ts-control > input::placeholder {
  color: var(--neutral-400);                        /* text-gray-400 */
}

/* Hide selected item when dropdown is open so search input is clear */
.ts-wrapper.single.dropdown-active .ts-control > .item {
  opacity: 0 !important;
  position: absolute;
  pointer-events: none;
}

/* Focus ring — matches focus:border-indigo-500 focus:ring-indigo-500 */
.ts-wrapper.single .ts-control:focus,
.ts-wrapper.single.focus .ts-control {
  border-color: var(--ring);                 /* border-indigo-500 */
  box-shadow: 0 0 0 1px var(--ring);        /* ring-indigo-500 */
  outline: none;
}

/* --- Dropdown --- */
.ts-dropdown {
  background-color: #ffffff;
  border: 1px solid var(--neutral-300);
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  color: var(--neutral-900);
}


.ts-dropdown .option.active {
  background-color: var(--blue-100);             /* bg-indigo-50 */
  color: var(--blue-700);                        /* text-indigo-700 */
}

.ts-dropdown .option:hover {
  background-color: var(--neutral-100);             /* bg-gray-100 */
}

.ts-dropdown .no-results {
  color: var(--neutral-500);                        /* text-gray-500 */
}

/* --- Multi-select --- */
.ts-wrapper.multi .ts-control {
  background-color: #ffffff;
  border: 1px solid var(--neutral-300);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  min-height: 38px;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.ts-wrapper.multi .ts-control > .item {
  background-color: var(--blue-200);
  color: var(--blue-800);
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  margin: 0.125rem;
  font-size: 0.75rem;
}

.ts-wrapper.multi .ts-control > .item .remove {
  border-left: 1px solid var(--blue-400);
  margin-left: 0.375rem;
  padding-left: 0.375rem;
}

/* --- Dark mode ---
   Escopado pela classe .dark (a mesma do variant `dark:` do Tailwind — ver
   _theme_head.html.erb), NUNCA por prefers-color-scheme: o app abre em light
   por padrão mesmo com o SO em dark, e a media query pintava todo Tom Select
   de cinza-escuro sobre card branco nesse cenário. */
/* Single control */
.dark .ts-wrapper.single .ts-control {
  background-color: var(--neutral-700) !important;  /* bg-gray-700 */
  border-color: var(--neutral-600) !important;      /* border-gray-600 */
  color: #ffffff !important;             /* text-white */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.dark .ts-wrapper.single .ts-control > input {
  color: #ffffff !important;
}

.dark .ts-wrapper.single .ts-control > input::placeholder {
  color: var(--neutral-400) !important;
}

.dark .ts-wrapper.single .ts-control:focus,
.dark .ts-wrapper.single.focus .ts-control {
  border-color: var(--blue-500) !important;      /* border-indigo-400 */
  box-shadow: 0 0 0 1px var(--blue-500) !important;
}

/* Dropdown */
.dark .ts-dropdown {
  background-color: var(--neutral-700) !important;
  border-color: var(--neutral-600) !important;
  color: var(--neutral-50) !important;
}

.dark .ts-dropdown .option {
  color: var(--neutral-50) !important;
}

.dark .ts-dropdown .option.active {
  background-color: var(--blue-700) !important;
  color: var(--blue-200) !important;
}

.dark .ts-dropdown .option:hover {
  background-color: var(--neutral-600) !important;
}

.dark .ts-dropdown .no-results {
  color: var(--neutral-400) !important;
}

/* Multi-select */
.dark .ts-wrapper.multi .ts-control {
  background-color: var(--neutral-700) !important;
  border-color: var(--neutral-600) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.dark .ts-wrapper.multi .ts-control > .item {
  background-color: var(--blue-700) !important;
  color: var(--blue-200) !important;
}

.dark .ts-wrapper.multi .ts-control > .item .remove {
  border-left-color: var(--ring) !important;
}

/* --- Dores do cliente (sales_presentations/show) ---
   Cada dor marcada é uma frase inteira: vira uma LINHA no controle, uma
   abaixo da outra, em vez do chip inline padrão do multi. A ordem visual é a
   ordem de seleção — a mesma dos slides na apresentação. */
.pains-stack .ts-wrapper.multi .ts-control {
  display: block;
}

.pains-stack .ts-wrapper.multi .ts-control > .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0.25rem 0;
  padding: 0.375rem 0.5rem;
}

.pains-stack .ts-wrapper.multi .ts-control > input {
  width: 100% !important;
  min-width: 0;
}

.dark .ts-wrapper.single .ts-control > input {
  color: #ffffff !important;
}

.dark .ts-wrapper.single .ts-control > input::placeholder {
  color: var(--neutral-400) !important;
}

.dark .ts-wrapper.single .ts-control:focus,
.dark .ts-wrapper.single.focus .ts-control {
  border-color: var(--blue-500) !important;      /* border-indigo-400 */
  box-shadow: 0 0 0 1px var(--blue-500) !important;
}

/* Dropdown */
.dark .ts-dropdown {
  background-color: var(--neutral-700) !important;
  border-color: var(--neutral-600) !important;
  color: var(--neutral-50) !important;
}

.dark .ts-dropdown .option {
  color: var(--neutral-50) !important;
}

.dark .ts-dropdown .option.active {
  background-color: var(--blue-700) !important;
  color: var(--blue-200) !important;
}

.dark .ts-dropdown .option:hover {
  background-color: var(--neutral-600) !important;
}

.dark .ts-dropdown .no-results {
  color: var(--neutral-400) !important;
}

/* Multi-select */
.dark .ts-wrapper.multi .ts-control {
  background-color: var(--neutral-700) !important;
  border-color: var(--neutral-600) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.dark .ts-wrapper.multi .ts-control > .item {
  background-color: var(--blue-700) !important;
  color: var(--blue-200) !important;
}

.dark .ts-wrapper.multi .ts-control > .item .remove {
  border-left-color: var(--ring) !important;
}


/* User Select (dropdown_input mode) */

/* Dropdown search input */
.ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--neutral-200);
}

.ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  background: var(--neutral-50);
}

.ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
  background: #ffffff;
}

.dark .ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input-wrap {
  border-bottom-color: var(--neutral-600);
}

.dark .ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input {
  background: var(--neutral-800);
  border-color: var(--neutral-600);
  color: var(--neutral-50);
}

.dark .ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 1px var(--blue-500);
  background: var(--neutral-900);
}

/* Option rows */
.us-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.us-option:hover {
  background: var(--neutral-100);
}

.dark .us-option:hover {
  background: var(--neutral-700);
}

.us-option.active {
  background: var(--blue-100);
}

.dark .us-option.active {
  background: var(--blue-900);
}

.us-option--blank {
  color: var(--neutral-400);
  font-size: 13px;
  padding: 8px 12px;
}

/* Option text */
.us-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.us-option-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .us-option-name {
  color: var(--neutral-50);
}

.us-option-detail {
  font-size: 11px;
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .us-option-detail {
  color: var(--neutral-400);
}

/* Selected item (in control) */
.us-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.us-item--blank {
  color: var(--neutral-400);
  font-size: 13px;
}

.us-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .us-item-name {
  color: var(--neutral-50);
}

/* Avatar image */
.us-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Avatar initials fallback */
.us-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue-200);
  color: var(--blue-700);
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1;
}

.dark .us-avatar-initials {
  background: var(--blue-900);
  color: var(--blue-400);
}

/* No results */
.us-no-results {
  padding: 12px;
  text-align: center;
  color: var(--neutral-400);
  font-size: 13px;
}

/* WhatsApp Chat Background */
.whatsapp-chat-bg {
  background-color: #e5ddd5;
}

.dark .whatsapp-chat-bg {
  background-color: #0b141a;
}

/* WhatsApp Sender Name Labels */
.whatsapp-sender-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.2;
}
.whatsapp-sender-name--user { color: #1d4ed8; }
.whatsapp-sender-name--agent { color: #047857; }
.dark .whatsapp-sender-name--user { color: var(--blue-300); }
.dark .whatsapp-sender-name--agent { color: var(--green-500); }

/* WhatsApp Platform Link */
.whatsapp-platform-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--ring);
  background: var(--blue-100);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  flex-shrink: 0;
  white-space: nowrap;
}
.whatsapp-platform-link.hidden { display: none; }
.whatsapp-platform-link:hover {
  background: var(--blue-200);
  border-color: var(--blue-300);
}
.dark .whatsapp-platform-link {
  color: var(--blue-400);
  background: rgba(99,102,241,0.15);
}
.dark .whatsapp-platform-link:hover {
  background: rgba(99,102,241,0.25);
  border-color: rgba(99,102,241,0.3);
}

/* WhatsApp Search Toggle */
.whatsapp-search-toggle {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-500);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.whatsapp-search-toggle:hover { background: var(--neutral-100); color: var(--neutral-900); border-color: var(--neutral-300); }
.whatsapp-search-toggle.active { background: var(--blue-100); color: var(--ring); border-color: var(--blue-300); }
.dark .whatsapp-search-toggle { background: var(--neutral-700); border-color: var(--neutral-600); color: var(--neutral-400); }
.dark .whatsapp-search-toggle:hover { background: var(--neutral-600); color: #fff; }
.dark .whatsapp-search-toggle.active { background: rgba(99,102,241,0.2); color: var(--blue-400); border-color: rgba(99,102,241,0.3); }

/* WhatsApp Search Bar */
.whatsapp-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  flex-shrink: 0;
}
.whatsapp-search-bar.hidden { display: none; }
.dark .whatsapp-search-bar { background: var(--neutral-800); border-color: var(--neutral-700); }
.whatsapp-search-input-wrap { flex: 1; position: relative; }
.whatsapp-search-input {
  width: 100%;
  padding: 6px 12px 6px 32px;
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  outline: none;
  color: var(--neutral-900);
}
.whatsapp-search-input:focus { border-color: var(--ring); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.whatsapp-search-input::placeholder { color: var(--neutral-400); }
.dark .whatsapp-search-input { background: var(--neutral-700); border-color: var(--neutral-600); color: var(--neutral-100); }
.dark .whatsapp-search-input:focus { border-color: var(--ring); }
.dark .whatsapp-search-input::placeholder { color: var(--neutral-500); }
.whatsapp-search-icon-inside { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--neutral-400); pointer-events: none; }
.whatsapp-search-nav { display: flex; align-items: center; gap: 4px; }
.whatsapp-search-count { font-size: 12px; color: var(--neutral-500); white-space: nowrap; min-width: 48px; text-align: center; }
.dark .whatsapp-search-count { color: var(--neutral-400); }
.whatsapp-search-nav-btn, .whatsapp-search-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--neutral-200);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-500);
  transition: background 0.15s, color 0.15s;
}
.whatsapp-search-nav-btn:hover { background: var(--neutral-100); color: var(--neutral-900); }
.whatsapp-search-close-btn:hover { background: var(--red-100); color: var(--destructive); border-color: var(--red-300); }
.dark .whatsapp-search-nav-btn, .dark .whatsapp-search-close-btn { background: var(--neutral-700); border-color: var(--neutral-600); color: var(--neutral-400); }
.dark .whatsapp-search-nav-btn:hover { background: var(--neutral-600); color: #fff; }
.dark .whatsapp-search-close-btn:hover { background: rgba(239,68,68,0.15); color: var(--red-500); border-color: rgba(239,68,68,0.3); }

/* WhatsApp Search Highlight */
.whatsapp-search-highlight { background: #fef08a; border-radius: 2px; padding: 0 1px; }
.whatsapp-search-highlight--active { background: #f97316; color: #fff; border-radius: 2px; padding: 0 1px; }

/* DRE Drag and Drop Styles */
.dre-ghost {
  opacity: 0.4;
  background: var(--green-200) !important;
}

.dre-ghost tr {
  background: var(--green-200) !important;
}

.dre-drag {
  opacity: 1;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* DRE sortable handle */
[data-sortable-handle],
[data-subitem-handle] {
  touch-action: none;
  user-select: none;
  cursor: grab;
}

[data-sortable-handle]:active,
[data-subitem-handle]:active {
  cursor: grabbing;
}

/* Hooks Markdown - rendered approach hooks */
.hooks-markdown h1 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin: 1.25rem 0 0.5rem; }
.hooks-markdown h2 { font-size: 1.125rem; font-weight: 600; color: #1f2937; margin: 1rem 0 0.5rem; }
.hooks-markdown h3 { font-size: 1rem; font-weight: 600; color: #374151; margin: 0.75rem 0 0.375rem; }
.hooks-markdown h4 { font-size: 0.875rem; font-weight: 600; color: #374151; margin: 0.625rem 0 0.25rem; }
.hooks-markdown strong { font-weight: 600; color: #111827; }
.hooks-markdown em { font-style: italic; }
.hooks-markdown p { margin: 0.375rem 0; color: #374151; line-height: 1.6; }
.hooks-markdown ul { list-style-type: disc; padding-left: 1.25rem; margin: 0.375rem 0; }
.hooks-markdown ol { list-style-type: decimal; padding-left: 1.25rem; margin: 0.375rem 0; }
.hooks-markdown li { margin: 0.25rem 0; color: #374151; line-height: 1.6; }
.hooks-markdown blockquote { border-left: 3px solid #6366f1; padding-left: 0.75rem; margin: 0.625rem 0; color: #4b5563; font-style: italic; }
.hooks-markdown a { color: #4f46e5; text-decoration: underline; }
.hooks-markdown hr { border-color: #e5e7eb; margin: 0.75rem 0; }

@media (prefers-color-scheme: dark) {
  .hooks-markdown h1, .hooks-markdown h2 { color: #f3f4f6 !important; }
  .hooks-markdown h3, .hooks-markdown h4 { color: #e5e7eb !important; }
  .hooks-markdown strong { color: #f9fafb !important; }
  .hooks-markdown p, .hooks-markdown li { color: #d1d5db !important; }
  .hooks-markdown blockquote { border-left-color: #818cf8 !important; color: #9ca3af !important; }
  .hooks-markdown a { color: #a5b4fc !important; }
  .hooks-markdown hr { border-color: #4b5563 !important; }
}

/* Desktop Mode Styles */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Desktop window body scrollbar */
.desktop-window-body::-webkit-scrollbar {
  width: 6px;
}
.desktop-window-body::-webkit-scrollbar-track {
  background: transparent;
}
.desktop-window-body::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 3px;
}
.desktop-window-body::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}
@media (prefers-color-scheme: dark) {
  .desktop-window-body::-webkit-scrollbar-thumb {
    background: var(--neutral-600);
  }
  .desktop-window-body::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500);
  }
}

/* Comprovante de ponto: a impressora térmica.
   O cupom em si vive em shared/receipts/_paper_styles (compartilhado com o
   PDF); aqui fica só o que é da TELA — a máquina e a animação de impressão. */
.printer-led {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.8);
}

.printer-paper-window {
  padding-bottom: 28px;
}

/* Sem a flag de "acabou de imprimir", o comprovante aparece pronto. */
.printer-scene .printer-paper,
.printer-scene .printer-actions {
  opacity: 1;
  transform: none;
}

/* Chegando da batida, o papel sai da fenda em passos de impressora térmica. */
.printer-scene.is-printing .printer-paper {
  animation: receipt-print 2.8s steps(18, end) 0.35s both;
}

.printer-scene.is-printing .printer-led {
  animation: receipt-led 3.15s linear both;
}

.printer-scene.is-printing .printer-actions {
  opacity: 0;
  animation: receipt-actions 0.6s ease-out 3.05s forwards;
}

@keyframes receipt-print {
  from { transform: translateY(-104%); }
  to   { transform: translateY(0); }
}

@keyframes receipt-led {
  0%, 88% {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.9);
    opacity: 1;
  }
  4%, 12%, 20%, 28%, 36%, 44%, 52%, 60%, 68%, 76%, 84% { opacity: 0.25; }
  100% {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.8);
    opacity: 1;
  }
}

@keyframes receipt-actions {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .printer-scene.is-printing .printer-paper,
  .printer-scene.is-printing .printer-led,
  .printer-scene.is-printing .printer-actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Relógio da tela de ponto: os dois-pontos piscam a cada segundo, como num
   despertador digital — visível metade do ciclo, apagado na outra metade. */
.live-clock-colon {
  animation: clock-colon-blink 2s steps(1, end) infinite;
}

@keyframes clock-colon-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .live-clock-colon { animation: none; }
}