:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{margin:0}*{box-sizing:border-box}body{background:#f0f4f8;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}.login-container{justify-content:center;align-items:center;min-height:100dvh;padding:20px;display:flex}.login-card{text-align:center;background:#fff;border-radius:20px;width:100%;max-width:400px;padding:35px 25px;box-shadow:0 10px 30px #0001}.logo{font-size:55px}.login-card h1{color:#2563eb}.login-card p{color:#64748b}.login-card input{border:1px solid #ddd;border-radius:10px;width:100%;margin-top:15px;padding:15px;font-size:16px}.login-card button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:10px;width:100%;margin-top:20px;padding:15px}.app-layout{flex-direction:column;height:100dvh;display:flex}.app-header{color:#fff;background:#2563eb;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.app-header strong{font-size:20px;display:block}.app-header small{margin-top:4px;display:block}.logout-btn{color:#2563eb;cursor:pointer;background:#fff;border:none;border-radius:8px;padding:10px}.chat-layout{flex:1;min-height:0;display:flex}.sidebar{background:#fff;border-right:1px solid #ddd;width:280px;padding:15px;overflow-y:auto}.room{text-align:left;cursor:pointer;background:#f1f5f9;border:none;border-radius:10px;width:100%;margin-bottom:10px;padding:15px;display:block}.room.active{color:#1d4ed8;background:#dbeafe}.chat-panel{flex-direction:column;flex:1;min-width:0;display:flex}.chat-title{background:#fff;border-bottom:1px solid #ddd;padding:18px;font-weight:700}.messages{flex-direction:column;flex:1;gap:12px;padding:20px;display:flex;overflow-y:auto}.bubble{overflow-wrap:anywhere;border-radius:16px;max-width:75%;padding:12px 16px}.bubble.mine{color:#fff;background:#2563eb;align-self:flex-end}.bubble.theirs{color:#111827;background:#fff;align-self:flex-start}.send-form{background:#fff;gap:10px;padding:12px;display:flex}.send-form input{border:1px solid #ddd;border-radius:10px;flex:1;min-width:0;padding:12px;font-size:16px}.send-form button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:10px;padding:0 20px}.empty{color:#64748b;text-align:center;padding:20px}.loading{text-align:center;padding:30px}.error-banner{color:#991b1b;text-align:center;background:#fee2e2;padding:10px}@media (width<=600px){.app-header{padding:12px}.app-header strong{font-size:17px}.sidebar{width:110px;padding:8px}.sidebar h3{font-size:13px}.room{padding:10px 6px;font-size:12px}.messages{padding:12px}.bubble{max-width:90%}}.add-staff-btn{color:#fff;cursor:pointer;background:#16a34a;border:none;border-radius:10px;width:100%;margin-bottom:15px;padding:12px;font-weight:600}.modal-overlay{z-index:1000;background:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-card{background:#fff;border-radius:16px;width:100%;max-width:420px;max-height:90dvh;padding:25px;overflow-y:auto}.modal-card h2{margin-top:0}.modal-card label{margin-top:15px;margin-bottom:6px;font-weight:600;display:block}.modal-card input{border:1px solid #d1d5db;border-radius:8px;width:100%;padding:12px;font-size:16px}.modal-actions{gap:10px;margin-top:20px;display:flex}.modal-actions button{cursor:pointer;border:none;border-radius:8px;flex:1;padding:12px}.cancel-btn{color:#111827;background:#e5e7eb}.create-btn{color:#fff;background:#2563eb}.create-btn:disabled{opacity:.6;cursor:not-allowed}.staff-result{overflow-wrap:anywhere;margin-top:15px}.staff-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:10px;padding:12px}.staff-card.active{background:#eff6ff;border-color:#2563eb}.staff-name{color:#1e293b;overflow-wrap:anywhere;font-size:14px;font-weight:600}.chat-open-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;width:100%;padding:10px;font-size:14px;font-weight:600}.chat-open-btn:active{transform:scale(.98)}.app-layout{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.chat-layout{flex:1;min-height:0;display:flex;overflow:hidden}.chat-layout.list-mode .sidebar{background:#fff;flex:1;width:100%;max-width:100%;padding:20px;display:block;overflow-y:auto}.staff-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;max-width:420px;margin-bottom:12px;padding:15px}.staff-info{align-items:center;gap:12px;margin-bottom:12px;display:flex}.staff-avatar{font-size:26px}.staff-name{color:#1e293b;font-weight:600}.chat-open-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;width:100%;padding:12px;font-weight:600}.chat-open-btn:hover{background:#1d4ed8}.chat-layout.chat-mode .chat-panel{background:#f1f5f9;flex-direction:column;flex:1;width:100%;min-width:0;min-height:0;display:flex}.chat-title{background:#fff;border-bottom:1px solid #e2e8f0;align-items:center;gap:15px;padding:15px;display:flex}.back-chat-btn{color:#1e293b;cursor:pointer;white-space:nowrap;background:#e2e8f0;border:none;border-radius:8px;padding:10px 16px;font-weight:600}.back-chat-btn:hover{background:#cbd5e1}.chat-layout.chat-mode .messages{flex:1;min-height:0;padding:20px;overflow-y:auto}.chat-layout.chat-mode .send-form{flex-shrink:0}@media (width<=768px){.chat-layout.list-mode .sidebar{width:100%;padding:15px}.staff-card{max-width:100%}.chat-layout.chat-mode .chat-panel{width:100%;height:100%}.chat-title{gap:10px;padding:12px}.back-chat-btn{padding:8px 12px;font-size:14px}.chat-layout.chat-mode .messages{padding:12px}}.header-unread-badge{color:#fff;vertical-align:middle;background:#ef4444;border-radius:20px;justify-content:center;align-items:center;min-width:20px;height:20px;margin-left:8px;padding:2px 7px;font-size:12px;font-weight:700;display:inline-flex}.unread-badge{color:#fff;background:#ef4444;border-radius:20px;justify-content:center;align-items:center;min-width:24px;height:24px;margin-left:auto;padding:2px 7px;font-size:12px;font-weight:700;display:inline-flex}.chat-notification{z-index:9999;color:#1e293b;cursor:pointer;text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:14px;align-items:center;gap:12px;width:320px;max-width:calc(100vw - 40px);padding:15px;animation:.3s ease-out notificationSlide;display:flex;position:fixed;top:85px;right:20px;box-shadow:0 10px 30px #00000026}.chat-notification:hover{background:#f8fafc}.notification-icon{font-size:26px}.notification-text{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.notification-text strong{color:#1e293b;font-size:14px}.notification-text small{color:#64748b;text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.notification-close{color:#94a3b8;font-size:22px}@keyframes notificationSlide{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.chat-notification{width:auto;max-width:none;top:75px;left:10px;right:10px}.unread-badge{min-width:22px;height:22px;font-size:11px}}:root{--primary:#f9a8d4;--primary-dark:#f472b6;--primary-light:#fce7f3;--pink-bg:#fff7fb}body,.app-layout,.login-container{background:#fff7fb}.app-header{color:#831843;background:#f9a8d4}.login-card button,.add-staff-btn,.chat-open-btn,.send-form button,.create-btn{color:#831843;background:#f9a8d4;border-color:#f9a8d4}.login-card button:hover,.add-staff-btn:hover,.chat-open-btn:hover,.send-form button:hover,.create-btn:hover{color:#fff;background:#f472b6}.staff-card{background:#fff;border-color:#fbcfe8}.staff-card:hover{background:#fff1f7}.bubble.mine{color:#831843;background:#fce7f3}.chat-layout.chat-mode .chat-panel{background:#fff7fb}input:focus{border-color:#f9a8d4;outline-color:#f9a8d4}.back-chat-btn{color:#831843;background:#fce7f3}.chat-title{background:#fff;border-bottom-color:#fbcfe8}.login-card,.chat-notification{background:#fff;border-color:#fbcfe8}.unread-badge,.header-unread-badge{color:#fff;background:#ef4444}.messages{scroll-behavior:smooth;min-height:0;overflow-y:auto}.message-row{flex-direction:column;max-width:100%;margin-bottom:12px;display:flex}.message-row.mine{align-items:flex-end}.message-row.theirs{align-items:flex-start}.message-row .bubble{overflow-wrap:anywhere;width:fit-content;max-width:80%}.message-status{margin-top:4px;padding-right:4px;font-size:11px;font-weight:500;line-height:1.4;display:block}.message-status.sent{color:#94a3b8}.message-status.read{color:#db2777;font-weight:600}