/* ==================================================================
   Виджет связи в правом углу: кнопки MAX и чата + панель заявки.
   Оформление взято из общей темы: белая плашка, тонкая рамка,
   синий #2468C9, Commissioner, пилюли. Разметка — include/blocks/chat-widget.php,
   поведение — widget.js. Добавлено 14.09.2026 взамен виджета Битрикс24.
   ================================================================== */
.cw{position:fixed;right:55px;bottom:56px;z-index:10149;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.cw-dock{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--line,#E3E8EE);border-radius:999px;padding:6px;box-shadow:0 8px 24px rgba(27,36,48,.14)}
.cw-btn{position:relative;width:44px;height:44px;border:0;border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .18s ease}
.cw-btn:hover{background:var(--box,#F3F6FA)}
.cw-btn:focus-visible{outline:3px solid #2468C9;outline-offset:2px}
.cw-btn img{width:26px;height:26px;display:block}
.cw-sep{width:22px;height:1px;background:var(--line,#E3E8EE)}
.cw-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;background:#fff;color:#1B2430;border:1px solid var(--line,#E3E8EE);border-radius:10px;padding:8px 12px;font:500 14px/1.2 Commissioner,"Segoe UI",Arial,sans-serif;box-shadow:0 8px 24px rgba(27,36,48,.12);opacity:0;pointer-events:none;transition:opacity .2s ease}
.cw-btn:hover .cw-tip,.cw-btn:focus-visible .cw-tip{opacity:1}

.cw-panel{display:flex;flex-direction:column;width:360px;max-width:calc(100vw - 28px);max-height:calc(100vh - 200px);background:#fff;border:1px solid var(--line,#E3E8EE);border-radius:18px;box-shadow:0 18px 48px rgba(27,36,48,.16);overflow:hidden}
.cw-head{flex:none}
.cw-body{flex:1 1 auto;min-height:0;overflow-y:auto}
.cw-form{flex:none}
.cw-panel[hidden]{display:none}
.cw-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line,#E3E8EE)}
.cw-ava{width:38px;height:38px;border-radius:999px;background:#DDEAFB;color:#2468C9;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none}
.cw-who{flex:1 1 auto;min-width:0}
.cw-who b{display:block;font-size:15px;font-weight:500;line-height:1.25}
.cw-who span{display:block;font-size:12px;color:var(--muted,#6E7A88);line-height:1.3}
.cw-x{background:none;border:0;color:var(--muted,#6E7A88);font-size:20px;line-height:1;padding:6px;border-radius:8px;cursor:pointer}
.cw-x:hover{background:var(--box,#F3F6FA);color:#1B2430}
.cw-body{padding:16px}
.cw-bubble{background:var(--box,#F3F6FA);border-radius:14px 14px 14px 6px;padding:12px 14px;font-size:14px;line-height:1.5;color:var(--ink-2,#465060)}

.cw-list{display:flex;flex-direction:column;margin:14px -16px 0;border-top:1px solid var(--line,#E3E8EE)}
.cw-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border:0;border-bottom:1px solid var(--line,#E3E8EE);background:#fff;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.cw-row:hover{background:var(--box,#F3F6FA)}
.cw-row:focus-visible{outline:3px solid #2468C9;outline-offset:-3px}
.cw-row.is-on{background:#DDEAFB}
.cw-ico{width:34px;height:34px;border-radius:999px;background:var(--box,#F3F6FA);flex:none;display:flex;align-items:center;justify-content:center}
.cw-row.is-on .cw-ico{background:#fff}
.cw-row .cw-t{flex:1 1 auto;min-width:0}
.cw-row .cw-t b{display:block;font-size:14px;font-weight:500;line-height:1.3}
.cw-row .cw-t span{display:block;font-size:12px;color:var(--muted,#6E7A88);margin-top:1px}
.cw-chev{flex:none}

.cw-form{padding:16px}
.cw-form .field{margin:0 0 10px}
.cw-form .field label{display:block;font-size:12px;font-weight:500;color:var(--muted,#6E7A88);margin-bottom:5px}
.cw-form input[type=text],.cw-form input[type=tel]{width:100%;height:44px;min-height:44px;border:1px solid #C9D2DC;border-radius:12px;padding:0 14px;font:400 15px Commissioner,"Segoe UI",Arial,sans-serif;color:#1B2430;background:#fff}
.cw-form input:focus{outline:0;border-color:#2468C9;box-shadow:0 0 0 3px #DDEAFB}
.cw-agree{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.45;color:var(--muted,#6E7A88);margin:2px 0 12px}
.cw-agree input{width:auto;min-height:auto;margin:2px 0 0;flex:none}
.cw-form .btn{width:100%;min-height:44px}
.cw-form .form-msg{font-size:12px;margin:8px 0 0}
.cw-form .form-msg.is-error{color:#B4362D}
.cw-panel .form-ok{padding:24px 20px;text-align:center;font-size:14px;line-height:1.5;color:var(--ink-2,#465060)}

@media (max-width:768px){
  .cw{right:0;left:0;bottom:0;gap:0;align-items:stretch}
  .cw-dock{display:none}
  .cw-panel{width:auto;max-width:none;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;box-shadow:0 -12px 40px rgba(27,36,48,.16)}
  .cw-panel .cw-body,.cw-panel .cw-form{padding-left:20px;padding-right:20px}
  .cw-list{margin-left:-20px;margin-right:-20px}
  .cw-row{padding-left:20px;padding-right:20px}
  .sticky-cta .btn.btn-chat{flex:0 0 44px;min-width:44px;width:44px;padding:0;background:#DDEAFB;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center}
}
@media (min-width:769px){.sticky-cta .btn.btn-chat{display:none}}

/* два шага: сначала тема, потом поля — иначе панель выше экрана */
.cw-form{display:none}
.cw.is-picked .cw-form{display:block}
.cw.is-picked .cw-bubble{display:none}
.cw.is-picked .cw-list{margin-top:0;border-top:0}
.cw.is-picked .cw-row{display:none}
.cw.is-picked .cw-row.is-on{display:flex;background:#fff;border-bottom:1px solid var(--line,#E3E8EE)}
.cw.is-picked .cw-row.is-on .cw-ico{background:#DDEAFB}
.cw.is-picked .cw-row.is-on .cw-chev{transform:rotate(180deg)}
.cw-back{font-size:12px;color:var(--muted,#6E7A88)}
