/* Copied from social/maia-carousel/imessage/render.html (the carousel renderer), scoped to .im */

:root{--blue:#0B84FF;--gray:#E9E9EB;--sub:#8E8E93;--hair:#D1D1D6}
.im,.im *{box-sizing:border-box;margin:0;padding:0}
.im{font-family:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#000;text-align:left;letter-spacing:normal}
.im{display:inline-block}
.phone{position:relative;width:410px;border-radius:64px 64px 0 0;background:#1d1d1f;padding:11px 11px 0;box-shadow:inset 0 0 0 2px #55555a}
.phone::before,.phone::after{content:"";position:absolute;width:4px;border-radius:2px;background:#2c2c2e}
.phone::before{left:-4px;top:148px;height:68px;box-shadow:0 -54px 0 -6px #2c2c2e,0 84px 0 0 #2c2c2e}
.phone::after{right:-4px;top:196px;height:104px}
.screen{position:relative;height:100%;border-radius:53px 53px 0 0;background:#fff;overflow:hidden}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:124px;height:36px;border-radius:20px;background:#000;z-index:5}
.status{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0 46px;font-weight:600;font-size:17px;letter-spacing:-.02em;z-index:4}
.status .icons{display:flex;gap:6px;align-items:center}
.nav{position:absolute;top:0;left:0;right:0;padding-top:52px;height:138px;background:rgba(247,247,247,.96);border-bottom:.5px solid var(--hair);z-index:3}
.nav .back{position:absolute;left:14px;top:78px;color:var(--blue);font-size:30px;font-weight:300;line-height:1}
.nav .video{position:absolute;right:18px;top:80px}
.nav .who{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:2px}
.ava{width:50px;height:50px;border-radius:50%;background:linear-gradient(#b6b9c3,#8e929e);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:22px;overflow:hidden}
.ava.duck{background:#fde4ea}
.ava.duck img{width:44px;height:44px;object-fit:contain}
.stack{display:flex}
.stack .ava{width:38px;height:38px;font-size:15px;border:2px solid #f7f7f7;margin-left:-10px}
.stack .ava:first-child{margin-left:0}
.name{font-size:12px;color:#000;display:flex;align-items:center;gap:3px}
.name i{font-style:normal;color:var(--sub);font-size:13px}
.tc{flex:none;display:flex;flex-direction:column}
.pvw{display:grid}.pvw>.pv{grid-area:1/1}
.thread{position:absolute;top:138px;left:0;right:0;bottom:64px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 14px 6px;overflow:hidden}
.stamp{align-self:center;text-align:center;color:var(--sub);font-size:12px;margin:10px 0 8px;line-height:1.35}
.stamp b{font-weight:600}
.row{display:flex;margin-top:2px;position:relative}
.row.gap{margin-top:9px}
.row.out{justify-content:flex-end}
.label{font-size:12px;color:var(--sub);margin:8px 0 2px 46px}
.mini{position:relative;z-index:2;width:30px;height:30px;font-size:13px;margin-right:8px;align-self:flex-end;visibility:hidden}
.mini.show{visibility:visible}
.b{position:relative;max-width:74%;padding:7px 13px 8px;border-radius:19px;font-size:17px;line-height:22px;letter-spacing:-.01em}
.in .b{background:var(--gray);color:#000}
.out .b{background:var(--blue);color:#fff}
.b.tail::before,.b.tail::after{content:"";position:absolute;bottom:0;height:20px}
.out .b.tail::before{right:-7px;width:20px;background:var(--blue);border-bottom-left-radius:16px 14px}
.out .b.tail::after{right:-26px;width:26px;background:#fff;border-bottom-left-radius:10px}
.in .b.tail::before{left:-7px;width:20px;background:var(--gray);border-bottom-right-radius:16px 14px}
.in .b.tail::after{left:-26px;width:26px;background:#fff;border-bottom-right-radius:10px}
.react{position:absolute;top:-16px;width:32px;height:30px;border-radius:16px;background:#fff;box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.in .react{right:-14px}.out .react{left:-14px}
.receipt{align-self:flex-end;font-size:12px;color:var(--sub);margin:3px 4px 0 0}
.receipt b{font-weight:600}
.typing{display:flex;gap:5px;padding:13px 15px}
.typing span{width:9px;height:9px;border-radius:50%;background:#9A9AA0}
.typing span{background:#C2C2C7}.typing span.on{background:#8A8A8F}
.card{display:flex;gap:12px;align-items:center;background:var(--gray);border-radius:19px;padding:11px 14px 11px 11px;max-width:80%}
.cal{width:50px;height:54px;border-radius:11px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cal small{color:#FF3B30;font-size:10px;font-weight:700;letter-spacing:.04em}
.cal strong{font-size:25px;font-weight:400;margin-top:2px}
.card .t{font-size:15px;font-weight:600;line-height:19px}
.card .s{font-size:13px;color:var(--sub);margin-top:2px}
.lnk{width:74%;border-radius:19px;overflow:hidden;background:var(--gray)}
.lnk-img{height:118px;background:#fde4ea;display:flex;align-items:center;justify-content:center}.lnk-img img{height:94px}
.lnk-txt{display:grid;gap:1px;padding:9px 14px 11px}.lnk-txt b{font-size:15px;font-weight:600;line-height:19px}.lnk-txt span{font-size:13px;color:var(--sub)}
.poll{background:var(--gray);border-radius:19px;padding:12px;width:76%}
.poll .lab{display:flex;align-items:center;gap:5px;color:var(--sub);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.poll .q{font-size:17px;font-weight:600;margin:4px 2px 10px}
.opt{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:11px 12px;margin-top:6px;font-size:16px}
.opt .c{width:22px;height:22px;border-radius:50%;border:1.6px solid #C7C7CC;flex:none;display:flex;align-items:center;justify-content:center}
.opt.on .c{background:var(--blue);border-color:var(--blue)}
.opt .n{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--sub);font-size:15px}
.opt .n .ava{width:22px;height:22px;font-size:11px}
.snap.has-input .thread{bottom:64px}
.input.composing{align-items:flex-end}
.field.composing{height:36px;align-items:flex-end;justify-content:flex-start;padding:3px 3px 3px 12px;color:#000;overflow:hidden}
.field .ft{flex:1;font-size:17px;line-height:22px;padding:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.field .caret{display:inline-block;width:2px;height:20px;background:var(--blue);vertical-align:-4px;margin-left:1px;border-radius:1px}
.field .send{flex:none;width:28px;height:28px;margin-left:6px;display:flex}
.input{position:absolute;left:0;right:0;bottom:12px;display:flex;align-items:center;gap:10px;padding:0 14px}
.plus{width:34px;height:34px;border-radius:50%;background:var(--gray);display:flex;align-items:center;justify-content:center;color:#7c7c80;font-size:24px;font-weight:300}
.field{flex:1;height:36px;border-radius:18px;border:1px solid #C7C7CC;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#B5B5BA;font-size:17px}
.snap{position:relative;width:430px;margin:4px 0 30px;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 22px 44px -16px rgba(63,58,54,.30),0 0 0 1px rgba(0,0,0,.04)}
.snap .thread{top:0;bottom:0;padding:0 16px 14px}
/* vote tally card */
.tally{width:430px;margin:4px 0 30px;background:#fff;border-radius:26px;padding:22px 22px 12px;box-shadow:0 22px 44px -16px rgba(63,58,54,.30),0 0 0 1px rgba(0,0,0,.04)}
.tally h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.tally p{color:var(--sub);font-size:15px;margin:2px 0 12px}
.tr{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:14px;font-size:18px}
.tr.lead{background:#EAF3FF}
.tr .avs{margin-left:auto;display:flex}
.tr .avs .ava{width:30px;height:30px;font-size:13px;margin-left:-6px;border:2px solid #fff}
.tr .cnt{width:28px;text-align:right;font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}
.tr.lead .cnt{color:var(--blue)}
/* conversation list: Maia's separate thread with each mom */
.lnav{position:absolute;top:54px;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:var(--blue);font-size:17px}
.ltitle{position:absolute;top:88px;left:18px;font-size:32px;font-weight:700;letter-spacing:-.02em}
.list{position:absolute;top:136px;left:0;right:0;bottom:0}
.lrow{position:relative;display:flex;gap:11px;padding:9px 16px 9px 22px}
.lrow .dot{position:absolute;left:7px;top:34px;width:10px;height:10px;border-radius:50%;background:var(--blue);visibility:hidden}
.lrow.new .dot{visibility:visible}
.lrow .ava{width:50px;height:50px;flex:none}
.lrow .txt{flex:1;min-width:0;border-bottom:.5px solid var(--hair);padding-bottom:9px}
.lrow .top{display:flex;justify-content:space-between;align-items:baseline}
.lrow .nm{font-size:17px;font-weight:600;letter-spacing:-.01em}
.lrow .tm{font-size:15px;color:var(--sub)}
.lrow .pv{font-size:15px;line-height:20px;color:var(--sub);margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.lrow.new .pv{color:#3c3c43}
.best{position:absolute;left:10px;right:10px;top:49px;z-index:6;display:flex;gap:12px;align-items:center;background:#fff;border-radius:22px;padding:13px 16px 13px 13px;
  box-shadow:0 10px 30px -6px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.06)}
.best .ava{width:44px;height:44px;flex:none}
.best .ava img{width:38px;height:38px}
.best .k{font-size:13px;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.03em}
.best .v{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-top:1px}
.best .s{font-size:14px;color:var(--sub);margin-top:1px}