/* Repo-specific wiring so snippet motion sits on the existing glass chrome.
   Snippet selectors stay untouched. Combined selectors win on rest look. */

html[data-theme="dark"] {
  --glow-opacity: 0.85;
  --tabs-text-muted: rgba(255, 255, 255, 0.72);
  --tabs-text-active: #fff7ed;
  --tabs-bar-bg: color-mix(in srgb, var(--paper-2) 88%, transparent);
  --tabs-pill-bg: color-mix(in srgb, var(--paper) 92%, transparent);
  --think-base: #a8a29e;
  --think-highlight: #fed7aa;
  --shimmer-base: #a8a29e;
  --shimmer-highlight: #fed7aa;
  --tt-bg: color-mix(in srgb, var(--paper) 92%, transparent);
  --tt-fg: var(--ink);
}

html[data-theme="light"] {
  --tabs-text-muted: var(--ink-3);
  --tabs-text-active: var(--ink);
  --tabs-bar-bg: var(--paper-2);
  --tabs-pill-bg: var(--paper);
  --shimmer-base: var(--ink-3);
  --shimmer-highlight: var(--ink);
  --tt-bg: var(--paper);
  --tt-fg: var(--ink);
}

html[data-theme="dark"] .t-clear-glow {
  mix-blend-mode: screen;
}

/* Dropdowns: old chrome motion is retired so .t-dropdown owns opacity/scale. */
.crm-search-results.t-dropdown,
.crm-notification-popover.t-dropdown,
.crm-user-dropdown.t-dropdown {
  opacity: 0;
  transform: scale(var(--dropdown-pre-scale));
  pointer-events: none;
}

.crm-search-results.t-dropdown.is-open,
.crm-notification-popover.t-dropdown.is-open,
.crm-user-dropdown.t-dropdown.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Badge: keep the orange pill, let .t-badge own the slot. */
.crm-utility-icon-btn--bell .t-badge {
  top: 0.1rem;
  right: 0.35rem;
}

.crm-notif-badge.t-badge-dot {
  position: static;
  top: auto;
  right: auto;
}

.crm-inbox-count {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.crm-inbox-count .t-badge {
  position: relative;
  top: auto;
  right: auto;
}

/* Rail: layout column still opens. Panel reveal owns the card contents. */
.crm-rail__inner {
  opacity: 1;
  transform: none;
}

.crm-contacts-layout.is-open .crm-rail__inner {
  opacity: 1;
  transform: none;
}

.crm-rail__inner > * {
  animation: none;
}

.crm-rail .t-panel-slide {
  --panel-translate-y: 24px;
}

/* After reveal, let real content size the rail / KPI grid. */
.t-skel.is-revealed .t-skel-content {
  position: relative;
  inset: auto;
}

.t-skel.is-revealed .t-skel-skeleton {
  pointer-events: none;
}

.crm-kpi-skel.t-skel {
  min-height: 8.5rem;
}

.crm-kpi-skel .t-skel-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.crm-kpi-skel-bar {
  height: 5.5rem;
  border-radius: var(--radius-lg, 10px);
  background: var(--paper-2);
}

.crm-rail-skel.t-skel {
  min-height: 16rem;
}

/* Contacts list <-> detail: the active page stays in flow so the
   slider sizes to content on first paint. The other page stays
   absolute for the slide. JS can still pin height during a swap. */
.crm-contacts-pages.t-page-slide {
  min-height: 0;
  min-width: 0;
  overflow-x: clip;
}

.crm-contacts-pages.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
.crm-contacts-pages.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  position: relative;
  inset: auto;
}

.crm-contacts-page-body {
  min-height: 100%;
}

/* Segments keep the existing chip bar. The pill slides underneath. */
.crm-segment.t-tabs {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: 7px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  --tabs-bar-bg: transparent;
  --tabs-pill-bg: var(--paper);
}

.crm-segment.t-tabs .crm-segment__item.t-tab {
  height: 26px;
  padding: 0 11px;
  border-radius: 5px;
  color: var(--ink-2);
  background: transparent;
  box-shadow: none;
}

.crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item,
.crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item.t-tab,
.crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item.t-tab[aria-selected="true"],
.crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item.t-tab[aria-pressed="true"],
.crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item.t-tab[aria-current="page"],
.crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item.t-tab.is-active,
html.am-skin .crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item.is-active,
html.am-skin .crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item[aria-pressed="true"],
html.am-skin .crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item[aria-selected="true"],
html.am-skin[data-theme="dark"] .crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item.is-active,
html.am-skin[data-theme="dark"] .crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item[aria-pressed="true"],
html.am-skin[data-theme="dark"] .crm-segment.t-tabs:has(.t-tabs-pill) .crm-segment__item[aria-selected="true"] {
  background: transparent !important;
  box-shadow: none !important;
}

