/* =================================================================
   RHWAN X — App layer: auth modal, chatbot, CEO console
   Relies on tokens from styles.css. Front-end only (localStorage).
   ================================================================= */

/* ---------- ACCOUNT BUTTON (header) ---------- */
.acct-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 0.92rem; color: var(--text);
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair-2);
  background: rgba(207,224,242,0.04); cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.acct-btn:hover { border-color: var(--accent); background: rgba(90,162,255,0.08); transform: translateY(-2px); }
.acct-btn svg { width: 17px; height: 17px; }
.acct-btn__avatar {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-en); font-size: 0.72rem; font-weight: 800; color: #fff;
  background: linear-gradient(120deg, var(--blue-600), var(--blue-400));
}

/* ---------- AUTH MODAL ---------- */
.auth-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,13,0.72); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.auth-overlay.is-open { display: flex; opacity: 1; }
.auth-card {
  width: 100%; max-width: 440px; position: relative;
  background: var(--glass-bg, linear-gradient(160deg, rgba(24,42,68,0.92), rgba(9,17,29,0.92)));
  border: 1px solid var(--glass-brd, rgba(207,224,242,0.14)); border-radius: var(--radius-lg, 26px);
  padding: clamp(26px, 5vw, 38px); box-shadow: var(--sh-3, 0 30px 64px rgba(2,6,14,.6));
  transform: translateY(14px) scale(.98); transition: transform .4s var(--ease);
}
.auth-overlay.is-open .auth-card { transform: none; }
.auth-card__close {
  position: absolute; inset-block-start: 16px; inset-inline-end: 16px;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair-2);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 1.1rem;
  display: grid; place-items: center; transition: color .3s, border-color .3s;
}
.auth-card__close:hover { color: var(--text); border-color: var(--accent); }
.auth-card__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.auth-card__brand svg { width: 26px; height: 26px; }
.auth-card__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.auth-card__sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 24px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.auth-field label { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.auth-field input {
  font-family: inherit; font-size: 1rem; color: var(--text);
  background: rgba(207,224,242,0.04); border: 1px solid var(--hair-2); border-radius: 12px;
  padding: 13px 15px; transition: border-color .3s, box-shadow .3s, background .3s;
}
.auth-field input:focus { outline: none; border-color: var(--accent); background: rgba(90,162,255,0.06); box-shadow: 0 0 0 3px rgba(90,162,255,0.16); }
.auth-error { color: #ff8585; font-size: 0.85rem; min-height: 1.1em; margin-bottom: 10px; }
.auth-card .btn { width: 100%; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 0.92rem; color: var(--muted); }
.auth-switch button { background: none; border: none; color: var(--accent); font-family: inherit; font-weight: 700; cursor: pointer; font-size: 0.92rem; }
.auth-switch button:hover { text-decoration: underline; }

/* ---------- CHATBOT ---------- */
.chat-launcher {
  position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 600;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 16px 40px rgba(46,107,255,0.42);
  transition: transform .4s var(--ease), box-shadow .3s;
}
.chat-launcher:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 22px 50px rgba(46,107,255,0.55); }
.chat-launcher svg { width: 28px; height: 28px; }
.chat-launcher__pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue-400); animation: chatPulse 2.4s var(--ease) infinite; }
@keyframes chatPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

.chat-panel {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(10,19,32,0.96), rgba(7,12,22,0.97));
  border: 1px solid var(--glass-brd, rgba(207,224,242,0.14)); border-radius: 22px;
  box-shadow: var(--sh-3, 0 30px 64px rgba(2,6,14,.6)); backdrop-filter: blur(18px);
}
/* Floating variant */
.chat-panel--float {
  position: fixed; inset-block-end: 96px; inset-inline-end: 24px; z-index: 600;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 130px));
  transform-origin: bottom right; transform: translateY(16px) scale(.96); opacity: 0;
  pointer-events: none; transition: transform .4s var(--ease), opacity .3s;
}
html[dir="rtl"] .chat-panel--float { transform-origin: bottom left; inset-inline-end: 24px; }
.chat-panel--float.is-open { transform: none; opacity: 1; pointer-events: auto; }
/* Embedded variant */
.chat-panel--embed { width: 100%; height: clamp(520px, 70vh, 680px); }

