#crm-client-chat { display:inline-flex; align-items:center; gap:8px; margin-left:auto; white-space:nowrap; }
#crm-client-chat svg { width:18px; height:18px; }
html body #crm-client-chat { color:var(--text-main,#edf2f0); font:inherit; padding:10px 12px; border:1px solid var(--border-color); border-radius:6px!important; background:rgba(128,150,140,.1); min-height:40px; cursor:pointer; }
#crm-customer-chat { --cc-bg:rgba(26,30,31,.94); --cc-panel:rgba(38,43,44,.75); --cc-line:rgba(183,202,199,.17); --cc-text:#edf2f0; --cc-muted:#a8b5b1; --cc-accent:#b9dfd1; position:fixed; z-index:10065; right:20px; bottom:20px; width:min(940px,calc(100vw - 40px)); height:min(660px,calc(var(--cc-viewport,100dvh) - 112px)); max-height:calc(var(--cc-viewport,100dvh) - 16px); display:flex; flex-direction:column; min-width:0; color:var(--cc-text); background:var(--cc-bg); border:1px solid var(--cc-line); border-radius:8px; box-shadow:0 16px 60px #0005; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); font-size:14px; line-height:1.4; letter-spacing:0; overflow:hidden; }
html[data-theme="light"] #crm-customer-chat, body.day #crm-customer-chat { --cc-bg:rgba(249,252,251,.96); --cc-panel:rgba(226,235,231,.8); --cc-line:rgba(40,66,58,.18); --cc-text:#1e302b; --cc-muted:#566f66; --cc-accent:#256953; }
#crm-customer-chat * { box-sizing:border-box; min-width:0; letter-spacing:0; }
#crm-customer-chat header { height:auto; position:static; top:auto; z-index:auto; box-shadow:none; }
#crm-customer-chat :is(input,select,textarea,button) { border-radius:6px!important; }
#crm-customer-chat #cc-sheet { z-index:3; }
#crm-customer-chat #cc-info { z-index:2; }
#crm-customer-chat .cc-search input { border:0!important; background:none!important; }
#crm-customer-chat [hidden] { display:none!important; }
#crm-customer-chat button { color:inherit; font:inherit; background:none; border:0; cursor:pointer; border-radius:6px; box-shadow:none; margin:0; text-align:left; }
#crm-customer-chat button:disabled { opacity:.5; cursor:wait; }
#crm-customer-chat button:hover { background:var(--cc-panel); }
#crm-customer-chat :is(button,input,textarea,select):focus-visible { outline:2px solid var(--cc-accent); outline-offset:-2px; }
#crm-customer-chat :is(input,select,textarea) { width:100%; max-width:100%; padding:10px 12px; margin:0; border:1px solid var(--cc-line); border-radius:6px; background:var(--cc-panel); color:var(--cc-text); font:inherit; box-shadow:none; }
#crm-customer-chat input::placeholder, #crm-customer-chat textarea::placeholder { color:var(--cc-muted); opacity:1; }
#crm-customer-chat select option { color:#172922; background:#f3f7f5; }
#crm-customer-chat svg { flex-shrink:0; width:18px; height:18px; }
#crm-customer-chat .cc-icon { width:40px; height:40px; flex:0 0 40px; display:inline-flex; align-items:center; justify-content:center; padding:0; }
#crm-customer-chat .cc-primary { background:var(--cc-accent); color:#132e23; }
html[data-theme="light"] #crm-customer-chat .cc-primary, body.day #crm-customer-chat .cc-primary { color:#fff; }
.cc-window-head { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:4px 8px 4px 14px; border-bottom:1px solid var(--cc-line); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
#crm-customer-chat .cc-window-title { display:flex; align-items:center; gap:10px; padding:6px 0; }
.cc-window-title b { font-size:14px; font-weight:600; }
.cc-window-actions { display:flex; gap:2px; }
#cc-status { flex-shrink:0; padding:7px 14px; font-size:12px; background:var(--cc-panel); color:var(--cc-muted); overflow-wrap:anywhere; max-height:64px; overflow:auto; }
#cc-status.cc-error, .cc-send-error { color:#fbb7a9; }
.cc-workspace { display:flex; flex:1; min-height:0; position:relative; overflow:hidden; }
.cc-sidebar { flex:0 0 264px; border-right:1px solid var(--cc-line); display:flex; flex-direction:column; min-height:0; }
.cc-list-head { padding:8px 10px; display:flex; align-items:center; }
.cc-list-head b { margin-right:auto; padding-left:4px; }
.cc-search { display:flex; gap:8px; align-items:center; margin:0 12px 10px; padding:0 10px; background:var(--cc-panel); border:1px solid var(--cc-line); border-radius:6px; color:var(--cc-muted); }
#crm-customer-chat .cc-search input { min-height:42px; padding:8px 0; border:0; background:none; }
#cc-list { overflow:auto; min-height:0; flex:1; padding:0 6px 8px; overscroll-behavior:contain; }
#crm-customer-chat .cc-contact { width:100%; display:flex; align-items:center; gap:10px; padding:12px 8px; min-height:76px; }
#crm-customer-chat .cc-contact.is-active { background:var(--cc-panel); }
.cc-avatar { width:40px; height:40px; flex:0 0 40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#68887e40; color:var(--cc-text); font-weight:600; overflow:hidden; }
.cc-avatar img { width:100%; height:100%; object-fit:cover; }
.cc-contact-copy { display:flex; flex-direction:column; gap:3px; flex:1; overflow:hidden; }
.cc-contact-top { display:flex; align-items:baseline; gap:5px; }
.cc-contact-top b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; font-size:13px; }
.cc-contact-top time { font-size:10px; color:var(--cc-muted); flex-shrink:0; }
.cc-last { color:var(--cc-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-channel-label { font-size:10px; color:var(--cc-muted); }
.cc-unread { min-width:19px; height:19px; padding:1px 5px; border-radius:10px; background:var(--cc-accent); color:#133728; font-size:11px; font-weight:600; text-align:center; flex-shrink:0; }
.cc-thread { display:flex; flex:1; flex-direction:column; min-height:0; overflow:hidden; }
#cc-thread-head { flex-shrink:0; display:flex; align-items:center; gap:6px; min-height:67px; padding:9px 12px; border-bottom:1px solid var(--cc-line); }
#crm-customer-chat #cc-person { display:flex; gap:10px; align-items:center; padding:0; flex:1; }
#cc-person > span:last-child { display:flex; flex-direction:column; gap:3px; overflow:hidden; }
#cc-person b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cc-person small { color:var(--cc-muted); font-size:11px; }
#crm-customer-chat .cc-back { display:none; }
#cc-history { flex:1; min-height:0; padding:18px; overflow:auto; overscroll-behavior:contain; }
.cc-message { display:flex; margin:0 0 12px; }
.cc-message.cc-mine { justify-content:flex-end; }
.cc-bubble { max-width:min(88%,480px); background:var(--cc-panel); border-radius:8px; padding:10px 12px; overflow-wrap:anywhere; }
.cc-mine .cc-bubble { background:#628e7d35; }
.cc-message-text { white-space:pre-wrap; }
.cc-bubble footer { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin-top:7px; color:var(--cc-muted); font-size:10px; flex-wrap:wrap; }
.cc-source { margin-right:auto; }
.cc-source.tg { color:#7dc9ef; } .cc-source.wa { color:#77d5a8; }
html[data-theme="light"] .cc-source.tg { color:#186389; } html[data-theme="light"] .cc-source.wa { color:#176043; }
.cc-delivery { display:inline-flex; } #crm-customer-chat .cc-delivery svg { width:13px; height:13px; }
.cc-bubble :is(img.cc-photo,video) { display:block; width:auto; max-width:100%; max-height:250px; object-fit:contain; border-radius:6px; }
.cc-bubble audio { display:block; max-width:100%; width:260px; }
.cc-bubble .cc-round { border-radius:50%; width:180px; height:180px; object-fit:cover; }
.cc-bubble a { color:var(--cc-accent); }
.cc-bubble .cc-send-error { font-size:12px; margin-top:6px; }
#crm-customer-chat .cc-bubble button { padding:8px 0; text-decoration:underline; }
#cc-compose { flex-shrink:0; padding:9px 12px 12px; border-top:1px solid var(--cc-line); }
.cc-reply-channel { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--cc-muted); margin-bottom:7px; }
#crm-customer-chat .cc-reply-channel select { flex:1 1 0%; width:0; min-width:0; border:0; padding:4px 6px; height:30px; background:none; font-size:12px; }
.cc-write { display:flex; align-items:flex-end; gap:8px; }
#crm-customer-chat #cc-text { resize:none; line-height:20px; min-height:42px; max-height:120px; }
.cc-empty { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:28px 15px; color:var(--cc-muted); text-align:center; }
.cc-empty-thread { min-height:100%; } #crm-customer-chat .cc-empty-thread svg { width:32px; height:32px; }
.cc-empty p { margin:0; }
#crm-customer-chat .cc-more { display:block; text-align:center; color:var(--cc-accent); padding:10px; width:100%; font-size:12px; }
.cc-history-loading { padding:10px; text-align:center; font-size:12px; color:var(--cc-muted); }
#cc-info { position:absolute; right:0; top:0; bottom:0; width:300px; max-width:100%; background:var(--cc-bg); backdrop-filter:blur(24px); border-left:1px solid var(--cc-line); display:flex; flex-direction:column; box-shadow:-10px 0 30px #0002; }
#cc-info header, #cc-sheet header { padding:8px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--cc-line); min-height:54px; }
.cc-info-scroll { padding:18px; overflow:auto; }
.cc-info-scroll > .cc-avatar { width:56px; height:56px; }
#crm-customer-chat h3 { font-size:17px; line-height:1.3; margin:12px 0 16px; overflow-wrap:anywhere; }
#crm-customer-chat h4 { font-size:13px; margin:22px 0 8px; }
.cc-info-scroll dl { margin:0 0 14px; }
.cc-info-scroll dt { font-size:11px; color:var(--cc-muted); }
.cc-info-scroll dd { margin:3px 0 0; overflow-wrap:anywhere; }
.cc-note { white-space:pre-wrap; font-size:13px; }
#crm-customer-chat .cc-deal { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; width:100%; border-bottom:1px solid var(--cc-line); font-size:13px; }
#crm-customer-chat .cc-link-client { color:var(--cc-accent); display:flex; align-items:center; gap:6px; padding:6px 0; font-size:12px; }
#cc-sheet { position:absolute; inset:0; background:var(--cc-bg); backdrop-filter:blur(24px); display:flex; flex-direction:column; }
#cc-sheet h3 { margin:0; font-size:16px; }
#cc-sheet-content { padding:18px; overflow:auto; flex:1; }
#cc-sheet-content form { max-width:460px; margin:auto; }
#cc-sheet-content label { display:flex; flex-direction:column; gap:6px; margin:0 0 16px; font-size:13px; }
#crm-customer-chat .cc-action { min-height:42px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid var(--cc-line); margin:10px 0; }
.cc-connect-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 12px; }
.cc-connection { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--cc-line); }
.cc-connection > div { flex:1; display:flex; flex-direction:column; gap:3px; overflow-wrap:anywhere; }
.cc-provider { display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--cc-panel); border-radius:6px; }
.cc-provider.tg { color:#7dc9ef; } .cc-provider.wa { color:#77d5a8; }
.cc-connection small, .cc-muted { color:var(--cc-muted); font-size:12px; }
.cc-connection-state { font-size:11px; color:#edbd7d; text-align:right; max-width:110px; }
.cc-connection-state.ready { color:#77d5a8; }
.cc-form-status { font-size:13px; color:#e79982; }
#crm-customer-chat.cc-dragging { box-shadow:0 20px 65px #0008; border-color:var(--cc-accent); }
#crm-customer-chat.cc-maximized { inset:16px!important; width:calc(100vw - 32px); height:calc(var(--cc-viewport,100dvh) - 32px); }
#crm-customer-chat.cc-minimized { width:265px; height:52px; right:20px!important; bottom:20px!important; left:auto!important; top:auto!important; }
#crm-customer-chat.cc-minimized :is(.cc-workspace,#cc-status,.cc-expanded) { display:none; }
#crm-customer-chat.cc-minimized .cc-window-head { border:0; cursor:pointer; }
@media(max-width:800px) { .cc-sidebar { flex-basis:225px; } #cc-history { padding:12px; } }
@media(max-height:480px) {
  #crm-customer-chat:not(.cc-minimized) { top:8px!important; bottom:auto!important; height:calc(var(--cc-viewport,100dvh) - 16px); }
}
@media(max-width:620px) {
  #crm-customer-chat, #crm-customer-chat.cc-maximized { inset:auto!important; top:calc(var(--cc-offset,0px) + 8px)!important; left:8px!important; width:calc(100vw - 16px); height:calc(var(--cc-viewport,100dvh) - 16px); max-height:none; }
  #crm-customer-chat .cc-icon { width:40px; flex-basis:40px; height:44px; }
  .cc-window-head { padding:4px 6px 4px 12px; }
  .cc-window-title b { font-size:13px; }
  #crm-customer-chat .cc-window-title > svg, #crm-customer-chat [data-cc="maximize"] { display:none; }
  .cc-sidebar { flex-basis:100%; border:0; }
  .cc-thread { display:none; }
  .cc-has-chat .cc-thread { display:flex; } .cc-has-chat .cc-sidebar { display:none; }
  #crm-customer-chat .cc-back { display:inline-flex; }
  #cc-thread-head { padding:8px 6px; gap:4px; }
  #cc-person .cc-avatar { width:32px; height:32px; flex-basis:32px; }
  #cc-info { width:100%; }
  #cc-compose { padding:8px; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  #crm-customer-chat :is(input,select,textarea) { font-size:16px!important; }
  .cc-bubble { max-width:94%; }
  #crm-customer-chat.cc-minimized { left:auto!important; top:auto!important; right:10px!important; bottom:72px!important; height:52px; width:255px; }
}