/* ═══════════════════════════════════════════════════════════════════════════
   Gemini Chat Widget — Stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties (overridden inline by JS) ─────────────────────── */
:root {
  --gcw-header-color : #2d6a2d;
  --gcw-bubble-color : #3a7d3a;
  --gcw-btn-color    : #2d6a2d;
  --gcw-text-light   : #ffffff;
  --gcw-bg           : #f4f6f8;
  --gcw-shadow       : 0 8px 32px rgba(0,0,0,.18);
  --gcw-radius       : 16px;
  --gcw-font         : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gcw-z            : 999999;
  --gcw-panel-w      : 360px;
  --gcw-panel-h      : 560px;
  --gcw-offset       : 24px;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
#gcw-wrapper {
  position : fixed;
  z-index  : var(--gcw-z);
  display  : flex;
  flex-direction : column;
  align-items    : flex-end;
  gap            : 12px;
  font-family    : var(--gcw-font);
}

#gcw-wrapper.gcw-pos-bottom-right {
  bottom : var(--gcw-offset);
  right  : var(--gcw-offset);
}
#gcw-wrapper.gcw-pos-bottom-left {
  bottom     : var(--gcw-offset);
  left       : var(--gcw-offset);
  align-items: flex-start;
}

/* ── Floating toggle button ──────────────────────────────────────────────── */
#gcw-toggle-btn {
  width           : 58px;
  height          : 58px;
  border-radius   : 50%;
  background      : var(--gcw-btn-color);
  border          : none;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  box-shadow      : 0 4px 16px rgba(0,0,0,.22);
  transition      : transform .25s cubic-bezier(.34,1.56,.64,1),
                    box-shadow .2s ease;
  position        : relative;
  flex-shrink     : 0;
}
#gcw-toggle-btn:hover {
  transform  : scale(1.08);
  box-shadow : 0 6px 20px rgba(0,0,0,.28);
}
#gcw-toggle-btn:active { transform: scale(.96); }

.gcw-btn-icon {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 26px;
  height         : 26px;
}
.gcw-btn-icon svg { width: 100%; height: 100%; }

/* Notification badge */
.gcw-badge {
  position      : absolute;
  top           : -2px;
  right         : -2px;
  width         : 20px;
  height        : 20px;
  border-radius : 50%;
  background    : #e53935;
  color         : #fff;
  font-size     : 11px;
  font-weight   : 700;
  display       : flex;
  align-items   : center;
  justify-content: center;
  border        : 2px solid #fff;
  transition    : transform .2s ease, opacity .2s ease;
}
.gcw-badge.hidden {
  transform : scale(0);
  opacity   : 0;
}

/* ── Chat panel ──────────────────────────────────────────────────────────── */
#gcw-panel {
  width         : var(--gcw-panel-w);
  height        : var(--gcw-panel-h);
  background    : var(--gcw-bg);
  border-radius : var(--gcw-radius);
  box-shadow    : var(--gcw-shadow);
  display       : flex;
  flex-direction: column;
  overflow      : hidden;

  /* Closed state */
  opacity        : 0;
  transform      : translateY(16px) scale(.97);
  pointer-events : none;
  transition     : opacity .28s cubic-bezier(.4,0,.2,1),
                   transform .28s cubic-bezier(.4,0,.2,1);
}
#gcw-panel.gcw-open {
  opacity        : 1;
  transform      : translateY(0) scale(1);
  pointer-events : auto;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.gcw-header {
  background     : var(--gcw-header-color);
  color          : #fff;
  padding        : 14px 16px;
  display        : flex;
  align-items    : center;
  gap            : 12px;
  flex-shrink    : 0;
}
.gcw-header-avatar {
  width           : 40px;
  height          : 40px;
  border-radius   : 50%;
  background      : rgba(255,255,255,.18);
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
}
.gcw-header-avatar svg { width: 20px; height: 20px; }
.gcw-header-info {
  flex     : 1;
  min-width: 0;
}
.gcw-header-name {
  display     : block;
  font-weight : 700;
  font-size   : 15px;
  white-space : nowrap;
  overflow    : hidden;
  text-overflow: ellipsis;
}
.gcw-header-meta {
  display     : flex;
  align-items : center;
  gap         : 5px;
  font-size   : 12px;
  opacity     : .85;
  margin-top  : 1px;
}
.gcw-dot {
  width         : 8px;
  height        : 8px;
  border-radius : 50%;
  background    : #6cef6c;
  flex-shrink   : 0;
  animation     : gcw-pulse 2s infinite;
}
@keyframes gcw-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(108,239,108,.5); }
  50%      { box-shadow: 0 0 0 4px rgba(108,239,108,0); }
}
.gcw-clear-btn {
  background    : rgba(255,255,255,.15);
  border        : none;
  border-radius : 8px;
  color         : #fff;
  cursor        : pointer;
  padding       : 7px;
  display       : flex;
  align-items   : center;
  justify-content: center;
  transition    : background .15s;
  flex-shrink   : 0;
}
.gcw-clear-btn:hover { background: rgba(255,255,255,.28); }
.gcw-clear-btn svg   { width: 17px; height: 17px; }

