/* public/chat/chat-widget.css */
/* Chat widget – premium, reusable, garage‑themed */

/* ── Container ─────────────────────────────────── */
.cw-loading {
  text-align: center;
  color: #94a3b8;
  padding: 2rem;
}

/* ── Header ────────────────────────────────────── */
.cw-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #334155;
}
.cw-header h3 {
  margin: 0;
  color: #f39c12;
  font-size: 1.1rem;
  flex: 1;
}

/* ── Header rating area ────────────────────────── */
.cw-header-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.75rem;
  font-size: 0.9rem;
}

.cw-btn-refresh-rating {
  background: transparent;
  border: 1px solid #475569;
  color: #94a3b8;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 0.2rem;
  line-height: 1;
}
.cw-btn-refresh-rating:hover {
  color: #f39c12;
  border-color: #f39c12;
}

.cw-no-rating {
  font-size: 0.8rem;
  color: #64748b;
}

/* ── Buttons ───────────────────────────────────── */
.cw-btn-new-chat,
.cw-btn-send {
  background: #f39c12;
  color: #0f172a;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.85rem;
}
.cw-btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cw-btn-back {
  background: transparent;
  border: 1px solid #475569;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
}

/* ── Conversation list ─────────────────────────── */
.cw-conversation-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cw-conversation-item {
  background: #1e293b;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cw-conversation-item:hover {
  background: #273349;
}
.cw-garage-name {
  font-weight: 600;
  color: #e2e8f0;
}
.cw-convo-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cw-last-time {
  font-size: 0.8rem;
  color: #64748b;
}

/* ── Unread badge ──────────────────────────────── */
.cw-unread-badge {
  background: #f39c12;
  color: #0f172a;
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  min-width: 18px;
  text-align: center;
}

/* ── New Chat garage list ──────────────────────── */
.cw-garage-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cw-garage-item {
  background: #1e293b;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e2e8f0;
}
.cw-garage-item:hover {
  background: #273349;
}
.cw-garage-specs {
  font-size: 0.8rem;
  color: #94a3b8;
}

