/* ===== Deeplica Demo Layer — demo.css ===== */
/* All styles for the interactive demo. Sits on top of the existing landing page. */

:root {
  /* Brand */
  --dp-primary: #7B3FA0;
  --dp-primary-rgb: 123, 63, 160;
  --dp-deep: #5A2D78;
  --dp-teal: #5BBFC0;
  --dp-teal-rgb: 91, 191, 192;
  --dp-warm: #D4976A;
  --dp-muted: #9B6CB8;

  /* Panel text */
  --dp-text-heading: #1A1A1A;
  --dp-text-body: #333333;
  --dp-text-muted: #999999;
  --dp-text-light: #AAAAAA;
  --dp-text-faint: #BBBBBB;

  /* Glass surfaces */
  --dp-glass-bg: rgba(255, 255, 255, 0.72);
  --dp-glass-blur: 32px;
  --dp-glass-border: rgba(0, 0, 0, 0.04);
  --dp-glass-orb-bg: rgba(255, 255, 255, 0.85);
  --dp-glass-notif-bg: rgba(255, 255, 255, 0.85);

  /* Badges */
  --dp-badge-done-bg: #F0FDF4;
  --dp-badge-done-text: #16A34A;
  --dp-badge-done-border: #BBF7D0;
  --dp-badge-active-bg: #FAF5FF;
  --dp-badge-active-text: #7C3AED;
  --dp-badge-active-border: #E9D5FF;
  --dp-badge-pending-bg: #FFFBEB;
  --dp-badge-pending-text: #D97706;
  --dp-badge-pending-border: #FDE68A;

  /* Chat bubbles */
  --dp-bubble-user-bg: rgba(123, 63, 160, 0.08);
  --dp-bubble-user-text: rgba(90, 45, 120, 0.7);
  --dp-bubble-deeplica-bg: rgba(91, 191, 192, 0.08);
  --dp-bubble-deeplica-text: rgba(50, 90, 90, 0.7);

  /* ION bar */
  --dp-ion-track: #E5E7EB;
  --dp-ion-fill: linear-gradient(90deg, #5BBFC0, #7B3FA0);

  /* Timing */
  --dp-morph-duration: 500ms;
  --dp-morph-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dp-breathe-duration: 4000ms;
  --dp-glow-duration: 1500ms;
  --dp-panel-slide-duration: 300ms;
  --dp-notif-slide-duration: 300ms;
  --dp-notif-fade-duration: 1000ms;
  --dp-text-timeout: 5000ms;
  --dp-content-fade-delay: 300ms;
  --dp-text-swallow-duration: 300ms;

  /* Orb 3D sphere look */
  --dp-orb-gradient: radial-gradient(ellipse at 30% 30%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(230, 220, 245, 0.4) 25%,
    rgba(212, 160, 192, 0.3) 50%,
    rgba(200, 184, 232, 0.2) 70%,
    rgba(255, 255, 255, 0.1) 100%);
  --dp-orb-shadow: 0 8px 60px rgba(160, 120, 200, 0.15),
    0 2px 20px rgba(212, 160, 192, 0.1),
    inset 0 -20px 40px rgba(212, 160, 192, 0.15),
    inset 0 20px 40px rgba(255, 255, 255, 0.6);
  --dp-orb-rect-tint: radial-gradient(ellipse at 30% 30%,
    rgba(220, 245, 245, 0.6) 0%,
    rgba(200, 235, 235, 0.25) 40%,
    rgba(255, 255, 255, 0.85) 100%);
  --dp-orb-rect-tint-user: radial-gradient(ellipse at 30% 30%,
    rgba(235, 225, 245, 0.5) 0%,
    rgba(225, 215, 240, 0.2) 40%,
    rgba(255, 255, 255, 0.88) 100%);

  /* Sizes */
  --dp-orb-size: clamp(250px, 30vw, 380px);
  --dp-orb-size-mobile: clamp(180px, 50vw, 250px);
  --dp-orb-rect-width: 576px;
  --dp-orb-rect-min-height: 144px;
  --dp-orb-rect-radius: 24px;
  --dp-orb-rect-radius-mobile: 20px;
  --dp-panel-width: 320px;
  --dp-panel-width-tablet: 280px;
  --dp-notif-width: 330px;
}


/* ==================== ORB CONTAINER OVERRIDE ==================== */
/* Keep the container's original size so the page layout never shifts.
   The demo orb is positioned absolutely on top of it. */

.orb-container.dp-container-active {
  position: relative;
  overflow: visible !important;
  margin-bottom: 8px !important; /* Bring button closer to orb */
}


/* ==================== ORB DEMO WRAPPER ==================== */

.dp-orb-wrapper {
  /* Absolute overlay — never shifts the page layout */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: none; /* let clicks pass through except on children */
}

.dp-orb-wrapper > * {
  pointer-events: auto;
}


/* Container for mode choice & suggestions — placed below orb-container in DOM flow */
/* dp-below-orb no longer used — suggestions are inside orb-wrapper */


/* ==================== THE ORB ==================== */

.dp-orb {
  position: relative;
  width: var(--dp-orb-size);
  height: var(--dp-orb-size);
  border-radius: 50%;
  cursor: default; /* orb itself is NOT clickable */
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* MUST be visible so morph transition isn't clipped */
  pointer-events: none; /* orb is not clickable — only the button is */

  /* 3D sphere look matching the original site orb */
  background: var(--dp-orb-gradient);
  border: 1px solid transparent;
  box-shadow: var(--dp-orb-shadow);

  /* Smooth morph: circle ↔ rectangle on the SAME element */
  transition: width var(--dp-morph-duration) var(--dp-morph-easing),
              height var(--dp-morph-duration) var(--dp-morph-easing),
              min-height var(--dp-morph-duration) var(--dp-morph-easing),
              border-radius var(--dp-morph-duration) var(--dp-morph-easing),
              border-color var(--dp-morph-duration) var(--dp-morph-easing),
              background var(--dp-morph-duration) var(--dp-morph-easing),
              box-shadow var(--dp-morph-duration) var(--dp-morph-easing),
              backdrop-filter var(--dp-morph-duration) var(--dp-morph-easing),
              -webkit-backdrop-filter var(--dp-morph-duration) var(--dp-morph-easing),
              opacity var(--dp-morph-duration) var(--dp-morph-easing);
}

/* 3D sphere highlight (top-left specular) */
.dp-orb::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 18%;
  width: 55%;
  height: 35%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.8) 0%, transparent 70%);
  border-radius: 50%;
  transform: rotate(-15deg);
  pointer-events: none;
  transition: opacity var(--dp-morph-duration) var(--dp-morph-easing);
}

