/* --- MONAD THEME STYLES --- */
* { box-sizing: border-box; }

body, html { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  /* Fallback for older browsers, dvh for modern mobile (handles keyboard popups perfectly) */
  height: 100%; 
  height: 100dvh; 
  background-color: #0b0a10; 
  color: #ffffff; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
}

:root { 
  --app-primary: #8D6BFF; 
  --app-primary-glow: rgba(141, 107, 255, 0.4);
  --app-bg: #0b0a10; 
  --app-surface: #14121c; 
  --app-bot-bubble: #1e1b29; 
  --app-bot-text: #e0e0e0; 
  --app-user-bubble: #8D6BFF; 
  --app-user-text: #ffffff; 
  --app-border: 1px solid #2a2638; 
  --terminal-font: 'Courier New', Courier, monospace;
}

/* --- ANIMATIONS --- */
@keyframes monadPulse { 
  0% { box-shadow: 0 0 5px var(--app-primary-glow); } 
  50% { box-shadow: 0 0 25px var(--app-primary), 0 0 40px var(--app-primary-glow); } 
  100% { box-shadow: 0 0 5px var(--app-primary-glow); } 
}

@keyframes initiatePulse {
  0% { box-shadow: 0 0 5px rgba(141, 107, 255, 0.1); text-shadow: 0 0 2px rgba(141, 107, 255, 0.3); }
  100% { box-shadow: 0 0 15px rgba(141, 107, 255, 0.5), inset 0 0 8px rgba(141, 107, 255, 0.2); text-shadow: 0 0 8px var(--app-primary); }
}