.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-block-end: 1px solid var(--hair); background: rgba(46,107,255,0.07);
}
.chat-head__logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-600), var(--blue-400)); color: #fff; flex: none; }
.chat-head__logo svg { width: 22px; height: 22px; }
.chat-head__title { font-weight: 800; font-size: 1rem; line-height: 1.2; }
.chat-head__status { font-size: 0.74rem; color: var(--blue-300, #8FC0FF); display: flex; align-items: center; gap: 6px; }
.chat-head__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #46d39a; box-shadow: 0 0 8px 1px rgba(70,211,154,.7); }
.chat-head__close { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-2); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.chat-head__close:hover { color: var(--text); border-color: var(--accent); }
.chat-panel--embed .chat-head__close { display: none; }

.chat-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.chat-msg { max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: 0.95rem; line-height: 1.65; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg--bot { align-self: flex-start; background: rgba(207,224,242,0.06); border: 1px solid var(--hair); border-start-start-radius: 5px; }
.chat-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--blue-600), var(--blue-500)); color: #fff; border-start-end-radius: 5px; }
.chat-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; background: rgba(207,224,242,0.06); border: 1px solid var(--hair); border-radius: 16px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .5; animation: chatDot 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chatDot { 0%,60%,100% { transform: translateY(0); opacity:.4; } 30% { transform: translateY(-5px); opacity:1; } }

.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.chat-chip { font-family: inherit; font-size: 0.82rem; color: var(--blue-300, #8FC0FF); padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(90,162,255,0.28); background: rgba(46,107,255,0.06); cursor: pointer; transition: background .3s, border-color .3s; }
.chat-chip:hover { background: rgba(90,162,255,0.14); border-color: var(--accent); }

.chat-foot { padding: 12px 14px; border-block-start: 1px solid var(--hair); display: flex; gap: 10px; align-items: flex-end; }
.chat-foot textarea {
  flex: 1; resize: none; max-height: 110px; font-family: inherit; font-size: 0.95rem; color: var(--text);
  background: rgba(207,224,242,0.04); border: 1px solid var(--hair-2); border-radius: 14px; padding: 11px 14px; line-height: 1.5;
  transition: border-color .3s, box-shadow .3s;
}
.chat-foot textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,162,255,0.14); }
.chat-send { flex: none; width: 44px; height: 44px; border-radius: 13px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--blue-600), var(--blue-400)); color: #fff; display: grid; place-items: center; transition: transform .3s var(--ease), opacity .3s; }
.chat-send:hover { transform: translateY(-2px); }
.chat-send:disabled { opacity: .5; cursor: default; transform: none; }
.chat-send svg { width: 20px; height: 20px; }
html[dir="rtl"] .chat-send svg { transform: scaleX(-1); }

/* Login gate inside chat */
.chat-gate { margin: auto; text-align: center; padding: 24px; }
.chat-gate svg { width: 46px; height: 46px; color: var(--accent); margin-bottom: 14px; }
.chat-gate h4 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.chat-gate p { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; max-width: 30ch; margin-inline: auto; }

