/* НаСвязи 2.3: readable compact UI */
:root{--bottom-nav-height:56px}
body{font-size:13px}
.app{height:calc(100dvh - var(--bottom-nav-height));margin-bottom:var(--bottom-nav-height)}
.topbar{min-height:55px!important;max-height:58px!important;padding:5px 8px!important;gap:5px!important}
.topbar .app-logo{width:37px!important;height:37px!important;min-width:37px!important;border-radius:11px!important;display:grid;place-items:center;overflow:hidden}
.app-logo img{display:block;width:100%;height:100%;object-fit:cover}
.topbar .header-titles{min-width:0}
.topbar .header-titles strong{font-size:15px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .header-titles span{font-size:10px!important}
.topbar .icon-control{height:33px!important;min-width:32px!important;font-size:18px!important;padding:3px!important}
.status-strip{padding:3px 10px!important;font-size:10px!important;line-height:1.25!important;min-height:0!important}
.bottom-tabs{height:var(--bottom-nav-height)!important;padding:1px 8px max(1px,env(safe-area-inset-bottom))!important;justify-content:space-evenly!important}
.bottom-tabs button{min-height:43px!important;min-width:72px!important;font-size:18px!important;padding:2px 12px!important;gap:1px!important;border-radius:11px!important}
.bottom-tabs button span{font-size:10px!important;line-height:1.15!important}
.chat-home{padding:10px 12px!important}
.chat-home-title{margin:2px 0 10px!important}
.chat-home-title h2{font-size:21px!important}
.chat-home-title button{padding:8px 12px!important;font-size:12px!important}
#chatHomeFilter{padding:10px 12px!important;font-size:14px!important;min-height:41px!important}
.chat-home-list{margin-top:9px!important;gap:5px!important}
.chat-home-contact{min-height:61px!important;padding:9px 8px!important;gap:10px!important;border-radius:12px!important}
.chat-home-contact .avatar{width:42px!important;height:42px!important;font-size:20px!important}
.chat-home-contact strong{font-size:14px!important}
.chat-home-contact small{font-size:11px!important}
.messages{padding-bottom:10px!important}
.compose{min-height:74px!important;align-items:center!important;gap:5px!important;padding:7px 7px calc(8px + env(safe-area-inset-bottom,0px))!important}
#draft{min-height:61px!important;height:62px!important;max-height:150px!important;padding:10px 11px!important;font-size:14px!important;line-height:1.35!important;resize:vertical!important;border-radius:14px!important;flex:1!important;min-width:0}
.compose .icon-control{min-width:30px!important;width:30px!important;height:37px!important;font-size:19px!important;padding:0!important}
.compose #send{min-width:38px!important;height:43px!important}
.modal-wrap{padding:9px!important}
.modal{width:min(420px,100%)!important;padding:13px!important;border-radius:16px!important;max-height:calc(100dvh - 20px)!important;overflow-y:auto!important;gap:5px!important}
.modal-heading h2,.panel-title h2{font-size:18px!important}
.modal-heading{margin-bottom:8px!important}
.modal-heading .icon-control{height:32px!important;width:34px!important;min-width:34px!important;font-size:21px!important}
.modal label{font-size:12px!important;margin:8px 0 5px!important}
.modal .language-row{display:flex;gap:5px;margin:6px 0!important;flex-wrap:wrap}
.modal .language-row button{font-size:12px!important;padding:7px 9px!important;min-height:32px!important}
.modal input:not([type=file]):not([type=range]),.modal textarea{min-height:40px!important;font-size:13px!important;padding:9px 10px!important}
.modal .hint{font-size:10px!important;line-height:1.25!important;margin:5px 0!important}
.modal .full{margin:6px 0!important;min-height:36px!important;padding:8px 10px!important;font-size:12px!important}
.profile-hero{padding:8px 10px!important;min-height:52px!important;border-radius:12px!important;margin-bottom:6px!important;gap:10px!important}
.profile-hero .profile-icon{width:36px!important;height:36px!important;font-size:19px!important;flex-shrink:0!important}
.profile-ident{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.profile-ident strong{font-size:16px!important;display:block;overflow-wrap:anywhere}
.profile-ident small{font-size:10px!important;display:block;overflow-wrap:anywhere}
.name-field-group{display:flex;align-items:stretch;gap:6px;margin:5px 0 3px}
#displayNameInput{font-size:16px!important;font-weight:600!important;min-width:0;flex:1!important;max-width:100%!important;min-height:43px!important;padding:8px 10px!important}
#saveName{width:auto!important;flex-shrink:0!important;padding:7px 10px!important;min-height:43px!important;font-size:12px!important;white-space:nowrap}
.name-tip{display:block;color:#688092;font-size:10px;line-height:1.25;margin:3px 0 7px}
#settings input[type=file]{font-size:11px!important;max-width:100%}
#settings{z-index:107}
#cloudLocked,#cloudSetup{width:min(390px,95vw)!important;max-height:calc(100% - 30px);overflow-y:auto;padding:19px 17px!important;gap:10px!important}
.cloud-auth-icon{font-size:36px!important}
.cloud-auth h2{font-size:21px!important}
.cloud-auth p{font-size:12px!important;line-height:1.45!important}
.cloud-auth input[type=password]{min-height:45px!important;font-size:16px!important;padding:9px 10px!important}
.cloud-auto-choice{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:11px;color:#536e7c}
.cloud-auto-choice input{width:18px;height:18px;flex-shrink:0}
.cloud-auto-choice span{line-height:1.35}
.cloud-error{background:#fff0f0;border:1px solid #ffbdc5;color:#a62f40!important;border-radius:10px;padding:9px 10px;font-size:12px!important;font-weight:600;text-align:left!important}
.cloud-screen,.scan-screen{bottom:var(--bottom-nav-height)!important}
.cloud-header{height:52px!important;padding:5px 10px!important;gap:9px!important}
.cloud-header-btn{height:34px!important;width:35px!important;border-radius:10px!important;font-size:24px!important}
.cloud-title strong{font-size:18px!important}
.cloud-title small{font-size:10px!important}
.cloud-top{padding:8px 10px 3px!important}
.cloud-create-folder{min-height:33px!important;padding:6px 8px!important;font-size:11px!important}
.cloud-categories{gap:5px!important;padding:5px 10px 8px!important}
.cloud-categories button{padding:7px 9px!important;font-size:11px!important}
.cloud-desktop{gap:8px!important;padding:8px 10px 75px!important;grid-template-columns:repeat(auto-fill,minmax(108px,1fr))!important}
.cloud-tile{min-height:126px!important;border-radius:12px!important}
.cloud-tile-preview{height:85px!important}
.cloud-tile-name{font-size:11px!important;padding:7px 7px 2px!important}
.cloud-tile-meta{font-size:9px!important}
.cloud-plus{width:53px!important;height:53px!important;bottom:55px!important;right:15px!important;border-radius:17px!important;font-size:31px!important}
.cloud-add-menu{bottom:110px!important}
.cloud-footer{height:40px!important;font-size:10px!important;padding:4px 11px!important}
.call-modal{width:min(390px,100%)!important;padding:12px!important;max-height:calc(100dvh - 30px)!important}
.call-modal #remoteVideo{max-height:35dvh!important;margin:5px auto!important}
.call-modal #localVideo{max-height:78px!important;margin:4px auto!important}
.call-tools{gap:5px!important;margin-top:5px!important}
.call-tools button{font-size:11px!important;min-height:32px!important;padding:5px 6px!important}
.call-tools .volume{font-size:11px!important;padding:0 4px!important}
.call-tools p{font-size:10px!important;line-height:1.25!important}
.call-actions{margin-top:7px!important;gap:6px!important}
.call-actions button{font-size:12px!important;padding:8px 12px!important;min-height:35px!important}
.call-actions .call-green{font-size:16px!important;padding:12px 14px!important}
.pre-call-info{font-size:11px!important;line-height:1.35!important;margin:5px 0!important;padding:8px!important}
.scan-head{min-height:50px!important;padding:7px 10px!important}
.scan-head strong{font-size:15px!important}
.scan-modes{padding:8px!important}
.scan-modes button{padding:8px 18px!important;font-size:12px!important}
.scan-buttons{padding:8px 10px!important;min-height:72px!important}
.scan-shutter{width:62px!important;height:62px!important;font-size:34px!important}
.scan-note{font-size:10px!important;padding:5px 12px!important}
#contactsList .contact-item .contact-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;text-align:left}
#contactsList .contact-item .contact-copy strong{font-size:13px;font-weight:650;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#contactsList .contact-item .contact-presence{font-size:10px;color:#718596;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hidden{display:none!important}