/* Chat bubble entrance physics */
@keyframes popIn {
  0% { opacity: 0; transform: translateY(15px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes blinkText { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* =========================================
   SPLASH SCREEN (FIRST INTERFACE)
   ========================================= */
#monad-splash-screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100dvh;
  background: radial-gradient(circle at center, #14121c 0%, #0b0a10 80%);
  z-index: 100; display: flex; justify-content: center; align-items: center; flex-direction: column;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#monad-splash-screen.fade-out { opacity: 0; pointer-events: none; transform: scale(1.05); }

.splash-corners .corner { position: absolute; font-family: var(--terminal-font); font-size: 13px; color: #6b6485; letter-spacing: 2px; }
.corner.top-left { top: 30px; left: 30px; }
.corner.top-right { top: 30px; right: 30px; text-align: right; }
.corner.bottom-left { bottom: 30px; left: 30px; }
.corner.bottom-right { bottom: 30px; right: 30px; }
.corner.synced { color: #00ffaa; text-shadow: 0 0 5px #00ffaa; animation: blinkText 2s infinite; }

.splash-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.splash-subtitle { font-family: var(--terminal-font); font-size: 14px; letter-spacing: 4px; color: var(--app-primary); }
.big-monad-logo { display: block; width: 140px; height: 140px; object-fit: contain; margin: 30px 0; animation: monadPulse 3s infinite alternate; border-radius: 50%; }
.splash-title { font-size: 42px; margin: 0; font-weight: 800; letter-spacing: 6px; text-shadow: 0 0 15px var(--app-primary-glow); }
.splash-powered { font-family: var(--terminal-font); font-size: 13px; letter-spacing: 3px; color: #888; margin-bottom: 40px; }

#initiate-btn {
  background: transparent; border: 1px solid var(--app-primary); color: var(--app-primary); font-size: 16px; padding: 18px 35px; letter-spacing: 3px; font-family: var(--terminal-font); cursor: pointer; transition: all 0.3s; text-transform: uppercase; position: relative; overflow: hidden; animation: initiatePulse 2s infinite alternate ease-in-out;
}
#initiate-btn:hover { background: rgba(141, 107, 255, 0.15); box-shadow: 0 0 25px rgba(141, 107, 255, 0.6), inset 0 0 15px rgba(141, 107, 255, 0.3); text-shadow: 0 0 10px #ffffff; transform: scale(1.02); }
#initiate-btn:active { transform: scale(0.98); } /* Mobile tap interaction */

/* =========================================
   CHAT WINDOW STYLES
   ========================================= */
.hidden-chat { opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.active-chat { opacity: 1 !important; pointer-events: all !important; transform: translateY(0) !important; }

#monad-chat-window { 
  width: 100%; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; 
  position: absolute; background: var(--app-bg); 
  /* Smooth backdrop for desktop */
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
}

#monad-title-bar { background: var(--app-surface); color: #fff; padding: 16px 20px; font-weight: 600; font-size: 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: var(--app-border); z-index: 10; flex-shrink: 0; }
.app-header-left { display: flex; align-items: center; gap: 12px; }

#back-to-splash-btn { cursor: pointer; font-size: 18px; opacity: 0.7; transition: all 0.2s ease; margin-right: 4px; padding: 5px; }
#back-to-splash-btn:hover { opacity: 1; color: var(--app-primary); transform: translateX(-3px); }
#back-to-splash-btn:active { transform: scale(0.9); }

.bot-avatar { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; animation: monadPulse 2s infinite ease-in-out; flex-shrink: 0; border-radius: 50%; }
.bot-avatar img { width: 100%; height: 100%; object-fit: contain; }

#clear-chat-btn { cursor: pointer; font-size: 18px; opacity: 0.7; transition: 0.2s; padding: 5px; }
#clear-chat-btn:hover { opacity: 1; transform: scale(1.1); }
#clear-chat-btn:active { transform: scale(0.9); }

#monad-chat-box { flex: 1; padding: 25px 20px; overflow-y: auto; background: var(--app-bg); font-size: 15px; line-height: 1.6; scroll-behavior: smooth; }
#monad-chat-box::-webkit-scrollbar { width: 6px; }
#monad-chat-box::-webkit-scrollbar-track { background: var(--app-bg); }
#monad-chat-box::-webkit-scrollbar-thumb { background: var(--app-surface); border-radius: 10px; }
#monad-chat-box::-webkit-scrollbar-thumb:hover { background: var(--app-primary); }

/* Add entrance animation to all rows */
.monad-msg-row { margin-bottom: 20px; display: flex; flex-direction: column; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; }

.monad-bot-bubble { white-space: pre-wrap; color: var(--app-bot-text); align-self: flex-start; max-width: 85%; background: var(--app-bot-bubble); padding: 14px 20px; border-radius: 4px 20px 20px 20px; border-left: 3px solid var(--app-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.monad-user-bubble { white-space: pre-wrap; color: var(--app-user-text); align-self: flex-end; max-width: 85%; background: var(--app-user-bubble); padding: 14px 20px; border-radius: 20px 4px 20px 20px; box-shadow: 0 4px 15px rgba(141, 107, 255, 0.2); }

#monad-input-footer { display: flex; padding: 15px 20px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); background: var(--app-surface); align-items: center; border-top: var(--app-border); flex-shrink: 0; gap: 12px; }

/* Font size 16px is required on mobile inputs to prevent iOS auto-zoom */
#monad-input-text { flex: 1; background: var(--app-bg); border: 1px solid #332d4a; color: #fff; padding: 14px 20px; outline: none; border-radius: 12px; font-size: 16px; transition: 0.3s; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
#monad-input-text:focus { border-color: var(--app-primary); box-shadow: 0 0 0 2px rgba(141, 107, 255, 0.2); }
#monad-input-text::placeholder { color: #6b6485; font-size: 15px; }
#monad-input-text:read-only { background: #110f18; color: #4a455c; cursor: not-allowed; border-color: #221e30; }

#monad-send-btn { width: 48px; height: 48px; border-radius: 12px; background: var(--app-primary); border: none; cursor: pointer; color: #fff; display: flex; justify-content: center; align-items: center; flex-shrink: 0; transition: 0.2s; font-size: 18px; }
#monad-send-btn:hover { background: #ab8eff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(141, 107, 255, 0.4); }
#monad-send-btn:active { transform: scale(0.9); }
#monad-send-btn:disabled { background: #332d4a; color: #6b6485; cursor: not-allowed; box-shadow: none; transform: none; }

.typing-indicator { font-family: var(--terminal-font); font-style: italic; color: var(--app-primary); opacity: 0.8; animation: blinkText 1.5s infinite ease-in-out; border-left: none; background: transparent; padding: 0; box-shadow: none; }

/* RESPONSIVE LOGIC */
@media (max-width: 600px) {
  .splash-corners .corner { display: none; } 
  .splash-title { font-size: 28px; }
  .big-monad-logo { width: 100px; height: 100px; }
  #monad-title-bar { padding: 12px 15px; } 
  #monad-chat-box { font-size: 14px; padding: 15px; } 
  .monad-msg-row { margin-bottom: 12px; } 
  .monad-bot-bubble, .monad-user-bubble { max-width: 90%; padding: 12px 16px; } 
  #monad-input-footer { padding: 10px 15px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } 
  #monad-send-btn { width: 44px; height: 44px; } 
}

@media (min-width: 768px) { 
  /* Desktop specific formatting - turns into a sleek centered widget */
  #monad-chat-window { 
    max-width: 800px; 
    height: 90dvh; 
    border-radius: 16px; 
    border: var(--app-border); 
  } 
  .monad-bot-bubble, .monad-user-bubble { max-width: 70%; } 
  .splash-title { font-size: 50px; }
               }