/* 3D sphere secondary highlight (bottom-right) */
.dp-orb::after {
  content: '';
  position: absolute;
  bottom: 15%;
  right: 15%;
  width: 40%;
  height: 30%;
  background: radial-gradient(ellipse, rgba(200, 160, 210, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity var(--dp-morph-duration) var(--dp-morph-easing);
}

/* --- ORB CONTENT (text inside rectangle) --- */

.dp-orb__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  opacity: 0;
  transition: opacity 250ms ease-out;
  pointer-events: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--dp-text-body);
  line-height: 1.5;
  text-align: center;
  overflow: hidden;
  border-radius: inherit; /* clip content to orb shape during morph */
}

.dp-orb__content--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Hidden input for text mode */
.dp-orb__input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  font-size: 16px; /* prevent iOS zoom */
}

.dp-orb--listening .dp-orb__input,
.dp-orb--text-mode .dp-orb__input {
  pointer-events: auto;
}

/* Placeholder text */
.dp-orb__placeholder {
  color: var(--dp-text-muted);
  font-style: normal;
  font-weight: 300;
}

/* Displayed text (transcription or typed) */
.dp-orb__text {
  word-break: break-word;
  text-align: center;
  width: 100%;
}

/* Send hint */
.dp-orb__send-hint {
  position: absolute;
  bottom: 10px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 400;
  color: var(--dp-text-muted);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.dp-orb__send-hint--visible {
  opacity: 1;
}

.dp-orb__send-hint svg {
  width: 12px;
  height: 12px;
}

/* Typewriter cursor for speaking */
.dp-orb__typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--dp-teal);
  margin-left: 2px;
  animation: dp-blink 800ms ease-in-out infinite;
  vertical-align: text-bottom;
}

/* Purple cursor when showing user description in listening rectangle */
.dp-orb--listening .dp-orb__typewriter-cursor {
  background: var(--dp-primary);
}

/* Blinking cursor for text input mode */
.dp-orb__text-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--dp-primary);
  margin-left: 1px;
  animation: dp-blink 600ms step-end infinite;
  vertical-align: text-bottom;
}

@keyframes dp-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* ==================== ORB STATE: IDLE ==================== */

