/* ==========================================================================
   Gen-Man Generators - Pro Star AI assistant widget
   Chad Sanders - Pro Star CMS Development - All rights reserved.

   POSITIONING NOTES
   The launcher sits bottom-right and reserves vertical space above itself via
   --gmai-stack-offset. If an accessibility widget or any other fixed control
   is ever added to that corner, raise that one variable rather than hunting
   through this file.

   Safe areas are honoured on both axes so the launcher is not under the home
   indicator on an iPhone or behind a rounded corner in landscape.
   ========================================================================== */

:root {
  --gmai-accent: var(--accent, #fa6600);
  --gmai-dark:   var(--dark, #00263e);
  --gmai-radius: 14px;
  --gmai-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  /* Space kept clear below the launcher for anything else in that corner. */
  --gmai-stack-offset: 0px;
  --gmai-edge: 20px;
  --gmai-z: 9200;
}

/* ---- Launcher ---------------------------------------------------------- */

.gmai-launcher {
  position: fixed;
  right: calc(var(--gmai-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--gmai-edge) + var(--gmai-stack-offset) + env(safe-area-inset-bottom, 0px));
  z-index: var(--gmai-z);
  display: flex;
  align-items: center;
  gap: .55rem;
  height: 56px;
  min-width: 56px;
  padding: 0 1.1rem 0 .95rem;
  border: 0;
  border-radius: 999px;
  background: var(--gmai-accent);
  color: #fff;
  font: 600 .92rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.gmai-launcher:hover  { background: #e05c00; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.32); }
.gmai-launcher:active { transform: translateY(0); }
.gmai-launcher:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(250, 102, 0, .45);
}
.gmai-launcher svg { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; }
.gmai-launcher-label { white-space: nowrap; }

/* A small unread dot for the first visit nudge. */
.gmai-launcher-dot {
  position: absolute;
  top: 6px; right: 8px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--gmai-accent);
}

.gmai-launcher[hidden] { display: none !important; }

/* ---- Panel ------------------------------------------------------------- */

.gmai-panel {
  position: fixed;
  right: calc(var(--gmai-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--gmai-edge) + var(--gmai-stack-offset) + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--gmai-z) + 1);
  width: 400px;
  max-width: calc(100vw - 32px);
  /* dvh where supported so the panel is not cut off by mobile browser chrome */
  height: 620px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--gmai-radius);
  box-shadow: var(--gmai-shadow);
  overflow: hidden;
  font: 400 .95rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
}
.gmai-panel[hidden] { display: none !important; }

/* ---- Header ------------------------------------------------------------ */

