/* Credits: promptslove.com — Ramanpal Singh */
/* All rules prefixed with aiagents- to avoid conflicts */
.aiagents-container { box-sizing: border-box; }

openai-chatkit.aiagents-chatkit {
  display: block;
  /* Fill the remaining viewport height so the full chat window is visible on load */
  min-height: calc(100vh - 220px);
  height: calc(100vh - 220px);
  width: 100%;
}

/* Ensure the container itself doesn't add extra spacing */
.aiagents-container {
  width: 100%;
}

.aiagents-credit {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.7;
}
.aiagents-credit a { text-decoration: none; }


/* 0.3.1-LH: OLD-look floating styles */
#owa-launcher{
  position:fixed;right:24px;bottom:24px;width:60px;height:60px;border-radius:50%;
  background:var(--owa-primary,#0084ff);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 36px rgba(0,0,0,.22);z-index:99998;
}
#owa-launcher svg{display:block}
#owa-panel{
  position:fixed;right:24px;bottom:96px;width:380px;max-width:calc(100vw - 32px);
  background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 48px rgba(0,0,0,.24);z-index:99999;display:none;
}
#owa-panel .owa-header{
  padding:12px 14px;background:var(--owa-primary,#0084ff);color:#fff;
  display:flex;align-items:center;justify-content:space-between;font-weight:600;
}
#owa-panel .owa-body{ padding:0; }
#owa-close{ color:#fff;border:0;background:transparent;font-size:18px;cursor:pointer }

/* Apply primary color throughout the chat interface */
#owa-panel openai-chatkit {
  --chatkit-primary-color: var(--owa-primary, #0084ff);
}

