/* oss-chatwidget — Tradesites.ai default brand palette
   Navy:   #0A2540  (primary)
   Green:  #116149  (brand accent)
   Navy-soft: #14376A  (hover/dark)
   Surface: #FFFFFF
   Surface-2: #F5F8FB (assistant bubble background)
   Ink:    #1A2540   (body text)
   Ink-mute: #6B7280
   Border: #E3E8EF
   Error:  #B3261E on #FDECEA
*/

.osscw-root {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 2147483000;
  font: 14px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #1A2540;
}

.osscw-bubble {
  width: 64px; height: 64px; border-radius: 50%;
  background: #FFFFFF; border: 0; cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.22);
  display: flex; align-items: center; justify-content: center;
  padding: 4px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.osscw-bubble:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 37, 64, 0.28); }
.osscw-bubble img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

.osscw-panel {
  position: absolute; bottom: 80px; right: 0;
  width: 380px; max-width: calc(100vw - 2rem);
  height: 540px; max-height: calc(100vh - 7rem);
  background: #FFFFFF; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(10, 37, 64, 0.25);
  display: none; flex-direction: column; overflow: hidden;
  border: 1px solid #E3E8EF;
}
.osscw-panel[data-open="true"] { display: flex; }

.osscw-header {
  padding: 0.875rem 1rem; background: #0A2540; color: #FFFFFF;
  display: flex; align-items: center; gap: 0.75rem;
}
.osscw-header-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF;
  flex-shrink: 0; padding: 2px; display: flex; align-items: center; justify-content: center;
}
.osscw-header-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.osscw-header-text { flex: 1; min-width: 0; }
.osscw-header-title { font-weight: 600; font-size: 15px; line-height: 1.2; }
.osscw-header-subtitle { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.osscw-close {
  background: transparent; border: 0; color: #FFFFFF; font-size: 22px;
  cursor: pointer; line-height: 1; padding: 0 4px; opacity: 0.85;
}
.osscw-close:hover { opacity: 1; }

.osscw-messages {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.625rem;
  background: #FFFFFF;
}

.osscw-msg {
  padding: 0.625rem 0.875rem; border-radius: 14px; max-width: 82%;
  white-space: pre-wrap; word-wrap: break-word; line-height: 1.45;
}
.osscw-msg-user {
  align-self: flex-end;
  background: #0A2540; color: #FFFFFF;
  border-bottom-right-radius: 4px;
}
.osscw-msg-assistant {
  align-self: flex-start;
  background: #F5F8FB; color: #1A2540;
  border: 1px solid #E3E8EF;
  border-bottom-left-radius: 4px;
}
.osscw-msg-error {
  align-self: stretch; background: #FDECEA; color: #B3261E;
  font-size: 12px; text-align: center; border-radius: 8px;
}

.osscw-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 54px;
  min-height: 34px;
  padding: 0.625rem 0.875rem;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: #F5F8FB;
  border: 1px solid #E3E8EF;
}
.osscw-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6B7280;
  animation: osscw-typing-bounce 1.1s infinite ease-in-out;
}
.osscw-typing span:nth-child(2) { animation-delay: 0.15s; }
.osscw-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes osscw-typing-bounce {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .osscw-typing span { animation: none; }
}

.osscw-card {
  align-self: flex-start; max-width: 86%;
  background: #FFFFFF; border: 1px solid #E3E8EF; border-radius: 8px;
  padding: 0.75rem; box-shadow: 0 6px 18px rgba(10, 37, 64, 0.08);
}
.osscw-card-title { font-weight: 700; font-size: 13px; margin-bottom: 0.375rem; }
.osscw-card-line { font-size: 12px; color: #1A2540; margin-top: 0.25rem; word-break: break-word; }
.osscw-card-action {
  margin-top: 0.625rem; padding: 0.5rem 0.75rem; background: #0A2540; color: #FFFFFF;
  border: 0; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.osscw-card-action:disabled { background: #9FB2C7; cursor: not-allowed; }

.osscw-input-row {
  display: flex; gap: 0.5rem; padding: 0.625rem;
  border-top: 1px solid #E3E8EF; background: #FFFFFF;
}
.osscw-input {
  flex: 1; padding: 0.625rem 0.875rem;
  border: 1px solid #E3E8EF; border-radius: 10px;
  font: inherit; color: #1A2540; background: #FFFFFF;
}
.osscw-input::placeholder { color: #6B7280; }
.osscw-input:focus { outline: 2px solid #5FB3D4; outline-offset: -1px; border-color: #5FB3D4; }
.osscw-send {
  padding: 0.625rem 1rem; background: #0A2540; color: #FFFFFF;
  border: 0; border-radius: 10px; cursor: pointer; font-weight: 600;
  transition: background 0.15s ease;
}
.osscw-send:hover:not(:disabled) { background: #14376A; }
.osscw-send:disabled { background: #9FB2C7; cursor: not-allowed; }

/* Mobile */
@media (max-width: 480px) {
  .osscw-root { bottom: 0.75rem; right: 0.75rem; }
  .osscw-panel {
    width: calc(100vw - 1.5rem); height: calc(100vh - 6rem);
    bottom: 76px;
  }
}