/* PCgarage AI Websitehulp. All selectors are scoped to the widget. */
.pcgai-root {
  --pcgai-dark: #142632;
  --pcgai-accent: #78ac3c;
  --pcgai-paper: #fcfdfa;
  --pcgai-ink: #1b3337;
  --pcgai-border: #e1e8e3;
  --pcgai-muted: #6a7b7b;
  --pcgai-radius: 22px;
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom));
  right: 22px;
  z-index: 2147482000;
  width: max-content;
  color: var(--pcgai-ink);
  font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.pcgai-root.pcgai-side-left { right: auto; left: 22px; }
.pcgai-root *, .pcgai-root *::before, .pcgai-root *::after { box-sizing: border-box; }
.pcgai-root [hidden] { display: none !important; }
.pcgai-root button, .pcgai-root textarea { font: inherit; letter-spacing: normal; text-transform: none; }
.pcgai-root button { cursor: pointer; touch-action: manipulation; }
.pcgai-root button:focus-visible, .pcgai-root a:focus-visible, .pcgai-root textarea:focus-visible {
  outline: 3px solid var(--pcgai-accent) !important;
  outline-offset: 3px;
}
.pcgai-sr {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}
.pcgai-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  min-width: 168px;
  padding: 11px 18px 11px 13px;
  margin: 0;
  color: #fff !important;
  background: var(--pcgai-dark) !important;
  border: 1px solid #30524b !important;
  border-radius: 999px !important;
  box-shadow: 0 9px 28px #14263238, 0 2px 6px #14263225;
  font-size: 13.5px;
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcgai-launcher:hover { transform: translateY(-3px); box-shadow: 0 15px 35px #14263240; }
.pcgai-launch-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; color: var(--pcgai-dark); background: var(--pcgai-accent); }
.pcgai-launch-icon svg { width: 22px; height: 22px; }
.pcgai-launch-label { white-space: nowrap; }
.pcgai-launch-dot { width: 7px; height: 7px; border-radius: 50%; background: #9fe25f; box-shadow: 0 0 0 3px #9fe25f2a; }
.pcgai-dialog {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  width: min(388px, calc(100vw - 30px));
  height: min(590px, calc(100dvh - 108px));
  min-height: 370px;
  color: var(--pcgai-ink);
  background: var(--pcgai-paper);
  border: 1px solid #dbe6de;
  border-radius: 22px;
  box-shadow: 0 22px 65px #0c251e35, 0 2px 12px #0000000d;
  transform-origin: right bottom;
  animation: pcgai-appear .21s cubic-bezier(.2,.8,.2,1) both;
}
.pcgai-side-left .pcgai-dialog { right: auto; left: 0; transform-origin: left bottom; }
.pcgai-expanded .pcgai-dialog { width: min(550px, calc(100vw - 30px)); height: min(765px, calc(100dvh - 108px)); }
.pcgai-hero {
  position: relative;
  flex: 0 0 184px;
  min-height: 184px;
  padding: 20px 18px 15px;
  color: #fff;
  overflow: hidden;
  border-bottom: 4px solid var(--pcgai-accent);
  background: linear-gradient(125deg, var(--pcgai-dark) 1%, #214638 99%);
}
.pcgai-hero::before { content: ""; position: absolute; z-index: 0; right: -80px; top: 48px; width: 190px; height: 190px; border: 1px solid #ffffff22; border-radius: 50%; }
.pcgai-hero::after { content: ""; position: absolute; z-index: 0; right: -36px; top: 83px; width: 130px; height: 130px; border: 1px solid #ffffff22; border-radius: 50%; }
.pcgai-header-controls { position: absolute; top: 13px; right: 14px; z-index: 3; display: flex; gap: 8px; }
.pcgai-icon-button {
  display: grid;
  place-items: center;
  padding: 0 !important;
  width: 31px; height: 31px;
  color: #fff !important;
  background: #ffffff14 !important;
  border: 1px solid #ffffff70 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition: background .16s;
}
.pcgai-icon-button:hover { background: #ffffff35 !important; }
.pcgai-icon-button svg { width: 16px; height: 16px; }
.pcgai-brand-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; max-width: calc(100% - 88px); margin-bottom: 17px; }
.pcgai-logo { width: 29px; height: 29px; flex: 0 0 29px; border-radius: 8px; object-fit: contain; background: #fff; }
.pcgai-eyebrow { color: #daf1ce; font-size: 9.1px; font-weight: 840; letter-spacing: .095em; white-space: nowrap; }
.pcgai-separator { opacity: .55; padding: 0 2px; }
.pcgai-hero-copy { position: relative; z-index: 2; width: 70%; }
.pcgai-root .pcgai-hero-copy h2 { color: #fff !important; margin: 0 0 7px !important; font-size: 22.5px !important; line-height: 1.08 !important; font-weight: 850 !important; letter-spacing: -.055em !important; }
.pcgai-root .pcgai-hero-copy p { color: #e8f4e4 !important; margin: 0 0 6px !important; font-size: 11.5px; line-height: 1.45; }
.pcgai-hero-hint { font-size: 9.5px; font-weight: 650; color: #bce3a5; }
.pcgai-robot { position: absolute; z-index: 1; right: 0; bottom: -12px; width: 157px; height: 153px; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 8px 8px #0004); }
.pcgai-chat-shell { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: #fbfcfb; }
.pcgai-consent { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 18px 16px 15px; }
.pcgai-who { font-size: 10px; font-weight: 850; line-height: 1.25; color: #3d7b35; letter-spacing: .075em; margin-bottom: 5px; }
.pcgai-bubble { width: fit-content; max-width: 96%; background: #fff; color: #26363c; border: 1px solid var(--pcgai-border); border-radius: 5px 16px 16px 16px; box-shadow: 0 2px 3px #00000003; padding: 13px 14px; line-height: 1.53; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pcgai-consent-info { margin-top: auto; border-top: 1px solid var(--pcgai-border); padding-top: 12px; }
.pcgai-root .pcgai-consent-info p { color: #617071; font-size: 11px; line-height: 1.52; margin: 0 0 9px; }
.pcgai-consent-info a { color: #315e2c !important; font-size: 11px; font-weight: 750; text-decoration: underline; }
.pcgai-root .pcgai-consent-info p.pcgai-preview-note { color: #b35c2b; background: #fff9ec; border: 1px solid #f1d4a1; border-radius: 9px; padding: 9px; margin: 8px 0; }
.pcgai-start { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 42px; margin: 12px 0 0 !important; border: 0 !important; border-radius: 10px !important; color: #102b28 !important; background: var(--pcgai-accent) !important; font-size: 13px !important; font-weight: 850 !important; transition: filter .16s ease; }
.pcgai-start:hover { filter: brightness(1.09); }
.pcgai-start svg { width: 18px; height: 18px; }
.pcgai-custom-area { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pcgai-history { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding: 16px 15px 12px; scrollbar-color: #c4d3ca transparent; scrollbar-width: thin; }
.pcgai-line { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 14px; }
.pcgai-line-user { align-items: flex-end; }
.pcgai-line-user .pcgai-who { color: #526b6f; }
.pcgai-line-user .pcgai-bubble { background: #e5f2dc; border: 1px solid #d3e9c4; border-radius: 16px 5px 16px 16px; }
.pcgai-quick-prompts { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 7px; padding: 9px 14px 10px; border-top: 1px solid #eff1ec; }
.pcgai-quick-prompts button { padding: 6px 9px !important; margin: 0 !important; min-height: 30px !important; color: #34612b !important; border: 1px solid #d6e8cf !important; border-radius: 30px !important; background: #eff8ea !important; box-shadow: none !important; font-size: 10.7px !important; font-weight: 730 !important; white-space: nowrap; transition: border-color .15s, background .15s; }
.pcgai-quick-prompts button:hover { border-color: var(--pcgai-accent) !important; background: #e3f2db !important; }
.pcgai-compose { display: flex; align-items: stretch; gap: 8px; min-height: 77px; padding: 11px 13px 12px; border-top: 1px solid var(--pcgai-border); background: #fff; margin: 0 !important; }
.pcgai-compose textarea { display: block; resize: none; flex: 1; min-width: 0; max-height: 118px; height: 53px; margin: 0 !important; padding: 11px 12px !important; border: 1px solid #dce6df !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; color: #263c3b !important; font-size: 12px !important; line-height: 1.42 !important; }
.pcgai-compose textarea::placeholder { color: #859793; opacity: 1; }
.pcgai-send { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 53px; min-height: 53px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--pcgai-accent) !important; color: var(--pcgai-dark) !important; box-shadow: none !important; transition: filter .16s; }
.pcgai-send svg { width: 22px; height: 22px; }
.pcgai-send:hover:not(:disabled) { filter: brightness(1.08); }
.pcgai-send:disabled { opacity: .55; cursor: wait; }
.pcgai-typing { min-width: 56px; }
.pcgai-typing > span { display: inline-flex; gap: 5px; justify-content: center; align-items: center; height: 12px; }
.pcgai-typing i { display: block; width: 7px; height: 7px; background: #89a88a; border-radius: 50%; animation: pcgai-dot 1s infinite ease-in-out; }
.pcgai-typing i:nth-child(2) { animation-delay: .12s; }
.pcgai-typing i:nth-child(3) { animation-delay: .24s; }
.pcgai-workflow-area { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; padding: 0; }
.pcgai-chatkit { display: block; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; background: #fff; }
.pcgai-load-error { margin: 12px 14px !important; padding: 12px; color: #7b3825; background: #fff5ed; border: 1px solid #ebd2c2; border-radius: 9px; font-size: 12px; }
.pcgai-footer { display: flex; justify-content: flex-start; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 29px; background: #fff; padding: 7px 15px; color: #86928d; border-top: 1px solid #eef1ed; font-size: 9.4px; line-height: 1.45; }
.pcgai-small-dot { flex: 0 0 5px; width: 5px; height: 5px; background: var(--pcgai-accent); border-radius: 50%; }
@keyframes pcgai-appear { from { opacity: 0; transform: translateY(11px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pcgai-dot { 0%,60%,100% { transform: translateY(0); opacity:.5; } 30% { transform: translateY(-3px); opacity:1; } }
@media (max-width: 680px) {
  .pcgai-root, .pcgai-root.pcgai-side-left { right: 14px; left: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
  .pcgai-dialog, .pcgai-expanded .pcgai-dialog { position: fixed; right: 0; left: 0; bottom: 0; top: 0; width: 100vw; max-width: 100vw; height: 100dvh; min-height: 0; border-radius: 0; border: 0; box-shadow: none; }
  .pcgai-hero { flex-basis: 194px; min-height: 194px; padding-top: max(20px, env(safe-area-inset-top)); }
  .pcgai-robot { right: 9px; width: 170px; height: 162px; }
  .pcgai-header-controls { top: max(13px, env(safe-area-inset-top)); }
  .pcgai-footer { padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .pcgai-launcher { min-width: auto; padding: 10px 13px; min-height: 54px; }
  .pcgai-launch-icon { height: 34px; width: 34px; flex-basis: 34px; }
}
@media (max-width: 360px) {
  .pcgai-eyebrow { font-size: 8.3px; }
  .pcgai-root .pcgai-hero-copy h2 { font-size: 20px !important; }
  .pcgai-robot { width: 143px; height: 146px; }
  .pcgai-quick-prompts button { font-size: 10px !important; padding: 6px 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pcgai-root *, .pcgai-root *::before, .pcgai-root *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}