/* TrimTalk — thiet ke cho hien truong: mot tay, chu to, tuong phan cao.
   Bam theo mockup TrimTalk.dc.html. */

:root {
  --bg: #0C0D0F;
  --bg-bar: #17191C;
  --line-bar: #2A2D31;
  --buyer-bg: #F4F3F0;
  --buyer-ink: #111316;
  --ink: #FFFFFF;
  --muted-dark: #7C818A;
  --muted-light: #6B6660;
  --ghost-dark: #5A5F66;
  --ghost-light: #A5A099;
  --green: #39D07E;
  --blue: #0B57D0;
  --warn-bg: #2B2510;
  --warn-br: #6E5C1D;
  --warn-ink: #F2DE9A;
  --sans: -apple-system, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  font-family: var(--sans);
  /* Khong cho chon chu / hien menu khi giu lau — nut PTT bi giu rat lau */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

body { overflow: hidden; }

@keyframes ttWave {
  0%, 100% { transform: scaleY(.28); }
  50%      { transform: scaleY(1); }
}

/* ======================================================== CONG VAO (passcode) */
.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
/* Bat buoc: display:flex o tren de len [hidden] mac dinh cua trinh duyet.
   Thieu dong nay thi nhap dung ma van khong vao duoc app. */
.gate[hidden] { display: none; }
.gate-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.gate-mark { font: 700 12px/1 var(--mono); letter-spacing: .18em; color: var(--muted-dark); }
.gate-title { margin: 0; font: 700 30px/1.15 var(--sans); color: var(--ink); letter-spacing: -.02em; }
.gate-sub { margin: 0 0 6px; font: 400 16px/1.5 var(--sans); color: var(--muted-dark); }
.gate-input {
  width: 100%; height: 62px; padding: 0 18px;
  border-radius: 16px; border: 2px solid #32363C; background: #1D2024;
  color: var(--ink); font: 500 20px/1 var(--sans); outline: none;
  -webkit-user-select: text; user-select: text;
}
.gate-input:focus { border-color: var(--blue); }
.gate-btn {
  height: 62px; border: none; border-radius: 16px; background: var(--blue);
  color: #fff; font: 700 19px/1 var(--sans); cursor: pointer;
}
.gate-btn:active { opacity: .85; }
.gate-error {
  font: 600 15px/1.35 var(--sans); color: var(--warn-ink);
  background: var(--warn-bg); border: 1.5px solid var(--warn-br);
  border-radius: 12px; padding: 11px 13px;
}

/* ================================================================ MAN CHINH */
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
}
.app[hidden] { display: none; }

/* ---------------------------------------------------------------- panel */
.panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  gap: 10px;
}
.panel-buyer {
  background: var(--buyer-bg);
  /* Dat may giua ban — buyer ngoi doi dien doc duoc ngay */
  transform: rotate(180deg);
}
.panel-me { background: var(--bg); }

.panel-head { display: flex; align-items: center; gap: 8px; flex: none; }
.panel-label { font: 700 12px/1 var(--mono); letter-spacing: .16em; }
.panel-buyer .panel-label { color: var(--muted-light); }
.panel-me   .panel-label { color: var(--muted-dark); }

