@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* Otoclic brand — matches otoclic.ma design tokens */
:root {
  --cw-primary: #da3655;
  --cw-primary-dark: #c42e4a;
  --cw-accent: #da3655;
  --cw-accent-light: #e85a75;
  --cw-gradient: linear-gradient(135deg, #da3655, #c42e4a);
  --cw-gradient-alt: linear-gradient(135deg, #da3655, #222222);
  --cw-font-family: Poppins, Arial, Helvetica, sans-serif;
  --cw-text: #222222;
  --cw-header-bg: #222222;
  --cw-header-text: #ffffff;
  --cw-header-status-color: rgba(255, 255, 255, 0.65);
  --cw-header-border: rgba(255, 255, 255, 0.12);
  --cw-header-close-color: rgba(255, 255, 255, 0.85);
  --cw-header-close-hover: rgba(255, 255, 255, 0.1);
  --cw-avatar-bg: var(--cw-primary);
  --cw-text-muted: #999999;
  --cw-secondary: #222222;
  --cw-border: #00000015;
  --cw-radius: 10px;
  --cw-font-size: 14px;
  --cw-line-height: 1.5;
  --cw-surface-muted: #f8f8f8;
  --cw-quick-border: rgba(218, 54, 85, 0.3);
  --cw-quick-hover-bg: #fdf2f4;
  --cw-composer-send-disabled-bg: #feeeee;
  --cw-composer-send-disabled-icon: #ffa5c4;
  --cw-bubble-assistant-bg: rgba(218, 54, 85, 0.1);
  --cw-bubble-assistant-border: rgba(218, 54, 85, 0.18);
  --cw-bubble-assistant-text: #222222;
  --cw-car-monthly: #3d77fd;
  --cw-car-tag-bg: #f3f4f6;
  --cw-car-tag-text: #4b5563;
  --cw-car-border: #e8e8e8;
  --cw-panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  --cw-status-online: #22C55E;
  --cw-notification-font-family: Outfit, "Outfit Fallback", sans-serif;
  --cw-prompt-bubble-width: 306px;
  --cw-prompt-text-width: 250px;
}

/* Compact header — Figma */
.panel-header {
  gap: 10px;
  padding: 10px 14px;
}

.panel-header-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.panel-header-title {
  line-height: 1.2;
}

.panel-header-status {
  gap: 5px;
  line-height: 1.2;
}

/* Message avatar — subtle red glow */
.msg-avatar {
  box-shadow: 0 4px 10px rgba(218, 54, 85, 0.35);
}

.panel-status-dot {
  background: var(--cw-status-online);
}

/* Compact car tags — fit more cards on screen */
.car-tags {
  gap: 4px;
}

.car-tag {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
}

.composer-send svg {
  width: 16px;
  height: 16px;
}