/* Vzhled chatu. Tokeny odpovídají světlému skinu Boardu (primární #e0006e),
   ať se to uvnitř Boardu netváří jako cizí těleso. */
:root{
  --bc-primary:#e0006e; --bc-primary-soft:#fde5f0;
  --bc-bg:#f6f7f9; --bc-panel:#fff; --bc-line:#e5e7eb;
  --bc-text:#111827; --bc-muted:#6b7280; --bc-hover:#f3f4f6;
  --bc-ok:#16a34a; --bc-warn:#d97706; --bc-err:#dc2626;
  --bc-radius:10px;
  --bc-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
/* MUSÍ být dřív než .bc-login/.bc-app: vlastní `display:grid` by jinak přebil
   atribut `hidden` (ten se skrývá jen `display:none` z prohlížeče) a skryté
   panely by zůstaly vidět. */
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{font-family:var(--bc-font);color:var(--bc-text);background:var(--bc-bg);font-size:14px;line-height:1.5}
button{font:inherit;cursor:pointer}
input,textarea{font:inherit;color:inherit}

.bc-muted{color:var(--bc-muted)}
.bc-err{color:var(--bc-err)}
.bc-brand{color:var(--bc-primary)}
.bc-primary{background:var(--bc-primary);color:#fff;border:0;border-radius:var(--bc-radius);padding:9px 16px;font-weight:600}
.bc-primary:disabled{opacity:.4;cursor:not-allowed}
.bc-icon{background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 9px;color:var(--bc-muted);font-size:15px}
.bc-icon:hover{background:var(--bc-hover);color:var(--bc-text)}

/* ---- přihlášení ---- */
.bc-login{display:grid;place-items:center;height:100%}
.bc-login-box{background:var(--bc-panel);border:1px solid var(--bc-line);border-radius:14px;padding:28px;width:340px}
.bc-login-box h1{margin:0 0 4px;font-size:20px}
.bc-login-box label{display:block;margin:16px 0 6px;font-size:12px;font-weight:600;color:var(--bc-muted)}
.bc-login-box input{width:100%;padding:9px 11px;border:1px solid var(--bc-line);border-radius:var(--bc-radius);margin-bottom:14px}
.bc-login-box button{width:100%}

/* ---- rozvržení ---- */
.bc-app{display:grid;grid-template-columns:260px 1fr 0;height:100%;transition:grid-template-columns .16s ease}
.bc-app.bc-ctx-open{grid-template-columns:260px 1fr 300px}

/* levý sloupec */
.bc-side{background:var(--bc-panel);border-right:1px solid var(--bc-line);display:flex;flex-direction:column;min-height:0}
.bc-side-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--bc-line)}
.bc-me{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.bc-me span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-av{width:26px;height:26px;border-radius:50%;background:var(--bc-primary-soft);color:var(--bc-primary);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 auto;background-size:cover}
.bc-conn{font-size:11px;padding:5px 14px;border-bottom:1px solid var(--bc-line)}
.bc-conn[data-state=connecting]{color:var(--bc-warn)}
.bc-conn[data-state=online]{color:var(--bc-ok)}
.bc-conn[data-state=offline]{color:var(--bc-err)}
.bc-search{padding:8px 10px;border-bottom:1px solid var(--bc-line)}
.bc-search input{width:100%;padding:6px 9px;border:1px solid var(--bc-line);border-radius:8px;font-size:13px}
.bc-search input:focus{outline:2px solid var(--bc-primary-soft);border-color:var(--bc-primary)}
.bc-hint{font-size:11px;color:var(--bc-muted);padding:2px 8px 6px}
.bc-channels{overflow-y:auto;padding:8px;flex:1;min-height:0}
.bc-group{font-size:11px;font-weight:700;color:var(--bc-muted);text-transform:uppercase;letter-spacing:.04em;padding:12px 8px 5px}
.bc-ch{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
  padding:7px 8px;border-radius:8px;color:var(--bc-text)}
.bc-ch:hover{background:var(--bc-hover)}
.bc-ch.bc-on{background:var(--bc-primary-soft);color:var(--bc-primary);font-weight:600}
.bc-ch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-badge{background:var(--bc-primary);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700}
.bc-dot{width:7px;height:7px;border-radius:50%;background:var(--bc-ok);flex:0 0 auto}
.bc-dot.bc-off{background:#d1d5db}
.bc-arch{font-size:10px;color:var(--bc-muted);border:1px solid var(--bc-line);border-radius:5px;padding:0 4px}

/* střed */
.bc-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.bc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 18px;background:var(--bc-panel);border-bottom:1px solid var(--bc-line)}
.bc-head h2{margin:0;font-size:15px}
.bc-sub{font-size:12px;color:var(--bc-muted)}
.bc-messages{flex:1;overflow-y:auto;padding:16px 18px;min-height:0}
.bc-day{text-align:center;font-size:11px;color:var(--bc-muted);margin:14px 0}
.bc-day span{background:var(--bc-panel);border:1px solid var(--bc-line);border-radius:20px;padding:2px 10px}

.bc-msg{display:flex;gap:10px;padding:5px 8px;border-radius:8px;position:relative}
.bc-msg:hover{background:var(--bc-panel)}
.bc-msg.bc-cont{padding-top:1px}
.bc-msg.bc-cont .bc-av{visibility:hidden;height:0}
.bc-body{min-width:0;flex:1}
.bc-meta{display:flex;align-items:baseline;gap:8px}
.bc-author{font-weight:600}
.bc-time{font-size:11px;color:var(--bc-muted)}
.bc-text{white-space:pre-wrap;word-wrap:break-word}
.bc-pending{opacity:.5}
.bc-failed{color:var(--bc-err)}

/* akce u zprávy — vpravo nahoře */
.bc-actions{position:absolute;top:-10px;right:8px;display:none;gap:2px;background:var(--bc-panel);
  border:1px solid var(--bc-line);border-radius:8px;padding:2px}
.bc-msg:hover .bc-actions{display:flex}

/* reakce POD zprávou (jako Slack) */
.bc-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.bc-rx{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--bc-line);background:var(--bc-panel);
  border-radius:12px;padding:1px 7px;font-size:12px}
