/**
 * hi-chat-assistenza-public.css
 *
 * Public widget-specific styles for the HI Chat user-facing bubble.
 * Depends on: hi-chat-shared.css (loaded first via wp_enqueue_style dependency).
 *
 * Perspective: right = logged-in user  |  left = operator/AI
 *
 * CSS variables (emitted by output_customization_css() in wp_head):
 *   --hi-chat-primary        background for header, buttons, toggle
 *   --hi-chat-bg             widget background / messages area
 *   --hi-chat-primary-text   text/icons on primary-colored surfaces
 *   --hi-chat-user-bbl       user message bubble background
 *   --hi-chat-user-text      user message bubble text
 *   --hi-chat-op-bbl         operator/AI message bubble background
 *   --hi-chat-op-text        operator/AI message bubble text
 *   --hi-chat-ui-text        labels, timestamps, general UI text
 *
 * Icon colors:
 *   All icons are Phosphor Icons (<i class="ph-bold ...">).
 *   They inherit color from their parent element's CSS `color` property:
 *     - Toggle & send icons   → --hi-chat-primary-text (white by default)
 *     - Attach icon           → text-gray-400 at rest, --hi-chat-primary on hover
 *     - File-cancel ×         → text-gray-400 at rest, text-red-500 on hover (intentional)
 */

/* ── System font — scoped to widget only ── */
#hi-chat-wrapper,
#hi-chat-wrapper * {
  font-family: system-ui, -apple-system, sans-serif;
}
#hi-chat-wrapper { pointer-events:none; --hi-chat-offset-x:24px; --hi-chat-offset-y:24px; }
body.admin-bar #hi-chat-wrapper { --hi-chat-admin-top:var(--wp-admin--admin-bar--height, 32px); }
#hi-chat-wrapper[data-side="right"] { right:max(var(--hi-chat-offset-x), env(safe-area-inset-right, 0px)); left:auto; align-items:flex-end; --hi-chat-origin-x:right; }
#hi-chat-wrapper[data-side="left"] { left:max(var(--hi-chat-offset-x), env(safe-area-inset-left, 0px)); right:auto; align-items:flex-start; --hi-chat-origin-x:left; }
#hi-chat-wrapper[data-vertical="bottom"] { bottom:max(var(--hi-chat-offset-y), env(safe-area-inset-bottom, 0px)); top:auto; flex-direction:column; --hi-chat-origin-y:bottom; }
#hi-chat-wrapper[data-vertical="top"] { top:calc(max(var(--hi-chat-offset-y), env(safe-area-inset-top, 0px)) + var(--hi-chat-admin-top, 0px)); bottom:auto; flex-direction:column-reverse; --hi-chat-origin-y:top; }
#hi-chat-toggle, #hi-chat-wrapper #hi-chat-window.open { pointer-events:auto; }
#hi-chat-wrapper #hi-chat-toggle {
  width:auto;
  min-width:56px;
  padding:0 18px;
  gap:8px;
  white-space:nowrap;
  transition-property:transform, opacity;
}
#hi-chat-wrapper .hi-chat-toggle-label { font-size:14px; font-weight:600; line-height:1; }
#hi-chat-input { min-width:0; }

/* ── Widget background ───────────────────────────────────────────────── */
#hi-chat-window,
#hi-chat-gdpr,
#hi-chat-start,
#hi-chat-messages,
#hi-chat-closed-banner {
  background-color: var(--hi-chat-bg, #ffffff);
}

#hi-chat-footer,
#hi-chat-branding {
  background-color: var(--hi-chat-bg, #ffffff);
}

/* ── Widget open/close — spring cubic-bezier instead of linear ease ─────── */
#hi-chat-wrapper #hi-chat-window {
  height: min(480px, calc(100dvh - var(--hi-chat-offset-y) - 80px - var(--hi-chat-admin-top, 0px)));
  width: min(320px, calc(100vw - var(--hi-chat-offset-x) - 8px));
  visibility: hidden;
  transform:scale(.9);
  transform-origin:var(--hi-chat-origin-y, bottom) var(--hi-chat-origin-x, right);
  opacity:0;
  pointer-events:none;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease-out;
}
#hi-chat-wrapper #hi-chat-window.open {
  visibility: visible;
  transform: scale(1) !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/* ── Message enter animation ─────────────────────────────────────────── */
@keyframes hi-chat-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hi-chat-msg-user,
.hi-chat-msg-operator {
  animation: hi-chat-msg-in 0.2s ease-out both;
}

