/* ========================================
   TOTA JI — GLOBAL STYLES
   ======================================== */
:root {
   --bg-dark: #0a0e1a;
   --bg-card: rgba(20, 30, 60, 0.7);
   --bg-glass: rgba(255, 255, 255, 0.06);
   --glass-border: rgba(255, 255, 255, 0.1);
   --primary: #00e676;
   --primary-glow: rgba(0, 230, 118, 0.3);
   --secondary: #ffd600;
   --accent: #ff6d00;
   --text: #e8eaf6;
   --text-dim: #90a4ae;
   --danger: #ff5252;
   --chat-user: rgba(0, 230, 118, 0.12);
   --chat-tota: rgba(255, 214, 0, 0.08);
   --radius: 16px;
   --radius-sm: 10px;
   --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
   --font-main: 'Poppins', sans-serif;
   --font-fun: 'Baloo 2', cursive;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html,
body {
   height: 100%;
   font-family: var(--font-main);
   background: var(--bg-dark);
   color: var(--text);
   overflow: hidden;
}

body {
   background: linear-gradient(135deg, #0a0e1a 0%, #121832 40%, #0d1225 100%);
   background-attachment: fixed;
}

/* Floating particles background */
body::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background:
      radial-gradient(2px 2px at 20% 30%, rgba(0, 230, 118, 0.3), transparent),
      radial-gradient(2px 2px at 70% 20%, rgba(255, 214, 0, 0.2), transparent),
      radial-gradient(2px 2px at 40% 70%, rgba(0, 230, 118, 0.2), transparent),
      radial-gradient(1px 1px at 80% 60%, rgba(255, 255, 255, 0.15), transparent),
      radial-gradient(1px 1px at 10% 80%, rgba(255, 214, 0, 0.15), transparent),
      radial-gradient(2px 2px at 60% 90%, rgba(0, 230, 118, 0.15), transparent);
   pointer-events: none;
   z-index: 0;
   animation: floatParticles 20s ease-in-out infinite;
}

@keyframes floatParticles {

   0%,
   100% {
      opacity: 0.6;
   }

   50% {
      opacity: 1;
   }
}

/* Glass Effect */
.glass-card {
   background: var(--bg-glass);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

/* ========================================
   SCREENS
   ======================================== */
.screen {
   display: none;
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 1;
}

.screen.active {
   display: flex;
}

/* ========================================
   AUTH SCREEN
   ======================================== */
.auth-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 20px;
   gap: 24px;
}

.tota-hero {
   text-align: center;
   animation: fadeInUp 0.8s ease;
}

.tota-img {
   width: 140px;
   height: 140px;
   object-fit: contain;
   filter: drop-shadow(0 0 30px var(--primary-glow));
   border-radius: 50%;
}

.bounce {
   animation: bounce 3s ease-in-out infinite;
}

@keyframes bounce {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-12px);
   }
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.app-title {
   font-family: var(--font-fun);
   font-size: 3rem;
   font-weight: 800;
   background: linear-gradient(135deg, var(--primary), var(--secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1.1;
}

.app-subtitle {
   font-family: var(--font-fun);
   font-size: 1.1rem;
   color: var(--secondary);
   margin-top: 2px;
}

.app-tagline {
   font-size: 0.85rem;
   color: var(--text-dim);
   margin-top: 8px;
   max-width: 300px;
}

/* Auth Card */
.auth-card {
   width: 100%;
   max-width: 380px;
   padding: 24px;
   animation: fadeInUp 1s ease 0.2s both;
}

.auth-tabs {
   display: flex;
   gap: 4px;
   margin-bottom: 20px;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 10px;
   padding: 4px;
}

.auth-tab {
   flex: 1;
   padding: 10px;
   background: none;
   border: none;
   color: var(--text-dim);
   font-family: var(--font-fun);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   border-radius: 8px;
   transition: all 0.3s;
}

.auth-tab.active {
   background: var(--primary);
   color: #000;
}

.input-group {
   position: relative;
   margin-bottom: 14px;
}

.input-icon {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.2rem;
}

.input-group input {
   width: 100%;
   padding: 14px 14px 14px 44px;
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   color: var(--text);
   font-family: var(--font-main);
   font-size: 0.95rem;
   outline: none;
   transition: border 0.3s;
}

.input-group input:focus {
   border-color: var(--primary);
   box-shadow: 0 0 15px var(--primary-glow);
}

.input-group input::placeholder {
   color: var(--text-dim);
}

.btn-primary {
   width: 100%;
   padding: 14px;
   background: linear-gradient(135deg, var(--primary), #00c853);
   border: none;
   border-radius: var(--radius-sm);
   color: #000;
   font-family: var(--font-fun);
   font-size: 1.1rem;
   font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   transition: all 0.3s;
   position: relative;
   overflow: hidden;
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-primary:active {
   transform: translateY(0);
}

.btn-primary::after {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: linear-gradient(transparent, rgba(255, 255, 255, 0.1), transparent);
   transform: rotate(45deg);
   transition: 0.5s;
}

.btn-primary:hover::after {
   left: 100%;
}

.free-credit-badge {
   text-align: center;
   margin-top: 16px;
   padding: 10px;
   background: rgba(255, 214, 0, 0.1);
   border: 1px dashed var(--secondary);
   border-radius: 8px;
   font-size: 0.85rem;
   color: var(--secondary);
}

.sparkle {
   animation: sparkle 1.5s ease infinite;
}

@keyframes sparkle {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.5;
      transform: scale(1.3);
   }
}

/* ========================================
   APP HEADER
   ======================================== */
.app-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
   background: rgba(10, 14, 26, 0.9);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--glass-border);
   z-index: 10;
}

.header-left {
   display: flex;
   align-items: center;
   gap: 10px;
}

.header-tota {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   object-fit: contain;
   filter: drop-shadow(0 0 8px var(--primary-glow));
}

.header-title {
   font-family: var(--font-fun);
   font-size: 1.3rem;
   font-weight: 700;
   background: linear-gradient(to right, var(--primary), var(--secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.header-right {
   display: flex;
   align-items: center;
   gap: 10px;
}

.credit-badge {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   background: rgba(255, 214, 0, 0.15);
   border: 1px solid rgba(255, 214, 0, 0.3);
   border-radius: 20px;
   cursor: pointer;
   transition: all 0.3s;
}

.credit-badge:hover {
   background: rgba(255, 214, 0, 0.25);
   transform: scale(1.05);
}

.credit-icon {
   font-size: 1.1rem;
}

.credit-count {
   font-family: var(--font-fun);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--secondary);
}

.btn-icon {
   background: none;
   border: none;
   font-size: 1.3rem;
   cursor: pointer;
   padding: 6px;
   border-radius: 8px;
   transition: background 0.3s;
}

.btn-icon:hover {
   background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   CHAT AREA
   ======================================== */
#appScreen {
   flex-direction: column;
   height: 100%;
}

.chat-container {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   scroll-behavior: smooth;
}

.chat-container::-webkit-scrollbar {
   width: 4px;
}

.chat-container::-webkit-scrollbar-track {
   background: transparent;
}

.chat-container::-webkit-scrollbar-thumb {
   background: var(--glass-border);
   border-radius: 4px;
}

/* Welcome Message */
.chat-welcome {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   padding: 20px 0;
}

.welcome-tota {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   object-fit: contain;
   filter: drop-shadow(0 0 20px var(--primary-glow));
}

.welcome-bubble {
   max-width: 400px;
   padding: 16px 20px;
   text-align: center;
   font-size: 0.9rem;
   line-height: 1.6;
}

.welcome-bubble p {
   margin-bottom: 8px;
}

.welcome-bubble p:last-child {
   margin-bottom: 0;
}

.welcome-hint {
   color: var(--text-dim);
   font-size: 0.8rem;
}

/* Chat Messages */
.chat-msg {
   display: flex;
   gap: 10px;
   animation: msgIn 0.4s ease;
   max-width: 85%;
}

@keyframes msgIn {
   from {
      opacity: 0;
      transform: translateY(12px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.chat-msg.user {
   align-self: flex-end;
   flex-direction: row-reverse;
}

.chat-msg.tota {
   align-self: flex-start;
}

.msg-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
}

.msg-avatar.user-avatar {
   background: rgba(0, 230, 118, 0.2);
}

.msg-avatar.tota-avatar {
   overflow: hidden;
}

.msg-avatar.tota-avatar img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.msg-bubble {
   padding: 12px 16px;
   border-radius: var(--radius);
   font-size: 0.9rem;
   line-height: 1.6;
   white-space: pre-wrap;
   word-wrap: break-word;
}

.chat-msg.user .msg-bubble {
   background: var(--chat-user);
   border: 1px solid rgba(0, 230, 118, 0.2);
   border-bottom-right-radius: 4px;
}

.chat-msg.tota .msg-bubble {
   background: var(--chat-tota);
   border: 1px solid rgba(255, 214, 0, 0.15);
   border-bottom-left-radius: 4px;
}

/* Typing indicator */
.typing-indicator {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 16px 20px;
}

.typing-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--secondary);
   animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
   animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
   animation-delay: 0.4s;
}

@keyframes typingBounce {

   0%,
   80%,
   100% {
      transform: translateY(0);
      opacity: 0.4;
   }

   40% {
      transform: translateY(-8px);
      opacity: 1;
   }
}

/* ========================================
   INPUT AREA
   ======================================== */
.input-area {
   padding: 12px 16px;
   padding-bottom: 20px;
   background: rgba(10, 14, 26, 0.9);
   backdrop-filter: blur(10px);
   border-top: 1px solid var(--glass-border);
}

.input-bar {
   display: flex;
   align-items: flex-end;
   gap: 8px;
   padding: 8px 12px;
}

.input-bar textarea {
   flex: 1;
   background: none;
   border: none;
   color: var(--text);
   font-family: var(--font-main);
   font-size: 0.95rem;
   resize: none;
   outline: none;
   line-height: 1.5;
   max-height: 100px;
   padding: 8px 0;
}

.input-bar textarea::placeholder {
   color: var(--text-dim);
}

.btn-mic,
.btn-send {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 1.2rem;
   transition: all 0.3s;
   flex-shrink: 0;
}

.btn-mic {
   background: rgba(255, 255, 255, 0.08);
   color: var(--text);
}

.btn-mic:hover {
   background: rgba(255, 255, 255, 0.15);
}

.btn-mic.recording {
   background: var(--danger);
   animation: pulse 1s ease infinite;
}

.btn-send {
   background: linear-gradient(135deg, var(--primary), #00c853);
   color: #000;
}

.btn-send:hover {
   transform: scale(1.08);
   box-shadow: 0 4px 15px var(--primary-glow);
}

@keyframes pulse {

   0%,
   100% {
      box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.4);
   }

   50% {
      box-shadow: 0 0 0 12px rgba(255, 82, 82, 0);
   }
}

.voice-indicator {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 10px;
   color: var(--danger);
   font-size: 0.85rem;
   animation: fadeInUp 0.3s ease;
}

.pulse-ring {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--danger);
   animation: pulse 1s ease infinite;
}

/* ========================================
   MODALS
   ======================================== */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
   animation: fadeIn 0.2s ease;
   padding: 20px;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.modal {
   width: 100%;
   max-width: 420px;
   padding: 28px;
   position: relative;
   animation: slideUp 0.3s ease;
}

@keyframes slideUp {
   from {
      transform: translateY(30px);
      opacity: 0;
   }

   to {
      transform: translateY(0);
      opacity: 1;
   }
}

.small-modal {
   max-width: 340px;
   text-align: center;
}

.modal-close {
   position: absolute;
   top: 12px;
   right: 16px;
   background: none;
   border: none;
   color: var(--text-dim);
   font-size: 1.4rem;
   cursor: pointer;
   transition: color 0.2s;
}

.modal-close:hover {
   color: var(--text);
}

.modal-header {
   text-align: center;
   margin-bottom: 24px;
}

.modal-emoji {
   font-size: 2.5rem;
}

.modal-header h2 {
   font-family: var(--font-fun);
   font-size: 1.5rem;
   margin-top: 8px;
   background: linear-gradient(to right, var(--primary), var(--secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.modal-header p {
   color: var(--text-dim);
   font-size: 0.85rem;
   margin-top: 4px;
}

/* Credit Packs */
.credit-packs {
   display: flex;
   gap: 12px;
}

.pack-card {
   flex: 1;
   padding: 16px 8px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   text-align: center;
   cursor: pointer;
   transition: all 0.3s;
   position: relative;
}

.pack-card:hover {
   border-color: var(--primary);
   transform: translateY(-4px);
   box-shadow: 0 8px 20px rgba(0, 230, 118, 0.15);
}

.pack-card.popular {
   border-color: var(--secondary);
   background: rgba(255, 214, 0, 0.06);
}

.pack-badge {
   position: absolute;
   top: -10px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--secondary);
   color: #000;
   font-size: 0.6rem;
   font-weight: 700;
   padding: 2px 10px;
   border-radius: 10px;
}

.pack-amount {
   font-family: var(--font-fun);
   font-size: 2rem;
   font-weight: 800;
   color: var(--primary);
}

.pack-label {
   font-size: 0.75rem;
   color: var(--text-dim);
   margin-top: -4px;
}

.pack-price {
   font-family: var(--font-fun);
   font-size: 1.3rem;
   font-weight: 700;
   margin-top: 8px;
   color: var(--text);
}

.pack-per {
   font-size: 0.65rem;
   color: var(--text-dim);
   margin-top: 4px;
}

.modal-footer {
   text-align: center;
   font-size: 0.75rem;
   color: var(--text-dim);
   margin-top: 20px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
   .app-title {
      font-size: 2.4rem;
   }

   .tota-img {
      width: 110px;
      height: 110px;
   }

   .auth-card {
      padding: 18px;
   }

   .credit-packs {
      gap: 8px;
   }

   .pack-card {
      padding: 12px 6px;
   }

   .pack-amount {
      font-size: 1.6rem;
   }

   .pack-price {
      font-size: 1.1rem;
   }

   .chat-msg {
      max-width: 92%;
   }
}

/* ========================================
   FOOTER
   ======================================== */
.app-footer {
   text-align: center;
   padding: 16px 20px;
   background: rgba(10, 14, 26, 0.9);
   border-top: 1px solid var(--glass-border);
}

.footer-links {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
}

.footer-links a {
   color: var(--text-dim);
   text-decoration: none;
   font-size: 0.75rem;
   transition: color 0.3s;
}

.footer-links a:hover {
   color: var(--primary);
}

.footer-links span {
   color: var(--glass-border);
   font-size: 0.6rem;
}

.footer-copy {
   color: var(--glass-border);
   font-size: 0.65rem;
   margin-top: 8px;
}