.gmai-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: var(--gmai-dark);
  color: #fff;
}
.gmai-head-mark {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--gmai-accent);
}
.gmai-head-mark svg { width: 18px; height: 18px; fill: #fff; }
.gmai-head-text { min-width: 0; flex: 1; }
.gmai-head-name {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmai-head-sub {
  display: block;
  font-size: .74rem;
  opacity: .78;
  line-height: 1.3;
}
.gmai-head-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.gmai-head-btn:hover { background: rgba(255, 255, 255, .22); }
.gmai-head-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gmai-head-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- Log --------------------------------------------------------------- */

.gmai-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  background: #f7f8fa;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gmai-msg {
  max-width: 88%;
  margin-bottom: .8rem;
  padding: .65rem .85rem;
  border-radius: 12px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.gmai-msg p           { margin: 0 0 .6rem; }
.gmai-msg p:last-child{ margin-bottom: 0; }
.gmai-msg ul,
.gmai-msg ol          { margin: .4rem 0 .6rem; padding-left: 1.2rem; }
.gmai-msg li          { margin-bottom: .25rem; }
.gmai-msg em          { font-style: normal; font-size: .82em; opacity: .7; }

.gmai-msg--bot {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}
.gmai-msg--bot a {
  color: #0b62c4;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gmai-msg--bot a:hover { color: var(--gmai-accent); }

.gmai-msg--user {
  margin-left: auto;
  background: var(--gmai-dark);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.gmai-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: .2rem 0;
}
.gmai-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9ca3af;
  animation: gmai-bounce 1.15s infinite ease-in-out;
}
.gmai-typing span:nth-child(2) { animation-delay: .16s; }
.gmai-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes gmai-bounce {
  0%, 62%, 100% { transform: translateY(0);     opacity: .45; }
  32%           { transform: translateY(-5px);  opacity: 1;   }
}

/* ---- Quick actions ----------------------------------------------------- */

.gmai-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .6rem 1rem 0;
  background: #f7f8fa;
  border-top: 1px solid #eef0f3;
}
.gmai-chips:empty { display: none; }
.gmai-chip {
  padding: .38rem .75rem;
  border: 1px solid #d6dae0;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font: 500 .8rem/1.3 inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.gmai-chip:hover { border-color: var(--gmai-accent); color: var(--gmai-accent); }
.gmai-chip:focus-visible { outline: 2px solid var(--gmai-accent); outline-offset: 2px; }

/* ---- Composer ---------------------------------------------------------- */

.gmai-form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .7rem 1rem;
  background: #f7f8fa;
}
.gmai-input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 96px;
  padding: .6rem .8rem;
  border: 1px solid #d6dae0;
  border-radius: 10px;
  background: #fff;
  /* 16px minimum stops iOS Safari zooming the page on focus, which is what
     pushes the composer off screen behind the keyboard. */
  font: 400 16px/1.4 inherit;
  color: inherit;
  resize: none;
  outline: none;
}
.gmai-input:focus { border-color: var(--gmai-accent); box-shadow: 0 0 0 3px rgba(250, 102, 0, .14); }
.gmai-send {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--gmai-accent);
  color: #fff;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.gmai-send:hover:not(:disabled) { background: #e05c00; }
.gmai-send:disabled { opacity: .45; cursor: default; }
.gmai-send:focus-visible { outline: 2px solid var(--gmai-dark); outline-offset: 2px; }
.gmai-send svg { width: 18px; height: 18px; fill: currentColor; }

/* ---- Footer ------------------------------------------------------------ */

.gmai-foot {
  flex: 0 0 auto;
  padding: .1rem 1rem .6rem;
  background: #f7f8fa;
  text-align: center;
  font-size: .68rem;
  line-height: 1.3;
  color: #8b93a1;
  white-space: nowrap;
}
.gmai-foot a { color: inherit; text-decoration: none; }

/* ---- Guided estimate form ---------------------------------------------- */

