:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#172b2a;background:#f2f5f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:10px;background:#087f70;color:white;padding:12px 16px;font-weight:700}button:hover{filter:brightness(.96)}button:disabled{opacity:.5;cursor:not-allowed}input,select{width:100%;border:1px solid #d7e1de;background:#fff;border-radius:10px;padding:13px;color:#172b2a;outline:none}input:focus,select:focus{border-color:#078575;box-shadow:0 0 0 3px #0785751a}.hidden{display:none!important}.muted,.hint,small{color:#6e817d}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(140deg,#e5f3ef,#f8faf9)}.login-card{background:white;width:min(100%,410px);padding:32px;border:1px solid #e0e9e6;border-radius:22px;box-shadow:0 18px 55px #1c554214}.brand-mark,.brand-mini{display:grid;place-items:center;background:#087f70;color:white;font-weight:900;letter-spacing:-1px}.brand-mark{width:56px;height:56px;border-radius:17px;font-size:22px}.login-card h1{margin:16px 0 4px}.login-card p{margin:8px 0 24px}.login-card label,.compact-form label{display:block;font-size:13px;font-weight:700;margin:14px 0 7px}.login-card button{width:100%;margin-top:12px}.login-card small{display:block;margin-top:22px;line-height:1.5}.message{min-height:18px;font-size:13px;color:#b45309;margin:10px 0!important}.app{height:100vh;min-height:520px;display:grid;grid-template-columns:360px 1fr;max-width:1600px;margin:auto;background:white;box-shadow:0 0 45px #193e380d}.sidebar{display:flex;flex-direction:column;border-right:1px solid #e0e8e5;min-width:0}.side-head{height:76px;padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #e6ece9}.brand-mini{width:42px;height:42px;border-radius:13px}.side-head strong,.side-head small{display:block}.side-head small{font-size:12px;margin-top:3px}.icon-btn{margin-left:auto;padding:9px 12px;background:#eaf4f1;color:#075e54}.tabs{display:flex;gap:4px;padding:10px;border-bottom:1px solid #e6ece9}.tab{flex:1;padding:9px 5px;background:transparent;color:#61736f;font-size:13px}.tab.active{background:#e1f3ee;color:#075e54}.pane{padding:16px;overflow:auto;flex:1}.pane-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.pane-title h2,.pane h2{font-size:18px;margin:0 0 14px}.small-btn{padding:9px 11px;font-size:12px}.list{display:flex;flex-direction:column;gap:6px;margin-top:12px}.list-item{padding:12px;border-radius:12px;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:#fff;color:#172b2a;text-align:left;width:100%}.list-item:hover,.list-item.selected{background:#eef8f5;border-color:#d4eee6}.avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#d8eee8;color:#07685c;font-weight:800}.item-copy{min-width:0;flex:1}.item-copy strong,.item-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-copy small{font-size:12px;margin-top:4px}.side-foot{padding:12px 16px;border-top:1px solid #e6ece9;font-size:11px;color:#84938f}.chat-area{min-width:0;background:#f5f8f7;display:flex}.empty-state{margin:auto;text-align:center;padding:25px;max-width:400px}.empty-icon{width:80px;height:80px;margin:auto auto 18px;border-radius:50%;display:grid;place-items:center;background:#e0f1ec;color:#087f70;font-size:36px}.empty-state h2{margin:0 0 8px}.empty-state p{color:#71817d}.empty-state small{line-height:1.5}.chat-panel{display:flex;flex-direction:column;width:100%;height:100%}.chat-head{height:76px;background:white;border-bottom:1px solid #e2e9e6;display:flex;align-items:center;padding:14px 22px;gap:12px}.chat-head strong,.chat-head small{display:block}.chat-head small{font-size:12px;margin-top:4px}.messages{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(#e7efec 1px,transparent 1px);background-size:20px 20px}.bubble{max-width:min(75%,560px);padding:11px 14px;border-radius:14px;background:white;box-shadow:0 2px 6px #183d3608;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}.bubble.mine{align-self:flex-end;background:#d9f7e8;border-bottom-right-radius:4px}.bubble.theirs{align-self:flex-start;border-bottom-left-radius:4px}.bubble small{display:block;text-align:right;font-size:10px;margin-top:5px}.composer{display:flex;gap:10px;padding:14px;background:white;border-top:1px solid #e2e9e6}.composer input{border-radius:22px;padding:13px 17px}.composer button{border-radius:22px;padding:0 22px}.compact-form{display:flex;flex-direction:column;gap:8px}.compact-form button{margin-top:5px}.hint{font-size:12px;line-height:1.5}.admin-output{white-space:pre-wrap;overflow:auto;background:#f3f7f5;border-radius:10px;padding:12px;font-size:12px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#183e38;color:white;padding:12px 18px;border-radius:12px;box-shadow:0 8px 25px #0002;z-index:9}.search-result{padding:10px;border-bottom:1px solid #e8eeeb;cursor:pointer;font-size:13px}.search-result:hover{background:#eef8f5}@media(max-width:760px){.app{grid-template-columns:1fr;height:100dvh}.sidebar{height:44vh;min-height:230px;border-right:0;border-bottom:1px solid #dbe5e1}.side-head{height:60px}.tabs{padding:5px}.pane{padding:10px;overflow:auto}.side-foot{display:none}.chat-area{height:56vh;min-height:260px}.chat-head{height:58px;padding:8px 14px}.messages{padding:12px}.bubble{max-width:88%}.app{display:flex;flex-direction:column}.sidebar{flex:none}.chat-area{flex:1}.pane-title h2,.pane h2{margin-bottom:8px}.list{margin-top:6px}}