.dp-orb--idle {
  width: var(--dp-orb-size);
  height: var(--dp-orb-size);
  min-height: 0; /* explicit for smooth transition to rect min-height */
  border-radius: 50%;
  background: var(--dp-orb-gradient);
  border-color: transparent;
  box-shadow: var(--dp-orb-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: dp-breathe var(--dp-breathe-duration) ease-in-out infinite;
}

@keyframes dp-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* Show 3D highlights in idle */
.dp-orb--idle::before,
.dp-orb--idle::after {
  opacity: 1;
}

.dp-orb--idle .dp-orb__content {
  opacity: 0;
  pointer-events: none;
}


/* ==================== ORB STATE: LISTENING ==================== */

.dp-orb--listening {
  width: var(--dp-orb-rect-width);
  height: var(--dp-orb-rect-min-height);
  min-height: var(--dp-orb-rect-min-height);
  border-radius: var(--dp-orb-rect-radius);
  animation: none;
  background: var(--dp-orb-rect-tint-user);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--dp-primary-rgb), 0.12);
  box-shadow: 0 8px 40px rgba(var(--dp-primary-rgb), 0.06),
              inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  pointer-events: auto;
}

/* Hide 3D sphere highlights in rect mode */
.dp-orb--listening::before,
.dp-orb--listening::after {
  opacity: 0;
}

.dp-orb--listening .dp-orb__content {
  opacity: 1;
  pointer-events: auto;
  transition-delay: var(--dp-content-fade-delay);
}


/* ==================== ORB STATE: PROCESSING ==================== */

.dp-orb--processing {
  width: var(--dp-orb-size);
  height: var(--dp-orb-size);
  min-height: 0;
  border-radius: 50%;
  background: var(--dp-orb-gradient);
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--dp-orb-shadow);
  animation: dp-processing-pulse var(--dp-glow-duration) ease-in-out infinite;
}

.dp-orb--processing::before,
.dp-orb--processing::after {
  opacity: 1;
}

@keyframes dp-processing-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 60px rgba(160, 120, 200, 0.15),
                0 2px 20px rgba(212, 160, 192, 0.1),
                inset 0 -20px 40px rgba(212, 160, 192, 0.15),
                inset 0 20px 40px rgba(255, 255, 255, 0.6),
                0 0 0 0 rgba(var(--dp-teal-rgb), 0);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 8px 60px rgba(var(--dp-teal-rgb), 0.25),
                0 2px 30px rgba(var(--dp-primary-rgb), 0.15),
                inset 0 -20px 40px rgba(var(--dp-teal-rgb), 0.2),
                inset 0 20px 40px rgba(255, 255, 255, 0.6),
                0 0 40px 8px rgba(var(--dp-teal-rgb), 0.12);
  }
}

.dp-orb--processing .dp-orb__content {
  opacity: 0;
  pointer-events: none;
}


/* ==================== ORB STATE: SPEAKING ==================== */

.dp-orb--speaking {
  width: var(--dp-orb-rect-width);
  height: var(--dp-orb-rect-min-height);
  min-height: var(--dp-orb-rect-min-height);
  border-radius: var(--dp-orb-rect-radius);
  animation: none;
  background: var(--dp-orb-rect-tint);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--dp-teal-rgb), 0.15);
  box-shadow: 0 8px 40px rgba(var(--dp-teal-rgb), 0.08),
              inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  pointer-events: auto;
}

.dp-orb--speaking::before,
.dp-orb--speaking::after {
  opacity: 0;
}

.dp-orb--speaking .dp-orb__content {
  opacity: 1;
  pointer-events: auto;
  transition-delay: var(--dp-content-fade-delay);
  color: var(--dp-deep);
}


/* ==================== ORB STATE: EXHAUSTED ==================== */

.dp-orb--exhausted {
  width: var(--dp-orb-size);
  height: var(--dp-orb-size);
  min-height: 0;
  border-radius: 50%;
  background: var(--dp-orb-gradient);
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--dp-orb-shadow);
  animation: none;
  opacity: 0.5;
  cursor: default;
}

.dp-orb--exhausted::before,
.dp-orb--exhausted::after {
  opacity: 1;
}


/* ==================== TEXT SWALLOW ANIMATION ==================== */

.dp-orb__content--swallowing .dp-orb__text {
  animation: dp-text-swallow var(--dp-text-swallow-duration) ease-in forwards;
}

@keyframes dp-text-swallow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.3);
    opacity: 0;
  }
}


/* ==================== TEXT MODE TIMEOUT BORDER DIM ==================== */

.dp-orb--text-mode {
  width: var(--dp-orb-rect-width);
  height: var(--dp-orb-rect-min-height);
  min-height: var(--dp-orb-rect-min-height);
  border-radius: var(--dp-orb-rect-radius);
  animation: none;
  background: var(--dp-orb-rect-tint-user);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--dp-primary-rgb), 0.12);
  box-shadow: 0 8px 40px rgba(var(--dp-primary-rgb), 0.06),
              inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  pointer-events: auto;
}

.dp-orb--text-mode::before,
.dp-orb--text-mode::after {
  opacity: 0;
}

