/**
 * Suggestion 5 — Shape language + motion.
 * Skewed rounded rectangle from the TALK logo → buttons, bubbles, empty states.
 */

body.theme-ttl {
  /* Logo geometry: left edge shorter, right edge taller */
  --ttl-r-tl: 10px;
  --ttl-r-tr: 16px;
  --ttl-r-br: 12px;
  --ttl-r-bl: 10px;
  --ttl-radius: var(--ttl-r-tl) var(--ttl-r-tr) var(--ttl-r-br) var(--ttl-r-bl);
  --ttl-radius-sm: 8px 12px 8px 8px;
  --ttl-radius-lg: 14px 22px 14px 14px;
  --ttl-skew: -2deg;
  --ttl-launch-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Reusable launch tile (matches logo block) */
body.theme-ttl .ttl-tile {
  display: inline-block;
  background: var(--brand-primary);
  border-radius: var(--ttl-radius);
  transform: skewX(var(--ttl-skew));
}

/* ── Hero decorative cluster (empty / welcome state) ─── */
body.theme-ttl .hero {
  position: relative;
}

body.theme-ttl .ttl-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

body.theme-ttl .hero > *:not(.ttl-deco) {
  position: relative;
  z-index: 1;
}

body.theme-ttl .ttl-deco-shape {
  position: absolute;
  display: block;
  background: var(--brand-primary);
  border-radius: var(--ttl-radius-lg);
  opacity: .07;
  transform: skewX(-3deg);
}

body.theme-ttl .ttl-deco-shape--1 {
  width: 140px;
  height: 100px;
  top: 6%;
  right: 8%;
  animation: ttlFloat 8s var(--ttl-launch-ease) infinite alternate;
}

body.theme-ttl .ttl-deco-shape--2 {
  width: 72px;
  height: 54px;
  bottom: 18%;
  left: 6%;
  border-radius: var(--ttl-radius);
  opacity: .05;
  animation: ttlFloat 6s var(--ttl-launch-ease) 1s infinite alternate-reverse;
}

body.theme-ttl .ttl-deco-shape--3 {
  width: 44px;
  height: 34px;
  top: 22%;
  left: 14%;
  border-radius: var(--ttl-radius-sm);
  opacity: .09;
  animation: ttlFloat 5s var(--ttl-launch-ease) .5s infinite alternate;
}

@keyframes ttlFloat {
  from { transform: skewX(-3deg) translateY(0) translateX(0); }
  to   { transform: skewX(-3deg) translateY(-10px) translateX(6px); }
}

@keyframes ttlLaunchIn {
  from {
    opacity: 0;
    transform: translateY(10px) translateX(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.theme-ttl .hero-badge {
  border-radius: 999px;
  animation: ttlLaunchIn .55s var(--ttl-launch-ease) both;
}

body.theme-ttl .hero h2 {
  animation: ttlLaunchIn .6s var(--ttl-launch-ease) .08s both;
}

body.theme-ttl .hero-sub {
  animation: ttlLaunchIn .6s var(--ttl-launch-ease) .14s both;
}

body.theme-ttl .hero-cards {
  animation: ttlLaunchIn .65s var(--ttl-launch-ease) .2s both;
}

/* Remove legacy single pseudo — replaced by .ttl-deco */
body.theme-ttl .hero::before {
  display: none;
}

body.theme-ttl .hero-card {
  border-radius: var(--ttl-radius);
  overflow: hidden;
  position: relative;
  transition: border-color .15s, background .15s, transform .15s var(--ttl-launch-ease), box-shadow .15s;
}

body.theme-ttl .hero-card:hover {
  border-color: var(--brand-primary);
  background: var(--brand-glow);
  transform: translateY(-2px) translateX(2px);
  box-shadow: 0 6px 20px rgba(46, 141, 239, .12);
}

body.theme-ttl .hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--brand-primary), transparent);
  opacity: 0;
  transition: opacity .15s;
}

body.theme-ttl .hero-card:hover::before {
  opacity: 1;
}

body.theme-ttl .hero-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 36px;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1;
  background: var(--brand-glow);
  border: 1px solid var(--brand-border);
  border-radius: var(--ttl-radius-sm);
  transform: skewX(-2deg);
  transition: transform .15s var(--ttl-launch-ease), background .15s, border-color .15s;
}

body.theme-ttl .hero-card:hover .hero-card-icon {
  transform: skewX(-2deg) translateX(2px) translateY(-1px);
  background: var(--brand-glow-2);
  border-color: var(--brand-primary);
}

/* ── Primary / launch CTAs ──────────────────────────── */
body.theme-ttl .auth-btn,
body.theme-ttl .send-btn,
body.theme-ttl .mobile-menu-btn,
body.theme-ttl .users-add-btn,
body.theme-ttl .tpl-btn.primary,
body.theme-ttl .exec-preview-btn.primary,
body.theme-ttl #modalRun {
  border-radius: var(--ttl-radius) !important;
  transition:
    background .15s,
    transform .14s var(--ttl-launch-ease),
    box-shadow .15s !important;
}