.bc-rx.bc-mine{border-color:var(--bc-primary);background:var(--bc-primary-soft);color:var(--bc-primary)}
.bc-rx-add{border-style:dashed;color:var(--bc-muted)}

.bc-thread-link{margin-top:4px;font-size:12px;color:var(--bc-primary);background:none;border:0;padding:0}
.bc-card{margin-top:6px;border:1px solid var(--bc-line);border-left:3px solid var(--bc-primary);
  border-radius:8px;background:var(--bc-panel);padding:8px 10px;max-width:460px}
.bc-card-t{font-weight:600}
.bc-card-f{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--bc-muted);margin-top:3px}
.bc-att{margin-top:6px}
.bc-att img{max-width:320px;border-radius:8px;display:block}
.bc-att video{max-width:360px;border-radius:8px;display:block}

.bc-group-toggle{background:none;border:0;text-align:left;width:100%;font:inherit;
  font-size:11px;font-weight:700;color:var(--bc-muted);text-transform:uppercase;letter-spacing:.04em;padding:12px 8px 5px}
.bc-group-toggle:hover{color:var(--bc-text)}
.bc-prilohy{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 0;background:var(--bc-panel)}
.bc-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bc-line);
  border-radius:14px;padding:3px 6px 3px 10px;font-size:12px;background:var(--bc-bg)}
.bc-chip-x{background:none;border:0;color:var(--bc-muted);font-size:15px;line-height:1;padding:0 4px}
.bc-chip-x:hover{color:var(--bc-err)}
.bc-messages.bc-drop{outline:2px dashed var(--bc-primary);outline-offset:-8px;background:var(--bc-primary-soft)}
.bc-typing{height:18px;padding:0 18px;font-size:12px;color:var(--bc-muted);font-style:italic}

