/* Styles injected into the chat pages (Twitch, YouTube live chat). Everything is prefixed
   `tcl-` so it can never collide with the site's own classes. The pinned panel lives in a
   shadow root and carries its own stylesheet (see content.js). */

:root {
  --tcl-accent: #a970ff;
  --tcl-accent-strong: #bf94ff;
  --tcl-heart: #ff4d6d;
  --tcl-bg: rgba(24, 24, 27, 0.96);
  --tcl-border: #2f2f35;
  --tcl-text: #adadb8;
  --tcl-text-strong: #efeff1;
}

.tw-root--theme-light {
  --tcl-bg: rgba(255, 255, 255, 0.97);
  --tcl-border: #dedee3;
  --tcl-text: #53535f;
  --tcl-text-strong: #0e0e10;
  --tcl-accent: #772ce8;
  --tcl-accent-strong: #9147ff;
  --tcl-heart: #e8264b;
}

html[data-tcl-platform="youtube"]:not([dark]) {
  --tcl-bg: rgba(255, 255, 255, 0.97);
  --tcl-border: #d9d9d9;
  --tcl-text: #606060;
  --tcl-text-strong: #0f0f0f;
  --tcl-accent: #772ce8;
  --tcl-accent-strong: #9147ff;
  --tcl-heart: #e8264b;
}

/* ============================================================================
   The like control:   "256 ♡"   →  hover: "+1 ♡"   →  liked: "257 ♥" (red)
   ============================================================================ */

.tcl-ctl {
  display: inline-flex;
  align-items: center;
  color: var(--tcl-text);
  font: 600 12px/1.2 Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em;
  user-select: none;
  opacity: 0; /* empty messages: only on hover (below) */
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* in the text flow, right after the message (default) */
.tcl-ctl.tcl-inline {
  position: relative;
  margin-left: 8px;
  vertical-align: middle;
  z-index: 1;
}

/* fixed spot at the right edge of the line (option) */
.tcl-ctl:not(.tcl-inline) {
  position: absolute;
  right: 46px; /* leaves room for the site's own hover toolbar */
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  padding: 1px 6px;
  border: 1px solid var(--tcl-border);
  border-radius: 7px;
  background: var(--tcl-bg);
}
.seventv-message > .tcl-ctl:not(.tcl-inline) {
  right: 96px; /* left of 7TV's own hover buttons */
}

/* messages that already have likes: always shown, like "256 ♡" */
.tcl-ctl.tcl-has {
  opacity: 1;
  pointer-events: auto;
}

/* empty messages: "0 ♡", semi transparent, only while the message is hovered */
/* The hover state is also carried by classes (.tcl-hl on the line, .tcl-cl on the control, set by
   content.js with a short grace period): while the chat is being held in place the browser can
   lose :hover for a few milliseconds every time a message is added, which made "+1" blink. */
.chat-line__message:hover .tcl-ctl,
.seventv-message:hover .tcl-ctl,
yt-live-chat-text-message-renderer:hover .tcl-ctl,
.tcl-hl .tcl-ctl {
  opacity: 0.72; /* "0 ♡": present but calm */
  pointer-events: auto;
}
.chat-line__message:hover .tcl-ctl.tcl-has,
.seventv-message:hover .tcl-ctl.tcl-has,
yt-live-chat-text-message-renderer:hover .tcl-ctl.tcl-has,
.chat-line__message:hover .tcl-ctl:hover,
.seventv-message:hover .tcl-ctl:hover,
yt-live-chat-text-message-renderer:hover .tcl-ctl:hover,
.tcl-hl .tcl-ctl.tcl-has,
.tcl-hl .tcl-ctl.tcl-cl,
.tcl-ctl.tcl-cl,
.tcl-ctl:hover,
.tcl-ctl:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.tcl-btn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  border: 1px solid transparent; /* the room for the outline is always there: no jump on hover */
  border-radius: 9px;
  color: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* hovering a heart you can still like: grey outline, and two red arcs running around it */
@property --tcl-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.tcl-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--tcl-angle),
    transparent 0 5%,
    var(--tcl-ring-a, var(--tcl-heart)) 12%,
    transparent 20% 50%,
    var(--tcl-ring-b, var(--tcl-heart)) 62%,
    transparent 70% 100%
  );
  /* keep only the 1px ring of that gradient */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.tcl-ctl:not(.tcl-liked):is(:hover, .tcl-cl) .tcl-btn {
  border-color: var(--tcl-border);
}
.tcl-ctl:not(.tcl-liked):is(:hover, .tcl-cl) .tcl-btn::before {
  opacity: 1;
  animation: tcl-orbit var(--tcl-ring-speed, 1.6s) linear infinite;
}
@keyframes tcl-orbit {
  to {
    --tcl-angle: 360deg;
  }
}
.tcl-btn:focus-visible {
  outline: 2px solid var(--tcl-accent);
  outline-offset: 1px;
}

