/**
 * Shared chat visuals for "her and me" — same look across the embedded
 * widget, the admin reply page, and the standalone installable chat app.
 * Host pages may already define these color variables (the main site
 * does); the values below match the site's palette either way, so it's
 * harmless if both define them.
 */
:root{
  --chat-bg: #071A2B;
  --chat-bg2: #0D2940;
  --chat-primary: #61C8FF;
  --chat-secondary: #8ED8FF;
  --chat-accent: #C7F1FF;
  --chat-glow: #9BE7FF;
  --chat-text: #F4FBFF;
  --chat-muted: #9CC4D8;
  --chat-blur: 18px;
}

.chat-gate{
  display:none; flex-direction:column; align-items:center; text-align:center;
  padding:26px 22px; gap:6px; flex:1; overflow-y:auto;
}
.chat-gate.show{ display:flex; }
.chat-gate-icon{ font-size:1.8rem; margin:0 0 2px; }
.chat-gate-title{ font-family:'Fraunces', serif; font-size:1.02rem; margin:0; color:var(--chat-text); }
.chat-gate-hint{ font-size:.76rem; color:var(--chat-muted); line-height:1.5; margin:2px 0 14px; max-width:260px; }
.chat-gate-form{ display:flex; gap:8px; width:100%; max-width:280px; }
.chat-gate-input{
  flex:1; min-width:0; background:rgba(255,255,255,0.07); border:1px solid rgba(198,241,255,0.3);
  border-radius:999px; padding:10px 14px; color:var(--chat-text); font-size:.85rem; font-family:inherit;
}
.chat-gate-input:focus{ outline:none; border-color:var(--chat-primary); }
.chat-gate-submit{
  background:var(--chat-primary); color:#04121F; border:none; border-radius:999px; padding:10px 18px;
  font-size:.83rem; font-weight:600; cursor:pointer; flex-shrink:0;
}
.chat-gate-submit:hover{ opacity:.92; }
.chat-gate-error{ color:#ffb4b4; font-size:.76rem; margin:10px 0 0; min-height:1em; }

.chat-messages{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px; display:flex; flex-direction:column; gap:9px;
}
.chat-bubble{
  max-width:78%; padding:9px 13px; border-radius:16px; font-size:.87rem; line-height:1.4;
  word-wrap:break-word; white-space:pre-wrap;
  opacity:0; transform:translateY(8px); animation:chatBubbleIn .35s ease forwards;
}
@keyframes chatBubbleIn{ to{ opacity:1; transform:translateY(0); } }
.chat-bubble.her{
  align-self:flex-start; background:rgba(255,255,255,0.08); border:1px solid rgba(198,241,255,0.2);
  border-bottom-left-radius:5px; color:var(--chat-text);
}
.chat-bubble.me{
  align-self:flex-end; background:linear-gradient(135deg, var(--chat-primary), var(--chat-secondary));
  border-bottom-right-radius:5px; color:#04121F; font-weight:500;
}
.chat-bubble img{ max-width:100%; border-radius:10px; display:block; cursor:pointer; }
.chat-bubble img + .chat-bubble-text{ margin-top:6px; }
.chat-bubble-time{
  display:flex; align-items:center; gap:4px; font-size:.62rem; opacity:.68; margin-top:4px;
}
.chat-ticks{ display:inline-flex; align-items:center; opacity:.85; }
.chat-ticks svg{ display:block; }
.chat-ticks.sent{ opacity:.55; }
.chat-ticks.delivered{ opacity:.75; }
.chat-ticks.seen{ color:#5fd0ff; opacity:1; text-shadow:0 0 6px rgba(95,208,255,0.6); }
.chat-bubble.me .chat-ticks.seen{ color:#04121F; text-shadow:none; font-weight:700; }
.chat-empty{ text-align:center; color:var(--chat-muted); font-size:.82rem; margin:auto; padding:20px; }

.chat-counter{ font-size:.68rem; color:var(--chat-muted); opacity:.85; }

.chat-photo-preview{
  display:none; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid rgba(198,241,255,0.15);
}
.chat-photo-preview.show{ display:flex; }
.chat-photo-preview img{ width:44px; height:44px; object-fit:cover; border-radius:8px; }
.chat-photo-preview .cpp-remove{ background:none; border:none; color:var(--chat-muted); cursor:pointer; font-size:.9rem; margin-left:auto; }
.chat-photo-preview .cpp-name{ font-size:.72rem; color:var(--chat-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.chat-input-row{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid rgba(198,241,255,0.15); flex-shrink:0;
}
.chat-attach{ font-size:1.1rem; cursor:pointer; padding:6px; flex-shrink:0; opacity:.85; }
.chat-attach:hover{ opacity:1; }
.chat-text-input{
  flex:1; min-width:0; background:rgba(255,255,255,0.07); border:1px solid rgba(198,241,255,0.25);
  border-radius:999px; padding:9px 14px; color:var(--chat-text); font-size:.85rem; font-family:inherit;
}
.chat-text-input:focus{ outline:none; border-color:var(--chat-primary); }
.chat-send{
  width:36px; height:36px; border-radius:50%; border:none; background:var(--chat-primary); color:#04121F;
  cursor:pointer; font-size:.95rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.chat-send:hover{ opacity:.9; }
.chat-send:disabled{ opacity:.5; cursor:default; }