/* ============================================================
   RU CHAT — landing-v2 concept styling.
   Light panel in the concept's ink-and-paper language. Avatar
   animation carried over from the live widget (livechat.css).
   ============================================================ */

/* ── Mascot ────────────────────────────────────────────────── */
.rlc-avatar { display: block; }
.rlc-avatar .rlc-eyes {
  transform-box: fill-box; transform-origin: center;
  animation: rlcLook 12s ease-in-out infinite;
}
@keyframes rlcLook {
  0%, 48%, 100% { transform: translate(0, 0); }
  52%, 60% { transform: translate(2.4px, -0.6px); }
  66%, 74% { transform: translate(-2px, 0.4px); }
  80% { transform: translate(0, 0); }
}
.rlc-avatar .rlc-eye {
  transform-box: fill-box; transform-origin: center;
  animation: rlcBlink 12s infinite;
}
.rlc-avatar .rlc-eye-r { animation-name: rlcBlinkWink; }
@keyframes rlcBlink {
  0%, 22%, 26%, 61%, 65%, 100% { transform: scaleY(1); }
  24%, 63% { transform: scaleY(0.12); }
}
@keyframes rlcBlinkWink {
  0%, 22%, 26%, 61%, 65%, 86%, 92%, 100% { transform: scaleY(1); }
  24%, 63%, 89% { transform: scaleY(0.12); }
}
.rlc-avatar.rlc-follow .rlc-eyes { animation: none; }
.rlc-avatar .rlc-mouth {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0); opacity: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.15s;
}
.rlc-avatar.rlc-surprise .rlc-mouth, .rlc-avatar.rlc-talk .rlc-mouth { transform: scale(1); opacity: 1; }
.rlc-avatar.rlc-talk .rlc-mouth-o {
  transform-box: fill-box; transform-origin: center;
  animation: rlcTalk 0.6s ease-in-out infinite alternate;
}
@keyframes rlcTalk { from { transform: scaleY(1); } to { transform: scaleY(0.4); } }
.rlc-avatar .rlc-antenna-dot { animation: rlcGlow 2.4s ease-in-out infinite; }
@keyframes rlcGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .rlc-avatar .rlc-eyes, .rlc-avatar .rlc-eye, .rlc-avatar .rlc-antenna-dot, .rlc-avatar .rlc-mouth-o { animation: none; }
}

/* ── Panel ─────────────────────────────────────────────────── */
.rlc-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 330;
  width: 420px; max-width: calc(100vw - 24px);
  height: 660px; max-height: calc(100vh - 48px);
  background: #F8F8F7;
  border: 3px solid #0A0A0A; border-radius: 18px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 90px rgba(10, 10, 10, 0.30);
  font-family: var(--font-body); color: #0A0A0A;
  opacity: 0; transform: translateY(14px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 0.7, 0.35, 1);
}
.rlc-panel.rlc-open { opacity: 1; transform: translateY(0) scale(1); }
.rlc-panel.rlc-hidden { display: none; }

.rlc-head {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  background: #0A0A0A; color: #FFF; flex: none;
  cursor: grab; touch-action: none; user-select: none;
}
.rlc-head.rlc-dragging { cursor: grabbing; }
.rlc-head .rlc-avatar { width: 42px; height: 42px; }
.rlc-head .nm {
  font-family: var(--font-display-ultra); font-weight: 900; font-size: 20px;
  letter-spacing: 0.03em; line-height: 1;
}
.rlc-head .rl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}
.rlc-head .rl .live {
  width: 6px; height: 6px; border-radius: 50%; background: #BBCD48;
  animation: rlcGlow 2s ease-in-out infinite;
}
.rlc-head .spacer { flex: 1; }
.rlc-close {
  background: rgba(255, 255, 255, 0.12); border: none; color: #FFF; width: 32px; height: 32px;
  border-radius: 9px; font-size: 18px; line-height: 1; cursor: pointer;
  transition: background 0.12s;
}
.rlc-close:hover { background: rgba(255, 255, 255, 0.25); }

.rlc-log {
  flex: 1; overflow-y: auto; padding: 18px 16px; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px;
  background: #F8F8F7;
}
.rlc-msg { max-width: 88%; font-size: 14px; line-height: 1.5; }
.rlc-msg.user {
  align-self: flex-end; background: var(--color-guava); color: #000;
  border-radius: 14px 14px 4px 14px; padding: 10px 14px;
}
.rlc-msg.bot {
  align-self: flex-start; background: #FFF; border: 1px solid #E4E2DE; color: #2C2B2B;
  border-radius: 14px 14px 14px 4px; padding: 11px 14px;
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.04);
}
.rlc-msg.bot p + p { margin-top: 8px; }
.rlc-msg.bot strong { color: #0A0A0A; }
.rlc-msg.bot a { color: #0A0A0A; border-bottom: 1px solid var(--color-guava); text-decoration: none; }
.rlc-status {
  align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #7A7A76; display: flex; align-items: center; gap: 8px;
}
.rlc-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-acai); animation: rlcGlow 1s infinite; }
.rlc-note {
  align-self: center; text-align: center; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase; color: #7A7A76;
  border: 1px dashed #D6D4CF; border-radius: 9px; padding: 8px 12px;
}
.rlc-typing {
  display: inline-flex; gap: 4px; padding: 12px 14px; align-self: flex-start;
  background: #FFF; border: 1px solid #E4E2DE; border-radius: 14px 14px 14px 4px;
}
.rlc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-guava); animation: rlcGlow 1.2s infinite; }
.rlc-typing span:nth-child(2) { animation-delay: 0.2s; }
.rlc-typing span:nth-child(3) { animation-delay: 0.4s; }

.rlc-input-row {
  flex: none; border-top: 1px solid #E4E2DE; padding: 12px;
  display: flex; gap: 8px; align-items: flex-end; background: #FFF;
}
.rlc-input {
  flex: 1; resize: none; max-height: 110px; min-height: 42px;
  font-family: var(--font-body); font-size: 14px; color: #0A0A0A; line-height: 1.4;
  background: #F8F8F7; border: 1px solid #E4E2DE; border-radius: 12px; padding: 10px 12px;
  transition: border-color 0.12s;
}
.rlc-input:focus { outline: none; border-color: var(--color-guava); }
.rlc-input::placeholder { color: rgba(10, 10, 10, 0.38); }
.rlc-input:disabled { opacity: 0.55; }
.rlc-send {
  width: 42px; height: 42px; flex: none; border-radius: 11px; border: none; cursor: pointer;
  background: var(--color-guava); color: #000;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.rlc-send:hover:not(:disabled) { background: #ff6fb6; }
.rlc-send:disabled { opacity: 0.35; cursor: not-allowed; }
.rlc-foot {
  flex: none; text-align: center; padding: 0 12px 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #A9A8A3; background: #FFF;
}

.rlc-verify {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #7A7A76; border-top: 1px solid #E4E2DE; background: #FFF;
}
.rlc-verify .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-matcha); animation: rlcGlow 1.2s infinite; }
.rlc-verify[hidden] { display: none; }

@media (max-width: 480px) {
  .rlc-panel { right: 8px; bottom: 8px; height: 80vh; }
  .rlc-input { font-size: 16px; }
}