/* =========================================================
   OMAN UMRAH — AI BOOKING ASSISTANT CHAT WIDGET
   Uses the SAME design tokens as the main site
   (--ink, --gold, --gold-soft, --sand, --sand-dim, --rose, --line)
   so it visually matches the existing navy/gold theme.
   ========================================================= */

/* ---------- Floating Launcher Button ---------- */
#ou-chat-launcher{
  position:fixed;
  bottom:24px;
  right:24px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--rose));
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(13,27,42,0.35);
  z-index:9999;
  transition:transform .25s ease, box-shadow .25s ease;
}
#ou-chat-launcher:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 12px 30px rgba(13,27,42,0.45);
}
#ou-chat-launcher svg{ width:26px; height:26px; }
#ou-chat-launcher .ou-icon-chat{ color:var(--ink); display:block; }
#ou-chat-launcher .ou-icon-close{ color:var(--ink); display:none; }
#ou-chat-launcher.open .ou-icon-chat{ display:none; }
#ou-chat-launcher.open .ou-icon-close{ display:block; }

/* small unread/notify dot on launcher (used before first open) */
#ou-chat-launcher .ou-ping{
  position:absolute;
  top:-3px; right:-3px;
  width:14px; height:14px;
  background:var(--rose);
  border:2px solid var(--sand);
  border-radius:50%;
  animation:ouPing 1.8s ease-in-out infinite;
}
@keyframes ouPing{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.25); opacity:.7; }
}

/* ---------- Chat Window ---------- */
#ou-chat-window{
  position:fixed;
  bottom:98px;
  right:24px;
  width:370px;
  max-width:calc(100vw - 32px);
  height:min(560px, calc(100vh - 140px));
  background:var(--sand);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(13,27,42,0.35);
  z-index:9998;
  font-family:'Work Sans', sans-serif;
  transform-origin:bottom right;
  opacity:0;
  transform:scale(0.85) translateY(16px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
#ou-chat-window.ou-open{
  opacity:1;
  transform:scale(1) translateY(0);
  pointer-events:auto;
}

/* ---------- Header ---------- */
.ou-chat-header{
  background:var(--ink);
  color:var(--sand);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  border-bottom:1px solid var(--line);
}
.ou-chat-header img{
  width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0;
}
.ou-chat-header .ou-header-text{ flex:1; min-width:0; }
.ou-chat-header .ou-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:15px;
  line-height:1.25;
}
.ou-chat-header .ou-status{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--gold-soft);
  display:flex; align-items:center; gap:6px;
  margin-top:3px;
}
.ou-chat-header .ou-status .ou-dot{
  width:7px; height:7px; border-radius:50%; background:#5FCB7A; flex-shrink:0;
}
.ou-chat-header .ou-close-btn{
  background:transparent; border:none; color:var(--sand-dim);
  cursor:pointer; padding:4px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:.15s;
}
.ou-chat-header .ou-close-btn:hover{ background:rgba(243,236,221,0.12); color:var(--sand); }
.ou-chat-header .ou-close-btn svg{ width:18px; height:18px; }

/* ---------- Messages Area ---------- */
.ou-chat-body{
  flex:1;
  overflow-y:auto;
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:
    radial-gradient(ellipse 400px 200px at 100% 0%, rgba(201,162,75,0.06), transparent 60%),
    var(--sand);
}
.ou-chat-body::-webkit-scrollbar{ width:6px; }
.ou-chat-body::-webkit-scrollbar-thumb{ background:var(--sand-dim); border-radius:6px; }

/* message row */
.ou-msg-row{ display:flex; flex-direction:column; max-width:84%; animation:ouFadeIn .25s ease; }
.ou-msg-row.ou-bot{ align-self:flex-start; align-items:flex-start; }
.ou-msg-row.ou-user{ align-self:flex-end; align-items:flex-end; }
@keyframes ouFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.ou-bubble{
  padding:10px 14px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.5;
  white-space:pre-line;
  word-break:break-word;
}
.ou-msg-row.ou-bot .ou-bubble{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--sand-dim);
  border-bottom-left-radius:4px;
}
.ou-msg-row.ou-user .ou-bubble{
  background:var(--ink);
  color:var(--sand);
  border-bottom-right-radius:4px;
}
.ou-timestamp{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:#8a8272;
  margin-top:4px;
  padding:0 4px;
}

/* typing indicator */
.ou-typing{
  align-self:flex-start;
  background:#fff;
  border:1px solid var(--sand-dim);
  border-radius:14px;
  border-bottom-left-radius:4px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:4px;
}
.ou-typing span{
  width:6px; height:6px; border-radius:50%;
  background:var(--rose);
  opacity:.6;
  animation:ouTypingBounce 1.1s infinite ease-in-out;
}
.ou-typing span:nth-child(2){ animation-delay:.15s; }
.ou-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ouTypingBounce{
  0%,60%,100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* ---------- Quick Replies ---------- */
.ou-quick-replies{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:2px 4px 4px;
  align-self:flex-start;
  max-width:100%;
}
.ou-chip{
  background:#fff;
  border:1px solid var(--gold);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:12.5px;
  font-weight:500;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:.15s;
  white-space:nowrap;
}
.ou-chip:hover{ background:var(--gold); border-color:var(--gold); }
.ou-chip:active{ transform:scale(0.97); }

/* ---------- Input Row ---------- */
.ou-chat-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  background:#fff;
  border-top:1px solid var(--sand-dim);
  flex-shrink:0;
}
.ou-chat-input-row input{
  flex:1;
  border:1px solid var(--sand-dim);
  border-radius:999px;
  padding:11px 16px;
  font-family:'Work Sans', sans-serif;
  font-size:13.5px;
  color:var(--ink);
  background:var(--sand);
  outline:none;
  transition:border-color .15s;
}
.ou-chat-input-row input:focus{ border-color:var(--gold); }
.ou-chat-input-row input::placeholder{ color:#a39c8b; }
.ou-send-btn{
  width:38px; height:38px; flex-shrink:0;
  border-radius:50%;
  border:none;
  background:var(--gold);
  color:var(--ink);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s;
}
.ou-send-btn:hover{ background:var(--gold-soft); }
.ou-send-btn:active{ transform:scale(0.92); }
.ou-send-btn svg{ width:17px; height:17px; }

/* ---------- Mobile Responsive ---------- */
@media (max-width:480px){
  #ou-chat-window{
    right:12px;
    left:12px;
    bottom:90px;
    width:auto;
    max-width:none;
    height:min(72vh, 600px);
  }
  #ou-chat-launcher{
    right:16px;
    bottom:16px;
  }
}