/* ── Chat messages area ────────────────────────── */
.cw-messages {
  height: 300px;
  overflow-y: auto;
  background-color: #0f172a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%23f39c12' fill-opacity='0.08' stroke='%23f39c12' stroke-opacity='0.08' stroke-width='2'%3E%3Cg transform='rotate(15 70 60)'%3E%3Cpath d='M50 40 L65 25 L75 35 L60 50 Z'/%3E%3Ccircle cx='62' cy='32' r='3'/%3E%3C/g%3E%3Cg transform='rotate(-30 160 100)'%3E%3Ccircle cx='160' cy='80' r='14' fill='none' stroke='%23f39c12' stroke-width='5'/%3E%3Ccircle cx='160' cy='80' r='5'/%3E%3Cpath d='M160 66 L160 62 M160 94 L160 98 M146 80 L142 80 M174 80 L178 80' stroke='%23f39c12' stroke-width='3'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.08' stroke='%23ffffff' stroke-opacity='0.08'%3E%3Cpath d='M100 120 L115 105 L145 105 L155 120 L170 120 L170 130 L100 130 Z'/%3E%3Ccircle cx='120' cy='130' r='5'/%3E%3Ccircle cx='150' cy='130' r='5'/%3E%3Cpath d='M115 105 L128 93 L142 93 L145 105' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3C/g%3E%3Cg transform='rotate(45 280 160)'%3E%3Ccircle cx='280' cy='140' r='12' fill='none' stroke='%23f39c12' stroke-width='4'/%3E%3Ccircle cx='280' cy='140' r='5'/%3E%3Cpath d='M280 128 L280 124 M280 152 L280 156 M268 140 L264 140 M292 140 L296 140' stroke='%23f39c12' stroke-width='3'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.08' transform='rotate(-15 60 240)'%3E%3Cpath d='M30 220 L55 200 L95 200 L105 220 L125 220 L125 230 L30 230 Z'/%3E%3Ccircle cx='60' cy='230' r='5'/%3E%3Ccircle cx='100' cy='230' r='5'/%3E%3Cpath d='M55 200 L70 185 L85 185 L95 200' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3C/g%3E%3Cg transform='rotate(70 220 300)'%3E%3Cpath d='M200 280 L215 265 L225 275 L210 290 Z' fill='%23f39c12'/%3E%3Ccircle cx='207' cy='272' r='3' fill='%23f39c12'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.08' transform='scale(0.8) translate(250,200)'%3E%3Cpath d='M160 120 L175 95 L215 95 L230 120 L250 120 L250 130 L160 130 Z'/%3E%3Ccircle cx='185' cy='130' r='5'/%3E%3Ccircle cx='225' cy='130' r='5'/%3E%3Cpath d='M175 95 L190 80 L200 80 L215 95' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3C/g%3E%3Cg transform='rotate(-60 120 340)'%3E%3Ccircle cx='110' cy='330' r='16' fill='none' stroke='%23f39c12' stroke-width='5'/%3E%3Ccircle cx='110' cy='330' r='6'/%3E%3Cpath d='M94 320 L98 316 M126 340 L130 344 M126 320 L130 316 M94 340 L98 344' stroke='%23f39c12' stroke-width='2'/%3E%3C/g%3E%3Cg fill='%23f39c12' fill-opacity='0.08' transform='rotate(25 340 80)'%3E%3Crect x='320' y='60' width='8' height='18' rx='2'/%3E%3Crect x='321' y='60' width='6' height='3' fill='%230f172a'/%3E%3Ccircle cx='324' cy='78' r='4' fill='none' stroke='%23f39c12' stroke-width='2'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.08' transform='rotate(10 280 320)'%3E%3Cpath d='M250 300 L265 285 L295 285 L305 300 L325 300 L325 310 L250 310 Z'/%3E%3Ccircle cx='275' cy='310' r='4'/%3E%3Ccircle cx='305' cy='310' r='4'/%3E%3Cpath d='M265 285 L278 275 L292 275 L295 285' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3C/g%3E%3Cg transform='rotate(-40 350 200)'%3E%3Ccircle cx='350' cy='190' r='10' fill='none' stroke='%23f39c12' stroke-width='4'/%3E%3Ccircle cx='350' cy='190' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 400px 400px;
  
  border-radius: 8px;
  border: 1px solid #334155;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

/* ── Chat bubbles ──────────────────────────────── */
.cw-bubble {
  margin-bottom: 0.75rem;
  max-width: 80%;
  clear: both;
}
.cw-from-me {
  float: right;
  text-align: right;
}
.cw-from-them {
  float: left;
  text-align: left;
}
.cw-bubble .cw-text {
  display: inline-block;
  background: #1e293b;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  color: #e2e8f0;
  word-wrap: break-word;
  max-width: 100%;
}
.cw-from-me .cw-text {
  background: #f39c12;
  color: #0f172a;
}
.cw-time {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 0.2rem;
}

/* ── Checkmarks (read receipts) ────────────────── */
.cw-checkmark {
  font-size: 0.75rem;
  margin-left: 0.2rem;
}
.cw-checkmark-sending {
  color: #94a3b8;
  font-size: 0.85rem;
}
.cw-checkmark-delivered {
  color: #94a3b8;
}
.cw-checkmark-read {
  color: #f39c12;
}
.cw-checkmark-failed {
  color: #ef4444;
  cursor: pointer;
}

/* ── Date dividers ─────────────────────────────── */
.cw-date-divider {
  text-align: center;
  margin: 1rem 0;
  clear: both;
}
.cw-date-divider span {
  background: #1e293b;
  color: #94a3b8;
  font-size: 0.75rem;
  padding: 0.2rem 0.8rem;
  border-radius: 10px;
}

/* ── Chat images ────────────────────────────────── */
.cw-chat-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 0.5rem;
  cursor: pointer;
  border: 1px solid #475569;
  display: block;
}

/* ── Image lightbox ────────────────────────────── */
.cw-lightbox-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.9);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cw-lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}
.cw-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  color: #f39c12;
  cursor: pointer;
  z-index: 5001;
}

