:root{--bina-navy: #0a2540;--bina-teal: #2dd4bf;--bina-teal-deep: #0d9488;--bina-mist: #f1f5f9;--bina-white: #ffffff;--bina-muted: #5b6b7f;--bina-danger: #dc2626;--bina-border: rgba(10, 37, 64, .12);--shadow: 0 1px 3px rgba(10, 37, 64, .08);--radius: 12px;--font: -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);background:var(--bina-mist);color:var(--bina-navy);line-height:1.5;-webkit-font-smoothing:antialiased}a{color:var(--bina-teal-deep);text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100%;display:grid;grid-template-columns:240px 1fr}.sidebar{background:var(--bina-navy);color:var(--bina-mist);padding:1.25rem 1rem;display:flex;flex-direction:column;gap:1rem}.mobile-menu-toggle,.mobile-menu-close,.mobile-menu-backdrop{display:none}@media(max-width:860px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:min(300px,86vw);transform:translate(-100%);transition:transform .2s ease;box-shadow:8px 0 24px #00000038}.sidebar.mobile-open{transform:translate(0)}.mobile-menu-toggle,.mobile-menu-close{display:inline-grid;place-items:center;border:0;border-radius:8px}.mobile-menu-toggle{width:40px;height:40px;padding:5px;background:#fff;color:var(--bina-navy)}.mobile-menu-toggle img{width:30px;height:30px;display:block}.mobile-menu-toggle:focus-visible,.mobile-menu-close:focus-visible{outline:3px solid var(--bina-teal);outline-offset:2px}.mobile-menu-close{position:absolute;top:.75rem;right:.75rem;width:36px;height:36px;background:#ffffff1f;color:#fff;font-size:1.6rem;z-index:1}.mobile-menu-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:25;border:0;padding:0;background:#0a25408c}.topbar{justify-content:flex-start}.topbar .chip{margin-left:auto}}.brand{display:flex;align-items:center;gap:.75rem;padding:.25rem .5rem 1rem;border-bottom:1px solid rgba(241,245,249,.12)}.brand img{width:36px;height:36px}.brand h1{font-size:1rem;margin:0;font-weight:650;letter-spacing:.02em}.nav{display:flex;flex-direction:column;gap:.25rem;flex:1}.nav a{color:var(--bina-mist);padding:.65rem .75rem;border-radius:10px;opacity:.9}.nav a.active,.nav a:hover{background:#2dd4bf26;color:var(--bina-teal);opacity:1}.main{display:flex;flex-direction:column;min-width:0;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.25rem;background:var(--bina-white);border-bottom:1px solid var(--bina-border);position:sticky;top:0;z-index:10}.content{padding:1.25rem;flex:1}.card{background:var(--bina-white);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;border:1px solid var(--bina-border)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:10px;padding:.65rem 1rem;font-weight:600;transition:background .15s ease,transform .05s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--bina-navy);color:var(--bina-teal)}.btn-primary:hover:not(:disabled){background:#0f3057}.btn-secondary{background:var(--bina-mist);color:var(--bina-navy);border:1px solid var(--bina-border)}.btn-danger{background:#fee2e2;color:var(--bina-danger)}.btn-teal{background:var(--bina-teal);color:var(--bina-navy)}.btn-teal:hover:not(:disabled){background:var(--bina-teal-deep);color:#fff}.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}.field label{font-size:.85rem;font-weight:600;color:var(--bina-muted)}.field input,.field textarea,.field select{border:1px solid var(--bina-border);border-radius:10px;padding:.7rem .8rem;background:#fff;color:var(--bina-navy)}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--bina-teal-deep);outline-offset:1px}.error{color:var(--bina-danger);font-size:.9rem;margin:.5rem 0}.banner{padding:.65rem 1rem;background:#fef3c7;color:#92400e;border-bottom:1px solid #fcd34d;text-align:center;font-weight:600}.banner.offline{background:#0a2540;color:var(--bina-teal)}.chip{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.2rem .6rem;font-size:.75rem;font-weight:650;background:var(--bina-mist);color:var(--bina-navy)}.chip.online{background:#2dd4bf2e;color:var(--bina-teal-deep)}.chip.offline{background:#e2e8f0;color:var(--bina-muted)}.grid-2{display:grid;grid-template-columns:280px 1fr;gap:1rem;min-height:60vh}@media(max-width:860px){.grid-2{grid-template-columns:1fr}}.list{display:flex;flex-direction:column;gap:.5rem}.list-item{padding:.75rem;border-radius:10px;border:1px solid var(--bina-border);background:#fff;cursor:pointer;text-align:left;width:100%}.list-item.active{border-color:var(--bina-teal-deep);box-shadow:0 0 0 1px var(--bina-teal)}.messages{display:flex;flex-direction:column;gap:.75rem;max-height:55vh;overflow:auto;padding:.5rem}.bubble{max-width:80%;padding:.75rem .9rem;border-radius:14px;white-space:pre-wrap;word-break:break-word}.bubble.user{align-self:flex-end;background:var(--bina-navy);color:var(--bina-mist)}.bubble.agent{align-self:flex-start;background:#fff;border:1px solid var(--bina-border)}.bubble.pending{opacity:.75;font-style:italic}.composer{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.composer-row{display:flex;gap:.5rem;align-items:flex-end}.composer textarea{flex:1;min-height:52px;resize:vertical;border-radius:12px;border:1px solid var(--bina-border);padding:.7rem .8rem}.progress{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--bina-teal),var(--bina-teal-deep));transition:width .25s ease}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--bina-border);font-size:.92rem}.auth-page{min-height:100%;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(circle at top,#0f3057,var(--bina-navy))}.auth-card{width:min(420px,100%);background:#fff;border-radius:16px;padding:2rem;box-shadow:0 20px 50px #00000040}.auth-card .logo{display:flex;justify-content:center;margin-bottom:1rem}.auth-card .logo img{width:72px;height:72px}.auth-card h2{margin:0 0 .25rem;text-align:center}.auth-card p.sub{margin:0 0 1.25rem;text-align:center;color:var(--bina-muted)}.muted{color:var(--bina-muted);font-size:.9rem}.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.stack{display:flex;flex-direction:column;gap:.75rem}.toast{position:fixed;bottom:1rem;right:1rem;background:var(--bina-navy);color:var(--bina-teal);padding:.85rem 1rem;border-radius:12px;box-shadow:var(--shadow);z-index:50;display:flex;gap:.75rem;align-items:center}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.content:has(.chat-workspace){padding:16px;min-height:0;overflow:hidden}.chat-workspace{--chat-navy:#0a2945;--chat-teal:#21cbb9;--chat-deep:#0b978a;--chat-border:#d7e1e8;height:calc(100dvh - 97px);min-height:580px;display:grid;grid-template-columns:318px minmax(0,1fr);gap:14px;color:#0b2a43}.thread-panel,.chat-panel{min-width:0;min-height:0;overflow:hidden;background:#fff;border:1px solid var(--chat-border);border-radius:14px;box-shadow:0 1px 2px #17324d0b}.thread-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr)}.thread-panel-head{padding:20px 17px 11px}.thread-title-row{display:flex;align-items:center;justify-content:space-between}.thread-title-row h2{margin:0;font-size:16px}.thread-title-row span{padding:5px 8px;border-radius:99px;background:#e4f8f5;color:#078578;font-size:10px}.thread-search{height:40px;margin-top:15px;padding:0 12px;display:flex;align-items:center;gap:9px;border:1px solid #d3dee6;border-radius:9px;color:#7e93a5}.thread-search:focus-within{border-color:var(--chat-deep);box-shadow:0 0 0 3px #0b978a1a}.thread-search input{width:100%;border:0;outline:0;background:transparent;color:#304f66}.new-chat-row{padding:0 17px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.new-chat-row select,.new-chat-row button{height:38px;min-width:0;border:1px solid #d3dee6;border-radius:9px;background:#fff;padding:0 12px;color:#375268}.new-chat-row button{border-color:var(--chat-teal);background:var(--chat-teal);color:#062f3f;font-weight:750}.new-chat-row button:disabled{opacity:.5;cursor:not-allowed}.thread-list{min-height:0;padding:0 8px 12px;overflow:auto}.thread-item{width:100%;padding:12px 10px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;border:0;border-radius:11px;background:transparent;color:inherit;text-align:left}.thread-item:hover{background:#f0f7f7}.thread-item.active{background:#e6f7f5}.thread-item time{align-self:start;color:#69879b;font-size:9px}.thread-copy{min-width:0}.thread-copy strong{display:block;margin-bottom:5px;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.thread-copy small{display:block;overflow:hidden;color:#57738a;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.thread-copy .thread-agent{margin-bottom:2px;color:#35566d;font-size:10px;font-weight:650}.thread-copy .thread-preview{color:#6d8394}.chat-avatar{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#d8f6f1;color:#08766d;font-size:10px;font-weight:800}.thread-item:not(.active) .chat-avatar{background:#e8eef2;color:#234c68}.chat-panel{position:relative;display:grid;grid-template-rows:69px minmax(0,1fr) auto}.chat-panel-head{padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--chat-border)}.chat-identity{min-width:0;display:flex;align-items:center;gap:12px}.chat-identity h2{margin:0 0 4px;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.chat-identity small{color:#718797;font-size:10px}.chat-identity small.available{color:#07877c}.agent-state{width:9px;height:9px;border-radius:50%;background:#a1aeb8;box-shadow:0 0 0 4px #edf1f3}.agent-state.available{background:#20b76a;box-shadow:0 0 0 4px #def6e9}.chat-empty{grid-row:1/-1;display:grid;place-content:center;gap:5px;text-align:center;color:#6b8092}.chat-empty strong{color:#0b2a43}.chat-conversation{min-height:0;overflow:auto;padding:22px 34px 30px;background:#f5f8fa;overscroll-behavior:contain}.chat-day{width:max-content;margin:0 auto 16px;padding:5px 12px;border-radius:99px;background:#e7eef3;color:#61798b;font-size:9px}.chat-messages{max-width:860px;margin:0 auto;display:grid;gap:14px}.chat-message{max-width:78%;display:flex;align-items:flex-start;gap:10px}.chat-message.mine{max-width:70%;justify-self:end;justify-content:flex-end}.message-avatar{width:32px;height:32px;flex:0 0 auto;margin-top:1px;display:grid;place-items:center;border-radius:9px;background:#d8f2ee;color:#08766d;font-size:9px;font-weight:800}.message-body{min-width:0}.message-sender{display:block;margin:0 0 5px;color:#385d73;font-size:10px;font-weight:700}.message-bubble{position:relative;padding:12px 14px 9px;border:1px solid #d6e0e7;border-radius:12px 12px 12px 4px;background:#fff;box-shadow:0 1px 1px #0b29450a;font-size:13px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}.chat-message.mine .message-bubble{border-color:#b6e8e1;border-radius:12px 12px 4px;background:#d9f5f1}.message-bubble.pending{color:#587183}.message-meta{min-height:11px;margin-top:6px;color:#7790a2;font-size:8px;letter-spacing:.01em;text-align:right}.typing-dots{display:inline-flex;gap:4px}.typing-dots i{width:5px;height:5px;border-radius:50%;background:#6e8798;animation:refined-typing 1.1s infinite}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}.chat-composer{position:relative;margin:0;padding:10px 16px 13px;border-top:1px solid var(--chat-border);background:#fff}.composer-hint{margin:0 0 7px 48px;color:#7890a3;font-size:10px}.compose-row{position:relative;display:grid;grid-template-columns:39px minmax(0,1fr) 43px;gap:9px}.compose-row textarea{width:100%;height:42px;min-height:42px;max-height:120px;resize:none;padding:11px 14px;border:1px solid #cfdbe4;border-radius:10px;outline:0;color:#0b2a43}.compose-row textarea:focus{border-color:var(--chat-deep);box-shadow:0 0 0 3px #0b978a1a}.chat-attach,.chat-mic,.chat-send{width:39px;height:42px;display:grid;place-items:center;border:0}.chat-attach{border-radius:10px;background:#eef3f6;color:#57768c;font-size:24px;font-weight:300}.chat-mic,.chat-send{width:42px;border-radius:50%;background:var(--chat-navy);color:#fff;box-shadow:0 3px 8px #09284329}.chat-mic span{font-size:18px;line-height:1;filter:grayscale(1) brightness(4)}.chat-send{background:var(--chat-teal);color:#07384b;font-size:18px}.attachment-tools{margin-bottom:8px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px}.attachment-tools input,.attachment-tools button{min-width:0;padding:7px 9px;border:1px solid #cfdbe4;border-radius:8px;background:#fff;color:#375268}.attachment-ready{width:max-content;max-width:100%;margin-bottom:7px;padding:5px 9px;border-radius:99px;background:#e4f8f5;color:#08766d;font-size:10px}.attachment-ready button{margin-left:7px;border:0;background:transparent;color:#b43847;font-weight:700}.record-tray{position:absolute;z-index:5;top:-6px;right:-1px;bottom:-1px;left:-1px;min-width:0;height:64px;padding:0 12px;display:grid;grid-template-columns:auto minmax(70px,1fr) auto auto auto auto;align-items:center;gap:14px;border:1px solid #b7e4df;border-radius:13px;background:#ecfaf8;box-shadow:0 4px 14px #0d766d12}.rec-time{display:flex;align-items:center;gap:9px;color:#153c52;font-variant-numeric:tabular-nums;font-weight:800}.rec-dot{width:9px;height:9px;border-radius:50%;background:#ef5b67;box-shadow:0 0 0 4px #fbdfe2;animation:refined-pulse 1.4s infinite}.record-wave{min-width:0;height:30px;display:flex;align-items:center;gap:3px;overflow:hidden}.record-wave i{width:3px;flex:0 0 3px;border-radius:3px;background:#19aa9d;animation:refined-wave .8s ease-in-out infinite alternate}.record-wave.paused i{animation-play-state:paused;opacity:.55}.record-status{color:#447080;font-size:10px}.record-cancel{padding:10px;border:0;background:transparent;color:#d34e5b;font-size:12px;font-weight:700}.record-round,.record-send{width:39px;height:39px;display:grid;place-items:center;border:1px solid #b8dcd8;border-radius:50%;background:#fff;color:#177d75}.record-send{width:42px;height:42px;border:0;background:var(--chat-teal);color:#07384b;box-shadow:0 4px 10px #12a5962e}.chat-error{position:absolute;z-index:8;right:16px;bottom:104px;max-width:min(520px,calc(100% - 32px));padding:10px 13px;border-radius:9px;background:#8f1d2c;color:#fff;box-shadow:0 6px 20px #0000002b;font-size:12px}@keyframes refined-pulse{50%{box-shadow:0 0 0 7px #fbdfe240}}@keyframes refined-wave{to{transform:scaleY(.55)}}@keyframes refined-typing{30%{transform:translateY(-3px)}}@media(max-width:760px){.content:has(.chat-workspace){padding:0;overflow:hidden}.chat-workspace{height:calc(100dvh - 65px);min-height:0;grid-template-columns:1fr;grid-template-rows:124px minmax(0,1fr);gap:0}.thread-panel,.chat-panel{border-width:0 0 1px;border-radius:0;box-shadow:none}.thread-panel{grid-template-rows:44px 80px}.thread-panel-head{display:none}.new-chat-row{padding:6px 10px}.new-chat-row select,.new-chat-row button{height:32px;font-size:11px}.thread-list{padding:5px 10px 8px;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden}.thread-item{min-width:164px;height:64px;padding:7px 9px;grid-template-columns:31px minmax(0,1fr);gap:8px;border:1px solid #dce5eb}.thread-item.active{border-color:#c8eae5}.thread-item time{display:none}.thread-item .chat-avatar{width:31px;height:31px;border-radius:9px}.thread-copy strong{margin-bottom:3px;font-size:10px}.thread-copy small{font-size:8px}.chat-panel{grid-template-rows:58px minmax(0,1fr) auto}.chat-panel-head{padding:0 13px}.chat-panel-head .chat-avatar{width:34px;height:34px}.chat-identity h2{margin-bottom:2px;font-size:13px}.chat-identity small{font-size:9px}.chat-conversation{padding:12px 11px 14px}.chat-day{margin-bottom:10px;padding:4px 9px;font-size:8px}.chat-messages{gap:9px}.chat-message{max-width:89%;gap:7px}.chat-message.mine{max-width:82%}.message-avatar{width:26px;height:26px;flex-basis:26px;border-radius:8px;font-size:8px}.message-sender{margin-bottom:3px;font-size:8px}.message-bubble{padding:8px 10px 6px;border-radius:11px 11px 11px 4px;font-size:11px;line-height:1.35}.chat-message.mine .message-bubble{border-radius:11px 11px 4px}.message-meta{margin-top:4px;font-size:7px}.chat-composer{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}.composer-hint{margin:0 0 6px;text-align:center;font-size:8px}.compose-row{grid-template-columns:35px minmax(0,1fr) 39px;gap:7px}.compose-row textarea{height:39px;min-height:39px;padding:10px 11px;font-size:11px}.chat-attach{width:35px;height:39px}.chat-mic,.chat-send{width:39px;height:39px}.record-tray{top:-6px;right:-1px;bottom:-1px;left:-1px;height:59px;grid-template-columns:auto minmax(45px,1fr) auto auto auto;gap:7px;padding:0 7px}.record-status{display:none}.record-wave{gap:2px}.record-wave i{width:2px;flex-basis:2px}.record-cancel{padding:5px;font-size:10px}.record-round{width:34px;height:34px}.record-send{width:37px;height:37px}.attachment-tools{grid-template-columns:1fr auto}.attachment-tools input[type=file]{grid-column:1/-1;width:100%}}@media(prefers-reduced-motion:reduce){.typing-dots i,.rec-dot,.record-wave i{animation:none}}