*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;background:#eef2f5;color:#1f2937}button,input,select{font:inherit}.hidden{display:none!important}.center-card{width:min(92%,390px);margin:12vh auto;background:#fff;padding:28px;border-radius:18px;box-shadow:0 12px 35px #0002}.center-card h1{margin-top:0}.center-card input,.user-form input,.user-form select,.search-form input,.search-form select{width:100%;padding:13px;margin:6px 0;border:1px solid #d1d5db;border-radius:10px;background:white}.center-card button,.composer button,.user-form button,.search-form button{border:0;background:#2563eb;color:white;padding:12px 18px;border-radius:10px;cursor:pointer}.error{color:#b91c1c}.app{height:100vh;height:100dvh;display:grid;grid-template-columns:245px 1fr}aside{background:#111827;color:white;padding:16px;display:flex;flex-direction:column;gap:8px}.brand{font-size:20px;font-weight:700;padding:10px 4px 18px}.nav,.secondary{border:0;text-align:right;padding:12px;border-radius:10px;background:transparent;color:#e5e7eb;cursor:pointer;position:relative}.nav.active,.nav:hover{background:#1f2937}.secondary{background:#374151}.spacer{flex:1}#who{font-size:13px;color:#cbd5e1;padding:8px}.badge,.thread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;margin-inline-start:6px}main{min-width:0;background:#f7f8fa}.view{height:100vh;height:100dvh;display:flex;flex-direction:column}.view>header{min-height:66px;background:#fff;border-bottom:1px solid #e5e7eb;padding:12px 20px;display:flex;flex-direction:column;justify-content:center}.view>header span{font-size:12px;color:#6b7280}.messages{flex:1;overflow:auto;padding:18px;scroll-behavior:smooth}.msg{max-width:72%;background:#fff;padding:10px 12px;border-radius:14px;margin:8px 0;box-shadow:0 1px 2px #0001;transition:.3s}.msg.mine{margin-right:auto;background:#dbeafe}.msg.flash{outline:3px solid #f59e0b;transform:scale(1.01)}.msg .meta{font-size:12px;color:#6b7280;margin-bottom:5px}.msg .body{white-space:pre-wrap;overflow-wrap:anywhere}.chat-image{display:block;max-width:min(100%,520px);max-height:420px;margin-top:8px;border-radius:12px;cursor:zoom-in;object-fit:contain;background:#f3f4f6}.actions{margin-top:8px}.actions button,.private-tag{border:0;background:#f3f4f6;padding:6px 9px;border-radius:8px;cursor:pointer;font-size:12px}.private-tag{display:block;color:#6d28d9;margin-top:7px}.composer{padding:10px 12px;background:white;border-top:1px solid #e5e7eb}.composer-row{display:flex;gap:8px;align-items:center}.composer-row>input{flex:1;padding:12px;border:1px solid #d1d5db;border-radius:12px;min-width:0}.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:10px;background:#f9fafb;cursor:pointer;font-size:20px}.image-preview{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:8px;background:#f3f4f6;border-radius:10px}.image-preview img{width:64px;height:64px;object-fit:cover;border-radius:8px}.image-preview div{min-width:0;flex:1}.image-preview b,.image-preview small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-preview small{color:#6b7280}.image-preview button{background:#fff;color:#111827;padding:7px 10px}.split{flex:1;min-height:0;display:grid;grid-template-columns:310px 1fr}.thread-list{background:white;border-left:1px solid #e5e7eb;overflow:auto}.thread-item{width:100%;text-align:right;padding:13px;border:0;border-bottom:1px solid #eee;cursor:pointer;background:white}.thread-item:hover,.thread-item.active{background:#f3f4f6}.thread-item small{display:block;color:#6b7280;margin-top:5px}.thread-pane{display:flex;flex-direction:column;min-width:0}.thread-header{padding:10px 18px;background:#fafafa;border-bottom:1px solid #e5e7eb;font-weight:600}.thread-context{padding:9px 18px;background:#fff7ed;border-bottom:1px solid #fed7aa;display:flex;gap:10px;align-items:center}.thread-context div{min-width:0}.thread-context small,.thread-context b{display:block}.thread-context b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread-context img{width:48px;height:48px;object-fit:cover;border-radius:8px;cursor:zoom-in}.users-wrap,.search-wrap{padding:20px;overflow:auto}.user-form{display:grid;grid-template-columns:1fr 1fr 180px auto;gap:8px;background:#fff;padding:14px;border-radius:14px;margin-bottom:14px}.user-card{background:white;border-bottom:1px solid #eee;padding:12px}.role{display:inline-block;padding:3px 8px;border-radius:999px;background:#eef2ff;font-size:12px}.search-form{display:grid;grid-template-columns:2fr 1fr 160px 160px 160px auto auto;gap:8px;background:#fff;padding:14px;border-radius:14px;align-items:center}.check{display:flex;align-items:center;gap:6px;white-space:nowrap}.check input{width:auto;margin:0}.search-results{margin-top:12px;display:grid;gap:8px}.search-result{border:0;background:white;border-radius:12px;padding:12px;text-align:right;cursor:pointer;box-shadow:0 1px 2px #0001}.search-result:hover{background:#f8fafc}.result-top{display:flex;gap:8px;align-items:center;margin-bottom:7px}.result-top span{font-size:11px;padding:2px 7px;border-radius:999px;background:#eef2ff}.result-top time{margin-right:auto;color:#6b7280;font-size:12px}.search-result img{width:70px;height:70px;object-fit:cover;border-radius:8px;margin-top:8px}.empty{padding:20px;color:#6b7280;text-align:center}.lightbox{position:fixed;inset:0;background:#000c;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}.lightbox img{max-width:96vw;max-height:94vh;object-fit:contain}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111827;color:white;padding:10px 16px;border-radius:10px;z-index:10000;box-shadow:0 6px 25px #0004}
@media(max-width:1000px){.search-form{grid-template-columns:1fr 1fr 1fr}.user-form{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}aside{flex-direction:row;overflow-x:auto;padding:8px;align-items:center}.brand{font-size:0;padding:0}.brand:before{content:'💬';font-size:22px}.spacer{display:none}#who{display:none}.nav,.secondary{white-space:nowrap}.view{height:calc(100dvh - 58px)}.split{grid-template-columns:1fr}.thread-list{max-height:30vh;border-left:0;border-bottom:1px solid #ddd}.msg{max-width:90%}.user-form,.search-form{grid-template-columns:1fr}.users-wrap,.search-wrap{padding:10px}.composer{padding-bottom:max(10px,env(safe-area-inset-bottom))}.composer-row{gap:5px}.icon-btn{width:42px;flex:0 0 42px}.composer-row>button{padding-inline:12px}.chat-image{max-height:50vh}.camera-btn{display:flex}}