/* =========================================================================
   chat.css — SA-MP სტილის ჩათი (ზედა მარცხენა კუთხე, T / ტ ღილაკით იხსნება)
   ფერები: #FF4747 · #EAEAEA · მუქი შავი
   ========================================================================= */
#ch-root {
  --r: #ff4747; --l: #eaeaea; --d: #0b0b0d;
  --lh: 20px;                       /* ერთი სტრიქონის სიმაღლე */
  --lines: 12;                      /* დახურულ მდგომარეობაში ხილული სტრიქონები */
  --lines-open: 22;                 /* გახსნილი ჩათის სტრიქონები (სქროლით) */
  position: fixed; top: 18px; left: 22px; z-index: 10000;
  width: min(620px, 46vw);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  font-family: 'Noto Sans Georgian', 'Manrope', Arial, sans-serif;
  color: var(--l);
  transition: opacity .2s ease;
}
#ch-root.off { opacity: 0; visibility: hidden; }

/* ---------- სექციები (ჩანს მხოლოდ ჩათის გახსნისას) ---------- */
.ch-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  opacity: 0; transform: translateY(-6px); height: 0; overflow: hidden;
  transition: opacity .18s ease, transform .18s ease;
}
#ch-root.open .ch-tabs { opacity: 1; transform: none; height: auto; overflow: visible; pointer-events: auto; }
.ch-tab {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 10px; cursor: pointer; user-select: none;
  font: 800 12px/1 'Rajdhani', 'Noto Sans Georgian', sans-serif; letter-spacing: .06em;
  color: rgba(234, 234, 234, .72);
  background: rgba(11, 11, 13, .78); border: 1px solid rgba(234, 234, 234, .12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.ch-tab:hover { color: var(--l); border-color: rgba(255, 71, 71, .55); transform: translateY(-1px); }
.ch-tab.on {
  background: var(--r); border-color: var(--r); color: var(--d);
  box-shadow: 0 0 18px rgba(255, 71, 71, .45);
}
.ch-tab.lock { opacity: .38; cursor: not-allowed; }
.ch-tab.lock:hover { transform: none; border-color: rgba(234, 234, 234, .12); color: rgba(234, 234, 234, .72); }
.ch-tab .ch-key { font-size: 10px; opacity: .6; font-weight: 700; }
.ch-badge {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  display: none; align-items: center; justify-content: center;
  font: 800 10px/1 'Manrope', sans-serif; color: var(--l); background: var(--r);
  box-shadow: 0 0 10px rgba(255, 71, 71, .6);
}
.ch-badge.show { display: inline-flex; }

/* ---------- შეტყობინებები ---------- */
.ch-lines {
  display: flex; flex-direction: column;
  max-height: calc(var(--lh) * var(--lines));
  overflow: hidden; pointer-events: none;
  padding: 0 2px;
  /* ზედა კიდეზე რბილი გაქრობა, როგორც ძველ ჩათებში */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.ch-lines > :first-child { margin-top: auto; }
#ch-root.open .ch-lines {
  max-height: calc(var(--lh) * var(--lines-open));
  overflow-y: auto; pointer-events: auto;
  padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(14, 14, 17, .72), rgba(8, 8, 10, .72));
  border: 1px solid rgba(234, 234, 234, .08);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: none; mask-image: none;
}
#ch-root.open .ch-lines::-webkit-scrollbar { width: 5px; }
#ch-root.open .ch-lines::-webkit-scrollbar-thumb { background: rgba(255, 71, 71, .7); border-radius: 3px; }
#ch-root.open .ch-lines::-webkit-scrollbar-track { background: transparent; }

.ch-line {
  min-height: var(--lh); line-height: var(--lh);
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  word-break: break-word; overflow-wrap: anywhere;
  /* SA-MP-ის შავი კონტური */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 6px rgba(0, 0, 0, .7);
  animation: chIn .22s ease;
}
.ch-line.sys { color: var(--r); }
.ch-empty { color: rgba(234, 234, 234, .35); font-size: 13px; font-weight: 600; line-height: var(--lh); }
@keyframes chIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---------- შეყვანის ველი ---------- */
.ch-input {
  display: none; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 0;
  border-radius: 12px; overflow: hidden; pointer-events: auto;
  background: linear-gradient(145deg, rgba(14, 14, 17, .9), rgba(8, 8, 10, .9));
  border: 1px solid rgba(234, 234, 234, .12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 71, 71, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#ch-root.open .ch-input { display: flex; }
.ch-input:focus-within { border-color: rgba(255, 71, 71, .7); }
.ch-pre {
  align-self: stretch; display: flex; align-items: center; padding: 0 14px;
  font: 800 12px/1 'Rajdhani', sans-serif; letter-spacing: .08em; white-space: nowrap;
  color: var(--r); background: rgba(255, 71, 71, .12); border-right: 1px solid rgba(255, 71, 71, .35);
  text-shadow: 0 0 10px rgba(255, 71, 71, .55);
}
#ch-input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--l); caret-color: var(--r);
  font: 600 14px 'Noto Sans Georgian', 'Manrope', Arial, sans-serif;
}
#ch-input::placeholder { color: rgba(234, 234, 234, .35); }
.ch-hint {
  font: 700 10px/1 'Manrope', sans-serif; color: rgba(234, 234, 234, .4); white-space: nowrap; letter-spacing: .04em;
}
.ch-hint b { color: var(--r); font-weight: 800; }