/* the number, with "+1" ready to replace it on hover */
.tcl-num {
  position: relative;
  display: inline-grid;
  min-width: 2ch;
  justify-items: end;
}
.tcl-count {
  display: inline-grid;
  overflow: hidden;
  justify-items: end;
  transition: opacity 0.12s ease;
}
.tcl-digits {
  grid-area: 1 / 1;
  font-variant-numeric: tabular-nums;
}
.tcl-plus {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: end;
  align-items: center;
  color: var(--tcl-heart);
  font-weight: 700;
  opacity: 0;
  transform: translateY(35%);
  transition: opacity 0.12s ease, transform 0.15s ease;
  pointer-events: none;
}
.tcl-ctl:not(.tcl-liked):is(:hover, .tcl-cl) .tcl-count {
  opacity: 0;
}
.tcl-ctl:not(.tcl-liked):is(:hover, .tcl-cl) .tcl-plus {
  opacity: 1;
  transform: translateY(0);
}

/* the heart: outline, red outline when about to be clicked, filled red once liked */
.tcl-heart {
  width: 14px;
  height: 14px;
  flex: none;
  display: block;
  overflow: visible;
}
.tcl-heart path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
/* the theme's icon: a heart, or an animal's face (drawings in icons.js) */
.tcl-heart .tcl-ic-cat,
.tcl-heart .tcl-ic-dog,
[data-tcl-icon="cat"] .tcl-heart .tcl-p-heart,
[data-tcl-icon="dog"] .tcl-heart .tcl-p-heart {
  display: none;
}
[data-tcl-icon="cat"] .tcl-heart .tcl-ic-cat,
[data-tcl-icon="dog"] .tcl-heart .tcl-ic-dog {
  display: inline;
}
[data-tcl-icon="cat"] .tcl-heart,
[data-tcl-icon="dog"] .tcl-heart {
  width: 17px; /* a face needs a little more room than a heart to be readable */
  height: 17px;
}

