*{box-sizing:border-box}body{margin:0;color:#172c38;background:#f4f7f8;font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #d7e1e5;border-radius:7px;background:#fff;padding:7px 12px;color:inherit}button:hover{background:#eef6f6}button:disabled{opacity:.5;cursor:default}input,textarea,select{border:1px solid #cbd8dd;border-radius:7px;padding:8px;background:#fff;color:inherit}header{height:60px;padding:12px 20px;display:flex;align-items:center;gap:16px;background:#fff;border-bottom:1px solid #dfe8eb}header strong{margin-right:auto}.widget{height:100vh;height:100dvh;display:flex;flex-direction:column;background:#fff}.widget header{height:52px}.chat{min-height:0;display:flex;flex:1;flex-direction:column;background:#f4f7f8}.chat-status{font-size:12px;color:#60757f;padding:8px 14px;display:flex;align-items:center;gap:6px}.chat-status small{margin-left:auto}.dot{display:inline-block;width:7px;height:7px;background:#caa150;border-radius:100%}.dot.live{background:#168979}.message-list{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.bubble{max-width:min(80%,580px);background:#fff;border:1px solid #e1e9ec;border-radius:12px;padding:10px 12px;overflow-wrap:anywhere}.bubble.mine{align-self:flex-end;background:#e1f2ed;border-color:#c9e5db}.bubble small{font-size:11px;color:#6a7d83}.bubble p{margin:6px 0;white-space:pre-wrap}.bubble img{width:180px;max-width:100%;max-height:200px;object-fit:contain;display:block}.bubble video{width:280px;max-width:100%;max-height:350px}.media{padding:0;overflow:hidden}.media span{display:block;padding:5px;font-size:12px}.compose{padding:12px;border-top:1px solid #e0e8eb;background:#fff}.compose textarea{width:100%;resize:vertical;min-height:58px;max-height:150px}.compose-actions{display:flex;gap:10px;align-items:center;margin-top:6px}.compose-actions small{font-size:10px;color:#71818c;flex:1}.compose-actions button,.login button{background:#176c61;color:#fff;border-color:#176c61}.file-button{font-size:25px;cursor:pointer}.file-button input{display:none}.error{color:#9b3b26;background:#fff0e9;padding:8px 16px;font-size:12px;margin:0}.empty{margin:auto;color:#7c8d96;padding:30px;text-align:center}.older{align-self:center}.translation{color:#226b9b;border-top:1px dashed #c5d5de;padding-top:8px}.text-button{font-size:11px;padding:2px 6px}.translation-controls{padding:6px 14px;display:flex;gap:15px;background:#fff}.translation-controls input{width:50px}.translation-controls input,.translation-controls select{font-size:12px;padding:3px}.login{max-width:390px;margin:10vh auto;padding:30px;border:1px solid #dbe5e7;background:#fff;border-radius:16px}.brand{font-size:20px;font-weight:800;letter-spacing:2px}.brand span{color:#168475;font-size:12px}.login h1{font-size:26px;margin-top:30px}.login p{color:#70858d}.login form,.login label{display:grid;gap:10px}.login form{gap:18px}.desk{height:100vh;display:flex;flex-direction:column}.desk-body{position:relative;display:flex;flex:1;min-height:0}.desk aside{width:300px;flex-shrink:0;overflow:auto;background:#fff;border-right:1px solid #dce6e9}.filters{display:flex;padding:12px;gap:6px}.filters input{width:190px}.conversation{width:100%;text-align:left;display:grid;gap:6px;padding:16px;border:0;border-bottom:1px solid #e9eff1;border-radius:0}.conversation small{color:#799098}.conversation.selected{background:#e7f3ef}.conversation em{float:right;background:#187b6d;color:#fff;border-radius:20px;padding:0 6px;font-size:11px}.desk-chat{min-width:0;display:flex;flex:1;flex-direction:column}.customer-bar{flex-wrap:wrap;display:flex;padding:12px 18px;align-items:center;gap:8px;background:#fff}.customer-bar strong{margin-right:auto}.accounts{padding:30px;overflow:auto}.accounts form{display:flex;gap:10px;flex-wrap:wrap}table{width:100%;border-collapse:collapse;margin:25px 0}td,th{padding:12px;border-bottom:1px solid #dbe4e9;text-align:left}td input[type=number]{width:80px}.desk>header{height:auto;min-height:60px;flex-wrap:wrap;gap:10px}.diagnostics{padding:24px;overflow:auto}.diagnostics-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.diagnostics-actions h2{margin-right:auto}.diagnostics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.diagnostics article{background:#fff;border:1px solid #dbe5e7;border-radius:10px;padding:16px}.diagnostics article h3{margin-top:0}.diagnostics p{color:#60757f}.diagnostics dl{display:grid;grid-template-columns:1fr auto;gap:8px 16px}.diagnostics dd{margin:0;text-align:right}.queue-notice,.customer-details{margin:0;padding:7px 12px;font-size:12px;color:#526b74;background:#f2f7f8}.customer-context{width:clamp(300px,28vw,420px);flex-shrink:0;padding:18px;overflow:auto;background:#fff;border-left:1px solid #dce6e9}.context-heading{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.context-heading strong{margin-right:auto}.context-hint{color:#60757f;font-size:12px}.customer-context dl{margin:16px 0;display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,1.3fr)}.customer-context dt,.customer-context dd{margin:0;padding:10px 4px;border-bottom:1px solid #e8eef0;overflow-wrap:anywhere}.customer-context dt{color:#60757f}@media(max-width:1150px){.customer-context{position:absolute;z-index:5;top:0;right:0;bottom:0;width:min(400px,85vw);box-shadow:-8px 0 24px #172c3820}.desk aside{width:250px}}.receipt{display:block;text-align:right;opacity:.8}.filters select{max-width:100%}.notice{color:#205c50;background:#e1f2ed;padding:10px 16px;margin:0}.unread-summary{white-space:nowrap;color:#176c61}.password-settings{padding:28px;max-width:600px;overflow:auto}.password-settings form,.password-settings label{display:grid;gap:10px}.password-settings form{gap:18px}.widget header{gap:8px;padding:8px 12px}.widget header select{max-width:110px;padding:5px;font-size:12px}@media(max-width:420px){.chat-status{flex-wrap:wrap}.chat-status small{margin-left:13px}}@media(max-width:700px){.desk aside{width:220px}.filters input{width:110px}.chat-status small{font-size:10px}.bubble{max-width:90%}}
