/* ==========================================================================
   TCHAT OVERLAY
   ========================================================================== */

.gb-chat-overlay {
  display:none; position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.6); backdrop-filter:blur(5px);
  align-items:center; justify-content:center;
}
.gb-chat-overlay.active { display:flex; }

/* --- Window --- */
.gb-chat-window {
  display:flex; flex-direction:column;
  width:100%; height:100%;
  background:#fff; overflow:hidden;
  position:relative;
}
@media(min-width:768px){
  .gb-chat-overlay { padding:20px; }
  .gb-chat-window {
    max-width:400px; max-height:85vh;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
  }
}

/* --- Connecting screen --- */
.gb-chat-connecting {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:#fff;
}
.gb-chat-connecting.hidden { display:none; }
.gb-chat-conn-spinner {
  width:36px; height:36px; border-radius:50%;
  border:3px solid #e5e5ea;
  border-top-color:var(--gb-a2,#2b7bff);
  animation:gbSpin .7s linear infinite;
}
@keyframes gbSpin { to { transform:rotate(360deg); } }
.gb-chat-conn-text {
  font-size:.88rem; color:#8e8e93; font-weight:500;
}

/* --- Header --- */
.gb-chat-header {
  display:none; /* hidden during connecting, shown by JS */
  align-items:center; gap:10px;
  padding:12px 14px;
  padding-top:max(12px,env(safe-area-inset-top));
  background:linear-gradient(135deg,var(--gb-a1,#ff3d71),var(--gb-a2,#2b7bff));
  color:#fff; flex-shrink:0;
}
.gb-chat-header.visible { display:flex; }

.gb-chat-back {
  background:none; border:none; color:#fff;
  font-size:1.3rem; cursor:pointer; padding:0; line-height:1;
}

.gb-chat-avatar {
  width:36px; height:36px; border-radius:50%;
  object-fit:cover; border:2px solid rgba(255,255,255,.3);
  flex-shrink:0;
}

.gb-chat-header-info { display:flex; flex-direction:column; }

.gb-chat-status {
  display:flex; align-items:center; gap:5px;
  font-size:.78rem; font-weight:600;
}

.gb-chat-status-dot {
  width:7px; height:7px; border-radius:50%;
  background:#4ade80;
  animation:gbChatPulse 2s ease infinite;
}
@keyframes gbChatPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(74,222,128,.5); }
  50% { box-shadow:0 0 0 4px rgba(74,222,128,0); }
}

/* --- Messages --- */
.gb-chat-messages {
  display:none; /* hidden during connecting */
  flex:1; overflow-y:auto;
  padding:14px 12px;
  flex-direction:column; gap:10px;
  background:#f0f2f5;
  -webkit-overflow-scrolling:touch;
}
.gb-chat-messages.visible { display:flex; }

/* --- Rows --- */
.gb-chat-row {
  display:flex; gap:8px; max-width:80%;
  animation:gbBubbleIn .2s ease;
}
.gb-chat-row--mine { align-self:flex-end; flex-direction:row-reverse; }
.gb-chat-row--hers { align-self:flex-start; }

.gb-chat-row-avatar {
  width:26px; height:26px; border-radius:50%;
  object-fit:cover; flex-shrink:0; align-self:flex-end;
}

.gb-chat-col { display:flex; flex-direction:column; min-width:0; }
.gb-chat-row--mine .gb-chat-col { align-items:flex-end; }
.gb-chat-row--hers .gb-chat-col { align-items:flex-start; }

@keyframes gbBubbleIn {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}

/* --- Bubbles --- */
.gb-chat-bubble {
  padding:9px 13px; font-size:.86rem; line-height:1.4;
  word-break:break-word; max-width:100%;
}
.gb-chat-bubble--mine {
  background:var(--gb-a2,#2b7bff); color:#fff;
  border-radius:18px 18px 4px 18px;
}
.gb-chat-bubble--hers {
  background:#fff; color:#1a1a1a;
  border-radius:18px 18px 18px 4px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* --- Meta --- */
.gb-chat-meta {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:2px; padding:0 4px;
  font-size:.64rem; color:#8e8e93;
  white-space:nowrap;
}
.gb-chat-meta svg {
  width:13px; height:9px; flex-shrink:0;
  vertical-align:middle;
}
.gb-chat-meta .gb-chat-check { color:#8e8e93; transition:color .3s; }
.gb-chat-meta .gb-chat-check.read { color:var(--gb-a2,#2b7bff); }

/* --- Typing --- */
.gb-chat-typing {
  display:flex; align-items:flex-end; gap:8px;
  align-self:flex-start;
  animation:gbBubbleIn .2s ease;
}
.gb-chat-typing-avatar {
  width:26px; height:26px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
}
.gb-chat-typing-dots {
  display:flex; align-items:center; gap:3px;
  background:#fff; border-radius:18px;
  padding:10px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.gb-chat-typing-dots span {
  display:block; width:6px; height:6px; border-radius:50%;
  background:#8e8e93;
  animation:gbTypingDots .9s ease infinite;
}
.gb-chat-typing-dots span:nth-child(2) { animation-delay:.15s; }
.gb-chat-typing-dots span:nth-child(3) { animation-delay:.3s; }
@keyframes gbTypingDots {
  0%,60%,100% { transform:translateY(0); opacity:.3; }
  30% { transform:translateY(-4px); opacity:1; }
}

/* --- Input bar --- */
.gb-chat-inputbar {
  display:none; /* hidden during connecting */
  align-items:center; gap:8px;
  padding:8px 10px;
  padding-bottom:max(8px,env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid #e5e5ea;
  flex-shrink:0;
}
.gb-chat-inputbar.visible { display:flex; }

.gb-chat-input {
  flex:1; border:1px solid #e5e5ea; border-radius:20px;
  padding:9px 14px; font-size:.85rem;
  background:#f0f2f5; color:#1a1a1a; outline:none;
}
.gb-chat-input:focus { border-color:var(--gb-a2,#2b7bff); }
.gb-chat-input:disabled { opacity:.4; }

.gb-chat-send {
  width:36px; height:36px; border-radius:50%; border:none;
  background:var(--gb-a2,#2b7bff); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.gb-chat-send:disabled { opacity:.35; cursor:default; }
.gb-chat-send svg { width:18px; height:18px; }

/* --- System message (email) --- */
.gb-chat-system {
  align-self:center; width:90%;
  animation:gbBubbleIn .25s ease;
}
.gb-chat-email-card {
  background:#fff; border-radius:14px;
  padding:18px 16px; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.gb-chat-email-icon { font-size:1.8rem; margin-bottom:4px; }
.gb-chat-email-label {
  font-size:.72rem; font-weight:700;
  color:var(--gb-a1,#ff3d71);
  text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:4px;
}
.gb-chat-email-sub {
  font-size:.8rem; color:#666; margin:0 0 10px; line-height:1.4;
}
.gb-chat-email-input {
  width:100%; border:1px solid #e5e5ea; border-radius:10px;
  padding:10px 12px; font-size:.85rem; text-align:center;
  background:#f0f2f5; color:#1a1a1a; outline:none; margin-bottom:8px;
}
.gb-chat-email-input:focus { border-color:var(--gb-a2,#2b7bff); }
.gb-chat-email-btn {
  width:100%; padding:10px 16px; border:none; border-radius:10px;
  background:linear-gradient(135deg,var(--gb-a1,#ff3d71),var(--gb-a2,#2b7bff));
  color:#fff; font-size:.88rem; font-weight:700; cursor:pointer;
}
.gb-chat-email-btn:disabled { opacity:.5; }
.gb-chat-btn-spinner {
  display:inline-block; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:gbSpin .6s linear infinite;
}
.gb-chat-email-err {
  color:var(--gb-a1,#ff3d71); font-size:.72rem; margin-top:5px; display:none;
}

/* --- Hint initial --- */
.gb-chat-hint {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gb-chat-hint-card {
  text-align:center;
  background:#fff;
  border-radius:16px;
  padding:28px 24px;
  margin:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
  animation:gbHintPulse 2.5s ease infinite;
}
.gb-chat-hint-icon {
  font-size:2.2rem;
  margin-bottom:8px;
}
.gb-chat-hint-text {
  font-size:.88rem;
  color:#666;
  line-height:1.5;
  margin-bottom:12px;
}
.gb-chat-hint-arrow {
  font-size:1.8rem;
  letter-spacing:8px;
  color:var(--gb-a2,#2b7bff);
  animation:gbHintBounce 1.2s ease infinite;
}
@keyframes gbHintPulse {
  0%,100% { box-shadow:0 2px 12px rgba(0,0,0,.07); }
  50% { box-shadow:0 4px 20px rgba(43,123,255,.15); }
}
@keyframes gbHintBounce {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(4px); }
}

/* --- Trigger --- */
.gb-chat-trigger {
  width:100%; font-size:1rem; padding:14px 24px; margin-top:14px;
}