/* JO UEFN Live Chat — floating widget (all pages) + admin dashboard panels.
   Built only from the site's existing tokens (style.css :root), so it reads
   as part of JO UEFN rather than a bolted-on third-party widget. */

.jo-chat-launcher{
  position:fixed; right:20px; bottom:20px; z-index:99990;
  width:58px; height:58px; border-radius:50%; border:1px solid var(--border-hi);
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#1a1300;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 4px rgba(var(--accent-rgb),.12);
  transition:transform .15s ease; font-size:26px;
}
.jo-chat-launcher:hover{ transform:scale(1.06); }
.jo-chat-launcher .jo-chat-badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--accent-danger); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); border:2px solid var(--bg-0);
}
.jo-chat-launcher .jo-chat-badge:empty{ display:none; }

.jo-chat-panel{
  position:fixed; right:20px; bottom:90px; z-index:99991; width:380px; height:600px; max-height:calc(100vh - 110px);
  background:var(--bg-1); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.55);
  font-family:var(--font-ui); color:var(--text-0);
}
.jo-chat-panel[hidden]{ display:none; }

.jo-chat-head{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:14px 14px 12px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border-bottom:1px solid var(--border);
}
.jo-chat-head img{ width:34px; height:34px; border-radius:50%; }
.jo-chat-head .jo-chat-head-txt{ flex:1 1 auto; min-width:0; }
.jo-chat-head .jo-chat-head-txt b{ display:block; font-family:var(--font-display); font-size:15px; }
.jo-chat-head .jo-chat-status{ font-size:11px; color:var(--text-2); display:flex; align-items:center; gap:5px; }
.jo-chat-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--text-2); flex:0 0 auto; }
.jo-chat-status.online .dot{ background:var(--success); box-shadow:0 0 0 2px rgba(61,255,160,.2); }
.jo-chat-head-actions{ display:flex; gap:4px; }
.jo-chat-icon-btn{
  width:28px; height:28px; border-radius:7px; border:none; background:transparent; color:var(--text-1);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px;
}
.jo-chat-icon-btn:hover{ background:rgba(255,255,255,.08); color:var(--text-0); }

.jo-chat-banner{
  flex:0 0 auto; padding:7px 14px; font-size:11.5px; text-align:center; background:rgba(255,181,69,.14); color:var(--accent-warn);
  border-bottom:1px solid var(--border);
}
.jo-chat-banner.err{ background:rgba(255,92,122,.14); color:var(--accent-danger); }
.jo-chat-banner[hidden]{ display:none; }

