html{-webkit-text-size-adjust:100%}
body{padding-bottom:env(safe-area-inset-bottom)}
nav{padding-top:calc(10px + env(safe-area-inset-top))}
.cbadge{background:#dc2626;color:#fff;border-radius:9px;padding:0 6px;font-size:12px;font-weight:700}.cbadge[hidden]{display:none}
@media (max-width:700px){
 nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;gap:12px}
 main{padding:8px}table{font-size:13px}.card{overflow-x:auto}
 input,select,textarea{font-size:16px}
}
.chatwrap{display:flex;height:calc(100vh - 120px);height:calc(100dvh - 120px);background:#fff;border-radius:8px;box-shadow:0 1px 3px #0001;overflow:hidden}
#clist{width:280px;border-right:1px solid #e5e7eb;overflow-y:auto;flex-shrink:0}
#cview{flex:1;display:flex;flex-direction:column;min-width:0}
.chhead{padding:10px 12px;font-weight:700;background:#f1f5f9;border-bottom:1px solid #e5e7eb;font-size:14px}
.citem{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #f1f5f9;cursor:pointer;color:#222;text-decoration:none}
.citem.on{background:#dbeafe}.citem small{color:#6b7280;display:block;font-size:12px}
#msgs{flex:1;overflow-y:auto;padding:10px;background:#f8fafc}
.msg{max-width:78%;margin:4px 0;padding:7px 10px;border-radius:12px;background:#fff;box-shadow:0 1px 1px #0001;white-space:pre-wrap;word-wrap:break-word}
.msg.me{margin-left:auto;background:#2563eb;color:#fff}.msg .mh{font-size:11px;opacity:.75;margin-bottom:2px}
#cform{display:flex;gap:6px;padding:8px;border-top:1px solid #e5e7eb;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
#cinput{flex:1;resize:none;max-height:120px;font-size:16px}#cform button{flex:0 0 auto}
.cbk{display:none;background:none;color:#2563eb;font-size:22px;padding:0 10px 0 0}
@media (max-width:700px){
 .chatwrap{height:calc(100vh - 70px);height:calc(100dvh - 70px);border-radius:0}
 #clist{width:100%;border:0}#cview{display:none}
 .chatwrap.open #clist{display:none}.chatwrap.open #cview{display:flex}.cbk{display:inline}
}