/* ── Messages area ───────────────────────────────────────────────────────── */
.gcw-messages {
  flex        : 1;
  overflow-y  : auto;
  padding     : 16px 14px;
  display     : flex;
  flex-direction: column;
  gap         : 10px;
  scroll-behavior: smooth;
}
.gcw-messages::-webkit-scrollbar { width: 4px; }
.gcw-messages::-webkit-scrollbar-track { background: transparent; }
.gcw-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius:4px; }

/* Message bubbles */
.gcw-msg {
  display       : flex;
  flex-direction: column;
  max-width     : 82%;
  animation     : gcw-msg-in .22s ease both;
}
@keyframes gcw-msg-in {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}
.gcw-msg.bot  { align-self: flex-start; align-items: flex-start; }
.gcw-msg.user { align-self: flex-end;   align-items: flex-end; }

.gcw-bubble {
  padding       : 11px 14px;
  border-radius : 16px;
  font-size     : 14px;
  line-height   : 1.55;
  word-break    : break-word;
}
.gcw-msg.bot  .gcw-bubble {
  background    : var(--gcw-bubble-color);
  color         : #fff;
  border-bottom-left-radius: 4px;
}
.gcw-msg.user .gcw-bubble {
  background    : #fff;
  color         : #1a1a1a;
  border-bottom-right-radius: 4px;
  box-shadow    : 0 1px 4px rgba(0,0,0,.08);
}

/* Markdown-ish formatting inside bubbles */
.gcw-bubble strong { font-weight: 700; }
.gcw-bubble em     { font-style: italic; }
.gcw-bubble code {
  background    : rgba(0,0,0,.15);
  padding       : 1px 5px;
  border-radius : 4px;
  font-size     : 12px;
  font-family   : "Courier New", monospace;
}
.gcw-bubble pre {
  background    : rgba(0,0,0,.18);
  padding       : 10px;
  border-radius : 8px;
  overflow-x    : auto;
  font-size     : 12px;
  font-family   : "Courier New", monospace;
  white-space   : pre-wrap;
  margin        : 6px 0 0;
}
.gcw-bubble ul, .gcw-bubble ol {
  padding-left  : 18px;
  margin        : 4px 0;
}
.gcw-bubble li { margin-bottom: 2px; }

/* Typing indicator */
.gcw-typing .gcw-bubble {
  display    : flex;
  gap        : 4px;
  align-items: center;
  padding    : 14px 18px;
}
.gcw-typing .gcw-dot-t {
  width         : 7px;
  height        : 7px;
  border-radius : 50%;
  background    : rgba(255,255,255,.7);
  animation     : gcw-bounce .9s infinite;
}
.gcw-typing .gcw-dot-t:nth-child(2) { animation-delay: .15s; }
.gcw-typing .gcw-dot-t:nth-child(3) { animation-delay: .30s; }
@keyframes gcw-bounce {
  0%,80%,100% { transform: translateY(0); }
  40%         { transform: translateY(-5px); }
}

/* ── Quick buttons ───────────────────────────────────────────────────────── */
.gcw-quick-btns {
  padding     : 6px 14px 8px;
  display     : flex;
  gap         : 7px;
  flex-wrap   : wrap;
  flex-shrink : 0;
  background  : var(--gcw-bg);
}
.gcw-quick-btn {
  background    : #fff;
  border        : 1.5px solid #ccc;
  border-radius : 20px;
  padding       : 5px 12px;
  font-size     : 12.5px;
  cursor        : pointer;
  color         : #333;
  transition    : border-color .15s, color .15s, background .15s;
  white-space   : nowrap;
}
.gcw-quick-btn:hover {
  border-color : var(--gcw-btn-color);
  color        : var(--gcw-btn-color);
  background   : rgba(0,0,0,.03);
}

/* ── Input area ──────────────────────────────────────────────────────────── */
.gcw-input-area {
  display       : flex;
  align-items   : flex-end;
  gap           : 8px;
  padding       : 10px 12px;
  background    : #fff;
  border-top    : 1px solid #e8e8e8;
  flex-shrink   : 0;
}
#gcw-input {
  flex          : 1;
  border        : 1.5px solid #ddd;
  border-radius : 12px;
  padding       : 10px 13px;
  font-size     : 14px;
  font-family   : var(--gcw-font);
  resize        : none;
  outline       : none;
  max-height    : 100px;
  overflow-y    : auto;
  line-height   : 1.5;
  transition    : border-color .15s;
}
#gcw-input:focus { border-color: var(--gcw-btn-color); }
#gcw-send-btn {
  width           : 40px;
  height          : 40px;
  border-radius   : 10px;
  background      : var(--gcw-btn-color);
  border          : none;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  flex-shrink     : 0;
  transition      : opacity .15s, transform .15s;
}
#gcw-send-btn:hover   { opacity: .88; }
#gcw-send-btn:active  { transform: scale(.94); }
#gcw-send-btn:disabled{ opacity: .45; cursor: default; }
#gcw-send-btn svg     { width: 18px; height: 18px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.gcw-footer {
  text-align    : center;
  font-size     : 11px;
  color         : #aaa;
  padding       : 6px 0 8px;
  flex-shrink   : 0;
  background    : #fff;
}
.gcw-footer a { color: #aaa; text-decoration: none; }
.gcw-footer a:hover { text-decoration: underline; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  :root { --gcw-panel-w: calc(100vw - 24px); --gcw-offset: 12px; }
  #gcw-panel { height: min(var(--gcw-panel-h), calc(100dvh - 100px)); }
}