:root{
  --bg: #bcebe6;
  --panel: #ffffff;
  --text: #222;
  --muted: #6b6f76;
  --accent: #17191b;
  --sent-bg: #d0e7ff;
  --recv-bg: #e9ecef;
}
/* Top Header */
.app-header {
  background: #bed2e7;   
  color: rgb(8, 1, 1);          
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border-bottom: 2px solid #031324;
}

/* Bottom Composer */
.composer {
  background: #bed2e7;   
  border-top: 2px solid #ccc;
  display:flex;
  gap:12px;
  padding:12px;
  align-items:end;
}

/* Shared container */
.effect-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
/* Default */
body {
  background: linear-gradient(180deg,var(--bg), #ffffff00 30%);
}
/* 🌞 Light Theme */
[data-theme="light"] body {
  background: linear-gradient(180deg, #f8f9fa, #bccee5);
}
[data-theme="light"] .chat-area {
  background: linear-gradient(180deg, #a4cfdbae, #7ea2c6);
  color: #222;
}
[data-theme="light"] .message.sent {
  background: #d0e7ff;
}
[data-theme="light"] .message.recv {
  background: #e9ecef;
}
[data-theme="light"] {
  --accent: #031538; 
}
[data-theme="light"] #send-btn {
  background: var(--accent);
  color: #fff;
}
[data-theme="light"] .app-header {
  background: #d7e8f7; 
  color: #000;
}
[data-theme="light"] .composer {
  background: #d7e8f7;
  color: #000;
}

/* 🌙 Dark Theme */
[data-theme="dark"] body {
  background: linear-gradient(180deg, #1e1e1e, #a0adf060);
}
[data-theme="dark"] .chat-area {
  background: linear-gradient(180deg, #070707, #03030395);
  color: #f1f1f1;
}
[data-theme="dark"] .message.sent {
  background: #3a3f58;
  color: #fff;
}
[data-theme="dark"] .message.recv {
  background: #2b2b2b;
  color: #ddd;
}
[data-theme="dark"] {
  --accent: #2c0d6e9b; /* Orange accent */
}
[data-theme="dark"] #send-btn {
  background: var(--accent);
  color: #000;
}
[data-theme="dark"] .app-header {
  background: #2b242e88; 
  color: #000;
}
[data-theme="dark"] .composer {
  background: #2b242e88;
  color: #000;
}
/* 🌌 Midnight Theme */
[data-theme="midnight"] body {
  background: radial-gradient(circle at top left, #232526, #64a9efb6);
}
[data-theme="midnight"] .chat-area {
  background: radial-gradient(circle at top left, #084664d6, #011f3d68);
  color: #eee;
}
[data-theme="midnight"] .message.sent {
  background: #031a42;
  color: #fff;
}
[data-theme="midnight"] .message.recv {
  background: #2d3748;
  color: #eee;
}
[data-theme="midnight"] {
  --accent: #4fa8d1; 
}
[data-theme="midnight"] #send-btn {
  background: var(--accent);
  color: #fff;
}
[data-theme="midnight"] .app-header {
  background: #84cfe388; 
  color: #000;
}
[data-theme="midnight"] .composer {
  background: #84cfe388;
  color: #000;
}
/* ❤️ Hearts Theme */
[data-theme="hearts"] body {
  background: linear-gradient(135deg, #ffdde1, #771533a1);
}
[data-theme="hearts"] .chat-area {
  background: linear-gradient(135deg, #e45061, #eeb5bd);
}
[data-theme="hearts"] .message.sent {
  background: #421003;
  color: #fff;
}
[data-theme="hearts"] .message.recv {
  background: #482d34;
  color: #eee;
}
[data-theme="hearts"] {
  --accent: #e63946; /* Strong red */
}
[data-theme="hearts"] #send-btn {
  background: var(--accent);
  color: #fff;
}
[data-theme="hearts"] .app-header {
  background: #e2b29d88; 
  color: #100f0f;
}
[data-theme="hearts"] .composer {
  background: #e2b29d88;
  color: #000;
}
/* 🌸 Bestie Theme */
[data-theme="bestie"] body {
  background: linear-gradient(135deg, #fbc2eb, #b6a2dbac);
}
[data-theme="bestie"] .chat-area {
  background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}
[data-theme="bestie"] .message.sent {
  background: #033942;
  color: #fff;
}
[data-theme="bestie"] .message.recv {
  background: #372d48;
  color: #eee;
}
[data-theme="bestie"] {
  --accent: #c26091; /* Pink accent */
}
[data-theme="bestie"] #send-btn {
  background: var(--accent);
  color: #fff;
}
[data-theme="bestie"] .app-header {
  background: #e87aad88; 
  color: #100f0f;
}
[data-theme="bestie"] .composer {
  background: #e87aad88;
  color: #000;
}

/* 🌌 Galaxy Theme */
[data-theme="galaxy"] body {
  background: radial-gradient(circle at top left, #161239, #202443, #0e0e668e);
}
[data-theme="galaxy"] .chat-area {
  background: radial-gradient(circle at top left, #14102d, #2f2864be, #1721e270);
  color: #f1f1f1;
}
[data-theme="galaxy"] .message.sent {
  background: #030642;
  color: #fff;
}
[data-theme="galaxy"] .message.recv {
  background: #1c2638;
  color: #eee;
}
[data-theme="galaxy"] {
  --accent: #6a5acd; /* Slate blue / galaxy */
}
[data-theme="galaxy"] #send-btn {
  background: var(--accent);
  color: #fff;
}
[data-theme="galaxy"] .app-header {
  background: #d67ae888; 
  color: #100f0f;
}
[data-theme="galaxy"] .composer {
  background: #d67ae888;
  color: #000;
}
/* 🦄 Unicorn Theme */
[data-theme="unicorn"] body {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #4f464187);
}
[data-theme="unicorn"] .chat-area {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
}
[data-theme="unicorn"] .message.sent {
  background: #3d2644;
  color: #fff;
}
[data-theme="unicorn"] .message.recv {
  background: #482d30;
  color: #eee;
}
[data-theme="unicorn"] {
  --accent: #ff6e97; /* Magical pink */
}
[data-theme="unicorn"] #send-btn {
  background: var(--accent);
  color: #fff;
}
[data-theme="unicorn"] .app-header {
  background: #ea976a88; 
  color: #100f0f;
}
[data-theme="unicorn"] .composer {
  background: #ea976a88;
  color: #000;
}
/* Remove floating emoji effects */
.effect-container {
  display: none;
}



*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg), #ffffff00 30%);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* App layout */
.app{
  width:100%;
  max-width:880px;
  height:80vh;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border-radius:14px;
  box-shadow:0 8px 30px rgba(13,24,40,0.15);
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.04);
}

/* header */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border-bottom:1px solid rgba(0,0,0,0.04);
}
.app-header h1{
  margin:0;
  font-size:18px;
  letter-spacing:0.2px;
}
.header-controls{
  display:flex;
  gap:10px;
  align-items:center;
}
.header-controls select, .header-controls button{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:transparent;
  color:var(--text);
  font-size:13px;
}

/* chat area */
.chat-area{
  flex:1 1 auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  background:
    radial-gradient(600px 120px at 10% 0%, rgba(255,255,255,0.03), transparent 10%),
    linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}

/* message bubbles */
.message{
  max-width:78%;
  padding:10px 12px;
  border-radius:14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  font-size:14px;
  line-height:1.4;
  display:inline-block;
  word-break:break-word;
  position:relative;
}
.meta{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:6px;
}

/* sent vs recv alignment */
.row{
  display:flex;
  width:100%;
}
.message.sent {
  background: var(--sent-bg, #d0e7ff);
  color: var(--text);
  border-bottom-right-radius: 4px;
  margin-left: auto;         /* stays aligned right */
  max-width: 85%;            /* bigger container */
  padding: 15px 30px;        /* more padding inside */
  font-size: 17px;           /* slightly bigger text */
}

.message.recv {
  background: var(--recv-bg, #f1f3f5);
  color: var(--text);
  border-bottom-left-radius: 4px;
  margin-right: auto;        /* stays aligned left */
  max-width: 85%;            /* bigger container */
  padding: 15px 30px;        /* more padding inside */
  font-size: 17px;           /* slightly bigger text */
}


.row.sent{justify-content:flex-end;}
.row.recv{justify-content:flex-start;}

/* default bubble colors */
.message.sent{ background:var(--sent-bg, #d0e7ff); color:var(--text); border-bottom-right-radius:4px;}
.message.recv{ background:var(--recv-bg, #f1f3f5); color:var(--text); border-bottom-left-radius:4px;}

/* composer */
.composer{
  display:flex;
  gap:12px;
  padding:12px;
  border-top:1px solid rgba(0,0,0,0.04);
  align-items:end;
}
#message-input{
  flex:1;
  min-height:44px;
  max-height:140px;
  padding:10px 12px;
  resize:vertical;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
  background:transparent;
  color:var(--text);
  font-size:14px;
  outline:none;
}
.composer-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#send-btn{
  padding:10px 14px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:white;
  font-weight:600;
}
#emoji-help{
  padding:8px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:transparent;
  cursor:default;
}
/* Base animation for messages */
.message {
  animation: fadeInUp 0.4s ease both;
}

/* Different animations for sent and received */
.message.sent {
  animation: slideInRight 0.4s ease both;
}

.message.recv {
  animation: slideInLeft 0.4s ease both;
}

/* Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* small screens */
@media (max-width:640px){
  .app{height:92vh; padding:0}
  .header-controls{flex-wrap:wrap}
  .bubble-theme{display:none}
}