/* Heritage Fiji V3.5 — 06-visitor-account-chatbot.css
   Formatting/organization only. Rule order is preserved from V3.4. */

/* =========================================================
   FRONTEND V3 — visitor accounts, request tracking & chatbot
   ========================================================= */
:root {
  --violet:#6f63c8;
  --sky:#ddecf7;
  --soft-coral:#f6e5df;
  --soft-blue:#eaf2f8;
  --soft-gold:#fbf1dc
}

.site-header {
  box-shadow:0 10px 30px rgba(16,42,67,.04)
}

.account-button {
  height:42px;
  max-width:170px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:14px;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap
}

.account-button:hover {
  border-color:var(--blue);
  color:var(--blue);
  transform:translateY(-1px)
}

.account-button.signed-in {
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  border-color:transparent
}

.mobile-account-link {
  border:0;
  background:var(--soft-blue);
  color:var(--navy);
  padding:13px;
  border-radius:11px;
  font-weight:850;
  text-align:left;
  cursor:pointer
}

.hero-glass {
  border-color:rgba(255,255,255,.2);
  box-shadow:0 20px 70px rgba(4,18,29,.22)
}

.section-tint {
  background:linear-gradient(180deg,color-mix(in srgb,var(--sky) 52%,transparent),transparent)
}

.action-callout {
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:28px;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  border-radius:26px;
  box-shadow:var(--shadow)
}

.action-callout p {
  color:#d6e2e9;
  margin-bottom:0
}

.action-callout .btn-secondary {
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);
  color:#fff
}

.secure-note {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  background:var(--soft-blue);
  border:1px solid color-mix(in srgb,var(--blue) 18%,transparent);
  color:var(--ink);
  font-size:.79rem
}

.secure-note strong {
  display:block
}

.secure-note span:first-child {
  font-size:1.2rem
}

.locked-action {
  display:grid;
  place-items:center;
  text-align:center;
  min-height:180px;
  padding:25px;
  border:1px dashed color-mix(in srgb,var(--blue) 35%,var(--line));
  border-radius:20px;
  background:linear-gradient(180deg,var(--soft-blue),var(--paper))
}

.locked-action h3 {
  font:500 1.5rem Georgia,serif;
  margin:10px 0 5px
}

.locked-action p {
  color:var(--muted);
  font-size:.8rem;
  max-width:420px
}

.auth-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.auth-panel {
  padding:24px;
  border-radius:20px;
  background:var(--cream);
  border:1px solid var(--line)
}

.auth-panel h3 {
  font:500 1.65rem Georgia,serif;
  margin:0 0 7px
}

.auth-panel p {
  font-size:.77rem;
  color:var(--muted)
}

.auth-tabs {
  display:flex;
  gap:7px;
  margin:17px 0
}

.auth-tab {
  flex:1;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:12px;
  padding:10px;
  font-weight:800;
  cursor:pointer
}

.auth-tab.active {
  background:var(--navy);
  color:#fff;
  border-color:var(--navy)
}

.auth-benefits {
  display:grid;
  gap:10px
}

.auth-benefit {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:11px;
  border-radius:13px;
  background:var(--paper);
  border:1px solid var(--line);
  font-size:.75rem
}

.auth-benefit span {
  font-size:1rem
}

.account-hero {
  padding:70px 0;
  background:radial-gradient(circle at 85% 15%,rgba(111,99,200,.18),transparent 28%),linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff
}

.account-hero h1 {
  font:500 clamp(3rem,7vw,6rem)/.95 Georgia,serif;
  margin:14px 0
}

.account-hero p {
  color:#d9e5eb
}

.account-layout {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:20px
}

.account-sidebar {
  padding:17px;
  align-self:start;
  position:sticky;
  top:calc(var(--header) + 18px)
}

.account-profile {
  padding:14px;
  border-radius:16px;
  background:var(--soft-blue);
  margin-bottom:14px
}

.account-profile strong {
  display:block
}

.account-profile small {
  color:var(--muted)
}

.account-nav {
  display:grid;
  gap:5px
}

.account-nav button {
  border:0;
  background:transparent;
  text-align:left;
  color:var(--ink);
  padding:12px;
  border-radius:11px;
  font-weight:800;
  cursor:pointer
}

.account-nav button:hover,.account-nav button.active {
  background:var(--navy);
  color:#fff
}

.account-content {
  min-width:0
}

.account-kpis {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px
}

.account-kpi {
  padding:18px
}

.account-kpi small {
  display:block;
  color:var(--muted);
  font-size:.68rem;
  font-weight:800
}

