/* Al Moasis · Dashboard v3 — custom utilities layered on top of Tailwind.
   Pixel-perfect refinements for things Tailwind utilities can't express cleanly
   (nav active state, soft pills, chips, task rows, etc.). */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body { height: 100%; }

/* ─── Left nav items ────────────────────────────────────────────────── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #475569; /* body */
  transition: background-color .12s ease, color .12s ease;
  text-decoration: none;
}
.nav-item:hover {
  background-color: #F9FAFB;
  color: #0F172A;
}
.nav-item-active {
  background-color: #ECFDF5;
  color: #0E9A6F;
  font-weight: 600;
}
.nav-item-active .nav-icon,
.nav-item-active .nav-icon-wrap svg {
  color: #0E9A6F !important;
}
.nav-icon {
  width: 18px;
  height: 18px;
  color: #94A3B8;
}
.nav-item:hover .nav-icon,
.nav-item:hover .nav-icon-wrap svg {
  color: #475569;
}
.nav-icon-wrap {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
}

/* ─── Header pills ──────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  font-size: 12.5px;
  color: #475569;
  white-space: nowrap;
}

/* ─── Quick suggestion chips ────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 13px;
  color: #0F172A;
  transition: background-color .12s ease, border-color .12s ease;
  cursor: pointer;
}
.chip:hover {
  background-color: #F9FAFB;
  border-color: #D1D5DB;
}

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: #0E9A6F;
  color: white;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid #0E9A6F;
  transition: background-color .12s ease;
  cursor: pointer;
}
.btn-primary:hover { background: #047857; border-color: #047857; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: white;
  color: #0F172A;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  transition: background-color .12s ease, border-color .12s ease;
  cursor: pointer;
}
.btn-outline:hover { background: #F9FAFB; border-color: #D1D5DB; }

/* ─── Message avatars ───────────────────────────────────────────────── */
.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── Right-panel task rows ────────────────────────────────────────── */
.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  transition: background-color .12s ease;
}
.task-item:hover { background: #F9FAFB; }
.task-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid #CBD5E1;
  border-radius: 999px;
  flex-shrink: 0;
  background: white;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.task-check:hover { border-color: #0E9A6F; }
.task-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Footer link row ───────────────────────────────────────────────── */
.link-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: #0E9A6F;
  transition: color .12s ease;
  cursor: pointer;
}
.link-row:hover { color: #047857; }

/* ─── Select-style pill (sales report dropdown) ────────────────────── */
.select-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
}
.select-pill:hover { background: #F9FAFB; }

/* ─── Scrollbar polish for chat stream + right panel ──────────────── */
#chat-stream::-webkit-scrollbar,
aside::-webkit-scrollbar { width: 6px; }
#chat-stream::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb {
  background: #E5E7EB;
  border-radius: 999px;
}
#chat-stream::-webkit-scrollbar-thumb:hover,
aside::-webkit-scrollbar-thumb:hover {
  background: #CBD5E1;
}

/* ─── Pane router ───────────────────────────────────────────────────
   Only one .pane is visible at a time. Default is .pane.hidden = display:none;
   The chat pane has no .hidden class on load (default pane). */
.pane.hidden { display: none !important; }

/* ─── WhatsApp method tabs (QR / phone code) ───────────────────────── */
.wa-method-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.wa-method-tab:hover { background: #F9FAFB; color: #0F172A; }
.wa-method-tab.wa-method-active {
  color: #0E9A6F;
  border-bottom-color: #0E9A6F;
  font-weight: 600;
}

/* ─── Animated dot (subtle pulse) for status pills ─────────────────── */
@keyframes moasis-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
.dot-pulse-emerald {
  background: #10B981;
  animation: moasis-pulse 1.6s ease-out infinite;
}

/* ─── Chat bubbles ──────────────────────────────────────────────────
   Width-hugging chat bubbles (WhatsApp-style). The bubble itself is
   inline-flex-ish — fits its content, capped at 85% of the column so
   long messages still wrap nicely. Tiny "hi" no longer stretches into
   a column-wide rectangle. */
.bubble {
  display: inline-block;
  /* 65ch is a comfortable reading width for long messages; 100% lets it
     shrink to fit the parent on narrow viewports. NO width:fit-content +
     percentage max-width — that combo created a circular constraint
     that broke single-letter messages like "hi" onto multiple lines. */
  max-width: min(65ch, 100%);
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #0F172A;
  white-space: pre-wrap;
  overflow-wrap: break-word; /* only break extra-long words, never short ones */
  word-break: normal;
}
.bubble-user {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-top-left-radius: 4px; /* visual tail on the avatar side (LTR-left in our user RTL layout) */
  box-shadow: 0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.04);
}
.bubble-agent {
  background: #ECFDF5;
  border: 1px solid #D1FAE5;
  border-top-right-radius: 4px; /* visual tail on the avatar side */
}

/* ─── Typing indicator (jumping dots) ───────────────────────────────
   Shown the instant a message is sent AND re-shown after every tool
   call, so the user always sees "still working" and a reply never pops
   in out of nowhere. Styled as an agent bubble so it reads as Moasis
   composing a message. */
.typing-dots {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
}
.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #10B981;
  display: inline-block;
  animation: moasis-typing 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .18s; }
.typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes moasis-typing {
  0%, 60%, 100% { transform: translateY(0);    opacity: .4; }
  30%           { transform: translateY(-5px); opacity: 1;  }
}
/* Respect users who ask the OS to reduce motion — fall back to a gentle
   opacity pulse instead of bouncing. */
@media (prefers-reduced-motion: reduce) {
  .typing-dots span {
    animation: moasis-dot-fade 1.4s ease-in-out infinite;
    transform: none;
  }
  @keyframes moasis-dot-fade { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
}

/* ─── Live subagent card (watch a spawned subagent work in real time) ───
   When Moasis delegates a task to a subagent, an inline card streams its
   steps live (thinking / tool calls / progress) instead of the user staring
   at silence until it returns "from the abyss". */
.subagent-card {
  width: 100%;
  max-width: min(70ch, 100%);
  border: 1px solid #D1FAE5;
  border-radius: 14px;
  background: #F7FEFB;
  overflow: hidden;
}
.subagent-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #ECFDF5;
  border-bottom: 1px solid #D1FAE5;
  font-size: 13px;
  font-weight: 600;
  color: #065F46;
}
.subagent-head .sa-spin { width: 15px; height: 15px; }
.subagent-badge {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: #D1FAE5;
  color: #065F46;
  white-space: nowrap;
}
.subagent-badge.done { background: #DCFCE7; color: #166534; }
.subagent-badge.failed { background: #FEE2E2; color: #991B1B; }
.subagent-steps {
  padding: 8px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 280px;
  overflow-y: auto;
}
.sa-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #334155;
  animation: sa-step-in .2s ease-out;
}
.sa-step .sa-ic { flex: 0 0 auto; margin-top: 2px; font-size: 12px; }
.sa-step.sa-thinking { color: #64748B; font-style: italic; }
.sa-step.sa-tool { color: #0F172A; }
.sa-step.sa-done  { color: #065F46; }
.sa-step.sa-err   { color: #991B1B; }
@keyframes sa-step-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ─── Inline activity pills (tool calls in chat stream) ─────────────
   When the agent fires a tool, a pill renders inline in the chat
   showing the friendly Arabic label + spinner. When the tool finishes,
   the pill transitions to ✓ done state. This is the "show me every
   step" behavior the customer expects — no more black-box silence. */
.activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.activity-pill .activity-label { white-space: nowrap; }
.activity-pill .activity-state { white-space: nowrap; }

.activity-running {
  background: #ECFDF5;
  border-color: #D1FAE5;
  color: #0E9A6F;
}
.activity-done {
  background: #ECFDF5;
  border-color: #BBF7D0;
  color: #047857;
}
.activity-done .activity-state { color: #047857; opacity: 0.7; }
.activity-failed {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}
.activity-failed .activity-state { color: #B91C1C; opacity: 0.8; }

/* Fade-in for new activity rows so they don't pop in jarringly */
.activity-row {
  animation: activity-in 220ms ease-out;
}
@keyframes activity-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Modals (license overlay + onboarding wizard) ─────────────────── */
.moasis-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.moasis-modal.hidden { display: none; }
.moasis-modal-card {
  background: white;
  border-radius: 20px;
  padding: 28px;
  width: 100%;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  max-height: 90vh;
  overflow-y: auto;
}

/* line-clamp helpers used in card lists */
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Narrow laptops: tighten side panels ──────────────────────────── */
@media (max-width: 1400px) {
  aside.w-\[340px\] { width: 300px; }
  aside.w-\[220px\] { width: 200px; }
}
@media (max-width: 1180px) {
  aside.w-\[340px\] { width: 280px; }
}
