/* Yappy v9 — WhatsApp iOS-first visual system, based on user-supplied light/dark references */
:root{
  --status-h:50px;
  --ios-green:#20c879;
  --ios-green-deep:#16b968;
  --ios-blue:#0a84ff;
  --ios-label:#000;
  --ios-secondary:#747477;
  --ios-bg:#fff;
  --ios-dark:#090b0b;
  --ios-dark-card:#1c1c1e;
  --bubble-radius:18px;
}
html[data-platform="ios"] body,html[data-platform="ios"] button,html[data-platform="ios"] input,html[data-platform="ios"] textarea,html[data-platform="ios"] select{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",sans-serif}
html[data-platform="android"] body,html[data-platform="android"] button,html[data-platform="android"] input,html[data-platform="android"] textarea,html[data-platform="android"] select{font-family:Helvetica,Arial,sans-serif}
html.no-statusbar{--status-h:0px}
html.no-statusbar .statusbar{display:none!important}
*{min-width:0}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}

:root[data-theme="light"]{
  --bg-app:#fff;--nav-bg:rgba(250,249,245,.92);--nav-text:#050505;--nav-sub:#6f6f72;--nav-border:rgba(60,60,67,.12);
  --text-main:#050505;--text-sub:#737376;--text-faint:#8e8e93;--divider:rgba(60,60,67,.14);
  --chat-bg:#f6f0e6;--bubble-out:#d2ffcc;--bubble-in:#fff;--bubble-out-text:#060606;--bubble-in-text:#060606;--bubble-meta:#687168;
  --composer-field:rgba(255,255,255,.94);--sheet-bg:rgba(246,246,248,.98);--card-bg:#fff;--input-border:rgba(60,60,67,.18);
  --accent:#18bf70;--link:#007aff;--check-read:#59645c;--tabbar-bg:rgba(250,250,250,.84);--statusbar-text:#000;
}
:root[data-theme="dark"]{
  --bg-app:#070909;--nav-bg:rgba(9,13,12,.94);--nav-text:#fff;--nav-sub:#a7a7aa;--nav-border:rgba(84,84,88,.30);
  --text-main:#fff;--text-sub:#a3a3a7;--text-faint:#85858a;--divider:rgba(84,84,88,.35);
  --chat-bg:#080d0d;--bubble-out:#155e45;--bubble-in:#222323;--bubble-out-text:#fff;--bubble-in-text:#fff;--bubble-meta:#b7bdb9;
  --composer-field:rgba(27,28,28,.96);--sheet-bg:rgba(28,28,30,.98);--card-bg:#1c1c1e;--input-border:#3a3a3c;
  --accent:#16c875;--link:#64d2ff;--check-read:#b7c0bb;--tabbar-bg:rgba(25,25,25,.86);--statusbar-text:#fff;
}

/* desktop preview remains useful, mobile uses the exact same canvas without a phone mockup */
#stage{padding:18px;background:#0d0d0d}
#phone-frame{width:430px;height:932px;border-radius:56px;padding:12px;background:#000;box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 0 1px #343434}
#phone-screen{border-radius:45px;background:var(--bg-app)}
#phone-frame::before{top:24px;width:120px;height:35px}
.desktop-hint{display:none!important}
@media (min-width:781px) and (max-height:972px){#phone-frame{height:calc(100dvh - 36px);width:calc((100dvh - 36px)*.46137);min-width:330px;min-height:716px}}
@media (max-width:780px){
  #stage{padding:0;background:var(--bg-app)}
  #phone-frame{width:100vw;height:100dvh;min-width:0;min-height:0;border:0;border-radius:0;padding:0;box-shadow:none;background:transparent}
  #phone-screen{width:100%;height:100%;border-radius:0}
  #phone-frame::before{display:none}
}

.statusbar{height:var(--status-h);padding:0 25px 0 28px;font-size:15px;font-weight:600;letter-spacing:.1px;color:var(--statusbar-text)}
.navbar{padding-top:var(--status-h);background:var(--nav-bg);border-bottom:.5px solid var(--nav-border);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%)}
.navbar-row{height:52px;padding:0 10px;gap:4px}
.navbar-title{left:72px;right:72px;font-size:17px;line-height:22px;font-weight:650;letter-spacing:-.2px}
.navbar-row .nav-btn,.nav-btn{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--link);border-radius:22px;display:flex;align-items:center;justify-content:center;padding:6px 8px}
.navbar-row .nav-trailing{margin-left:auto;font-size:16px;font-weight:600;justify-content:flex-end}
.navbar-row .nav-trailing:disabled{opacity:.34}
.navbar-large-title{font-size:33px;line-height:40px;letter-spacing:-.7px;padding:4px 16px 10px}
.searchbar-wrap{padding:0 16px 10px}.searchbar{height:36px;background:rgba(118,118,128,.12);border-radius:10px}

