@font-face {
    font-family: vazir;
    src: url(./fonts/Vazir.ttf);
}
* { box-sizing: border-box; font-family: Vazir;}
body { margin: 0; font-family: Vazir; background: #0b1220; color: #e8eefc; }

.page { min-height: 100vh; display: grid; place-items: center; padding: 20px; }

.card {
  width: min(420px, 100%);
  background: #111a2e;
  border: 1px solid #223055;
  border-radius: 14px;
  padding: 18px;
}

h2 { margin: 0 0 12px; }

.form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: 14px; color: #c9d6ff; }
input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a3b6a;
  background: #0d162b;
  color: #e8eefc;
  outline: none;
}
button {
  padding: 10px 12px;
  border-radius: 10px;
  border: 0;
  background: #4f7cff;
  color: #081022;
  font-weight: 700;
  cursor: pointer;
}
button:disabled { opacity: .6; cursor: not-allowed; }

.alert {
  background: #2a1230;
  border: 1px solid #7c2d86;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.hint { margin: 12px 0 0; font-size: 13px; color: #a9bbf7; }

.chatWrap {
  width: min(780px, 100%);
  height: min(84vh, 720px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #111a2e;
  border: 1px solid #223055;
  border-radius: 14px;
  overflow: hidden;
}

.chatHeader {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #223055;
}
.title { font-weight: 800; }
.sub { font-size: 12px; color: #a9bbf7; margin-top: 2px; }
.link { color: #a9bbf7; text-decoration: none; }
.link:hover { text-decoration: underline; }

.messages {
  padding: 14px;
  overflow: auto;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, #0c1426, #0b1220);
}

.msg { display: grid; gap: 4px; }
.msg.mine { justify-items: start; }
.msg.theirs { justify-items: end; }

.bubble {
  max-width: 75%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #2a3b6a;
  background: #0d162b;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.theirs .bubble { background: #132245; border-color: #2a4db1; }

.meta { font-size: 11px; color: #9ab0f3; }

.composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #223055;
  background: #0d162b;
}

/* Edit bar */
.editBox{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #2a3b6a;
  border-radius:12px;
  background:#22122a;
}
.editBox.hidden{ display:none; }

.editText{
  font-size:13px;
  color:#ffd3ff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: calc(100% - 70px);
}

/* Action icons (left side) */
.bubble{ position: relative; }

.actions{
  position: absolute;
  left: -34px;   /* سمت چپ پیام */
  top: 8px;
  display: grid;
  gap: 6px;
}

.actionBtn{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid #2a3b6a;
  background: #0d162b;
  color: #a9bbf7;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
}
.actionBtn:hover{ border-color:#4f7cff; }

.actionBtn.edit{ color:#ffb3ff; }
.replyPreview{
  width: 100%;
  text-align: right;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;

  font-size:12px;
  color:#a9bbf7;
  border-right: 3px solid #4f7cff;
  padding-right:10px;
  margin-bottom:6px;
  opacity:.95;
}
.meta .editedTag{
  margin-right: 8px;
  font-size: 11px;
  color: #ffb3ff;
}