:root{
  color-scheme: light;
}
*{box-sizing:border-box}

html,body{
  margin:0;
  height:100%;
  font-family: arial; /*-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; */
  background:#e9edf4;
  color:#172033;
  /* Lock the app to the viewport: no page scroll, no pull-to-refresh / bounce /
     swipe back-forward navigation when swiping outside the message list. */
  overflow:hidden;
  overscroll-behavior:none;
  width:100%;
  max-width:100%;
}

body { background: radial-gradient(circle at top left, rgba(144, 76, 255, .45), transparent 34%), radial-gradient(circle at bottom right, rgba(47, 134, 255, .38), transparent 36%), linear-gradient(135deg, #101a3a, #16245a); }

.screen{display:none;height:100dvh}
.screen.active{display:flex}

.login-card{
  margin:auto;
  width:min(92vw,390px);
  background:#fff;
  padding:28px;
  border-radius:28px;
  box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.hint{color:#6b6b6f;margin:0 0 20px}

.login-card input{
  width:100%;
  font-size:18px;
  padding:15px;
  margin:8px 0;
  border:1px solid #d0d6df;
  border-radius:14px;
  text-transform:lowercase;
}

.login-card button{
  width:100%;
  border:0;
  background:#2f63e8;
  color:#fff;
  font-weight:700;
  font-size:18px;
  border-radius:16px;
  padding:15px;
  margin-top:12px;
}

#chat.screen.active{
  display:flex;
  flex-direction:column;
  background:#eef2f7;
}

.chat-header{
  height:64px;
  background:#101a3a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 28px;
  flex-shrink:0;
}

.brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-bubble{
  width:40px;
  height:40px;
  border:2px solid #904cff;
  border-right-color:#2f86ff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:800;
  font-style:italic;
}

.logo-bubble span{color:#6d8dff}

.brand-text{
  font-size:28px;
  font-weight:800;
  font-style:italic;
  letter-spacing:-1px;
}

.brand-text span{color:#904cff}

.header-temp{
  display:none;
  margin-left:10px;
  font-size:15px;
  font-weight:800;
  font-style:normal;
  color:#fff;
  background:rgba(255,255,255,.14);
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
  line-height:1.2;
}
.header-temp.show{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.header-temp-icon{ font-size:14px; line-height:1; font-style:normal; }
.header-temp-val{ line-height:1.2; }
body.themed .header-temp{ color:var(--th-header-text,#fff); }

/* 5-day forecast bubble */
.weather-pop{
  display:none;
  position:fixed;
  z-index:9000;
  background:#fff;
  border-radius:16px;
  box-shadow:0 14px 38px rgba(15,23,42,.3);
  padding:12px 14px;
  max-width:calc(100vw - 24px);
}
.weather-pop.show{ display:block; }
.weather-pop-loc{ font-size:13px; font-weight:800; color:#172033; margin-bottom:4px; }
.weather-pop-now{ font-size:12px; font-weight:700; color:#475569; margin-bottom:9px; }
.weather-pop-days{ display:flex; gap:4px; }
.weather-day{ text-align:center; min-width:56px; padding:2px 3px; }
.weather-day + .weather-day{ border-left:1px solid #eef2f7; }
.weather-day-name{ font-size:11px; font-weight:800; color:#64748b; }
.weather-day-icon{ font-size:22px; line-height:1; margin:5px 0; }
.weather-day-temp{ font-size:12px; font-weight:700; color:#172033; white-space:nowrap; }
.weather-day-temp .wt-lo{ color:#94a3b8; }
.weather-day-feels{ font-size:10px; font-weight:600; color:#64748b; margin-top:3px; white-space:nowrap; }
.weather-day-precip{ font-size:10px; font-weight:700; color:#2f63e8; margin-top:2px; white-space:nowrap; }

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

.presence-bar{
  display:flex;
  align-items:center;
}

.presence-bar .presence-avatar:not(:first-child){
  margin-left:-8px;   /* slight overlap, like stacked avatars */
}

.presence-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  color:#fff;
  font-size:14px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  flex-shrink:0;
  cursor:pointer;
}

/* Enlarged avatar viewer (tap an avatar) */
.avatar-view-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10500;
  background:rgba(8,12,24,.82);
  backdrop-filter:blur(6px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:24px;
}
.avatar-view-modal.open{ display:flex; }
.avatar-view-circle{
  width:min(74vw,340px);
  height:min(74vw,340px);
  border-radius:50%;
  background-size:cover;
  background-position:center;
  background-color:#2f63e8;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:120px;
  font-weight:800;
  text-transform:uppercase;
  border:4px solid rgba(255,255,255,.85);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:avatarViewPop .24s cubic-bezier(.34,1.56,.64,1);
}
@keyframes avatarViewPop{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }
.avatar-view-name{ color:#fff; font-size:20px; font-weight:800; text-transform:lowercase; }

body.themed .presence-avatar{ border-color:var(--th-header-text, #fff); }

.presence-pop{
  animation:presencePop .42s cubic-bezier(.34,1.56,.64,1);
}

@keyframes presencePop{
  0%{   transform:scale(0); opacity:0; }
  60%{  transform:scale(1.18); opacity:1; }
  100%{ transform:scale(1); }
}

.login-notice{
  display:flex;
  justify-content:center;
  margin:12px 0;
  animation:loginNoticePop .4s cubic-bezier(.34,1.56,.64,1);
}

.login-notice span{
  background:rgba(15,23,42,.08);
  color:#475569;
  font-size:12px;
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
}

body.themed .login-notice span{
  background:rgba(255,255,255,.12);
  color:var(--th-meta, #cbd5e1);
}

.login-notice.logout span{
  background:rgba(148,163,184,.16);
  color:#64748b;
}

@keyframes loginNoticePop{
  0%{   transform:scale(.7) translateY(-6px); opacity:0; }
  60%{  transform:scale(1.05); opacity:1; }
  100%{ transform:scale(1) translateY(0); }
}

.icon-btn{
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:#d9dee8;
  color:#182238;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/*
 * slide-out hamburger menu
 */
.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
  z-index:60;
}

.menu-overlay.open{
  opacity:1;
  visibility:visible;
}

.menu-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(82vw,300px);
  background:#101a3a;
  color:#fff;
  box-shadow:-12px 0 40px rgba(0,0,0,.4);
  transform:translateX(100%);
  transition:transform .28s ease;
  z-index:61;
  display:flex;
  flex-direction:column;
  padding:14px;
  padding-top:max(14px, env(safe-area-inset-top));
}

.menu-drawer.open{
  transform:translateX(0);
}

.menu-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:20px;
  font-weight:800;
  padding:6px 8px 14px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
}

.menu-drawer-close{
  border:0;
  background:transparent;
  color:#c7d0e6;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.menu-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#e8edf7;
  font-size:16px;
  font-weight:700;
  padding:14px 12px;
  cursor:pointer;
  text-align:left;
}

.menu-item i{
  width:22px;
  text-align:center;
  font-size:18px;
  color:#8ea6ff;
}

.menu-item:hover{
  background:rgba(255,255,255,.08);
}

.menu-item-danger{
  margin-top:auto;
  color:#ffb4b4;
}

.menu-item-danger i{
  color:#ff8a8a;
}

.status-bar{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  margin:0;
  padding:8px 14px;
  background:#f8fafc;
  border-bottom:1px solid #d7dde8;
}

.status-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#1f2937;
  min-height:22px;
  text-align: left;
}

.status-line{
  display:flex;
  align-items:center;
  gap:8px;
}

/* The other person's status — same pill padding as mine so they line up. */
.status-reactable{
  background:rgba(15,23,42,.05);
  border-radius:999px;
  padding:5px 12px;
  cursor:pointer;
}

.mine-status{
  order:2;
  border:0;
  background:rgba(15,23,42,.05);
  border-radius:999px;
  padding:5px 12px;
  font-weight:800;
  cursor:pointer;
  min-width:0;
  justify-content:flex-start;
}

.other{font-weight:500; order:1}

.status-light{
  width:11px;
  height:11px;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
}

.status-light.green{background:#22c55e}
.status-light.yellow{background:#facc15}
.status-light.red{background:#ef4444}

/* ── Status reactions ── */
.status-reactable{ cursor:pointer; }

/* cute thought bubble that points back at the status */
.status-reactions{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:11px;
  background:#ffffff;
  border:1.5px solid #e2e8f0;
  border-radius:14px;
  padding:2px 8px;
  font-size:14px;
  line-height:1.4;
  box-shadow:0 2px 6px rgba(15,23,42,.14);
}

.status-reactions::before,
.status-reactions::after{
  content:"";
  position:absolute;
  background:#ffffff;
  border:1.5px solid #e2e8f0;
  border-radius:50%;
}

.status-reactions::before{
  width:7px;
  height:7px;
  left:-5px;
  bottom:3px;
}

.status-reactions::after{
  width:4px;
  height:4px;
  left:-10px;
  bottom:0;
}

.status-reaction{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.status-reaction-emoji{ line-height:1; }

.status-reaction-x{
  border:0;
  background:#cbd5e1;
  color:#475569;
  width:13px;
  height:13px;
  min-width:13px;
  border-radius:50%;
  font-size:11px;
  line-height:1;
  margin-left:2px;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.status-reaction-x:hover{ background:#ef4444; color:#fff; }

.status-react-pop{
  position:fixed;
  z-index:3000;
  display:flex;
  gap:4px;
  background:#fff;
  border-radius:999px;
  padding:6px 8px;
  box-shadow:0 10px 30px rgba(15,23,42,.28);
}

.status-react-pick{
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.status-react-pick:hover{ background:#f1f5f9; transform:scale(1.15); }

.status-reply-btn{
  border:0;
  background:#eef2fb;
  color:#2f63e8;
  font-size:15px;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:4px;
}
.status-reply-btn:hover{ background:#dbe5fb; transform:scale(1.1); }

.messages-wrap{
  flex:1;
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
}

#messages{
  flex:1;
  min-height:0;
  position:relative;
  overflow-y:auto;
  overscroll-behavior:contain;
  margin:0;
  padding:18px 28px 18px;
  background:#ffffff;
  border-radius:0 0 22px 22px;
}

/* Media minimap — dots down the right edge marking images/videos/notes/flowers */
.media-minimap{
  position:absolute;
  top:6px;
  bottom:6px;
  left:4px;
  width:14px;
  z-index:6;
  pointer-events:none;
}

.mm-dot{
  position:absolute;
  left:3px;
  width:9px;
  height:9px;
  margin-top:-4.5px;
  border-radius:50%;
  background:#2f63e8;
  border:1.5px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  cursor:pointer;
  pointer-events:auto;
  transition:transform .12s;
}
.mm-dot:hover{ transform:scale(1.4); }

.msg-row.pending .bubble{ opacity:.6; }

/* Unread divider */
.unread-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:14px 0 10px;
}
.unread-divider span{
  background:#e23b6d;
  color:#fff;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:3px 12px;
  border-radius:999px;
}

/* Message search */
.search-card{ width:min(94vw,520px); max-height:86vh; display:flex; flex-direction:column; }
#searchInput{
  width:100%;
  height:48px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:0 14px;
  font-size:16px;
  color:#172033;
  box-sizing:border-box;
  font-family:inherit;
  margin-bottom:12px;
}
.search-results{ overflow-y:auto; flex:1; min-height:0; }
.search-hint{ color:#94a3b8; font-size:14px; text-align:center; padding:18px 8px; }
.search-result{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:#f5f7fb;
  border-radius:12px;
  padding:10px 13px;
  margin-bottom:8px;
  cursor:pointer;
  font-family:inherit;
}
.search-result:hover{ background:#e8eef7; }
.search-result-meta{ font-size:12px; font-weight:800; color:#2f63e8; margin-bottom:2px; }
.search-result-text{ font-size:14px; color:#334155; line-height:1.4; word-break:break-word; }

.new-msg-pill{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%) translateY(10px);
  z-index:8;
  background:#2f63e8;
  color:#fff;
  border:0;
  border-radius:999px;
  padding:9px 16px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(47,99,232,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.new-msg-pill.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.mm-flash > .bubble-wrap > .bubble{
  animation:mmFlash 1.5s ease;
}
@keyframes mmFlash{
  0%,100%{ box-shadow:none; }
  20%,55%{ box-shadow:0 0 0 3px rgba(47,99,232,.9); }
}

.msg-row{
  display:flex;
  margin:8px 0;
  align-items:flex-end;
  gap:6px;
  position:relative;
}

.msg-row.mine{justify-content:flex-end}

.bubble-wrap{
  position:relative;
  max-width:78%;
  padding-top:14px;
}

.bubble{
    max-width:95%;
    border-radius:24px;
    position:relative;
    padding: 11px 14px;
}

.bubble.just-edited{
  animation: editPulse .7s ease;
}

@keyframes editPulse{
  0%{   box-shadow:0 0 0 0 rgba(251,191,36,0);   transform:scale(1); }
  25%{  box-shadow:0 0 0 3px rgba(251,191,36,.85); transform:scale(1.03); }
  100%{ box-shadow:0 0 0 0 rgba(251,191,36,0);   transform:scale(1); }
}

.edited-tag{
  opacity:.6;
  font-style:italic;
  margin-left:3px;
}

.text-bubble{
    word-wrap:break-word;
    overflow-wrap:break-word;
    white-space:pre-wrap;
}

.mine .bubble{border-bottom-right-radius:6px}
.theirs .bubble{border-bottom-left-radius:6px}

.meta{
  font-size:13px;
  color:#4b5563;
  margin:2px 8px 0;
}

.mine .meta{
    text-align:right;
    justify-content:flex-end;
}

.theirs .meta{color:#64748b}

.img-msg{
  display:block;
  width:100%;
  height:auto;
  max-width:320px;
  max-height:320px;
  object-fit:contain;
  border-radius:18px;
  background:#fff;
}

.bubble:has(.img-msg),
.bubble:has(.lib-img-cover){
  padding:10px;
  max-width:340px;
}

.lib-img-cover{
  width:100%;
  height:300px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  cursor:pointer;
}

.lib-video-msg{
  width:100%;
  max-height:380px;
  border-radius:18px;
  background:#000;
  display:block;
}

/* ── /flowers bouquet ── */
.bouquet-svg{ width:100%; height:auto; display:block; }

.fl-bloom{
  transform-box:fill-box;
  transform-origin:center;
  animation:flBloom .55s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:var(--d, 0s);
}
@keyframes flBloom{
  from{ opacity:0; transform:scale(.2); }
  to{   opacity:1; transform:scale(1); }
}

.bubble.flowers-bubble{
  padding:0 !important;
  max-width:300px !important;
  overflow:hidden;
}

.flowers-card{
  background:linear-gradient(170deg,#fffdfb,#fdeef3);
  padding:10px 12px 16px;
}

.flowers-svg-wrap{ width:100%; }

.flowers-sentiment{
  text-align:center;
  font-family:Georgia, 'Times New Roman', serif;
  font-style:italic;
  font-size:18px;
  font-weight:700;
  color:#9d2b4d;
  margin-top:2px;
}

.flowers-message{
  text-align:center;
  font-size:15px;
  color:#4a4a4a;
  margin-top:6px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}

.flowers-svg-wrap{ position:relative; }

.flowers-save{
  position:absolute;
  left:12px;
  bottom:12px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#475569;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:12;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
}
.flowers-save:hover{ color:#2f63e8; transform:scale(1.06); }
.flowers-save:disabled{ color:#16a34a; cursor:default; transform:none; }

/* Flowers in the library grid */
.library-flowers-thumb{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(170deg,#fffdfb,#fdeef3);
  padding:6px;
  box-sizing:border-box;
}
.library-flowers-thumb .bouquet-svg{ height:100%; width:auto; max-width:100%; }
.library-flowers-thumb .fl-bloom{ animation:none; }

/* Flowers in the library viewer */
.flowers-viewer{
  max-width:340px;
  margin:0 auto;
  border-radius:18px;
  background:linear-gradient(170deg,#fffdfb,#fdeef3);
  padding:12px 14px 18px;
}

/* compose modal */
.flowers-compose-card{ width:min(94vw,460px); max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.gift-type-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.gift-type{
  flex:1 1 90px; border:2px solid #e7ecf3; background:#f8fafc; border-radius:12px;
  padding:9px 6px; font-size:14px; font-weight:800; color:#475569; cursor:pointer;
  font-family:inherit; white-space:nowrap;
}
.gift-type:hover{ background:#eef2fb; }
.gift-type.active{ border-color:#2f63e8; background:#eaf0ff; color:#1e3a8a; }

.flowers-preview{
  width:100%;
  max-width:280px;
  margin:4px auto 14px;
  background:linear-gradient(170deg,#fffdfb,#fdeef3);
  border-radius:16px;
  overflow:hidden;
}

#flowersTitle{
  width:100%;
  height:48px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:0 14px;
  font-size:16px;
  font-weight:700;
  color:#172033;
  box-sizing:border-box;
  font-family:inherit;
  margin-bottom:10px;
}

.flowers-controls{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}

#flowersSentiment{
  flex:1;
  height:48px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:0 12px;
  font-size:15px;
  font-family:inherit;
  color:#172033;
  background:#fff;
}

#flowersShuffle{
  border:0;
  border-radius:14px;
  background:#f1f5f9;
  color:#334155;
  font-weight:800;
  padding:0 16px;
  cursor:pointer;
  font-family:inherit;
}

#flowersMessage{
  width:100%;
  min-height:70px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:12px 14px;
  font-size:16px;
  resize:vertical;
  box-sizing:border-box;
  font-family:inherit;
  color:#172033;
}

#flowersSendBtn{
  width:100%;
  height:52px;
  border:0;
  border-radius:14px;
  background:#e23b6d;
  color:#fff;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
  margin-top:12px;
}

.lib-save-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:9px;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  background:rgba(15,23,42,.12);
  color:inherit;
  font-family:inherit;
}

.lib-save-btn:disabled{ opacity:.7; cursor:default; }

body.themed .lib-save-btn{ background:rgba(255,255,255,.18); }

.readline{
  font-size:12px;
  color:#8e8e93;
  text-align:right;
  margin:-4px 8px 6px;
}

/* Two-tier pop-up menu: a fixed-size emoji pill with a narrower utility pill
   beneath it (see popup.png). Size is constant — independent of the bubble. */
.reaction-menu{
  display:none;
  position:absolute;
  bottom:calc(100% - 12px);
  right:12px;
  z-index:20;
  flex-direction:column;
  align-items:flex-end;        /* utility pill hugs the right under the emoji pill */
  gap:8px;
  width:max-content;
  background:transparent;
}

.theirs .reaction-menu{
  right:auto;
  left:12px;
  align-items:flex-start;
}

.bubble-wrap:hover .reaction-menu,
.msg-row.menu-open .reaction-menu{
  display:flex;
}

.reaction-row,
.utility-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  background:#fff;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(15,23,42,.22);
}

.reaction-row{ gap:4px; padding:7px 10px; }
.utility-row{ gap:6px; padding:7px 12px; }
.utility-row .colorBtn{ color:#7c3aed; }

.reaction-menu button{
  border:0;
  background:transparent;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background .12s;
}

.reaction-row .reactionPick{ font-size:22px; width:36px; height:36px; }
.reaction-row .reactionPick:hover{ background:#f1f5f9; transform:scale(1.12); }

.utility-row button{ font-size:16px; width:32px; height:32px; color:#334155; }
.utility-row button:hover{ background:#eef2f7; }
.utility-row .replyInlineBtn{ color:#2f63e8; }
.utility-row .delete-x{
  position:static;
  background:transparent;
  box-shadow:none;
  color:#475569;
  font-size:24px;
  line-height:1;
}
.utility-row .delete-x:hover{ background:#fdecec; color:#dc2626; }

/* Bookmarks temporarily hidden (feature paused) */
#bookmarkBtn,
.reaction-menu .bookmarkBtn{ display:none !important; }

/* Header bookmark filter toggle */
#bookmarkBtn.active{ background:#2f63e8; color:#ffffff; }

/* "this was replied to" indicator under a message */
.reply-indicator{
  display:flex;
  align-items:center;
  gap:4px;
  width:fit-content;
  margin-top:3px;
  padding:2px 9px;
  border:0;
  border-radius:999px;
  background:rgba(15,23,42,.08);
  color:#475569;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.reply-indicator i{ font-size:10px; }
.msg-row.mine .reply-indicator{ margin-left:auto; }
body.themed .reply-indicator{ background:rgba(255,255,255,.16); color:var(--th-meta,#cbd5e1); }

.bookmark-empty{ text-align:center; color:#64748b; padding:44px 22px; }
.bookmark-empty > i{ font-size:40px; opacity:.45; display:block; margin-bottom:12px; }
.bookmark-empty-sub{ font-size:13px; opacity:.85; margin-top:6px; }

/* ── Media-only view: a pane that slides in over the chat ── */
.media-pane{
  position:absolute;
  inset:0;
  z-index:16;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:52px 28px 18px;   /* top clears the media bar */
  background:var(--th-messages, #eef2f7);
  transform:translateX(100%);   /* off-screen to the right */
  transition:transform .26s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.media-pane.open{ transform:translateX(0); }
/* the chat slides left a touch behind the incoming pane (parallax) */
#messages{ transition:transform .26s cubic-bezier(.22,1,.36,1); }
.messages-wrap.media-open #messages{ transform:translateX(-18%); }
/* hide the left-edge minimap + new-msg pill while the media pane is open */
.messages-wrap.media-open #mediaMinimap,
.messages-wrap.media-open #newMsgPill{ display:none !important; }

.media-bar{
  display:none;
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  background:rgba(248,250,252,.96);
  border-bottom:1px solid #d7dde8;
  backdrop-filter:blur(6px);
}
.media-bar.show{ display:flex; }
.media-back{
  border:0; background:#eef2f7; color:#334155;
  width:34px; height:34px; border-radius:50%;
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.media-back:hover{ background:#e2e8f0; }
.media-bar-title{ font-size:15px; font-weight:800; color:#172033; }
.media-bar-title i{ color:#2f63e8; margin-right:5px; }
.media-bar-hint{ margin-left:auto; font-size:11px; color:#94a3b8; }

body.themed .media-bar{ background:rgba(20,24,40,.92); border-bottom-color:rgba(127,127,127,.25); }
body.themed .media-bar-title{ color:var(--th-header-text,#fff); }
body.themed .media-back{ background:rgba(127,127,127,.2); color:var(--th-header-text,#fff); }

/* Media filter button temporarily hidden (header was too crowded) */
#mediaFilterBtn{ display:none !important; }
#mediaFilterBtn.active{ background:#2f63e8; color:#fff; }
.media-empty{ text-align:center; color:#64748b; padding:44px 22px; }
.media-empty > i{ font-size:40px; opacity:.45; display:block; margin-bottom:12px; }
@media (max-width:520px){ .media-bar-hint{ display:none; } }

/* ── Reply quote (above a bubble) ── */
.reply-quote{
  width:fit-content;
  max-width:100%;
  margin-bottom:-2px;
  padding:5px 11px;
  border-left:3px solid rgba(47,99,232,.75);
  border-radius:11px;
  background:rgba(15,23,42,.06);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.25;
  overflow:hidden;
}
.reply-quote.no-jump{ cursor:default; }

.msg-row.mine .reply-quote{
  margin-left:auto;
  border-left:0;
  border-right:3px solid rgba(47,99,232,.75);
  text-align:right;
}

.reply-quote-name{
  font-size:11px;
  font-weight:800;
  color:#2f63e8;
}

.reply-quote-text{
  font-size:12px;
  color:#475569;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:230px;
}

.reply-highlight .bubble{
  animation:replyHighlight 1.6s ease;
}

@keyframes replyHighlight{
  0%,100%{ box-shadow:none; }
  18%,55%{ box-shadow:0 0 0 3px rgba(251,191,36,.85); }
}

/* ── Reply preview bar (above composer) ── */
.reply-preview{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:#eef2fb;
  border-left:4px solid #2f63e8;
  border-top:1px solid rgba(15,23,42,.07);
}

.reply-preview-bar{ display:none; }

.reply-preview-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.25;
}

.reply-preview-name{
  font-size:12px;
  font-weight:800;
  color:#2f63e8;
}

.reply-preview-text{
  font-size:13px;
  color:#475569;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.reply-preview-cancel{
  border:0;
  background:transparent;
  font-size:24px;
  line-height:1;
  color:#64748b;
  cursor:pointer;
  flex-shrink:0;
  width:32px;
  height:32px;
}

/* Themed variants */
body.themed .reply-quote{
  background:rgba(255,255,255,.1);
  border-left-color:var(--th-send,#2f63e8);
  border-right-color:var(--th-send,#2f63e8);
}
body.themed .reply-quote-name{ color:var(--th-send,#8fb0f0); }
body.themed .reply-quote-text{ color:var(--th-meta,#cbd5e1); }

body.themed .reply-preview{
  background:rgba(255,255,255,.07);
  border-left-color:var(--th-send,#2f63e8);
}
body.themed .reply-preview-name{ color:var(--th-send,#8fb0f0); }
body.themed .reply-preview-text{ color:var(--th-meta,#cbd5e1); }

/* (delete × now lives inside .utility-row — styled with the pop-up menu above) */

.reactions{
  position:absolute;
  bottom:-15px;
  right:8px;
  background:#fff;
  color:#111;
  border-radius:13px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  font-size:14px;
  padding:1px 6px;
}

.mine .reactions {
    right: auto;
    left: 8px;
}

.theirs .reactions{
  left:auto;
  right:8px;
}

/* Tap a reaction badge to grow it in stages, then pulse like a heart. */
.reactions span{
  display:inline-block;
  cursor:pointer;
  transform-origin:center bottom;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.reactions span.rx-1{ transform:scale(1.4); }
.reactions span.rx-2{ transform:scale(1.9); }
.reactions span.rx-3{ animation:rxHeartbeat 1s ease-in-out infinite; }
@keyframes rxHeartbeat{
  0%   { transform:scale(1.9); }
  15%  { transform:scale(2.3); }
  30%  { transform:scale(1.9); }
  45%  { transform:scale(2.2); }
  60%  { transform:scale(1.9); }
  100% { transform:scale(1.9); }
}

/* In-flow flex footer — sits at the bottom of the #chat column and rides
   above the keyboard (with interactive-widget=resizes-content), instead of
   being absolutely pinned to a viewport that the Android keyboard shifts. */
.composer-dock{
  flex:0 0 auto;
  z-index:15;
  position:relative;
}

/* Quick Commands floating panel — rises above the composer, over the message
   pane, without covering the message box / camera / send. */
.commands-panel{
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  z-index:30;
  margin:0 12px 8px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 -8px 34px rgba(15,23,42,.22);
  padding:14px 14px 12px;
  max-height:48vh;
  overflow-y:auto;
  transform:translateY(22px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .2s ease, visibility .26s;
}
.commands-panel.open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.commands-panel-head{
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#64748b;
  margin:0 4px 10px;
}
.commands-panel-head i{ color:#2f63e8; margin-right:5px; }
.commands-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.cmd-item{
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid #e7ecf3;
  background:#f8fafc;
  border-radius:13px;
  padding:11px 12px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:background .12s, border-color .12s, transform .08s;
}
.cmd-item:hover{ background:#eef2fb; border-color:#cfdcfa; }
.cmd-item:active{ transform:scale(.97); }
.cmd-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e7ecf3;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2f63e8;
  font-size:16px;
}
.cmd-text{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.cmd-name{ font-size:14px; font-weight:800; color:#172033; }
.cmd-desc{ font-size:11.5px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#commandsBtn.active{ background:#2f63e8; color:#fff; border-color:#2f63e8; }

@media (max-width:520px){
  .commands-list{ grid-template-columns:1fr; }
}

/* ── Room join-approval ── */
.menu-toggle-state{
  margin-left:auto;
  font-size:12px;
  font-weight:800;
  padding:3px 10px;
  border-radius:999px;
  background:#e2e8f0;
  color:#64748b;
}
.menu-toggle-state.on{ background:#2f63e8; color:#fff; }

.approval-card{ max-width:440px; }
.approval-list{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.approval-item{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:14px;
  border:1px solid #e7ecf3;
  border-radius:14px;
  background:#f8fafc;
}
.approval-item-text{ font-size:15px; color:#172033; line-height:1.4; }
.approval-item-btns{ display:flex; gap:10px; justify-content:flex-end; }
.approval-accept,
.approval-deny{
  border:0;
  border-radius:11px;
  padding:10px 20px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}
.approval-accept{ background:#16a34a; color:#fff; }
.approval-accept:hover{ background:#15803d; }
.approval-deny{ background:#eef2f7; color:#475569; }
.approval-deny:hover{ background:#e2e8f0; }

.approval-wait{
  display:none;
  position:fixed;
  inset:0;
  z-index:6000;
  background:rgba(10,15,30,.78);
  backdrop-filter:blur(3px);
  align-items:center;
  justify-content:center;
  padding:24px;
}
.approval-wait-card{
  background:#fff;
  border-radius:22px;
  padding:34px 28px;
  max-width:380px;
  width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.approval-wait-card h3{ margin:0 0 10px; font-size:22px; color:#172033; }
.approval-wait-card p{ margin:0 0 22px; font-size:15px; color:#64748b; line-height:1.5; }
.approval-wait-spinner{
  width:46px;
  height:46px;
  margin:0 auto 18px;
  border:4px solid #e2e8f0;
  border-top-color:#2f63e8;
  border-radius:50%;
  animation:approvalSpin 0.9s linear infinite;
}
@keyframes approvalSpin{ to{ transform:rotate(360deg); } }
.approval-wait-countdown{
  font-size:13px;
  color:#94a3b8;
  margin:-8px 0 18px;
  font-weight:700;
}
.approval-wait-back{
  border:0;
  background:#eef2f7;
  color:#475569;
  border-radius:12px;
  padding:11px 22px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}
.approval-wait-back:hover{ background:#e2e8f0; }

/* Inactivity auto-logout warning */
.inactivity-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:6500;
  background:rgba(10,15,30,.78);
  backdrop-filter:blur(3px);
  align-items:center;
  justify-content:center;
  padding:24px;
}
.inactivity-card{
  background:#fff;
  border-radius:22px;
  padding:34px 28px;
  max-width:380px;
  width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.inactivity-icon{
  font-size:40px;
  color:#2f63e8;
  margin-bottom:14px;
}
.inactivity-card h3{ margin:0 0 10px; font-size:22px; color:#172033; }
.inactivity-card p{ margin:0 0 22px; font-size:15px; color:#64748b; line-height:1.5; }
.inactivity-card p strong{ color:#e11d48; font-size:17px; }
.inactivity-stay{
  border:0;
  background:#2f63e8;
  color:#fff;
  border-radius:12px;
  padding:12px 26px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}
.inactivity-stay:hover{ background:#2551c9; }

/* Manage members list */
.members-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.members-subhead{
  margin:12px 2px 2px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#94a3b8;
}
.member-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid #e7ecf3;
  border-radius:13px;
  background:#f8fafc;
}
.member-item.blocked{ background:#fbf2f2; border-color:#f3dada; }
.member-name{ font-size:15px; font-weight:700; color:#172033; }
.member-tag{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  color:#2f63e8;
  background:#e6edff;
  padding:2px 8px;
  border-radius:999px;
  margin-left:6px;
}
.member-remove,
.member-unblock{
  border:0;
  border-radius:10px;
  padding:8px 16px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}
.member-remove{ background:#fde8e8; color:#dc2626; }
.member-remove:hover{ background:#f9d3d3; }
.member-unblock{ background:#eef2f7; color:#475569; }
.member-unblock:hover{ background:#e2e8f0; }

/* ── Edit Profile ── */
.profile-card{ width:min(94vw,440px); max-height:90vh; overflow:auto; }
.profile-label{
  display:block;
  margin:14px 2px 6px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#94a3b8;
}
.profile-input{
  width:100%;
  font-size:16px;
  padding:13px 15px;
  border:1px solid #d7ddea;
  border-radius:13px;
  background:#f8fafc;
  color:#172033;
  outline:none;
}
.profile-input:focus{ border-color:#2f63e8; background:#fff; box-shadow:0 0 0 3px rgba(47,99,232,.14); }
select.profile-input{ cursor:pointer; appearance:auto; }

.profile-avatar-row{ display:flex; align-items:center; gap:16px; }
.profile-avatar-preview{
  flex:0 0 auto;
  width:72px;
  height:72px;
  border-radius:50%;
  background:#2f63e8;
  background-size:cover;
  background-position:center;
  color:#fff;
  font-size:30px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  box-shadow:0 2px 8px rgba(15,23,42,.2);
}
.profile-avatar-actions{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.profile-btn{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #e7ecf3;
  background:#f8fafc;
  border-radius:11px;
  padding:9px 13px;
  font-size:14px;
  font-weight:700;
  color:#172033;
  cursor:pointer;
  font-family:inherit;
}
.profile-btn i{ color:#2f63e8; width:16px; text-align:center; }
.profile-btn:hover{ background:#eef2fb; }
.profile-btn.danger{ color:#dc2626; }
.profile-btn.danger i{ color:#dc2626; }

.avatar-library-section{ margin-top:14px; }
.avatar-library-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:800; color:#475569; margin-bottom:8px;
}
.avatar-library-close{ border:0; background:transparent; font-size:22px; line-height:1; color:#64748b; cursor:pointer; }
.avatar-library-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  max-height:200px;
  overflow-y:auto;
}
.avatar-lib-item{ border:0; padding:0; border-radius:12px; overflow:hidden; aspect-ratio:1/1; cursor:pointer; background:#e5e7eb; }
.avatar-lib-item img{ width:100%; height:100%; object-fit:cover; display:block; }

.avatar-crop-section{ margin-top:14px; text-align:center; }
.avatar-cropper{
  position:relative;
  width:min(78vw,300px);
  height:min(78vw,300px);
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  background:#0f172a;
  touch-action:none;
}
#avatarCanvas{ width:100%; height:100%; display:block; cursor:grab; }
#avatarCanvas:active{ cursor:grabbing; }
.avatar-crop-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 2000px rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.9);
  pointer-events:none;
}
.avatar-zoom{ width:min(78vw,300px); margin:14px auto 4px; display:block; accent-color:#2f63e8; }
.avatar-crop-hint{ font-size:12px; color:#94a3b8; }

.profile-save{
  width:100%;
  margin-top:18px;
  border:0;
  background:#2f63e8;
  color:#fff;
  font-weight:800;
  font-size:16px;
  border-radius:14px;
  padding:14px;
  cursor:pointer;
  font-family:inherit;
}
.profile-save:hover{ background:#2752c4; }

/* Active sessions (where you're logged in) */
.profile-sessions{ margin-top:20px; border-top:1px solid #eef2f7; padding-top:14px; }
.sessions-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.session-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; border:1px solid #e7ecf3; border-radius:12px; background:#f8fafc;
}
.session-item.current{ border-color:#cfdcfa; background:#eef4ff; }
.session-info{ min-width:0; }
.session-label{ font-size:14px; font-weight:800; color:#172033; }
.session-badge{ font-size:10px; font-weight:800; text-transform:uppercase; color:#2f63e8; background:#dbe7ff; padding:2px 7px; border-radius:999px; margin-left:6px; }
.session-sub{ font-size:12px; color:#64748b; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.session-logout{
  flex:0 0 auto; border:0; border-radius:10px; padding:7px 13px; font-size:13px; font-weight:800;
  background:#fde8e8; color:#dc2626; cursor:pointer; font-family:inherit;
}
.session-logout:hover{ background:#f9d3d3; }

/* ── Theme modal: bubble display options ── */
.theme-options{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.theme-option-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.theme-option-label{ font-size:15px; font-weight:700; color:#172033; }

.switch{ position:relative; display:inline-block; width:46px; height:26px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.switch-slider{ position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:.2s; cursor:pointer; }
.switch-slider::before{
  content:''; position:absolute; height:20px; width:20px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .switch-slider{ background:#2f63e8; }
.switch input:checked + .switch-slider::before{ transform:translateX(20px); }

.seg-toggle{ display:inline-flex; background:#eef2f7; border-radius:10px; padding:3px; gap:3px; }
.seg-btn{
  border:0; background:transparent; padding:7px 13px; border-radius:8px;
  font-size:13px; font-weight:700; color:#475569; cursor:pointer; font-family:inherit;
}
.seg-btn.active{ background:#fff; color:#172033; box-shadow:0 1px 4px rgba(15,23,42,.15); }

/* ── Message bubble drop-shadow — toggle on/off;
      --bsh = darkness 0→1, --bss = spread (narrow→wide) 0→1 ── */
body.bubble-shadow .bubble{
  box-shadow:
    0
    calc(3px + var(--bss,.4) * 5px)
    calc(6px + var(--bss,.4) * 34px)
    calc(var(--bss,.4) * 7px)
    rgba(15,23,42, calc(.06 + var(--bsh,.3) * .42));
}
.shadow-range{ width:130px; accent-color:#2f63e8; cursor:pointer; }
.shadow-range:disabled{ opacity:.4; cursor:default; }

/* ── Speaking-bubble style: avatar beside each message + a tail toward it ── */
.msg-avatar{
  display:none;
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  color:#fff;
  font-size:14px;
  font-weight:800;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  align-self:flex-end;
  box-shadow:0 1px 4px rgba(0,0,0,.22);
  cursor:pointer;
}
body.bubble-style-speaking .msg-avatar{ display:flex; }
body.bubble-style-speaking .msg-row.mine .msg-avatar{ order:2; }

body.bubble-style-speaking .text-bubble{ overflow:visible; }
body.bubble-style-speaking .msg-row.theirs .text-bubble::after{
  content:'';
  position:absolute;
  bottom:3px;
  left:-6px;
  width:13px;
  height:13px;
  background:inherit;
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
}
body.bubble-style-speaking .msg-row.mine .text-bubble::after{
  content:'';
  position:absolute;
  bottom:3px;
  right:-6px;
  width:13px;
  height:13px;
  background:inherit;
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}

/* ── Live video chat ── */
.call-overlay{ display:none; position:fixed; inset:0; z-index:9000; background:#0b1020; }
.call-overlay.open{ display:block; }
.call-remote{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0b1020; }
.call-local{
  position:absolute; top:16px; right:16px;
  width:108px; height:150px; object-fit:cover;
  border-radius:14px; border:2px solid rgba(255,255,255,.6);
  box-shadow:0 6px 20px rgba(0,0,0,.5); background:#1e293b; z-index:2;
  transform:scaleX(-1);
}
.call-status{
  position:absolute; top:0; left:0; right:0; text-align:center; padding-top:42px;
  color:#fff; font-size:18px; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.6);
  z-index:2; pointer-events:none;
}
.call-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; justify-content:center; align-items:center; gap:18px;
  padding:24px 16px calc(28px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.call-ctl{
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  color:#fff; font-size:21px; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.call-ctl.off{ background:#fff; color:#0b1020; }
.call-ctl.call-hang{ background:#ef4444; }
.call-ctl.call-hang:hover{ background:#dc2626; }

.incoming-call{
  display:none; position:fixed; inset:0; z-index:9500;
  background:rgba(5,8,18,.86); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:24px;
}
.incoming-call.open{ display:flex; }
.incoming-card{ text-align:center; color:#fff; }
.incoming-avatar{
  width:104px; height:104px; border-radius:50%; margin:0 auto 18px;
  background:#2f63e8; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  font-size:42px; font-weight:800; color:#fff; text-transform:uppercase;
  box-shadow:0 8px 30px rgba(0,0,0,.5); animation:incomingPulse 1.6s ease-in-out infinite;
}
@keyframes incomingPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.incoming-name{ font-size:26px; font-weight:800; }
.incoming-sub{ font-size:14px; opacity:.7; margin-top:4px; }
.incoming-actions{ display:flex; justify-content:center; gap:48px; margin-top:34px; }
.incoming-btn{
  width:68px; height:68px; border-radius:50%; border:0; cursor:pointer;
  color:#fff; font-size:25px; display:flex; align-items:center; justify-content:center;
}
.incoming-btn.accept{ background:#16a34a; animation:incomingPulse 1.6s ease-in-out infinite; }
.incoming-btn.accept:hover{ background:#15803d; }
.incoming-btn.decline{ background:#ef4444; }
.incoming-btn.decline:hover{ background:#dc2626; }

.composer{
  position:relative;
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px 38px calc(16px + env(safe-area-inset-bottom));
  background:#F9FAFC;
}

/* Media popup menu (Upload Photo / Take Photo / Record Video / Upload Video) */
.media-menu{
  display:none;
  position:absolute;
  left:14px;
  bottom:calc(100% - 6px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 34px rgba(15,23,42,.28);
  padding:6px;
  z-index:40;
  min-width:196px;
}

.media-menu.open{ display:block; }

.media-menu-item{
  display:flex;
  align-items:center;
  gap:13px;
  width:100%;
  border:0;
  background:transparent;
  padding:12px 14px;
  border-radius:11px;
  font-size:15px;
  font-weight:700;
  color:#172033;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}

.media-menu-item i{ width:20px; text-align:center; color:#2f63e8; font-size:16px; }

.media-menu-item:hover{ background:#f1f5f9; }

#messageInput {
    font-family: arial !important;
}

.composer textarea{
  flex:1;
  resize:none;
  max-height:110px;
  border:2px solid #cfd7e3;
  border-radius:18px;
  padding:15px 20px;
  font-size:14px;
  line-height:26px;
  outline:0;
  background:#fff;
  color:#172033;
}

.round,.send{
  width:50px;
  height:50px;
  border-radius:14px;
  border:2px solid #cfd7e3;
  font-size:26px;
  background:#f7f9fc;
  color:#0f172a;
  cursor:pointer;
}

.send{
  background:#2f63e8;
  color:#fff;
  border-color:#2f63e8;
  border-radius:16px;
  font-size:28px;
}

/* Emoji composer button: desktop (tablet-width) only. */
.emoji-composer-btn{ display:none; }
@media (min-width:768px){
  .emoji-composer-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

#typing{
  display:none;
  position:fixed;
  bottom:88px;
  left:38px;
  z-index:30;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  color:#1f2937;
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(15,23,42,.16);
  font-size:14px;
}

.status-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
  align-items:center;
  justify-content:center;
}

.status-card{
  position:relative;
  width:min(90vw,640px);
  background:#fff;
  border-radius:28px;
  padding:34px;
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.status-card h3{
  margin:0 0 24px;
  font-size:32px;
  line-height:1.1;
  color:#111827;
}

.status-close{
  position:absolute;
  top:24px;
  right:28px;
  border:0;
  background:transparent;
  font-size:38px;
  line-height:1;
  color:#6b7280;
  font-weight:800;
  cursor:pointer;
}

.status-card label{
  display:block;
  font-size:18px;
  font-weight:800;
  color:#374151;
  margin:18px 0 9px;
}

#statusColorSelect,
#statusMessageInput{
  width:100%;
  height:58px;
  border:2px solid #d1d7e2;
  border-radius:18px;
  background:#fff;
  color:#172033;
  font-size:21px;
  padding:0 20px;
  outline:0;
}

.bubble-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:10px 0 18px;
}

.bubble-choice{
  height:44px;
  border-radius:14px;
  border:3px solid transparent;
  cursor:pointer;
}

.bubble-choice.selected{
  border-color:#111827;
}

.bg-light-blue{background:#dbeafe}
.bg-light-sky{background:#e0f2fe}
.bg-light-lavender{background:#e9e5ff}
.bg-light-pink{background:#fce7f3}
.bg-light-mint{background:#dcfce7}
.bg-light-sage{background:#d1fae5}
.bg-light-peach{background:#ffedd5}
.bg-light-yellow{background:#fef3c7}

.bg-blue{background:#2563eb}
.bg-purple{background:#7c3aed}
.bg-charcoal{background:#374151}
.bg-pink{background:#db2777}

.bubble-gradient-light-blue{background:#dbeafe!important;color:#1e3a8a!important}
.bubble-gradient-light-sky{background:#e0f2fe!important;color:#075985!important}
.bubble-gradient-light-lavender{background:#e9e5ff!important;color:#5b21b6!important}
.bubble-gradient-light-pink{background:#fce7f3!important;color:#9d174d!important}

.bubble-gradient-light-mint{background:#dcfce7!important;color:#166534!important}
.bubble-gradient-light-sage{background:#d1fae5!important;color:#065f46!important}
.bubble-gradient-light-peach{background:#ffedd5!important;color:#9a3412!important}
.bubble-gradient-light-yellow{background:#fef3c7!important;color:#92400e!important}

.bubble-gradient-light-blue a,
.bubble-gradient-light-sky a,
.bubble-gradient-light-lavender a,
.bubble-gradient-light-pink a,
.bubble-gradient-light-mint a,
.bubble-gradient-light-sage a,
.bubble-gradient-light-peach a,
.bubble-gradient-light-yellow a{
  color:#1d4ed8 !important;
}

.bubble-gradient-blue{background:#2563eb!important;color:#fff!important}
.bubble-gradient-purple{background:#7c3aed!important;color:#fff!important}
.bubble-gradient-charcoal{background:#374151!important;color:#fff!important}
.bubble-gradient-pink{background:#db2777!important;color:#fff!important}

.bubble-gradient-blue a,
.bubble-gradient-purple a,
.bubble-gradient-charcoal a,
.bubble-gradient-pink a{
  color:#ffffff !important;
}

.bubble a:hover{
  opacity:.8;
}

#saveStatusBtn{
  width:100%;
  height:62px;
  border:0;
  border-radius:18px;
  margin-top:24px;
  background:#2f63e8;
  color:#fff;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

.deleted{
  font-style:italic;
  color:#777;
}

.editbox{
  width:100%;
  font:inherit;
  border:0;
  border-radius:12px;
  padding:6px;
}

@media(max-width:700px){
  .chat-header{
    height:58px;
    padding:8px 14px;
  }

  .brand-wrap{gap:8px}

  .brand-text{
    font-size:24px;
  }

  .logo-bubble{
    width:36px;
    height:36px;
    font-size:18px;
  }

  .header-actions{
    gap:8px;
  }

  .icon-btn{
    width:36px;
    height:36px;
    border-radius:12px;
    font-size:16px;
  }

  .status-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    margin:0;
    padding:8px 12px;
    min-height:0;
  }

  .status-item{
    font-size:12px;
    min-height:22px;
    text-align: left;
  }

  .mine-status,
  .status-reactable{
    padding:4px 11px;
  }

  .mine-status{
    order:2;
    font-weight:800;
    border:0;
    border-radius:999px;
    min-width:0;
  }

  .other{order:1}

  #messages{
    margin:0;
    padding:14px 12px;
    border-radius:0;
  }

  .msg-row{
    margin:6px 0;
  }

  .bubble-wrap{
    max-width:84%;
    padding-top:14px;
  }

  .bubble{
    font-size:15px;
    padding:11px 14px;
  }

  .meta{
    font-size:12px;
  }

  .img-msg{
    max-width:240px;
    max-height:280px;
  }

  .bubble:has(.img-msg){
    max-width:260px;
  }

  .composer{
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    gap:8px;
  }

  .composer textarea{
    font-size:14px;
    padding:12px 15px;
    line-height:23px;
  }

  .round,.send{
    width:44px;
    height:44px;
    font-size:23px;
  }

  #typing{
    bottom:72px;
    left:16px;
    font-size:13px;
  }

  .reaction-menu{ gap:7px; }

  .reaction-row{ gap:3px; padding:6px 8px; }
  .utility-row{ gap:5px; padding:6px 10px; }

  .reaction-row .reactionPick{ font-size:20px; width:33px; height:33px; }
  .utility-row button{ font-size:15px; width:30px; height:30px; }
  .utility-row .delete-x{ font-size:23px; }

  .status-card{
    width:min(92vw,420px);
    padding:26px;
  }

  .status-card h3{
    font-size:27px;
  }

  .status-close{
    top:20px;
    right:22px;
    font-size:34px;
  }

  #statusColorSelect,
  #statusMessageInput{
    height:54px;
    font-size:19px;
  }

  #saveStatusBtn{
    height:56px;
    font-size:19px;
  }
}

input,
textarea,
select,
button{
  color-scheme: light;
}

html{
  background:#e9edf4;
}

body{
  color:#172033;
}

/* 
 * apple
 */

.media-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
  align-items:center;
  justify-content:center;
  padding:18px;
}

.media-card{
  position:relative;
  width:min(92vw,760px);
  max-height:82vh;
  overflow:auto;
  background:#fff;
  border-radius:22px;
  padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.media-card h3{
  margin:0 0 18px;
  font-size:28px;
  color:#111827;
}

.media-close{
  position:absolute;
  top:14px;
  right:18px;
  border:0;
  background:transparent;
  font-size:34px;
  font-weight:800;
  color:#374151;
  cursor:pointer;
}

.media-results{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.apple-result{
  border:0;
  background:#f3f4f6;
  border-radius:16px;
  padding:10px;
  cursor:pointer;
  text-align:left;
}

.apple-result img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

.apple-title{
  font-size:16px;
  font-weight:800;
  margin-top:8px;
  color:#111827;
}

.apple-artist{
  font-size:14px;
  color:#6b7280;
  font-weight:600;
}

@media(max-width:700px){
  .media-results{
    grid-template-columns:1fr;
  }
}

.bubble.apple-bubble{
  padding:10px 12px !important;
  max-width:360px !important;
  overflow:visible !important;
}

.giphy-img,
.apple-song-card{
  overflow:hidden;
  border-radius:14px;
}

/* ── YouTube picker results ── */
.media-loading{
  grid-column:1/-1;
  text-align:center;
  color:#6b7280;
  font-weight:600;
  padding:24px 0;
}

.youtube-result{
  border:0;
  background:#f3f4f6;
  border-radius:16px;
  padding:8px;
  cursor:pointer;
  text-align:left;
}

.youtube-result-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
}

.youtube-result-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.youtube-result-title{
  font-size:14px;
  font-weight:800;
  margin-top:8px;
  color:#111827;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.3;
}

.youtube-result-channel{
  font-size:12px;
  color:#6b7280;
  font-weight:600;
  margin-top:2px;
}

.youtube-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(0,0,0,.62);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  padding-left:3px;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}

/* ── YouTube in-chat card ── */
.bubble.youtube-bubble{
  padding:8px !important;
  max-width:340px !important;
  overflow:visible !important;
}

.youtube-card{ width:100%; }

.youtube-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:13px;
  overflow:hidden;
  cursor:pointer;
}

.youtube-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.youtube-player{
  width:100%;
  aspect-ratio:16/9;
  border-radius:13px;
  overflow:hidden;
}

.youtube-player iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

.youtube-meta{ padding:7px 4px 2px; }

.youtube-title{
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.youtube-channel{
  font-size:12px;
  opacity:.7;
  margin-top:2px;
}

.apple-song-card{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.apple-song-card img{
  display:block;
  width:82px !important;
  height:82px !important;
  min-width:82px;
  max-width:82px !important;
  object-fit:cover;
  border-radius:14px;
  flex:0 0 82px;
}

.apple-song-info{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}

.apple-song-title,
.apple-song-artist,
.apple-song-link{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.apple-song-title{
  font-size:18px;
  font-weight:800;
  line-height:1.15;
}

.apple-song-artist{
  margin-top:5px;
  font-size:14px;
  font-weight:600;
}

.apple-song-link{
  display:block;
  margin-top:5px;
  font-size:10px;
  color:inherit;
  text-decoration:underline;
}

/*
 *  giphy
 */
.media-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
  align-items:center;
  justify-content:center;
  padding:18px;
}

.media-card{
  position:relative;
  width:min(92vw,760px);
  max-height:82vh;
  overflow:auto;
  background:#fff;
  border-radius:22px;
  padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.media-card h3{
  margin:0 0 18px;
  font-size:28px;
  color:#111827;
}

.media-close{
  position:absolute;
  top:14px;
  right:18px;
  border:0;
  background:transparent;
  font-size:34px;
  font-weight:800;
  color:#374151;
  cursor:pointer;
}

.media-results{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.giphy-result{
  border:0;
  background:#f3f4f6;
  border-radius:16px;
  padding:8px;
  cursor:pointer;
}

.giphy-result img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

@media(max-width:700px){
  .media-card{
    width:94vw;
    max-height:78vh;
    padding:18px;
  }

  .media-results{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
}

.giphy-bubble{
  padding:8px !important;
  max-width:360px !important;
  overflow:visible !important;
}

.giphy-img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  border-radius:14px;
  object-fit:contain;
}

.simple-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
  align-items:center;
  justify-content:center;
  padding:18px;
}

/* Secondary modals opened on top of another modal (e.g. unlock over the library grid). */
#libraryUnlockModal,
#colorPickerModal{ z-index:10001; }

.simple-card{
  position:relative;
  width:min(92vw,420px);
  background:#fff;
  border-radius:24px;
  padding:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.simple-card h3{
  margin:0 0 20px;
  font-size:26px;
  color:#111827;
}

.simple-close{
  position:absolute;
  top:16px;
  right:20px;
  border:0;
  background:transparent;
  font-size:34px;
  font-weight:800;
  color:#374151;
  cursor:pointer;
}

.simple-card label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:#374151;
}

/* Library unlock modal */
.unlock-sub{
  margin:-8px 0 18px;
  color:#64748b;
  font-size:14px;
  line-height:1.4;
}
.unlock-all-toggle{
  display:flex !important;
  align-items:center;
  gap:10px;
  margin:14px 0 4px !important;
  font-weight:700;
  color:#334155;
  cursor:pointer;
}
.unlock-all-toggle input{ width:20px; height:20px; margin:0; cursor:pointer; }
.unlock-all-toggle span{ font-size:15px; }
#libraryUnlockMessage{ margin-top:10px; color:#dc2626; font-weight:700; font-size:14px; }

/* Message color-picker modal */
.color-picker-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:12px;
  margin-top:6px;
}
.color-picker-grid .colorPick{
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  border:2px solid rgba(15,23,42,.12);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:transform .12s, box-shadow .12s;
}
.color-picker-grid .colorPick:hover{ transform:scale(1.1); }
.color-picker-grid .colorPick.selected{
  box-shadow:0 0 0 3px #2f63e8;
  border-color:#fff;
}
.color-picker-grid .color-reset{
  background:#fff;
  color:#64748b;
  font-size:18px;
  border:2px dashed #cbd5e1;
}

#slackMessageSelect{
  width:100%;
  height:52px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:0 14px;
  font-size:18px;
  background:#fff;
  color:#172033;
}

#sendSlackBtn{
  width:100%;
  height:54px;
  border:0;
  border-radius:14px;
  background:#2f63e8;
  color:#fff;
  font-size:18px;
  font-weight:800;
  margin-top:18px;
  cursor:pointer;
}

/* 
 * image zoom
 */

.image-zoom-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:20000;
  background:rgba(0,0,0,.88);
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.image-zoom-modal{
  touch-action:none;
}

#zoomedImage{
  max-width:90vw;
  max-height:82vh;
  transform:scale(1);
  transition:transform .15s ease;
  border-radius:12px;
}
#zoomedImage{
  cursor:grab;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:center center;
}

#zoomedImage:active{
  cursor:grabbing;
}

.image-zoom-close{
  position:absolute;
  top:18px;
  right:22px;
  z-index:2;
  border:0;
  background:#fff;
  color:#111;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:30px;
  cursor:pointer;
}

.image-zoom-controls{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  gap:10px;
}

.image-zoom-controls button{
  border:0;
  background:#fff;
  color:#111;
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  cursor:pointer;
}

/*
 * countodwn
 */

.countdown-bubble{
  padding:0 !important;
  max-width:340px !important;
  overflow:visible !important;
  background:transparent !important;
}

.countdown-card{
  text-align:center;
  border-radius:24px;
  padding:18px 22px;
  background:linear-gradient(135deg,#fff7ed,#fde68a,#fbcfe8);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 10px 28px rgba(236,72,153,.22);
  color:#7c2d12;
}

.countdown-sparkle{
  font-size:24px;
  margin-bottom:4px;
}

.countdown-title{
  font-size:15px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.countdown-hours{
  font-size:54px;
  line-height:1;
  font-weight:900;
  margin-top:8px;
}

.countdown-label{
  font-size:18px;
  font-weight:800;
  margin-top:2px;
}

.countdown-message{
  margin-top:8px;
  font-size:15px;
  font-weight:700;
}

.countdown-target-date{
  margin-top:8px;
  font-size:11px;
  opacity:.7;
  text-align:center;
  font-weight:500;
}

/*
 * download image 
 */

.image-wrapper{
  position:relative;
  display:inline-block;
  max-width:100%;
}

.image-download{
  position:absolute;
  bottom:12px;
  right:12px;

  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);

  color:#666;
  text-decoration:none;

  box-shadow:0 2px 10px rgba(0,0,0,.15);

  opacity:.85;
  z-index:10;

  transition:all .15s ease;
}

.image-download:hover{
  opacity:1;
  transform:scale(1.08);
  color:#444;
}

.image-download i{
  font-size:15px;
}

@media (hover:none){
  .image-download{
    width:42px;
    height:42px;
    opacity:.92;
  }

  .image-download i{
    font-size:18px;
  }
}

/*
 * upload
 */

#uploadStatus{
  display:none;
  position:fixed;
  bottom:88px;
  left:38px;
  z-index:30;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  color:#1f2937;
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(15,23,42,.16);
  font-size:14px;
}

#uploadStatus.error{
  background:#fee2e2;
  color:#991b1b;
}

#uploadStatus.success{
  background:#dcfce7;
  color:#166534;
}

@media(max-width:700px){
  #uploadStatus{
    bottom:72px;
    left:16px;
    font-size:13px;
  }
}

/*
 * login 
 */

#login.screen.active{
  display:flex;
  min-height:100dvh;
  background:
    radial-gradient(circle at top left, rgba(144,76,255,.45), transparent 34%),
    radial-gradient(circle at bottom right, rgba(47,134,255,.38), transparent 36%),
    linear-gradient(135deg,#101a3a,#16245a);
  padding:24px;
}

.login-card{
  margin:auto;
  width:min(92vw,420px);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  padding:34px;
  border-radius:30px;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.55);
}

.login-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:22px;
}

.login-logo-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    border:4px solid #904cff;
    border-right-color:#2f86ff;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(16,26,58,.04);
}

.login-logo-icon span{
    font-size:36px;
    font-weight:900;
    font-style:italic;
    color:#101a3a;
    letter-spacing:-2px;
}

.login-logo-text{
    font-size:54px;
    font-weight:900;
    font-style:italic;
    line-height:1;
    letter-spacing:-2px;
}

.login-logo-text .jayla{
    color:#ffffff;
}

.login-logo-text .chat{
    background:linear-gradient(135deg,#904cff,#2f86ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

@media(max-width:700px){

    .login-logo-icon{
        width:58px;
        height:58px;
    }

    .login-logo-icon span{
        font-size:28px;
    }

    .login-logo-text{
        font-size:42px;
    }
}

.login-card .hint{
  text-align:center;
  color:#475569;
  font-size:15px;
  line-height:1.35;
  margin:0 0 22px;
}

.login-card input{
  width:100%;
  font-size:18px;
  padding:16px 18px;
  margin:9px 0;
  border:2px solid #d7ddea;
  border-radius:16px;
  background:#f8fafc;
  color:#101a3a;
  outline:none;
  text-transform:lowercase;
}

.login-card input:focus{
  border-color:#2f63e8;
  background:#fff;
  box-shadow:0 0 0 4px rgba(47,99,232,.14);
}

.remember-row{
  display:flex;
  align-items:center;
  gap:9px;
  margin:6px 2px 14px;
  font-size:15px;
  color:#6b6b6f;
  cursor:pointer;
  user-select:none;
}
.remember-row input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  accent-color:#2f63e8;
  cursor:pointer;
}
.remember-row input[type="checkbox"]:focus{
  box-shadow:none;
}

.login-card button{
  width:100%;
  border:0;
  background:linear-gradient(135deg,#2f63e8,#904cff);
  color:#fff;
  font-weight:900;
  font-size:18px;
  border-radius:18px;
  padding:16px;
  margin-top:14px;
  box-shadow:0 12px 24px rgba(47,99,232,.28);
  cursor:pointer;
}

.login-card button:active{
  transform:scale(.98);
}

@media(max-width:700px){
  #login.screen.active{
    padding:18px;
  }

  .login-card{
    padding:28px 24px;
    border-radius:26px;
  }

}

.login-container{
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.login-logo{
    margin-bottom:28px;
    text-align:center;
}

@keyframes logoFloat{
    0%   { transform:translateY(0px); }
    50%  { transform:translateY(-6px); }
    100% { transform:translateY(0px); }
}

.login-container{
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.login-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:28px;

    filter:
        drop-shadow(0 8px 20px rgba(0,0,0,.35))
        drop-shadow(0 0 24px rgba(144,76,255,.20));
}

.login-logo-icon{
    width:74px;
    height:74px;
    border-radius:50%;

    border:4px solid #904cff;
    border-right-color:#2f86ff;

    display:flex;
    align-items:center;
    justify-content:center;
}

.login-logo-icon span{
    font-size:34px;
    font-weight:900;
    font-style:italic;
    color:#ffffff;
    letter-spacing:-2px;
}

.login-logo-text{
    font-size:58px;
    font-weight:900;
    font-style:italic;
    line-height:1;
    letter-spacing:-2px;
}

.login-logo-text .jayla{
    color:#ffffff;
}

.login-logo-text .chat{
    background:linear-gradient(135deg,#904cff,#2f86ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

@media(max-width:700px){

    .login-logo{
        gap:12px;
        margin-bottom:22px;
    }

    .login-logo-icon{
        width:58px;
        height:58px;
    }

    .login-logo-icon span{
        font-size:26px;
    }

    .login-logo-text{
        font-size:42px;
    }
}

/*
 *  link 
 */

.bubble a{
  text-decoration:underline;
  font-weight:600;
  word-break:break-all;
}

.bubble a{
  color:inherit !important;
  text-decoration:underline;
  font-weight:700;
}

.emoji-only{
  font-size:48px !important;
  line-height:1.1;
  padding:18px 24px !important;
}

/*
 *  emoji 
 */

.emoji-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:12000;
  background:rgba(15,23,42,.35);
  backdrop-filter:blur(4px);
  align-items:flex-end;
  justify-content:center;
  padding:18px;
}

.emoji-card{
  width:min(94vw,720px);
  max-height:78vh;
  overflow:auto;
  background:#fff;
  border-radius:24px;
  padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
  position:relative;
}

.emoji-card h3{
  margin:0 0 18px;
  font-size:28px;
  color:#111827;
}

.emoji-card h4{
  margin:22px 0 14px;
  font-size:20px;
  color:#374151;
}

.emoji-close{
  position:absolute;
  top:18px;
  right:22px;
  border:0;
  background:transparent;
  font-size:34px;
  font-weight:900;
  color:#374151;
  cursor:pointer;
}

#emojiSearch{
  width:100%;
  height:56px;
  border:2px solid #2f63e8;
  border-radius:16px;
  padding:0 18px;
  font-size:22px;
  outline:0;
}

.emoji-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:10px;
}

.emoji-pick{
  border:0;
  background:transparent;
  font-size:30px;
  height:44px;
  border-radius:12px;
  cursor:pointer;
}

.emoji-pick:hover{
  background:#eef2f7;
}

@media(max-width:700px){
  .emoji-card{
    max-height:70vh;
    padding:20px;
  }

  .emoji-grid{
    grid-template-columns:repeat(6,1fr);
  }

  .emoji-pick{
    font-size:28px;
  }
}

/*
 * edit modal
 */

.edit-card{
  width:min(92vw,520px);
}

#editMessageText{
  width:100%;
  min-height:150px;
  resize:vertical;
  border:2px solid #d1d7e2;
  border-radius:16px;
  padding:14px;
  font-size:14px;
  line-height:1.35;
  outline:0;
  color:#172033;
}

#editMessageText:focus{
  border-color:#2f63e8;
}

#saveEditBtn{
  width:100%;
  height:54px;
  border:0;
  border-radius:14px;
  background:#2f63e8;
  color:#fff;
  font-size:18px;
  font-weight:800;
  margin-top:16px;
  cursor:pointer;
}

/*
 * preview
 */

.link-preview-bubble{
  padding:0 !important;
  max-width:360px !important;
  overflow:visible !important;
}

.link-preview-card{
  display:block;
  color:inherit;
  text-decoration:none !important;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.55);
}

.link-preview-card img{
  display:block;
  width:100%;
  max-height:190px;
  object-fit:cover;
}

.link-preview-info{
  padding:12px 14px;
}

.link-preview-title{
  font-weight:800;
  font-size:18px;
  line-height:1.25;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.link-preview-desc{
  font-size:12px;
  line-height:1.35;
  opacity:.8;

  margin-top: 5px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.link-preview-url{
  margin-top:8px;
  font-size:12px;
  opacity:.6;
  word-break:break-all;
}

/*
 * max width desktop
 */

@media (min-width: 768px){

  body{
    min-height:100vh;
    background:
      radial-gradient(circle at top left, rgba(144,76,255,.18), transparent 34%),
      radial-gradient(circle at bottom right, rgba(47,134,255,.16), transparent 36%),
      #d9e8ed;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  /* Login fills the whole window so its dark gradient bleeds edge-to-edge;
     the card stays centered. (Only the chat keeps the phone-frame look.) */
  #login.screen.active{
    width:100%;
    min-height:100vh;
  }

  #chat.screen.active{
    width:min(94vw, 820px);   /* tablet-width frame on desktop (was phone-width) */
    max-width:820px;
    height:calc(100vh - 40px);
    max-height:1100px;
    margin:20px auto;
    border-radius:24px;
    overflow:hidden;
    position:relative;
    box-shadow:
      0 22px 70px rgba(15,23,42,.22),
      0 0 0 1px rgba(15,23,42,.08);
  }

  #messages{
    margin:0;
    border-radius:0;
  }

  .composer-dock{
    left:0;
    right:0;
    bottom:0;
    width:100%;
  }

  #typing,
  #uploadStatus{
    position:absolute;
    left:16px;
    bottom:78px;
  }

  .status-modal,
  .simple-modal,
  .media-modal,
  .emoji-modal,
  .image-zoom-modal{
    position:fixed;
  }
}

/* 
 *  help list
 */

.help-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.help-item code{
  display:block;
  font-size:16px;
  font-weight:800;
  color:#2563eb;
}

.help-item p{
  margin:4px 0 0;
  color:#475569;
  font-size:14px;
}

/*
 * countdown modal
 */

#countdownTimezone{
  width:100%;
  height:52px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:0 14px;
  font-size:16px;
  margin-bottom:14px;
  background:#fff;
  color:#172033;
}

.countdown-setup-card{
    width:min(92vw,520px);
}

#countdownTitle,
#countdownTarget{
    width:100%;
    height:52px;
    border:2px solid #d1d7e2;
    border-radius:14px;
    padding:0 14px;
    font-size:16px;
    margin-bottom:14px;
}

#countdownMessage{
    width:100%;
    min-height:120px;
    border:2px solid #d1d7e2;
    border-radius:14px;
    padding:12px;
    resize:vertical;
    margin-bottom:14px;
    font-size:16px;
}

#saveCountdownBtn{
    width:100%;
    height:54px;
    border:0;
    border-radius:14px;
    background:#2f63e8;
    color:#fff;
    font-size:18px;
    font-weight:800;
    cursor:pointer;
}

/*
 * weather
 */

.weather-bubble{
  padding:0 !important;
  max-width:320px !important;
  overflow:visible !important;
  background:transparent !important;
}

.weather-card{
  text-align:center;
  border-radius:24px;
  padding:18px 22px;
  background:linear-gradient(135deg,#e0f2fe,#dbeafe,#eef2ff);
  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 10px 28px rgba(37,99,235,.18);
  color:#0f172a;
}

.weather-icon{
  font-size:34px;
  line-height:1;
  margin-bottom:6px;
}

.weather-location{
  font-size:15px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#1e3a8a;
}

.weather-current{
  font-size:56px;
  line-height:1;
  font-weight:950;
  margin:8px 0 2px;
  color:#0f172a;
}

.weather-condition{
  font-size:17px;
  font-weight:800;
  color:#334155;
  margin-bottom:12px;
}

.weather-hi-lo{
  display:flex;
  justify-content:center;
  gap:16px;
  font-size:15px;
  font-weight:900;
  color:#1e40af;
}

/* 
 *location
 */

.location-bubble{
  padding:0 !important;
  max-width:360px !important;
  overflow:visible !important;
  background:transparent !important;
}

.location-card{
  display:block;
  overflow:hidden;
  border-radius:22px;
  background:#f8fafc;
  color:#172033 !important;
  text-decoration:none !important;
  box-shadow:0 10px 28px rgba(15,23,42,.14);
}

.location-map-wrap{
  position:relative;
  width:100%;
  background:#e5e7eb;
}

.location-map{
  display:block;
  width:100%;
  height:auto;
  min-height:190px;
  object-fit:cover;
}

.location-pin{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-100%);
  color:#ef4444;
  font-size:34px;
  text-shadow:0 3px 8px rgba(0,0,0,.35);
}

.location-info{
  padding:13px 15px 15px;
}

.location-title{
  font-size:17px;
  font-weight:900;
  color:#111827;
}

.location-address{
  margin-top:5px;
  font-size:13px;
  line-height:1.3;
  color:#475569;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.location-coords{
  margin-top:8px;
  font-size:11px;
  color:#64748b;
  font-weight:700;
}
/*
 *  seperator
 */

.date-separator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:18px 0 14px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.history-loading{
  text-align:center;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  padding:10px 0;
}

.date-separator:before,
.date-separator:after{
  content:"";
  height:1px;
  flex:1;
  background:#e2e8f0;
}

.date-separator span{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:5px 12px;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}

/*
 * video
 */

/* ── Full-screen portrait video recorder ── */
.recorder-overlay{ display:none; position:fixed; inset:0; z-index:9200; background:#000; }
.recorder-overlay.open{ display:block; }
.recorder-preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
/* Offscreen canvas — the actual (portrait) capture source; kept rendering. */
.recorder-canvas{ position:absolute; left:-9999px; top:0; width:2px; height:2px; opacity:0; pointer-events:none; }
.recorder-top{
  position:absolute; left:0; right:0; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
}
.recorder-icon-btn{
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.42); color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.recorder-timer{ color:#fff; font-weight:800; font-size:16px; background:rgba(0,0,0,.42); padding:6px 14px; border-radius:999px; }
.recorder-status{
  position:absolute; top:74px; left:0; right:0; z-index:3; text-align:center;
  color:#fff; font-size:15px; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none;
}
.recorder-controls{
  position:absolute; left:0; right:0; bottom:calc(30px + env(safe-area-inset-bottom));
  z-index:3; display:flex; justify-content:center;
}
.record-toggle{
  width:78px; height:78px; border-radius:50%; border:5px solid #fff; background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.record-dot{ width:60px; height:60px; border-radius:50%; background:#ef4444; transition:all .18s ease; }
.record-toggle.recording .record-dot{ width:30px; height:30px; border-radius:8px; }

.video-bubble{
  padding:8px !important;
  max-width:340px !important;
  overflow:visible !important;
}

.video-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#000;
}

.video-msg{
  display:block;
  width:100%;
  max-width:320px;
  max-height:420px;
  background:#000;
  border-radius:18px;
}

.video-meta{
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}

/*
 * library
 */

.library-auth-card,
.library-edit-card{
  width:min(92vw,460px);
}

#libraryEmail,
#libraryPasscode,
#libraryUnlockPasscode,
#libraryEditTitle{
  width:100%;
  height:52px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:0 14px;
  font-size:16px;
  margin-bottom:14px;
  background:#fff;
  color:#172033;
}

#librarySearch,
#libraryTypeFilter{
  width:100%;
  height:38px;
  border:1px solid #d1d7e2;
  border-radius:10px;
  padding:0 12px;
  font-size:14px;
  background:#fff;
  color:#172033;
}

#libraryEditDescription{
  width:100%;
  min-height:120px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:12px 14px;
  font-size:16px;
  resize:vertical;
  color:#172033;
}

#libraryAuthSubmitBtn,
#libraryUnlockSubmitBtn,
#saveLibraryMetaBtn{
  width:100%;
  height:54px;
  border:0;
  border-radius:14px;
  background:#2f63e8;
  color:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  margin-top:12px;
}

#libraryAuthMessage{
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  color:#991b1b;
  text-align:center;
}

.library-card{
  width:min(94vw,760px);
  max-height:86vh;
  overflow:auto;
  padding:18px;
}

.library-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 40px 12px 0;
}

.library-header h3{
  margin:0;
}

.library-controls{
  display:grid;
  grid-template-columns:1fr 130px;
  gap:8px;
  margin-bottom:12px;
}

.library-upload-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:none;
  height:34px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:#2f63e8;
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.library-upload-btn:hover{
  background:#2552c9;
}

#libraryGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.library-item{
  background:#f8fafc;
  border-radius:18px;
  overflow:hidden;
  text-align:left;
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}

.library-preview-btn{
  width:100%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  display:block;
}

.library-thumb-wrap{
  position:relative;
  background:#e5e7eb;
  aspect-ratio:1/1;
}

.library-thumb-wrap img,
.library-thumb-wrap video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.library-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:42px;
  text-shadow:0 4px 14px rgba(0,0,0,.45);
}

/* Note card in the library grid — a little sticky-note look */
.library-note-thumb{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  text-align:center;
  box-sizing:border-box;
}

.library-note-thumb > i{
  font-size:30px;
  opacity:.7;
}

.library-note-snippet{
  font-size:12px;
  line-height:1.35;
  color:inherit;
  opacity:.92;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}

.library-item-info{
  padding:10px 12px;
}

.library-item-title{
  font-size:14px;
  font-weight:900;
  color:#111827;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.library-item-desc{
  margin-top:3px;
  font-size:12px;
  color:#64748b;
  line-height:1.25;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.save-library-btn{
  position:absolute;
  left:12px;
  bottom:12px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#475569;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:12;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
}

.save-library-btn:hover{
  color:#2f63e8;
  transform:scale(1.06);
}

@media(max-width:700px){
  .library-controls{
    grid-template-columns:1fr;
  }

  #libraryGrid{
    grid-template-columns:repeat(2,1fr);
  }

  .library-card{
    width:94vw;
    max-height:82vh;
  }
}
.library-viewer-card{
  position:relative;
  width:min(94vw,820px);
  max-height:88vh;
  background:#0f172a;
  border-radius:24px;
  padding:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}

#libraryViewerContent img,
#libraryViewerContent video{
  display:block;
  max-width:100%;
  max-height:78vh;
  margin:0 auto;
  border-radius:18px;
  background:#000;
}

#libraryViewerContent video{
  width:100%;
}

/* Note viewer — a sticky-note card on the dark backdrop */
.note-viewer{
  border-radius:16px;
  padding:20px 22px;
  max-height:78vh;
  overflow-y:auto;
}

/* ── Stationery note colors (shared by grid thumb, viewer, swatches) ── */
.note-color-cream { background:linear-gradient(160deg,#f8f8e4,#e9ead0); color:#5b5a2e; }
.note-color-pink  { background:linear-gradient(160deg,#f8e5e6,#f0d2d4); color:#7a4f53; }
.note-color-blue  { background:linear-gradient(160deg,#ddecf8,#c4dcf0); color:#3a5470; }
.note-color-white { background:linear-gradient(160deg,#ffffff,#ececf1); color:#4a4a55; }

/* Richer themed designs */
.note-color-loveletter{
  background:linear-gradient(160deg,#fff0f4,#ffd6e0);
  color:#9d2b4d;
  font-family:Georgia, 'Times New Roman', serif;
}
.note-color-midnight{
  background:linear-gradient(160deg,#232c52,#0f1426);
  color:#dce5ff;
}
.note-color-notebook{
  background-color:#fffdf5;
  background-image:repeating-linear-gradient(transparent, transparent 27px, #cfe0f0 28px);
  color:#2a3550;
  border-left:3px solid #f0a3b8;
}
.note-color-kraft{
  background:linear-gradient(160deg,#d9bd96,#c6a576);
  color:#46341f;
  font-family:Georgia, serif;
}
.note-color-parchment{
  background:linear-gradient(160deg,#f6edd6,#e7d7b2);
  color:#5c4326;
  font-family:Georgia, 'Times New Roman', serif;
}
.note-color-birthday{
  background-color:#fff5fb;
  background-image:
    radial-gradient(circle at 18% 22%, #ffd1e8 6px, transparent 7px),
    radial-gradient(circle at 78% 32%, #c9e7ff 5px, transparent 6px),
    radial-gradient(circle at 60% 75%, #d8f5c9 6px, transparent 7px),
    radial-gradient(circle at 32% 82%, #fff0b3 5px, transparent 6px),
    linear-gradient(160deg,#fff6fb,#ffe9f3);
  color:#7a3b86;
}

/* Color picker in the edit modal */
.note-color-grid{
  display:flex;
  gap:12px;
  margin:6px 0 16px;
}

.note-color-swatch{
  width:42px;
  height:42px;
  border-radius:12px;
  border:2px solid #d1d7e2;
  cursor:pointer;
  padding:0;
  box-shadow:0 1px 3px rgba(15,23,42,.12);
}

.note-color-swatch.selected{
  border-color:#2f63e8;
  box-shadow:0 0 0 3px rgba(47,99,232,.22);
}

/* ── Compose note ── */
.compose-card{ width:min(94vw,520px); max-height:92vh; overflow-y:auto; }

.compose-surface{
  border-radius:16px;
  padding:16px 18px;
  margin:6px 0 14px;
  min-height:240px;
  display:flex;
  flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}

.compose-title-input{
  background:transparent;
  border:0;
  outline:0;
  font-size:20px;
  font-weight:800;
  color:inherit;
  font-family:inherit;
  margin-bottom:8px;
  width:100%;
}

.compose-body-input{
  background:transparent;
  border:0;
  outline:0;
  resize:vertical;
  flex:1;
  min-height:170px;
  font-size:16px;
  line-height:1.5;
  color:inherit;
  font-family:inherit;
  width:100%;
}

.compose-surface input::placeholder,
.compose-surface textarea::placeholder{ color:currentColor; opacity:.5; }

.note-theme-grid{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:6px 2px 12px;
  -webkit-overflow-scrolling:touch;
}

.note-theme-swatch{
  flex:0 0 auto;
  width:70px;
  height:48px;
  border-radius:10px;
  border:2px solid #d1d7e2;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  font-family:inherit;
}

.note-theme-swatch span{
  font-size:9px;
  font-weight:800;
  padding:2px 3px;
  background:rgba(255,255,255,.55);
  border-radius:6px 6px 0 0;
  color:#1f2937;
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.note-theme-swatch.selected{
  border-color:#2f63e8;
  box-shadow:0 0 0 3px rgba(47,99,232,.22);
}

.compose-save-status{
  min-height:16px;
  margin:0 2px 8px;
  font-size:12px;
  font-weight:700;
  color:#64748b;
  text-align:right;
}

.compose-actions{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.compose-btn-secondary{
  flex:1;
  height:50px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  background:#fff;
  color:#334155;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
}

.compose-btn-primary{
  flex:1;
  height:50px;
  border:0;
  border-radius:14px;
  background:#2f63e8;
  color:#fff;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
}

/* ── Drafts list ── */
.drafts-card{ width:min(94vw,480px); max-height:86vh; overflow-y:auto; }

.drafts-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  padding-right:44px;   /* keep "+ New" clear of the × close button */
}

.drafts-new-btn{
  border:0;
  border-radius:12px;
  background:#2f63e8;
  color:#fff;
  font-weight:800;
  padding:8px 14px;
  cursor:pointer;
}

.draft-item{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:10px;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(15,23,42,.14);
}

.draft-item-main{ flex:1; min-width:0; }

.draft-item-title{ font-weight:800; font-size:15px; }

.draft-item-snippet{
  font-size:13px;
  opacity:.82;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.draft-delete{
  flex-shrink:0;
  border:0;
  background:rgba(0,0,0,.13);
  color:inherit;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
}

/* ── Themed note in chat ── */
.bubble.themed-note-bubble{
  padding:0 !important;
  max-width:340px !important;
  overflow:hidden;
}

.themed-note{ padding:16px 18px; }

.themed-note-title{
  font-size:18px;
  font-weight:800;
  margin-bottom:8px;
  line-height:1.3;
}

.themed-note-body{
  font-size:15px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

.themed-note-save{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  background:rgba(0,0,0,.14);
  color:inherit;
}

.themed-note-save:disabled{ opacity:.7; cursor:default; }

.note-viewer-title{
  font-size:19px;
  font-weight:900;
  margin-bottom:4px;
}

.note-viewer-desc{
  font-size:14px;
  font-weight:600;
  opacity:.75;
  margin-bottom:12px;
}

.note-viewer-body{
  font-size:16px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

.note-viewer-body a{ color:#1d4ed8; }

.library-mini-actions{
  display:flex;
  gap:6px;
  margin-top:7px;
}

.library-edit-mini,
.library-delete-mini,
.library-fav-mini,
.library-lock-mini,
.library-send-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:0;
  border-radius:8px;
  padding:0;
  font-size:12px;
  cursor:pointer;
}

.library-fav-mini,
.library-lock-mini{
  background:#f1f5f9;
  color:#64748b;
}

.library-fav-mini.active{
  background:#fef3c7;
  color:#d97706;
}

.library-lock-mini.active{
  background:#e0e7ff;
  color:#1e3a8a;
}

.library-locked-placeholder{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#e2e8f0,#cbd5e1 60%,#b8c2d0);
  filter:blur(2px);
}

.library-lock-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:30px;
  background:rgba(15,23,42,.28);
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  pointer-events:none;
}

.library-edit-mini{
  background:#e0e7ff;
  color:#1e3a8a;
}

.library-send-mini{
  background:#dbeafe;
  color:#1d4ed8;
}

.library-delete-mini{
  background:#fee2e2;
  color:#991b1b;
}

.library-send-card{
  width:min(92vw,460px);
}

#librarySendText{
  width:100%;
  min-height:90px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:12px 14px;
  font-size:16px;
  resize:vertical;
  color:#172033;
  box-sizing:border-box;
  font-family:inherit;
}

#librarySendConfirmBtn{
  width:100%;
  height:54px;
  border:0;
  border-radius:14px;
  background:#2f63e8;
  color:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  margin-top:12px;
}

#librarySendPreview{
  margin-bottom:16px;
  border-radius:14px;
  overflow:hidden;
  max-height:200px;
  text-align:center;
  background:#f1f5f9;
}

#librarySendPreview img,
#librarySendPreview video{
  max-width:100%;
  max-height:200px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

/* ── Library share modal ── */
.library-share-card{ width:min(92vw,460px); }

#librarySharePreview{
  margin-bottom:16px;
  border-radius:14px;
  overflow:hidden;
  max-height:200px;
  text-align:center;
  background:#f1f5f9;
}
#librarySharePreview img,
#librarySharePreview video{
  max-width:100%;
  max-height:200px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

#libraryShareUsername{
  width:100%;
  height:48px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  padding:0 14px;
  font-size:16px;
  color:#172033;
  box-sizing:border-box;
  font-family:inherit;
}

#libraryShareConfirmBtn{
  width:100%;
  height:54px;
  border:0;
  border-radius:14px;
  background:#2f63e8;
  color:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  margin-top:12px;
}

#libraryShareMessage{
  margin-top:10px;
  font-size:14px;
  font-weight:700;
  color:#dc2626;
  text-align:center;
  min-height:18px;
}

/* Share button in the library viewer */
.library-viewer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:12px;
}

.library-viewer-share{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border:0;
  border-radius:14px;
  background:#2f63e8;
  color:#fff;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
}

.library-viewer-download{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border:2px solid #2f63e8;
  border-radius:14px;
  background:#fff;
  color:#2f63e8;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
}

/* ── Shared-item chat card ── */
.bubble.share-bubble{
  padding:10px !important;
  max-width:320px !important;
}

.share-card{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.share-card-head{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  line-height:1.35;
}

.share-card-head i{ margin-top:2px; opacity:.8; }

.share-view-btn,
.share-accept-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:12px;
  padding:10px 14px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}

.share-view-btn{
  background:rgba(15,23,42,.10);
  color:inherit;
}

.share-accept-btn{
  background:#16a34a;
  color:#fff;
}

.share-accept-btn:disabled{
  background:#94a3b8;
  cursor:default;
}

.share-status{
  font-size:13px;
  font-weight:700;
  opacity:.75;
  min-height:16px;
}

body.themed .share-view-btn{ background:rgba(255,255,255,.16); }

.share-img{
  width:100%;
  max-height:340px;
  object-fit:cover;
  border-radius:13px;
  display:block;
  cursor:pointer;
  background:#000;
}

.lib-img-caption{
  padding:5px 10px 7px;
  font-size:14px;
  word-break:break-word;
  line-height:1.4;
}

.lib-img-bubble .image-wrapper{
  display:block;
  width:100%;
}

/* ================================================================
 * THEMES (local-only skins)
 * Each theme defines a set of CSS variables; the shared
 * `body.themed` block below applies them across the chat UI.
 * No theme classes = today's base look (unchanged).
 * ================================================================ */

/* Default theme — the original jaylaChat look with logo-gradient accents. */
body.theme-jayla-chat{
  --th-header:#101a3a;   --th-header-text:#ffffff;
  --th-statusbar:#f4f6fb; --th-statusbar-text:#1f2937;
  --th-messages:#eef2f7;
  --th-mine:#2f63e8;     --th-mine-text:#ffffff;
  --th-other:#ffffff;    --th-other-text:#172033;
  --th-composer:#f9fafc;
  --th-input:#ffffff;    --th-input-text:#172033; --th-input-border:#cfd7e3;
  --th-btn:#eef2f7;      --th-btn-text:#172033;
  --th-send:#2f63e8;
  --th-meta:rgba(15,23,42,.55);
  --th-accent:#904cff;
}
/* Logo purple→blue gradient woven into the header + a faint tint on the pane. */
body.theme-jayla-chat.themed .chat-header{
  background:linear-gradient(120deg,#2a1a63 0%, #101a3a 48%, #14275e 100%);
}
body.theme-jayla-chat.themed #messages{
  background-color:#eef2f7;
  background-image:
    radial-gradient(circle at 12% -5%, rgba(144,76,255,.07), transparent 42%),
    radial-gradient(circle at 105% 105%, rgba(47,99,232,.07), transparent 46%);
}
body.theme-jayla-chat.themed .msg-row.theirs .bubble{ box-shadow:0 1px 2px rgba(15,23,42,.08); }

body.theme-ocean{
  --th-header:#0b2a4a;   --th-header-text:#eaf3ff;
  --th-statusbar:#0e3358; --th-statusbar-text:#eaf3ff;
  --th-messages:#0a1f33;
  --th-mine:#2563eb;     --th-mine-text:#ffffff;
  --th-other:#14375a;    --th-other-text:#dbeafe;
  --th-composer:#0b2a4a;
  --th-input:#0e3358;    --th-input-text:#eaf3ff; --th-input-border:#1d4e7e;
  --th-btn:#0e3358;      --th-btn-text:#eaf3ff;
  --th-send:#3b82f6;
  --th-meta:rgba(234,243,255,.55);
}

body.theme-sunset{
  --th-header:#3b1d4e;   --th-header-text:#ffe9d6;
  --th-statusbar:#4a2350; --th-statusbar-text:#ffe9d6;
  --th-messages:#1a0c1e;
  --th-mine:#c01638;     --th-mine-text:#ffffff;
  --th-other:#7c3a5e;    --th-other-text:#ffe1ec;
  --th-composer:#3b1d4e;
  --th-input:#4a2350;    --th-input-text:#ffe9d6; --th-input-border:#6b3a6e;
  --th-btn:#4a2350;      --th-btn-text:#ffe9d6;
  --th-send:#fb7185;
  --th-meta:rgba(255,233,214,.55);
}

body.theme-forest{
  --th-header:#0f3326;   --th-header-text:#e6f6ec;
  --th-statusbar:#134031; --th-statusbar-text:#e6f6ec;
  --th-messages:#0a261c;
  --th-mine:#16a34a;     --th-mine-text:#ffffff;
  --th-other:#1c4d3a;    --th-other-text:#d1fae5;
  --th-composer:#0f3326;
  --th-input:#134031;    --th-input-text:#e6f6ec; --th-input-border:#246048;
  --th-btn:#134031;      --th-btn-text:#e6f6ec;
  --th-send:#22c55e;
  --th-meta:rgba(20,40,30,.6);
}

body.theme-grape{
  --th-header:#2e1065;   --th-header-text:#ede9fe;
  --th-statusbar:#3b1380; --th-statusbar-text:#ede9fe;
  --th-messages:#1e0b40;
  --th-mine:#7c3aed;     --th-mine-text:#ffffff;
  --th-other:#4c1d95;    --th-other-text:#ede9fe;
  --th-composer:#2e1065;
  --th-input:#3b1380;    --th-input-text:#ede9fe; --th-input-border:#5b21b6;
  --th-btn:#3b1380;      --th-btn-text:#ede9fe;
  --th-send:#8b5cf6;
  --th-meta:rgba(237,233,254,.55);
}

body.theme-midnight{
  --th-header:#0b0f1a;   --th-header-text:#e5e7eb;
  --th-statusbar:#111827; --th-statusbar-text:#e5e7eb;
  --th-messages:#0a0e17;
  --th-mine:#3b82f6;     --th-mine-text:#ffffff;
  --th-other:#1f2937;    --th-other-text:#e5e7eb;
  --th-composer:#0b0f1a;
  --th-input:#111827;    --th-input-text:#e5e7eb; --th-input-border:#374151;
  --th-btn:#1f2937;      --th-btn-text:#e5e7eb;
  --th-send:#3b82f6;
  --th-meta:rgba(229,231,235,.5);
}

body.theme-rose{
  --th-header:#9d174d;   --th-header-text:#fff1f5;
  --th-statusbar:#fbe6ef; --th-statusbar-text:#831843;
  --th-messages:#fff5f9;
  --th-mine:#db2777;     --th-mine-text:#ffffff;
  --th-other:#fce7f3;    --th-other-text:#831843;
  --th-composer:#fde7f1;
  --th-input:#ffffff;    --th-input-text:#4a1d35; --th-input-border:#f3b6d2;
  --th-btn:#ffffff;      --th-btn-text:#9d174d;
  --th-send:#db2777;
  --th-meta:rgba(74,29,53,.55);
  --th-accent:#14b8a6;
}

body.theme-sky{
  --th-header:#0369a1;   --th-header-text:#f0f9ff;
  --th-statusbar:#e0f2fe; --th-statusbar-text:#075985;
  --th-messages:#f5fbff;
  --th-mine:#0ea5e9;     --th-mine-text:#ffffff;
  --th-other:#e0f2fe;    --th-other-text:#075985;
  --th-composer:#e8f6fe;
  --th-input:#ffffff;    --th-input-text:#0c2a3a; --th-input-border:#bae6fd;
  --th-btn:#ffffff;      --th-btn-text:#0369a1;
  --th-send:#0ea5e9;
  --th-meta:rgba(12,42,58,.55);
  --th-accent:#f59e0b;
}

body.theme-mint{
  --th-header:#047857;   --th-header-text:#ecfdf5;
  --th-statusbar:#d1fae5; --th-statusbar-text:#065f46;
  --th-messages:#f3fdf8;
  --th-mine:#10b981;     --th-mine-text:#ffffff;
  --th-other:#d1fae5;    --th-other-text:#065f46;
  --th-composer:#e3f9ef;
  --th-input:#ffffff;    --th-input-text:#0c2a22; --th-input-border:#a7f3d0;
  --th-btn:#ffffff;      --th-btn-text:#047857;
  --th-send:#10b981;
  --th-meta:rgba(12,42,34,.55);
  --th-accent:#fb7185;
}

body.theme-lavender{
  --th-header:#6d28d9;   --th-header-text:#f5f3ff;
  --th-statusbar:#ede9fe; --th-statusbar-text:#5b21b6;
  --th-messages:#f8f6ff;
  --th-mine:#8b5cf6;     --th-mine-text:#ffffff;
  --th-other:#ede9fe;    --th-other-text:#5b21b6;
  --th-composer:#efeafe;
  --th-input:#ffffff;    --th-input-text:#2a1a4a; --th-input-border:#ddd6fe;
  --th-btn:#ffffff;      --th-btn-text:#6d28d9;
  --th-send:#8b5cf6;
  --th-meta:rgba(42,26,74,.55);
}

/* --- Multi-color themes (complementary pairs) --- */

/* Light: blue + red */
body.theme-patriotic{
  --th-header:#1e3a8a;   --th-header-text:#eff6ff;
  --th-statusbar:#eef2ff; --th-statusbar-text:#1e3a8a;
  --th-messages:#f8fafc;
  --th-mine:#2563eb;     --th-mine-text:#ffffff;
  --th-other:#fee2e2;    --th-other-text:#991b1b;
  --th-composer:#eef2f6;
  --th-input:#ffffff;    --th-input-text:#1e293b; --th-input-border:#cbd5e1;
  --th-btn:#ffffff;      --th-btn-text:#1e3a8a;
  --th-send:#dc2626;
  --th-meta:rgba(30,41,59,.55);
  --th-accent:#dc2626;
}

/* Light: orange + green */
body.theme-citrus{
  --th-header:#ea580c;   --th-header-text:#fff7ed;
  --th-statusbar:#fff7ed; --th-statusbar-text:#9a3412;
  --th-messages:#fffdf7;
  --th-mine:#f97316;     --th-mine-text:#ffffff;
  --th-other:#dcfce7;    --th-other-text:#166534;
  --th-composer:#fef3e9;
  --th-input:#ffffff;    --th-input-text:#3a2410; --th-input-border:#fed7aa;
  --th-btn:#ffffff;      --th-btn-text:#c2410c;
  --th-send:#16a34a;
  --th-meta:rgba(58,36,16,.55);
  --th-accent:#16a34a;
}

/* Light: pink + teal */
body.theme-berry{
  --th-header:#be185d;   --th-header-text:#fdf2f8;
  --th-statusbar:#fdf2f8; --th-statusbar-text:#9d174d;
  --th-messages:#fffafd;
  --th-mine:#db2777;     --th-mine-text:#ffffff;
  --th-other:#ccfbf1;    --th-other-text:#115e59;
  --th-composer:#fdeef5;
  --th-input:#ffffff;    --th-input-text:#3f1d2e; --th-input-border:#fbcfe8;
  --th-btn:#ffffff;      --th-btn-text:#9d174d;
  --th-send:#14b8a6;
  --th-meta:rgba(63,29,46,.55);
  --th-accent:#14b8a6;
}

/* Dark: purple + cyan */
body.theme-galaxy{
  --th-header:#1e1b4b;   --th-header-text:#ede9fe;
  --th-statusbar:#1e1b4b; --th-statusbar-text:#ede9fe;
  --th-messages:#0f0e24;
  --th-mine:#7c3aed;     --th-mine-text:#ffffff;
  --th-other:#155e63;    --th-other-text:#99f6e4;
  --th-composer:#1e1b4b;
  --th-input:#2a2456;    --th-input-text:#ede9fe; --th-input-border:#4c3a8a;
  --th-btn:#2a2456;      --th-btn-text:#ede9fe;
  --th-send:#22d3ee;
  --th-meta:rgba(237,233,254,.5);
  --th-accent:#22d3ee;
}

/* Dark: red + blue */
body.theme-ember{
  --th-header:#2a1518;   --th-header-text:#fee2e2;
  --th-statusbar:#2a1518; --th-statusbar-text:#fecaca;
  --th-messages:#160b0d;
  --th-mine:#dc2626;     --th-mine-text:#ffffff;
  --th-other:#1e3a5f;    --th-other-text:#bfdbfe;
  --th-composer:#2a1518;
  --th-input:#3a1d20;    --th-input-text:#fee2e2; --th-input-border:#5a2d31;
  --th-btn:#3a1d20;      --th-btn-text:#fee2e2;
  --th-send:#3b82f6;
  --th-meta:rgba(254,226,226,.5);
  --th-accent:#3b82f6;
}

/* Dark: green + amber */
body.theme-pine{
  --th-header:#14271c;   --th-header-text:#dcfce7;
  --th-statusbar:#14271c; --th-statusbar-text:#bbf7d0;
  --th-messages:#0a1710;
  --th-mine:#16a34a;     --th-mine-text:#ffffff;
  --th-other:#4a3410;    --th-other-text:#fde68a;
  --th-composer:#14271c;
  --th-input:#1c3326;    --th-input-text:#dcfce7; --th-input-border:#2d5540;
  --th-btn:#1c3326;      --th-btn-text:#dcfce7;
  --th-send:#f59e0b;
  --th-meta:rgba(220,252,231,.5);
  --th-accent:#f59e0b;
}

body.theme-watermelon{
  --th-header:#e23b6d;   --th-header-text:#fff0f5;
  --th-statusbar:#ffe4ee; --th-statusbar-text:#9d1b46;
  --th-messages:#fff5f8;
  --th-mine:#f0457a;     --th-mine-text:#ffffff;
  --th-other:#d8f0cf;    --th-other-text:#357a32;
  --th-composer:#ffe9f0;
  --th-input:#ffffff;    --th-input-text:#5a1130; --th-input-border:#f7c1d5;
  --th-btn:#ffffff;      --th-btn-text:#c01f56;
  --th-send:#5bbb4a;
  --th-meta:rgba(90,17,48,.55);
  --th-accent:#3fae3f;
}

body.theme-coffee{
  --th-header:#2b1d14;   --th-header-text:#f3e7d6;
  --th-statusbar:#2b1d14; --th-statusbar-text:#e8d6bf;
  --th-messages:#20160f;
  --th-mine:#a9764e;     --th-mine-text:#ffffff;
  --th-other:#3d2a1c;    --th-other-text:#ead9c4;
  --th-composer:#2b1d14;
  --th-input:#3a281b;    --th-input-text:#f3e7d6; --th-input-border:#4f3925;
  --th-btn:#3a281b;      --th-btn-text:#f3e7d6;
  --th-send:#c2853f;
  --th-meta:rgba(243,231,214,.5);
  --th-accent:#c2853f;
}

body.theme-cool-mountain{
  --th-header:#3a5599;   --th-header-text:#eaf0ff;
  --th-statusbar:#43609f; --th-statusbar-text:#eaf0ff;
  --th-messages:#6f8bc9;
  --th-mine:#3f5fae;     --th-mine-text:#ffffff;
  --th-other:#e6ebf8;    --th-other-text:#1f2c4d;
  --th-composer:#3a5599;
  --th-input:#43609f;    --th-input-text:#eaf0ff; --th-input-border:#5f7bba;
  --th-btn:#43609f;      --th-btn-text:#eaf0ff;
  --th-send:#5b8def;
  --th-meta:rgba(255,255,255,.78);
  --th-accent:#8fb0f0;
}

body.theme-ocean-night{
  --th-header:#122443;   --th-header-text:#dceaff;
  --th-statusbar:#16294a; --th-statusbar-text:#dceaff;
  --th-messages:#0f1d36;
  --th-mine:#2563eb;     --th-mine-text:#ffffff;
  --th-other:#1c3354;    --th-other-text:#d6e6fb;
  --th-composer:#122443;
  --th-input:#16294a;    --th-input-text:#dceaff; --th-input-border:#244569;
  --th-btn:#16294a;      --th-btn-text:#dceaff;
  --th-send:#38bdf8;
  --th-meta:rgba(220,235,255,.6);
  --th-accent:#7dd3fc;
}

body.theme-redwood-night{
  --th-header:#1e302e;   --th-header-text:#dce7e3;
  --th-statusbar:#243a37; --th-statusbar-text:#dce7e3;
  --th-messages:#2a3f3c;
  --th-mine:#2f7d5b;     --th-mine-text:#ffffff;
  --th-other:#2b4541;    --th-other-text:#dce8e4;
  --th-composer:#1e302e;
  --th-input:#243a37;    --th-input-text:#dce7e3; --th-input-border:#3a5450;
  --th-btn:#243a37;      --th-btn-text:#dce7e3;
  --th-send:#5fae87;
  --th-meta:rgba(225,235,232,.62);
  --th-accent:#7dc4a0;
}

body.theme-night-lights{
  --th-header:#1a1430;   --th-header-text:#f3e9ff;
  --th-statusbar:#231a3d; --th-statusbar-text:#f3e9ff;
  --th-messages:#0e0c1a;
  --th-mine:#c2185b;     --th-mine-text:#ffffff;
  --th-other:#123c40;    --th-other-text:#d4eeee;
  --th-composer:#1a1430;
  --th-input:#271f3e;    --th-input-text:#f3e9ff; --th-input-border:#3d3060;
  --th-btn:#271f3e;      --th-btn-text:#f3e9ff;
  --th-send:#f0a92e;
  --th-meta:rgba(243,233,255,.6);
  --th-accent:#f0c050;
}

body.theme-cotton-candy{
  --th-header:#a78bcf;   --th-header-text:#ffffff;
  --th-statusbar:#b39ddb; --th-statusbar-text:#ffffff;
  --th-messages:#ece6f6;
  --th-mine:#a855f7;     --th-mine-text:#ffffff;
  --th-other:#ffffff;    --th-other-text:#4a3a6b;
  --th-composer:#efeaf8;
  --th-input:#ffffff;    --th-input-text:#2a2540; --th-input-border:#d8cfe8;
  --th-btn:#ffffff;      --th-btn-text:#6b4e9e;
  --th-send:#a855f7;
  --th-meta:rgba(60,50,90,.6);
  --th-accent:#c084fc;
}

body.theme-sunrise-peaks{
  --th-header:#6b3f6e;   --th-header-text:#ffe9d6;
  --th-statusbar:#7a4a6a; --th-statusbar-text:#ffe9d6;
  --th-messages:#b9788a;
  --th-mine:#f97316;     --th-mine-text:#ffffff;
  --th-other:#6e4a78;    --th-other-text:#f3e0ec;
  --th-composer:#5b3a6b;
  --th-input:#6e4a78;    --th-input-text:#ffe9d6; --th-input-border:#84577f;
  --th-btn:#6e4a78;      --th-btn-text:#ffe9d6;
  --th-send:#f59e0b;
  --th-meta:rgba(255,233,214,.62);
  --th-accent:#fbbf24;
}


/* Shared application of the active theme's variables */
body.themed .chat-header{ background:var(--th-header); }
body.themed .brand-text{ color:var(--th-header-text); }
body.themed .brand-text span{ color:var(--th-accent, #904cff); }
body.themed .logo-bubble{
  border-color:var(--th-accent, #904cff);
  border-right-color:var(--th-accent, #2f86ff);
  color:var(--th-header-text);
}
body.themed .logo-bubble span{ color:var(--th-accent, #6d8dff); }
body.themed .menu-drawer{ background:var(--th-header); }
body.themed .menu-item{ color:var(--th-header-text); }
body.themed .menu-item i{ color:var(--th-send); }
body.themed .menu-item-danger{ color:#ffb4b4; }
body.themed .menu-item-danger i{ color:#ff8a8a; }

body.themed .status-bar{ background:var(--th-statusbar); border-bottom-color:rgba(127,127,127,.25); }
body.themed .status-item{ color:var(--th-statusbar-text); }
body.themed .mine-status,
body.themed .status-reactable{
  background:rgba(127,127,127,.16);
  color:var(--th-statusbar-text);
  border-color:rgba(127,127,127,.3);
}

body.themed #messages{ background:var(--th-messages); }
body.themed .meta{ color:var(--th-meta); }
body.themed .readline{ color:var(--th-meta); }

body.themed .msg-row.mine .bubble{
  background:var(--th-mine)!important;
  color:var(--th-mine-text)!important;
}
body.themed .msg-row.theirs .bubble{
  background:var(--th-other)!important;
  color:var(--th-other-text)!important;
}
body.themed .msg-row.mine .bubble a,
body.themed .msg-row.theirs .bubble a{ color:inherit!important; }

body.themed .composer{ background:var(--th-composer); }
body.themed .composer textarea{
  background:var(--th-input);
  color:var(--th-input-text);
  border-color:var(--th-input-border);
}
body.themed .round{
  background:var(--th-btn);
  color:var(--th-btn-text);
  border-color:var(--th-input-border);
}
body.themed .send{
  background:var(--th-send);
  color:#fff;
  border-color:var(--th-send);
}

/* Galaxy: starfield + nebula behind the messages */
body.theme-galaxy.themed #messages{
  background-color:#0f0e24;
  background-image:
    radial-gradient(circle at 25% 18%, rgba(124,58,237,.38), transparent 45%),
    radial-gradient(circle at 82% 76%, rgba(34,211,238,.24), transparent 45%),
    radial-gradient(circle at 58% 42%, rgba(217,70,239,.18), transparent 42%),
    radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 64%, #fff, transparent),
    radial-gradient(2px 2px at 50% 24%, #fff, transparent),
    radial-gradient(1px 1px at 70% 50%, #cbd5e1, transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, #fff, transparent),
    radial-gradient(1px 1px at 90% 80%, #fff, transparent),
    radial-gradient(1px 1px at 15% 85%, #e0e7ff, transparent),
    radial-gradient(1.5px 1.5px at 45% 90%, #fff, transparent),
    radial-gradient(1px 1px at 64% 78%, #fff, transparent),
    radial-gradient(2px 2px at 38% 40%, #fff, transparent),
    radial-gradient(1px 1px at 78% 34%, #fff, transparent);
  background-repeat:no-repeat;
}

/* Sky: drifting clouds over a light-blue sky */
body.theme-sky.themed #messages{
  background-color:#eef7ff;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'380'%20height%3D'280'%3E%3Cg%20fill%3D'%23ffffff'%20opacity%3D'0.75'%3E%3Cellipse%20cx%3D'90'%20cy%3D'70'%20rx%3D'46'%20ry%3D'30'%2F%3E%3Cellipse%20cx%3D'130'%20cy%3D'60'%20rx%3D'40'%20ry%3D'34'%2F%3E%3Cellipse%20cx%3D'60'%20cy%3D'80'%20rx%3D'34'%20ry%3D'24'%2F%3E%3Cellipse%20cx%3D'150'%20cy%3D'82'%20rx%3D'34'%20ry%3D'22'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23ffffff'%20opacity%3D'0.6'%3E%3Cellipse%20cx%3D'285'%20cy%3D'195'%20rx%3D'44'%20ry%3D'28'%2F%3E%3Cellipse%20cx%3D'320'%20cy%3D'182'%20rx%3D'38'%20ry%3D'30'%2F%3E%3Cellipse%20cx%3D'252'%20cy%3D'202'%20rx%3D'30'%20ry%3D'20'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #dcefff 0%, #f5fbff 100%);
  background-repeat:repeat, no-repeat;
  background-position:center, center;
  background-size:360px auto, cover;
}

/* Sunset: bottom-to-top color spread with stars appearing in the upper purple sky */
body.theme-sunset.themed #messages{
  background-image:
    radial-gradient(1.5px 1.5px at 12% 8%, rgba(255,255,230,0.9), transparent),
    radial-gradient(1px 1px at 28% 15%, rgba(255,255,230,0.85), transparent),
    radial-gradient(2px 2px at 45% 5%, rgba(255,255,230,0.7), transparent),
    radial-gradient(1px 1px at 62% 12%, rgba(255,255,230,0.9), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,230,0.75), transparent),
    radial-gradient(1px 1px at 90% 7%, rgba(255,255,230,0.85), transparent),
    radial-gradient(1.5px 1.5px at 20% 28%, rgba(255,255,230,0.6), transparent),
    radial-gradient(1px 1px at 55% 32%, rgba(255,255,230,0.7), transparent),
    radial-gradient(1.5px 1.5px at 72% 8%, rgba(255,255,230,0.9), transparent),
    radial-gradient(1px 1px at 38% 20%, rgba(255,255,230,0.8), transparent),
    linear-gradient(to top, #c01638 0%, #c13d6b 26%, #6e2e74 56%, #1a0c1e 100%);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,center;
  background-size:auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,cover;
}

/* Forest: daytime sky with evergreen trees of varying heights */
body.theme-forest.themed #messages{
  background-color:#dff1ff;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'260'%20height%3D'240'%3E%3Cg%20opacity%3D'0.85'%3E%3Crect%20x%3D'87'%20y%3D'220'%20width%3D'6'%20height%3D'12'%20fill%3D'%235a3a18'%2F%3E%3Cg%20transform%3D'translate(90%2C36)'%20fill%3D'%231d7040'%3E%3Cpath%20d%3D'M0%2C0%20L13.2%2C39.2%20L7.3%2C39.2%20L23.9%2C78.4%20L13.1%2C78.4%20L33.7%2C117.6%20L18.5%2C117.6%20L43.0%2C156.8%20L23.7%2C156.8%20L52.0%2C196.0%20L0%2C196.0%20L-52.0%2C196.0%20L-23.7%2C156.8%20L-43.0%2C156.8%20L-18.5%2C117.6%20L-33.7%2C117.6%20L-13.1%2C78.4%20L-23.9%2C78.4%20L-7.3%2C39.2%20L-13.2%2C39.2%20Z'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(90%2C36)'%20fill%3D'%2330a05a'%20opacity%3D'0.55'%3E%3Cpath%20d%3D'M0%2C0%20L7.3%2C39.2%20L0%2C39.2%20Z'%2F%3E%3Cpath%20d%3D'M0%2C39.2%20L13.1%2C78.4%20L0%2C78.4%20Z'%2F%3E%3Cpath%20d%3D'M0%2C78.4%20L18.5%2C117.6%20L0%2C117.6%20Z'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'197'%20y%3D'222'%20width%3D'6'%20height%3D'10'%20fill%3D'%235a3a18'%2F%3E%3Cg%20transform%3D'translate(200%2C75)'%20fill%3D'%23266b3d'%3E%3Cpath%20d%3D'M0%2C0%20L10.7%2C30.0%20L5.9%2C30.0%20L19.3%2C60.0%20L10.6%2C60.0%20L27.2%2C90.0%20L15.0%2C90.0%20L34.7%2C120.0%20L19.1%2C120.0%20L42.0%2C150.0%20L0%2C150.0%20L-42.0%2C150.0%20L-19.1%2C120.0%20L-34.7%2C120.0%20L-15.0%2C90.0%20L-27.2%2C90.0%20L-10.6%2C60.0%20L-19.3%2C60.0%20L-5.9%2C30.0%20L-10.7%2C30.0%20Z'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'27'%20y%3D'224'%20width%3D'6'%20height%3D'8'%20fill%3D'%235a3a18'%2F%3E%3Cg%20transform%3D'translate(30%2C118)'%20fill%3D'%231a5e35'%3E%3Cpath%20d%3D'M0%2C0%20L8.1%2C22.4%20L4.5%2C22.4%20L14.7%2C44.8%20L8.1%2C44.8%20L20.7%2C67.2%20L11.4%2C67.2%20L26.5%2C89.6%20L14.6%2C89.6%20L32.0%2C112.0%20L0%2C112.0%20L-32.0%2C112.0%20L-14.6%2C89.6%20L-26.5%2C89.6%20L-11.4%2C67.2%20L-20.7%2C67.2%20L-8.1%2C44.8%20L-14.7%2C44.8%20L-4.5%2C22.4%20L-8.1%2C22.4%20Z'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(circle at 82% 16%, rgba(255,241,170,0.7), transparent 18%),
    linear-gradient(to bottom, #bfe3ff 0%, #e8f6ff 48%, #d7efd2 100%);
  background-repeat:repeat-x, no-repeat, no-repeat;
  background-position:bottom center, center, center;
  background-size:260px auto, cover, cover;
}

/* Mint: a faded mint leaf */
body.theme-mint.themed #messages{
  background-color:var(--th-messages);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'360'%20height%3D'320'%3E%3Cg%20opacity%3D'0.13'%3E%3Cg%20transform%3D'translate(150%2C150)%20rotate(20)'%3E%3Cpath%20d%3D'M0%2C-100%20C-58%2C-58%20-58%2C80%200%2C120%20C58%2C80%2058%2C-58%200%2C-100%20Z'%20fill%3D'%233a9d63'%2F%3E%3Cg%20stroke%3D'%232f7d50'%20stroke-width%3D'2.5'%20fill%3D'none'%20opacity%3D'0.7'%3E%3Cpath%20d%3D'M0%2C-92%20L0%2C112'%2F%3E%3Cpath%20d%3D'M0%2C-52%20L36%2C-30'%2F%3E%3Cpath%20d%3D'M0%2C-52%20L-36%2C-30'%2F%3E%3Cpath%20d%3D'M0%2C-8%20L44%2C16'%2F%3E%3Cpath%20d%3D'M0%2C-8%20L-44%2C16'%2F%3E%3Cpath%20d%3D'M0%2C40%20L34%2C60'%2F%3E%3Cpath%20d%3D'M0%2C40%20L-34%2C60'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(248%2C205)%20rotate(-30)%20scale(0.72)'%3E%3Cpath%20d%3D'M0%2C-100%20C-58%2C-58%20-58%2C80%200%2C120%20C58%2C80%2058%2C-58%200%2C-100%20Z'%20fill%3D'%2343a86d'%2F%3E%3Cg%20stroke%3D'%232f7d50'%20stroke-width%3D'3'%20fill%3D'none'%20opacity%3D'0.7'%3E%3Cpath%20d%3D'M0%2C-92%20L0%2C112'%2F%3E%3Cpath%20d%3D'M0%2C-52%20L36%2C-30'%2F%3E%3Cpath%20d%3D'M0%2C-52%20L-36%2C-30'%2F%3E%3Cpath%20d%3D'M0%2C-8%20L44%2C16'%2F%3E%3Cpath%20d%3D'M0%2C-8%20L-44%2C16'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:360px auto;
}

/* Lavender: a row of faded lavender sprigs across the bottom */
body.theme-lavender.themed #messages{
  background-color:var(--th-messages);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'150'%20height%3D'460'%3E%3Cg%20opacity%3D'0.3'%3E%3Cpath%20d%3D'M55%2C460%20C45%2C360%2050%2C290%2056%2C222'%20stroke%3D'%236aa35a'%20stroke-width%3D'6'%20fill%3D'none'%2F%3E%3Cpath%20d%3D'M92%2C460%20C102%2C370%2096%2C300%2088%2C238'%20stroke%3D'%236aa35a'%20stroke-width%3D'6'%20fill%3D'none'%2F%3E%3Cg%20fill%3D'%237c3aed'%3E%3Cellipse%20cx%3D'56'%20cy%3D'222'%20rx%3D'9'%20ry%3D'13'%2F%3E%3Cellipse%20cx%3D'51'%20cy%3D'202'%20rx%3D'9'%20ry%3D'13'%2F%3E%3Cellipse%20cx%3D'61'%20cy%3D'202'%20rx%3D'9'%20ry%3D'13'%2F%3E%3Cellipse%20cx%3D'56'%20cy%3D'182'%20rx%3D'8'%20ry%3D'12'%2F%3E%3Cellipse%20cx%3D'51'%20cy%3D'164'%20rx%3D'8'%20ry%3D'12'%2F%3E%3Cellipse%20cx%3D'61'%20cy%3D'164'%20rx%3D'8'%20ry%3D'12'%2F%3E%3Cellipse%20cx%3D'56'%20cy%3D'146'%20rx%3D'7'%20ry%3D'11'%2F%3E%3Cellipse%20cx%3D'56'%20cy%3D'130'%20rx%3D'6'%20ry%3D'10'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%239333ea'%3E%3Cellipse%20cx%3D'88'%20cy%3D'238'%20rx%3D'9'%20ry%3D'13'%2F%3E%3Cellipse%20cx%3D'83'%20cy%3D'218'%20rx%3D'9'%20ry%3D'13'%2F%3E%3Cellipse%20cx%3D'93'%20cy%3D'218'%20rx%3D'9'%20ry%3D'13'%2F%3E%3Cellipse%20cx%3D'88'%20cy%3D'198'%20rx%3D'8'%20ry%3D'12'%2F%3E%3Cellipse%20cx%3D'83'%20cy%3D'180'%20rx%3D'8'%20ry%3D'12'%2F%3E%3Cellipse%20cx%3D'93'%20cy%3D'180'%20rx%3D'8'%20ry%3D'12'%2F%3E%3Cellipse%20cx%3D'88'%20cy%3D'162'%20rx%3D'7'%20ry%3D'11'%2F%3E%3Cellipse%20cx%3D'88'%20cy%3D'146'%20rx%3D'6'%20ry%3D'10'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:130px auto;
}

/* Berry: scattered strawberries of varying sizes */
body.theme-berry.themed #messages{
  background-color:var(--th-messages);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'320'%20height%3D'320'%3E%3Cg%20opacity%3D'0.11'%3E%3Ctext%20x%3D'38'%20y%3D'72'%20font-size%3D'66'%3E%26%23127827%3B%3C%2Ftext%3E%3Ctext%20x%3D'205'%20y%3D'120'%20font-size%3D'42'%3E%26%23127827%3B%3C%2Ftext%3E%3Ctext%20x%3D'120'%20y%3D'205'%20font-size%3D'92'%3E%26%23127827%3B%3C%2Ftext%3E%3Ctext%20x%3D'255'%20y%3D'250'%20font-size%3D'54'%3E%26%23127827%3B%3C%2Ftext%3E%3Ctext%20x%3D'28'%20y%3D'285'%20font-size%3D'40'%3E%26%23127827%3B%3C%2Ftext%3E%3Ctext%20x%3D'268'%20y%3D'58'%20font-size%3D'34'%3E%26%23127827%3B%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:repeat;
  background-position:center;
  background-size:300px auto;
}

/* Citrus: a faded orange in the bottom-right corner */
body.theme-citrus.themed #messages{
  background-color:var(--th-messages);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'240'%3E%3Cg%20opacity%3D'0.16'%3E%3Ccircle%20cx%3D'130'%20cy%3D'150'%20r%3D'84'%20fill%3D'%23f97316'%2F%3E%3Ccircle%20cx%3D'102'%20cy%3D'120'%20r%3D'30'%20fill%3D'%23fdba74'%2F%3E%3Cpath%20d%3D'M150%2C70%20q26%2C-24%2052%2C-12%20q-8%2C28%20-42%2C26%20z'%20fill%3D'%233f8f3f'%2F%3E%3Crect%20x%3D'126'%20y%3D'58'%20width%3D'7'%20height%3D'18'%20fill%3D'%236b4a26'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:220px auto;
}

/* Ember: a warm fire glow at the bottom with embers rising */
body.theme-ember.themed #messages{
  background-color:#160b0d;
  background-image:
    radial-gradient(2px 2px at 18% 70%, #fbbf24, transparent),
    radial-gradient(1.5px 1.5px at 34% 52%, #f97316, transparent),
    radial-gradient(2px 2px at 58% 64%, #fbbf24, transparent),
    radial-gradient(1.5px 1.5px at 78% 46%, #fb923c, transparent),
    radial-gradient(1px 1px at 50% 32%, #fbbf24, transparent),
    radial-gradient(1.5px 1.5px at 68% 26%, #f97316, transparent),
    radial-gradient(1px 1px at 26% 36%, #fde68a, transparent),
    radial-gradient(150% 45% at 50% 104%, rgba(249,115,22,0.5), rgba(220,38,38,0.22) 38%, transparent 72%);
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, center;
  background-size:auto, auto, auto, auto, auto, auto, auto, cover;
}

/* Pine: layered fir trees of varying heights */
body.theme-pine.themed #messages{
  background-color:#0a1710;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'280'%20height%3D'240'%3E%3Cg%20opacity%3D'0.92'%3E%3Crect%20x%3D'109.0'%20y%3D'220.0'%20width%3D'6'%20height%3D'16'%20fill%3D'%232e2114'%2F%3E%3Cg%20transform%3D'translate(112%2C34.0)'%3E%3Cpath%20d%3D'M0%2C0%20L13.2%2C39.2%20L7.3%2C39.2%20L23.9%2C78.4%20L13.1%2C78.4%20L33.7%2C117.6%20L18.5%2C117.6%20L43.0%2C156.8%20L23.7%2C156.8%20L52.0%2C196.0%20L0%2C196.0%20L-52.0%2C196.0%20L-23.7%2C156.8%20L-43.0%2C156.8%20L-18.5%2C117.6%20L-33.7%2C117.6%20L-13.1%2C78.4%20L-23.9%2C78.4%20L-7.3%2C39.2%20L-13.2%2C39.2%20Z'%20fill%3D'%23163d2b'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'229.0'%20y%3D'220.0'%20width%3D'6'%20height%3D'16'%20fill%3D'%232e2114'%2F%3E%3Cg%20transform%3D'translate(232%2C80.0)'%3E%3Cpath%20d%3D'M0%2C0%20L10.7%2C30.0%20L5.9%2C30.0%20L19.3%2C60.0%20L10.6%2C60.0%20L27.2%2C90.0%20L15.0%2C90.0%20L34.7%2C120.0%20L19.1%2C120.0%20L42.0%2C150.0%20L0%2C150.0%20L-42.0%2C150.0%20L-19.1%2C120.0%20L-34.7%2C120.0%20L-15.0%2C90.0%20L-27.2%2C90.0%20L-10.6%2C60.0%20L-19.3%2C60.0%20L-5.9%2C30.0%20L-10.7%2C30.0%20Z'%20fill%3D'%23163d2b'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'55.0'%20y%3D'220.0'%20width%3D'6'%20height%3D'16'%20fill%3D'%232e2114'%2F%3E%3Cg%20transform%3D'translate(58%2C80.0)'%3E%3Cpath%20d%3D'M0%2C0%20L10.7%2C30.0%20L5.9%2C30.0%20L19.3%2C60.0%20L10.6%2C60.0%20L27.2%2C90.0%20L15.0%2C90.0%20L34.7%2C120.0%20L19.1%2C120.0%20L42.0%2C150.0%20L0%2C150.0%20L-42.0%2C150.0%20L-19.1%2C120.0%20L-34.7%2C120.0%20L-15.0%2C90.0%20L-27.2%2C90.0%20L-10.6%2C60.0%20L-19.3%2C60.0%20L-5.9%2C30.0%20L-10.7%2C30.0%20Z'%20fill%3D'%23286244'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'177.0'%20y%3D'220.0'%20width%3D'6'%20height%3D'16'%20fill%3D'%232e2114'%2F%3E%3Cg%20transform%3D'translate(180%2C118.0)'%3E%3Cpath%20d%3D'M0%2C0%20L8.1%2C22.4%20L4.5%2C22.4%20L14.7%2C44.8%20L8.1%2C44.8%20L20.7%2C67.2%20L11.4%2C67.2%20L26.5%2C89.6%20L14.6%2C89.6%20L32.0%2C112.0%20L0%2C112.0%20L-32.0%2C112.0%20L-14.6%2C89.6%20L-26.5%2C89.6%20L-11.4%2C67.2%20L-20.7%2C67.2%20L-8.1%2C44.8%20L-14.7%2C44.8%20L-4.5%2C22.4%20L-8.1%2C22.4%20Z'%20fill%3D'%23286244'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #0e2519 0%, #0a1710 100%);
  background-repeat:repeat-x, no-repeat;
  background-position:bottom center, center;
  background-size:280px auto, cover;
}

/* Watermelon: pink-to-green slice stripes with scattered seeds */
body.theme-watermelon.themed #messages{
  background-color:#fff5f8;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%3E%3Cg%20fill%3D'%231a1a1a'%20opacity%3D'0.5'%3E%3Cellipse%20cx%3D'40'%20cy%3D'50'%20rx%3D'6'%20ry%3D'11'%20transform%3D'rotate(20%2040%2050)'%2F%3E%3Cellipse%20cx%3D'150'%20cy%3D'38'%20rx%3D'5'%20ry%3D'9'%20transform%3D'rotate(-15%20150%2038)'%2F%3E%3Cellipse%20cx%3D'250'%20cy%3D'70'%20rx%3D'7'%20ry%3D'12'%20transform%3D'rotate(35%20250%2070)'%2F%3E%3Cellipse%20cx%3D'90'%20cy%3D'130'%20rx%3D'6'%20ry%3D'10'%20transform%3D'rotate(-30%2090%20130)'%2F%3E%3Cellipse%20cx%3D'210'%20cy%3D'150'%20rx%3D'5'%20ry%3D'9'%20transform%3D'rotate(10%20210%20150)'%2F%3E%3Cellipse%20cx%3D'60'%20cy%3D'220'%20rx%3D'7'%20ry%3D'12'%20transform%3D'rotate(25%2060%20220)'%2F%3E%3Cellipse%20cx%3D'160'%20cy%3D'232'%20rx%3D'6'%20ry%3D'10'%20transform%3D'rotate(-20%20160%20232)'%2F%3E%3Cellipse%20cx%3D'262'%20cy%3D'250'%20rx%3D'5'%20ry%3D'9'%20transform%3D'rotate(40%20262%20250)'%2F%3E%3Cellipse%20cx%3D'120'%20cy%3D'288'%20rx%3D'6'%20ry%3D'11'%20transform%3D'rotate(-10%20120%20288)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #f7a8c4 0%, #ffd2e2 30%, #fff5f8 56%, #eafae0 80%, #bfe6a8 100%);
  background-repeat:repeat, no-repeat;
  background-position:center, center;
  background-size:280px auto, cover;
}

/* Coffee Shop: scattered coffee beans over a warm roast */
body.theme-coffee.themed #messages{
  background-color:#20160f;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'320'%20height%3D'320'%3E%3Cg%20opacity%3D'0.5'%3E%3Cg%20transform%3D'translate(50%2C60)%20rotate(25)%20scale(1)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'13'%20ry%3D'20'%20fill%3D'%235a3a22'%2F%3E%3Cpath%20d%3D'M0%2C-17%20C-6%2C-8%20-6%2C8%200%2C17'%20stroke%3D'%232c190d'%20stroke-width%3D'2.5'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(180%2C45)%20rotate(-20)%20scale(0.8)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'13'%20ry%3D'20'%20fill%3D'%235a3a22'%2F%3E%3Cpath%20d%3D'M0%2C-17%20C-6%2C-8%20-6%2C8%200%2C17'%20stroke%3D'%232c190d'%20stroke-width%3D'2.5'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(270%2C110)%20rotate(40)%20scale(1.05)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'13'%20ry%3D'20'%20fill%3D'%235a3a22'%2F%3E%3Cpath%20d%3D'M0%2C-17%20C-6%2C-8%20-6%2C8%200%2C17'%20stroke%3D'%232c190d'%20stroke-width%3D'2.5'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(110%2C150)%20rotate(-35)%20scale(0.9)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'13'%20ry%3D'20'%20fill%3D'%235a3a22'%2F%3E%3Cpath%20d%3D'M0%2C-17%20C-6%2C-8%20-6%2C8%200%2C17'%20stroke%3D'%232c190d'%20stroke-width%3D'2.5'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(220%2C200)%20rotate(15)%20scale(1.1)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'13'%20ry%3D'20'%20fill%3D'%235a3a22'%2F%3E%3Cpath%20d%3D'M0%2C-17%20C-6%2C-8%20-6%2C8%200%2C17'%20stroke%3D'%232c190d'%20stroke-width%3D'2.5'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(60%2C240)%20rotate(55)%20scale(0.85)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'13'%20ry%3D'20'%20fill%3D'%235a3a22'%2F%3E%3Cpath%20d%3D'M0%2C-17%20C-6%2C-8%20-6%2C8%200%2C17'%20stroke%3D'%232c190d'%20stroke-width%3D'2.5'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(165%2C270)%20rotate(-10)%20scale(1)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'13'%20ry%3D'20'%20fill%3D'%235a3a22'%2F%3E%3Cpath%20d%3D'M0%2C-17%20C-6%2C-8%20-6%2C8%200%2C17'%20stroke%3D'%232c190d'%20stroke-width%3D'2.5'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(285%2C265)%20rotate(30)%20scale(0.8)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'13'%20ry%3D'20'%20fill%3D'%235a3a22'%2F%3E%3Cpath%20d%3D'M0%2C-17%20C-6%2C-8%20-6%2C8%200%2C17'%20stroke%3D'%232c190d'%20stroke-width%3D'2.5'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(circle at 50% 28%, rgba(150,95,45,0.20), transparent 60%),
    linear-gradient(to bottom, #2a1c11 0%, #20160f 100%);
  background-repeat:repeat, no-repeat, no-repeat;
  background-position:center, center, center;
  background-size:300px auto, cover, cover;
}

/* Cool Mountain: layered blue mountains under a pale moon */
body.theme-cool-mountain.themed #messages{
  background-color:var(--th-messages);
  background-image:url('/assets/themes/cool-mountain.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Ocean Night: moonlit sea under a starry night sky */
body.theme-ocean-night.themed #messages{
  background-color:var(--th-messages);
  background-image:
    radial-gradient(ellipse at center, rgba(6,8,18,.38) 0%, rgba(6,8,18,.84) 100%),
    url('/assets/themes/ocean-night.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Redwood Night: silhouetted pines against misty mountains */
body.theme-redwood-night.themed #messages{
  background-color:var(--th-messages);
  background-image:
    radial-gradient(ellipse at center, rgba(6,8,18,.38) 0%, rgba(6,8,18,.84) 100%),
    url('/assets/themes/redwood-night.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Night Lights: colorful bokeh on near-black */
body.theme-night-lights.themed #messages{
  background-color:var(--th-messages);
  background-image:
    radial-gradient(ellipse at center, rgba(6,8,18,.38) 0%, rgba(6,8,18,.84) 100%),
    url('/assets/themes/night-lights.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Cotton Candy: soft pastel gradient */
body.theme-cotton-candy.themed #messages{
  background-color:var(--th-messages);
  background-image:url('/assets/themes/cotton-candy.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Sunrise Peaks: golden sunrise over mountain ranges */
body.theme-sunrise-peaks.themed #messages{
  background-color:var(--th-messages);
  background-image:url('/assets/themes/sunrise-peaks.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* ----- Theme picker modal ----- */
/* Theme picker is a bottom panel that occupies ONLY the lower part of the
   screen with NO dimming backdrop — so the chat above stays fully bright and
   you can clearly see a theme applied live (preview) before committing. */
#themeModal{
  inset:auto 0 0 0;          /* pin to the bottom; top of the app is untouched */
  background:transparent;    /* no dim → the live preview is fully visible */
  backdrop-filter:none;
  padding:0;
  align-items:stretch;
  justify-content:center;
  pointer-events:none;       /* let taps on the visible chat above pass through */
}
.theme-card{
  width:min(100vw,600px);
  max-height:52vh;
  overflow-y:auto;
  border-radius:22px 22px 0 0;
  padding-bottom:16px;
  pointer-events:auto;       /* the panel itself is interactive */
  box-shadow:0 -14px 40px rgba(0,0,0,.32);
}

.theme-apply-btn{
  position:sticky;
  bottom:0;
  display:block;
  width:100%;
  border:0;
  border-radius:14px;
  background:#2f63e8;
  color:#fff;
  font-weight:800;
  font-size:16px;
  padding:14px;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 -10px 18px -10px rgba(0,0,0,.25);
}
.theme-apply-btn:disabled{ background:#cbd5e1; color:#5b6472; cursor:default; box-shadow:none; }

.theme-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:6px 0 16px;
}

.theme-swatch{
  border:2px solid #e5e7eb;
  border-radius:14px;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  background:#fff;
  text-align:center;
}

.theme-swatch.selected{
  border-color:#2f63e8;
  box-shadow:0 0 0 3px rgba(47,99,232,.18);
}

.theme-swatch-preview{
  height:64px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:8px;
  gap:6px;
}

.theme-swatch-bubbles{
  display:flex;
  justify-content:space-between;
  gap:6px;
}

.theme-swatch-bubble{
  width:34px;
  height:16px;
  border-radius:8px;
}

.theme-swatch-name{
  font-size:13px;
  font-weight:800;
  color:#374151;
  padding:7px 4px;
  border-top:1px solid #eef1f6;
}

.theme-disable-btn{
  width:100%;
  height:48px;
  border:2px solid #d1d7e2;
  border-radius:14px;
  background:#fff;
  color:#334155;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
}

.theme-disable-btn:hover{ background:#f1f5f9; }

.bubble-theme-note{
  display:none;
  font-size:13px;
  font-weight:600;
  color:#64748b;
  background:#f1f5f9;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:6px;
  line-height:1.35;
}

/* ── Game Modal ─────────────────────────────── */
.game-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
  box-sizing:border-box;
}

.game-card{
  position:relative;
  background:linear-gradient(165deg,#1c2541 0%,#11182c 55%,#0c1322 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:26px;
  width:min(96vw,480px);
  height:min(94vh,720px);
  height:min(94dvh,720px);
  max-height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  color:#e2e8f0;
}

.game-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}

.game-header span{
  font-size:18px;
  font-weight:800;
  color:#f8fafc;
  letter-spacing:-.3px;
  flex:1;
}

.game-header span::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  margin-right:9px;
  vertical-align:middle;
  background:linear-gradient(135deg,#818cf8,#a855f7);
  box-shadow:0 0 10px rgba(129,140,248,.8);
}

.game-close{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  color:#cbd5e1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .12s;
}

.game-close:hover{ background:rgba(255,255,255,.16); }

.game-opponent-msg{
  padding:10px 18px 6px;
  min-height:36px;
  font-size:14px;
  color:#94a3b8;
  flex-shrink:0;
  line-height:1.35;
  text-align:left;
}

.game-msg-empty{ opacity:.45; font-style:normal; font-size:13px; }

.game-bubble{
  display:inline-block;
  max-width:82%;
  padding:8px 13px;
  border-radius:17px;
  font-size:14px;
  line-height:1.35;
  word-break:break-word;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.game-bubble-them{
  background:rgba(255,255,255,.11);
  color:#e8eef7;
  border-bottom-left-radius:5px;
}

.game-bubble-me{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  border-bottom-right-radius:5px;
}

.game-bubble-pop{
  animation:gameBubblePop .34s cubic-bezier(.34,1.56,.64,1);
}

.game-bubble-them.game-bubble-pop{ transform-origin:bottom left; }
.game-bubble-me.game-bubble-pop{ transform-origin:bottom right; }

@keyframes gameBubblePop{
  0%{   transform:scale(.55); opacity:0; }
  55%{  transform:scale(1.07); opacity:1; }
  100%{ transform:scale(1); }
}

.game-board-area{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14px 16px 12px;
}

.game-my-msg{
  padding:6px 18px 10px;
  min-height:36px;
  font-size:14px;
  color:#cbd5e1;
  flex-shrink:0;
  line-height:1.35;
  text-align:right;
}

.game-composer{
  display:flex;
  gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.18);
  flex-shrink:0;
}

.game-composer input{
  flex:1;
  height:46px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:0 16px;
  font-size:15px;
  outline:none;
  color:#f1f5f9;
  font-family:inherit;
  background:rgba(255,255,255,.06);
  transition:border-color .12s, background .12s;
}

.game-composer input::placeholder{ color:#64748b; }

.game-composer input:focus{
  border-color:#818cf8;
  background:rgba(255,255,255,.09);
}

.game-composer button{
  height:46px;
  padding:0 20px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  border:0;
  border-radius:14px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(99,102,241,.4);
  transition:transform .08s, box-shadow .12s;
}

.game-composer button:hover{ box-shadow:0 6px 20px rgba(99,102,241,.55); }
.game-composer button:active{ transform:scale(.96); }

/* ── Game lobby / waiting ── */
.game-lobby{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:30px 20px;
  text-align:center;
  width:100%;
}

.game-lobby-icon{
  font-size:52px;
  line-height:1;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));
}

.game-lobby h2{
  font-size:23px;
  font-weight:800;
  color:#f8fafc;
  margin:0;
  letter-spacing:-.4px;
}

.game-lobby p{
  font-size:15px;
  color:#94a3b8;
  margin:0;
  line-height:1.45;
}

.game-lobby p strong{ color:#e2e8f0; }

.game-lobby-btn{
  width:100%;
  max-width:260px;
  height:52px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 6px 20px rgba(99,102,241,.4);
  transition:transform .08s, box-shadow .12s;
}

.game-lobby-btn:hover{ box-shadow:0 8px 26px rgba(99,102,241,.55); }
.game-lobby-btn:active{ transform:scale(.97); }

.game-lobby-btn.secondary{
  background:rgba(255,255,255,.07);
  color:#cbd5e1;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}

.game-lobby-btn.secondary:hover{ background:rgba(255,255,255,.13); box-shadow:none; }

.game-lobby-btn:disabled{
  opacity:.5;
  cursor:default;
  box-shadow:none;
}

.game-picker{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  width:100%;
  max-width:320px;
  margin-top:8px;
}

.game-pick-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  font-family:inherit;
  transition:border-color .14s, box-shadow .14s, transform .1s, background .14s;
}

.game-pick-tile:hover{
  border-color:rgba(129,140,248,.7);
  background:rgba(129,140,248,.1);
  box-shadow:0 10px 26px rgba(99,102,241,.28);
  transform:translateY(-3px);
}

.game-pick-emoji{
  font-size:38px;
  line-height:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
}

.game-pick-name{
  font-size:15px;
  font-weight:700;
  color:#f1f5f9;
}

/* ── Connect 4 board ── */
.c4-board-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}

.c4-turn-indicator{
  font-size:13px;
  font-weight:700;
  color:#e2e8f0;
  text-align:center;
  min-height:20px;
  letter-spacing:.2px;
}

.c4-player-legend{
  display:flex;
  justify-content:space-between;
  width:100%;
  max-width:350px;
  font-size:12px;
  font-weight:700;
  color:#94a3b8;
  padding:0 4px;
}

.c4-board-frame{
  background:linear-gradient(160deg,#2547b0,#16307e);
  border-radius:18px;
  padding:9px;
  width:100%;
  max-width:350px;
  box-sizing:border-box;
  box-shadow:0 10px 30px rgba(13,30,90,.6), inset 0 1px 0 rgba(255,255,255,.18);
}

.c4-drop-row{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin-bottom:6px;
}

.c4-drop-btn{
  background:rgba(255,255,255,.14);
  border:0;
  border-radius:8px;
  color:rgba(255,255,255,.9);
  font-size:11px;
  cursor:pointer;
  padding:4px 0;
  font-family:inherit;
  transition:background .12s, transform .08s;
}

.c4-drop-btn:hover{ background:rgba(255,255,255,.34); transform:translateY(1px); }

.c4-drop-ph{ height:24px; }

.c4-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}

.c4-cell{
  border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#0b1428,#0f1c3a);
  aspect-ratio:1;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);
}

.c4-cell.p1{
  background:radial-gradient(circle at 35% 32%,#ffb3c1,#e11d48 62%,#9f1239);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.3), inset 0 2px 4px rgba(255,255,255,.45), 0 2px 6px rgba(225,29,72,.45);
}

.c4-cell.p2{
  background:radial-gradient(circle at 35% 32%,#fff0c2,#fbbf24 60%,#d97706);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.5), 0 2px 6px rgba(245,158,11,.45);
}

.c4-cell.win-cell{
  animation:c4pulse .7s infinite alternate;
}

@keyframes c4pulse{
  from{ box-shadow:inset 0 -3px 8px rgba(0,0,0,.3),0 0 0 2px #0c1322,0 0 0 4px #fbbf24,0 0 12px rgba(251,191,36,.6); }
  to{   box-shadow:inset 0 -3px 8px rgba(0,0,0,.3),0 0 0 2px #0c1322,0 0 0 7px #fbbf24,0 0 22px rgba(251,191,36,.9); }
}

/* ── Tic-Tac-Toe board ── */
.ttt-board-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}

.ttt-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  background:linear-gradient(160deg,#2547b0,#16307e);
  border-radius:20px;
  padding:10px;
  width:100%;
  max-width:300px;
  box-sizing:border-box;
  box-shadow:0 10px 30px rgba(13,30,90,.6), inset 0 1px 0 rgba(255,255,255,.18);
}

.ttt-cell{
  aspect-ratio:1;
  border:0;
  border-radius:14px;
  background:radial-gradient(circle at 38% 32%,#16244a,#0f1c3a);
  font-size:min(13vw,52px);
  font-weight:900;
  line-height:1;
  cursor:pointer;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.06);
  transition:background .12s, transform .08s;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}

.ttt-cell[data-row]:hover{ background:radial-gradient(circle at 38% 32%,#22325f,#16244a); transform:translateY(-1px); }

.ttt-cell:disabled{ cursor:default; }

.ttt-cell.x{ color:#fb7185; }

.ttt-cell.o{ color:#fbbf24; }

.ttt-cell.win-cell{
  animation:tttpulse .7s infinite alternate;
}

@keyframes tttpulse{
  from{ box-shadow:inset 0 3px 7px rgba(0,0,0,.5),0 0 0 2px #16307e,0 0 0 4px #fbbf24,0 0 12px rgba(251,191,36,.6); }
  to{   box-shadow:inset 0 3px 7px rgba(0,0,0,.5),0 0 0 2px #16307e,0 0 0 7px #fbbf24,0 0 22px rgba(251,191,36,.9); }
}

/* ── Checkers board ── */
.ck-board-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}

.ck-board-frame{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  width:100%;
  max-width:360px;
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  border:6px solid #16307e;
  box-sizing:border-box;
  box-shadow:0 10px 30px rgba(13,30,90,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}

.ck-square{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ck-square.light{ background:#c3cee2; }
.ck-square.dark{  background:#3a5894; }

.ck-square.selectable{ cursor:pointer; }

.ck-square.target{ cursor:pointer; }

.ck-square.target::after{
  content:"";
  position:absolute;
  width:30%;
  height:30%;
  border-radius:50%;
  background:rgba(56,189,248,.85);
  box-shadow:0 0 8px rgba(56,189,248,.8);
}

.ck-piece{
  width:76%;
  height:76%;
  border-radius:50%;
  position:relative;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.4);
}

.ck-piece.p1{
  background:radial-gradient(circle at 36% 32%,#ff8fa3,#e11d48 60%,#9f1239);
}

.ck-piece.p2{
  background:radial-gradient(circle at 36% 32%,#ffffff,#dbe2ec 60%,#a9b4c6);
}

.ck-piece.king::after{
  content:"\f521"; /* fa-crown */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:min(4vw,17px);
  color:#fbbf24;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

.ck-piece.p2.king::after{ color:#d97706; }

.ck-square.selectable .ck-piece{
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.45), 0 0 0 3px #fbbf24, 0 0 10px rgba(251,191,36,.7);
}

.ck-square.selected .ck-piece{
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.45), 0 0 0 3px #38bdf8, 0 0 12px rgba(56,189,248,.9);
}

/* ── Game over ── */
.game-over-banner{
  font-size:23px;
  font-weight:800;
  color:#f8fafc;
  text-align:center;
  padding:12px 0 2px;
  letter-spacing:-.3px;
}

.game-wins-row{
  display:flex;
  justify-content:center;
  gap:24px;
  font-size:13px;
  color:#94a3b8;
  font-weight:600;
  min-height:20px;
  padding:2px 0;
}

.game-wins-row strong{
  font-size:15px;
  color:#f1f5f9;
}

.game-action-btns{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}

/* ============================================================
   zibblyChat login theme — appended last so it wins the cascade
   over the earlier (jaylaChat) login styles. Fresh teal→coral
   palette + a bubbly squircle logo to differentiate the brand.
   ============================================================ */

/* Bright, playful backdrop: deep teal base with teal + coral glows
   (jaylaChat was navy with purple/blue glows). */
#login.screen.active{
  background:
    radial-gradient(circle at top left, rgba(45,212,191,.42), transparent 34%),
    radial-gradient(circle at bottom right, rgba(251,113,133,.40), transparent 38%),
    radial-gradient(circle at center, rgba(56,189,248,.14), transparent 60%),
    linear-gradient(135deg,#04262c,#0a3f42 55%,#123f45);
}

/* Glassy card with a faint teal edge glow */
.login-card{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  border:1px solid rgba(45,212,191,.35);
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 8px 30px rgba(45,212,191,.15);
}

/* Soft glow around the whole logo lockup + gentle float */
.login-logo{
  filter:
    drop-shadow(0 8px 22px rgba(0,0,0,.32))
    drop-shadow(0 0 26px rgba(45,212,191,.30));
}

/* Bubbly squircle mark filled with the teal→coral gradient
   (jaylaChat used an outlined circle with a dark italic "j"). */
.login-logo-icon{
  width:76px;
  height:76px;
  border:0;
  border-radius:26px;
  background:linear-gradient(135deg,#2dd4bf 0%,#38bdf8 45%,#fb7185 100%);
  box-shadow:
    0 10px 26px rgba(45,212,191,.40),
    0 4px 14px rgba(251,113,133,.35);
  position:relative;
  overflow:hidden;
  animation:logoFloat 4.5s ease-in-out infinite;
}
/* A translucent "bubble" sheen in the corner for a playful feel */
.login-logo-icon::after{
  content:"";
  position:absolute;
  top:9px;
  right:10px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,.25) 60%, transparent 70%);
}
.login-logo-icon span{
  position:relative;
  z-index:1;
  color:#ffffff;
  font-style:normal;
  font-weight:900;
  letter-spacing:-1px;
  text-shadow:0 2px 6px rgba(4,38,44,.35);
}

/* "zibbly" stays crisp white; "Chat" picks up the teal→coral gradient */
.login-logo-text{ font-style:normal; }
.login-logo-text .jayla{ color:#ffffff; }
.login-logo-text .chat{
  background:linear-gradient(135deg,#2dd4bf,#fb7185);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Inputs + focus ring in teal */
.login-card input:focus{
  border-color:#14b8a6;
  box-shadow:0 0 0 4px rgba(20,184,166,.18);
}
.remember-row input[type="checkbox"]{ accent-color:#14b8a6; }

/* Primary button: teal→coral gradient with a matching glow */
.login-card button{
  background:linear-gradient(135deg,#0ea5a4,#22d3ee 45%,#fb7185);
  box-shadow:0 12px 26px rgba(14,165,164,.34);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.login-card button:hover{
  filter:brightness(1.05);
  box-shadow:0 14px 30px rgba(251,113,133,.36);
}
.login-card button:active{ transform:scale(.98); }

/* Header mark (default/unthemed): match the new teal→coral identity */
.logo-bubble{
  border-color:#2dd4bf;
  border-right-color:#fb7185;
}
.logo-bubble span{ color:#2dd4bf; }