/* iOS 2026 Chats header: centered title + floating circular controls */
.ios-chats-head{padding-top:var(--status-h);height:126px;position:relative;background:var(--bg-app);flex:none}
.ios-chats-head .chats-title{position:absolute;left:50%;top:calc(var(--status-h) + 25px);transform:translateX(-50%);font-size:23px;font-weight:650;letter-spacing:-.45px}
.ios-chats-actions{position:absolute;left:18px;right:18px;top:calc(var(--status-h) + 13px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.ios-chats-actions .left,.ios-chats-actions .right{display:flex;gap:12px;pointer-events:auto}
.ios-circle-btn{width:48px;height:48px;border-radius:50%;border:.5px solid rgba(120,120,128,.14);background:rgba(245,245,245,.84);color:var(--text-main);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
:root[data-theme="dark"] .ios-circle-btn{background:rgba(42,42,42,.78);border-color:rgba(255,255,255,.10)}
.ios-circle-btn.primary{background:var(--ios-green);color:#05130b;border-color:transparent;box-shadow:none}
.ios-circle-btn svg{width:25px;height:25px;overflow:visible}
.ios-circle-btn.primary svg{width:27px;height:27px}

/* chat list matches the supplied iOS references */
.screen-body{background:var(--bg-app)}
.list-row{min-height:82px;padding:9px 16px 9px 17px;gap:13px}
.list-row>.avatar,.list-row>.story-ring>.avatar{width:58px;height:58px;font-size:19px}
.row-main{padding:2px 0 10px;gap:3px;border-bottom:.5px solid var(--divider)}
.row-name{font-size:18px;line-height:23px;font-weight:650;letter-spacing:-.3px}
.row-preview{font-size:16px;line-height:21px;color:var(--text-sub)}
.row-time{font-size:15px;line-height:20px;color:var(--text-sub)}
.row-unread{background:var(--ios-green);height:22px;min-width:22px;border-radius:11px;font-size:12px;color:#07150d}

/* five-tab WhatsApp iOS bar */
#tabbar{margin:6px 18px calc(8px + env(safe-area-inset-bottom,0px));padding:4px 5px;border:.5px solid var(--nav-border);border-radius:27px;background:var(--tabbar-bg);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);box-shadow:0 5px 18px rgba(0,0,0,.10);display:flex;overflow:visible}
.tab-btn{flex:1;min-width:0;min-height:54px;border:0;border-radius:24px;background:transparent;color:var(--text-main);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:10.5px;padding:3px 1px}
.tab-btn.active{background:rgba(118,118,128,.17);color:var(--text-main)}
.tab-btn svg{width:25px;height:25px;overflow:visible}.tab-btn span{white-space:nowrap}

/* room chat header from supplied WhatsApp iOS light/dark references */
.chat-navbar{padding-top:var(--status-h);height:calc(var(--status-h) + 66px);background:var(--nav-bg);flex:none;border-bottom:.5px solid var(--nav-border);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%)}
.chat-navbar-inner{height:66px;padding:7px 14px 8px;display:flex;align-items:center;gap:10px}
.chat-back-pill{height:46px;min-width:46px;border:0;border-radius:24px;padding:0 11px;background:rgba(245,245,245,.88);color:var(--text-main);display:flex;align-items:center;gap:2px;font-size:16px;box-shadow:0 1px 9px rgba(0,0,0,.06)}
:root[data-theme="dark"] .chat-back-pill{background:#1d1f1f}
.chat-back-pill svg{width:25px;height:25px}.chat-back-count{font-size:16px;font-weight:500;min-width:0}
.chat-contact-button{flex:1;min-width:0;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:9px;color:var(--text-main);text-align:left}
.chat-contact-button>.avatar{width:42px;height:42px;font-size:14px}
.chat-contact-copy{min-width:0;display:flex;flex-direction:column}.chat-contact-copy strong{font-size:18px;line-height:22px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-contact-copy span{font-size:13px;line-height:17px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-call-pill{height:46px;border-radius:24px;background:rgba(245,245,245,.88);display:flex;align-items:center;padding:0 5px;gap:1px;box-shadow:0 1px 9px rgba(0,0,0,.06)}
:root[data-theme="dark"] .chat-call-pill{background:#1d2421;border:.5px solid rgba(55,89,74,.55)}
.chat-call-pill button{width:42px;height:42px;border:0;background:none;color:var(--text-main);display:flex;align-items:center;justify-content:center;border-radius:21px}.chat-call-pill svg{width:25px;height:25px;overflow:visible}

.chat-scroll{padding:10px 8px 18px;background-color:var(--chat-bg);scroll-padding-bottom:80px}
.msg-row{margin:3px 0;align-items:flex-end}
.msg-row.out{justify-content:flex-end}.msg-row.in{justify-content:flex-start}
.msg-row .group-sender-avatar{width:25px;height:25px;margin:0 8px 2px 2px}.msg-row .group-sender-avatar>.avatar{width:25px;height:25px;font-size:9px}
.bubble{max-width:78%;border-radius:var(--bubble-radius);padding:8px 11px 7px;font-size:16px;line-height:1.31;box-shadow:0 .5px 1px rgba(0,0,0,.12);cursor:pointer}
.bubble.out{background:var(--bubble-out);color:var(--bubble-out-text);border-bottom-right-radius:6px}.bubble.in{background:var(--bubble-in);color:var(--bubble-in-text);border-bottom-left-radius:6px}
.bubble-text{white-space:pre-wrap;word-break:break-word}.bubble .sender-name{font-size:13px;line-height:16px;margin-bottom:3px;font-weight:700}
/* force timestamp + delivery mark to sit on the visual bottom baseline */
.bubble-meta-inline{float:right;display:inline-flex;align-items:flex-end;gap:2px;margin:10px 0 -2px 9px!important;transform:none!important;position:relative;top:2px;height:12px;line-height:12px;font-size:11px;color:var(--bubble-meta);white-space:nowrap}
.bubble-meta-inline svg{width:auto!important;height:11px!important;overflow:visible!important;align-self:flex-end}.pending-clock svg{width:11px!important;height:11px!important}
.media-meta-overlay{right:7px;bottom:6px;display:flex;align-items:flex-end;gap:2px}.media-meta-overlay svg{height:11px!important;overflow:visible}

/* sticker messages: image only, no WhatsApp bubble */
.sticker-message{position:relative;max-width:168px;min-width:92px;padding:2px 2px 16px;cursor:pointer}.sticker-message img{display:block;max-width:168px;max-height:168px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}.sticker-meta{position:absolute;right:3px;bottom:1px;padding:2px 5px;border-radius:8px;background:rgba(0,0,0,.34);color:#fff;font-size:10px;line-height:12px;display:flex;align-items:flex-end;gap:2px}.sticker-meta svg{height:10px!important;width:auto!important;overflow:visible}

/* visible voice note controls in both themes */
.bubble.voice{min-width:220px;padding:9px 11px 7px}.voice-row{gap:8px}.voice-play{background:transparent;color:var(--accent);width:34px;height:34px}.voice-play svg path{fill:currentColor}.voice-wave span{background:#728078;opacity:.72}.bubble.out .voice-wave span{background:#3b735d;opacity:.95}:root[data-theme="dark"] .voice-wave span,:root[data-theme="dark"] .bubble.out .voice-wave span{background:#bac1bd;opacity:.72}:root[data-theme="dark"] .voice-dur{color:#c2c4c3}

/* bottom composer mirrors the supplied iOS screenshots */
.composer{flex:none;margin:0;padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));border:0;background:transparent;display:flex;align-items:flex-end;gap:7px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.composer-round{width:44px;height:44px;min-width:44px;border-radius:50%;border:.5px solid var(--input-border);background:var(--composer-field);color:var(--text-main);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.05)}
.composer-round svg{width:25px;height:25px;overflow:visible}.composer-round.voice-main{background:var(--ios-green);color:#fff;border-color:transparent}.composer-round.send-main{background:var(--ios-green);color:#fff;border-color:transparent}
.composer-field-wrap{flex:1;min-height:44px;border:.5px solid var(--input-border);border-radius:24px;background:var(--composer-field);padding:2px 4px 2px 14px;display:flex;align-items:flex-end;gap:2px;box-shadow:0 1px 5px rgba(0,0,0,.04)}
.composer-field-wrap textarea{flex:1;min-width:0;border:0;background:none;outline:0;resize:none;color:var(--text-main);font-size:16px;line-height:21px;padding:9px 0 8px;max-height:104px}.composer-inline-btn{width:36px;height:40px;border:0;background:none;color:var(--text-main);display:flex;align-items:center;justify-content:center;border-radius:18px;flex:none}.composer-inline-btn svg{width:22px;height:22px;overflow:visible}.composer-inline-btn.clock-control{color:var(--text-sub)}

.date-chip-wrap,.sys-chip-wrap{display:flex;justify-content:center;margin:9px 0}.date-chip,.sys-chip{box-shadow:none;border-radius:9px;font-size:12px;padding:5px 10px;background:rgba(255,255,255,.78);color:#59636a}:root[data-theme="dark"] .date-chip,:root[data-theme="dark"] .sys-chip{background:rgba(35,40,40,.92);color:#aeb5b1}

/* iOS sheets/forms */
.overlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.sheet{max-height:min(90%,calc(100dvh - 54px));border-radius:25px 25px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));overflow:auto;background:var(--sheet-bg)}.card-modal{width:min(360px,calc(100% - 24px));max-height:calc(100dvh - 88px);overflow:auto;border-radius:19px;padding:18px}.sheet-title{font-size:17px;line-height:22px;margin:2px 44px 15px}.btn-row{display:flex;flex-wrap:wrap;gap:10px}.btn,.text-field,.select-field{min-height:44px}.btn{border-radius:12px}.text-field,.select-field{border-radius:11px}.attach-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 5px}.attach-item{min-height:88px;border-radius:15px;padding:5px 2px}.attach-icon-circle{width:54px;height:54px}

/* contact/group info: pencil icon makes editable fields explicit */
.settings-card{border-radius:12px}.settings-item{min-height:52px;padding:11px 14px}.settings-button{width:100%;border:0;background:transparent;color:inherit;text-align:left}.settings-button:active{background:rgba(118,118,128,.10)}.edit-pencil{width:34px;height:34px;border:0;background:rgba(118,118,128,.12);color:var(--link);border-radius:17px;display:flex;align-items:center;justify-content:center;flex:none}.edit-pencil svg{width:17px;height:17px}.profile-header{padding:22px 16px 12px}.profile-name-line{display:flex;align-items:center;justify-content:center;gap:7px}.profile-name-line strong{font-size:21px;line-height:26px}.profile-status{font-size:14px;color:var(--text-sub)}.info-row-copy{flex:1;min-width:0;display:flex;flex-direction:column}.info-row-copy strong{font-size:16px;font-weight:500}.info-row-copy small{font-size:12px;color:var(--text-sub);margin-top:2px}

/* Stories */
.story-caption{left:14px;right:14px;bottom:28px;width:auto;padding:10px 13px;border-radius:14px;background:rgba(0,0,0,.46);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:15px;line-height:20px;text-shadow:none}.story-header{padding-left:14px;padding-right:10px}.story-header .sh-time{color:rgba(255,255,255,.72)}

/* toggles */
.switch{cursor:pointer}.switch.on{background:#34c759}

/* never make mobile a different/weaker UI; only adapt available width */
@media (max-width:780px){
  .ios-chats-head{height:122px}.list-row{padding-left:15px;padding-right:14px}.list-row>.avatar{width:56px;height:56px}.row-name{font-size:17px}.row-preview{font-size:15.5px}
  #tabbar{margin-left:12px;margin-right:12px}.bubble{max-width:82%}.chat-navbar-inner{padding-left:10px;padding-right:10px}.chat-call-pill button{width:39px}.chat-contact-button>.avatar{width:40px;height:40px}
}
@media (max-width:360px){.chat-back-count{display:none}.chat-call-pill{padding:0 2px}.chat-call-pill button{width:36px}.bubble{max-width:86%}.attach-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}