/* Frontend (light theme) */
.tdfomo-widget, .tdfomo-widget * {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.tdfomo-widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999999;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* default transforms per animation type */
.tdfomo-widget.tdfomo-anim-slide { transform: translateY(18px); }
.tdfomo-widget.tdfomo-anim-right { transform: translateX(26px); }
.tdfomo-widget.tdfomo-anim-fade  { transform: translateY(0); }

.tdfomo-widget.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
  pointer-events: auto;
}

.tdfomo-inner {
  padding: 12px 12px 10px 12px;
}

.tdfomo-close {
  all: unset;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.04);
}
.tdfomo-close:hover { background: rgba(0,0,0,0.07); }
.tdfomo-close.is-hidden { display:none; }

.tdfomo-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tdfomo-avatar1 {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0,0,0,0.04);
}
.tdfomo-avatar1 img { width: 100%; height: 100%; object-fit: cover; display:block; }

.tdfomo-line1 {
  flex: 1 1 auto;
  color: #111827;
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
}
.tdfomo-line1 p { margin: 0; }
.tdfomo-line1 * { margin: 0; }

.tdfomo-divider { height: 10px; }

.tdfomo-avatar2 {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0,0,0,0.04);
}
.tdfomo-avatar2 img { width: 100%; height: 100%; object-fit: cover; display:block; }

.tdfomo-line2 {
  flex: 1 1 auto;
  color: #374151;
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
}
.tdfomo-line2 p { margin: 0; }
.tdfomo-line2 * { margin: 0; }

.tdfomo-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 90px;
}

.tdfomo-stars {
  display: inline-flex;
  gap: 2px;
  line-height: 1;
  user-select: none;
}
.tdfomo-stars span {
  font-size: 14px;
  color: rgba(245, 158, 11, 1);
}

.tdfomo-bottomtext {
  font-size: 12px;
  color: #6b7280;
  text-align: right;
  max-width: 160px;
  overflow: hidden;
}
.tdfomo-bottomtext p { margin: 0; }
.tdfomo-bottomtext * { margin: 0; }

.tdfomo-clickhint {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(0,0,0,0.45);
  user-select: none;
}

/* Animations */
.tdfomo-anim-slide { transition: transform 420ms ease, opacity 420ms ease; }
.tdfomo-anim-fade  { transition: opacity 420ms ease; }
.tdfomo-anim-right { transition: transform 420ms ease, opacity 420ms ease; }

.tdfomo-widget.is-hiding { pointer-events:none; }
.tdfomo-anim-slide.is-hiding { opacity:0; transform: translateY(22px); transition: transform 360ms ease, opacity 360ms ease; }
.tdfomo-anim-fade.is-hiding  { opacity:0; transition: opacity 360ms ease; }
.tdfomo-anim-right.is-hiding { opacity:0; transform: translateX(30px); transition: transform 360ms ease, opacity 360ms ease; }

/* Mobile */
@media (max-width: 420px) {
  .tdfomo-widget { width: 92vw; left: 4vw; bottom: 14px; }
  .tdfomo-right { min-width: 80px; }
}