.dp-orb--text-mode .dp-orb__content {
  opacity: 1;
  pointer-events: auto;
  transition-delay: var(--dp-content-fade-delay);
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.dp-orb--text-mode.dp-orb--dimming {
  animation: dp-border-dim var(--dp-text-timeout) linear forwards;
}

@keyframes dp-border-dim {
  0% {
    border-color: rgba(var(--dp-primary-rgb), 0.15);
    opacity: 1;
  }
  100% {
    border-color: rgba(var(--dp-primary-rgb), 0.03);
    opacity: 0.7;
  }
}


/* ==================== ORB HINT LABEL ==================== */

.dp-orb-hint {
  margin-top: 16px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--dp-text-muted);
  letter-spacing: 1px;
  text-align: center;
  transition: opacity 300ms ease-out;
  user-select: none;
}

.dp-orb-hint--hidden {
  opacity: 0;
  pointer-events: none;
}

.dp-orb-hint--processing {
  color: var(--dp-muted);
  text-transform: lowercase;
  letter-spacing: 2px;
  font-size: 10px;
}


/* ==================== SUGGESTION PILLS ==================== */

.dp-suggestions {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: nowrap;
  justify-content: center;
  opacity: 0;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  pointer-events: none;
  width: max-content;
  max-width: var(--dp-orb-rect-width);
  z-index: 12;
}

.dp-suggestions--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Only show suggestions when orb is in rectangle state (speaking/text-mode/listening) */
.dp-orb--idle ~ .dp-suggestions,
.dp-orb--processing ~ .dp-suggestions,
.dp-orb--exhausted ~ .dp-suggestions {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Styled like the "Early Access Open" badge */
.dp-suggestion-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dp-muted);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(155, 108, 184, 0.22);
  padding: 7px 16px;
  border-radius: 50px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color 200ms ease-out,
              box-shadow 200ms ease-out,
              background 200ms ease-out;
}

.dp-suggestion-pill:hover {
  border-color: rgba(155, 108, 184, 0.4);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 12px rgba(var(--dp-primary-rgb), 0.08);
}

.dp-suggestion-pill:active {
  background: rgba(155, 108, 184, 0.08);
}

/* Async pills — warm/amber tint to distinguish from sync */
.dp-suggestion-pill--async {
  color: var(--dp-warm);
  border-color: rgba(212, 151, 106, 0.25);
}

.dp-suggestion-pill--async:hover {
  border-color: rgba(212, 151, 106, 0.45);
  box-shadow: 0 2px 12px rgba(212, 151, 106, 0.1);
}

.dp-suggestion-pill--async:active {
  background: rgba(212, 151, 106, 0.08);
}


/* ==================== TRY DEEPLICA BUTTON ==================== */

.dp-try-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  border-radius: 30px;
  background: #ffffff;
  color: var(--dp-primary);
  font-family: 'Noto Rashi Hebrew', 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: 1px solid rgba(var(--dp-primary-rgb), 0.15);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(var(--dp-primary-rgb), 0.06);
  transition: transform 200ms ease-out,
              border-color 200ms ease-out,
              box-shadow 200ms ease-out;
  margin-top: 32px;
  user-select: none;
  -webkit-user-select: none;
}

/* Hint text below button — always reserves space to prevent layout jump */
.dp-btn-hint {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--dp-text-muted);
  margin-top: 6px;
  text-align: center;
  min-height: 18px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms ease-out, visibility 0ms 300ms;
}

.dp-btn-hint--visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 300ms ease-out, visibility 0ms 0ms;
}

.dp-btn-hint a {
  color: var(--dp-muted);
  text-decoration: underline;
  cursor: pointer;
}

.dp-try-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 200ms ease-out;
}

.dp-try-btn--mic-on svg {
  opacity: 1;
  color: var(--dp-teal);
}

/* Hover state: purple border + slight lift */
.dp-try-btn:hover {
  transform: translateY(-2px);
  border-color: var(--dp-primary);
  box-shadow: 0 4px 20px rgba(var(--dp-primary-rgb), 0.12);
}

/* Active/pressed state: pushed down */
.dp-try-btn:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: 0 1px 4px rgba(var(--dp-primary-rgb), 0.08);
  border-color: var(--dp-primary);
}

/* Long-press visual (added by JS during hold) */
.dp-try-btn--pressing {
  transform: scale(0.96) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(var(--dp-primary-rgb), 0.04) !important;
}

/* Disabled state (during processing) */
.dp-try-btn--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* Fade out / fade in transitions for activation flow */
.dp-try-btn--fading-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-out;
}

.dp-try-btn--hidden {
  opacity: 0;
  pointer-events: none;
}