.aiagents-container openai-chatkit {
  --chatkit-primary-color: var(--owa-primary, #0084ff);
}

/* ===================================================================
   EXTERNAL CONVERSATION STARTERS (rendered by plugin, outside ChatKit)
   - Same DOM as WordPress => fully styleable, no iframe/CORS issues
   =================================================================== */

.aiagents-container .owa-starters{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 12px 0;
}

@media (min-width: 640px){
  .aiagents-container .owa-starters{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.aiagents-container .owa-starter{
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  text-align: left;
}

.aiagents-container .owa-starter:hover{
  background: #f9fafb;
  border-color: #9ca3af;
  box-shadow: 0 4px 8px rgba(0,0,0,0.07);
}

.aiagents-container .owa-starter:active{
  transform: translateY(1px);
}

.aiagents-container .owa-starter.is-busy{
  opacity: 0.7;
  pointer-events: none;
}

.aiagents-container .owa-starter.is-copied{
  outline: 2px solid var(--owa-primary, #0084ff);
  outline-offset: 2px;
}

.aiagents-container .owa-starters.is-hidden{
  display: none;
}

/* ===================================================================
   CONVERSATION STARTER BUTTONS STYLING
   Enhanced button design with clear visual hierarchy and interactions
   =================================================================== */

/* Strategy 1: CSS Parts (if exposed by ChatKit) - Primary approach */
openai-chatkit::part(start-screen-prompt),
openai-chatkit::part(prompt),
openai-chatkit::part(starter-prompt),
openai-chatkit::part(start-screen-prompt-button),
openai-chatkit::part(prompt-button) {
  /* Base button styling */
  background: #ffffff !important;
  color: #374151 !important;
  border: 2px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  text-align: left !important;
  display: inline-block !important;
  width: auto !important;
  min-width: auto !important;
  margin: 6px 8px 6px 0 !important;
  position: relative !important;
  overflow: visible !important;
  user-select: none !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  max-width: 100% !important;
}

/* Hover state - darker background and border, slight lift effect */
openai-chatkit::part(start-screen-prompt):hover,
openai-chatkit::part(prompt):hover,
openai-chatkit::part(starter-prompt):hover,
openai-chatkit::part(start-screen-prompt-button):hover,
openai-chatkit::part(prompt-button):hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

/* Active/pressed state - darker background, no lift */
openai-chatkit::part(start-screen-prompt):active,
openai-chatkit::part(prompt):active,
openai-chatkit::part(starter-prompt):active,
openai-chatkit::part(start-screen-prompt-button):active,
openai-chatkit::part(prompt-button):active {
  background: #e5e7eb !important;
  border-color: #9ca3af !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(0) !important;
}

/* Focus state for accessibility */
openai-chatkit::part(start-screen-prompt):focus,
openai-chatkit::part(prompt):focus,
openai-chatkit::part(starter-prompt):focus,
openai-chatkit::part(start-screen-prompt-button):focus,
openai-chatkit::part(prompt-button):focus {
  outline: 2px solid var(--owa-primary, #0084ff) !important;
  outline-offset: 2px !important;
}

/* Strategy 2: CSS Variables that ChatKit might use internally */
openai-chatkit {
  --chatkit-prompt-bg: #ffffff;
  --chatkit-prompt-color: #374151;
  --chatkit-prompt-border: 2px solid #d1d5db;
  --chatkit-prompt-border-radius: 10px;
  --chatkit-prompt-padding: 12px 16px;
  --chatkit-prompt-font-weight: 500;
  --chatkit-prompt-font-size: 14px;
  --chatkit-prompt-cursor: pointer;
  --chatkit-prompt-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --chatkit-prompt-hover-bg: #f3f4f6;
  --chatkit-prompt-hover-border-color: #9ca3af;
  --chatkit-prompt-active-bg: #e5e7eb;
  
  --chatkit-start-screen-prompt-bg: #ffffff;
  --chatkit-start-screen-prompt-color: #374151;
  --chatkit-start-screen-prompt-border: 2px solid #d1d5db;
  --chatkit-start-screen-prompt-border-width: 2px;
  --chatkit-start-screen-prompt-border-color: #d1d5db;
  --chatkit-start-screen-prompt-border-radius: 10px;
  --chatkit-start-screen-prompt-padding: 12px 16px;
  --chatkit-start-screen-prompt-font-weight: 500;
  --chatkit-start-screen-prompt-font-size: 14px;
  --chatkit-start-screen-prompt-hover-bg: #f3f4f6;
  --chatkit-start-screen-prompt-hover-border-color: #9ca3af;
  --chatkit-start-screen-prompt-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Strategy 3: Fallback styling for elements that might not use CSS Parts */
/* Target common class patterns that ChatKit might use */
openai-chatkit [class*="prompt"],
openai-chatkit [class*="starter"],
openai-chatkit [class*="button"] {
  background: #ffffff !important;
  color: #374151 !important;
  border: 2px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

openai-chatkit [class*="prompt"]:hover,
openai-chatkit [class*="starter"]:hover,
openai-chatkit [class*="button"]:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  openai-chatkit::part(start-screen-prompt),
  openai-chatkit::part(prompt),
  openai-chatkit::part(starter-prompt),
  openai-chatkit::part(start-screen-prompt-button),
  openai-chatkit::part(prompt-button) {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
  }

  openai-chatkit::part(start-screen-prompt):hover,
  openai-chatkit::part(prompt):hover,
  openai-chatkit::part(starter-prompt):hover,
  openai-chatkit::part(start-screen-prompt-button):hover,
  openai-chatkit::part(prompt-button):hover {
    background: #374151 !important;
    border-color: #6b7280 !important;
  }

  openai-chatkit::part(start-screen-prompt):active,
  openai-chatkit::part(prompt):active,
  openai-chatkit::part(starter-prompt):active,
  openai-chatkit::part(start-screen-prompt-button):active,
  openai-chatkit::part(prompt-button):active {
    background: #4b5563 !important;
  }
}

/* Ensure buttons are properly spaced and wrapped in containers */
openai-chatkit::part(start-screen-prompts),
openai-chatkit::part(prompts-container) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
}