/* ============================================================
   SMP Fund — chat-widget.css
   Floating live-chat widget: trigger button + panel (tabs,
   thread, composer). Loaded as its own file (per theme.json)
   so pages that don't mount the widget don't pay for it.
   Position: bottom-right by default; add .left to .chat-widget
   for bottom-left. RTL: swap is automatic via inset-inline-end.
   ============================================================ */

.chat-widget-trigger {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 140;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--grad); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; box-shadow: var(--glow), 0 14px 30px rgba(0,0,0,.4);
  transition: transform .2s;
}
.chat-widget-trigger:hover { transform: scale(1.06); }
.chat-widget-trigger .badge {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #ff5c5c; color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.chat-widget-panel {
  position: fixed; bottom: 98px; inset-inline-end: 24px; z-index: 140;
  width: 360px; max-width: calc(100vw - 32px); max-height: 70vh;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-widget.left .chat-widget-trigger,
.chat-widget.left .chat-widget-panel { inset-inline-end: auto; inset-inline-start: 24px; }

.chat-widget-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; background: #000000; border-bottom: 1px solid var(--color-border);
}
.chat-widget-header .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 15px; flex: none; }
.chat-widget-header .title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.chat-widget-header .status { font-size: 12px; color: var(--color-primary); display: flex; align-items: center; gap: 5px; }
.chat-widget-header .status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.chat-widget-header .close { margin-inline-start: auto; width: 30px; height: 30px; border-radius: 8px; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; }
.chat-widget-header .close:hover { background: var(--surface-2); color: var(--color-text); }

.chat-widget-tabs { display: flex; border-bottom: 1px solid var(--color-border); }
.chat-widget-tabs button { flex: 1; padding: 11px; font-weight: 700; font-size: 13px; color: var(--color-text-muted); border-bottom: 2px solid transparent; }
.chat-widget-tabs button.on { color: var(--color-primary); border-color: var(--color-primary); }

.chat-widget-live { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-widget-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-widget-bubble { max-width: 82%; display: flex; gap: 8px; }
.chat-widget-bubble .txt { background: var(--surface-2); border-radius: 13px; padding: 10px 13px; font-size: 13.5px; line-height: 1.55; }
.chat-widget-bubble.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-widget-bubble.user .txt { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.chat-widget-bubble .time { font-size: 10.5px; color: var(--color-text-muted); margin-top: 4px; display: block; }

.chat-widget-start { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.chat-widget-start p { font-size: 13px; color: var(--color-text-muted); margin: 0; }

.chat-widget-input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--color-border);
}
.chat-widget-input input { flex: 1; height: 42px; border-radius: 10px; }
.chat-widget-input button { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--grad); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }

.chat-widget-offline { padding: 22px 18px; text-align: center; }
.chat-widget-offline .icon { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 12px; }
.chat-widget-offline p { font-size: 13.5px; color: var(--color-text-muted); margin: 0 0 14px; }

@media (max-width: 480px) {
  .chat-widget-panel { width: calc(100vw - 24px); inset-inline-end: 12px; bottom: 88px; }
  .chat-widget-trigger { inset-inline-end: 16px; bottom: 16px; }
}

/* ---- React ContactWidget compatibility (apps/web/components/chat/ContactWidget.tsx) */
.chat-widget { position: fixed; bottom: 24px; z-index: 140; font-size: 14px; }
.chat-widget-right { inset-inline-end: 24px; }
.chat-widget-left { inset-inline-start: 24px; inset-inline-end: auto; }
.chat-widget-fab,
.chat-widget-trigger {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--grad); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; box-shadow: var(--glow), 0 14px 30px rgba(0,0,0,.4);
  transition: transform .2s;
}
.chat-widget-fab { position: static; }
.chat-widget-trigger { position: fixed; bottom: 24px; inset-inline-end: 24px; }
.chat-widget-fab:hover,
.chat-widget-trigger:hover { transform: scale(1.06); }
.chat-widget .chat-widget-panel {
  position: absolute; bottom: calc(100% + 14px); inset-inline-end: 0;
  width: 360px; max-width: calc(100vw - 32px); max-height: 70vh;
}
.chat-widget-left .chat-widget-panel { inset-inline-end: auto; inset-inline-start: 0; }
.chat-widget-close,
.chat-widget-header .close {
  margin-inline-start: auto; width: 30px; height: 30px; border-radius: 8px;
  border: none; background: none; color: var(--color-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
}
.chat-widget-close:hover,
.chat-widget-header .close:hover { background: var(--surface-2); color: var(--color-text); }
.chat-widget-tabs button.active,
.chat-widget-tabs button.on { color: var(--color-primary); border-color: var(--color-primary); background: transparent; border: none; border-bottom: 2px solid var(--color-primary); cursor: pointer; }
.chat-widget-tabs button { background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.chat-msg { margin-bottom: 8px; max-width: 82%; display: flex; }
.chat-msg p {
  margin: 0; padding: 10px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.55;
  background: var(--surface-2);
}
.chat-msg-customer { align-self: flex-end; margin-inline-start: auto; }
.chat-msg-customer p { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.chat-msg-admin p { background: var(--surface-2); }
.chat-widget-compose,
.chat-widget-input { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--color-border); }
.chat-widget-compose textarea,
.chat-widget-field input,
.chat-widget-field textarea {
  width: 100%; border: 1px solid var(--color-border); border-radius: 10px;
  padding: 8px 10px; font: inherit; box-sizing: border-box; background: var(--surface-2); color: var(--color-text);
}
.chat-widget-field { display: grid; gap: 4px; margin-bottom: 10px; font-size: 13px; }
.chat-widget-primary {
  width: 100%; margin-top: 8px; padding: 10px 12px; border: none; border-radius: 10px;
  background: var(--grad); color: var(--on-accent); font-weight: 700; cursor: pointer;
}
.chat-widget-primary:disabled { opacity: .6; cursor: not-allowed; }
.chat-widget-welcome { font-weight: 700; }
.chat-widget-hint,
.chat-widget-logged-in { color: var(--color-text-muted); font-size: 13px; }
.chat-widget-error { color: #ff5c5c; font-size: 13px; margin: 8px 0 0; }
.chat-widget-channels { padding: 12px; }
.chat-channel-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  text-decoration: none; color: var(--color-text); border-radius: 8px;
}
.chat-channel-link:hover { background: var(--surface-2); }