/* BBTM Celebrations — front-end app */
#bbtmc-app{--blue1:#62abf0;--blue2:#4a93e4;--blue3:#3f86db;--gold:#F0B429;--purple1:#7a2bd6;--purple2:#9b30e0;
  --ink:#15244a;--muted:#6a7aa0;--line:#e7ecf6;--body:"Nunito",system-ui,-apple-system,sans-serif;
  max-width:560px;margin:0 auto;font-family:var(--body);color:var(--ink)}
#bbtmc-app *{box-sizing:border-box}
#bbtmc-app .bbtmc-loading,#bbtmc-app .bbtmc-empty{padding:30px 16px;text-align:center;font-weight:800;color:var(--muted)}

#bbtmc-app .bbtmc-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;
  font-weight:800;font-size:.82rem;color:#2f6fd0;text-decoration:none;
  padding:9px 15px;border-radius:999px;border:1.5px solid #cfe0f6;background:#fff}
#bbtmc-app .bbtmc-back:hover{border-color:#2f6fd0;background:#eef5ff}
#bbtmc-app .bbtmc-back:active{transform:scale(.97)}
#bbtmc-app .bbtmc-head{background:linear-gradient(180deg,var(--blue1),var(--blue3));color:#fff;border-radius:18px;padding:18px 20px;margin-bottom:12px}
#bbtmc-app .bbtmc-head h2{margin:0;font-weight:900;font-size:1.25rem;display:flex;align-items:center;gap:8px}
#bbtmc-app .bbtmc-head p{margin:4px 0 0;font-weight:700;font-size:.82rem;opacity:.93}
#bbtmc-app .bbtmc-window{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:800;font-size:.76rem;
  color:#5a6a90;background:#eef3ff;border:1px solid #dde7fb;border-radius:999px;padding:8px 12px;margin-bottom:14px}

#bbtmc-app .bbtmc-sub{display:flex;gap:8px;margin-bottom:14px}
#bbtmc-app .bbtmc-sub button{flex:1;border:1.5px solid var(--line);background:#f7f9ff;border-radius:10px;
  font-family:var(--body);font-weight:800;font-size:.82rem;color:#5a6a90;padding:10px;cursor:pointer}
#bbtmc-app .bbtmc-sub button.on{border-color:var(--blue2);background:#eaf3ff;color:#2f6fd0;box-shadow:0 0 0 1px var(--blue2) inset}

#bbtmc-app .bbtmc-row{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);
  border-radius:14px;margin-bottom:10px;background:#fff}
#bbtmc-app .bbtmc-ava{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#fff;font-size:1rem;background:linear-gradient(135deg,#7b2ff7,#e0457a);overflow:hidden}
#bbtmc-app .bbtmc-ava img{width:100%;height:100%;object-fit:cover}
#bbtmc-app .bbtmc-ava.sm{width:38px;height:38px;font-size:.85rem}
#bbtmc-app .bbtmc-info{flex:1;min-width:0}
#bbtmc-app .bbtmc-nm{font-weight:900;font-size:.95rem}
#bbtmc-app .bbtmc-cpl{font-size:.62rem;font-weight:800;color:#7a5a10;background:#fff3cf;border-radius:999px;padding:1px 7px;margin-left:5px;vertical-align:middle}
#bbtmc-app .bbtmc-dt{font-weight:700;font-size:.78rem;color:var(--muted);margin-top:1px}
#bbtmc-app .bbtmc-cel{border:none;background:linear-gradient(180deg,var(--purple2),var(--purple1));color:#fff;
  font-family:var(--body);font-weight:900;font-size:.76rem;padding:10px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
#bbtmc-app .bbtmc-cel.done{background:#e9f7ee;color:#2e9e5b;border:1px solid #b9e6c9}
#bbtmc-app .bbtmc-row.self{background:repeating-linear-gradient(135deg,#f4f6fc,#f4f6fc 10px,#eef1fb 10px,#eef1fb 20px)}
#bbtmc-app .bbtmc-row.self .bbtmc-ava{filter:grayscale(.4);background:linear-gradient(135deg,#9aa6c8,#c0b0d8)}
#bbtmc-app .bbtmc-lock{font-size:.72rem;font-weight:800;color:#8a7a55;background:#fff6df;border:1px dashed var(--gold);border-radius:999px;padding:8px 11px;white-space:nowrap}
#bbtmc-app .bbtmc-empty-sub{padding:22px 14px;text-align:center;font-weight:800;color:#9aa6c8}
#bbtmc-app .bbtmc-note{font-size:.74rem;font-weight:700;color:#8a87ad;line-height:1.5;margin:12px 0 0;background:#f6f5ff;border-radius:10px;padding:11px 13px}
#bbtmc-app .bbtmc-note b{color:#5a4690}

#bbtmc-app .bbtmc-saved-hd{text-align:center;margin:0 0 12px}
#bbtmc-app .bbtmc-saved-hd h2{margin:0;font-weight:900;font-size:1.15rem;color:#2a2150}
#bbtmc-app .bbtmc-saved-hd p{margin:2px 0 0;font-weight:700;font-size:.78rem;color:#8a87ad}
#bbtmc-app .bbtmc-save{margin-top:4px;width:100%;border:1.5px solid #ffe0a8;background:#fff8e8;color:#9a6a00;
  font-family:var(--body);font-weight:900;font-size:.84rem;padding:11px;border-radius:12px;cursor:pointer}