body.theme-ttl .auth-btn:hover,
body.theme-ttl .send-btn:not(.stopping):hover,
body.theme-ttl .users-add-btn:hover,
body.theme-ttl .tpl-btn.primary:hover,
body.theme-ttl .exec-preview-btn.primary:hover,
body.theme-ttl #modalRun:hover {
  transform: translateX(2px) translateY(-2px) !important;
}

body.theme-ttl .send-btn:not(.stopping):active,
body.theme-ttl .auth-btn:active {
  transform: translateX(1px) translateY(0) !important;
}

body.theme-ttl .send-btn {
  box-shadow: 0 4px 14px rgba(46, 141, 239, .28);
}

body.theme-ttl .send-btn:not(.stopping):hover {
  box-shadow: 0 6px 20px rgba(46, 141, 239, .36);
}

/* Nav active = soft launch pill */
body.theme-ttl .nav-item.active {
  border-radius: var(--ttl-radius-sm);
}

body.theme-ttl .steps-bar,
body.theme-ttl .prompt-expand-btn {
  border-radius: var(--ttl-radius-sm);
}

/* ── Chat bubbles (speech / launch corners) ─────────── */
body.theme-ttl .msg.bot .msg-bubble {
  border-radius: 14px 20px 14px 14px;
  border-top-right-radius: 20px;
}

body.theme-ttl .msg.user .msg-bubble {
  border-radius: 14px 14px 14px 20px;
  border-bottom-left-radius: 20px;
}

body.theme-ttl .msg.bot .msg-avatar {
  border-radius: var(--ttl-radius-sm);
}

body.theme-ttl .input-box {
  border-radius: var(--ttl-radius);
  transition: border-color .12s, box-shadow .12s, border-radius .12s;
}

body.theme-ttl .input-box:focus-within {
  border-radius: 12px 18px 12px 12px;
}

/* ── Empty states: abstract blue shapes, no emoji reliance ─ */
body.theme-ttl .empty-view {
  position: relative;
}

body.theme-ttl .empty-view-icon {
  position: relative;
  width: 80px;
  height: 62px;
  margin-bottom: 18px;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
  overflow: visible;
}

body.theme-ttl .empty-view-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 42px;
  margin: -21px 0 0 -28px;
  background: var(--brand-primary);
  border-radius: var(--ttl-radius-lg);
  transform: skewX(-3deg);
  opacity: .85;
  box-shadow: 0 10px 28px rgba(46, 141, 239, .22);
}

body.theme-ttl .empty-view-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 22px;
  margin: -6px 0 0 6px;
  background: var(--brand-primary);
  border-radius: var(--ttl-radius-sm);
  transform: skewX(-3deg);
  opacity: .35;
}

body.theme-ttl .empty-view h3 {
  animation: ttlLaunchIn .5s var(--ttl-launch-ease) both;
}

body.theme-ttl .empty-view p {
  animation: ttlLaunchIn .5s var(--ttl-launch-ease) .1s both;
}

/* Template / modal primary tiles */
body.theme-ttl .hero-badge {
  letter-spacing: .6px;
}

body.theme-ttl .tpl-card:hover {
  border-color: var(--brand-primary);
  transition: border-color .12s;
}

/* Bot typing indicator — launch dots */
body.theme-ttl .typing span {
  border-radius: 50% 60% 50% 50%;
}

body.theme-ttl .typing span:nth-child(2) {
  border-radius: 60% 50% 50% 50%;
}

body.theme-ttl .typing span:nth-child(3) {
  border-radius: 50% 50% 60% 50%;
}

/* Light variant: stronger deco visibility */
body.theme-light .ttl-deco-shape {
  opacity: .04;
}

body.theme-light .ttl-deco-shape--3 {
  opacity: .06;
}

body.theme-light .empty-view-icon::before {
  opacity: .9;
}

/* Split: deco on dark chat panel */
body.theme-split #view-chat .ttl-deco-shape {
  opacity: .08;
}

body.theme-split #view-chat .hero-card-icon {
  background: rgba(46, 141, 239, .12);
  border-color: rgba(46, 141, 239, .25);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.theme-ttl .ttl-deco-shape,
  body.theme-ttl .hero-badge,
  body.theme-ttl .hero h2,
  body.theme-ttl .hero-sub,
  body.theme-ttl .hero-cards,
  body.theme-ttl .empty-view h3,
  body.theme-ttl .empty-view p {
    animation: none !important;
  }

  body.theme-ttl .auth-btn:hover,
  body.theme-ttl .send-btn:hover,
  body.theme-ttl .hero-card:hover,
  body.theme-ttl .hero-card:hover .hero-card-icon {
    transform: none !important;
  }
}