/* =============================================================
   SupportHub — Chat widget (живой виджет + витрина пресетов)
   Все цвета берутся из --w-* переменных пресета (mockData).
   ============================================================= */

.widget {
  --w-bg:#fff; --w-surface:#f4f5f8; --w-text:#14161f; --w-muted:#6b7280;
  --w-stroke:rgba(12,14,22,0.1); --w-accent:#5277E2; --w-accent-text:#fff;
  --w-head-bg:#5277E2; --w-head-text:#fff; --w-radius:16px; --w-bubble-radius:14px;
  --w-font:var(--font-sans); --w-launcher:#5277E2; --w-head-grad:none; --w-blur:0px;
  --w-shadow:0 24px 60px rgba(20,22,31,0.18);

  width: 100%;
  max-width: 384px;
  height: 560px;
  display: flex;
  flex-direction: column;
  background: var(--w-bg);
  border: 1px solid var(--w-stroke);
  border-radius: var(--w-radius);
  box-shadow: var(--w-shadow);
  font-family: var(--w-font);
  color: var(--w-text);
  overflow: hidden;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease), border-radius 0.5s var(--ease);
  position: relative;
  isolation: isolate;
}
.widget[data-glass="1"] { -webkit-backdrop-filter: blur(var(--w-blur)); backdrop-filter: blur(var(--w-blur)); }
.widget[data-glass="1"]::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(140deg, rgba(123,151,238,0.25), rgba(255,255,255,0.05));
}

/* header */
.widget__head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 16px;
  background: var(--w-head-bg);
  background-image: var(--w-head-grad);
  color: var(--w-head-text);
  border-bottom: 1px solid var(--w-stroke);
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.widget__avatar-wrap { position: relative; flex: none; }
.widget__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,0.22);
  font-weight: 600; font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.widget[data-flat="1"] .widget__avatar { background: var(--w-accent); color: var(--w-accent-text); }
.widget__avatar--emoji { background: rgba(255,255,255,0.16); font-size: 21px; }
.widget__avatar-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #34D27B; border: 2.5px solid var(--w-head-bg);
}
.widget[data-glass="1"] .widget__avatar-dot { border-color: rgba(255,255,255,0.6); }
.widget__head-meta { min-width: 0; flex: 1; }
.widget__title { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget__status { font-size: 12px; opacity: 0.82; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget__head-actions { display: flex; gap: 7px; }
.widget__head-btn {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  color: var(--w-head-text);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.16s var(--ease);
}
.widget__head-btn:hover { background: rgba(255,255,255,0.24); }

/* body / messages */
.widget__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 14px 8px;
  background: var(--w-bg);
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: var(--w-stroke) transparent;
}
.widget__body::-webkit-scrollbar { width: 6px; }
.widget__body::-webkit-scrollbar-thumb { background: var(--w-stroke); border-radius: 3px; }

.msg { display: flex; gap: 8px; max-width: 84%; animation: msg-in 0.32s var(--ease-out) both; }
@keyframes msg-in { from { opacity:0; transform: translateY(8px); } }
.msg--bot { align-self: flex-start; }
.msg--user { align-self: flex-end; }
.msg__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg--user .msg__col { align-items: flex-end; }
.msg__ava {
  flex: none; width: 26px; height: 26px; border-radius: 50%; align-self: flex-end;
  display: grid; place-items: center; font-size: 14px;
  background: var(--w-surface); border: 1px solid var(--w-stroke);
}
.msg__time { font-size: 10.5px; color: var(--w-muted); padding: 0 4px; }
.msg__bubble {
  padding: 10px 13px;
  border-radius: var(--w-bubble-radius);
  font-size: 14.5px; line-height: 1.5;
  letter-spacing: -0.005em;
  word-break: break-word;
}
.msg--bot .msg__bubble {
  background: var(--w-surface); color: var(--w-text);
  border: 1px solid var(--w-stroke);
  border-bottom-left-radius: 5px;
}
.msg--user .msg__bubble {
  background: var(--w-accent); color: var(--w-accent-text);
  border-bottom-right-radius: 5px;
}

/* bubble-style variants (data-bubble на .widget) */
.widget[data-bubble="rounded"] .msg__bubble { border-radius: var(--w-bubble-radius) !important; }
.widget[data-bubble="minimal"] .msg--bot .msg__bubble { background: transparent; border-color: transparent; padding-left: 2px; }
.widget[data-bubble="minimal"] .msg__bubble { border-radius: 6px; }
.widget[data-bubble="minimal"] .msg--user .msg__bubble { border-radius: 10px; }

/* density compact */
.widget[data-density="compact"] .widget__body { gap: 6px; padding: 12px 12px 6px; }
.widget[data-density="compact"] .msg__bubble { padding: 8px 11px; font-size: 13.5px; }
.widget[data-density="compact"] .widget__head { padding-top: 12px; padding-bottom: 12px; }

/* pre-chat contact picker */
.widget__prechat {
  background: var(--w-surface); border: 1px solid var(--w-stroke);
  border-radius: var(--w-bubble-radius); padding: 12px; margin-bottom: 4px;
  animation: msg-in 0.32s var(--ease-out) both;
}
.widget__prechat-title { font-size: 12.5px; color: var(--w-muted); margin-bottom: 9px; }
.widget__prechat-row { display: flex; flex-wrap: wrap; gap: 7px; }
.prechat-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px;
  border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500;
  background: var(--w-bg); border: 1px solid var(--w-stroke); color: var(--w-text);
}
.prechat-chip--here { color: var(--w-accent); border-color: var(--w-accent); }

