/* File: css/teams-style.css
   Premium Messenger-style visual (single-screen)
   Mobile-first, rounded cards, white composer, gradient background
*/
:root{
  --bg-1: #6C7BFF;
  --bg-2: #4AB3FF;
  --card-bg: #ffffff;
  --muted: #6b7280;
  --accent: #6C7BFF;
  --shadow: 0 10px 30px rgba(12,12,50,0.25);
  --safe-bottom: env(safe-area-inset-bottom,12px);
  --radius: 18px;
  --maxWidth: 980px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#0b1220}
body{
  background: linear-gradient(135deg,var(--bg-1),var(--bg-2));
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;
  min-height:100vh;padding:28px;
}

/* Shell */
.chat-shell{
  width:100%;
  max-width:var(--maxWidth);
  background:linear-gradient(180deg,rgba(255,255,255,0.98),#fff);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:calc(100vh - 120px);
}

/* Header */
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #eef2ff}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(90deg,#1e3a8a,#60a5fa);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;box-shadow:0 6px 18px rgba(99,102,241,0.35)}
.title .name{font-weight:700;color:#0b1220}
.title .subtitle{font-size:12px;color:var(--muted)}

/* Messages area (scrollable) */
.messages{
  padding:20px;
  overflow:auto;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(108,123,255,0.05), transparent 5%),
    radial-gradient(600px 300px at 90% 90%, rgba(74,179,255,0.03), transparent 5%);
  flex:1;
}

/* Single message row */
.message{display:flex;margin-bottom:12px;align-items:flex-end;max-width:100%}
.message.other{justify-content:flex-start}
.message.user{justify-content:flex-end}
.bubble{
  padding:10px 14px;border-radius:14px;max-width:78%;line-height:1.4;box-shadow:0 6px 18px rgba(15,23,42,0.06);
  transition:transform .18s ease,box-shadow .18s ease;
}
.message.other .bubble{background:#f8fafc;color:#0b1220;border:1px solid rgba(6,95,212,0.04)}
.message.user .bubble{background:linear-gradient(90deg,#6C7BFF,#4AB3FF);color:white;box-shadow:0 12px 30px rgba(76,64,201,0.15)}

/* Avatar small dot */
.avatar-dot{width:34px;height:34px;border-radius:9px;background:#c7d2fe;margin-right:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#0b1220}

/* Media */
.bubble img{display:block;max-width:320px;border-radius:10px;margin-top:6px}
.bubble audio{margin-top:6px;width:220px}

/* Typing indicator */
.typing{padding:6px 20px;color:var(--muted);font-size:13px}
.dots{margin-left:6px}

/* Composer (floating white card) */
.composer{
  position:relative;padding:14px 20px;background:transparent;
}
.composer-card{
  position:sticky;bottom:calc(var(--safe-bottom)+12px);display:flex;align-items:flex-end;gap:12px;
  background:var(--card-bg);padding:12px;border-radius:14px;box-shadow:0 12px 30px rgba(15,23,42,0.12);
  border:1px solid rgba(12,18,36,0.04);
}
.icon-btn{background:transparent;border:none;font-size:20px;padding:8px;border-radius:10px;cursor:pointer;color:var(--muted)}
.icon-btn:hover{background:rgba(12,18,36,0.03)}
.composer-main{flex:1;min-width:0}
.media-preview{margin-bottom:8px;position:relative}
.media-preview img{width:180px;height:auto;border-radius:10px;display:block}
.x-btn{position:absolute;top:6px;right:6px;background:#fff;border-radius:999px;padding:4px;border:none;cursor:pointer;box-shadow:0 6px 12px rgba(12,18,36,0.08)}
textarea#messageInput{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(12,18,36,0.04);resize:none;height:42px;font-size:14px}
.helper-row{display:flex;justify-content:space-between;margin-top:6px}
.char{font-size:12px;color:var(--muted)}

/* Actions */
.composer-actions{display:flex;flex-direction:column;gap:8px}
.send-btn{background:linear-gradient(90deg,#6C7BFF,#4AB3FF);color:white;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;box-shadow:0 8px 26px rgba(76,64,201,0.18)}
.send-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}

/* Emoji panel */
.emoji-panel{
  position:fixed;
  bottom:110px;
  left:50%;
  transform:translateX(-50%);
  background:white;
  border-radius:16px;
  padding:12px;
  box-shadow:0 20px 50px rgba(15,23,42,0.12);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(40px,1fr));
  gap:6px;
  width:min(340px,90%);
  z-index:60;
}
.emoji-panel button{
  background:none;
  border:none;
  font-size:22px;
  cursor:pointer;
  transition:transform .15s ease;
}
.emoji-panel button:hover{transform:scale(1.25);}

/* Scroll to bottom button */
.scroll-btn{position:fixed;right:22px;bottom:150px;background:linear-gradient(90deg,#6C7BFF,#4AB3FF);color:white;border:none;width:48px;height:48px;border-radius:12px;box-shadow:0 12px 30px rgba(76,64,201,0.18);cursor:pointer;z-index:60}
.scroll-btn.hidden{display:none}

/* Footer */
.site-footer{margin-top:14px;width:100%;max-width:var(--maxWidth);display:flex;justify-content:center}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:transparent;color:#fff;opacity:0.9;width:100%;}

/* Animations */
@keyframes pop { from{opacity:0;transform:translateY(8px) scale(.98)} to{opacity:1;transform:none} }
.message{animation:pop .28s ease forwards}

/* RESPONSIVE */
@media (max-width:900px){
  .chat-shell{height:calc(100vh - 80px);margin:0 8px;border-radius:14px}
  .bubble{max-width:82%}
  .composer-card{flex-direction:row;gap:8px;padding:10px}
  .composer-actions{flex-direction:row;align-items:center}
  .media-preview img{width:140px}
  .emoji-panel{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:520px){
  body{padding:14px}
  .chat-shell{height:calc(100vh - 60px)}
  .avatar-dot{display:none}
  .composer-card{padding:8px}
  .emoji-panel{bottom:130px}
}
/* ==========================================
   🔧 FIX PATCH — Emoji font + Composer layout + Emoji grid
   ========================================== */

/* 🧠 1. Make emojis render properly across OS */
body, button, textarea, input {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol',
    sans-serif;
}

/* 🧩 2. Responsive Composer Layout (icons in one line) */
.composer-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;           /* allows wrapping if screen small */
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.12);
  border: 1px solid rgba(12,18,36,0.04);
  background: var(--card-bg);
}

.composer-main {
  flex: 1;
  min-width: 180px;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.icon-btn,
.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.icon-btn:hover,
.send-btn:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.1);
}

textarea#messageInput {
  width: 100%;
  min-height: 38px;
  max-height: 35vh;
  resize: none;
  border: 1px solid rgba(12,18,36,0.06);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 15px;
  background: rgba(255,255,255,0.7);
  transition: all 0.2s ease;
}

textarea#messageInput:focus {
  outline: none;
  border-color: rgba(108,123,255,0.6);
  box-shadow: 0 0 6px rgba(108,123,255,0.3);
}

/* 🧠 3. Perfect mobile view adjustments (improved) */
@media (max-width: 600px) {
    /* Keep controls on a single row but allow input to grow/shrink */
    .composer-card {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 10px;
        align-items: center;
    }

    /* action buttons stay in a row and remain reachable */
    .composer-actions {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        flex-shrink: 0;
    }

    /* Input should take remaining space, be readable and not overflow */
    textarea#messageInput {
        font-size: 14px;
        min-height: 36px;
        max-height: 28vh;
        line-height: 1.4;
        padding: 8px 10px;
    }

    /* Maintain comfortable tap targets on most phones */
    .icon-btn, .send-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* Smaller media preview so it doesn't push layout */
    .media-preview img {
        width: 120px;
    }

    /* Emoji panel snaps to screen edges and sits above the composer (accounts for safe area) */
    .emoji-panel {
        left: 8px;
        right: 8px;
        transform: none;
        width: calc(100% - 16px);
        bottom: calc(var(--safe-bottom) + 74px);
        grid-template-columns: repeat(8, 1fr);
        padding: 8px;
        gap: 6px;
    }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .composer-card {
        gap: 6px;
        padding: 6px 8px;
    }

    textarea#messageInput {
        font-size: 13px;
        min-height: 34px;
        max-height: 30vh;
    }

    .icon-btn, .send-btn {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .emoji-panel {
        grid-template-columns: repeat(6, 1fr);
        bottom: calc(var(--safe-bottom) + 78px);
        width: calc(100% - 12px);
        left: 6px;
        right: 6px;
    }
}

/* Landscape / small-tall screens — allow wrapping to avoid input collapse */
@media (max-height: 520px) and (max-width: 900px) {
    .composer-card {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }
    .emoji-panel {
        bottom: calc(var(--safe-bottom) + 92px);
    }
}

/* 🎨 4. Refined Emoji Panel — clean grid & hover */
.emoji-panel {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 20px 50px rgba(15,23,42,0.12);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  width: min(340px, 90%);
  z-index: 60;
}

.emoji-panel button {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.emoji-panel button:hover {
  transform: scale(1.25);
}
/* ==========================================
   ✨ CLEAN MINIMAL COMPOSER — Emoji + Input + Send only
   ========================================== */

/* Global emoji rendering fix */
body, button, textarea, input {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol',
    sans-serif;
}

/* Clean, centered composer */
.composer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12);
  border: 1px solid rgba(12,18,36,0.04);
  background: var(--card-bg, #fff);
}

/* Main input field */
textarea#messageInput {
  flex: 1;
  width: 100%;
  min-height: 40px;
  max-height: 35vh;
  resize: none;
  border: 1px solid rgba(12,18,36,0.06);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  background: rgba(255,255,255,0.9);
  color: #111;
  transition: all 0.25s ease;
}

textarea#messageInput:focus {
  border-color: rgba(108,123,255,0.6);
  box-shadow: 0 0 8px rgba(108,123,255,0.3);
  outline: none;
}

/* Emoji + Send Buttons */
.icon-btn, .send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #007bff, #00d4ff);
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-btn:hover, .send-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,174,255,0.4);
}



