/* Treatly holographic frame — shared border for AI UI */

@keyframes treatly-holo-border-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

.treatly-holo-frame {
  --holo-radius: 16px;
  --holo-pad: 1.5px;
  position: relative;
  margin: 0 0 10px;
  padding: var(--holo-pad);
  border-radius: var(--holo-radius);
  background: linear-gradient(
    115deg,
    #32b5be 0%,
    #5ec4c9 18%,
    #7c6cff 42%,
    #c4b8ff 62%,
    #6bffda 82%,
    #32b5be 100%
  );
  background-size: 300% 100%;
  animation: treatly-holo-border-flow 5.5s linear infinite;
  box-shadow:
    0 0 0 1px rgba(50, 181, 190, 0.12),
    0 8px 28px rgba(50, 181, 190, 0.14),
    0 12px 36px rgba(124, 108, 255, 0.1);
}

.treatly-holo-frame__inner {
  position: relative;
  border-radius: calc(var(--holo-radius) - var(--holo-pad));
  background: var(--surface);
  overflow: hidden;
}

.treatly-holo-frame--ghost.treatly-holo-frame {
  --holo-pad: 0;
}

.treatly-holo-badge {
  position: absolute;
  top: -7px;
  left: 12px;
  z-index: 3;
  padding: 2px 9px;
  border-radius: 7px;
  font-family: Manrope, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(105deg, #2a9aa3 0%, #6b5fd4 55%, #9b8cff 100%);
  box-shadow: 0 2px 10px rgba(50, 181, 190, 0.35);
  pointer-events: none;
}

/* Inline chips in sheets */
.treatly-holo-frame--inline {
  --holo-radius: 14px;
  margin: 0 0 8px;
}

.treatly-holo-frame--inline .treatly-holo-frame__inner {
  padding: 10px 12px 12px;
}

.treatly-holo-frame--inline .ai-inline {
  margin: 0;
}

.treatly-holo-frame--inline .ai-inline-label {
  margin-top: 2px;
  background: linear-gradient(90deg, #2d7a72, #6b5fd4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Floating agent banner */
.treatly-holo-frame--banner {
  --holo-radius: 18px;
  margin: 0;
  box-shadow:
    0 0 0 1px rgba(50, 181, 190, 0.15),
    0 16px 48px rgba(0, 0, 0, 0.22),
    0 0 32px rgba(124, 108, 255, 0.12);
}

.treatly-holo-frame--banner .treatly-holo-frame__inner {
  padding: 14px 36px 12px 14px;
}

.treatly-agent-banner .treatly-holo-frame {
  width: 100%;
}

.treatly-agent-inner {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Coach panel on task sheet */
.treatly-holo-frame--panel .treatly-holo-frame__inner {
  padding: 0;
}

.treatly-holo-frame--panel .coach-panel {
  margin: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Companion — holo outline only (no filled gradient box) */
.treatly-holo-frame--ghost {
  --holo-radius: 20px;
  width: 100%;
  max-width: min(440px, 100%);
  margin: 0 auto;
  pointer-events: none;
  padding: 0;
  background: transparent;
  animation: none;
  box-shadow:
    0 0 0 1px rgba(50, 181, 190, 0.45),
    0 0 20px rgba(50, 181, 190, 0.15);
}

.treatly-holo-frame--ghost .treatly-holo-frame__inner {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  border-radius: var(--holo-radius);
}

.treatly-holo-frame--ghost .treat-ghost-overlay-hdr,
.treatly-holo-frame--ghost .treat-ghost-thread,
.treatly-holo-frame--ghost .treat-ghost-actions,
.treatly-holo-frame--ghost .treat-ghost-act,
.treatly-holo-frame--ghost .treat-ghost-tag,
.treatly-holo-frame--ghost .treat-ghost-text-btn {
  pointer-events: auto;
}

/* Task / feed cards added by Treatly */
[data-taskcard].treatly-ai-card {
  box-shadow:
    0 0 0 1.5px rgba(50, 181, 190, 0.5),
    0 0 0 3px rgba(124, 108, 255, 0.12),
    0 8px 22px rgba(50, 181, 190, 0.14) !important;
}

.card.treatly-ai-card {
  position: relative;
  border-color: transparent !important;
  box-shadow:
    0 0 0 1.5px transparent,
    0 8px 24px rgba(50, 181, 190, 0.12),
    var(--sh, 0 2px 12px rgba(0, 0, 0, 0.06));
  background-image:
    linear-gradient(var(--surface), var(--surface)),
    linear-gradient(
      115deg,
      #32b5be 0%,
      #7c6cff 40%,
      #c4b8ff 65%,
      #6bffda 85%,
      #32b5be 100%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 280% 100%;
  animation: treatly-holo-border-flow 5.5s linear infinite;
}

.tag.treatly-ai-tag {
  border-color: rgba(50, 181, 190, 0.45) !important;
  background: linear-gradient(
    135deg,
    rgba(50, 181, 190, 0.18),
    rgba(124, 108, 255, 0.14)
  ) !important;
  color: #2a7a74 !important;
}

[data-theme='dark'] .tag.treatly-ai-tag {
  color: #a8ebe8 !important;
}

[data-theme='dark'] .treatly-holo-frame:not(.treatly-holo-frame--ghost) .treatly-holo-frame__inner {
  background: var(--surface);
}

[data-theme='dark'] .treatly-holo-frame--ghost .treatly-holo-frame__inner {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobile web: keep card border fallback; companion blur uses light tint in treat-ghost.css */
@media (hover: none) and (pointer: coarse) {
  .treatly-holo-frame--banner .treatly-holo-frame__inner,
  .treatly-holo-frame--inline .treatly-holo-frame__inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .card.treatly-ai-card {
    background-image: none;
    border: 1.5px solid rgba(50, 181, 190, 0.55);
    box-shadow:
      0 0 0 2px rgba(124, 108, 255, 0.1),
      0 6px 20px rgba(50, 181, 190, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .treatly-holo-frame,
  .card.treatly-ai-card {
    animation: none;
    background-size: auto, 100% 100%;
  }
}