/* Phone layouts share the existing data and permission controls. */
.workspace,main,.chat-grid,.chat,.composer,.fields>*{min-width:0}
.composer textarea{min-width:0;width:0}
.bubble{overflow-wrap:anywhere}
.tabs{overflow-x:auto;overscroll-behavior-x:contain}
.tabs .tab{flex-shrink:0;white-space:nowrap}
.mobile-account{display:none}
@media(max-width:640px){
 html{scroll-padding-bottom:90px}
 body{overflow-x:hidden}
 .shell{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
 .sidebar{height:calc(66px + env(safe-area-inset-bottom));padding-bottom:calc(5px + env(safe-area-inset-bottom))}
 .sidebar .nav{min-width:0;min-height:48px;gap:3px;font-size:11px}
 .sidebar .nav .num{display:none}
 .topbar{padding:0 16px;gap:8px}
 .topbar .place{gap:8px}
 .topbar .place>.avatar,.top-date{display:none}
 .mobile-account{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border:1px solid #e3e5df;border-radius:12px;background:white;color:#065f46;font:inherit;font-size:14px}
 main{padding:20px 14px}
 h1{overflow-wrap:anywhere}
 .between,.heading-actions,.toolbar,.family-dates{flex-wrap:wrap;gap:10px}
 .heading-actions>*{flex:1;min-width:0}
 .family-heading>.row{min-width:0;align-items:flex-start}
 .family-heading>.row>div:last-child{min-width:0}
 .family-heading p{overflow-wrap:anywhere}
 .tabs{gap:20px;max-width:100%;margin-bottom:16px}
 .tabs{scrollbar-width:none}
 .tabs::-webkit-scrollbar{display:none}
 .tabs .tab{min-height:44px}
 input,select,textarea{font-size:16px!important;max-width:100%;min-width:0}
 .fields,.rule-task .fields,.journal-filters{grid-template-columns:minmax(0,1fr)!important}
 .document-filters>*{min-width:0;max-width:100%}
 .document-row>*{min-width:0;overflow-wrap:anywhere}
 .employee-row{gap:12px}
 .chat-title{padding:10px 12px;gap:6px;flex-wrap:wrap}
 .chat-title>div{min-width:0;flex:1 1 140px}
 .chat-title small{overflow-wrap:anywhere}
 .chat-title button{font-size:12px;min-height:36px;padding:6px 8px}
 .messages{padding:14px 10px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 .message{max-width:94%}
 .bubble{max-width:100%;padding:12px}
 .voice-player{width:260px;max-width:100%;gap:8px}
 .voice-track{min-width:0}
 .composer{padding:8px;gap:4px;align-items:flex-end;flex-shrink:0}
 .composer .icon-btn,.composer>.primary{width:40px;height:44px;min-width:40px;padding:8px;flex-shrink:0}
 .composer textarea{flex:1;min-height:44px;max-height:104px;padding:10px 4px;resize:none}
 .voice-recorder{flex-shrink:0;padding:10px;gap:8px;min-width:0}
 .voice-recorder audio{min-width:0;width:100%}
 body.mobile-chat{overflow:hidden}
 .mobile-chat #app{position:fixed;left:0;right:0;top:var(--crm-vtop,0px);height:var(--crm-vh,100dvh)}
 .mobile-chat .shell{height:100%;box-sizing:border-box}
 .mobile-chat .workspace{height:100%;display:flex;flex-direction:column}
 .mobile-chat .topbar{display:none}
 .mobile-chat main{width:100%;margin:0;flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 10px 0}
 .mobile-chat .back{align-self:flex-start;min-height:36px;margin:0 0 2px}
 .mobile-chat .family-heading{margin:0 0 4px;flex-shrink:0}
 .mobile-chat .family-heading .avatar{width:32px;height:32px;font-size:13px;flex-shrink:0}
 .mobile-chat .family-heading h1{font-size:20px;line-height:1.3;margin:0}
 .mobile-chat .family-heading p,.mobile-chat .heading-actions,.mobile-chat .family-dates{display:none}
 .mobile-chat .tabs{flex-shrink:0;margin:0 0 6px;gap:18px}
 .mobile-chat .chat-grid{display:flex;flex:1;min-height:0}
 .mobile-chat .chat{flex:1;height:100%;min-height:0;display:flex;flex-direction:column;border-radius:16px 16px 0 0}
 .mobile-chat .messages{flex:1;min-height:0}
 .mobile-chat .chat-aside{display:none}
 .mobile-chat .sidebar{position:absolute}
 .mobile-chat.keyboard-open .sidebar{display:none}
 .mobile-chat.keyboard-open .shell{padding-bottom:0}
 .mobile-chat.keyboard-open .family-heading{display:none}
 .cloud-saving{bottom:calc(78px + env(safe-area-inset-bottom))}
 #toast{bottom:calc(82px + env(safe-area-inset-bottom));max-width:calc(100vw - 28px)}
 dialog{width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(var(--crm-vh,100dvh) - 24px);padding:0;overflow:auto;border-radius:18px}
 dialog .dialog-head{position:sticky;top:0;z-index:2;background:white;padding:16px}
 dialog .dialog-head h2{font-size:20px}
 dialog .dialog-body{padding:16px}
 dialog .dialog-foot{position:sticky;bottom:0;z-index:2;background:white;padding:12px 16px;flex-wrap:wrap;gap:8px}
 dialog .dialog-foot button{min-height:44px}
 .save-alert{font-size:12px;padding:8px}
}