.gmai-lead {
  margin: .2rem 0 .8rem;
  padding: .85rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.gmai-lead h4 {
  margin: 0 0 .2rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--gmai-dark);
}
.gmai-lead-intro { margin: 0 0 .7rem; font-size: .8rem; color: #6b7280; }
.gmai-field { margin-bottom: .55rem; }
.gmai-field label {
  display: block;
  margin-bottom: .18rem;
  font-size: .76rem;
  font-weight: 600;
  color: #4b5563;
}
.gmai-field input,
.gmai-field select,
.gmai-field textarea {
  width: 100%;
  padding: .48rem .6rem;
  border: 1px solid #d6dae0;
  border-radius: 8px;
  background: #fff;
  font: 400 16px/1.4 inherit;
  color: inherit;
  outline: none;
}
.gmai-field textarea { min-height: 62px; resize: vertical; }
.gmai-field input:focus,
.gmai-field select:focus,
.gmai-field textarea:focus { border-color: var(--gmai-accent); box-shadow: 0 0 0 3px rgba(250,102,0,.14); }
.gmai-field-row { display: flex; gap: .5rem; }
.gmai-field-row > .gmai-field { flex: 1 1 0; min-width: 0; }

.gmai-consent {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .5rem 0 .7rem;
  font-size: .76rem;
  line-height: 1.45;
  color: #4b5563;
}
.gmai-consent input { flex: 0 0 auto; margin-top: .18rem; width: 16px; height: 16px; }

.gmai-err {
  margin: .2rem 0 .5rem;
  padding: .4rem .55rem;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: .76rem;
}
.gmai-err:empty { display: none; }

.gmai-lead-actions { display: flex; gap: .5rem; }
.gmai-btn {
  flex: 1 1 auto;
  padding: .55rem .9rem;
  border: 0;
  border-radius: 8px;
  font: 600 .84rem/1.3 inherit;
  cursor: pointer;
}
.gmai-btn--go     { background: var(--gmai-accent); color: #fff; }
.gmai-btn--go:hover:not(:disabled) { background: #e05c00; }
.gmai-btn--go:disabled { opacity: .55; cursor: default; }
.gmai-btn--cancel { flex: 0 0 auto; background: #eef0f3; color: #4b5563; }
.gmai-btn--cancel:hover { background: #e2e5ea; }
.gmai-btn:focus-visible { outline: 2px solid var(--gmai-dark); outline-offset: 2px; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields and fill visible ones. Also removed from the tab order and
   from the accessibility tree so no real person can reach it. */
.gmai-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Confirmation summary before sending */
.gmai-summary {
  margin: 0 0 .7rem;
  padding: .55rem .65rem;
  background: #f7f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: .78rem;
  line-height: 1.6;
}
.gmai-summary dt { font-weight: 600; color: #6b7280; }
.gmai-summary dd { margin: 0 0 .3rem; color: #1f2937; word-break: break-word; }

.gmai-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Mobile ------------------------------------------------------------ */

@media (max-width: 560px) {
  :root { --gmai-edge: 14px; }

  .gmai-launcher {
    height: 52px;
    min-width: 52px;
    padding: 0 .9rem 0 .8rem;
    font-size: .86rem;
  }
  /* The label is dropped below 380px so the launcher cannot crowd the corner
     on the narrowest handsets. */
  .gmai-panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .gmai-head { padding-top: calc(.85rem + env(safe-area-inset-top, 0px)); }
  .gmai-foot { padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  .gmai-msg  { max-width: 92%; }
}

/* Touch targets.
   Anything a finger has to hit gets 44px, which is the smallest size that is
   reliably hittable. On a pointer device the chips can stay compact - they are
   suggestions, not the primary control - so this is scoped to coarse input
   rather than to a width, because a touchscreen laptop is still a finger. */
@media (pointer: coarse) {
  .gmai-chip { min-height: 44px; padding-left: 1rem; padding-right: 1rem; }
  .gmai-send { width: 44px; height: 44px; }
  .gmai-head-btn { width: 44px; height: 44px; }
  .gmai-btn { min-height: 44px; }
  .gmai-consent input { width: 22px; height: 22px; }
}

@media (max-width: 379px) {
  .gmai-launcher-label { display: none; }
  .gmai-launcher { padding: 0; width: 52px; justify-content: center; }
}

/* ---- Accessibility preferences ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gmai-launcher,
  .gmai-panel,
  .gmai-chip,
  .gmai-send { transition: none !important; }
  .gmai-typing span { animation: none !important; opacity: .7; }
}

@media (prefers-contrast: more) {
  .gmai-msg--bot { border-color: #6b7280; }
  .gmai-chip     { border-color: #4b5563; color: #1f2937; }
  .gmai-foot     { color: #4b5563; }
}

/* ---- Visual Editor coexistence ----------------------------------------- */
/*
   While an administrator is editing the page, the assistant gets out of the
   way entirely rather than competing with the editor's own overlays for the
   same corner. The body class is set by includes/ai-chat-widget.php when
   ?ve_edit is present.
*/
body.gmai-suppressed .gmai-launcher,
body.gmai-suppressed .gmai-panel { display: none !important; }