/* ── Offline banner ────────────────────────────── */
.cw-offline-banner {
  background: #7f1d1d;
  color: #fca5a5;
  padding: 0.5rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

/* ── Expiry notice ─────────────────────────────── */
.cw-expiry-notice {
  font-size: 0.7rem;
  color: #64748b;
  text-align: center;
  margin-top: 0.5rem;
}

/* ── Typing indicator ──────────────────────────── */
.cw-typing-indicator {
  font-style: italic;
  color: #64748b;
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-bottom: 0.25rem;
}

/* ── Input area ────────────────────────────────── */
.cw-input-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}
.cw-input-area textarea {
  flex: 1 1 200px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  padding: 0.5rem;
  resize: vertical;
  font-size: 0.9rem;
}
.cw-input-area textarea:disabled {
  opacity: 0.5;
}
.cw-input-area input[type="file"] {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  padding: 0.4rem;
  font-size: 0.8rem;
}
.cw-input-area input[type="file"]:disabled {
  opacity: 0.5;
}

/* ── Misc ──────────────────────────────────────── */
.cw-empty, .cw-error {
  text-align: center;
  color: #94a3b8;
  padding: 2rem;
}
.cw-error {
  color: #fca5a5;
}

/* ── Clear floats ──────────────────────────────── */
.cw-messages::after {
  content: "";
  display: table;
  clear: both;
}

/* ── Inline toasts ─────────────────────────────── */
.cw-toast {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  animation: cw-slide-in 0.2s ease;
}
.cw-toast-error {
  background: #7f1d1d;
  color: #fca5a5;
  border: 1px solid #ef4444;
}
.cw-toast-success {
  background: #14532d;
  color: #86efac;
  border: 1px solid #22c55e;
}
@keyframes cw-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Sending checkmark with icon ────────────────── */
.cw-checkmark-sending {
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
}

/* ── Premium modal overlay ──────────────────────── */
.cw-premium-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
}
.cw-premium-box {
  background: #1e293b;
  color: #e2e8f0;
  padding: 2rem;
  border-radius: 12px;
  max-width: 360px;
  text-align: center;
}
.cw-premium-box h3 {
  margin: 0 0 1rem;
  color: #f39c12;
}
.cw-premium-box p {
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.cw-premium-box .cw-btn-primary {
  background: #f39c12;
  color: #0f172a;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 2rem;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.95rem;
}



/* ── Delete icon on hover ────────────────────────── */
.cw-bubble.cw-from-me {
  position: relative;
}
.cw-bubble .cw-delete-icon {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: #fca5a5;
  z-index: 2;
}
.cw-bubble.cw-from-me:hover .cw-delete-icon,
.cw-bubble.cw-from-me.long-press .cw-delete-icon {
  display: flex;
}

/* ── Inline confirmation tooltip ──────────────────── */
.cw-delete-confirm {
  position: absolute;
  top: -30px;
  right: 0;
  background: #1e293b;
  border: 1px solid #f39c12;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  display: flex;
  gap: 0.3rem;
  z-index: 3;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #e2e8f0;
}
.cw-delete-confirm button {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0 0.3rem;
}
.cw-delete-confirm .cw-yes-btn { color: #ef4444; }
.cw-delete-confirm .cw-no-btn { color: #94a3b8; }

/* ── Deleted placeholder ──────────────────────────── */
.cw-bubble.cw-deleted .cw-text {
  background: transparent !important;
  color: #f39c12 !important;
  font-style: italic;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border: 1px dashed #f39c12;
  border-radius: 8px;
}

/* Deep‑purple scrollbar for all chat scrollable areas */
.cw-messages::-webkit-scrollbar,
.cw-conversation-list::-webkit-scrollbar,
.cw-garage-list::-webkit-scrollbar {
  width: 8px;
}
.cw-messages::-webkit-scrollbar-track,
.cw-conversation-list::-webkit-scrollbar-track,
.cw-garage-list::-webkit-scrollbar-track {
  background: #1e293b;
  border-radius: 4px;
}
.cw-messages::-webkit-scrollbar-thumb,
.cw-conversation-list::-webkit-scrollbar-thumb,
.cw-garage-list::-webkit-scrollbar-thumb {
  background: #7e22ce;          /* deep purple */
  border-radius: 4px;
}
.cw-messages::-webkit-scrollbar-thumb:hover,
.cw-conversation-list::-webkit-scrollbar-thumb:hover,
.cw-garage-list::-webkit-scrollbar-thumb:hover {
  background: #9333ea;          /* lighter purple on hover */
}

/* Firefox */
.cw-messages,
.cw-conversation-list,
.cw-garage-list {
  scrollbar-color: #7e22ce #1e293b;
  scrollbar-width: thin;
}