/* ==================== COUNTDOWN TIMER (text mode) ==================== */

.dp-countdown {
  position: absolute;
  bottom: 10px;
  left: 16px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--dp-text-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.dp-countdown--visible {
  opacity: 1;
}


/* ==================== MOBILE RESPONSIVE ==================== */

@media (max-width: 767px) {
  .dp-orb--idle {
    width: var(--dp-orb-size-mobile);
    height: var(--dp-orb-size-mobile);
  }

  .dp-orb--listening,
  .dp-orb--speaking,
  .dp-orb--text-mode {
    width: calc(100vw - 32px);
    max-width: 456px;
    border-radius: var(--dp-orb-rect-radius-mobile);
  }

  .dp-orb__content {
    padding: 18px 20px;
    font-size: 14px;
  }

  .dp-orb--processing,
  .dp-orb--exhausted {
    width: var(--dp-orb-size-mobile);
    height: var(--dp-orb-size-mobile);
  }

  .dp-suggestions {
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
    margin-top: 14px;
  }

  .dp-suggestion-pill {
    font-size: 10px;
    padding: 6px 12px;
    letter-spacing: 1.5px;
  }

  .dp-try-btn {
    padding: 12px 28px;
    font-size: 15px;
    margin-top: 28px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .dp-orb--listening,
  .dp-orb--speaking,
  .dp-orb--text-mode {
    width: 420px;
  }
}


/* ==================== GLASS PANEL ==================== */

.dp-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--dp-panel-width);
  height: 100vh;
  background: var(--dp-glass-bg);
  backdrop-filter: blur(var(--dp-glass-blur));
  -webkit-backdrop-filter: blur(var(--dp-glass-blur));
  border-right: 1px solid var(--dp-glass-border);
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.02);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--dp-panel-slide-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

.dp-panel--open {
  transform: translateX(0);
}

/* --- Panel Overlay --- */

.dp-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dp-panel-slide-duration) ease-out;
}

.dp-panel-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- Panel Ticker (closed indicator) --- */

.dp-panel-ticker {
  position: fixed;
  left: 0;
  top: 90px; /* 20px below the main nav bar */
  width: 32px;
  height: 48px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--dp-primary-rgb), 0.12);
  border-left: 2px solid rgba(var(--dp-primary-rgb), 0.3);
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 200ms ease-out, opacity var(--dp-panel-slide-duration) ease-out,
              box-shadow 300ms ease-out, border-color 300ms ease-out;
  box-shadow: 2px 2px 12px rgba(var(--dp-primary-rgb), 0.06);
}

.dp-panel-ticker:hover {
  width: 38px;
  border-color: rgba(var(--dp-primary-rgb), 0.25);
  box-shadow: 2px 2px 16px rgba(var(--dp-primary-rgb), 0.12);
}

.dp-panel-ticker__icon {
  display: flex;
  width: 14px;
  height: 14px;
  color: var(--dp-primary);
  opacity: 0.7;
}

/* Turquoise glow blink when processing starts */
.dp-panel-ticker--blink {
  animation: dp-ticker-blink 500ms ease-in-out 3;
}

@keyframes dp-ticker-blink {
  0%, 100% {
    box-shadow: 2px 2px 12px rgba(var(--dp-primary-rgb), 0.06);
    border-color: rgba(var(--dp-primary-rgb), 0.12);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--dp-teal-rgb), 0.4),
                2px 2px 12px rgba(var(--dp-teal-rgb), 0.15);
    border-color: var(--dp-teal);
  }
}

.dp-panel-ticker__icon svg {
  width: 100%;
  height: 100%;
}

.dp-panel-ticker--hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- Panel Logo --- */

.dp-panel__logo {
  padding: 18px 16px 0;
  font-family: 'Noto Rashi Hebrew', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--dp-primary);
  letter-spacing: normal;
  flex-shrink: 0;
}

/* --- Panel Header --- */

.dp-panel__header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.dp-panel__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--dp-text-heading);
  letter-spacing: -0.01em;
}

.dp-panel__subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--dp-text-muted);
  margin-top: 2px;
}

/* --- Interactions List (scrollable) --- */

.dp-panel__interactions {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

.dp-panel__interactions::-webkit-scrollbar {
  width: 4px;
}

.dp-panel__interactions::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

/* --- Interaction Card --- */

.dp-interaction-card {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  transition: box-shadow 150ms ease-out;
}

.dp-interaction-card:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.dp-interaction-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}

.dp-interaction-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dp-interaction-card__dot--done {
  background: var(--dp-teal);
}

.dp-interaction-card__dot--active {
  background: var(--dp-primary);
  box-shadow: 0 0 6px rgba(var(--dp-primary-rgb), 0.4);
}

