:root{
  --bg:#f6f1ea;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --ink:#1b1f24;
  --muted:#6b7280;
  --line:rgba(15,23,42,.10);
  --primary:#10b981;
  --primary-2:#059669;
  --accent:#0ea5e9;
  --shadow:0 18px 50px rgba(15,23,42,.10);
  --r:18px;
  --space:16px;
  --font-body:"Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --font-display:"Lalezar", "Vazirmatn", sans-serif;
}

[hidden]{ display:none !important; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--font-body);
  background:
    radial-gradient(800px 600px at 85% -10%, rgba(16,185,129,.15), transparent 60%),
    radial-gradient(900px 600px at 10% 10%, rgba(14,165,233,.12), transparent 60%),
    linear-gradient(130deg, #f6f1ea 0%, #fefcf9 45%, #eff6ff 100%);
  background-attachment: fixed;
}

.app{
  max-width:1040px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  padding:22px;
  gap:18px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.actions{display:flex;gap:10px;align-items:center}

.brand{display:flex;gap:14px;align-items:center}
.logo{
  width:48px;height:48px;
  border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(150deg, rgba(16,185,129,.15), rgba(14,165,233,.18));
  border:1px solid rgba(16,185,129,.25);
  font-family:var(--font-display);
  font-size:20px;
}
.titles{display:flex;flex-direction:column}
.title{font-weight:800;letter-spacing:-.2px;font-size:18px}
.subtitle{color:var(--muted);font-size:12px;margin-top:2px}

.main{flex:1;display:grid;place-items:center;padding:6px 0}
.card{
  width:min(560px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:24px 22px;
}

.h1{margin:0 0 10px;font-size:24px;font-family:var(--font-display)}
.p{margin:0 0 16px;color:var(--muted);line-height:1.9}

.label{display:block;margin:12px 0 6px;color:#334155;font-size:13px}
.input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fbfdff;
  color:var(--ink);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.input:focus{border-color:rgba(16,185,129,.55); box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.ltr{direction:ltr;text-align:left}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.btn{
  appearance:none;border:0;cursor:pointer;
  padding:12px 16px;border-radius:14px;
  font-weight:700;
  color:var(--ink);
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,.08)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.primary{
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  border-color:rgba(16,185,129,.35);
  color:#052e1a;
}
.btn.ghost{background:transparent}
.row{display:flex;gap:12px;justify-content:space-between;margin-top:14px;flex-wrap:wrap}
.hint{margin-top:12px;color:var(--muted);min-height:20px;font-size:13px}

.footer{padding:8px 0;color:var(--muted);text-align:center;font-size:12px}
.muted{opacity:.85}

/* Chat */
.chat{
  width:min(760px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;flex-direction:column;
  height:min(78vh, 820px);
}
.chatHead{
  padding:16px 18px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.chatTitle{font-weight:900;font-size:18px}
.chatMeta{color:var(--muted);font-size:12px;margin-top:4px;max-width:520px}
.chatBody{
  padding:16px 16px 10px;
  overflow:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:linear-gradient(180deg, rgba(16,185,129,.04), rgba(14,165,233,.03));
}
.bubble{
  max-width:78%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  line-height:1.75;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.bubble.me{margin-right:auto;background:#ecfdf5;border-color:rgba(16,185,129,.28)}
.bubble.them{margin-left:auto;background:#eef6ff;border-color:rgba(14,165,233,.25)}
.meta{
  margin-top:6px;
  color:rgba(107,114,128,.95);
  font-size:11px;
  display:flex;gap:10px;align-items:center;
}
.chatComposer{
  padding:14px;
  border-top:1px solid var(--line);
  display:flex;gap:10px;
  background:var(--surface-2);
}
.chatComposer .input{flex:1}

/* Backoffice */
.backoffice{
  width:min(1100px, 100%);
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
  align-items:stretch;
}
.panelList{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:560px;
}
.panelHead{
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.panelTitle{font-weight:800;font-size:16px}
.panelMeta{color:var(--muted);font-size:12px;margin-top:4px}
.panelItems{padding:8px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.panelItem{
  text-align:right;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.panelItem:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,.08)}
.panelItemRow{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.panelPhone{font-weight:700}
.panelTime{font-size:11px;color:var(--muted)}
.panelPreview{font-size:12px;color:var(--muted);line-height:1.6;max-height:38px;overflow:hidden}

.panelChat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:560px;
}
.panelChatHead{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.panelChatBody{
  padding:16px;
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:linear-gradient(180deg, rgba(16,185,129,.04), rgba(14,165,233,.03));
}
.panelChatComposer{
  padding:14px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  background:var(--surface-2);
}
.panelChatComposer .input{flex:1}

@media (max-width: 720px){
  .app{padding:16px}
  .topbar{flex-direction:column;align-items:flex-start;gap:10px}
  .card{padding:20px 18px}
  .chat{height:min(78vh, 760px)}
  .chatHead{align-items:flex-start;gap:10px}
  .chatMeta{max-width:unset}
  .backoffice{grid-template-columns:1fr}
}