.crm-segment.t-tabs .crm-segment__item.t-tab[aria-selected="true"],
.crm-segment.t-tabs .crm-segment__item.t-tab.is-active {
  color: var(--ink);
}

.crm-segment.t-tabs .t-tabs-pill {
  top: 2px;
  height: 26px;
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04), 0 0 0 1px var(--hairline);
}

html.am-skin .crm-segment.t-tabs .t-tabs-pill {
  border-radius: 1000px;
}

[data-theme="dark"] .crm-segment.t-tabs {
  background: var(--paper);
}

[data-theme="dark"] .crm-segment.t-tabs .t-tabs-pill {
  background: var(--paper-3);
  box-shadow: 0 0 0 1px var(--hairline-strong);
}

.crm-activity-tabs.t-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  --tabs-bar-bg: transparent;
  --tabs-pill-bg: var(--ink);
  --tabs-text-muted: var(--ink-2);
  --tabs-text-active: var(--paper);
}

.crm-activity-tabs .t-tab.crm-chip {
  height: auto;
  padding: 4px 10px;
  border-radius: 999px;
}

.crm-activity-tabs.t-tabs:has(.t-tabs-pill[data-ready]) .crm-chip.is-active,
.crm-activity-tabs.t-tabs:has(.t-tabs-pill[data-ready]) .t-tab.is-active,
.crm-activity-tabs.t-tabs:has(.t-tabs-pill[data-ready]) .t-tab[aria-selected="true"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.crm-activity-tabs .t-tabs-pill {
  top: 0;
  height: auto;
  border-radius: 999px;
  background: var(--ink);
}

/* Toasts: snippet owns motion. Layout stays on .crm-toast. */
.crm-toast.t-toast {
  opacity: 0;
}

.crm-toast.t-toast.is-open {
  opacity: 1;
}

/* Clear layers stay off the native placeholder and focus ring
   unless a clear is running. Isolate so mix-blend cannot tint
   the settings chip or other header chrome. */
.crm-utility-search.t-clear,
.crm-toolbar__search.t-clear {
  overflow: visible;
  isolation: isolate;
}

.crm-utility-search.t-clear .t-clear-mirror,
.crm-utility-search.t-clear .t-clear-placeholder,
.crm-utility-search.t-clear .t-clear-glow,
.crm-toolbar__search.t-clear .t-clear-mirror,
.crm-toolbar__search.t-clear .t-clear-placeholder,
.crm-toolbar__search.t-clear .t-clear-glow {
  opacity: 0;
  visibility: hidden;
  filter: none;
  box-shadow: none;
  pointer-events: none;
}

.crm-utility-search.t-clear:not(.is-clearing) input,
.crm-toolbar__search.t-clear:not(.is-clearing) input,
.crm-toolbar__search.t-clear:not(.is-clearing) .crm-search {
  -webkit-text-fill-color: inherit;
}

.crm-utility-search.t-clear.is-clearing .t-clear-mirror,
.crm-utility-search.t-clear.is-clearing .t-clear-placeholder,
.crm-utility-search.t-clear.is-clearing .t-clear-glow,
.crm-toolbar__search.t-clear.is-clearing .t-clear-mirror,
.crm-toolbar__search.t-clear.is-clearing .t-clear-placeholder,
.crm-toolbar__search.t-clear.is-clearing .t-clear-glow {
  visibility: visible;
}

.crm-utility-search.t-clear.has-value .t-clear-placeholder,
.crm-toolbar__search.t-clear.has-value .t-clear-placeholder,
.crm-utility-search.t-clear:not(.is-clearing) .t-clear-glow,
.crm-toolbar__search.t-clear:not(.is-clearing) .t-clear-glow {
  opacity: 0;
  visibility: hidden;
  background: none;
  filter: none;
}

.crm-utility-search.t-clear .t-clear-glow,
.crm-toolbar__search.t-clear .t-clear-glow {
  border-radius: 1000px;
  mix-blend-mode: multiply;
}

html.am-skin .crm-utility-search.t-clear input:focus,
html.am-skin .crm-toolbar__search.t-clear .crm-search:focus,
html.am-skin main#mainContent .crm-toolbar__search.t-clear input:focus,
html.am-skin main#mainContent .crm-toolbar__search.t-clear .crm-search:focus,
html.am-skin .content-wrapper .crm-toolbar__search.t-clear input:focus,
html.am-skin .content-wrapper .crm-toolbar__search.t-clear .crm-search:focus,
.crm-utility-search.t-clear input:focus,
.crm-toolbar__search.t-clear .crm-search:focus {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.28) !important;
}

