/* hrm_discuss/chatter.css — hujjat lentasi (L7 §5).
   `hb-` dizayn tokenlariga tayanadi (static/shared/hb-tokens.css). */

.hbc{background:var(--hb-sfc,#fff);border:1px solid var(--hb-brd,#e6e6e6);
  border-radius:var(--hb-radius,16px);padding:14px;display:flex;
  flex-direction:column;gap:10px;font-family:inherit}

.hbc-head{display:flex;align-items:center;gap:10px}
.hbc-title{font-size:13px;font-weight:800;color:var(--hb-txt,#111)}
.hbc-count{font-size:11px;font-weight:700;color:var(--hb-mut,#888)}
.hbc-follow{margin-left:auto;font:inherit;font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:var(--hb-pill,999px);cursor:pointer;
  background:var(--hb-sfc2,#f5f5f5);border:1px solid var(--hb-brd,#e6e6e6);
  color:var(--hb-mut,#888);transition:color .15s,border-color .15s}
.hbc-follow.on{color:var(--hb-txt,#111);border-color:var(--hb-acc,#c8f169)}

.hbc-tabs{display:flex;gap:6px}
.hbc-tab{font:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;
  border-radius:var(--hb-pill,999px);cursor:pointer;
  background:var(--hb-sfc2,#f5f5f5);border:1px solid transparent;
  color:var(--hb-mut,#888)}
.hbc-tab.active{background:var(--hb-acc,#c8f169);color:#1a1a1a}

.hbc-compose{display:flex;flex-direction:column;gap:6px;padding:8px;
  border-radius:var(--hb-radius-sm,12px);background:var(--hb-sfc2,#f7f7f7);
  border:1px solid var(--hb-brd,#e6e6e6);transition:background .15s}
/* Ichki eslatma rejimi — VIZUAL farq shart: xodim tasodifan
   nomzodga ko'rinadigan izoh deb yozib yubormasin */
.hbc-compose.hbc-log-mode{background:color-mix(in srgb,#f2b705 12%,transparent);
  border-color:color-mix(in srgb,#f2b705 40%,transparent)}
.hbc-input{width:100%;border:0;background:transparent;outline:none;resize:vertical;
  font:inherit;font-size:13px;color:var(--hb-txt,#111);min-height:40px}
.hbc-comp-row{display:flex;align-items:center;gap:10px}
.hbc-hint{font-size:10.5px;font-weight:600;color:var(--hb-mut,#888)}
.hbc-send{margin-left:auto;font:inherit;font-size:12px;font-weight:800;
  padding:6px 14px;border-radius:var(--hb-pill,999px);cursor:pointer;border:0;
  background:var(--hb-acc,#c8f169);color:#1a1a1a}
.hbc-send:disabled{opacity:.5;cursor:default}

.hbc-feed{display:flex;flex-direction:column;gap:12px;max-height:520px;
  overflow-y:auto}
.hbc-loading,.hbc-empty{font-size:12px;font-weight:600;color:var(--hb-mut,#888);
  padding:14px 0;text-align:center}

.hbc-msg{display:flex;gap:10px;align-items:flex-start}
.hbc-av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;
  place-items:center;font-size:11px;font-weight:800;
  background:var(--hb-sfc2,#eee);color:var(--hb-mut,#666)}
.hbc-body{min-width:0;flex:1}
.hbc-msg-head{display:flex;align-items:center;gap:7px;font-size:12px;
  margin-bottom:2px}
.hbc-time{margin-left:auto;font-size:10.5px;font-weight:600;
  color:var(--hb-mut,#999)}
.hbc-text{font-size:13px;line-height:1.5;color:var(--hb-txt,#111);
  white-space:pre-wrap;word-break:break-word}
.hbc-badge{font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:999px;
  background:color-mix(in srgb,#f2b705 22%,transparent);color:#8a6400}

/* Ichki eslatma — lentada ham aniq farq qilib turadi */
.hbc-log .hbc-body{background:color-mix(in srgb,#f2b705 9%,transparent);
  border-left:2px solid color-mix(in srgb,#f2b705 55%,transparent);
  padding:6px 10px;border-radius:0 10px 10px 0}

/* Tizim yozuvi: «Bosqich: Yangi → Suhbat» */
.hbc-sys{justify-content:center}
.hbc-changes{display:flex;flex-direction:column;gap:2px;font-size:11.5px;
  font-weight:600;color:var(--hb-mut,#777);background:var(--hb-sfc2,#f7f7f7);
  padding:6px 12px;border-radius:var(--hb-pill,999px);max-width:100%}
.hbc-changes .hbc-time{margin-left:0;margin-top:2px}
.hbc-old{text-decoration:line-through;opacity:.75}
.hbc-new{color:var(--hb-txt,#111);font-weight:800}

.hbc-file{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:var(--hb-pill,999px);text-decoration:none;
  background:var(--hb-sfc2,#f5f5f5);border:1px solid var(--hb-brd,#e6e6e6);
  color:var(--hb-mut,#666)}
.hbc-file:hover{color:var(--hb-txt,#111)}

@media (max-width:640px){
  .hbc{padding:11px;border-radius:14px}
  .hbc-feed{max-height:none}
}