/* Site chat. Uses the variables, fields and .btn of ../style.css; nothing here sets a new palette. */

.ch {
  --ch-hit: 40px;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
}
@media (pointer: coarse), (max-width: 900px) { .ch { --ch-hit: 44px; } }

/* ---- head: room tabs and connection state ------------------------------------------------- */

.ch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.ch-tabs { display: flex; gap: 4px; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: var(--ch-hit);
  padding: 0 12px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font: 600 14px/1 var(--cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.ch-tab:hover { color: var(--text); }
.ch-tab[aria-selected="true"] { color: var(--bronze-hi); border-color: var(--line); background: rgba(0, 0, 0, 0.35); }
.ch-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--crystal); color: #06151a; font: 700 11px/1 Barlow, sans-serif; letter-spacing: 0; }
.ch-dot[hidden] { display: none; }
.ch-status { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); color: var(--muted); font-size: 13px; }
.ch-status[hidden] { display: none; }
.ch-reqs { flex: 1 0 100%; display: grid; gap: 6px; }
.ch-reqs[hidden] { display: none; }
.ch-reqs-toggle { justify-self: start; }
.ch-reqs-list { display: grid; gap: 6px; max-height: 168px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.ch-req { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.35); }
.ch-req-who { display: grid; flex: 1 1 auto; min-width: 0; }
.ch-req-who b { font: 600 15px/1.3 var(--cond); letter-spacing: 0.04em; color: var(--bronze-hi); overflow-wrap: anywhere; }
.ch-x, .ch-btn, .ch-fab, .ch-tab, .ch-re, .ch-pick, .ch-ac-item { font-family: inherit; }
.ch-x, .ch-btn { display: inline-grid; place-items: center; flex: none; width: var(--ch-hit); height: var(--ch-hit); padding: 0; border: 1px solid var(--line); background: var(--field); color: var(--bronze-hi); cursor: pointer; }
.ch-x:hover, .ch-btn:hover:not([disabled]) { border-color: var(--bronze); color: #fff3cf; }
.ch-btn[disabled] { opacity: 0.45; cursor: default; }
.ch-ico { width: 20px; height: 20px; flex: none; }
.ch-tab:focus-visible, .ch-x:focus-visible, .ch-btn:focus-visible, .ch-re:focus-visible, .ch-pick:focus-visible, .ch-ac-item:focus-visible, .ch-fab:focus-visible, .ch-log:focus-visible, .ch-input:focus-visible { outline: 2px solid var(--crystal); outline-offset: -2px; }

/* ---- log ---------------------------------------------------------------------------------- */

.ch-log { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bronze-lo) transparent; }
.ch-empty { margin: auto; }
.ch-msg { min-width: 0; }
.ch-meta { display: flex; align-items: center; gap: 8px; }
.ch-name { font: 600 15px/1.3 var(--cond); letter-spacing: 0.04em; color: var(--bronze-hi); overflow-wrap: anywhere; }
.ch-msg.own .ch-name { color: var(--crystal); }
.ch-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ch-body { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.ch-msg.deleted .ch-body { color: var(--muted); font-style: italic; }
.ch-emoji { width: 22px; height: 22px; vertical-align: -6px; object-fit: contain; }
.ch-gif { display: block; max-width: 100%; max-height: 180px; margin-top: 6px; border: 1px solid var(--line); background: var(--field); }
.ch-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ch-re { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 32px; min-height: 30px; padding: 0 8px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.35); color: var(--muted); font-size: 13px; cursor: pointer; }
.ch-re .ch-emoji { width: 18px; height: 18px; vertical-align: 0; }
.ch-re.mine { border-color: var(--crystal); color: var(--crystal); }
.ch-re:hover { border-color: var(--bronze); }
.ch-re.del { margin-left: auto; border-color: transparent; background: none; color: var(--muted); }
.ch-re.del + .add { margin-left: 0; }
.ch-re.del .ch-ico { width: 16px; height: 16px; }
.ch-re.add { margin-left: auto; border-color: transparent; background: none; color: var(--bronze); }
.ch-re.add .ch-ico { width: 16px; height: 16px; }
@media (pointer: coarse), (max-width: 900px) { .ch-re { min-width: 44px; min-height: 44px; } .ch-re.add, .ch-re.del { margin-block: -14px; } }
/* Centred without a transform: a transform on this button made WebKit send the tap's click to the section behind it. */
.ch-jump { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; bottom: calc(var(--ch-form-h, 64px) + 8px); z-index: 2; }
.ch-jump .ch-ico { width: 14px; height: 14px; }
.ch-jump[hidden] { display: none; }

