:root{
  --ink:#1B1030;
  --paper:#FFF4E1;
  --violet:#241640;
  --violet-2:#1A0F30;
  --accent:#FFC93C;
  --coral:#FF5A36;
  --font-display:'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --line:rgba(255,244,225,.14);
  --glass:rgba(255,244,225,.06);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#FFF4E1; } }
:root[data-theme="dark"]{ --paper:#FFF4E1; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font-display);
  background:var(--violet);
  color:var(--paper);
  height:100vh; height:100dvh;
  overflow:hidden;
}
[hidden]{ display:none !important; }
a{ color:inherit; }
button{ font-family:var(--font-mono); font-size:.85rem; font-weight:600; border:none; border-radius:999px; cursor:pointer; padding:.7em 1.3em; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

h1{ font-size:clamp(1.8rem,6vw,2.4rem); font-weight:900; margin:0 0 .3em; line-height:1.05; }
h2{ font-size:clamp(1.5rem,4vw,1.9rem); font-weight:900; margin:0 0 .3em; }
.sub{ opacity:.65; font-size:.9rem; margin:0 0 1.6rem; line-height:1.6; }
label{ display:block; font-family:var(--font-mono); font-size:.78rem; opacity:.7; margin:0 0 .4em; }
input[type="text"], input[type="password"], input[type="url"], textarea{
  width:100%; font-family:var(--font-display); font-size:1rem; color:var(--ink);
  background:var(--paper); border:none; border-radius:10px; padding:.75em .9em; margin-bottom:1.1em;
}
textarea{ resize:vertical; min-height:3.6em; font-size:.92rem; }
input:focus, textarea:focus{ outline:2px solid var(--accent); }
.btn-primary{ background:var(--accent); color:var(--ink); transition:filter .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-ghost{ background:none; border:1px solid rgba(255,244,225,.25); opacity:.75; transition:opacity .3s ease; }
.btn-ghost:hover{ opacity:1; }
.btn-danger{ background:none; color:#ff8a70; border:1px solid rgba(255,138,112,.4); padding:.5em 1em; font-size:.75rem; transition:background .3s ease; }
.btn-danger:hover{ background:rgba(255,138,112,.14); }
.icon-btn{ width:2.2rem; height:2.2rem; padding:0; display:grid; place-items:center; background:rgba(255,244,225,.08); border:1px solid var(--line); flex:none; transition:background .3s ease; }
.icon-btn:hover{ background:rgba(255,244,225,.18); }
.icon-btn svg{ width:1rem; height:1rem; }
.error{ color:var(--coral); font-size:.85rem; margin:-.4em 0 1em; min-height:1.2em; }

/* ---- sign in ---- */
.login-wrap{ height:100%; display:flex; align-items:center; justify-content:center; padding:1.5rem 1.2rem; overflow-y:auto; }
.card{
  width:100%; max-width:420px;
  background:rgba(255,244,225,.07); border:1px solid rgba(255,244,225,.18); border-radius:16px;
  padding:clamp(1.6rem,5vw,2.4rem);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,244,225,.12);
}
.card .btn-primary{ width:100%; }
.back{ display:inline-block; margin-bottom:1.6rem; font-family:var(--font-mono); font-size:.8rem; opacity:.6; text-decoration:none; }
.back:hover{ opacity:1; }

/* ---- app shell ---- */
.app{ height:100%; display:flex; flex-direction:column; max-width:1180px; margin:0 auto; padding:clamp(.6rem,2vw,1.4rem); gap:clamp(.6rem,1.6vw,1.1rem); }
.bar{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.brand{ font-weight:900; font-size:1.25rem; margin-right:.4rem; }
.tabs{ display:flex; gap:.4rem; padding:.3rem; background:var(--glass); border:1px solid var(--line); border-radius:999px; }
.tab{ background:none; padding:.55em 1.1em; opacity:.65; display:flex; align-items:center; gap:.6em; transition:background .4s ease, opacity .3s ease, color .3s ease; }
.tab:hover{ opacity:1; }
.tab.is-on{ background:var(--accent); color:var(--ink); opacity:1; }
.badge{ min-width:1.35rem; height:1.35rem; padding:0 .4em; border-radius:999px; display:inline-grid; place-items:center; font-size:.7rem; background:var(--coral); color:#fff; }
.bar-actions{ margin-left:auto; display:flex; align-items:center; gap:.8rem; }
.link{ font-family:var(--font-mono); font-size:.8rem; opacity:.6; text-decoration:none; }
.link:hover{ opacity:1; }

.pane{ flex:1; min-height:0; }
.pane.scroll{ overflow-y:auto; padding-right:.2rem; }

/* ---- messenger ---- */
.messenger{
  height:100%; display:grid; grid-template-columns:minmax(240px,320px) 1fr;
  background:var(--glass); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,244,225,.1);
}
.threads{ display:flex; flex-direction:column; min-height:0; min-width:0; border-right:1px solid var(--line); }
.threads-head{ padding:1rem 1.1rem .8rem; font-weight:700; font-size:.95rem; border-bottom:1px solid var(--line); }
.thread-list{ flex:1; overflow-y:auto; padding:.5rem; display:flex; flex-direction:column; gap:.25rem; }
.thread{
  width:100%; min-width:0; overflow:hidden; text-align:left; display:flex; flex-direction:column; gap:.2rem;
  padding:.75rem .85rem; border-radius:12px; background:none; border:1px solid transparent;
  font-family:var(--font-display); font-weight:400; font-size:.9rem;
  transition:background .35s ease, border-color .35s ease;
}
.thread:hover{ background:rgba(255,244,225,.07); }
.thread.is-on{ background:rgba(255,244,225,.12); border-color:rgba(255,244,225,.2); }
.thread-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.thread-name{ flex:1; min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-time{ font-family:var(--font-mono); font-size:.66rem; opacity:.5; flex:none; }
.thread-bottom{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.thread-last{ flex:1; min-width:0; opacity:.6; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-unread{ flex:none; min-width:1.2rem; height:1.2rem; padding:0 .35em; border-radius:999px; background:var(--accent); color:var(--ink); font-family:var(--font-mono); font-size:.66rem; display:grid; place-items:center; font-weight:700; }
.no-threads{ margin:auto; padding:1.5rem; text-align:center; opacity:.55; font-size:.9rem; line-height:1.7; }

.chat{ display:flex; flex-direction:column; min-height:0; min-width:0; }
.chat-empty{ margin:auto; opacity:.5; font-size:.95rem; padding:1rem; text-align:center; }
.chat-live{ display:flex; flex-direction:column; min-height:0; height:100%; }
.chat-head{ display:flex; align-items:center; gap:.8rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line); }
.back-btn{ display:none; }
.chat-who{ flex:1; min-width:0; }
.chat-name{ font-weight:900; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-meta{ font-family:var(--font-mono); font-size:.68rem; opacity:.5; margin-top:.15em; }
.chat-msgs{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.55rem; }

.msg{ max-width:min(78%,34rem); padding:.55em .85em .5em; border-radius:16px; font-size:.93rem; line-height:1.55; word-break:break-word; animation:msgIn .45s cubic-bezier(.22,1,.36,1); }
.msg .txt{ white-space:pre-wrap; }
.msg .meta{ display:block; margin-top:.25em; font-family:var(--font-mono); font-size:.64rem; opacity:.55; }
.msg.visitor{ align-self:flex-start; background:rgba(255,244,225,.12); border:1px solid rgba(255,244,225,.16); border-bottom-left-radius:5px; cursor:pointer; transition:background .3s ease, border-color .3s ease; }
.msg.visitor:hover{ background:rgba(255,244,225,.18); }
.msg.visitor.is-target{ border-color:var(--accent); background:rgba(255,201,60,.16); }
.msg.owner{ align-self:flex-end; background:var(--accent); color:var(--ink); border-bottom-right-radius:5px; }
.msg .quote{ display:block; margin-bottom:.4em; padding:.25em .6em; border-left:2px solid currentColor; font-size:.78rem; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg .hint{ display:inline; margin-left:.8em; opacity:0; transition:opacity .3s ease; }
.msg.visitor:hover .hint{ opacity:1; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

.reply-bar{ display:flex; align-items:center; gap:.8rem; padding:.55rem 1.1rem; border-top:1px solid var(--line); background:rgba(255,201,60,.08); font-size:.82rem; }
.reply-text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:2px solid var(--accent); padding-left:.7rem; opacity:.85; }
.composer{ display:flex; align-items:flex-end; gap:.6rem; padding:.75rem 1.1rem 1rem; border-top:1px solid var(--line); }
.composer textarea{ flex:1; margin:0; resize:none; max-height:8rem; border-radius:16px; color:var(--paper); background:rgba(255,244,225,.08); border:1px solid rgba(255,244,225,.18); padding:.7em .95em; line-height:1.5; }
.composer textarea::placeholder{ color:rgba(255,244,225,.45); }
.composer textarea:focus{ outline:none; border-color:var(--accent); }
.send{ flex:none; width:2.7rem; height:2.7rem; padding:0; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--ink); transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.send:hover{ transform:translateY(-2px) scale(1.07); }
.send:disabled{ opacity:.5; pointer-events:none; }
.send svg{ width:1.1rem; height:1.1rem; }

/* ---- projects manager ---- */
.projects-admin{ max-width:820px; padding-bottom:3rem; }
.pa-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.4rem; }
.pa-head .sub{ margin-bottom:1rem; max-width:48ch; }
.pa-warn{ margin:0 0 1rem; padding:.7em 1em; border-radius:12px; font-size:.85rem; line-height:1.5; color:var(--accent); background:rgba(255,201,60,.1); border:1px solid rgba(255,201,60,.35); }
.pa-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.pa-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem;
  padding:1rem 1.1rem; border-radius:16px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 24px -16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,244,225,.08);
  animation:msgIn .45s cubic-bezier(.22,1,.36,1);
}
.pa-num{ font-family:var(--font-mono); font-size:.75rem; opacity:.4; align-self:start; padding-top:.3em; }
.pa-body{ min-width:0; display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; }
.pa-name{ font-weight:900; font-size:1.08rem; line-height:1.25; max-width:100%; overflow-wrap:anywhere; }
.pa-desc{ font-size:.86rem; line-height:1.5; opacity:.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.pa-desc.is-empty{ opacity:.35; font-style:italic; }
.pa-link{
  display:inline-flex; align-items:center; gap:.4em; max-width:100%; margin-top:.2rem;
  font-family:var(--font-mono); font-size:.74rem; color:var(--accent); text-decoration:none; opacity:.9;
}
.pa-link span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pa-link svg{ width:.95em; height:.95em; flex:none; }
.pa-link:hover{ text-decoration:underline; }
.pa-nolink{ margin-top:.2rem; font-family:var(--font-mono); font-size:.7rem; padding:.2em .7em; border-radius:999px; color:var(--coral); border:1px solid rgba(255,90,54,.45); background:rgba(255,90,54,.08); }
.pa-actions{ display:flex; align-items:center; gap:.45rem; }
.pa-actions .icon-btn:disabled{ opacity:.3; pointer-events:none; }
.btn-ghost.sm{ padding:.5em 1em; font-size:.75rem; opacity:.9; }
.btn-danger.solid{ background:var(--coral); color:#fff; border-color:transparent; font-size:.85rem; padding:.7em 1.3em; }
.btn-danger.solid:hover{ background:#ff6e4e; }
.btn-danger.solid:disabled, .btn-primary:disabled{ opacity:.5; pointer-events:none; }
.pa-empty{ text-align:center; padding:3rem 1rem; opacity:.85; }
.pa-empty p{ margin:0 0 1rem; opacity:.7; }

/* ---- dialogs and toast ---- */
.dlg{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1rem;
  background:rgba(12,6,24,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s ease;
}
.dlg.open{ opacity:1; }
.dlg-card{
  width:100%; max-width:30rem; max-height:calc(100dvh - 2rem); overflow-y:auto;
  padding:clamp(1.3rem,4vw,1.8rem); border-radius:20px;
  background:color-mix(in srgb, var(--violet-2) 92%, transparent); border:1px solid rgba(255,244,225,.2);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,244,225,.14);
  transform:translateY(16px) scale(.98); transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.dlg.open .dlg-card{ transform:none; }
.dlg-card h3{ margin:0 0 1rem; font-size:1.25rem; font-weight:900; }
.dlg-card .sub{ margin-bottom:1.3rem; }
.dlg-card .req{ color:var(--accent); margin-left:.4em; opacity:.9; }
.dlg-card input.bad{ outline:2px solid var(--coral); }
.dlg-actions{ display:flex; justify-content:flex-end; gap:.7rem; flex-wrap:wrap; margin-top:.4rem; }
.dlg-card .error{ margin:-.2em 0 1em; }
.toast{
  position:fixed; left:50%; bottom:calc(1.2rem + env(safe-area-inset-bottom)); z-index:60;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  padding:.7em 1.3em; border-radius:999px; font-size:.85rem; max-width:calc(100vw - 2rem); text-align:center;
  color:var(--ink); background:var(--accent); box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  transition:opacity .3s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.toast.bad{ background:var(--coral); color:#fff; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- phones: list and chat take turns ---- */
@media (max-width:760px){
  .messenger{ grid-template-columns:minmax(0,1fr); }
  .messenger .chat{ display:none; }
  .messenger.chat-open .threads{ display:none; }
  .messenger.chat-open .chat{ display:flex; }
  .back-btn{ display:grid; }
  .msg{ max-width:88%; }
  .bar-actions{ margin-left:0; }
  .pa-item{ grid-template-columns:minmax(0,1fr); gap:.7rem; }
  .pa-num{ display:none; }
  .pa-actions{ flex-wrap:wrap; }
  .pa-head .btn-primary{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .dlg, .dlg-card, .toast, .pa-item{ transition-duration:.01s; animation:none; } }