.account-kpi strong {
  display:block;
  font:500 2.35rem Georgia,serif;
  color:var(--blue);
  margin-top:5px
}

.request-list {
  display:grid;
  gap:11px
}

.request-card {
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  padding:18px;
  cursor:pointer
}

.request-card:hover {
  border-color:color-mix(in srgb,var(--blue) 40%,var(--line));
  transform:translateY(-2px)
}

.request-card h3 {
  font:500 1.3rem Georgia,serif;
  margin:0 0 5px
}

.request-card p {
  margin:0;
  color:var(--muted);
  font-size:.76rem
}

.request-ref {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-weight:900;
  color:var(--blue)
}

.request-status {
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:var(--soft-gold);
  color:var(--warning);
  font-size:.65rem;
  font-weight:900
}

.request-status.approved,.request-status.resolved,.request-status.completed {
  background:#e7f3ea;
  color:var(--success)
}

.request-status.declined,.request-status.cancelled {
  background:#f7e6e4;
  color:var(--danger)
}

.request-status.in-review,.request-status.action-required {
  background:var(--soft-blue);
  color:var(--blue)
}

.detail-sheet {
  width:min(960px,100%)
}

.detail-head {
  padding:3px 52px 20px 0;
  border-bottom:1px solid var(--line)
}

.detail-head h2 {
  font:500 2.35rem Georgia,serif;
  margin:8px 0
}

.detail-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:17px;
  margin-top:18px
}

.detail-section {
  padding:18px;
  border-radius:18px;
  background:var(--cream);
  border:1px solid var(--line)
}

.detail-section h3 {
  font:500 1.35rem Georgia,serif;
  margin:0 0 12px
}

.data-pairs {
  display:grid;
  gap:8px
}

.data-pair {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  font-size:.76rem
}

.data-pair span {
  color:var(--muted)
}

.data-pair strong {
  text-align:right
}

.timeline {
  display:grid;
  gap:12px
}

.timeline-entry {
  position:relative;
  padding:13px 14px 13px 42px;
  border-radius:15px;
  background:var(--paper);
  border:1px solid var(--line)
}

.timeline-entry:before {
  content:"";
  position:absolute;
  left:17px;
  top:17px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 13%,transparent)
}

.timeline-entry.staff:before {
  background:var(--coral)
}

.timeline-entry.internal {
  background:#fff7df
}

.timeline-entry.internal:before {
  background:var(--warning)
}

.timeline-entry strong {
  font-size:.75rem
}

.timeline-entry small {
  display:block;
  color:var(--muted);
  font-size:.66rem;
  margin-top:3px
}

.timeline-entry p {
  font-size:.77rem;
  margin:8px 0 0;
  white-space:pre-wrap
}

.reply-box {
  margin-top:13px;
  padding:15px;
  border-radius:16px;
  background:var(--soft-blue)
}

.chat-launcher {
  position:fixed;
  z-index:79;
  right:20px;
  bottom:20px;
  border:0;
  background:linear-gradient(135deg,var(--coral),#e29168);
  color:#fff;
  border-radius:999px;
  padding:13px 18px;
  display:flex;
  align-items:center;
  gap:9px;
  box-shadow:0 18px 50px rgba(126,57,36,.28);
  cursor:pointer
}

.chat-launcher:hover {
  transform:translateY(-3px)
}

.chat-launcher span {
  width:29px;
  height:29px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18)
}

.chat-panel {
  display:none;
  position:fixed;
  z-index:90;
  right:20px;
  bottom:80px;
  width:min(390px,calc(100vw - 28px));
  height:min(650px,calc(100vh - 115px));
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 30px 90px rgba(8,27,40,.3);
  overflow:hidden;
  grid-template-rows:auto 1fr auto auto auto
}

.chat-panel.open {
  display:grid;
  animation:chatIn .25s ease
}

@keyframes chatIn {
  from {
    opacity:0;
    transform:translateY(12px) scale(.98)
  }

  to {
    opacity:1;
    transform:none
  }


}

.chat-head {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:18px;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff
}

.chat-head h2 {
  font:500 1.45rem Georgia,serif;
  margin:4px 0 0
}

.chat-head small {
  color:#c9dbe4
}

.chat-head .eyebrow:before {
  background:var(--gold)
}

.chat-head button {
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:12px;
  font-size:1.4rem;
  cursor:pointer
}

.chat-messages {
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:linear-gradient(180deg,var(--soft-blue),var(--paper) 28%)
}

.chat-message {
  max-width:86%;
  padding:11px 13px;
  border-radius:16px;
  font-size:.77rem;
  white-space:pre-wrap
}