/* ---------- EMBEDDED CHAT SECTION (Sky Vision) ---------- */
.sv-assistant { padding-block: clamp(70px, 9vw, 120px); }
.sv-assistant__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: stretch; }
.sv-assistant__copy .sv-eyebrow { display: inline-block; }
.sv-assistant__list { display: grid; gap: 14px; margin-top: 26px; }
.sv-assistant__item { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: 0.97rem; }
.sv-assistant__item svg { flex: none; width: 20px; height: 20px; color: var(--sv-blue-2, #5AA2FF); margin-top: 2px; }
@media (min-width: 980px) {
  .sv-assistant__grid { grid-template-columns: 0.85fr 1.15fr; gap: 56px; }
}

/* ---------- CEO CONSOLE ---------- */
.ceo-shell { min-height: 100svh; }
.ceo-gate { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.ceo-head { border-block-end: 1px solid var(--hair); padding-block: 22px; background: rgba(7,12,22,0.6); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.ceo-head__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ceo-head h1 { font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.ceo-head .badge { font-family: var(--font-en); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(90,162,255,0.3); padding: 4px 10px; border-radius: 999px; }
.ceo-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; padding-block: 32px; }
.ceo-stat { padding: 22px; border-radius: 18px; border: 1px solid var(--glass-brd, rgba(207,224,242,0.12)); background: var(--glass-bg-2, linear-gradient(160deg, rgba(22,38,61,0.45), rgba(10,19,32,0.28))); }
.ceo-stat__num { font-family: var(--font-en); font-weight: 800; font-size: 2.1rem; background: linear-gradient(120deg, var(--blue-400), var(--platinum)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ceo-stat__label { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.ceo-section-title { font-size: 1.2rem; font-weight: 800; margin: 14px 0 18px; }
.ceo-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ceo-user { border: 1px solid var(--glass-brd, rgba(207,224,242,0.12)); border-radius: 18px; background: var(--glass-bg-2, linear-gradient(160deg, rgba(22,38,61,0.45), rgba(10,19,32,0.28))); overflow: hidden; }
.ceo-user__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; }
.ceo-user__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-en); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--blue-400)); flex: none; }
.ceo-user__name { font-weight: 700; }
.ceo-user__meta { font-size: 0.84rem; color: var(--muted); font-family: var(--font-en); direction: ltr; }
.ceo-user__tags { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ceo-tag { font-size: 0.72rem; color: var(--blue-300, #8FC0FF); border: 1px solid rgba(90,162,255,0.28); background: rgba(46,107,255,0.06); padding: 4px 10px; border-radius: 999px; }
.ceo-user__chat { border-block-start: 1px solid var(--hair); padding: 16px 20px; display: none; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.ceo-user.is-open .ceo-user__chat { display: flex; }
.ceo-line { font-size: 0.9rem; line-height: 1.6; padding: 9px 13px; border-radius: 12px; max-width: 88%; }
.ceo-line--user { align-self: flex-end; background: linear-gradient(135deg, var(--blue-600), var(--blue-500)); color: #fff; }
.ceo-line--bot { align-self: flex-start; background: rgba(207,224,242,0.06); border: 1px solid var(--hair); }
.ceo-line__ts { display: block; font-size: 0.66rem; opacity: .6; margin-top: 4px; font-family: var(--font-en); direction: ltr; }
.ceo-empty { color: var(--muted); padding: 40px; text-align: center; border: 1px dashed var(--hair-2); border-radius: 18px; }

.ceo-ai { border: 1px solid var(--glass-brd, rgba(207,224,242,0.12)); border-radius: 18px; padding: 22px; margin-bottom: 28px; background: rgba(46,107,255,0.05); }
.ceo-ai h3 { font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.ceo-ai p { color: var(--muted); font-size: 0.88rem; margin-bottom: 16px; }
.ceo-ai__row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ceo-ai label { font-size: 0.82rem; color: var(--muted); display: block; margin-bottom: 6px; }
.ceo-ai input, .ceo-ai select { width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--text); background: rgba(207,224,242,0.04); border: 1px solid var(--hair-2); border-radius: 12px; padding: 11px 14px; }
.ceo-ai input:focus, .ceo-ai select:focus { outline: none; border-color: var(--accent); }
.ceo-ai__status { font-size: 0.85rem; margin-top: 10px; color: var(--blue-300, #8FC0FF); }

@media (min-width: 760px) {
  .ceo-stats { grid-template-columns: repeat(4,1fr); }
  .ceo-ai__row { grid-template-columns: 2fr 1fr auto; align-items: end; }
  .chat-foot textarea { font-size: 1rem; }
}