/* ===================================================================
   NIRVAAN — app shell (consult, chat, console)
   Inherits tokens from site.css. Calmer, denser, no marketing weight.
   =================================================================== */
@import url("site.css");

.app{ min-height:100vh; display:flex; flex-direction:column; background:var(--paper) }
.app__bar{
  display:flex; align-items:center; gap:1rem; padding:.9rem 1.2rem;
  background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20
}
.app__bar .logo{ font-size:1.15rem }
.app__spacer{ margin-left:auto }
.app__main{ flex:1; width:100%; max-width:760px; margin-inline:auto; padding:2rem 1.2rem 4rem }

.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.8rem; margin-bottom:1.2rem; margin-top: 2.5%;
}
.panel h2{ font-size:1.5rem; margin-bottom:.4rem }
.panel__sub{ color:var(--ink-70); font-size:.95rem; margin-bottom:1.6rem }

label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:.45rem }
input[type=text],input[type=tel],input[type=email],input[type=password],select,textarea{
  width:100%; font:inherit; padding:.8rem 1rem; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--paper); color:var(--ink)
}
input:focus,select:focus,textarea:focus{ border-color:var(--sage); outline:none;
  box-shadow:0 0 0 3px rgba(127,164,146,.25) }
.field{ margin-bottom:1.2rem }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.hint{ font-size:.82rem; color:var(--ink-45); margin-top:.4rem }
.otp{ letter-spacing:.5em; font-size:1.4rem; text-align:center; font-family:var(--f-display) }

.alert{ padding:.85rem 1.1rem; border-radius:var(--r-sm); font-size:.92rem; margin-bottom:1.2rem }
.alert--err{ background:#F8DCE0; color:#7A1020; border:1px solid #E8AEB8 }
.alert--ok{ background:#DFEDE4; color:#1E4038; border:1px solid #B8D4C3 }
.alert--warn{ background:var(--brass-lt); color:#6B1B33; border:1px solid #E8AEBB }

/* doctor picker */
.pick{ display:grid; gap:.9rem }
.pick__item{
  display:flex; gap:1rem; align-items:center; background:var(--card);
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:1.1rem; cursor:pointer;
  text-align:left; width:100%; font:inherit; color:inherit; transition:.15s
}
.pick__item:hover{ border-color:var(--sage) }
.pick__item[aria-pressed="true"]{ border-color:var(--moss); background:#FBF0F1 }
.pick__av{ width:46px; height:46px; border-radius:50%; background:var(--sage); flex:none;
  display:grid; place-items:center; color:#fff; font-family:var(--f-display) }
.pick__name{ font-weight:700 }
.pick__meta{ font-size:.83rem; color:var(--ink-45) }
.pick__rate{ margin-left:auto; text-align:right; font-weight:700; white-space:nowrap }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.35rem }
.dot--on{ background:#3FA06B } .dot--busy{ background:var(--brass) } .dot--off{ background:#B9C2BE }

/* meter */
.meter{
  display:flex; align-items:center; gap:1.4rem; background:var(--ink); color:var(--paper);
  padding:.75rem 1.2rem; border-radius:var(--r-md); margin-bottom:1rem; font-size:.88rem
}
.meter b{ font-family:var(--f-display); font-size:1.15rem; font-variant-numeric:tabular-nums }
.meter--free{ background:var(--moss) }
.meter--low{ background:#7A1020 }

/* chat */
.chat{ display:flex; flex-direction:column; height:min(62vh,560px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); overflow:hidden }
.chat__log{ flex:1; overflow-y:auto; padding:1.4rem; display:flex; flex-direction:column; gap:.75rem }
.msg{ max-width:74%; padding:.7rem 1rem; border-radius:var(--r-md); font-size:.95rem; line-height:1.55 }
.msg--me{ align-self:flex-end; background:var(--moss); color:#fff; border-bottom-right-radius:4px }
.msg--them{ align-self:flex-start; background:var(--paper-2); border-bottom-left-radius:4px }
.msg--sys{ align-self:center; background:transparent; color:var(--ink-45); font-size:.82rem;
  text-align:center; max-width:90% }
.msg__t{ display:block; font-size:.7rem; opacity:.65; margin-top:.3rem }
.chat__form{ display:flex; gap:.6rem; padding:.9rem; border-top:1px solid var(--line) }
.chat__form input{ flex:1 }
.chat__end{ padding:1rem; text-align:center; background:var(--paper-2); font-size:.9rem }

/* console */
.console{ max-width:1080px }
.console__grid{ display:grid; grid-template-columns:320px 1fr; gap:1.2rem; align-items:start }
.queue__item{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--brass);
  border-radius:var(--r-sm); padding:1rem; margin-bottom:.8rem }
.queue__item h4{ margin:0 0 .2rem; font-family:var(--f-display); font-size:1.05rem }
.queue__meta{ font-size:.8rem; color:var(--ink-45); margin-bottom:.6rem }
.queue__concern{ font-size:.9rem; color:var(--ink-70); margin-bottom:.9rem }
.queue__acts{ display:flex; gap:.5rem }
.queue__acts .btn{ padding:.45rem 1rem; font-size:.85rem }
.toggle{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; font-weight:700 }
.toggle select{ width:auto; padding:.45rem .8rem }
.empty{ padding:2.5rem 1rem; text-align:center; color:var(--ink-45); font-size:.92rem }

.priv{ display:flex; gap:.6rem; align-items:flex-start; background:#FBF0F1;
  border:1px solid #E8C9CE; border-radius:var(--r-sm); padding:.8rem 1rem;
  font-size:.85rem; color:var(--ink-70); margin-bottom:1.2rem }

@media (max-width:820px){
  .console__grid{ grid-template-columns:1fr }
  .field--row{ grid-template-columns:1fr }
}