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

  --color-primary:    #0a71ff;
  --color-on-primary: #ffffff;
  --color-surface:    #ffffff;
  --shadow-color:     rgba(0,0,0,.18);

  --accent:           #ff6600;
  --lang-sep-gap:     10px;
}

/* ============================= */
/* Wrapper (floating widget)     */
/* ============================= */
#chatgpt-widget{
  position:fixed; right:20px; bottom:20px;
  width:auto; min-width:var(--widget-width);
  height:var(--panel-height);
  z-index:9999;
  background:#fff;
  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;
}
#chatgpt-widget.resizing, #chatgpt-widget.resizing *{ transition:none !important; }

/* Slide-up body */
#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); }

/* Hide content when closed */
#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);
  padding:0 12px;                         /* no foldover space */
  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 show only when 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; }

/* Icon buttons — reset UA borders & align perfectly */
.cg-action{
  appearance:none; -webkit-appearance:none;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:28px; padding:0 6px; border-radius:6px; color:#fff;
}
.cg-action i{ font-size:18px; line-height:1; display:block; }
.cg-action:hover{ background:rgba(255,255,255,.12); }
.cg-action:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Optical nudges */
.cg-action-close .fa-minimize{ transform:translateY(1px); }
.cg-mic-toggle .fa-microphone{ transform:translateY(1px); }

/* Flags with real “·” separators */
.cg-flag{ padding:4px 8px; border-radius:6px; color:#fff; position:relative; }
.cg-flag.active{ background:#ff7a00; }
#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); }

/* ============================= */
/* 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;
  word-break: break-word;               /* <- hard wrap to prevent widening */
  overflow-wrap: anywhere;              /* <- break long tokens/URLs */
}
.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; }

/* Lists inside responses */
.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; display:flex; flex-wrap:wrap; gap:.5em; }
.cg-source-chip{ text-decoration:underline; }

/* 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:0 12px; }
}