.dp-interaction-card__dot--pending {
  background: var(--dp-warm);
}

.dp-interaction-card__name {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--dp-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-interaction-card__cost {
  font-size: 14px;
  font-weight: 400;
  color: var(--dp-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Pending label for async interactions in progress */
.dp-interaction-card__cost--pending {
  color: var(--dp-warm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dp-interaction-card__chevron {
  display: flex;
  width: 12px;
  height: 12px;
  color: var(--dp-text-muted);
  flex-shrink: 0;
  transition: transform 150ms ease-out;
}

.dp-interaction-card__chevron svg {
  width: 100%;
  height: 100%;
}

/* --- Interaction Card Body (expanded) --- */

.dp-interaction-card__body {
  padding: 0 16px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.dp-interaction-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 8px;
}

/* --- Badges (shadcn style) --- */

.dp-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid;
}

.dp-badge--done {
  background: var(--dp-badge-done-bg);
  color: var(--dp-badge-done-text);
  border-color: var(--dp-badge-done-border);
}

.dp-badge--active {
  background: var(--dp-badge-active-bg);
  color: var(--dp-badge-active-text);
  border-color: var(--dp-badge-active-border);
}

.dp-badge--pending {
  background: var(--dp-badge-pending-bg);
  color: var(--dp-badge-pending-text);
  border-color: var(--dp-badge-pending-border);
}

.dp-badge--cancelled {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
  text-decoration: line-through;
}

/* --- Interaction Result --- */

.dp-interaction-card__result {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  font-size: 13px;
  font-weight: 300;
  color: var(--dp-text-body);
  line-height: 1.5;
}

/* --- Panel Footer --- */

.dp-panel__footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 12px 16px 16px;
}

/* --- ION Balance --- */

.dp-panel__ion-section {
  margin-bottom: 14px;
}

.dp-panel__ion-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.dp-panel__ion-label {
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.dp-panel__ion-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--dp-text-body);
  font-variant-numeric: tabular-nums;
}

.dp-panel__ion-track {
  height: 3px;
  background: var(--dp-ion-track);
  border-radius: 2px;
  overflow: hidden;
}

.dp-panel__ion-fill {
  height: 100%;
  background: var(--dp-ion-fill);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* --- Connectors --- */

.dp-panel__connectors {
  margin-bottom: 14px;
}

.dp-panel__connectors-toggle {
  display: flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  user-select: none;
}

.dp-panel__section-label {
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.dp-panel__connectors-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--dp-text-muted);
  margin-left: auto;
}

.dp-panel__connectors-chevron {
  display: inline-flex;
  transition: transform 200ms ease;
}

.dp-panel__connectors-chevron svg {
  width: 12px;
  height: 12px;
  stroke: var(--dp-text-muted);
}

.dp-panel__connectors-chevron--open {
  transform: rotate(90deg);
}

.dp-panel__connectors-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 300px;
  transition: max-height 300ms ease, opacity 200ms ease;
}

.dp-panel__connectors-list--collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

.dp-connector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 150ms ease-out;
}

.dp-connector-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.dp-connector-row__icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.02);
}

.dp-connector-row__icon svg {
  width: 16px;
  height: 16px;
}

.dp-connector-row__icon--add {
  border: 1px dashed rgba(0, 0, 0, 0.12);
  background: transparent;
  color: var(--dp-text-muted);
}

.dp-connector-row__icon--add svg {
  width: 12px;
  height: 12px;
}

.dp-connector-row__info {
  flex: 1;
  min-width: 0;
}

.dp-connector-row__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dp-text-body);
}

.dp-connector-row__desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--dp-text-light);
}

.dp-connector-row__status {
  display: flex;
  width: 14px;
  height: 14px;
  color: var(--dp-teal);
  flex-shrink: 0;
}

.dp-connector-row__status svg {
  width: 100%;
  height: 100%;
}

.dp-connector-row--add {
  cursor: pointer;
  opacity: 0.6;
}

.dp-connector-row--add:hover {
  opacity: 0.8;
}

/* --- Profile --- */

.dp-panel__profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.dp-panel__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dp-primary), var(--dp-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.dp-panel__profile-info {
  flex: 1;
  min-width: 0;
}

.dp-panel__profile-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--dp-text-body);
}

.dp-panel__profile-role {
  font-size: 13px;
  font-weight: 400;
  color: var(--dp-text-light);
}

/* ==================== GLASS PANEL — MOBILE (Left Side) ==================== */

