lingxi-web/src/styles/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 210 20% 98%;
    --foreground: 215 28% 13%;
    --card: 0 0% 100%;
    --card-foreground: 215 25% 16%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 16%;
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 215 20% 24%;
    --muted: 210 20% 96%;
    --muted-foreground: 215 12% 43%;
    --accent: 214 100% 97%;
    --accent-foreground: 221 83% 40%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 22% 91%;
    --input: 214 18% 86%;
    --ring: 221 83% 53%;
    --radius: 0.75rem;
  }

  * {
    @apply border-border;
  }

  html,
  body,
  #root {
    height: 100%;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.006em;
    background-image:
      radial-gradient(circle at 76% -12%, rgba(37, 99, 235, 0.055), transparent 28rem),
      linear-gradient(180deg, #ffffff 0, #f7f9fc 23rem);
  }

  ::selection {
    @apply bg-primary-200 text-primary-900;
  }
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(214 15% 80%) transparent;
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    @apply rounded-full bg-border;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .text-balance {
    text-wrap: balance;
  }
  .surface-panel {
    @apply rounded-[14px] border border-slate-200/90 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.025),0_8px_24px_rgba(15,23,42,0.025)];
  }
  .eyebrow {
    @apply text-[11px] font-semibold tracking-[0.08em] text-primary-700;
  }
  .page-shell {
    @apply mx-auto w-full max-w-[1600px] px-4 py-5 md:px-7 md:py-7;
  }
  .page-section {
    @apply mt-5;
  }
  .section-heading {
    @apply mb-3 flex flex-wrap items-end justify-between gap-3;
  }
  .section-title {
    @apply text-[15px] font-semibold tracking-[-0.015em] text-slate-900;
  }
  .section-description {
    @apply mt-0.5 text-xs text-slate-500;
  }
  .quiet-grid {
    background-image:
      linear-gradient(rgba(148, 163, 184, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148, 163, 184, .045) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .focus-surface {
    @apply border-primary-200/80 bg-primary-50/45 shadow-[0_8px_24px_-18px_rgba(37,99,235,.5),inset_0_0_0_1px_rgba(255,255,255,.8)];
  }
}

.chat-wallpaper {
  transition: background-color .28s ease, background-image .28s ease;
  background-position: center, center, center, center, 0 0, center;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 320px 320px, 100% 100%;
}

.chat-wallpaper-ocean {
  background-color: #eaf2f9;
  background-image:
    radial-gradient(ellipse at 8% 10%, rgba(125, 211, 252, .42), transparent 45%),
    radial-gradient(ellipse at 92% 8%, rgba(96, 165, 250, .34), transparent 44%),
    radial-gradient(ellipse at 12% 92%, rgba(45, 212, 191, .24), transparent 43%),
    radial-gradient(ellipse at 90% 90%, rgba(129, 140, 248, .25), transparent 46%),
    url('/chat-pattern.svg'),
    linear-gradient(145deg, rgba(245, 251, 255, .88), rgba(224, 236, 250, .94));
}

.chat-wallpaper-aurora {
  background-color: #eff0ff;
  background-image:
    radial-gradient(ellipse at 8% 8%, rgba(167, 139, 250, .38), transparent 46%),
    radial-gradient(ellipse at 92% 12%, rgba(244, 114, 182, .3), transparent 43%),
    radial-gradient(ellipse at 10% 92%, rgba(34, 211, 238, .3), transparent 45%),
    radial-gradient(ellipse at 90% 90%, rgba(99, 102, 241, .32), transparent 47%),
    url('/chat-pattern.svg'),
    linear-gradient(145deg, rgba(249, 244, 255, .9), rgba(228, 246, 255, .88));
}

.chat-wallpaper-sunset {
  background-color: #fff3ed;
  background-image:
    radial-gradient(ellipse at 8% 10%, rgba(251, 191, 36, .34), transparent 44%),
    radial-gradient(ellipse at 92% 8%, rgba(251, 113, 133, .33), transparent 45%),
    radial-gradient(ellipse at 9% 92%, rgba(251, 146, 60, .28), transparent 43%),
    radial-gradient(ellipse at 90% 90%, rgba(192, 132, 252, .28), transparent 47%),
    url('/chat-pattern.svg'),
    linear-gradient(145deg, rgba(255, 249, 232, .92), rgba(250, 235, 255, .9));
}

.chat-wallpaper-mint {
  background-color: #eaf8f4;
  background-image:
    radial-gradient(ellipse at 8% 9%, rgba(52, 211, 153, .34), transparent 46%),
    radial-gradient(ellipse at 92% 10%, rgba(34, 211, 238, .28), transparent 44%),
    radial-gradient(ellipse at 10% 92%, rgba(163, 230, 53, .22), transparent 43%),
    radial-gradient(ellipse at 90% 90%, rgba(96, 165, 250, .3), transparent 47%),
    url('/chat-pattern.svg'),
    linear-gradient(145deg, rgba(237, 253, 247, .92), rgba(229, 244, 255, .9));
}

.telegram-bubble-in {
  border: 1px solid rgba(226, 232, 240, .96);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 2px 5px rgba(15, 23, 42, .06), 0 10px 24px -18px rgba(15, 23, 42, .22);
}

.telegram-bubble-in::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -7px;
  width: 12px;
  height: 14px;
  background: rgba(255, 255, 255, .97);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.telegram-bubble-out {
  border: 1px solid rgba(147, 197, 253, .75);
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 52%, #eff6ff 100%);
  box-shadow: 0 3px 7px rgba(37, 99, 235, .1), 0 12px 28px -18px rgba(37, 99, 235, .38);
}

.telegram-bubble-out::before {
  content: '';
  position: absolute;
  right: -7px;
  bottom: -1px;
  width: 12px;
  height: 14px;
  background: #e8f3ff;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.group:hover .telegram-bubble-in {
  box-shadow: 0 3px 8px rgba(15, 23, 42, .08), 0 14px 30px -20px rgba(15, 23, 42, .28);
}

.group:hover .telegram-bubble-out {
  box-shadow: 0 4px 10px rgba(37, 99, 235, .13), 0 16px 32px -20px rgba(37, 99, 235, .45);
}

@keyframes message-in-left {
  from { opacity: 0; transform: translate3d(-18px, 8px, 0) scale(.96); }
  65% { opacity: 1; transform: translate3d(2px, -1px, 0) scale(1.01); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes message-in-right {
  from { opacity: 0; transform: translate3d(18px, 8px, 0) scale(.96); }
  65% { opacity: 1; transform: translate3d(-2px, -1px, 0) scale(1.01); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes incoming-notice {
  from { opacity: 0; transform: translate3d(24px, -12px, 0) scale(.94); }
  70% { opacity: 1; transform: translate3d(-3px, 1px, 0) scale(1.01); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes conversation-select {
  0% {
    transform: translate3d(0, 2px, 0) scale(.988);
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
  }
  58% {
    transform: translate3d(0, -1px, 0) scale(1.003);
    box-shadow: 0 12px 28px -15px rgba(37, 99, 235, .48);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 9px 24px -15px rgba(37, 99, 235, .52), 0 0 0 1px rgba(96, 165, 250, .1);
  }
}

@keyframes conversation-sheen {
  from { transform: translate3d(-170%, 0, 0) skewX(-18deg); opacity: 0; }
  18% { opacity: .7; }
  to { transform: translate3d(470%, 0, 0) skewX(-18deg); opacity: 0; }
}

.conversation-selected {
  animation: conversation-select .42s cubic-bezier(.2, .82, .2, 1) both;
}

.conversation-selected::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .78), transparent);
  animation: conversation-sheen .62s cubic-bezier(.2, .7, .2, 1) .04s both;
}

@layer utilities {
  .animate-message-in-left { animation: message-in-left .34s cubic-bezier(.2,.8,.2,1) both; }
  .animate-message-in-right { animation: message-in-right .34s cubic-bezier(.2,.8,.2,1) both; }
  .animate-incoming-notice { animation: incoming-notice .42s cubic-bezier(.2,.9,.2,1) both; }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-selected,
  .conversation-selected::after,
  .auth-message,
  .auth-translation-dot,
  .auth-floating-chip {
    animation: none;
  }
}

.auth-corner-glow {
  background:
    radial-gradient(circle at 12% 12%, rgba(96, 165, 250, .16), transparent 28rem),
    radial-gradient(circle at 92% 86%, rgba(125, 211, 252, .12), transparent 24rem);
}

.auth-preview-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
  background-size: 24px 24px;
}

@keyframes auth-message-in {
  from { opacity: .62; transform: translate3d(-8px, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes auth-message-out {
  from { opacity: .62; transform: translate3d(8px, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes auth-translation {
  0%, 17% { opacity: 0; transform: translateX(0); }
  24% { opacity: 1; }
  40% { opacity: 1; transform: translateX(92px); }
  48%, 100% { opacity: 0; transform: translateX(92px); }
}

@keyframes auth-chip-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

.auth-message-in { animation: auth-message-in .48s cubic-bezier(.2,.8,.2,1) both; }
.auth-message-out { animation: auth-message-out .48s cubic-bezier(.2,.8,.2,1) .16s both; }
.auth-translation-dot { animation: auth-translation 8s ease-in-out infinite; }
.auth-floating-chip { animation: auth-chip-float 4s ease-in-out infinite; }

/* RTL 微调 */
[dir='rtl'] .rtl-flip {
  transform: scaleX(-1);
}