/* the face: lighter strokes on top of the head, dark on the filled head once liked */
.tcl-heart .tcl-f {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tcl-heart .tcl-f.dot { stroke-width: 2.7; }
.tcl-heart .tcl-f.solid { fill: currentColor; stroke-width: 0.9; }
.tcl-heart .tcl-tongue { fill: #ff8fa3; stroke: none; }
.tcl-ctl.tcl-liked .tcl-heart path.tcl-f { stroke: #2b1d16; }
.tcl-ctl.tcl-liked .tcl-heart path.tcl-f.solid { fill: #2b1d16; }
.tcl-ctl.tcl-liked .tcl-heart path.tcl-tongue { fill: #ff8fa3; stroke: none; }
/* the dog's ears are a shade darker than its face once it is filled in */
.tcl-ctl.tcl-liked .tcl-heart path.tcl-ear {
  fill: color-mix(in srgb, var(--tcl-heart) 60%, #000);
  stroke: color-mix(in srgb, var(--tcl-heart) 60%, #000);
}

/* the reaction when you like: the cat's eyes close in a smile, the dog opens its mouth and flaps its ears */
.tcl-heart .tcl-happy,
.tcl-heart .tcl-open,
.tcl-heart .tcl-tongue {
  display: none;
}
.tcl-btn.tcl-react .tcl-heart .tcl-eyes,
.tcl-btn.tcl-react .tcl-heart .tcl-m-idle {
  display: none;
}
.tcl-btn.tcl-react .tcl-heart .tcl-happy,
.tcl-btn.tcl-react .tcl-heart .tcl-open,
.tcl-btn.tcl-react .tcl-heart .tcl-tongue {
  display: inline;
}
.tcl-heart .tcl-ear {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
[data-tcl-icon="cat"] .tcl-btn.tcl-react .tcl-heart {
  animation: tcl-nod 0.55s ease-in-out;
}
[data-tcl-icon="dog"] .tcl-btn.tcl-react .tcl-heart {
  animation: tcl-bark 0.55s ease-out;
}
[data-tcl-icon="dog"] .tcl-btn.tcl-react .tcl-ear-l {
  animation: tcl-flap-l 0.55s ease-in-out;
}
[data-tcl-icon="dog"] .tcl-btn.tcl-react .tcl-ear-r {
  animation: tcl-flap-r 0.55s ease-in-out;
}
@keyframes tcl-nod {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-9deg) scale(1.08); }
  65% { transform: rotate(6deg) scale(1.04); }
}
@keyframes tcl-bark {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-2px) scale(1.1); }
  45% { transform: translateY(0); }
  65% { transform: translateY(-1.5px) scale(1.06); }
}
@keyframes tcl-flap-l {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(16deg); }
  55% { transform: rotate(-6deg); }
  75% { transform: rotate(10deg); }
}
@keyframes tcl-flap-r {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-16deg); }
  55% { transform: rotate(6deg); }
  75% { transform: rotate(-10deg); }
}

/* what you do to like, in the slot where the number gives way on hover: "+1", a toy wand, or a hand */
.tcl-plus .tcl-pl-wand,
.tcl-plus .tcl-pl-hand {
  display: none;
}
[data-tcl-tool="wand"] .tcl-plus .tcl-pl-plus,
[data-tcl-tool="hand"] .tcl-plus .tcl-pl-plus {
  display: none;
}
[data-tcl-tool="wand"] .tcl-plus .tcl-pl-wand {
  display: block;
  width: 19px;
  height: 19px;
  overflow: visible;
  margin-right: -2px;
}
[data-tcl-tool="hand"] .tcl-plus .tcl-pl-hand {
  display: block;
  font-size: 14px;
  line-height: 1;
}
.tcl-pl-wand .tcl-toy {
  transform-box: fill-box;
  transform-origin: 0 0;
}
.tcl-ctl:not(.tcl-liked):is(:hover, .tcl-cl) .tcl-pl-wand .tcl-toy {
  animation: tcl-toy-swing 1.1s ease-in-out infinite;
}
.tcl-ctl:not(.tcl-liked):is(:hover, .tcl-cl) .tcl-pl-hand {
  animation: tcl-hand-wave 0.9s ease-in-out infinite;
  transform-origin: 70% 90%;
}
@keyframes tcl-toy-swing {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(16deg); }
}
@keyframes tcl-hand-wave {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(2px); }
}

/* the words that go with it, above the control, only while it can be clicked */
.tcl-tip {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 5px);
  padding: 3px 8px;
  border: 1px solid var(--tcl-border);
  border-radius: 6px;
  background: var(--tcl-bg);
  color: var(--tcl-text-strong);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