/* reveal (recipient's day) */
#bbtmc-app .bbtmc-reveal{border:1px solid #ffe0a8;border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 12px 30px -18px rgba(120,80,0,.5)}
#bbtmc-app .bbtmc-reveal-hd{background:linear-gradient(180deg,#3a2150,#241038);color:#fff;text-align:center;padding:22px 18px}
#bbtmc-app .bbtmc-reveal-em{font-size:2.2rem}
#bbtmc-app .bbtmc-reveal-hd h2{margin:8px 0 4px;font-weight:900;font-size:1.35rem;
  background:linear-gradient(180deg,#ffe7a0,#F0B429);-webkit-background-clip:text;background-clip:text;color:transparent}
#bbtmc-app .bbtmc-reveal-hd p{margin:0;font-weight:700;font-size:.85rem;color:#e7deff}
#bbtmc-app .bbtmc-reveal-msgs{background:#fff;padding:14px}
#bbtmc-app .bbtmc-msg{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:11px;box-shadow:0 6px 16px -12px rgba(30,40,90,.4)}
#bbtmc-app .bbtmc-msg:last-child{margin-bottom:0}
#bbtmc-app .bbtmc-msg-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
#bbtmc-app .bbtmc-from{font-weight:900;font-size:.88rem}
#bbtmc-app .bbtmc-txt{font-weight:700;font-size:.88rem;line-height:1.5;color:#2a3a60}
#bbtmc-app .bbtmc-mphoto{margin-top:9px;border-radius:12px;overflow:hidden}
#bbtmc-app .bbtmc-mphoto img{width:100%;display:block}

/* compose overlay */
.bbtmc-ovl{position:fixed;inset:0;background:rgba(20,18,40,.55);display:flex;align-items:flex-end;justify-content:center;z-index:99999}
.bbtmc-sheet{background:#fff;width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -20px #000;font-family:"Nunito",system-ui,sans-serif;color:#15244a;animation:bbtmcUp .22s ease}
@keyframes bbtmcUp{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(min-width:600px){.bbtmc-ovl{align-items:center}.bbtmc-sheet{border-radius:20px}}
.bbtmc-sheet h3{margin:2px 0 3px;font-weight:900;font-size:1.08rem}
.bbtmc-sheet .bbtmc-who{font-weight:700;font-size:.82rem;color:#6a7aa0;margin-bottom:12px}
.bbtmc-sheet textarea{width:100%;border:1.5px solid #e7ecf6;border-radius:12px;padding:12px;font-family:inherit;
  font-weight:700;font-size:.95rem;min-height:100px;resize:vertical;color:#15244a}
.bbtmc-sheet .bbtmc-photo{display:flex;align-items:center;gap:8px;margin-top:10px;border:1.5px dashed #cfd8ea;border-radius:12px;
  padding:12px;font-weight:800;font-size:.84rem;color:#7a8aae;cursor:pointer}
.bbtmc-sheet .bbtmc-one{font-size:.74rem;font-weight:800;color:#b07a00;background:#fff3cf;border-radius:9px;padding:8px 11px;margin-top:10px}
.bbtmc-sheet .bbtmc-err{display:none;color:#c0392b;font-weight:800;font-size:.8rem;margin-top:9px}
.bbtmc-sheet .bbtmc-acts{display:flex;gap:9px;margin-top:13px}
.bbtmc-sheet .bbtmc-acts button{flex:1;border:none;border-radius:12px;padding:13px;font-family:inherit;font-weight:900;font-size:.92rem;cursor:pointer}
.bbtmc-sheet .bbtmc-cancel{background:#eef1f8;color:#5a6a90}
.bbtmc-sheet .bbtmc-send{background:linear-gradient(180deg,#9b30e0,#7a2bd6);color:#fff}
.bbtmc-sheet .bbtmc-send:disabled{opacity:.6}

/* pop-up (shared with popup script) */
.bbtmc-pop{position:fixed;inset:0;background:rgba(20,16,34,.62);display:flex;align-items:center;justify-content:center;z-index:100000;padding:22px;animation:bbtmcFade .2s ease}
@keyframes bbtmcFade{from{opacity:0}to{opacity:1}}
.bbtmc-pop-card{background:linear-gradient(180deg,#3a2150,#241038);border:1px solid rgba(240,180,41,.5);border-radius:22px;
  padding:30px 24px;max-width:340px;text-align:center;color:#fff;box-shadow:0 30px 70px -22px #000;font-family:"Nunito",system-ui,sans-serif}
.bbtmc-pop-card .em{font-size:2.8rem;line-height:1}
.bbtmc-pop-card h3{font-weight:900;font-size:1.5rem;margin:12px 0 6px;
  background:linear-gradient(180deg,#ffe7a0,#F0B429);-webkit-background-clip:text;background-clip:text;color:transparent}
.bbtmc-pop-card p{font-weight:700;font-size:.9rem;color:#e7deff;margin:0 0 20px;line-height:1.45}
.bbtmc-pop-card .go{border:none;background:linear-gradient(180deg,#ffe7a0,#F0B429);color:#3a2150;font-family:inherit;
  font-weight:900;font-size:.95rem;padding:13px 22px;border-radius:999px;cursor:pointer;width:100%;display:block;text-decoration:none}
.bbtmc-pop-card .later{background:none;border:none;color:#b9a9d8;font-weight:800;font-size:.8rem;margin-top:12px;cursor:pointer}