/* ==========================================================================
   GigaMarket – Storefront Chatbot Widget (Sofia)
   Compatible: dark/light mode (data-theme), RTL (dir="rtl"), mobile-first
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  --gm-chat-accent:       #28a745;
  --gm-chat-accent-dark:  #1e7e34;
  --gm-chat-bg:           #ffffff;
  --gm-chat-bg-msg-user:  #e9ecef;
  --gm-chat-bg-msg-ai:    #ffffff;
  --gm-chat-border:       #dee2e6;
  --gm-chat-text:         #212529;
  --gm-chat-text-muted:   #6c757d;
  --gm-chat-shadow:       0 8px 32px rgba(0,0,0,.18);
  --gm-chat-radius:       1rem;
  --gm-chat-panel-w:      360px;
  --gm-chat-panel-h:      520px;
  --gm-chat-z:            9999;
}

[data-theme="dark"] {
  --gm-chat-bg:          #1e1e1e;
  --gm-chat-bg-msg-user: #3a3a3a;
  --gm-chat-bg-msg-ai:   #2d2d2d;
  --gm-chat-border:      #444;
  --gm-chat-text:        #f1f1f1;
  --gm-chat-text-muted:  #aaa;
  --gm-chat-shadow:      0 8px 32px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   Bubble toggle button
   -------------------------------------------------------------------------- */
#gm-chat-bubble {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--gm-chat-z);
}

[dir="rtl"] #gm-chat-bubble {
  right: auto;
  left: 1.5rem;
}

#gm-chat-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gm-chat-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 16px rgba(40,167,69,.45);
  transition: background .2s, transform .15s;
}

#gm-chat-toggle:hover,
#gm-chat-toggle:focus-visible {
  background: var(--gm-chat-accent-dark);
  transform: scale(1.07);
  outline: 2px solid var(--gm-chat-accent-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Chat panel
   -------------------------------------------------------------------------- */
.gm-chat-panel {
  display: none;
  flex-direction: column;
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  width: var(--gm-chat-panel-w);
  height: var(--gm-chat-panel-h);
  background: var(--gm-chat-bg);
  color: var(--gm-chat-text);
  border-radius: var(--gm-chat-radius);
  box-shadow: var(--gm-chat-shadow);
  border: 1px solid var(--gm-chat-border);
  z-index: var(--gm-chat-z);
  overflow: hidden;
  animation: gmChatSlideIn .2s ease;
}

[dir="rtl"] .gm-chat-panel {
  right: auto;
  left: 1.5rem;
}

.gm-chat-panel.is-open {
  display: flex;
}

@keyframes gmChatSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.gm-chat-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--gm-chat-accent);
  color: #fff;
  flex-shrink: 0;
}

.gm-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.gm-chat-header-info {
  flex: 1;
  min-width: 0;
}

.gm-chat-header-info strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-chat-status {
  font-size: .75rem;
  opacity: .85;
}

.gm-chat-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  padding: .25rem;
  border-radius: .4rem;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color .15s;
  flex-shrink: 0;
}

.gm-chat-close:hover,
.gm-chat-close:focus-visible {
  color: #fff;
  outline: 2px solid rgba(255,255,255,.6);
}

/* --------------------------------------------------------------------------
   Messages area
   -------------------------------------------------------------------------- */
.gm-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  scroll-behavior: smooth;
}

.gm-chat-msg {
  max-width: 82%;
  padding: .65rem .9rem;
  border-radius: 1rem;
  font-size: .88rem;
  line-height: 1.5;
  word-break: break-word;
}

.gm-chat-msg.user {
  background: var(--gm-chat-bg-msg-user);
  color: var(--gm-chat-text);
  margin-left: auto;
  border-bottom-right-radius: .3rem;
}

[dir="rtl"] .gm-chat-msg.user {
  margin-left: 0;
  margin-right: auto;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: .3rem;
}

.gm-chat-msg.assistant {
  background: var(--gm-chat-bg-msg-ai);
  color: var(--gm-chat-text);
  border: 1px solid var(--gm-chat-border);
  margin-right: auto;
  border-bottom-left-radius: .3rem;
}

[dir="rtl"] .gm-chat-msg.assistant {
  margin-right: 0;
  margin-left: auto;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: .3rem;
}

/* Rich HTML content from the AI */
.gm-chat-msg.assistant p   { margin: 0 0 .5rem; }
.gm-chat-msg.assistant p:last-child { margin-bottom: 0; }
.gm-chat-msg.assistant ul,
.gm-chat-msg.assistant ol  { padding-left: 1.25rem; margin: .4rem 0; }
[dir="rtl"] .gm-chat-msg.assistant ul,
[dir="rtl"] .gm-chat-msg.assistant ol { padding-left: 0; padding-right: 1.25rem; }
.gm-chat-msg.assistant li  { margin-bottom: .25rem; }
.gm-chat-msg.assistant a   { color: var(--gm-chat-accent); word-break: break-all; }
.gm-chat-msg.assistant strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Typing indicator
   -------------------------------------------------------------------------- */
.gm-chat-typing {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .6rem .9rem;
  background: var(--gm-chat-bg-msg-ai);
  border: 1px solid var(--gm-chat-border);
  border-radius: 1rem;
  border-bottom-left-radius: .3rem;
  width: fit-content;
  margin-right: auto;
}

[dir="rtl"] .gm-chat-typing {
  margin-right: 0;
  margin-left: auto;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: .3rem;
}

.gm-chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gm-chat-text-muted);
  display: inline-block;
  animation: gmChatDot 1.2s infinite ease-in-out;
}

.gm-chat-typing span:nth-child(2) { animation-delay: .2s; }
.gm-chat-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes gmChatDot {
  0%, 80%, 100% { transform: scale(.7); opacity: .5; }
  40%           { transform: scale(1.1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Input area
   -------------------------------------------------------------------------- */
.gm-chat-input-area {
  flex-shrink: 0;
  padding: .75rem .85rem;
  border-top: 1px solid var(--gm-chat-border);
  background: var(--gm-chat-bg);
}

#gm-chat-form {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.gm-chat-input {
  flex: 1;
  border: 1px solid var(--gm-chat-border);
  border-radius: 2rem;
  padding: .5rem .9rem;
  font-size: .88rem;
  background: var(--gm-chat-bg);
  color: var(--gm-chat-text);
  outline: none;
  transition: border-color .15s;
}

.gm-chat-input::placeholder {
  color: var(--gm-chat-text-muted);
}

.gm-chat-input:focus {
  border-color: var(--gm-chat-accent);
}

.gm-chat-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--gm-chat-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  transition: background .15s;
}

.gm-chat-send:hover,
.gm-chat-send:focus-visible {
  background: var(--gm-chat-accent-dark);
  outline: 2px solid var(--gm-chat-accent-dark);
  outline-offset: 2px;
}

.gm-chat-send:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Mobile (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .gm-chat-panel {
    width: 100%;
    height: 70vh;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: var(--gm-chat-radius) var(--gm-chat-radius) 0 0;
  }

  [dir="rtl"] .gm-chat-panel {
    right: 0;
    left: 0;
  }

  #gm-chat-bubble {
    bottom: 1rem;
    right: 1rem;
  }

  [dir="rtl"] #gm-chat-bubble {
    right: auto;
    left: 1rem;
  }
}