[data-tcl-tool="wand"] .tcl-tip::after { content: "play with the cat"; }
[data-tcl-tool="hand"] .tcl-tip::after { content: "pet the dog"; }
[data-tcl-tool="wand"] .tcl-ctl:not(.tcl-liked, [data-tcl-msg]):is(:hover, .tcl-cl) .tcl-tip,
[data-tcl-tool="hand"] .tcl-ctl:not(.tcl-liked, [data-tcl-msg]):is(:hover, .tcl-cl) .tcl-tip {
  display: block;
  animation: tcl-fade-in 0.15s ease-out;
}
.tcl-ctl:not(.tcl-liked):is(:hover, .tcl-cl) .tcl-heart {
  color: var(--tcl-heart);
}
.tcl-ctl.tcl-liked .tcl-heart path {
  fill: var(--tcl-heart);
  stroke: var(--tcl-heart);
}
/* a liked heart can be clicked again to take the like back: it dims on hover to hint at it */
.tcl-ctl.tcl-liked:is(:hover, .tcl-cl) .tcl-heart path {
  fill-opacity: 0.55;
}
.tcl-btn.tcl-pop .tcl-heart {
  animation: tcl-heart-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* small message above the control when something goes wrong */
.tcl-ctl[data-tcl-msg]::after {
  content: attr(data-tcl-msg);
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 4px 8px;
  border-radius: 6px;
  background: #18181b;
  border: 1px solid #eb0400;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  animation: tcl-fade-in 0.15s ease-out;
}
.tcl-ctl[data-tcl-msg] {
  opacity: 1;
}
.tcl-ctl.tcl-shake {
  animation: tcl-shake 0.35s ease-in-out;
}
.tcl-ctl.tcl-inline.tcl-shake {
  animation: tcl-shake-inline 0.35s ease-in-out;
}

/* "liked only" view (off by default): lines under the minimum number of likes */
[data-tcl-hidden] {
  display: none !important;
}

/* --- a message that reached the threshold -------------------------------------- */

.tcl-hot {
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--tcl-accent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--tcl-accent);
  animation: tcl-glow 3s ease-in-out infinite, tcl-lift 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.tcl-hot .tcl-ctl {
  color: var(--tcl-accent-strong);
}

html[data-tcl-style="neon"] .tcl-hot {
  background-color: color-mix(in srgb, var(--tcl-accent) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--tcl-accent-strong), 0 0 14px color-mix(in srgb, var(--tcl-accent) 55%, transparent);
  animation: tcl-neon 1.8s ease-in-out infinite, tcl-lift 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* --- animations ------------------------------------------------------------------ */

@keyframes tcl-heart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); }
  100% { transform: scale(1); }
}
@keyframes tcl-glow {
  0%, 100% { background-color: color-mix(in srgb, var(--tcl-accent) 7%, transparent); }
  50% { background-color: color-mix(in srgb, var(--tcl-accent) 15%, transparent); }
}
@keyframes tcl-neon {
  0%, 100% { box-shadow: inset 3px 0 0 var(--tcl-accent-strong), 0 0 8px color-mix(in srgb, var(--tcl-accent) 35%, transparent); }
  50% { box-shadow: inset 3px 0 0 var(--tcl-accent-strong), 0 0 20px color-mix(in srgb, var(--tcl-accent) 80%, transparent); }
}
@keyframes tcl-lift {
  from { transform: translateY(6px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes tcl-shake {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  25% { transform: translateY(-50%) translateX(-3px); }
  75% { transform: translateY(-50%) translateX(3px); }
}
@keyframes tcl-shake-inline {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes tcl-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tcl-hot,
  html[data-tcl-style="neon"] .tcl-hot,
  .tcl-btn.tcl-pop .tcl-heart,
  .tcl-ctl.tcl-shake {
    animation: none;
  }
}

/* --- 7TV / YouTube specifics ------------------------------------------------------------ */
.seventv-message.tcl-hot,
yt-live-chat-text-message-renderer.tcl-hot {
  background-color: color-mix(in srgb, var(--tcl-accent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--tcl-accent);
}