.jo-chat-body{ flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.jo-chat-msgs-list{ display:flex; flex-direction:column; gap:10px; }
.jo-chat-body::-webkit-scrollbar{ width:8px; }
.jo-chat-body::-webkit-scrollbar-thumb{ background:var(--border-hi); border-radius:4px; }

/* -------------------------------------------------------------- conversation list */
.jo-chat-cta{
  display:block; width:100%; padding:11px; border-radius:9px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#1a1300; font-weight:700; font-size:13px; font-family:var(--font-ui);
}
.jo-chat-conv-item{
  display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-2); cursor:pointer; text-align:left;
}
.jo-chat-conv-item:hover{ border-color:var(--border-hi); }
.jo-chat-conv-item .grow{ flex:1 1 auto; min-width:0; }
.jo-chat-conv-item b{ display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jo-chat-conv-item .prev{ font-size:11.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jo-chat-conv-item .meta{ font-size:10.5px; color:var(--text-2); margin-top:2px; }
.jo-chat-unread{ min-width:18px; height:18px; border-radius:999px; background:var(--accent); color:#1a1300; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.jo-chat-empty{ text-align:center; color:var(--text-2); font-size:12.5px; padding:30px 10px; }

/* --------------------------------------------------------------------- form */
.jo-chat-form label{ display:block; font-size:11.5px; color:var(--text-1); margin:10px 0 4px; }
.jo-chat-form input, .jo-chat-form select, .jo-chat-form textarea{
  width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg-0); color:var(--text-0);
  font-family:var(--font-ui); font-size:12.5px;
}
.jo-chat-form textarea{ min-height:70px; resize:vertical; }
.jo-chat-form input:focus, .jo-chat-form select:focus, .jo-chat-form textarea:focus{ outline:none; border-color:var(--accent); }

/* -------------------------------------------------------------------- thread */
.jo-chat-thread-head{ display:flex; align-items:center; gap:8px; margin:-14px -14px 4px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg-2); }
.jo-chat-thread-head .back{ background:none; border:none; color:var(--text-1); cursor:pointer; font-size:16px; padding:2px 4px; }
.jo-chat-thread-head .info{ flex:1 1 auto; min-width:0; }
.jo-chat-thread-head .info b{ display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jo-chat-thread-head .info span{ font-size:10.5px; color:var(--text-2); }
.jo-chat-order-card{ font-size:11px; color:var(--text-1); background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.25); border-radius:8px; padding:8px 10px; margin:-2px 0 4px; }
.jo-chat-order-card b{ color:var(--accent-2); }

.jo-msg{ max-width:82%; display:flex; flex-direction:column; gap:3px; }
.jo-msg.customer{ align-self:flex-end; align-items:flex-end; }
.jo-msg.agent, .jo-msg.system{ align-self:flex-start; align-items:flex-start; }
.jo-msg-bubble{ padding:9px 12px; border-radius:13px; font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.jo-msg.customer .jo-msg-bubble{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#1a1300; border-bottom-right-radius:3px; }
.jo-msg.agent .jo-msg-bubble{ background:var(--bg-2); border:1px solid var(--border); border-bottom-left-radius:3px; }
.jo-msg.system .jo-msg-bubble{ background:transparent; border:1px dashed var(--border); color:var(--text-2); font-size:11.5px; }
.jo-msg-meta{ font-size:10px; color:var(--text-2); display:flex; align-items:center; gap:4px; }
.jo-msg-attach{ display:block; max-width:220px; border-radius:9px; margin-top:2px; }
.jo-msg-file{ display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:9px; background:rgba(255,255,255,.06); font-size:11.5px; text-decoration:none; color:inherit; }
.jo-chat-typing{ font-size:11px; color:var(--text-2); font-style:italic; padding-left:2px; }

.jo-chat-satisfaction{ border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; background:var(--bg-2); }
.jo-chat-stars{ display:flex; justify-content:center; gap:4px; margin:8px 0; font-size:22px; }
.jo-chat-stars button{ background:none; border:none; cursor:pointer; color:var(--text-2); padding:0; }
.jo-chat-stars button.on, .jo-chat-stars button:hover{ color:var(--accent); }

/* ----------------------------------------------------------------- composer */
.jo-chat-composer{ flex:0 0 auto; border-top:1px solid var(--border); padding:8px 10px; background:var(--bg-2); }
.jo-chat-composer-row{ display:flex; align-items:flex-end; gap:6px; }
.jo-chat-composer textarea{
  flex:1 1 auto; resize:none; max-height:90px; padding:8px 10px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg-0); color:var(--text-0); font-family:var(--font-ui); font-size:13px; line-height:1.4;
}
.jo-chat-composer textarea:focus{ outline:none; border-color:var(--accent); }
.jo-chat-send{ width:36px; height:36px; border-radius:50%; border:none; background:var(--accent); color:#1a1300; font-size:15px; cursor:pointer; flex:0 0 auto; }
.jo-chat-send:disabled{ opacity:.4; cursor:default; }
.jo-chat-attach-preview{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.jo-chat-attach-chip{ display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.06); border-radius:7px; padding:4px 8px; font-size:11px; }
.jo-chat-attach-chip button{ background:none; border:none; color:var(--text-2); cursor:pointer; font-size:13px; padding:0; }
.jo-chat-rec{ color:var(--accent-danger); }
.jo-chat-emoji-pop{
  position:absolute; bottom:52px; right:10px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
  padding:8px; display:grid; grid-template-columns:repeat(7,1fr); gap:2px; width:230px; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.jo-chat-emoji-pop[hidden]{ display:none; }
.jo-chat-emoji-pop button{ background:none; border:none; font-size:18px; cursor:pointer; padding:4px; border-radius:6px; }
.jo-chat-emoji-pop button:hover{ background:rgba(255,255,255,.08); }

@media (max-width:520px){
  .jo-chat-panel{ right:0; bottom:0; left:0; top:0; width:100%; height:100%; max-height:100%; border-radius:0; }
  .jo-chat-launcher{ right:16px; bottom:16px; }
}

/* ============================================================ admin dashboard */
.jo-chatadmin{ display:grid; grid-template-columns:280px 1fr 260px; gap:0; height:calc(100vh - 130px); min-height:520px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.jo-chatadmin-list{ border-right:1px solid var(--border); display:flex; flex-direction:column; background:var(--bg-1); overflow:hidden; }
.jo-chatadmin-filters{ padding:10px; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px; }
.jo-chatadmin-filters select, .jo-chatadmin-filters input{ font-size:11.5px; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg-0); color:var(--text-0); }
.jo-chatadmin-rows{ flex:1 1 auto; overflow-y:auto; }
.jo-chatadmin-row{ display:flex; gap:9px; padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.jo-chatadmin-row:hover{ background:rgba(255,255,255,.04); }
.jo-chatadmin-row.active{ background:rgba(var(--accent-rgb),.1); }
.jo-chatadmin-row .grow{ flex:1 1 auto; min-width:0; }
.jo-chatadmin-row b{ font-size:12.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jo-chatadmin-row .prev{ font-size:11px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jo-chatadmin-row .badges{ display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; }
.jo-chip{ font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--text-1); text-transform:uppercase; letter-spacing:.3px; }
.jo-chip.pri-urgent{ background:rgba(255,92,122,.18); color:var(--accent-danger); }
.jo-chip.pri-high{ background:rgba(255,181,69,.18); color:var(--accent-warn); }
.jo-chip.st-open{ background:rgba(var(--accent-rgb),.18); color:var(--accent-2); }
.jo-chip.st-resolved, .jo-chip.st-closed{ background:rgba(61,255,160,.14); color:var(--success); }
.jo-chatadmin-thread{ display:flex; flex-direction:column; background:var(--bg-0); overflow:hidden; }
.jo-chatadmin-thread-head{ padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.jo-chatadmin-thread-head select{ font-size:11.5px; padding:5px 7px; border-radius:6px; border:1px solid var(--border); background:var(--bg-1); color:var(--text-0); }
.jo-chatadmin-msgs{ flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.jo-chatadmin-composer{ border-top:1px solid var(--border); padding:10px; background:var(--bg-1); }
.jo-chatadmin-composer textarea{ width:100%; min-height:56px; resize:vertical; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg-0); color:var(--text-0); font-family:var(--font-ui); font-size:12.5px; }
.jo-chatadmin-canned{ font-size:11px; padding:5px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg-0); color:var(--text-0); max-width:160px; }
.jo-chatadmin-side{ border-left:1px solid var(--border); background:var(--bg-1); overflow-y:auto; padding:14px; font-size:12px; }
.jo-chatadmin-side h4{ font-family:var(--font-display); font-size:13px; margin:0 0 8px; }
.jo-chatadmin-side .row{ display:flex; justify-content:space-between; padding:4px 0; color:var(--text-1); border-bottom:1px solid var(--border); }
.jo-chatadmin-side .row b{ color:var(--text-0); }
.jo-chatadmin-note{ background:rgba(255,181,69,.08); border:1px solid rgba(255,181,69,.25); border-radius:8px; padding:7px 9px; font-size:11px; margin-bottom:6px; }
.jo-chatadmin-ai{ background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.25); border-radius:8px; padding:9px; font-size:11.5px; margin-top:8px; }

@media (max-width:1100px){
  .jo-chatadmin{ grid-template-columns:220px 1fr; }
  .jo-chatadmin-side{ display:none; }
}