@media (max-width: 767px) {
  .dp-panel {
    width: min(85vw, 320px);
    height: 100vh;
  }

  .dp-panel-ticker {
    width: 10px;
    height: 48px;
    font-size: 0; /* hide label text on mobile */
  }

  .dp-panel-ticker:hover {
    width: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .dp-panel {
    width: var(--dp-panel-width-tablet);
  }
}


/* ==================== FLOATING NOTIFICATIONS ==================== */

.dp-notif-container {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.dp-notif {
  width: var(--dp-notif-width);
  background: var(--dp-glass-notif-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  padding: 14px 16px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: transform var(--dp-notif-slide-duration) cubic-bezier(0.4, 0.0, 0.2, 1),
              opacity var(--dp-notif-fade-duration) ease-out;
}

.dp-notif--visible {
  opacity: 1;
  transform: translateX(0);
}

.dp-notif--fading {
  opacity: 0;
  transform: translateX(0);
}

.dp-notif__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.dp-notif__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dp-teal);
  flex-shrink: 0;
}

.dp-notif__name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--dp-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-notif__status {
  font-size: 12px;
  font-weight: 500;
  color: var(--dp-badge-done-text);
}

.dp-notif__time {
  font-size: 12px;
  font-weight: 400;
  color: var(--dp-text-muted);
}

.dp-notif__body {
  font-size: 14px;
  font-weight: 400;
  color: var(--dp-text-body);
  line-height: 1.5;
  margin-bottom: 8px;
}

.dp-notif__footer {
  display: flex;
  justify-content: flex-end;
}

.dp-notif__cost {
  font-size: 12px;
  font-weight: 400;
  color: var(--dp-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Proactive Notification --- */

.dp-notif--proactive {
  border-left: 3px solid var(--dp-teal, #2DD4BF);
}

.dp-notif__proactive-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--dp-teal, #2DD4BF);
  margin-right: 6px;
  flex-shrink: 0;
}

.dp-notif__proactive-icon svg {
  width: 100%;
  height: 100%;
}

/* --- Notification hover --- */

.dp-notif:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
}

/* --- Mobile Notifications --- */

@media (max-width: 767px) {
  .dp-notif-container {
    top: 12px;
    right: 16px;
    left: 16px;
  }

  .dp-notif {
    width: 100%;
  }
}


/* ==================== GLOW TRAVEL ANIMATION ==================== */

.dp-glow-travel {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  background: rgba(var(--dp-teal-rgb), 0.18);
  border-radius: 50%;
  filter: blur(24px);
  will-change: transform, width, height, opacity, top, left;
}


/* ==================== NEW INTERACTION BUTTON ==================== */

.dp-panel__new-interaction-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  margin-bottom: 8px;
  background: #ffffff;
  border: 1px solid rgba(123, 63, 160, 0.2);
  border-radius: 8px;
  cursor: pointer;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--dp-primary);
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.dp-panel__new-interaction-btn:hover {
  background: rgba(123, 63, 160, 0.04);
  border-color: rgba(123, 63, 160, 0.35);
}

.dp-panel__new-interaction-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* ==================== CHAT BUBBLES (inside interaction cards) ==================== */

.dp-chat-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--dp-text-muted);
  cursor: pointer;
  user-select: none;
  transition: color 150ms ease-out;
  background: none;
  border: none;
}

.dp-chat-toggle:hover {
  color: var(--dp-text-body);
}

.dp-chat-toggle__icon {
  display: flex;
  width: 10px;
  height: 10px;
  transition: transform 150ms ease-out;
}

.dp-chat-toggle__icon--open {
  transform: rotate(90deg);
}

.dp-chat-toggle__icon svg {
  width: 100%;
  height: 100%;
}

.dp-chat-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out;
}

.dp-chat-container--open {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

.dp-chat-container::-webkit-scrollbar {
  width: 3px;
}

.dp-chat-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

.dp-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}

.dp-chat-bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-word;
  animation: dp-bubble-in 200ms ease-out;
}

@keyframes dp-bubble-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dp-chat-bubble--user {
  align-self: flex-end;
  background: var(--dp-bubble-user-bg);
  color: var(--dp-bubble-user-text);
  border-bottom-right-radius: 4px;
}

.dp-chat-bubble--deeplica {
  align-self: flex-start;
  background: var(--dp-bubble-deeplica-bg);
  color: var(--dp-bubble-deeplica-text);
  border-bottom-left-radius: 4px;
}


/* ==================== RTL SUPPORT (Hebrew) ==================== */

[dir="rtl"] .dp-panel {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--dp-glass-border);
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.02);
  transform: translateX(100%);
}

[dir="rtl"] .dp-panel--open {
  transform: translateX(0);
}