.ch .btn.small { min-height: var(--ch-hit); }
.ch-older { align-self: center; flex: none; }
.ch-apply { margin: auto; max-width: 280px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.ch-apply p { margin: 0; color: var(--muted); }
.ch-tab .ch-ico { width: 15px; height: 15px; }

/* ---- composer, picker, completion --------------------------------------------------------- */

.ch-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--line-soft); }
.ch-input { flex: 1 1 auto; min-width: 0; min-height: var(--ch-hit); max-height: 120px; padding: 10px 12px; resize: none; overflow-y: auto; font-size: 16px; line-height: 1.35; }
.ch-input:disabled { opacity: 0.6; }
.ch-send { min-height: var(--ch-hit); padding: 0 16px; }
.ch-picker, .ch-ac { position: absolute; left: 10px; right: 10px; bottom: calc(var(--ch-form-h, 64px) + 4px); z-index: 3; border: 1px solid var(--bronze-lo); background: var(--night-2); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5); }
.ch-picker[hidden], .ch-ac[hidden] { display: none; }
.ch-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ch-hit), 1fr)); gap: 4px; max-height: 40%; padding: 8px; overflow-y: auto; }
.ch-pick { display: grid; place-items: center; width: 100%; height: var(--ch-hit); padding: 0; border: 1px solid transparent; background: none; cursor: pointer; }
.ch-pick:hover { border-color: var(--bronze); background: rgba(0, 0, 0, 0.4); }
.ch-ac { display: flex; flex-direction: column; }
.ch-ac-item { display: flex; align-items: center; gap: 10px; min-height: var(--ch-hit); padding: 0 12px; border: 0; background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.ch-ac-item.on, .ch-ac-item:hover { background: rgba(201, 161, 90, 0.16); }
.ch-ac-item .ch-emoji { width: 24px; height: 24px; vertical-align: 0; }

/* ---- full page /sohbet -------------------------------------------------------------------- */

.ch-card { padding: 12px; }
.ch-title { margin: 4px 4px 10px; }
.ch.full { height: max(420px, calc(100dvh - var(--ch-head, 62px) - 190px)); border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.25); }
@media (min-width: 901px) {
  .ch.full { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ch.full .ch-head { grid-row: 1 / 3; flex-direction: column; align-items: stretch; flex-wrap: nowrap; border-bottom: 0; border-right: 1px solid var(--line-soft); overflow-y: auto; }
  .ch.full .ch-tabs { flex-direction: column; flex: 1 1 auto; overflow-x: visible; }
  .ch.full .ch-tab { justify-content: space-between; }
  .ch.full .ch-status { flex: none; flex-direction: column; align-items: stretch; }
  .ch.full .ch-picker, .ch.full .ch-ac { left: 230px; }
}
@media (max-width: 900px) {
  .ch-page main { padding: 8px 8px 0; }
  .ch-card { padding: 8px; }
  .ch-title { display: none; }
  .ch.full { height: calc(var(--ch-vh, 100dvh) - var(--ch-head, 62px) - 24px); min-height: 0; }
  .ch-page .foot { display: none; }
}

/* ---- dock (desktop) and bottom tab with full screen (phones) ------------------------------ */

.ch-dock {
  position: fixed;
  z-index: 30;
  top: var(--ch-head, 62px);
  right: 0;
  bottom: 0;
  width: 340px;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.24s;
  background: linear-gradient(160deg, var(--panel-a), var(--panel-b)), var(--night-2);
  border-left: 1px solid var(--bronze-lo);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.55);
}
.ch-dock.open { visibility: visible; transform: none; transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.ch-dock .ch { width: 100%; }
.ch-fab {
  position: fixed;
  z-index: 31;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bronze);
  background: linear-gradient(180deg, #1c232b, #0d1116);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  color: var(--bronze-hi);
  font: 700 14px/1 var(--cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.ch-fab:hover { color: #fff3cf; }
body.ch-open .ch-fab, body.ch-page .ch-fab, body.ch-page .ch-dock { display: none; }
@media (min-width: 901px) { body.ch-open:not(.ch-page) { padding-right: 340px; } }

@media (max-width: 900px) {
  body.ch-has { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  body.ch-page.ch-has { padding-bottom: 0; }
  body.ch-open { overflow: hidden; }
  .ch-fab { left: 0; right: 0; bottom: 0; min-height: 52px; padding: 0 16px env(safe-area-inset-bottom); justify-content: center; border-width: 1px 0 0; background: rgba(8, 11, 15, 0.97); box-shadow: none; }
  .ch-dock { z-index: 50; top: var(--ch-top, 0); left: 0; right: 0; bottom: auto; width: auto; height: var(--ch-vh, 100dvh); transform: translateY(100%); border-left: 0; box-shadow: none; }
  .ch-dock.open { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ch-dock, .ch-dock.open { transition: none; } }