/* Yappy iOS fidelity + zoom/accessibility refinement */
:root{
  --ios-blue:#007aff;
  --ios-label:#000;
  --ios-secondary:#8e8e93;
  --ios-separator:rgba(60,60,67,.18);
  --radius-bubble:16px;
}
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;}
body{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}

:root[data-theme="light"]{
  --bg-app:#f2f2f7;--nav-bg:rgba(249,249,249,.78);--nav-border:rgba(60,60,67,.16);--nav-text:#000;--nav-sub:#6e6e73;
  --text-main:#000;--text-sub:#6e6e73;--text-faint:#8e8e93;--divider:rgba(60,60,67,.16);--chat-bg:#efe8df;
  --bubble-out:#d9fdd3;--bubble-in:#fff;--bubble-meta:#667781;--composer-bg:transparent;--composer-field:rgba(255,255,255,.90);
  --sheet-bg:rgba(242,242,247,.97);--card-bg:#fff;--input-border:rgba(60,60,67,.20);--accent:#00a884;--link:#007aff;--tabbar-bg:rgba(249,249,249,.72);
}
:root[data-theme="dark"]{
  --bg-app:#000;--nav-bg:rgba(10,10,10,.72);--nav-border:rgba(84,84,88,.48);--nav-text:#fff;--nav-sub:#a1a1a6;
  --text-main:#fff;--text-sub:#a1a1a6;--text-faint:#8e8e93;--divider:rgba(84,84,88,.42);--chat-bg:#0b141a;
  --bubble-out:#005c4b;--bubble-in:#1f2c34;--bubble-meta:#aebac1;--composer-bg:transparent;--composer-field:rgba(28,28,30,.90);
  --sheet-bg:rgba(28,28,30,.97);--card-bg:#1c1c1e;--input-border:#3a3a3c;--accent:#00a884;--link:#0a84ff;--tabbar-bg:rgba(18,18,18,.72);
}

#stage{padding:20px;}
#phone-frame{width:430px;height:932px;border-radius:58px;padding:12px;box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 0 1px #333;}
#phone-screen{border-radius:46px;}
#phone-frame::before{top:25px;width:122px;height:36px;}
@media (min-width:781px) and (max-height:980px){#phone-frame{height:calc(100dvh - 40px);width:calc((100dvh - 40px)*.46137);min-width:340px;min-height:737px;}}
@media (max-width:780px){#stage{padding:0}#phone-frame{width:100vw;height:100dvh;min-width:0;min-height:0;border-radius:0;padding:0;box-shadow:none}#phone-screen{border-radius:0}}

.statusbar{height:50px;padding:0 24px 0 28px;font-size:15px;font-weight:600;}
.navbar{padding-top:50px;background:var(--nav-bg);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);border-bottom:.5px solid var(--nav-border);}
.navbar-row{height:48px;padding:0 10px;gap:2px;}
.navbar-title{left:60px;right:60px;font-size:17px;font-weight:600;letter-spacing:-.18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.navbar-row .nav-btn{position:relative;z-index:2;min-width:44px;min-height:44px;padding:6px 8px;color:var(--link);border-radius:22px;}
.navbar-row .nav-btn:active{background:rgba(118,118,128,.12);}
.navbar-row .nav-trailing{margin-left:auto;justify-content:flex-end;font-weight:600;}
.navbar-row .nav-trailing:disabled{opacity:.35;}
.navbar-large-title{font-size:34px;line-height:41px;padding:4px 16px 10px;letter-spacing:-.8px;}
.searchbar-wrap{padding:0 16px 10px}.searchbar{height:36px;border-radius:10px;background:rgba(118,118,128,.12);}

#tabbar{margin:6px 10px calc(8px + env(safe-area-inset-bottom,0px));padding:5px 5px 4px;border:.5px solid var(--nav-border);border-radius:26px;background:var(--tabbar-bg);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);box-shadow:0 4px 18px rgba(0,0,0,.10);}
.tab-btn{min-height:48px;border-radius:20px;padding:4px 2px 2px;font-size:10px;}
.tab-btn.active{color:var(--text-main);background:rgba(118,118,128,.10);}
.tab-btn svg{width:24px;height:24px;}

.list-row{min-height:72px;padding:8px 14px;gap:11px;}
.avatar{width:52px;height:52px}.avatar.sm{width:36px;height:36px}.avatar.xs{width:24px;height:24px}.avatar.lg{width:92px;height:92px;}
.chat-header-info{gap:8px;padding:0;}
.chat-header-info>.avatar,.chat-header-info .avatar.sm{width:34px;height:34px;font-size:12px;}
.chat-header-name{font-size:16px;line-height:19px}.chat-header-sub{font-size:12px;line-height:15px;}

.chat-scroll{padding:10px 8px 16px;}
.msg-row{margin:2.5px 0;align-items:flex-end;}
.msg-row .group-sender-avatar{width:24px;height:24px;margin:0 8px 1px 1px;}
.msg-row .group-sender-avatar>.avatar{width:24px;height:24px;font-size:9px;}
.bubble{max-width:80%;border-radius:16px;padding:6px 9px 7px;box-shadow:0 .5px 1px rgba(0,0,0,.16);font-size:15.5px;line-height:1.31;}
.bubble.out{border-bottom-right-radius:5px}.bubble.in{border-bottom-left-radius:5px}
.bubble .sender-name{font-size:12.5px;line-height:15px;margin-bottom:2px;}
.bubble-meta-inline{margin-left:7px;margin-top:1px;transform:translateY(3px);font-size:10.5px;line-height:12px;gap:2px;}
.bubble-meta-inline svg{width:auto;height:11px;overflow:visible;}
.pending-clock svg{width:11px;height:11px;overflow:visible;}
.media-meta-overlay svg{overflow:visible;}

.composer{margin:7px 8px calc(7px + env(safe-area-inset-bottom,0px));padding:4px;gap:4px;border:0;border-radius:25px;background:rgba(248,248,248,.76);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);box-shadow:0 5px 18px rgba(0,0,0,.12);}
:root[data-theme="dark"] .composer{background:rgba(28,28,30,.78);box-shadow:0 4px 20px rgba(0,0,0,.34);}
.composer-field-wrap{min-height:38px;border:.5px solid var(--input-border);border-radius:20px;padding:1px 2px 1px 11px;background:var(--composer-field);}
.composer-field-wrap textarea{font-size:16px;line-height:20px;padding:8px 0;min-width:0;}
.composer-icon-btn,.send-btn{width:40px;height:40px;min-width:40px;min-height:40px;}
.composer-icon-btn svg{max-width:26px;max-height:26px;overflow:visible}.send-btn{width:38px;height:38px;min-width:38px;min-height:38px;}

.overlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.sheet{padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;max-height:min(88%,calc(100dvh - 70px));background:var(--sheet-bg);overflow-x:hidden;}
.card-modal{width:min(360px,calc(100% - 24px));max-height:calc(100dvh - 110px);overflow:auto;border-radius:18px;padding:18px;}
.sheet-title{font-size:17px;margin:2px 44px 15px;line-height:22px;}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.btn{min-width:0;min-height:44px;padding:11px 12px;border-radius:11px;white-space:normal;line-height:20px;}
.text-field,.select-field{min-height:44px;border-radius:11px;padding:10px 12px;}
.attach-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 4px;}
.attach-item{min-width:0;min-height:86px;padding:5px 2px;border-radius:14px;line-height:15px;overflow:visible;}
.attach-icon-circle{width:52px;height:52px;}
.option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.option-tile{min-width:0}.option-tile img{height:96px;}

