/* ============================= */
/* Variables & Theming           */
/* ============================= */
:root {
  --header-height:           48px;
  --panel-height:            380px;
  --widget-width:            280px;   /* closed/min width */
  --widget-expanded-width:   640px;
  --transition-duration:     0.3s;

  --color-primary:    #0a71ff;
  --color-on-primary: #ffffff;
  --color-surface:    #ffffff;
  --color-on-surface: #262626;
  --color-border:     #e7e7e7;
  --shadow-color:     rgba(0,0,0,.18);
  --hover-bg:         #0056b3;
  --accent:           #ff6600;       /* site accent */

  /* Drag handle */
  --drag-size:        32px;          /* 28–40px looks good */
  --drag-radius:      12px;

  /* Language separator */
  --lang-sep-gap:     10px;
}

/* ============================= */
/* Wrapper (floating widget)     */
/* ============================= */
#chatgpt-widget{
  position:fixed;
  right:20px;
  bottom:20px;

  /* Closed width is now a MIN width (per request) */
  width:auto;
  min-width:var(--widget-width);

  height:var(--panel-height);
  z-index:9999;
  background:var(--color-surface);
  border-radius:10px;
  box-shadow:0 10px 24px var(--shadow-color);
  overflow:hidden;
  transition:
    width var(--transition-duration) ease,
    height var(--transition-duration) ease,
    transform var(--transition-duration) ease;
}

/* Slide-up panel body (messages + input) */
#chatgpt-widget .cg-container{
  display:flex;
  flex-direction:column;
  height:100%;
  transform:translateY(calc(100% - var(--header-height)));
  transition:transform var(--transition-duration) ease;
}
#chatgpt-widget.open .cg-container{ transform:translateY(0); }
#chatgpt-widget.open.expand-x{ width:var(--widget-expanded-width); }

/* When closed, hide body */
#chatgpt-widget:not(.open) .cg-messages,
#chatgpt-widget:not(.open) .cg-input-bar{
  display:none !important;
}

/* ============================= */
/* Header                        */
/* ============================= */
.cg-header{
  display:flex;
  align-items:center;
  gap:10px;
  height:var(--header-height);

  /* Reserve safe space for the larger handle inside the corner */
  padding:0 12px 0 calc(var(--drag-size) + 12px);

  background:var(--color-primary);
  color:var(--color-on-primary);
  user-select:none;
  cursor:pointer;
}
.cg-header:focus{ outline:2px solid #fff; outline-offset:2px; }

/* Title pill (visible when closed) */
.cg-title{
  display:inline-block;
  background:rgba(255,255,255,.14);
  color:#fff;
  padding:6px 12px;
  border-radius:12px;
  font-weight:600;
  letter-spacing:.2px;
}

/* Actions & Flags are hidden until open */
.cg-actions,
.cg-flags{ display:none; }
#chatgpt-widget.open .cg-actions{ display:flex; gap:8px; align-items:center; }
#chatgpt-widget.open .cg-flags{ display:flex; gap:6px; align-items:center; margin-left:auto; }

/* Normalize action icon alignment/sizing */
.cg-action{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:28px;
  padding:0 6px;
  background:transparent; border-radius:6px; color:#fff;
}
.cg-action svg, .cg-action i{
  width:18px; height:18px; display:block; line-height:0;
}
.cg-action:hover{ background:rgba(255,255,255,.12); }

/* Language flags: tighter spacing + middot separators between items */
.cg-flag{ padding:4px 8px; border-radius:6px; color:#fff; position:relative; }
.cg-flag.active{ background:#ff7a00; }

/* real separator positioned BETWEEN chips, not inside the pill */
#chatgpt-widget.open .cg-flags .cg-flag:not(:last-child)::after{
  content:"·";
  position:absolute; right: calc(-1 * var(--lang-sep-gap));
  top:50%; transform: translateY(-50%);
  opacity:.6; font-weight:700;
}
#chatgpt-widget.open .cg-flags{ column-gap: calc(var(--lang-sep-gap) * 2); }

/* ============================= */
/* Drag handle — INSIDE with accent “peel” */
/* Hidden when widget is closed (per request) */
#chatgpt-widget:not(.open) .cg-drag-handle{ display:none; }

.cg-drag-handle{
  position:absolute; top:0; left:0;
  width: var(--drag-size);
  height: var(--drag-size);
  cursor: grab; touch-action: none; z-index: 2;

  /* Peel look: white fold + subtle sheen over accent */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.95) 0 16px,
      rgba(255,255,255,.55) 16px 18px,
      transparent 18px 100%),
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    var(--accent);
  border-top-left-radius: var(--drag-radius);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.cg-drag-handle:active{ cursor:grabbing; }

/* a tiny entrance pop when opening (tasteful) */
#chatgpt-widget.open .cg-drag-handle{ animation: cg-peel-pop .26s ease-out both; }
@keyframes cg-peel-pop{
  0%{ transform: translateY(-2px) scale(.96); opacity:.85; }
  100%{ transform:none; opacity:1; }
}

/* ============================= */
/* Messages                      */
/* ============================= */
.cg-messages{
  flex:1; padding:12px; overflow:auto; background:#f8f9fb;
}
.cg-messages::-webkit-scrollbar{ width:6px; }
.cg-messages::-webkit-scrollbar-thumb{ background:#d1d1d1; border-radius:3px; }

/* Bubbles */
.cg-message{ margin:0 0 10px; }
.cg-message span{
  display:inline-block; max-width:80%;
  padding:8px 12px; border-radius:10px; line-height:1.45;
}
.cg-message.user{ text-align:right; }
.cg-message.user span{ background:#0a71ff; color:#fff; }
.cg-message.gpt span{ background:#e9edf5; color:#1e1e1e; }
.cg-message.typing span{ font-style:italic; opacity:.7; }

/* Input bar */
.cg-input-bar{
  display:flex; gap:8px; align-items:center;
  background:#0a71ff; padding:8px;
}
.cg-input-bar input{
  flex:1; background:#fff; border:none; border-radius:6px; padding:10px 12px;
}
.cg-input-bar input:focus{ outline:2px solid var(--accent); }
.cg-input-bar button{
  background:#0a71ff; color:#fff; border:none; border-radius:6px; padding:10px 16px; font-weight:700;
}
.cg-input-bar button:hover{ background:#0056b3; }

/* Resizing */
#chatgpt-widget.resizing{ transition:none!important; }

/* Mobile */
@media (max-width: 600px), (max-height: 600px){
  #chatgpt-widget.open.expand-x{
    width:auto!important; left:2.5vw!important; right:2.5vw!important;
    height:80vh!important; border-radius:10px;
  }
  .cg-header{
    height:44px;
    padding-left: calc(24px + 12px); /* keep safe zone */
  }
  .cg-drag-handle{ width:24px; height:24px; }
}

.cg-message ul { margin: 0 0 1em 1.25em; padding: 0; }
.cg-message li { margin: .25em 0; line-height: 1.45; }
.cg-sources { margin:.5em 0 1em 0; display:flex; flex-wrap:wrap; gap:.5em; }
.cg-source-chip { text-decoration: underline; }