.chat-heading{display:flex;flex-direction:column;flex:1;min-width:0}.call-actions{display:flex;gap:6px;flex-wrap:wrap}.attach-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d7e0df;border-radius:10px;padding:8px 12px;cursor:pointer;font-size:22px}.composer{gap:8px}.call-overlay{position:fixed;inset:0;background:rgba(5,25,23,.88);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}.call-card{background:#fff;border-radius:18px;padding:20px;max-width:680px;width:100%;color:#172c2a}.call-card video{background:#111;border-radius:12px;width:100%;max-height:45vh;object-fit:contain;margin:6px 0}.call-card #localVideo{width:30%;max-height:18vh;display:block;margin-left:auto}.call-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.call-controls button,.danger-btn{border:0;border-radius:9px;padding:10px 14px;cursor:pointer}.danger-btn{background:#b42318;color:#fff}.bubble img,.bubble video,.bubble audio{max-width:min(360px,70vw);display:block;border-radius:10px}.bubble a{color:inherit}.hidden{display:none!important}@media(max-width:600px){.call-actions .small-btn{padding:6px;font-size:12px}.chat-head{gap:6px}.composer input{min-width:0}}

/* WhatsApp-inspired responsive finish */
:root{--wa:#075e54;--wa-dark:#064c44;--wa-soft:#d9fdd3;--wa-bg:#efeae2}
body{background:#dbe4e1}.app{max-width:1500px;border:1px solid #d2ddd9;box-shadow:0 8px 40px #163e3515}.side-head{background:#f0f2f5}.brand-mini,.brand-mark{background:var(--wa)}.tabs{background:#f8faf9}.tab.active{background:#d8f3e6;color:var(--wa-dark)}.chat-area{background:var(--wa-bg)}.chat-head{background:#f0f2f5}.messages{background-color:var(--wa-bg);background-image:radial-gradient(#d7d2c9 .7px,transparent .7px);background-size:18px 18px}.bubble.mine{background:var(--wa-soft);border-bottom-right-radius:4px}.bubble.theirs{background:#fff;border-bottom-left-radius:4px}.composer{align-items:center;background:#f0f2f5}.composer input{background:#fff;border:0}.composer button[type=submit]{background:var(--wa);min-height:42px}.attach-btn{background:#fff;border:0;border-radius:50%;width:42px;height:42px}.call-actions .small-btn{background:#e0eee9;color:var(--wa-dark)}.list-item{transition:background .12s ease}.list-item.selected{background:#e6f4ee;border-color:#b7dfd1}.pane-title h2,.pane h2{color:#173b35}.side-foot{background:#f8faf9}
@media(max-width:760px){.app{border:0}.sidebar{background:#fff}.chat-area{background:var(--wa-bg)}.chat-head{padding:8px 10px}.call-actions{gap:3px}.call-actions .small-btn{padding:7px 8px}.composer{padding:9px;gap:6px}.composer button[type=submit]{padding:0 13px}}

/* Persistent notification inbox */
.notification-btn{position:relative;min-width:38px;padding:9px 10px;font-size:20px}.notification-badge{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:99px;background:#d93025;color:#fff;font-size:10px;font-weight:800;border:2px solid #fff}.notifications-panel{position:absolute;z-index:20;top:70px;left:12px;width:min(340px,calc(100vw - 24px));max-height:65vh;overflow:auto;background:#fff;border:1px solid #dbe5e1;border-radius:14px;box-shadow:0 12px 40px #123a3026;padding:10px}.sidebar{position:relative}.notifications-heading{display:flex;align-items:center;justify-content:space-between;padding:5px 4px 10px;border-bottom:1px solid #edf1ef}.notifications-heading .small-btn{padding:7px;font-size:11px}.notification-item{display:flex;flex-direction:column;gap:4px;text-align:left;width:100%;background:#fff;color:#183d36;border-radius:9px;border-bottom:1px solid #edf1ef;padding:11px;margin-top:3px}.notification-item:hover{background:#eef8f4}.notification-item.read{opacity:.65}.notification-item strong{font-size:13px}.notification-item span{font-size:12px;font-weight:400}.notification-item small{font-size:10px}@media(max-width:760px){.notifications-panel{top:56px;left:8px}.notification-btn{padding:7px 9px}}

/* Mobile-first WhatsApp-style conversation navigation and composer */
.voice-message-btn{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;background:var(--wa,#075e54);color:#fff}
.voice-message-btn svg,.composer #sendMessageBtn svg{width:22px;height:22px;fill:currentColor}
.composer #sendMessageBtn{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;background:var(--wa,#075e54);color:#fff}
.composer #sendMessageBtn svg{width:20px;height:20px}
.composer #messageInput{flex:1;min-width:0}
@media(max-width:760px){
 html,body{width:100%;height:100%;height:100dvh;overflow:hidden}
 .app{position:relative;width:100%;height:100%;height:100dvh;min-height:0;max-width:none;margin:0;display:flex;flex-direction:column;overflow:hidden}
 .sidebar{display:flex;flex:1 1 auto;width:100%;height:100%;min-height:0;border:0;overflow:hidden}
 .sidebar .pane{min-height:0;overscroll-behavior:contain}
 .chat-area{display:none;position:absolute;inset:0;width:100%;height:100%;min-height:0;z-index:5;flex:none}
 body.chat-open .sidebar{display:none}
 body.chat-open .chat-area{display:flex}
 .chat-panel{height:100%;height:100dvh;min-height:0}
 .chat-head{height:60px;min-height:60px;padding:7px 9px;gap:8px}
 #backToList{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:38px;font-size:25px;padding:0 8px;background:transparent;color:var(--wa-dark,#064c44)}
 .chat-head .avatar{width:36px;height:36px}
 .chat-heading{overflow:hidden}
 .chat-heading strong,.chat-heading small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34vw}
 .call-actions{flex:0 0 auto;display:flex;gap:5px;flex-wrap:nowrap}
 .call-actions .small-btn{width:38px;height:38px;min-width:38px;padding:0;border-radius:50%;font-size:0;display:grid;place-items:center}
 #voiceCallBtn{font-size:0}
 #voiceCallBtn::before{content:'☎';font-size:17px}
 #videoCallBtn{font-size:0}
 #videoCallBtn::before{content:'▣';font-size:17px}
 .messages{flex:1;min-height:0;overflow-y:auto;padding:12px 10px 16px;overscroll-behavior:contain}
 .bubble{max-width:88%;font-size:14px}
 .composer{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));min-height:58px}
 .attach-btn{flex:0 0 38px;width:38px;height:38px;padding:0;font-size:25px}
 .composer #messageInput{height:42px;padding:10px 14px;font-size:16px;border-radius:22px}
 .voice-message-btn,.composer #sendMessageBtn{flex:0 0 42px;width:42px;height:42px}
 .composer button[type=submit]{padding:0}
 .side-head{flex:0 0 58px}
 .tabs{flex:0 0 auto}
 .pane{padding:12px}
}

/* Clean WhatsApp-like call icons and country-code phone input */
.call-actions .call-icon-btn{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;min-width:38px;padding:0;border-radius:50%;background:#d9fdd3;color:#075e54;box-shadow:0 1px 2px #163e3510}
.call-actions .call-icon-btn svg{display:block;width:20px;height:20px;fill:currentColor}
.call-actions .call-icon-btn:hover{background:#c5f2bd}
.phone-input-wrap{display:flex;align-items:stretch;gap:0;border:1px solid #d7e1de;background:#fff;border-radius:12px;overflow:hidden}
.phone-input-wrap:focus-within{border-color:#078575;box-shadow:0 0 0 3px #0785751a}
.phone-input-wrap .country-prefix{display:flex;align-items:center;padding:0 12px;background:#f0f5f3;border-right:1px solid #d7e1de;color:#075e54;font-weight:800;white-space:nowrap}
.phone-input-wrap input{border:0!important;box-shadow:none!important;border-radius:0!important;min-width:0;background:transparent}
.phone-help{display:block;margin-top:7px;line-height:1.4;color:#6e817d;font-size:11px}
@media(max-width:760px){.call-actions .call-icon-btn{flex-basis:36px;width:36px;height:36px;min-width:36px}.call-actions .call-icon-btn svg{width:19px;height:19px}.phone-input-wrap input{padding:13px 10px}}
/* Pinned quick contacts and mobile-app-first presentation */
.pinned-contacts{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f0f2f5;border-bottom:1px solid #dfe7e4;overflow-x:auto;flex-shrink:0}
.pinned-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#6c807b;font-weight:800;flex:0 0 auto}
.pinned-contact{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:6px 10px 6px 6px;background:#fff;color:#173b35;border:1px solid #dce9e4;border-radius:999px;box-shadow:0 1px 2px #163e350b;text-align:left}
.pinned-contact>span:last-child{display:flex;flex-direction:column;gap:2px}
.pinned-contact strong{font-size:12px;line-height:1.1}
.pinned-contact small{font-size:10px;font-weight:500;color:#70817d}
.pinned-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#075e54;color:#fff;font-size:11px;font-weight:900}
.pinned-avatar.sonia{background:#a84d78}
.pinned-contact:active{transform:scale(.98)}
/* Desktop browsers show a phone-sized preview: this product is designed for mobile use. */
@media(min-width:761px){body{background:#d9e5e1;padding:18px 0}.app{width:min(100%,460px);height:calc(100dvh - 36px);min-height:540px;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;border:1px solid #cbdad5;box-shadow:0 18px 60px #163e3520}.sidebar{height:100%;flex:1;border:0;min-height:0}.chat-area{position:fixed;left:calc(50% + 250px);top:18px;width:min(460px,calc(50vw - 270px));height:calc(100dvh - 36px);border-radius:24px;overflow:hidden}.app:not(:has(body.chat-open)){} body.chat-open .app{display:flex}body.chat-open .sidebar{display:none}body.chat-open .chat-area{position:relative;left:auto;top:auto;width:min(100%,460px);height:calc(100dvh - 36px);margin:auto}.app .chat-area{display:none}body.chat-open .chat-area{display:flex}}
@media(max-width:760px){.pinned-contacts{padding:7px 8px;gap:6px}.pinned-label{font-size:9px}.pinned-contact{padding:5px 8px 5px 5px;gap:6px}.pinned-avatar{width:28px;height:28px}.pinned-contact strong{font-size:11px}.pinned-contact small{font-size:9px}.chat-head .chat-heading{max-width:36vw}.call-actions{flex-shrink:0}}

/* Android/mobile viewport correction: never render the app as a tiny centered preview. */
@media (max-width: 1024px), (pointer: coarse) {
  html, body { width:100%; min-width:0; height:100%; height:100dvh; margin:0; padding:0; overflow:hidden; }
  body { background:#f5f1e8; }
  #appView.app { position:fixed; inset:0; width:100vw; max-width:none; height:100vh; height:100dvh; min-height:0; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; overflow:hidden; display:flex; flex-direction:column; }
  #appView.app .sidebar { width:100%; height:100%; min-height:0; flex:1 1 auto; border:0; border-radius:0; }
  #appView.app .chat-area { display:none; position:absolute; inset:0; width:100%; max-width:none; height:100%; min-height:0; margin:0; border:0; border-radius:0; box-shadow:none; z-index:5; }
  body.chat-open #appView.app .sidebar { display:none; }
  body.chat-open #appView.app .chat-area { display:flex; }
  #appView.app .chat-panel { width:100%; height:100%; height:100dvh; min-height:0; }
  #appView.app .messages { flex:1 1 auto; min-height:0; overflow-y:auto; }
  #appView.app .composer { flex-shrink:0; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  #appView.app .chat-head { flex-shrink:0; }
}

/* Android readability pass: use comfortable touch targets and readable type. */
@media (max-width: 1024px), (pointer: coarse) {
  html { font-size: 16px; -webkit-text-size-adjust: 100%; }
  #appView.app { font-size: 16px; }
  #appView .side-head { min-height: 68px; padding: 12px 14px; gap: 12px; }
  #appView .brand-mini { width: 44px; height: 44px; font-size: 15px; flex: 0 0 44px; }
  #appView .side-head strong { font-size: 17px; }
  #appView .side-head small { font-size: 13px; }
  #appView .icon-btn { min-width: 42px; min-height: 42px; font-size: 19px; }
  #appView .tabs { padding: 7px 8px; gap: 6px; }
  #appView .tab { min-height: 44px; padding: 10px 8px; font-size: 15px; }
  #appView .pane { padding: 16px 14px; }
  #appView .pane-title h2, #appView .pane h2 { font-size: 21px; margin-bottom: 12px; }
  #appView .small-btn { min-height: 40px; padding: 9px 12px; font-size: 14px; }
  #appView .list { gap: 8px; margin-top: 12px; }
  #appView .list-item { min-height: 68px; padding: 12px; gap: 12px; }
  #appView .avatar { width: 46px; height: 46px; font-size: 16px; }
  #appView .item-copy strong { font-size: 16px; }
  #appView .item-copy small { font-size: 13px; line-height: 1.35; }
  #appView #userSearch { min-height: 50px; padding: 13px 15px; font-size: 16px; margin-top: 8px; }
  #appView .search-result { padding: 14px 12px; font-size: 16px; min-height: 62px; }
  #appView .search-result strong { font-size: 16px; }
  #appView .search-result small { font-size: 13px; }
  #appView .chat-head { height: 70px; min-height: 70px; padding: 9px 12px; gap: 10px; }
  #appView .chat-head .avatar { width: 42px; height: 42px; font-size: 15px; }
  #appView .chat-heading strong { font-size: 17px; max-width: 45vw; }
  #appView .chat-heading small { font-size: 13px; max-width: 45vw; }
  #appView .call-actions .call-icon-btn { width: 44px; height: 44px; min-width: 44px; flex-basis: 44px; }
  #appView .call-actions .call-icon-btn svg { width: 23px; height: 23px; }
  #appView .pinned-contacts { min-height: 64px; padding: 9px 10px; gap: 9px; }
  #appView .pinned-label { font-size: 11px; }
  #appView .pinned-contact { min-height: 44px; padding: 6px 11px 6px 6px; gap: 8px; }
  #appView .pinned-avatar { width: 32px; height: 32px; font-size: 12px; }
  #appView .pinned-contact strong { font-size: 13px; }
  #appView .pinned-contact small { font-size: 11px; }
  #appView .messages { padding: 16px 12px 20px; gap: 10px; }
  #appView .bubble { font-size: 16px; padding: 11px 14px; line-height: 1.45; }
  #appView .bubble small { font-size: 11px; }
  #appView .composer { min-height: 70px; gap: 8px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); }
  #appView .attach-btn { width: 44px; height: 44px; flex-basis: 44px; font-size: 27px; }
  #appView .composer #messageInput { height: 48px; font-size: 16px; padding: 12px 16px; }
  #appView .voice-message-btn, #appView .composer #sendMessageBtn { width: 48px; height: 48px; flex-basis: 48px; }
  #appView .voice-message-btn svg, #appView .composer #sendMessageBtn svg { width: 23px; height: 23px; }
}

/* Pinned quick contacts are also shown in the all-chats list. */
.pinned-list{margin:8px 0 12px;border:1px solid #e0e9e5;border-radius:14px;flex-wrap:wrap;overflow:visible}
.pinned-list .pinned-label{font-weight:800;letter-spacing:.04em}
.pinned-list .pinned-contact{min-height:44px}
@media(max-width:760px){
  .pinned-list{display:flex;flex-wrap:wrap;gap:8px;padding:10px;margin:8px 0 12px}
  .pinned-list .pinned-contact{flex:1 1 145px;min-width:0;min-height:48px;justify-content:flex-start}
  #backToList{display:inline-flex!important;align-items:center;justify-content:center;width:42px;min-width:42px;height:42px;border-radius:50%;font-size:28px;line-height:1;padding:0;background:#e8f5f1;color:#075e54;flex-shrink:0}
}


/* Conversation polish: clearer Android chat, less clutter, readable bubbles */
@media (max-width: 1024px), (pointer: coarse) {
  #appView.app .chat-panel { display:flex; min-height:0; overflow:hidden; }
  #appView.app .chat-head { min-height:76px; height:76px; padding:10px 14px; gap:12px; }
  #appView.app #backToList { width:46px; min-width:46px; height:46px; font-size:32px; }
  #appView.app .chat-heading strong { font-size:18px; line-height:1.25; }
  #appView.app .chat-heading small { font-size:14px; line-height:1.3; }
  #appView.app .chat-head .avatar { width:46px; height:46px; font-size:16px; }
  #appView.app .call-actions { gap:8px; }
  #appView.app .call-actions .call-icon-btn { width:46px; height:46px; min-width:46px; flex-basis:46px; }
  /* Pinned contacts stay in the all-chats list; don't duplicate them inside a conversation. */
  body.chat-open #appView #pinnedContacts { display:none !important; }
  #appView.app .messages { flex:1 1 0; min-height:0; padding:18px 14px 22px; gap:12px; background-size:24px 24px; }
  #appView.app .bubble { max-width:88%; font-size:17px; line-height:1.5; padding:13px 16px; border-radius:16px; }
  #appView.app .bubble small { font-size:12px; margin-top:6px; }
  #appView.app .composer { min-height:76px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:9px; }
  #appView.app .composer #messageInput { height:52px; min-height:52px; font-size:17px; }
  #appView.app .attach-btn { width:48px; height:48px; flex-basis:48px; font-size:29px; }
  #appView.app .voice-message-btn, #appView.app .composer #sendMessageBtn { width:50px; height:50px; flex-basis:50px; }
}
@media (max-width: 420px) {
  #appView.app .chat-head { padding:8px 9px; gap:8px; }
  #appView.app .chat-heading strong { font-size:17px; }
  #appView.app .chat-heading small { font-size:12px; }
  #appView.app .call-actions { gap:5px; }
  #appView.app .call-actions .call-icon-btn { width:42px; height:42px; min-width:42px; flex-basis:42px; }
}
/* Profile/channel image controls */
.profile-photo-row{display:flex;align-items:center;gap:16px;margin:12px 0 18px}.profile-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;background:#d8eee8;border:2px solid #d7e5e1}.profile-photo-row label{display:flex;flex-direction:column;gap:8px}.channel-avatar-img{object-fit:cover;border-radius:50%}.chat-head .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}#channelAdminsBtn{white-space:nowrap}
@media(max-width:700px){.profile-photo{width:96px;height:96px}.profile-photo-row{gap:18px}.profile-photo-row input{max-width:100%}.channel-avatar-img{width:52px;height:52px;flex-shrink:0}}

/* Chat list polish: peer profile photos, one phone line, recent message and unread badge */
.chat-list-item{position:relative;align-items:center;min-height:76px;gap:12px;padding:11px 12px;text-align:left}
.chat-list-item .avatar{width:50px;height:50px;min-width:50px;object-fit:cover}
.chat-list-item .avatar-photo{display:block;border-radius:50%;background:#d8eee8}
.chat-list-item .item-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.chat-list-item .item-copy strong{width:100%;font-size:15px;line-height:1.3}
.chat-list-item .item-copy .chat-phone{width:100%;font-size:11px;color:#6e817d;margin-top:1px}
.chat-list-item .item-copy .chat-preview{width:100%;font-size:13px;color:#405a55;margin-top:2px;font-weight:400}
.chat-list-meta{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:7px;flex-shrink:0;padding:2px 0}
.chat-list-meta .conversation-time{position:static;font-size:10px;color:#6e817d;white-space:nowrap}
.unread-count{min-width:21px;height:21px;padding:0 6px;border-radius:99px;background:#087f70;color:white;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:760px){.chat-list-item{min-height:82px;padding:12px 10px;gap:11px}.chat-list-item .avatar{width:52px;height:52px;min-width:52px}.chat-list-item .item-copy strong{font-size:16px}.chat-list-item .item-copy .chat-phone{font-size:12px}.chat-list-item .item-copy .chat-preview{font-size:14px}.chat-list-meta .conversation-time{font-size:11px}.unread-count{min-width:23px;height:23px;font-size:12px}}

/* Android channel settings polish + clean chat rows (name OR number, preview, unread) */
.channel-settings-card,#channelsPane .compact-form{background:#fff;border:1px solid #e1e9e5;border-radius:18px;padding:16px;box-shadow:0 2px 8px rgba(10,50,40,.04)}
#channelsPane .pane-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
#channelsPane .pane-title h2,#channelsPane>h2{font-size:23px;line-height:1.25;margin:4px 0 14px}
#channelsPane .compact-form{display:flex;flex-direction:column;gap:11px;margin:0 0 14px}
#channelsPane .compact-form label{font-size:14px;font-weight:700;color:#24453f}
#channelsPane .compact-form input:not([type=file]),#channelsPane .compact-form select,#channelsPane .compact-form textarea{width:100%;min-height:48px;border:1px solid #d6e2dd;border-radius:12px;padding:12px 14px;font-size:16px;background:#fbfdfc;box-sizing:border-box}
#channelsPane .compact-form input[type=file]{width:100%;font-size:14px;min-height:42px}
#channelsPane .compact-form button{min-height:48px;border-radius:12px;font-size:16px;font-weight:750}
#channelList{display:flex;flex-direction:column;gap:10px}
#channelList>.list-item{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;min-height:76px;padding:12px;border:1px solid #e0e9e5;border-radius:16px;background:#fff;box-sizing:border-box}
#channelList>.list-item .item-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
#channelList>.list-item .item-copy strong{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
#channelList>.list-item .item-copy small{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
#channelList>.list-item>button{flex:0 0 auto;min-width:74px;min-height:42px;border-radius:12px;font-size:14px}
#appView .chat-list-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:84px;padding:12px;border-radius:14px}
#appView .chat-list-item .item-copy{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
#appView .chat-list-item .item-copy strong{font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
#appView .chat-list-item .item-copy .chat-preview{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;color:#63736f}
#appView .chat-list-item .chat-list-meta{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;gap:8px;flex-shrink:0}
#appView .chat-list-item .conversation-time{font-size:11px;white-space:nowrap;color:#6e817d}
#appView .chat-list-item .unread-count{min-width:23px;height:23px;font-size:12px}
@media(max-width:760px),(pointer:coarse){
 #channelsPane{padding:16px 14px 28px;overflow-y:auto;overscroll-behavior:contain}
 #channelsPane .compact-form{padding:14px;gap:12px}
 #channelsPane .pane-title h2,#channelsPane>h2{font-size:25px}
 #channelList>.list-item{min-height:82px;padding:12px 10px;gap:10px}
 #channelList>.list-item .avatar{width:48px;height:48px;min-width:48px}
 #channelList>.list-item .item-copy strong{font-size:16px}
 #channelList>.list-item>button{min-width:72px;padding:0 12px}
 #appView .chat-list-item{min-height:86px;padding:13px 12px;gap:12px}
 #appView .chat-list-item .avatar{width:52px;height:52px;min-width:52px}
 #appView .chat-list-item .item-copy strong{font-size:17px}
 #appView .chat-list-item .item-copy .chat-preview{font-size:14px}
}

/* Voice message playback and greeting shortcut */
.greeting-message-btn{width:42px;height:42px;flex:0 0 42px;padding:0;border-radius:50%;display:grid;place-items:center;background:#e1f3ee;color:#075e54;font-size:22px}.voice-caption{font-size:12px;color:#54716b;margin-top:5px}.bubble audio{width:min(300px,68vw);max-width:100%;min-height:42px}
@media(max-width:760px){.greeting-message-btn{width:44px;height:44px;flex-basis:44px}.bubble audio{width:min(280px,72vw)}}