/* =====================================================================
   Chat Widget — fixed bottom-right (landing + /app shared)
   ===================================================================== */
#imageai-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

.chat-toggle-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35, #FF9500);
  border: 0;
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.chat-toggle-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 107, 53, 0.45); }
.chat-toggle-btn:active { transform: translateY(0); }

.chat-window {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: min(400px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 100px));
  background: white;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #E5E7EB;
}
/* HTML hidden attribute MUST win over .chat-window display:flex */
.chat-window[hidden] { display: none !important; }

.chat-header {
  background: linear-gradient(135deg, #FF6B35, #FF9500);
  color: white;
  padding: 14px 16px;
}
.chat-title { display: flex; gap: 12px; align-items: center; }
.chat-avatar {
  width: 38px;
  height: 38px;
  font-size: 22px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-name { font-weight: 800; margin: 0; font-size: 15px; line-height: 1.3; }
.chat-status { font-size: 11px; opacity: 0.92; margin: 2px 0 0; line-height: 1.3; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #F9FAFB;
  scroll-behavior: smooth;
}

.chat-message {
  margin-bottom: 10px;
  max-width: 85%;
  display: flex;
}
.chat-message.user { margin-left: auto; justify-content: flex-end; }
.chat-message-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.6;
  font-size: 13.5px;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.chat-message.user .chat-message-bubble {
  background: #FF6B35;
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-message.assistant .chat-message-bubble {
  background: white;
  color: #1F2937;
  border-bottom-left-radius: 4px;
  border: 1px solid #E5E7EB;
}
.chat-message.loading .chat-message-bubble {
  background: white;
  color: #9CA3AF;
  border: 1px solid #E5E7EB;
  border-bottom-left-radius: 4px;
}
.chat-message.loading .dots { display: inline-block; min-width: 28px; }
.chat-message.loading .dots::after {
  content: '';
  animation: chatDots 1.2s steps(4, end) infinite;
}

@keyframes chatDots {
  0%   { content: '.'; }
  25%  { content: '..'; }
  50%  { content: '...'; }
  75%  { content: '....'; }
  100% { content: '.'; }
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border-top: 1px solid #E5E7EB;
}
.chat-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 22px;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s ease;
  font-family: inherit;
  color: #1F2937;
  background: white;
}
.chat-form input:focus { border-color: #FF6B35; }
.chat-form button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FF6B35;
  color: white;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-form button:hover:not(:disabled) { background: #E55A26; }
.chat-form button:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-footer-note {
  text-align: center;
  font-size: 10px;
  color: #9CA3AF;
  padding: 0 12px 8px;
  background: white;
}

@media (max-width: 480px) {
  #imageai-chat-widget { bottom: 16px; right: 16px; }
  .chat-toggle-btn { width: 52px; height: 52px; font-size: 22px; }
  .chat-window {
    width: calc(100vw - 32px);
    bottom: 68px;
    height: min(560px, calc(100vh - 90px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-toggle-btn, .chat-form input, .chat-form button { transition: none; }
}