/* ==========================================================================
   chat-widget.css  —  Organic Shapes local AI chat widget
   LOCAL ONLY. No @import, no remote url(), no web fonts, no CDNs, no trackers.
   Brand palette: forest green #1f5130 / #143a23, leaf green #2d7f1e,
   bone #f7f6f1, white. System font stack.
   All selectors namespaced .osc-  (Organic Shapes Chat).
   ========================================================================== */

.osc-root{
  --osc-green:#1f5130;
  --osc-green-d:#143a23;
  --osc-accent:#2d7f1e;
  --osc-accent-d:#21601a;
  --osc-cream:#f7f6f1;
  --osc-card:#eef1ea;
  --osc-ink:#24312a;
  --osc-muted:#6c766e;
  --osc-line:#e3e6df;
  --osc-white:#ffffff;
  --osc-font:'Poppins','Segoe UI',Helvetica,Arial,sans-serif;
  --osc-shadow:0 14px 40px rgba(20,43,35,.24);
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:2147483000;
  font-family:var(--osc-font);
}
.osc-root *,
.osc-root *::before,
.osc-root *::after{ box-sizing:border-box; }

/* ---- launcher button ----------------------------------------------------- */
.osc-launcher{
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  cursor:pointer;
  background:var(--osc-green);
  color:var(--osc-white);
  font-family:var(--osc-font);
  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;
  padding:13px 18px;
  border-radius:30px;
  box-shadow:var(--osc-shadow);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.osc-launcher:hover{ background:var(--osc-green-d); transform:translateY(-1px); }
.osc-launcher:focus-visible{ outline:3px solid var(--osc-accent); outline-offset:2px; }
.osc-launcher__ic{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  background:var(--osc-accent);
  display:inline-flex;align-items:center;justify-content:center;
}
.osc-launcher__ic svg{ width:13px;height:13px;stroke:var(--osc-white);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.osc-root.osc-open .osc-launcher{ display:none; }

/* ---- panel --------------------------------------------------------------- */
.osc-panel{
  position:absolute;
  right:0;
  bottom:0;
  width:370px;
  max-width:calc(100vw - 44px);
  height:540px;
  max-height:calc(100vh - 60px);
  display:none;
  flex-direction:column;
  background:var(--osc-cream);
  border:1px solid var(--osc-line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--osc-shadow);
}
.osc-root.osc-open .osc-panel{
  display:flex;
  animation:osc-slide-up .22s ease;
}
@keyframes osc-slide-up{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---- header -------------------------------------------------------------- */
.osc-header{
  display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,#1f5130 0%,#2d7f1e 100%);
  color:var(--osc-white);
  padding:14px 16px;
}
.osc-header__badge{
  width:30px;height:30px;flex:0 0 auto;border-radius:8px;
  background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;
}
.osc-header__badge svg{ width:17px;height:17px;stroke:var(--osc-white);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.osc-header__txt{ flex:1 1 auto;min-width:0; }
.osc-header__title{ font-size:14.5px;font-weight:700;line-height:1.2; }
.osc-header__sub{ font-size:11.5px;opacity:.85;line-height:1.2;margin-top:2px; }
.osc-close{
  border:0;background:rgba(255,255,255,.14);color:var(--osc-white);
  width:30px;height:30px;border-radius:8px;cursor:pointer;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.osc-close:hover{ background:rgba(255,255,255,.26); }
.osc-close:focus-visible{ outline:2px solid var(--osc-white);outline-offset:2px; }
.osc-close svg{ width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round; }

/* ---- messages ------------------------------------------------------------ */
.osc-messages{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px 14px 6px;
  display:flex;
  flex-direction:column;
  gap:11px;
  scrollbar-width:thin;
}
.osc-msg{
  max-width:86%;
  padding:10px 13px;
  border-radius:13px;
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:anywhere;
}
.osc-msg--bot{
  align-self:flex-start;
  background:var(--osc-white);
  color:var(--osc-ink);
  border:1px solid var(--osc-line);
  border-top-left-radius:4px;
}
.osc-msg--user{
  align-self:flex-end;
  background:var(--osc-green);
  color:var(--osc-white);
  border-top-right-radius:4px;
}
.osc-msg--error{
  align-self:flex-start;
  background:#fbeceb;
  color:#8a2a12;
  border:1px solid #f0cfc8;
  border-top-left-radius:4px;
}

/* link chips under a bot message */
.osc-links{ display:flex;flex-wrap:wrap;gap:7px;margin-top:9px; }
.osc-link{
  display:inline-block;
  font-size:12px;font-weight:600;text-decoration:none;
  color:var(--osc-green);
  background:var(--osc-card);
  border:1px solid var(--osc-line);
  border-radius:14px;
  padding:5px 11px;
  transition:background .15s ease,border-color .15s ease;
}
.osc-link:hover{ background:#e3ebdf;border-color:var(--osc-accent); }
.osc-link:focus-visible{ outline:2px solid var(--osc-accent);outline-offset:1px; }

/* typing indicator */
.osc-typing{ display:inline-flex;gap:4px;align-items:center;padding:2px 0; }
.osc-typing span{
  width:7px;height:7px;border-radius:50%;background:var(--osc-accent);opacity:.55;
  animation:osc-bounce 1.1s infinite ease-in-out;
}
.osc-typing span:nth-child(2){ animation-delay:.16s; }
.osc-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes osc-bounce{
  0%,80%,100%{ transform:translateY(0);opacity:.45; }
  40%{ transform:translateY(-4px);opacity:.9; }
}

/* ---- composer ------------------------------------------------------------ */
.osc-form{
  display:flex;align-items:flex-end;gap:9px;
  padding:11px 12px;
  background:var(--osc-white);
  border-top:1px solid var(--osc-line);
}
.osc-input{
  flex:1 1 auto;
  resize:none;
  font-family:var(--osc-font);
  font-size:14px;
  line-height:1.4;
  color:var(--osc-ink);
  background:var(--osc-cream);
  border:1px solid var(--osc-line);
  border-radius:11px;
  padding:10px 12px;
  max-height:96px;
  min-height:42px;
}
.osc-input:focus{ outline:2px solid var(--osc-accent);outline-offset:0;border-color:var(--osc-accent); }
.osc-input::placeholder{ color:var(--osc-muted); }
.osc-send{
  flex:0 0 auto;
  border:0;cursor:pointer;
  width:42px;height:42px;border-radius:11px;
  background:var(--osc-accent);
  color:var(--osc-white);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,opacity .15s ease;
}
.osc-send:hover{ background:var(--osc-accent-d); }
.osc-send:focus-visible{ outline:3px solid var(--osc-green);outline-offset:2px; }
.osc-send svg{ width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.osc-root.osc-busy .osc-send,
.osc-send:disabled{ opacity:.5;cursor:not-allowed; }
.osc-root.osc-busy .osc-input{ opacity:.7; }

/* footer note */
.osc-foot{
  font-size:10.5px;color:var(--osc-muted);text-align:center;
  padding:0 12px 9px;background:var(--osc-white);
}

/* ---- mobile: full-width panel under 480px -------------------------------- */
@media (max-width:480px){
  .osc-root{ right:14px;bottom:14px; }
  .osc-panel{
    position:fixed;
    right:0;left:0;bottom:0;top:0;
    width:100vw;max-width:100vw;
    height:100vh;max-height:100vh;
    border-radius:0;
    border:0;
  }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .osc-launcher,.osc-link,.osc-send,.osc-close,.osc-msg{ transition:none; }
  .osc-root.osc-open .osc-panel{ animation:none; }
  .osc-typing span{ animation:none;opacity:.6; }
}