/* ============================================================
   Gemini Chat Widget v2 — gemini-chat.css
   ============================================================ */

#gc-widget {
  --gc-accent:    #6366f1;
  --gc-accent-dk: #4f46e5;
  --gc-radius:    20px;
  --gc-bar-r:     999px;
  --gc-shadow:    0 8px 40px rgba(0,0,0,.16);
  --gc-bar-h:     58px;
  --gc-layer-w:   clamp(320px, 90vw, 420px);
  --gc-layer-h:   clamp(360px, 58vh, 540px);

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  pointer-events: none;
}

/* ── Cookie bar ─────────────────────────────────────────── */
#gc-bar {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--gc-bar-h);
  max-width: var(--gc-layer-w);
  margin: 0 auto 20px;
  padding: 0 8px 0 8px;
  background: #fff;
  border-radius: var(--gc-bar-r);
  box-shadow: var(--gc-shadow);
  border: 1.5px solid rgba(0,0,0,.07);
  transition: box-shadow .2s;
}

#gc-bar:focus-within {
  box-shadow: var(--gc-shadow), 0 0 0 3px color-mix(in srgb, var(--gc-accent) 20%, transparent);
}

#gc-bar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

#gc-bar-icon {
  font-size: 18px;
  color: #fff;
  line-height: 1;
}

#gc-bar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

#gc-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #111;
  caret-color: var(--gc-accent);
  min-width: 0;
}

#gc-input::placeholder { color: #aaa; }

#gc-send {
  pointer-events: all;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--gc-accent) !important;
  color: #fff !important;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 !important;
  transition: background .15s, transform .1s;
}

#gc-send:hover  { background: var(--gc-accent-dk); }
#gc-send:active { transform: scale(.92); }
#gc-send svg { width: 15px; height: 15px; }

/* ── Conversation layer ─────────────────────────────────── */
#gc-layer {
  pointer-events: all;
  position: absolute;
  bottom: calc(var(--gc-bar-h) + 28px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  width: var(--gc-layer-w);
  height: var(--gc-layer-h);
  background: #fff;
  border-radius: var(--gc-radius);
  box-shadow: var(--gc-shadow);
  border: 1.5px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity .22s ease, transform .26s cubic-bezier(.22,1,.36,1);
}

#gc-layer:not([hidden]) {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#gc-layer[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

/* ── Header ─────────────────────────────────────────────── */
#gc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--gc-accent);
  flex-shrink: 0;
}

#gc-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#gc-avatar-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

#gc-avatar {
  font-size: 20px;
  color: #fff;
  line-height: 1;
}

#gc-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

#gc-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#gc-bot-name {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  line-height: 1.2;
}

#gc-bot-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,.8);
  line-height: 1.2;
}

#gc-close {
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}

#gc-close:hover { background: rgba(255,255,255,.32); }

/* ── Messages ───────────────────────────────────────────── */
#gc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

#gc-messages::-webkit-scrollbar { width: 4px; }
#gc-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 4px; }

.gc-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: 14px;
  word-break: break-word;
  animation: gc-pop .18s ease;
}

@keyframes gc-pop {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:translateY(0); }
}

.gc-bubble.user {
  align-self: flex-end;
  background: var(--gc-accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.gc-bubble.assistant {
  align-self: flex-start;
  background: #f1f3f5;
  color: #1a1a1a;
  border-bottom-left-radius: 4px;
}

.gc-bubble.error {
  align-self: flex-start;
  background: #fff1f1;
  color: #c0392b;
  border-bottom-left-radius: 4px;
}

/* ── Typing indicator ───────────────────────────────────── */
.gc-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 12px 14px;
  background: #f1f3f5;
  border-radius: 18px;
  border-bottom-left-radius: 4px;
}

.gc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
  animation: gc-bounce 1.1s infinite ease-in-out both;
}

.gc-typing span:nth-child(1) { animation-delay: -.32s; }
.gc-typing span:nth-child(2) { animation-delay: -.16s; }
.gc-typing span:nth-child(3) { animation-delay: 0s; }

@keyframes gc-bounce {
  0%,80%,100% { transform:scale(0); opacity:.4; }
  40%          { transform:scale(1); opacity:1; }
}

/* ── Footer (suggestions + powered by) ─────────────────── */
#gc-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#gc-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gc-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.12);
  background: #fff;
  color: #333;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}

.gc-chip:hover {
  border-color: var(--gc-accent);
  color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 6%, white);
}

/* ── Contact buttons ────────────────────────────────────── */
#gc-contacts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.gc-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gc-accent);
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}

.gc-contact-btn:hover {
  background: var(--gc-accent-dk);
  transform: translateY(-1px);
}

.gc-contact-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

#gc-powered {
  font-size: 11px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 4px;
}

#gc-powered a { color: #aaa; text-decoration: none; }
#gc-powered a:hover { opacity: .75; }

.gc-powered-logo {
  height: 10px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: .4;
  transition: opacity .15s;
}

#gc-powered a:hover .gc-powered-logo { opacity: .7; }

/* ── Dark mode ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  #gc-bar, #gc-layer { background:#1e1e2e; border-color:rgba(255,255,255,.08); }
  #gc-input { color:#e2e8f0; }
  #gc-input::placeholder { color:#555; }
  .gc-bubble.assistant { background:#2a2a3e; color:#e2e8f0; }
  .gc-typing { background:#2a2a3e; }
  .gc-typing span { background:#555; }
  #gc-footer { border-top-color:rgba(255,255,255,.06); }
  .gc-chip { background:#2a2a3e; border-color:rgba(255,255,255,.12); color:#ccc; }
  .gc-chip:hover { color:var(--gc-accent); border-color:var(--gc-accent); background:color-mix(in srgb, var(--gc-accent) 12%, #2a2a3e); }
  #gc-powered, #gc-powered a { color:#555; }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 500px) {
  #gc-widget { --gc-layer-w:100vw; --gc-layer-h:65vh; }
  #gc-layer {
    left:0; right:0; width:100%;
    border-radius: var(--gc-radius) var(--gc-radius) 0 0;
    bottom: calc(var(--gc-bar-h) + 16px);
    transform: translateY(16px);
  }
  #gc-layer:not([hidden]) { transform: translateY(0); }
  #gc-bar { margin:0 12px 14px; max-width:calc(100% - 24px); border-radius:var(--gc-bar-r); }
}