.bc-composer{display:flex;align-items:flex-end;gap:6px;padding:10px 14px;
  background:var(--bc-panel);border-top:1px solid var(--bc-line)}
.bc-composer textarea{flex:1;resize:none;border:1px solid var(--bc-line);border-radius:var(--bc-radius);
  padding:9px 11px;max-height:150px;overflow-y:auto}
.bc-composer textarea:focus{outline:2px solid var(--bc-primary-soft);border-color:var(--bc-primary)}

/* pravý sloupec */
.bc-ctx{background:var(--bc-panel);border-left:1px solid var(--bc-line);overflow:hidden;
  display:flex;flex-direction:column;min-height:0}
.bc-ctx-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--bc-line)}
.bc-ctx-body{overflow-y:auto;padding:12px;flex:1;min-height:0}
.bc-ctx-group{font-size:11px;font-weight:700;color:var(--bc-muted);text-transform:uppercase;margin:10px 0 6px}

/* vlákno v pravém sloupci */
.bc-thread-msg{border-bottom:1px solid var(--bc-line);padding:8px 0}
.bc-thread-composer{display:flex;gap:6px;padding:10px;border-top:1px solid var(--bc-line)}
.bc-thread-composer textarea{flex:1;resize:none;border:1px solid var(--bc-line);border-radius:8px;padding:7px 9px}

/* emoji a tooltip */
.bc-emoji{position:fixed;z-index:60;background:var(--bc-panel);border:1px solid var(--bc-line);
  border-radius:10px;padding:6px;display:flex;flex-wrap:wrap;gap:2px;width:212px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.bc-emoji button{background:none;border:0;font-size:18px;padding:3px;border-radius:6px}
.bc-emoji button:hover{background:var(--bc-hover)}
.bc-tip{position:fixed;z-index:70;background:#111827;color:#fff;font-size:12px;
  padding:5px 9px;border-radius:7px;max-width:240px;pointer-events:none}

.bc-empty{color:var(--bc-muted);text-align:center;padding:40px 20px}

/* přepínač seznamu kanálů — jen na úzké obrazovce */
.bc-side-toggle{display:none}
/* ztmavení pod vysunutým panelem, klepnutí zavírá */
.bc-scrim{position:fixed;inset:0;background:rgba(17,24,39,.35);z-index:35;display:none}
.bc-app.bc-side-open .bc-scrim,.bc-app.bc-ctx-open .bc-scrim{display:block}

/* Vysunutí panelů řídí proměnná na kontejneru: panel má jediný předpis pro
   `transform` a mění se jen hodnota, kterou dědí. Přehlednější než dvě
   konkurenční deklarace téže vlastnosti. */
.bc-app{--bc-side-x:-100%;--bc-ctx-x:100%}
.bc-app.bc-side-open{--bc-side-x:0%}
.bc-app.bc-ctx-open{--bc-ctx-x:0%}

/* mobil: sloupce se překrývají */
@media (max-width:820px){
  .bc-app,.bc-app.bc-ctx-open{grid-template-columns:1fr}
  .bc-side-toggle{display:inline-flex}
  .bc-side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:40;
    transform:translateX(var(--bc-side-x));transition:transform .18s}
  /* na úzké obrazovce širší panel — 300px nechávalo nepoužitelný pruh */
  .bc-ctx{position:fixed;inset:0 0 0 auto;width:min(360px,92vw);z-index:40;
    transform:translateX(var(--bc-ctx-x));transition:transform .18s}
  .bc-messages{padding:12px 10px}
  .bc-composer{padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}
/* na širokém displeji se nic nepřekrývá, takže ani stín */
@media (min-width:821px){ .bc-scrim{display:none !important} }