/* =========================================================================
   Derslik — DM slice (slice 7): the 1:1 / group message pane. v5:258-282.

   v5 draws four things (back link, avatar, name, presence line) and centred
   bubbles. The rest of this file is the shipping surface v5 has no place for
   and the spec re-homes here (§3.1, §3.2, §4.6): the E2EE lock chip and its
   safety-number popover, the key-change warning, the three call buttons plus
   the reconnect pill, and the group member chips with their forms.

   Loaded after chat.css, which already styles the message list, the rows and
   the composer — the DM pane reuses all of it and only differs in the header
   and in the 760px centred column (v5:266, v5:276).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Layout — the DM pane is one column inside the workspace.
   `styles.css` still declares `.dm-layout` as a 220px/1fr grid from the old
   two-column page; shell-extra.css already flips it to a flex column, this
   just makes sure the chat fills it.
   ------------------------------------------------------------------------- */
.dm-layout.dk-pane { padding: 0; }
.dm-chat.chat-area { flex: 1; min-height: 0; }
.dm-chat.chat-area > .message-panel { min-height: 0; }

/* -------------------------------------------------------------------------
   2. Header (v5:260-264)
   ------------------------------------------------------------------------- */
.dk-pane__head.dm-head {
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-9);
  flex-wrap: wrap;
}
.dm-back { flex: none; gap: var(--sp-3); }
.dm-head__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-head__name {
  font: 800 var(--fs-xl) / 1.2 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-head__sub {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font: 700 var(--fs-xs) / 1.2 var(--font);
  color: var(--mut);
}
/* The dot `chat.js` repaints from the `channel:presence` feed. v5 hard-codes
   "● Çevrimiçi"; this starts offline and only goes green on a real frame. */
.dm-head__sub .presence-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--mut);
}
.dm-head__sub .presence-dot.online { background: var(--ok); }
.dm-head__sub .presence-dot.idle { background: var(--warn); }
.dm-head__sub .presence-dot.dnd { background: var(--bad); }
.dm-head__sub .presence-dot.offline { background: var(--mut); }
.dm-head__sub:has(.presence-dot.online) { color: var(--ok); }

/* -------------------------------------------------------------------------
   3. E2EE chip + safety-number popover (spec §3.1 — non-negotiable)
   The chip ships `disabled`; chat.js enables it once the peer key is in and a
   shared secret exists, because only then is there a number to compare.
   ------------------------------------------------------------------------- */
.dm-e2ee { position: relative; display: flex; flex: none; }
.e2ee-badge {
  gap: var(--sp-2);
  border: var(--bw-thin) solid transparent;
  cursor: pointer;
  text-transform: none;
  font-size: var(--fs-3xs);
}
.e2ee-badge[disabled] { cursor: default; opacity: 0.6; }
.e2ee-badge:not([disabled]):hover { border-color: var(--ok); }
.e2ee-badge:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.e2ee-badge .i { flex: none; }

.dk-popover.e2ee-safety {
  top: calc(100% + var(--sp-3));
  left: 0;
  max-width: 300px;
}
.dk-popover.e2ee-safety[hidden] { display: none; }
.e2ee-safety-label { margin: 0; font: 700 var(--fs-xs) / 1.4 var(--font); color: var(--mut); }
.e2ee-safety-code {
  display: block;
  padding: var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--panel2);
  border: var(--bw-thin) solid var(--line);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-code);
  word-break: break-all;
  min-height: 2.5em;
}
.e2ee-safety-hint { margin: 0; font: 400 var(--fs-xs) / 1.4 var(--font); }

/* The key-changed / device-conflict banner chat.js writes into. */
.dk-notice.e2ee-warning { margin: var(--sp-5) var(--sp-9) 0; }
.dk-notice.e2ee-warning[hidden] { display: none; }

/* "Ekler uçtan uca şifrelenmez." — sits just above the composer, in the same
   760px column so it lines up with the input rather than the pane edge. */
.e2ee-attach-hint,
.dm-chat .typing-indicator {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: calc(760px + 2 * var(--sp-8));
  margin: 0 auto;
  padding: 0 var(--sp-8) var(--sp-2);
  font: 400 var(--fs-xs) / 1.3 var(--font);
}
.dm-chat .typing-indicator { font-style: italic; color: var(--mut); }

/* -------------------------------------------------------------------------
   4. Call controls (spec §3.1 — the global modal's counterpart in the header)
   ------------------------------------------------------------------------- */
.dm-call-tools { gap: var(--sp-3); flex: none; margin-left: auto; }
.dm-call-btn.active { background: var(--accSoft); border-color: var(--acc); color: var(--acc); }
.dm-reconnect-btn { gap: var(--sp-3); }
.dm-reconnect-btn[hidden] { display: none; }

/* -------------------------------------------------------------------------
   5. Group DM member strip (spec §3.2) — reads as part of the header.
   ------------------------------------------------------------------------- */
.dm-members {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-9);
  border-bottom: var(--bw-thin) solid var(--line);
  background: var(--panel2);
}
.dm-member-chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.dm-member-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border-radius: var(--r-full);
  border: var(--bw-thin) solid var(--line);
  background: var(--panel);
  font: 700 var(--fs-xs) / 1 var(--font);
}
.dm-member-chip .presence-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--mut);
  margin-left: -10px;
  align-self: flex-end;
  border: 1.5px solid var(--panel);
}
.dm-member-chip .presence-dot.online { background: var(--ok); }
.dm-member-chip .presence-dot.idle { background: var(--warn); }
.dm-member-chip .presence-dot.dnd { background: var(--bad); }
.dm-member-chip .muted { font-weight: 400; }
.dm-member-remove { display: inline-flex; margin: 0; }

.dm-member-controls { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.dm-add-member,
.dm-rename { display: flex; align-items: center; gap: var(--sp-3); margin: 0; }
.dm-add-member .dk-select { width: auto; min-width: 9rem; }
.dm-rename .dk-input { width: auto; min-width: 10rem; }

/* -------------------------------------------------------------------------
   6. The centred column (v5:266, v5:276) — 760px, exactly like the design.
   `.dk-msglist--centered` (base.css) centres the rows; the composer twin is in
   chat.css. Bubbles keep the left-aligned author layout of the channel view
   instead of v5's right-aligned "own message" bubbles, because a DM row still
   carries the reply / edit / react toolbar that needs an anchor.
   ------------------------------------------------------------------------- */
.dm-chat .dk-msglist--centered { padding-inline: var(--sp-8); }
.dm-chat .dk-msglist--centered > .dk-empty { max-width: 760px; }

/* A call collapses the chat to a narrow rail; keep the 760px cap from
   producing a lopsided column in there. */
.dm-chat.call-active .dk-msglist--centered > *,
.dm-chat.call-active .dk-composer--centered > .composer { max-width: none; }

@media (max-width: 760px) {
  .dk-pane__head.dm-head { gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }
  .dm-back span { display: none; }
  .dm-reconnect-btn span { display: none; }
}