/* ── Online status dot — ripple pulse when green ─────────────────────── */
@keyframes hi-chat-dot-ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}
#hi-chat-status-dot.bg-green-400 {
  animation: hi-chat-dot-ripple 2s ease-out infinite;
}

/* ── Unread badge — spring pop when it appears ───────────────────────── */
@keyframes hi-chat-badge-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.3);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
#hi-chat-badge:not(.hidden) {
  animation: hi-chat-badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Message positions ───────────────────────────────────────────────── */
.hi-chat-msg-user {
  align-self: flex-end;
  max-width: 85%;
}

.hi-chat-msg-operator {
  align-self: flex-start;
  max-width: 85%;
}

.hi-chat-msg-operator .hi-chat-msg-footer {
  flex-direction: row-reverse;
}

/* ── Type select buttons (Azienda / Visitatore) ──────────────────────── */
.hi-chat-type-btn:hover {
  background-color: var(--hi-chat-primary, #2563eb);
  color: var(--hi-chat-primary-text, #ffffff) !important;
  border-color: var(--hi-chat-primary, #2563eb) !important;
}

/* ── Elements that sit on the primary-color background ───────────────── */
/* header title/icons, toggle icons, button labels */
#hi-chat-header,
#hi-chat-toggle,
#hi-chat-send,
#hi-chat-gdpr-accept,
#hi-chat-start-btn,
#hi-chat-new-chat,
#hi-chat-gdpr-reconsider {
  color: var(--hi-chat-primary-text, #ffffff) !important;
  background-color: var(--hi-chat-primary, #2563eb);
}

/* ── Avatars ─────────────────────────────────────────────────────────── */
.hi-chat-msg-avatar-user {
  background: var(--hi-chat-user-bbl, #2563eb);
  color: var(--hi-chat-user-text) !important;
}
.hi-chat-msg-avatar-user i {
  color: var(--hi-chat-user-text) !important;
}
.hi-chat-msg-avatar-operator {
  background: var(--hi-chat-op-bbl, #6b7280);
}
.hi-chat-msg-avatar-operator i {
  color: var(--hi-chat-op-text) !important;
}
.hi-chat-msg-avatar-ai {
  background: var(--hi-chat-op-bbl, #6b7280);
}

.hi-chat-msg-avatar-ai i {
  font-size: 18px !important;
  color: var(--hi-chat-op-text) !important;
}

/* ── Bubble colours ──────────────────────────────────────────────────── */
.hi-chat-msg-user p {
  background: var(--hi-chat-user-bbl, #2563eb);
  color: var(--hi-chat-user-text, #ffffff);
  border-radius: 14px 14px 3px 14px;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

.hi-chat-msg-operator p {
  background: var(--hi-chat-op-bbl, #e5e7eb);
  color: var(--hi-chat-op-text, #111827);
  border-radius: 14px 14px 14px 3px;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

/* ── Timestamp direction ─────────────────────────────────────────────── */
.hi-chat-msg-user .hi-chat-msg-time {
  flex-direction: row-reverse;
  gap: 4px;
}

.hi-chat-msg-time {
  color: var(--hi-chat-ui-text, #9ca3af);
}

/* ── Typing indicator (slightly more spacious for the public widget) ──── */
.hi-chat-typing-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 10px 14px;
  margin: 0;
}

.hi-chat-typing-dots span {
  background: var(--hi-chat-op-text);
}

/* ── Markdown bubble (operator/AI — gray bg, dark text) ──────────────── */
.hi-chat-msg-markdown {
  background: var(--hi-chat-op-bbl, #e5e7eb);
  color: var(--hi-chat-op-text, #111827);
  border-radius: 14px 14px 14px 3px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}

.hi-chat-msg-markdown code {
  background: #d1d5db;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 12px;
  font-family: monospace;
}

.hi-chat-msg-markdown pre {
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
}

.hi-chat-msg-markdown ul,
.hi-chat-msg-markdown ol {
  margin: 4px 0 4px 8px;
  padding: 0;
}

.hi-chat-msg-markdown ol p {
  padding: 0px 0px 8px 8px;
}

.hi-chat-msg-markdown a {
  color: var(--hi-chat-primary, #2563eb);
  text-decoration: underline;
}

.hi-chat-msg-markdown h1,
.hi-chat-msg-markdown h2,
.hi-chat-msg-markdown h3 {
  font-weight: 600;
  margin: 6px 0 4px;
  font-size: 14px;
}

/* ── Attached image ──────────────────────────────────────────────────── */
.hi-chat-msg-image {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  object-fit: cover;
  margin: 0;
}

/* ── File link bubble ────────────────────────────────────────────────── */
.hi-chat-msg-file-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  text-decoration: none;
  word-break: break-all;
  line-height: 1.4;
}

.hi-chat-msg-user .hi-chat-msg-file-link {
  background: var(--hi-chat-user-bbl, #2563eb);
  color: var(--hi-chat-user-text, #ffffff);
  border-radius: 14px 14px 3px 14px;
}

.hi-chat-msg-operator .hi-chat-msg-file-link {
  background: var(--hi-chat-op-bbl, #e5e7eb);
  color: var(--hi-chat-op-text, #111827);
  border-radius: 14px 14px 14px 3px;
}

/* ── File preview (footer area) ──────────────────────────────────────── */
.hi-chat-file-preview-img {
  max-height: 56px;
  max-width: 100%;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.hi-chat-file-preview-pdf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--hi-chat-op-bbl, #f3f4f6);
  border-radius: 8px;
  font-size: 12px;
  color: var(--hi-chat-op-text, #374151);
}

.hi-chat-file-preview-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Upload spinner ──────────────────────────────────────────────────── */
@keyframes hi-chat-spin {
  to {
    transform: rotate(360deg);
  }
}

.hi-chat-upload-spin {
  animation: hi-chat-spin 0.75s linear infinite;
  display: block;
}

/* ── General UI text — inherited by child labels, paragraphs, buttons ── */
#hi-chat-gdpr,
#hi-chat-start,
#hi-chat-closed-banner {
  color: var(--hi-chat-ui-text, #374151);
}

/* Textarea typed text */
#hi-chat-input {
  color: var(--hi-chat-ui-text, #374151);
  background-color: var(--hi-chat-bg);
}

/* ── Quick reply chips ───────────────────────────────────────────────── */
#hi-chat-quick-replies {
  padding: 4px 12px 8px;
  animation: hi-chat-msg-in 0.2s ease-out both;
  animation-delay: 0.08s;
}

.hi-chat-quick-reply {
  display: inline-block;
  margin: 3px 4px 3px 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 2px solid var(--hi-chat-primary, #2563eb);
  color: var(--hi-chat-primary, #2563eb);
  transition: background 0.15s, color 0.15s;
}

.hi-chat-quick-reply:hover {
  background: var(--hi-chat-primary, #2563eb);
  color: var(--hi-chat-primary-text, #ffffff);
}

/* ── Primary-colored interactive elements ────────────────────────────── */
#hi-chat-gdpr-policy {
  color: var(--hi-chat-primary, #2563eb);
}

#hi-chat-input:focus {
  border-color: var(--hi-chat-primary, #2563eb) !important;
}

#hi-chat-upload:hover {
  color: var(--hi-chat-primary, #2563eb) !important;
}

/* ── Thin scrollbar ──────────────────────────────────────────────────── */
#hi-chat-messages::-webkit-scrollbar {
  width: 4px;
}
#hi-chat-messages::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #hi-chat-wrapper {
    inset: 0 !important;
    gap: 0 !important;
    --hi-chat-offset-x:16px;
    --hi-chat-offset-y:16px;
  }

  #hi-chat-wrapper #hi-chat-toggle {
    position: fixed;
  }
  #hi-chat-wrapper[data-side="right"] #hi-chat-toggle { right:max(var(--hi-chat-offset-x), env(safe-area-inset-right, 0px)); left:auto; }
  #hi-chat-wrapper[data-side="left"] #hi-chat-toggle { left:max(var(--hi-chat-offset-x), env(safe-area-inset-left, 0px)); right:auto; }
  #hi-chat-wrapper[data-vertical="bottom"] #hi-chat-toggle { bottom:max(var(--hi-chat-offset-y), env(safe-area-inset-bottom, 0px)); top:auto; }
  #hi-chat-wrapper[data-vertical="top"] #hi-chat-toggle { top:calc(max(var(--hi-chat-offset-y), env(safe-area-inset-top, 0px)) + var(--hi-chat-admin-top, 0px)); bottom:auto; }

  #hi-chat-wrapper #hi-chat-window {
    position:fixed;
    inset:0;
    top:var(--hi-chat-admin-top, 0px);
    width: 100vw;
    height: calc(100dvh - var(--hi-chat-admin-top, 0px));
    border-radius: 0;
  }
  #hi-chat-window.open ~ #hi-chat-toggle { display:none; }
}
#hi-chat-wrapper, #hi-chat-wrapper * { box-sizing: border-box; }
#hi-chat-wrapper button { cursor: pointer; border:0; padding:0; font-family:inherit; }
#hi-chat-wrapper [hidden] { display: none !important; }
#hi-chat-wrapper :is(button, a, textarea, [role="button"]):focus-visible { outline: 3px solid #2563eb !important; outline-offset: 3px; }
#hi-chat-header button:focus-visible { outline-color: var(--hi-chat-primary-text, #fff) !important; }
#hi-chat-header button { min-width:44px; min-height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
#hi-chat-wrapper .hi-chat-close { color:inherit; background:transparent; border:0; font-size:20px; }
#hi-chat-wrapper #hi-chat-forget, #hi-chat-wrapper #hi-chat-upload, #hi-chat-wrapper #hi-chat-branding { color:var(--hi-chat-ui-text, #475569); }
#hi-chat-wrapper #hi-chat-branding span { color:inherit; }
#hi-chat-wrapper #hi-chat-upload:hover { background-color:var(--hi-chat-op-bbl, #f3f4f6); }
#hi-chat-wrapper #hi-chat-input { color:var(--hi-chat-ui-text, #374151); background-color:var(--hi-chat-bg, #fff); }
#hi-chat-wrapper .hi-chat-feedback { margin:0; padding:10px 16px; font-size:13px; color:#9a3412; background:#fff7ed; }
#hi-chat-send, #hi-chat-upload, #hi-chat-gdpr-accept, #hi-chat-gdpr-decline { min-width:44px; min-height:44px; }
@media (prefers-reduced-motion: reduce) {
  #hi-chat-wrapper *, .hi-chat-lightbox { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* One quiet frame; icon size is independent of the accessible hit area. */
#hi-chat-wrapper .hi-chat-sr-only {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;
}
#hi-chat-wrapper #hi-chat-footer {
  flex-shrink:0; padding:12px 12px 6px;
  color:var(--hi-chat-ui-text, #374151);
  border-top:0;
}
#hi-chat-composer {
  display:grid; grid-template-columns:44px minmax(0, 1fr) 44px; align-items:end; column-gap:2px;
  padding:4px; border:1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius:20px; background:var(--hi-chat-bg, #fff);
}
#hi-chat-composer:has(#hi-chat-input:focus-visible) {
  border-color:var(--hi-chat-ui-text, #374151);
  box-shadow:0 0 0 1px var(--hi-chat-ui-text, #374151);
}
#hi-chat-wrapper #hi-chat-input {
  display:block; width:100%; min-height:2.75rem; max-height:7.5rem;
  margin:0; padding:.6875rem 0; border:0; border-radius:0; background:transparent;
  resize:none; overflow-y:auto; box-shadow:none; font:inherit;
  font-size:.875rem; line-height:1.5; letter-spacing:normal;
}
#hi-chat-input::placeholder { color:inherit; opacity:.75; }
#hi-chat-wrapper :is(#hi-chat-upload, #hi-chat-send, #hi-chat-file-cancel) {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; min-width:44px; height:44px; min-height:44px; padding:0; margin:0;
  border-radius:50%; font:inherit; text-decoration:none; box-shadow:none;
}
#hi-chat-wrapper :is(#hi-chat-upload, #hi-chat-file-cancel) { color:inherit; background:transparent; }
#hi-chat-wrapper #hi-chat-upload:hover,
#hi-chat-wrapper #hi-chat-file-cancel:hover { color:inherit !important; background:var(--hi-chat-op-bbl, #f3f4f6); }
#hi-chat-wrapper #hi-chat-send { position:relative; isolation:isolate; background:transparent; }
#hi-chat-send::before { content:""; position:absolute; inset:5px; z-index:-1; border-radius:50%; background:var(--hi-chat-primary, #111); }
#hi-chat-composer[aria-busy="true"] #hi-chat-send svg { visibility:hidden; }
#hi-chat-composer[aria-busy="true"] #hi-chat-send::after {
  content:""; position:absolute; inset:14px; border:2px solid color-mix(in srgb, var(--hi-chat-primary-text, #fff) 30%, transparent);
  border-top-color:var(--hi-chat-primary-text, #fff); border-radius:50%; animation:hi-chat-spin .8s linear infinite;
}
#hi-chat-wrapper #hi-chat-send:hover { filter:brightness(.9); }
#hi-chat-wrapper #hi-chat-footer svg { flex-shrink:0; pointer-events:none; }
#hi-chat-wrapper #hi-chat-footer button:disabled { opacity:.55; cursor:wait; }
#hi-chat-wrapper #hi-chat-footer :is(button, textarea):focus-visible {
  outline:2px solid var(--hi-chat-ui-text, #374151) !important; outline-offset:2px;
}
#hi-chat-wrapper #hi-chat-footer #hi-chat-input:focus-visible { outline:none !important; }
#hi-chat-wrapper .hi-chat-composer-meta {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 10px; margin-top:2px;
  font-size:.75rem; line-height:1.5;
}
#hi-chat-wrapper #hi-chat-forget {
  min-height:32px; padding:6px 0; margin:0; border-radius:5px;
  background:transparent; color:inherit; font:inherit; font-size:.75rem;
  text-decoration:none; box-shadow:none;
}
#hi-chat-wrapper #hi-chat-forget:is(:hover, :focus-visible) { text-decoration:underline; text-underline-offset:3px; }
#hi-chat-file-preview {
  grid-column:1/-1; display:flex; align-items:center; gap:8px; padding:4px;
  margin:0 0 6px; border-radius:14px; background:var(--hi-chat-op-bbl, #f3f4f6);
  color:var(--hi-chat-op-text, #374151);
}
#hi-chat-file-preview-content { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
#hi-chat-wrapper .hi-chat-file-preview-img { width:40px; height:40px; flex-shrink:0; object-fit:cover; border-radius:6px; }
#hi-chat-wrapper .hi-chat-file-preview-name {
  min-width:0; font-size:.8125rem; line-height:1.4; white-space:normal; overflow-wrap:anywhere;
  color:var(--hi-chat-op-text, #374151); background:var(--hi-chat-op-bbl, #f3f4f6);
}
#hi-chat-wrapper #hi-chat-file-cancel { padding:8px; flex-shrink:0; }
#hi-chat-wrapper .hi-chat-file-caption { margin:8px 0 0; white-space:pre-wrap; }
#hi-chat-wrapper #hi-chat-header { padding:6px 16px; min-height:56px; }
#hi-chat-wrapper #hi-chat-header button { background:transparent; color:inherit; }
#hi-chat-wrapper #hi-chat-header button:hover { background:color-mix(in srgb, currentColor 12%, transparent); }
#hi-chat-wrapper #hi-chat-header .hi-chat-close { font-size:18px; }
#hi-chat-wrapper #hi-chat-routing-status {
  color:var(--hi-chat-ui-text, #111);
  font-size:12px;
  line-height:1.4;
  margin:0 2px 8px;
}
#hi-chat-wrapper #hi-chat-routing-status[hidden] { display:none; }
@media (max-width:480px) {
  #hi-chat-wrapper #hi-chat-input { font-size:1rem; }
}
@media (prefers-contrast: more) {
  #hi-chat-composer { border-color:currentColor; border-width:2px; }
  #hi-chat-input::placeholder { opacity:1; }
}
@media (forced-colors: active) {
  #hi-chat-composer, #hi-chat-file-preview { border:1px solid CanvasText; }
  #hi-chat-wrapper :is(#hi-chat-upload, #hi-chat-send, #hi-chat-file-cancel) { border:1px solid ButtonText; }
  #hi-chat-wrapper #hi-chat-footer :is(button, textarea):focus-visible { outline-color:Highlight !important; }
  #hi-chat-composer:has(#hi-chat-input:focus-visible) { border-color:Highlight; box-shadow:0 0 0 1px Highlight; }
}

/* ── 15/10/2026: pop-up più largo, composer più basso ───────────────── */
#hi-chat-wrapper #hi-chat-window {
  width: min(360px, calc(100vw - var(--hi-chat-offset-x) - 8px));
}
#hi-chat-wrapper #hi-chat-footer { padding:8px 12px 4px; }
#hi-chat-composer { grid-template-columns:36px minmax(0, 1fr) 36px; padding:2px 4px; border-radius:18px; }
#hi-chat-wrapper #hi-chat-input { height:2.25rem; min-height:2.25rem; padding:.375rem 0; }
#hi-chat-wrapper :is(#hi-chat-upload, #hi-chat-send, #hi-chat-file-cancel) {
  width:36px; min-width:36px; height:36px; min-height:36px;
}
#hi-chat-send::before { inset:3px; }
@media (max-width:480px) {
  #hi-chat-wrapper #hi-chat-window { width:100vw; }
}