[dir="rtl"] .dp-panel-ticker {
  left: auto;
  right: 0;
  border-radius: 6px 0 0 6px;
  border-left: none;
  border-right: 2px solid rgba(var(--dp-primary-rgb), 0.2);
}

[dir="rtl"] .dp-panel-ticker__icon {
  transform: scaleX(-1);
}

[dir="rtl"] .dp-notif-container {
  right: auto;
  left: 30px;
}

[dir="rtl"] .dp-notif {
  transform: translateX(-100%);
}

[dir="rtl"] .dp-notif--visible {
  transform: translateX(0);
}

[dir="rtl"] .dp-orb__send-hint {
  right: auto;
  left: 16px;
  direction: rtl;
}

[dir="rtl"] .dp-orb__text {
  direction: rtl;
  text-align: center;
}

[dir="rtl"] .dp-interaction-card__header {
  direction: rtl;
}

[dir="rtl"] .dp-connector-row {
  direction: rtl;
}

@media (max-width: 767px) {
  [dir="rtl"] .dp-panel-ticker {
    left: auto;
    right: 12px;
  }

  [dir="rtl"] .dp-notif-container {
    left: 16px;
    right: 16px;
  }
}


/* ==================== HITL POPUP (Human-In-The-Loop) ==================== */

.dp-hitl-question {
  font-size: 16px;
  font-weight: 400;
  color: var(--dp-text-body);
  line-height: 1.6;
  margin-bottom: 24px;
}

.dp-hitl-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.dp-hitl-choice-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid rgba(123, 63, 160, 0.15);
  background: rgba(255, 255, 255, 0.8);
  color: var(--dp-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 200ms ease;
}

.dp-hitl-choice-btn:hover {
  background: rgba(123, 63, 160, 0.06);
  border-color: var(--dp-primary);
  transform: translateY(-1px);
}

.dp-hitl-choice-btn:active {
  transform: translateY(0);
}

.dp-hitl-input-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.dp-hitl-text-input {
  flex: 1;
}

.dp-hitl-submit-btn {
  flex-shrink: 0;
  padding: 10px 24px;
  border-radius: 12px;
  border: none;
  background: var(--dp-primary);
  color: #ffffff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 2px 8px rgba(var(--dp-primary-rgb), 0.2);
}

.dp-hitl-submit-btn:hover {
  background: var(--dp-deep);
  box-shadow: 0 4px 16px rgba(var(--dp-primary-rgb), 0.25);
  transform: translateY(-1px);
}

.dp-hitl-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(var(--dp-primary-rgb), 0.15);
}

.dp-hitl-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid rgba(200, 184, 232, 0.1);
}

.dp-hitl-cancel-btn,
.dp-hitl-stop-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--dp-text-muted);
  cursor: pointer;
  transition: all 150ms ease;
  opacity: 0.7;
}

.dp-hitl-cancel-btn:hover,
.dp-hitl-stop-btn:hover {
  opacity: 1;
  color: #DC2626;
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.12);
}


/* ==================== HITL AUTO-APPROVE CHECKBOX ==================== */

.dp-hitl-auto-approve {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.dp-hitl-auto-approve__label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--dp-text-body);
}

.dp-hitl-auto-approve__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--dp-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.dp-hitl-auto-approve__hint {
  font-size: 11px;
  font-weight: 300;
  color: var(--dp-text-muted);
  margin-top: 4px;
  margin-left: 24px;
}


/* ==================== INTERACTION FILTER BAR ==================== */

.dp-panel__filters {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.dp-panel__filter-search {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--dp-text-body);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
}

.dp-panel__filter-search::placeholder {
  color: var(--dp-text-light);
}

.dp-panel__filter-search:focus {
  border-color: rgba(var(--dp-primary-rgb), 0.2);
  background: rgba(255, 255, 255, 0.8);
}

.dp-panel__filter-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  color: var(--dp-text-muted);
  transition: all 200ms ease;
  flex-shrink: 0;
}

.dp-panel__filter-btn svg {
  width: 14px;
  height: 14px;
}

.dp-panel__filter-btn:hover {
  background: rgba(var(--dp-primary-rgb), 0.04);
  border-color: rgba(var(--dp-primary-rgb), 0.12);
  color: var(--dp-primary);
}

.dp-panel__filter-btn--active {
  background: rgba(var(--dp-primary-rgb), 0.08);
  border-color: rgba(var(--dp-primary-rgb), 0.2);
  color: var(--dp-primary);
}


/* ==================== PROACTIVE INTERACTION CARD ==================== */

.dp-interaction-card--proactive {
  border-left: 2px solid var(--dp-teal);
}

.dp-interaction-card__proactive-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--dp-teal);
}

.dp-interaction-card__proactive-icon svg {
  width: 14px;
  height: 14px;
}