.chat-message.bot {
  align-self:flex-start;
  background:var(--paper);
  border:1px solid var(--line);
  border-bottom-left-radius:5px
}

.chat-message.user {
  align-self:flex-end;
  background:var(--navy);
  color:#fff;
  border-bottom-right-radius:5px
}

.chat-message small {
  display:block;
  margin-top:6px;
  opacity:.65
}

.chat-suggestions {
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:10px 13px;
  border-top:1px solid var(--line)
}

.chat-suggestions button {
  flex:0 0 auto;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--blue);
  border-radius:999px;
  padding:7px 10px;
  font-size:.66rem;
  font-weight:800;
  cursor:pointer
}

.chat-input-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:11px 13px
}

.chat-input-row input {
  border:1px solid var(--line);
  background:var(--cream);
  color:var(--ink);
  border-radius:13px;
  padding:11px
}

.chat-input-row button {
  border:0;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-weight:850;
  padding:0 14px
}

.chat-disclaimer {
  font-size:.57rem;
  color:var(--muted);
  padding:0 13px 11px;
  margin:0
}

.service-card .service-icon {
  background:linear-gradient(135deg,var(--soft-blue),var(--soft-coral))
}

.service-card.locked {
  opacity:.92
}

.service-card.locked:after {
  content:"Login required";
  display:inline-flex;
  margin-top:11px;
  padding:5px 8px;
  background:var(--soft-gold);
  color:var(--warning);
  border-radius:999px;
  font-size:.62rem;
  font-weight:900
}

.form-progress {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:18px 0
}

.progress-step {
  padding:10px;
  border-radius:12px;
  background:var(--cream);
  border:1px solid var(--line);
  font-size:.66rem;
  font-weight:850;
  text-align:center
}

.progress-step.active {
  background:var(--navy);
  color:#fff;
  border-color:var(--navy)
}

.chatbot-feature {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:center;
  padding:36px;
  border-radius:30px;
  background:radial-gradient(circle at 90% 5%,rgba(212,166,74,.18),transparent 32%),linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff
}

.chatbot-feature p {
  color:#d7e4ea
}

.chatbot-demo {
  padding:18px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.17);
  border-radius:22px;
  backdrop-filter:blur(12px)
}

.chatbot-demo .bubble {
  padding:11px 13px;
  border-radius:15px;
  margin:8px 0;
  font-size:.76rem
}

.chatbot-demo .bubble.user {
  background:#fff;
  color:var(--ink);
  margin-left:40px
}

.chatbot-demo .bubble.bot {
  background:rgba(255,255,255,.12);
  margin-right:35px
}

@media(max-width:1050px) {
  .account-layout {
    grid-template-columns:1fr
  }

  .account-sidebar {
    position:static
  }

  .account-nav {
    grid-template-columns:repeat(4,1fr)
  }

  .account-kpis {
    grid-template-columns:repeat(2,1fr)
  }

  .chatbot-feature {
    grid-template-columns:1fr
  }

  .detail-grid {
    grid-template-columns:1fr
  }


}

@media(max-width:720px) {
  .account-button {
    width:40px;
    padding:0;
    justify-content:center
  }

  .account-button #accountLabel {
    display:none
  }

  .action-callout {
    grid-template-columns:1fr
  }

  .auth-grid {
    grid-template-columns:1fr
  }

  .account-nav {
    grid-template-columns:1fr 1fr
  }

  .request-card {
    grid-template-columns:1fr
  }

  .request-card>div:last-child {
    text-align:left!important
  }

  .chat-launcher strong {
    display:none
  }

  .chat-launcher {
    width:54px;
    height:54px;
    padding:0;
    justify-content:center
  }

  .chat-launcher span {
    background:transparent
  }

  .chat-panel {
    right:10px;
    bottom:74px;
    width:calc(100vw - 20px);
    height:calc(100vh - 120px)
  }

  .detail-head h2 {
    font-size:1.85rem
  }

  .data-pair {
    display:grid;
    gap:3px
  }

  .data-pair strong {
    text-align:left
  }

  .account-hero {
    padding:55px 0
  }

  .chatbot-feature {
    padding:24px
  }


}

@media(max-width:430px) {
  .account-kpis {
    grid-template-columns:1fr
  }

  .account-nav {
    grid-template-columns:1fr
  }

  .auth-panel {
    padding:18px
  }

  .request-card {
    padding:15px
  }

  .detail-sheet {
    padding-inline:0
  }

  .chat-head {
    padding:15px
  }


}

.modal-card {
  width:min(920px,100%)
}