html.am-skin .crm-theme-btn,
html.am-skin .crm-utility-btn,
html.am-skin .crm-utility-icon-btn,
.crm-theme-btn,
.crm-utility-btn,
.crm-utility-icon-btn {
  filter: none;
}

/* Clear button sits on the existing search fields. */
.t-clear-btn {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  z-index: 4;
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-4, #94a3b8);
  cursor: pointer;
  transform: translateY(-50%);
}

.t-clear.has-value .t-clear-btn,
.t-clear.is-clearing .t-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crm-utility-search.t-clear .t-clear-mirror,
.crm-utility-search.t-clear .t-clear-placeholder {
  padding: 0 2.75rem 0 2.25rem;
  font-size: 0.8125rem;
  color: #0f172a;
}

html[data-theme="dark"] .crm-utility-search.t-clear .t-clear-mirror,
html[data-theme="dark"] .crm-utility-search.t-clear .t-clear-placeholder {
  color: var(--ink);
}

.crm-toolbar__search.t-clear .t-clear-mirror,
.crm-toolbar__search.t-clear .t-clear-placeholder {
  padding: 0 2rem 0 11px;
  font-size: 12.5px;
  color: var(--ink);
}

.t-clear-placeholder {
  color: var(--ink-4, #94a3b8);
}

/* Checkbox: existing 16px box, orange/ink fill, snippet draws the stroke. */
.t-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong, #cbd5e1);
  border-radius: 4px;
  background: var(--paper, #fff);
  cursor: pointer;
  appearance: none;
}

.t-check:hover {
  border-color: var(--ink-4, #94a3b8);
}

.t-check[aria-checked="true"] {
  background: var(--accent, #f97316);
  border-color: var(--accent, #f97316);
}

/* DaisyUI Preflight zeroes <button> backgrounds. Manual checklist rows
   are buttons, so a completed row kept strikethrough and the date while
   the box stayed an empty ring. Auto rows were <span> and still filled.
   Element+class beats that reset the same way button.crm-btn-* does. */
button.t-check {
  background: var(--paper, #fff);
  border: 1px solid var(--hairline-strong, #cbd5e1);
}
button.t-check[aria-checked="true"] {
  background: var(--accent, #f97316);
  border-color: var(--accent, #f97316);
}
.t-check[aria-disabled="true"] {
  cursor: default;
}

.t-check svg {
  width: 10px;
  height: 10px;
  overflow: visible;
}

.t-check svg path {
  fill: none;
  stroke: var(--paper, #fff);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.t-check-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.t-check-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#transaction-checklist .t-check-wrap > .t-success-check {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  pointer-events: none;
}

.t-input.is-error {
  border-color: var(--danger, #ef4444);
}

.t-icon-swap {
  width: 1em;
  height: 1em;
  place-items: center;
}

.crm-theme-btn .t-icon-swap {
  display: grid;
  place-items: center;
  place-content: center;
  width: 0.9rem;
  height: 0.9rem;
  line-height: 0;
}

.crm-sidebar-toggle .t-icon-swap {
  width: 0.9rem;
  height: 0.9rem;
}

.bob-typing .t-think,
.crm-section-kicker .t-think,
.crm-magic-banner__copy .t-think {
  text-align: left;
}

/* Shimmer (15) owns the wait-line sweep when both classes sit on one node. */
.t-think-text.t-shimmer::before {
  animation-name: t-shimmer;
  animation-duration: var(--shimmer-dur);
  animation-timing-function: var(--shimmer-ease);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    var(--shimmer-highlight) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: var(--shimmer-band) 100%;
}

.crm-list-skel.t-skel {
  min-height: 12rem;
}

.crm-list-skel .t-skel-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crm-list-skel-row {
  height: 2.5rem;
  border-radius: var(--radius, 8px);
  background: var(--paper-2);
}

.crm-briefing-skel.t-skel,
.crm-panel-skel.t-skel {
  min-height: 10rem;
}

.crm-contacts-layout.t-resize,
.crm-contacts-layout.t-resize.is-open {
  transition: grid-template-columns var(--resize-dur) var(--resize-ease);
}

.crm-toggle__track.t-toggle {
  --toggle-travel: 15px;
}

.crm-toggle .t-toggle-thumb {
  transition: background 140ms ease, border-color 140ms ease;
}

.crm-toggle input:checked + .crm-toggle__track.t-toggle .crm-toggle__thumb,
.crm-toggle input:checked + .crm-toggle__track .t-toggle-thumb {
  transform: none;
}

.t-success-check {
  width: 1.1em;
  height: 1.1em;
  color: var(--accent, #f97316);
  vertical-align: middle;
}

.t-success-check svg {
  width: 100%;
  height: 100%;
}

.t-success-check[data-state="out"] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .t-success-check[data-state="out"] { opacity: 0 !important; }
  .t-success-check[data-state="in"] { opacity: 1 !important; }
}

.crm-btn .t-success-check {
  margin-left: 0.35rem;
}

.t-confetti-overlay {
  --pv1o: 120;
  --pv15: 1300;
  --pv22: 4px;
  --pv23: 16;
  --pv1b: 0.6;
  --pv20: 600ms;
  --pv1z: 300ms;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 350;
}

.t-confetti-overlay canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.t-confetti-overlay:not(.is-running) {
  visibility: hidden;
}

#sidebar-tooltip.t-tt {
  position: fixed;
  bottom: auto;
  left: auto;
  transform: translateY(-50%) scale(var(--tt-scale));
  transform-origin: 0 50%;
  padding: 0.4rem 0.7rem;
  border-radius: 0.375rem;
  background: #1e293b;
  color: #f8fafc;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px 0 rgba(0, 0, 0, 0.05),
    0 4px 42px 0 rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--tt-out-dur) var(--tt-out-ease),
    transform var(--tt-out-dur) var(--tt-out-ease);
}

#sidebar-tooltip.t-tt.is-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  transition-duration: var(--tt-in-dur);
  transition-timing-function: var(--tt-in-ease);
  transition-delay: var(--tt-delay);
}

html.sidebar-expanded #sidebar-tooltip {
  display: none;
}

.crm-theme-btn.t-tt-wrap,
.t-tt-wrap .crm-theme-btn,
.t-tt-wrap .crm-btn {
  vertical-align: middle;
}

/* Topbar icons sit on the viewport edge. Official tooltip opens upward,
   which paints off-screen. Drop those below the trigger. Motion tokens stay. */
.crm-topbar .t-tt {
  bottom: auto;
  top: calc(100% + 8px);
  transform-origin: 50% 0;
  z-index: 40;
}

.crm-topbar .t-tt-wrap:hover .t-tt,
.crm-topbar .t-tt-trigger:focus-visible + .t-tt {
  transform: translate(-50%, 0) scale(1);
}

/* Row menus: keep glass look, let .t-dropdown own opacity/scale. */
.crm-row-menu__panel.t-dropdown {
  display: flex;
  opacity: 0;
  transform: scale(var(--dropdown-pre-scale));
  pointer-events: none;
}

.crm-row-menu__panel.t-dropdown.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Groups customize already has .crm-modal. Retire the homemade keyframe. */
.crm-modal__panel.t-modal {
  animation: none;
}

/* In-page tab panels: official reveal, short travel. */
.seller-tab-panel.t-panel-slide,
.tab-content.t-panel-slide {
  --panel-translate-y: 16px;
}

.tab-content.t-panel-slide.active {
  display: block;
}

/* Offer workspace + client email are sheets. */
.offer-command__panel.t-panel-slide,
#offerClientEmailModal .t-panel-slide {
  --panel-translate-y: 24px;
}

@media (min-width: 768px) {
  .offer-command__panel.t-panel-slide {
    transform: translateX(-50%) translateY(var(--panel-translate-y));
  }
  .offer-command__panel.t-panel-slide[data-open="true"] {
    transform: translateX(-50%) translateY(0);
  }
}

/* Centered shells keep their existing translate and add official scale. */
@media (min-width: 768px) {
  [id$="Modal"] > .t-modal,
  .modal-shell .panel.t-modal,
  .am-modal__panel.t-modal {
    transform: translate(-50%, -50%) scale(var(--modal-scale));
  }
  [id$="Modal"] > .t-modal.is-open,
  .modal-shell .panel.t-modal.is-open,
  .am-modal__panel.t-modal.is-open {
    transform: translate(-50%, -50%) scale(1);
  }
  [id$="Modal"] > .t-modal.is-closing,
  .modal-shell .panel.t-modal.is-closing,
  .am-modal__panel.t-modal.is-closing {
    transform: translate(-50%, -50%) scale(var(--modal-scale-close));
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-row-menu__panel.t-dropdown,
  .crm-modal__panel.t-modal,
  .seller-tab-panel.t-panel-slide,
  .tab-content.t-panel-slide,
  .offer-command__panel.t-panel-slide,
  #offerClientEmailModal .t-panel-slide,
  .am-modal__panel.t-modal,
  .modal-shell .panel.t-modal {
    transition: none !important;
    animation: none !important;
  }
}