/* Emoji picker grid */
.emoji-panel {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 20px 50px rgba(15,23,42,0.12);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  width: min(340px, 90%);
  z-index: 60;
}

.emoji-panel button {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.emoji-panel button:hover {
  transform: scale(1.25);
}
/* ==========================================
   🌟 Welcome Popup Animation + Style
   ========================================== */

#welcomePopup {
  animation: fadeBg 0.5s ease;
}

#welcomePopup .animate-fadeInUp {
  animation: fadeInUp 0.6s ease both;
}

@keyframes fadeBg {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Responsive popup */
@media (max-width: 600px) {
  #welcomePopup .animate-fadeInUp {
    padding: 16px;
  }
}
/* ==========================================
   🧾 FIX — Proper Text Wrapping + Line Breaks
   ========================================== */

/* Make text automatically wrap inside bubbles */
.bubble span {
  display: block;
  white-space: pre-wrap;     /* preserves line breaks and wraps long lines */
  word-break: break-word;    /* break long words to fit bubble */
  overflow-wrap: break-word; /* cross-browser support */
  font-size: 15px;
  line-height: 1.5;
  color: inherit;
}

/* Ensure bubbles resize neatly for mobile */
@media (max-width: 600px) {
  .bubble span {
    font-size: 14px;
    line-height: 1.45;
  }
}