.dot { width: 9px; height: 9px; border-radius: 9px; background: var(--green); flex: none; }
.dot-blue { background: var(--blue); }
.dot.live { background: var(--green); box-shadow: 0 0 0 4px rgba(57, 208, 126, .22); }
.dot.off  { background: #43484F; box-shadow: none; }

.meter { margin-left: auto; font: 600 12px/1 var(--mono); color: var(--ghost-dark); }

.panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.line {
  margin: 0;
  font: 600 clamp(24px, 6.4vw, 34px)/1.26 var(--sans);
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.panel-buyer .line { color: var(--buyer-ink); }
.panel-me   .line { color: var(--ink); }
.line-placeholder { font-weight: 500; }
.panel-buyer .line-placeholder { color: var(--ghost-light); }
.panel-me   .line-placeholder { color: var(--ghost-dark); }

/* So lieu la thieng lieng — luon bat khoi cau, khong bao gio lam tron */
.num {
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 6px;
}
.panel-buyer .num { background: var(--buyer-ink); color: #fff; }
.panel-me   .num { background: #fff; color: var(--bg); }

.hint { flex: none; margin: 0; font: 500 14px/1.3 var(--sans); color: var(--muted-dark); }
.hint[hidden] { display: none; }

/* Song am — bao "may dang nghe", nhin la biet khong phai doan */
.wave { display: inline-flex; gap: 4px; align-items: flex-end; height: 16px; }
.wave[hidden] { display: none; }
.wave i {
  display: block; width: 4px; height: 100%; border-radius: 3px;
  background: var(--green);
  animation: ttWave 1s ease-in-out infinite;
}
.wave i:nth-child(2) { animation-delay: .12s; }
.wave i:nth-child(3) { animation-delay: .24s; }
.wave i:nth-child(4) { animation-delay: .36s; }
.panel-buyer .wave i { background: #C9C5BE; }

/* -------------------------------------------------------- thanh dieu khien */
.bar {
  flex: none;
  height: 62px;
  background: var(--bg-bar);
  border-top: 1px solid var(--line-bar);
  border-bottom: 1px solid var(--line-bar);
  display: flex;
  align-items: stretch;
}
.bar.dim { opacity: .42; pointer-events: none; }

.bar-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ghost-dark);
  font: 600 15px/1 var(--sans);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid var(--line-bar);
}
.bar-btn:last-child { border-right: none; }
.bar-btn:active { background: #23262A; }
.bar-btn:disabled { opacity: .55; }
.bar-btn.on { color: #fff; background: #23262A; font-weight: 700; }
.bar-dir { color: #fff; font: 700 16px/1 var(--mono); letter-spacing: .04em; }
.bar-clear { flex: none; width: 74px; }
.bar-ico { font-size: 18px; }

/* ------------------------------------------------------------------ notice */
.notice {
  flex: none;
  margin: 10px 20px 0;
  background: var(--warn-bg);
  border: 1.5px solid var(--warn-br);
  border-radius: 12px;
  padding: 10px 13px;
  display: flex; align-items: center; gap: 9px;
  font: 600 15px/1.25 var(--sans);
  color: var(--warn-ink);
}
.notice[hidden] { display: none; }
.notice-ico { font-size: 17px; flex: none; }
.notice-btn {
  margin-left: auto; flex: none;
  background: var(--warn-ink); color: #3B2F06; border: none;
  border-radius: 9px; padding: 8px 13px;
  font: 700 14px/1 var(--sans); cursor: pointer;
}

/* --------------------------------------------------------------------- PTT */
.ptt-wrap {
  flex: none;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.ptt {
  width: 100%;
  height: 104px;
  border-radius: 26px;
  background: #1D2024;
  border: 2px solid #32363C;
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
  /* Chan iOS scroll/zoom khi giu nut */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.ptt.live {
  background: var(--blue);
  border-color: #3D82EC;
  box-shadow: 0 0 0 8px rgba(11, 87, 208, .22);
  flex-direction: row;
  gap: 20px;
}
.ptt:disabled { opacity: .5; }
.ptt-main { font: 700 26px/1 var(--sans); letter-spacing: -.01em; }
.ptt-sub  { font: 500 14px/1 var(--sans); color: var(--muted-dark); }
.ptt.live .ptt-sub { display: none; }
.ptt-wave { display: inline-flex; gap: 5px; align-items: center; height: 40px; }
.ptt-wave[hidden] { display: none; }
.ptt-wave i {
  display: block; width: 6px; height: 100%; border-radius: 4px; background: #fff;
  animation: ttWave .85s ease-in-out infinite;
}
.ptt-wave i:nth-child(2) { animation-delay: .1s; }
.ptt-wave i:nth-child(3) { animation-delay: .2s; }
.ptt-wave i:nth-child(4) { animation-delay: .3s; }
.ptt-wave i:nth-child(5) { animation-delay: .4s; }

/* Man hinh nho (iPhone SE) — bot chieu cao nut de con cho cho chu */
@media (max-height: 700px) {
  .ptt { height: 88px; }
  .panel { padding: 14px 18px; }
}