/* ============================================================================
   Журнал звонков («Звонки») и выбор мелодии звонка — calls-history.js.
   Только общие токены темы: светлая и тёмная темы работают без своих правил.
   ========================================================================== */
.chist{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0}

/* ------------------------------ панель действий ------------------------- */
.chist-toolbar{display:flex;align-items:center;gap:2px;padding:4px 4px 4px 12px;flex:none}
.chist-caption{
  flex:1;min-width:0;color:var(--muted);font-family:var(--font-mono);
  font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
}
.chist-toolbar .icon-btn{width:36px;height:36px}
.chist-toolbar .icon-btn:disabled{opacity:.45;cursor:default}

.chist-banner-slot:empty,.chist-hint-slot:empty{display:none}
.chist-banner{
  display:flex;align-items:center;gap:10px;width:calc(100% - 12px);margin:4px 6px 6px;
  padding:10px 14px;border-radius:12px;text-align:left;font-weight:600;font-size:14px;
  background:linear-gradient(135deg,var(--accent-deep),var(--accent));color:var(--on-accent);
  box-shadow:0 4px 16px var(--accent-glow);transition:filter .15s;
}
.chist-banner:hover{filter:brightness(1.07)}
.chist-banner-ico{display:inline-flex;flex:none}
.chist-banner-ico svg{width:20px;height:20px}
.chist-banner-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chist-hint{
  display:flex;align-items:center;gap:8px;margin:2px 6px 6px;padding:6px 4px 6px 12px;
  border-radius:12px;background:var(--accent-soft);color:var(--text-2);font-size:12.5px;line-height:1.35;
}
.chist-hint-ico{color:var(--accent);display:inline-flex;flex:none}
.chist-hint-text{flex:1;min-width:0}
.chist-hint-btn{padding:6px 10px;font-size:13px;flex:none}
.chist-hint-x{width:30px;height:30px;flex:none}

/* ------------------------------ список ---------------------------------- */
.chist-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 6px 8px}
.chist-in-modal .chist-list{max-height:min(60vh,560px);margin:0 -6px}
.chist-modal .modal-body{padding-left:12px;padding-right:12px}
.chist-day{
  position:sticky;top:0;z-index:1;padding:10px 8px 4px;background:var(--panel);
  color:var(--muted);font-size:12px;font-weight:700;
}
.chist-row{
  display:flex;align-items:center;gap:11px;padding:7px 4px 7px 8px;border-radius:12px;
  position:relative;transition:background .12s;outline:none;cursor:default;
}
/* У строки есть основное действие (перезвонить / войти / открыть чат). */
.chist-row.has-action{cursor:pointer}
.chist-row:hover{background:var(--hover)}
.chist-row:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.chist-ava-wrap{position:relative;flex:none}
.chist-ava{width:46px;height:46px;font-size:17px}
.chist-ava-group{background:var(--accent-soft);color:var(--accent)}
.chist-online{
  position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;
  background:var(--green);border:2.5px solid var(--panel);
}
.chist-body{flex:1;min-width:0}
.chist-top{display:flex;align-items:baseline;gap:8px}
.chist-name{flex:1;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chist-time{flex:none;font-size:10.5px;color:var(--muted);font-family:var(--font-mono)}
.chist-sub{display:flex;align-items:center;gap:4px;margin-top:2px;color:var(--text-2);font-size:13px;min-width:0}
.chist-sub.is-danger{color:var(--danger)}
.chist-sub.is-live{color:var(--green)}
.chist-dir,.chist-kind{display:inline-flex;flex:none}
.chist-kind{color:var(--muted)}
.chist-outcome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chist-acts{display:flex;align-items:center;flex:none}
.chist-call{color:var(--accent)}
.chist-call:hover{background:var(--accent-soft);color:var(--accent)}
.chist-more{width:32px;height:32px;opacity:0;transition:opacity .12s}
.chist-row:hover .chist-more,.chist-row:focus-within .chist-more{opacity:1}
@media (hover:none){.chist-more{opacity:1}}
.chist-join{
  padding:6px 12px;border-radius:999px;background:var(--green);color:#fff;
  font-weight:600;font-size:13px;margin-right:4px;
}
.chist-join:hover{filter:brightness(1.08)}

/* ------------------------------ состояния ------------------------------- */
.chist-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:48px 20px;color:var(--text-2);
}
.chist-state-ico{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:4px;
}
.chist-state.is-error .chist-state-ico{background:rgba(229,72,77,.12);color:var(--danger)}
.chist-state-title{font-weight:700;font-size:16px;color:var(--text)}
.chist-state-text{font-size:13.5px;max-width:280px;line-height:1.4}
.chist-state-btn{margin-top:6px;padding:8px 16px;font-size:14px}
.chist-foot{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;color:var(--muted);font-size:13px}
.chist-foot .btn{padding:6px 12px;font-size:13px}

/* ------------------------------ мелодия звонка -------------------------- */
.rt-settings{display:flex;flex-direction:column;gap:4px}
.rt-caption{
  color:var(--muted);font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase;padding:8px 2px 2px;
}
.rt-list{display:flex;flex-direction:column;gap:2px}
.rt-row{
  display:flex;align-items:center;gap:12px;padding:6px 4px 6px 10px;min-height:48px;
  border-radius:10px;cursor:pointer;transition:background .12s;
}
.rt-row:hover{background:var(--hover)}
.rt-row input[type=radio]{width:18px;height:18px;accent-color:var(--accent);flex:none;margin:0;cursor:pointer}
.rt-name{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14.5px}
.rt-note{color:var(--muted);font-size:12px}
.rt-play{width:36px;height:36px;color:var(--accent)}
.rt-play:hover{background:var(--accent-soft);color:var(--accent)}
.rt-play.is-playing{background:var(--accent);color:var(--on-accent)}
.rt-notif{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--border);font-size:13px;color:var(--text-2);line-height:1.35;
}
.rt-notif-ico{display:inline-flex;color:var(--muted);flex:none}
.rt-notif-ico.is-ok{color:var(--green)}
.rt-notif-text{flex:1;min-width:0}
.rt-notif-btn{padding:6px 12px;font-size:13px;flex:none}
.rt-foot-note{color:var(--muted);font-size:12px;margin:8px 2px 0;line-height:1.4}
.rt-reset:disabled{opacity:.5;cursor:default}

@media (max-width:420px){
  .chist-row{gap:9px;padding:7px 2px 7px 6px}
  .chist-ava{width:42px;height:42px;font-size:15px}
  .chist-hint{flex-wrap:wrap}
}