/* tool-call card */
.toolcard {
  align-self: flex-start; max-width: 84%;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--w-surface);
  border: 1px solid var(--w-stroke);
  animation: msg-in 0.32s var(--ease-out) both;
}
.toolcard__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.toolcard__label { color: var(--w-text); opacity: 0.85; }
.toolcard__status { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.toolcard[data-status="running"] { --tc:#5277E2; }
.toolcard[data-status="ok"] { --tc:#3FB37F; }
.toolcard[data-status="fail"] { --tc:#E5664E; }
.toolcard .toolcard__dot { background: var(--tc); }
.toolcard[data-status="running"] .toolcard__dot { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.toolcard__status { color: var(--tc); }

/* source badge (база знаний) */
.srcbadge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-family: var(--font-mono);
  color: var(--w-muted);
  padding: 5px 10px; border-radius: 8px;
  background: var(--w-surface); border: 1px solid var(--w-stroke);
  animation: msg-in 0.32s var(--ease-out) both;
}
.srcbadge svg { width: 13px; height: 13px; opacity: 0.7; }

/* notice plate (escalation / hallucination) */
.notice {
  align-self: flex-start; max-width: 88%;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 10px;
  animation: msg-in 0.32s var(--ease-out) both;
}
.notice--warn  { background: rgba(224,162,60,0.14); color: #9a6c1a; border: 1px solid rgba(224,162,60,0.3); }
.notice--human { background: rgba(82,119,226,0.14); color: var(--w-accent); border: 1px solid rgba(82,119,226,0.3); }
.notice__dot { display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* typing */
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px;
  background: var(--w-surface); border: 1px solid var(--w-stroke);
  border-radius: var(--w-bubble-radius); border-bottom-left-radius: 5px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--w-muted); opacity: 0.5;
  animation: typing 1.2s infinite; }
.typing span:nth-child(2){ animation-delay: 0.15s; }
.typing span:nth-child(3){ animation-delay: 0.3s; }
@keyframes typing { 0%,60%,100%{ transform: translateY(0); opacity:0.4; } 30%{ transform: translateY(-4px); opacity:1; } }

/* quick replies */
.widget__quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 14px 10px; background: var(--w-bg); }
.widget__quick button {
  font-family: var(--w-font);
  font-size: 12.5px; color: var(--w-accent);
  background: transparent;
  border: 1px solid var(--w-stroke);
  padding: 7px 12px; border-radius: var(--r-pill);
  cursor: pointer; transition: background 0.18s, border-color 0.18s; white-space: nowrap;
}
.widget__quick button:hover { background: var(--w-surface); border-color: var(--w-accent); }

/* input */
.widget__input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--w-stroke);
  background: var(--w-bg);
}
.widget__input input {
  flex: 1; min-width: 0;
  background: var(--w-surface);
  border: 1px solid var(--w-stroke);
  border-radius: var(--r-pill);
  padding: 11px 15px; font-size: 14px;
  color: var(--w-text); outline: none;
  transition: border-color 0.18s;
}
.widget__input input::placeholder { color: var(--w-muted); }
.widget__input input:focus { border-color: var(--w-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent) 22%, transparent); }
.widget__attach {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--w-muted);
  border: none; cursor: pointer; transition: color 0.15s, background 0.15s;
}
.widget__attach:hover { color: var(--w-accent); background: var(--w-surface); }
.widget__send {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--w-launcher, var(--w-accent)); color: var(--w-accent-text);
  border: none; cursor: pointer; transition: transform 0.15s, filter 0.15s;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--w-accent) 38%, transparent);
}
.widget__send:hover { filter: brightness(1.08); transform: scale(1.05); }
.widget__send:active { transform: scale(0.95); }
.widget__send:disabled { opacity: 0.5; cursor: default; }
.widget__mic {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--w-surface); color: var(--w-muted);
  border: 1px solid var(--w-stroke); cursor: pointer;
  transition: transform 0.15s, color 0.15s, background 0.15s;
}
.widget__mic:hover { color: var(--w-accent); border-color: var(--w-accent); }
.widget__mic.is-live { background: var(--w-accent); color: var(--w-accent-text); border-color: transparent; animation: mic-live 1.1s var(--ease) infinite; }
@keyframes mic-live { 0%,100% { box-shadow: 0 0 0 0 rgba(82,119,226,0.45); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* launcher (mobile / collapsed) */
.widget-launcher {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: var(--r-pill);
  background: var(--w-launcher, var(--brand));
  color: #fff; border: none; cursor: pointer;
  font-weight: 540; font-size: 15px;
  box-shadow: var(--shadow-brand);
}
.widget-launcher__icon { width: 26px; height: 26px; display: grid; place-items: center; }

/* "powered by" footer line */
.widget__pb {
  text-align: center; font-size: 10.5px; color: var(--w-muted);
  font-family: var(--font-mono); letter-spacing: 0.04em;
  padding: 0 0 9px; background: var(--w-bg); opacity: 0.7;
}