.settings-card{border-radius:12px}.settings-item{min-height:50px;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);}
.profile-header{padding:22px 16px 12px;gap:9px;}.profile-avatar-button{border:0;background:transparent;padding:0;}
.profile-name-edit{font-size:20px;line-height:25px;}.profile-sub{font-size:13px;color:var(--text-sub);}
.danger-text{color:var(--danger)!important}.ios-purple{background:#5856d6}.ios-selected-tick,.ios-checkmark{color:var(--accent);font-weight:700;}
.member-selected{background:rgba(0,168,132,.08)}.member-selected .row-main{border-bottom-color:transparent}.ios-checkmark{margin-left:auto;padding-right:4px;}
.ios-section-note{font-size:13px;color:var(--text-sub);padding:16px 16px 8px;}
.ios-form-card{margin:0 16px;background:var(--card-bg);border-radius:12px;padding:2px 14px;}
.ios-field{display:block;padding:10px 0 12px;border-bottom:.5px solid var(--divider)}.ios-field:last-child{border-bottom:0}.ios-field>span{display:block;font-size:12px;color:var(--text-sub);margin-bottom:6px;}
.group-create-profile{padding-top:26px}.group-photo-pick{position:relative;border:0;background:transparent;padding:0;}
.member-preview{display:flex;gap:14px;padding:4px 16px 20px;overflow-x:auto}.member-preview-item{min-width:58px;display:grid;justify-items:center;gap:5px;font-size:11px;color:var(--text-sub);text-align:center}.member-preview-item .avatar{width:48px;height:48px;}
.modal-title{margin:0 0 14px;text-align:center;font-size:17px;}

@media (max-width:380px){.attach-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.navbar-title{left:54px;right:54px}.bubble{max-width:84%}.card-modal{width:calc(100% - 16px);padding:15px}.sheet{padding-left:12px;padding-right:12px}}
@media (max-height:700px){.sheet{max-height:92%}.profile-header{padding-top:14px}.avatar.lg{width:78px;height:78px}.attach-item{min-height:76px}}
@media (prefers-reduced-motion:reduce){.composer,.sheet,.card-modal{backdrop-filter:none;-webkit-backdrop-filter:none}}