:root {
  --rsp-blue: #123b70;
  --rsp-orange: #f7941d;
  --rsp-gray: #f4f6f8;
}

#order-status-chat-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 100;
  border: 0;
  border-radius: 999px;
  background: var(--rsp-blue);
  color: white;
  padding: 14px 20px;
  font: 700 15px/1.2 Arial, sans-serif;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  cursor: pointer;
}

#order-status-chat-panel {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 100;
  width: min(370px, calc(100vw - 28px));
  height: 520px;
  max-height: calc(100vh - 110px);
  background: white;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  overflow: hidden;
  display: none;
  font-family: Arial, sans-serif;
}

#order-status-chat-panel.open { display: flex; flex-direction: column; }

.osc-header {
  background: var(--rsp-blue);
  color: white;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.osc-header strong { font-size: 16px; }
.osc-close { border: 0; background: transparent; color: white; font-size: 22px; cursor: pointer; }

.osc-notice {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e7ef;
  font-size: 13px;
  line-height: 1.35;
}

.osc-notice strong {
  display: block;
  margin-bottom: 3px;
}

.osc-notice span { display: block; }
.osc-notice-info { background: #eef6ff; color: #123b70; }
.osc-notice-warning { background: #fff7e8; color: #4b3413; }
.osc-notice-critical { background: #fdecec; color: #7f1d1d; }

.osc-messages {
  flex: 1;
  padding: 14px;
  overflow: auto;
  background: var(--rsp-gray);
}

.osc-message {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 12px;
  max-width: 88%;
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.osc-bot { background: white; color: #172033; border: 1px solid #e2e7ef; }
.osc-user { background: var(--rsp-blue); color: white; margin-left: auto; }
.osc-system { background: #fff7e8; border: 1px solid #ffd89b; color: #4b3413; }
.osc-loading { background: white; color: #536176; border: 1px dashed #b8c4d4; font-style: italic; }
.osc-purchase-note { color: #2e7d32; font-weight: 700; margin-bottom: 8px; }
.osc-dashboard { background: #eef6ff; border: 1px solid #a7d3ff; color: #123b70; }
.osc-dashboard a { color: #0b66c3; font-weight: 700; word-break: break-word; }

.osc-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e2e7ef;
  background: white;
}

.osc-input-row input {
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
}

.osc-input-row button, .osc-login-link {
  border: 0;
  border-radius: 8px;
  background: var(--rsp-orange);
  color: #1e1e1e;
  font-weight: 700;
  padding: 10px 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.osc-login { padding: 14px; background: white; border-top: 1px solid #e2e7ef; }
.osc-login p { margin: 0 0 10px; font-size: 14px; }

.osc-auth-checking {
  padding: 14px;
  background: white;
  border-top: 1px solid #e2e7ef;
}

.osc-auth-skeleton.product-status {
  color: #172033;
  font-size: 14px;
}

.osc-auth-skeleton .product-status-left,
.osc-auth-skeleton .product-availability-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.osc-auth-skeleton .in-stock-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.osc-auth-skeleton .stock-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.osc-auth-skeleton .stock-icon.in-stock,
.osc-auth-skeleton .stock-text.in-stock {
  color: #2e7d32;
}

.osc-auth-skeleton .stock-text {
  font-weight: 700;
}

.osc-auth-skeleton .availability-alternatives-copy {
  display: flex;
  align-items: center;
  min-height: 16px;
  padding-left: 30px;
}

.osc-skeleton-line {
  display: block;
  width: 72%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e6ebf2 25%, #f7f9fc 37%, #e6ebf2 63%);
  background-size: 400% 100%;
}

.osc-skeleton-shimmer {
  animation: osc-skeleton-shimmer 1.25s ease-in-out infinite;
}

@keyframes osc-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.hidden { display: none !important; }