/* app-patches-3.css — potongan dari assets/app.css (dipecah 28 Jul 2026).
   Foto profil self-service, approval revamp, multi-profile jadwal pimpinan (ADR-0002 Fase 4).
   URUTAN <link> di index.html/admin-users.html/observability.html adalah KONTRAK:
   cascade CSS = urutan muat, blok bawah sengaja mengalahkan blok atas.
   Muat setelah app-patches-2.css, sebelum app-latest.css. */
/* ===== Foto profil self-service ===== */
#kcUser.has-profile-photo{
  width:42px;
  min-width:42px;
  max-width:42px;
  height:42px;
  padding:var(--ui-05);
  overflow:hidden;
  font-size:0;
}
#kcUser.has-profile-photo::before{display:none}
#kcUser.has-profile-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.profile-photo-modal{max-width:560px}
.profile-photo-workspace{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:center}
.profile-photo-preview{
  width:180px;
  aspect-ratio:1;
  border-radius:22px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:52px;
  font-weight:900;
  border:1px solid var(--line);
  background-position:center;
  background-size:cover;
}
.profile-photo-preview img{width:100%;height:100%;object-fit:cover}
.profile-photo-copy{display:grid;gap:9px}
.profile-photo-copy p{margin:0}
.profile-photo-picker{width:max-content}
.profile-photo-adjust{display:grid;gap:var(--ui-15);margin-top:14px;padding:var(--ui-3);border:1px solid var(--line);border-radius:var(--radius-control)}
.profile-photo-adjust p{margin:0}
.profile-photo-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--ui-2);align-items:center;margin-top:16px}
.invite-upload-popup{width:min(940px,100%)}
.invite-ai-eyebrow{
  display:block;
  margin-bottom:5px;
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  line-height:var(--lh-tight);
  text-transform:uppercase;
}
.invite-simple-flow{display:grid;gap:var(--ui-3)}
.invite-source-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ui-1);
  padding:var(--ui-1);
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--soft);
}
.invite-source-tab{
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--ui-2);
  padding:var(--ui-2) var(--ui-3);
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  cursor:pointer;
}
.invite-source-tab > span{
  min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:inherit;
  font-size:10px;
  font-weight:900;
}
.invite-source-tab strong{font-size:var(--fs-label);line-height:var(--lh-tight)}
.invite-source-tab.active{
  background:var(--panel-strong);
  color:var(--accent);
  box-shadow:0 5px 18px rgba(15,23,42,.08);
}
.invite-source-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.invite-ai-grid{
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:var(--ui-3);
}
.invite-work-panel,
.invite-review-panel{
  min-width:0;
  display:grid;
  align-content:start;
  gap:var(--ui-3);
  padding:14px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-inner);
  background:color-mix(in srgb,var(--panel-strong) 94%,var(--accent-soft));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
[data-theme="dark"] .invite-work-panel,
[data-theme="dark"] .invite-review-panel{
  background:color-mix(in srgb,var(--panel-strong) 91%,var(--accent-soft));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.invite-simple-head{
  min-height:42px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--ui-25);
}
.invite-simple-head h4,
.input-result-panel .invite-simple-head h4{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-title);
  font-weight:900;
  line-height:1.25;
}
.invite-simple-head p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:var(--fs-label);
  line-height:1.4;
}
.invite-simple-head > span{
  min-height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--ui-1) var(--ui-2);
  border:1px solid color-mix(in srgb,var(--success) 32%,var(--line));
  border-radius:9px;
  color:var(--success);
  background:color-mix(in srgb,var(--success-bg) 72%,var(--panel));
  font-size:10px;
  font-weight:850;
  line-height:var(--lh-tight);
  text-align:center;
}
.invite-text-field{
  display:grid;
  gap:7px;
}
.input-popup [data-invite-source-panel][hidden]{
  display:none!important;
}
.invite-text-field label,
.invite-agenda-type > span{
  color:var(--muted);
  font-size:var(--fs-caption);
  font-weight:850;
  line-height:1.3;
}
.invite-text-field textarea{
  width:100%;
  min-height:190px;
  resize:vertical;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--panel);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-body);
  line-height:var(--lh-reading);
}
.invite-text-field textarea:focus-visible,
.invite-file-drop input:focus-visible,
.invite-agenda-type select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.input-popup .invite-file-drop{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:center;
  gap:var(--ui-25);
  min-height:190px;
  padding:13px;
  border-radius:var(--radius-control);
  text-align:left;
  background:var(--panel);
}
.invite-file-copy{
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:var(--ui-25);
}
.invite-file-copy strong,
.invite-file-copy small{
  display:block;
}
.invite-file-copy strong{
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.25;
}
.invite-file-copy small{
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  line-height:var(--lh-snug);
}
.invite-file-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--accent);
  background:var(--accent-soft);
  font-size:var(--fs-heading);
  font-weight:900;
}
.invite-file-drop input{
  width:100%;
  min-height:44px;
  padding:var(--ui-15);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-label);
}
.invite-file-drop input::file-selector-button{
  min-height:32px;
  margin-right:8px;
  padding:var(--ui-15) var(--ui-25);
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel-strong);
  color:var(--ink);
  font:inherit;
  font-weight:var(--fw-heavy);
  cursor:pointer;
}
.invite-source-panel .ocr-status{
  min-height:18px;
  margin:0;
  font-size:var(--fs-caption);
  line-height:var(--lh-snug);
}
.invite-draft-button,
.invite-apply-button{
  width:100%;
  min-width:0;
  min-height:44px;
}
.invite-agenda-type{display:grid;grid-template-columns:auto minmax(180px,1fr);align-items:center;gap:var(--ui-25);margin:0;color:var(--muted);font-size:var(--fs-caption);font-weight:850}
.invite-agenda-type select{min-height:44px;width:100%}
.invite-review-panel .invite-agenda-type{margin:0}
.invite-review-result{
  min-height:310px;
  max-height:48dvh;
  overflow:auto;
  overscroll-behavior:contain;
  padding:var(--ui-25);
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--panel);
}
.invite-review-result > .empty{
  min-height:288px;
  display:grid;
  place-items:center;
  padding:18px;
  color:var(--muted);
  text-align:center;
}
.invite-agenda-review-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--ui-2)}
.invite-agenda-review-field{
  min-width:0;
  display:grid;
  align-content:start;
  gap:var(--ui-15);
  padding:var(--ui-25);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--soft);
}
.invite-agenda-review-field.full{grid-column:1/-1}
.invite-agenda-review-field > label{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  line-height:var(--lh-tight);
  text-transform:uppercase;
}
.invite-agenda-review-field input,
.invite-agenda-review-field select{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:var(--ui-2) var(--ui-25);
  border:0;
  border-radius:var(--radius-chip);
  background:var(--panel-strong);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-label);
}
.invite-agenda-review-field input:focus-visible,
.invite-agenda-review-field select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.invite-agenda-review-time{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px}
.invite-agenda-review-time > span{color:var(--muted);font-weight:var(--fw-heavy)}
.invite-review-note{
  grid-column:1/-1;
  margin:0;
  padding:7px 9px;
  border-radius:var(--radius-chip);
  background:var(--accent-soft);
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}

@media(max-width:760px){
  .cc-header-side{flex-wrap:wrap}
  .calendar-presence{order:-1}
  .calendar-presence-label{display:none}
  .route-eta-origin-tabs{grid-template-columns:1fr}
  .route-eta-result-grid{grid-template-columns:1fr}
  .profile-photo-workspace{grid-template-columns:1fr;text-align:center}
  .profile-photo-preview{width:min(180px,52vw);margin:0 auto}
  .profile-photo-copy{justify-items:center}
  .profile-photo-actions{grid-template-columns:1fr 1fr}
  .profile-photo-actions span{display:none}
  .profile-photo-actions .danger{grid-column:1/-1;grid-row:2}
  .invite-upload-popup{width:100%}
  .invite-ai-grid{grid-template-columns:1fr}
  .invite-work-panel,
  .invite-review-panel{padding:13px;border-radius:18px}
  .invite-text-field textarea{min-height:140px}
  .input-popup .invite-file-drop{min-height:140px}
  .invite-review-result{min-height:180px;max-height:none}
  .invite-review-result > .empty{min-height:154px}
  .invite-agenda-type{grid-template-columns:1fr}
}
@media(max-width:460px){
  .invite-source-tab{padding:7px 5px;gap:5px}
  .invite-source-tab strong{font-size:var(--fs-caption)}
  .invite-agenda-review-form{grid-template-columns:1fr}
  .invite-agenda-review-field.full,
  .invite-review-note{grid-column:auto}
}
@media(max-width:680px){
  #kcUser.has-profile-photo{width:36px;min-width:36px;max-width:36px;height:36px;flex-basis:36px}
}
@media(max-width:430px){
  #kcUser.has-profile-photo{width:34px;min-width:34px;max-width:34px;height:34px;flex-basis:34px}
}

/* Approval revamp: informasi inti terbaca tanpa membuka panel tambahan. */
#view-approval .approval-command-shell{
  gap:var(--ui-3);
}
#view-approval .daily-report-card{
  margin:0;
}
.approval-day-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ui-25);
}
.approval-day-metrics > div{
  min-width:0;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ui-3);
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-inner);
  background:var(--panel);
  box-shadow:inset 0 1px 0 color-mix(in srgb, white 56%, transparent);
}
.approval-day-metrics small{
  color:var(--muted);
  font-size:var(--fs-caption);
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.approval-day-metrics strong{
  color:var(--ink);
  font-size:24px;
  line-height:1;
}
#view-approval .approval-whatsapp-card{
  margin:0;
  background:var(--panel);
}
#approvalList{
  gap:14px;
}
#approvalList .agenda-card{
  display:grid;
  gap:var(--ui-3);
  padding:var(--ui-4);
  border-width:1px;
  border-left-width:4px;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}
#approvalList .agenda-card > .agenda-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--ui-3);
  margin:0;
  padding:0 0 var(--ui-3);
  border-bottom:1px solid var(--line);
}
#approvalList .agenda-card > .agenda-row .timebox{
  min-width:72px;
  min-height:58px;
}
#approvalList .agenda-card > .agenda-row .agenda-title{
  margin:0 0 4px;
  font-size:clamp(16px,1.7vw,20px);
  line-height:var(--lh-tight);
}
#approvalList .agenda-card > .agenda-row .agenda-meta{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-label);
  line-height:var(--lh-snug);
}
.approval-overview{
  margin:0;
}
.approval-overview > summary{
  background:color-mix(in srgb,var(--accent) 7%,var(--soft));
  transition:background .16s ease,box-shadow .16s ease;
}
.approval-overview > summary:hover,
.approval-overview > summary:focus-visible{
  background:color-mix(in srgb,var(--accent) 11%,var(--soft));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
[data-theme="dark"] .approval-overview > summary{
  background:color-mix(in srgb,var(--bg) 34%,var(--accent-soft));
}
[data-theme="dark"] .approval-overview > summary:hover,
[data-theme="dark"] .approval-overview > summary:focus-visible{
  background:color-mix(in srgb,var(--bg) 48%,var(--accent-soft));
}
.approval-overview-body{
  display:grid;
  gap:var(--ui-25);
}
.approval-overview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ui-2);
}
.approval-overview .approval-summary-row{
  min-width:0;
  min-height:72px;
  display:grid;
  align-content:start;
  gap:5px;
  padding:var(--ui-25) var(--ui-3);
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--soft);
}
.approval-overview .approval-summary-row small,
.approval-technical-row small{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  line-height:var(--lh-tight);
  text-transform:uppercase;
}
.approval-overview .approval-summary-row > div,
.approval-technical-row strong{
  min-width:0;
  color:var(--ink);
  font-size:var(--fs-label);
  line-height:var(--lh-snug);
  overflow-wrap:anywhere;
}
.approval-inline-display{
  width:100%;
  min-width:0;
  min-height:30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--ui-2);
  padding:0;
  border:0;
  color:var(--ink);
  background:transparent;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.approval-inline-display > span:first-child{
  min-width:0;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.approval-inline-edit-cue{
  align-self:start;
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:var(--ui-r-pill);
  color:var(--accent);
  background:color-mix(in srgb,var(--accent-soft) 56%,var(--panel));
  font-size:9px;
  font-weight:900;
  line-height:var(--lh-tight);
}
.approval-inline-display:hover .approval-inline-edit-cue,
.approval-inline-display:focus-visible .approval-inline-edit-cue{
  border-color:var(--accent);
}
.approval-inline-editor{
  display:grid;
  gap:var(--ui-15);
  min-width:0;
}
.approval-inline-editor[hidden]{
  display:none;
}
.approval-inline-editor input,
.approval-inline-editor textarea,
.approval-inline-editor select{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:var(--ui-2) var(--ui-25);
  border:1px solid var(--line);
  border-radius:var(--radius-chip);
  color:var(--ink);
  background:var(--panel);
  font:inherit;
  font-size:var(--fs-label);
  line-height:var(--lh-snug);
  resize:vertical;
}
.approval-inline-editor textarea{
  min-height:58px;
}
.approval-inline-editor input:focus,
.approval-inline-editor textarea:focus,
.approval-inline-editor select:focus{
  border-color:var(--accent);
  outline:2px solid color-mix(in srgb,var(--accent) 20%,transparent);
  outline-offset:1px;
}
.approval-inline-person-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
}
.approval-inline-person-chip{
  max-width:100%;
  min-height:30px;
}
.approval-inline-person-chip > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.approval-inline-person-entry{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--ui-15);
  min-width:0;
}
.approval-inline-editor .approval-inline-help{
  margin:0;
  color:var(--muted);
  font-size:9px;
  font-weight:var(--fw-bold);
  letter-spacing:0;
  text-transform:none;
}
.approval-inline-actions{
  display:flex;
  justify-content:flex-end;
  gap:var(--ui-15);
}
.approval-inline-actions .btn{
  min-width:0;
  min-height:34px;
  padding:7px 11px;
  font-size:var(--fs-caption);
}
@media(max-width:680px){
  .approval-inline-person-entry{
    grid-template-columns:1fr;
  }
}
.approval-technical-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ui-2);
}
.approval-technical-row > span{
  min-width:0;
  min-height:54px;
  display:grid;
  align-content:center;
  gap:var(--ui-1);
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--accent-soft) 38%,var(--panel));
}
#approvalList .checklist-category-chips{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ui-2);
}
#approvalList .checklist-category-chip{
  min-width:0;
  min-height:44px;
}
#approvalList .approval-readiness-strip{
  grid-template-columns:minmax(0,1fr) minmax(100px,24%);
  padding:var(--ui-25) var(--ui-3);
}
#approvalList .approval-readiness-meter{
  width:100%;
  min-width:0;
}
#approvalList .approval-checklist-disclosure{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--panel);
}
#approvalList .approval-checklist-disclosure > summary{
  padding:11px 12px;
}
#approvalList .approval-checklist-disclosure > .approval-summary-body{
  padding:0 var(--ui-3) var(--ui-3);
}
#approvalList .approval-checklist-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
#approvalList .approval-summary-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ui-2);
}
.approval-collaboration-disclosure{
  border:1px solid color-mix(in srgb,var(--status-pending-border) 70%,var(--line));
  border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--status-pending-bg) 24%,var(--panel));
  overflow:hidden;
}
.approval-collaboration-disclosure > summary{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ui-25);
  padding:var(--ui-25) var(--ui-3);
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.approval-collaboration-disclosure > summary::-webkit-details-marker{
  display:none;
}
.approval-collaboration-disclosure > summary > span:first-child{
  min-width:0;
}
.approval-collaboration-disclosure > summary strong,
.approval-collaboration-disclosure > summary small{
  display:block;
}
.approval-collaboration-disclosure > summary strong{
  font-size:var(--fs-label);
}
.approval-collaboration-disclosure > summary small{
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  font-weight:var(--fw-bold);
  line-height:1.3;
}
.approval-collaboration-disclosure > summary > span:last-child{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--soft);
  transition:transform .18s ease;
}
.approval-collaboration-disclosure[open] > summary > span:last-child{
  transform:rotate(180deg);
}
.approval-direction{
  display:grid;
  gap:var(--ui-25);
  padding:var(--ui-3);
  border:1px solid color-mix(in srgb,var(--status-pending-border) 70%,var(--line));
  border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--status-pending-bg) 24%,var(--panel));
}
.approval-direction-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ui-3);
}
.approval-direction-head > span:first-child{
  min-width:0;
}
.approval-direction-head strong,
.approval-direction-head small{
  display:block;
}
.approval-direction-head strong{
  color:var(--ink);
  font-size:var(--fs-body);
}
.approval-direction-head small{
  margin-top:2px;
  color:var(--muted);
  font-size:var(--fs-caption);
  line-height:var(--lh-snug);
}
.approval-direction-input{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:var(--ui-2);
}
.approval-direction-input textarea{
  width:100%;
  min-height:58px;
  resize:vertical;
  padding:var(--ui-25) var(--ui-3);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-strong);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-label);
  line-height:1.4;
}
.approval-direction-input .btn{
  min-width:112px;
  min-height:38px;
  align-self:end;
  padding:var(--ui-2) var(--ui-3);
  font-size:var(--fs-label);
}
.approval-collaboration{
  gap:9px;
}
.approval-collaboration-disclosure > .approval-collaboration{
  border:0;
  border-top:1px solid color-mix(in srgb,var(--status-pending-border) 55%,var(--line));
  border-radius:0;
  background:transparent;
}
.approval-collaboration .btn.compact{
  width:auto;
  min-width:0;
  min-height:36px;
  padding:7px 11px;
  font-size:var(--fs-caption);
  line-height:var(--lh-tight);
}
.approval-direction-readonly{
  margin:0;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel-strong);
  color:var(--ink);
  font-size:var(--fs-label);
  line-height:1.45;
  white-space:pre-wrap;
}
.approval-access-panel{
  display:grid;
  gap:var(--ui-2);
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--accent-soft) 24%,var(--panel));
}
.approval-access-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--ui-25);
}
.approval-access-head strong,
.approval-access-head small{
  display:block;
}
.approval-access-head strong{
  color:var(--ink);
  font-size:var(--fs-caption);
}
.approval-access-head small{
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  line-height:var(--lh-snug);
}
.approval-access-picker{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
}
.approval-access-picker select{
  width:100%;
  min-width:0;
  min-height:36px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-chip);
  background:var(--panel-strong);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-caption);
}
.approval-recipient-chips{
  min-height:30px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ui-15);
}
.approval-recipient-chip{
  max-width:100%;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  gap:var(--ui-15);
  padding:4px 5px 4px 9px;
  border:1px solid var(--line);
  border-radius:var(--ui-r-pill);
  background:var(--panel);
  color:var(--ink);
  font-size:10px;
  font-weight:var(--fw-heavy);
}
.approval-recipient-chip > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.approval-recipient-chip button{
  width:20px;
  height:20px;
  min-width:20px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--soft);
  color:var(--ink);
  cursor:pointer;
  font:inherit;
  line-height:1;
}
.approval-access-empty,
.approval-thread-empty{
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}
.approval-thread{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  overflow:hidden;
}
.approval-thread > summary{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ui-25);
  padding:9px 10px;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  font-size:var(--fs-caption);
  font-weight:900;
}
.approval-thread > summary::-webkit-details-marker{
  display:none;
}
.approval-thread > summary > span:first-child{
  min-width:0;
}
.approval-thread > summary small{
  margin-left:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:var(--fw-bold);
}
.approval-thread > summary > span:last-child{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--soft);
  transition:transform .18s ease;
}
.approval-thread[open] > summary > span:last-child{
  transform:rotate(180deg);
}
.approval-thread-body{
  display:grid;
  gap:var(--ui-2);
  padding:0 9px 9px;
  overflow:hidden;
}
.approval-thread-messages{
  max-height:180px;
  display:grid;
  align-content:start;
  gap:7px;
  padding-right:3px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.approval-message{
  width:min(84%,520px);
  display:grid;
  gap:3px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-chip);
  background:var(--soft);
  color:var(--ink);
}
.approval-message.is-mine{
  justify-self:end;
  background:color-mix(in srgb,var(--accent-soft) 48%,var(--panel));
}
.approval-message header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ui-2);
}
.approval-message strong{
  min-width:0;
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.approval-message time{
  flex:0 0 auto;
  color:var(--muted);
  font-size:9px;
}
.approval-message p{
  margin:0;
  font-size:var(--fs-caption);
  line-height:1.4;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.approval-thread-compose{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:7px;
}
.approval-thread-compose textarea{
  width:100%;
  min-height:44px;
  max-height:92px;
  resize:vertical;
  padding:var(--ui-2) var(--ui-25);
  border:1px solid var(--line);
  border-radius:var(--radius-chip);
  background:var(--panel-strong);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-caption);
  line-height:var(--lh-snug);
}
#approvalList .agenda-card > .actions.approval-decision-actions{
  margin:0;
}
.agenda-preview-direction{
  display:grid;
  gap:var(--ui-1);
  margin-top:10px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--status-pending-border) 70%,var(--line));
  border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--status-pending-bg) 24%,var(--panel));
}
.agenda-preview-direction small{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.agenda-preview-direction strong{
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.4;
  white-space:pre-wrap;
}

@media(max-width:980px){
  .approval-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #approvalList .approval-checklist-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:680px){
  #view-approval .approval-command-shell{
    gap:var(--ui-25);
  }
  .approval-day-metrics{
    gap:var(--ui-15);
  }
  .approval-day-metrics > div{
    min-height:62px;
    display:grid;
    align-content:center;
    gap:var(--ui-1);
    padding:9px 10px;
  }
  .approval-day-metrics small{
    font-size:9px;
  }
  .approval-day-metrics strong{
    font-size:20px;
  }
  #approvalList .agenda-card{
    gap:var(--ui-25);
    padding:var(--ui-3);
  }
  #approvalList .agenda-card > .agenda-row{
    grid-template-columns:auto minmax(0,1fr);
    gap:9px;
  }
  #approvalList .agenda-card > .agenda-row > .badge{
    grid-column:2;
    justify-self:start;
  }
  #approvalList .agenda-card > .agenda-row .timebox{
    min-width:58px;
    min-height:54px;
  }
  .approval-overview-grid{
    grid-template-columns:1fr;
  }
  .approval-overview .approval-summary-row{
    min-height:0;
  }
  .approval-technical-row,
  #approvalList .checklist-category-chips{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #approvalList .approval-readiness-strip{
    grid-template-columns:1fr;
  }
  #approvalList .approval-checklist-grid{
    grid-template-columns:1fr;
  }
  .approval-direction-head{
    align-items:flex-start;
  }
  .approval-direction-input{
    grid-template-columns:1fr;
  }
  .approval-direction-input .btn{
    width:auto;
    min-width:112px;
    justify-self:end;
  }
  .approval-collaboration .approval-direction-input .btn{
    min-width:0;
  }
  .approval-thread-messages{
    max-height:150px;
  }
  .approval-message{
    width:min(94%,520px);
  }
}
@media(max-width:480px){
  .approval-access-picker,
  .approval-thread-compose{
    grid-template-columns:1fr;
  }
  .approval-access-picker .btn,
  .approval-thread-compose .btn{
    justify-self:end;
  }
}

/* ===== Multi-profile jadwal pimpinan (ADR-0002 Fase 4) =====
   Pemilih profile di topbar. <select> native dibiarkan native: popup sistemnya
   tidak diganti (itu yang membuat keyboard & screen reader bekerja gratis).
   Chrome-nya dipinjam dari .icon-btn (kelas ada di markup): tinggi, radius,
   border, latar, hover, dan pasangan tema gelap ikut deret tombol topbar tanpa
   token duplikat. Di sini cuma pil teks — ikut pola #kcUser. */
.office-profile{
  width:auto; padding:0 var(--ui-3);
  /* Border .icon-btn dinolkan: pil ini cuma teks + panah, garis tepinya
     bikin dua kotak bertumpuk di deret topbar. */
  border:0;
}
#officeProfileSelect{
  appearance:none; -webkit-appearance:none;
  border:0; background:transparent; color:inherit;
  /* box-shadow/backdrop-filter dinolkan: layer liquid glass mewarnai `select`
     mentah, dan itu menggambar kotak kedua di dalam pil. */
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  font:inherit; font-size:var(--fs-body); font-weight:var(--fw-medium);
  padding:0 15px 0 0; cursor:pointer; max-width:9rem;
  /* Kaki panah digambar sebagai background supaya tetap terlihat setelah
     appearance:none, tanpa elemen tambahan. */
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 8px) 55%, calc(100% - 4px) 55%;
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
#officeProfileSelect:focus-visible{ outline:2px solid var(--accent, #4c8dff); outline-offset:2px; }
/* Opsi diwarnai eksplisit: popup select digambar OS, dan pada tema gelap ia tak
   mewarisi warna teks kita -> teks putih di atas putih. */
#officeProfileSelect option{ color:#111; background:#fff; }
/* Di layar kecil deret .icon-btn menyusut jadi kotak 32-36px; pil ini tetap butuh
   lebar teks — pakai ID supaya menang dari `.topbar-actions .icon-btn`. */
@media (max-width: 720px){
  #officeProfileWrap{ width:auto; min-width:0; padding:0 var(--ui-2); }
  #officeProfileSelect{ max-width:6.5rem; }
}
/* 320-360px: deret topbar sudah 6 kontrol, pil selebar teks bikin baris melimpah.
   Teks dikecilkan (bukan pil disembunyikan — pemilih ini satu-satunya jalan
   berpindah jadwal). */
@media (max-width: 380px){
  #officeProfileWrap{ padding:0 var(--ui-1); }
  #officeProfileSelect{ font-size:var(--fs-caption); max-width:4.2rem; }
  /* Judul brand tak bisa dipenggal (word-break:normal) sehingga saat kolomnya
     tergencet ia MELIMPAH ke atas deret tombol. Digunting di kolomnya sendiri:
     tombol tetap terbaca, dan bleed 4px yang sudah ada sebelum pil ini pun hilang. */
  .brand-copy{ overflow:hidden; }
}

/* ===== LINTAS ZONA (22 Agu 2026) — dua jam pada agenda berzona luar Indonesia =====
   Nol warna baru (keputusan warna surface Kalender MENGIKAT): semua memakai token lama
   (--muted, --accent, --fw-*). Baris kedua ±0,85em; ember hari & posisi kartu tetap WIB. */
.cev-zona-baris{
  display:block; font-size:.85em; font-weight:var(--fw-bold); color:var(--muted);
  font-variant-numeric:tabular-nums; letter-spacing:.01em; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.week-zona-baris{ padding:0 1px; }
.day-zona-baris, .calendar-day-zona-baris{ margin-top:1px; }
.timebox .timebox-zona{
  display:block; font-size:10px; font-weight:var(--fw-bold); color:var(--muted);
  font-variant-numeric:tabular-nums; line-height:1.3; white-space:nowrap;
}
/* Banner mode perjalanan / garis tanggal — token muted lama, satu baris per layar. */
.lintas-zona-banner{
  padding:6px 12px; border-radius:8px; margin:0 0 8px;
  font-size:var(--fs-label, 12px); font-weight:var(--fw-bold); color:var(--muted);
  background:color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}
.lintas-zona-banner[hidden]{ display:none; }
/* Detail dua-tepi: Berangkat/Tiba/Durasi/Waktu perangkat (agenda berzona luar Indonesia). */
.detail-dua-tepi{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.detail-dua-tepi span{
  font-size:var(--fs-label, 12px); color:var(--muted); font-variant-numeric:tabular-nums;
}
/* Chip [KODE·tgl] zona luar & tag zona kedatangan pada form — bentuk chip lama dipakai ulang. */
.cev-zone-chip.cev-zona-luar{ letter-spacing:0; }
.detail-brief-zone-tag-selesai[hidden]{ display:none; }
.detail-brief-rute-konfirm{ color:var(--muted); }
.detail-brief-rute-konfirm[hidden]{ display:none; }
.detail-brief-rute-ubah{
  border:0; padding:0; background:none; cursor:pointer;
  color:var(--accent, #2563eb); font-weight:var(--fw-bold); text-decoration:underline;
}

/* ===== RUANG PERCAKAPAN AGENDA (ADR-0007, 5 Sep 2026) =====
   Grup percakapan per agenda gaya WhatsApp di slot Arahan & Diskusi (approvalDirectionPanel).
   SENGAJA di berkas ini (sesudah blok .approval-*): sudah dirujuk index.html → ikut stamp &
   bacaSumberCss tanpa registrasi. Bentuk/token disalin dari pratinjau RUANG-PERCAKAPAN-pratinjau.html,
   nama kelas mengikuti kontrak §14.2 (uji regex memaku .ruang-pesan.is-mine, .ruang-sebut, dst.).
   Lima token warna baru (§14.5) — rasio kontras ≥4,5:1 dihitung di dokumen; mode gelap ikut. */
/* ===== TOKEN RUANG (SPESIFIKASI-WEB-RAPI bagian 4) =====
   Semua token berprefiks --ruang- dan HANYA dikonsumsi selektor .ruang-*; nol token bersama
   ditulis ulang. Warna ditulis DUA KALI (terang + gelap); geometri sekali di :root.
   Rasio kontras dihitung ulang dari nilai hex ini (rumus WCAG, rgba dikomposit lebih dahulu):
   minimum teks 4,64 terang & 5,38 gelap; minimum palet nama 4,83; cincin fokus 5,03-8,58. */
:root{
  /* 12 pasang warna BARU */
  --ruang-kanvas:#eef3f8;              /* = bgMid paritas mobile */
  --ruang-kepala-bg:#f0f3f7;
  --ruang-slab:#ffffff;
  --ruang-garis:rgba(16,24,40,.12);    /* WAJIB: --line terang adalah garis PUTIH (rasio 1,00) */
  --ruang-pil-bg:#ffffff;
  --ruang-field-bg:#ffffff;
  --ruang-aksen:#1d4ed8;               /* = --status-approved terang */
  --ruang-aksen-bg:#e3effe;            /* = --status-approved-bg terang */
  --ruang-aksen-ink:#ffffff;
  --ruang-kutipan-saya-bg:#f1f6ff;     /* = quoteFillOnTint mobile */
  --ruang-kutipan-lain-bg:#f6f7fb;     /* = quoteFillOnIncoming mobile */
  --ruang-bayang-gelembung:0 1px .5px rgba(16,24,40,.13);
  /* lima token lama, nilainya diikat ulang ke paritas mobile Varian A */
  --ruang-gelembung-saya-bg:#dbe7ff;
  --ruang-gelembung-lain-bg:var(--ruang-slab);
  --ruang-sebut-saya-bg:#fef5d2;
  --ruang-sorot-bg:#fde68a;
  --ruang-meta-ink:#334155;            /* = --status-waiting terang = Ruang.meta mobile */
  /* latar chip @sebutan: 6% (bukan 10%) supaya --link tetap 4,64:1 di atas gelembung keluar */
  --ruang-sebut-bg:color-mix(in srgb,var(--link) 6%,transparent);
  /* palet warna nama pengirim = senderPalette mobile */
  --ruang-nama-0:#3730a3;
  --ruang-nama-1:#065f46;
  --ruang-nama-2:#92400e;
  --ruang-nama-3:#6d28d9;
  --ruang-nama-4:#8d1a9c;
  --ruang-nama-5:#0b6b5d;    /* digelapkan dari #0d7a6a: 4,21:1 di atas gelembung keluar & sorot */
}
[data-theme="dark"]{
  --ruang-kanvas:#1f272a;
  --ruang-kepala-bg:#262f33;
  --ruang-slab:#2b3437;
  --ruang-garis:rgba(255,255,255,.12);
  --ruang-pil-bg:#2b3437;
  --ruang-field-bg:#333e42;
  --ruang-aksen:#bfdbfe;               /* = --status-approved gelap */
  --ruang-aksen-bg:rgba(191,219,254,.20);
  --ruang-aksen-ink:#101828;
  --ruang-kutipan-saya-bg:#1b3377;
  --ruang-kutipan-lain-bg:#262e34;     /* ink@20% di atas slab web, dihitung */
  --ruang-bayang-gelembung:0 0 0 rgba(0,0,0,0);  /* bubbleShadow mobile: terang saja */
  --ruang-gelembung-saya-bg:#1e3a8a;
  --ruang-gelembung-lain-bg:var(--ruang-slab);
  --ruang-sebut-saya-bg:rgba(253,230,138,.20);
  --ruang-sorot-bg:#5b4a0e;
  --ruang-meta-ink:#cbd5e1;
  --ruang-sebut-bg:color-mix(in srgb,var(--link) 6%,transparent);
  --ruang-nama-0:#b4c0fd;    /* digelapkan dari #a5b4fc: 4,33:1 di atas gelembung tersorot */
  --ruang-nama-1:#5eead4;
  --ruang-nama-2:#f6c453;
  --ruang-nama-3:#ddd6fe;
  --ruang-nama-4:#f0abfc;
  --ruang-nama-5:#2dd4bf;
}
:root{
  /* geometri (bagian 4.5) — satu nilai, tidak bertema */
  --ruang-kolom-baca:760px;
  --ruang-tepi:16px;
  --ruang-jajar:max(var(--ruang-tepi), calc((100% - var(--ruang-kolom-baca)) / 2));
  /* plafon lebar isi panel Tata Kelola anggota (koreksi pemilik 7 Sep) */
  --ruang-anggota-lebar:720px;
  --ruang-pintu-h:48px;
  --ruang-kepala-h:48px;
  --ruang-pintu-disc:32px;
  --ruang-avatar:28px;
  --ruang-avatar-kecil:22px;
  --ruang-sematan-h:40px;
  --ruang-pita:3px;
  --ruang-komposer-h:56px;
  --ruang-linimasa-h:480px;
  --ruang-gelembung-maks:min(86%,420px);
  --ruang-gelembung-pad:6px 10px;
  --ruang-gelembung-pad-reaksi:18px;
  --ruang-r-gelembung:8px;
  --ruang-r-ekor:3px;
  --ruang-ekor-w:8px;
  --ruang-ekor-h:10px;
  --ruang-jarak-sama:2px;
  --ruang-jarak-beda:8px;
  --ruang-jarak-pemisah:16px;
  --ruang-r-pil:12px;
  --ruang-pil-h:26px;
  --ruang-reaksi-gantung:11px;
}
/* PANEL GEPENG BERTINGKAT: band kepala 96 (48+48), bilah sematan 40, kanvas edge-to-edge,
   komposer 56 — satu garis jajar --ruang-jajar untuk SELURUH slab. */
.ruang-percakapan{
  border:1px solid var(--ruang-garis);
  border-radius:var(--radius-control);
  background:var(--ruang-kepala-bg);
  overflow:hidden;
  margin-top:10px;
  container-type:inline-size; container-name:ruang;
}
/* Pita lebar diukur dari WADAH, bukan viewport: kartu Approval, modal Rincian, dan Ringkasan
   punya lebar berbeda pada viewport yang sama. Nilai bawaan = pita PADAT, sehingga peramban
   tanpa container query jatuh ke keadaan aman. --ruang-jajar wajib ikut dideklarasikan di sini:
   substitusi var() sebuah custom property terjadi pada elemen tempat ia DIDEKLARASIKAN. */
.ruang-percakapan > summary.ruang-pintu,
.ruang-percakapan > .ruang-host{
  --ruang-tepi:12px;
  --ruang-kolom-baca:100%;
  --ruang-gelembung-maks:92%;
  --ruang-linimasa-h:min(60vh,440px);
  --ruang-jajar:max(var(--ruang-tepi), calc((100% - var(--ruang-kolom-baca)) / 2));
}
@container ruang (min-width:461px){
  .ruang-percakapan > summary.ruang-pintu,
  .ruang-percakapan > .ruang-host{
    --ruang-tepi:16px;
    --ruang-gelembung-maks:min(86%,520px);
    --ruang-linimasa-h:480px;
  }
}
@container ruang (min-width:820px){
  /* Koreksi pemilik 7 Sep (produksi): percakapan harus MENEPI kiri dan kanan seperti
     WhatsApp Desktop, bukan terkurung kolom terpusat yang menyisakan lorong kosong lebar.
     Karena itu slab memakai lebar penuh dengan tepi kecil, dan yang membatasi panjang
     baris baca adalah LEBAR GELEMBUNG, bukan lebar kolom. */
  .ruang-percakapan > summary.ruang-pintu,
  .ruang-percakapan > .ruang-host{
    --ruang-kolom-baca:100%;
    --ruang-tepi:20px;
    --ruang-gelembung-maks:min(68%,640px);
    --ruang-linimasa-h:clamp(420px,52vh,560px);
  }
  .ruang-cari-hasil{ max-height:260px; }
}
@container ruang (max-width:460px){
  .ruang-anggota-tambah{ grid-template-columns:1fr; }
  .ruang-anggota-ganti{ grid-template-columns:1fr; }
  .ruang-anggota-ganti button{ justify-self:end; }
  /* --fs-input-mobile 16px WAJIB tetap (pagar anti auto-zoom iOS): di lorong sempit
     jarak dalam kolom teks dikembalikan ke nilai lama supaya placeholder tidak terpotong. */
  .ruang-komposer textarea{ padding:9px 11px; }
}
/* --- BARIS 1 band kepala --- */
.ruang-percakapan > summary.ruang-pintu{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding-block:6px; padding-inline:var(--ruang-jajar); min-height:var(--ruang-pintu-h);
  background:var(--ruang-kepala-bg);
}
.ruang-percakapan > summary.ruang-pintu::-webkit-details-marker{ display:none; }
.ruang-pintu-ikon{
  width:var(--ruang-pintu-disc); height:var(--ruang-pintu-disc); flex:0 0 var(--ruang-pintu-disc);
  border-radius:50%; display:grid; place-items:center; background:var(--ruang-aksen-bg);
  font-size:16px; line-height:1;
}
.ruang-pintu-teks{ min-width:0; flex:1; }
.ruang-pintu-teks strong{ display:block; font-size:var(--fs-body); font-weight:var(--fw-bold); }
.ruang-pintu-meta{ display:block; margin-top:1px; color:var(--ruang-meta-ink); font-size:var(--fs-caption); font-weight:var(--fw-bold); }
.ruang-lencana, .ruang-sebut-lencana{
  min-width:22px; height:22px; padding:0 7px; border-radius:var(--ui-r-pill);
  background:var(--ruang-aksen); color:var(--ruang-aksen-ink); font-size:var(--fs-caption); font-weight:var(--fw-heavy);
  display:grid; place-items:center;
}
.ruang-sebut-lencana{ background:var(--ruang-aksen-bg); color:var(--ruang-aksen); }
.ruang-pin-lencana{ font-size:var(--fs-caption); }
.ruang-lencana[hidden], .ruang-sebut-lencana[hidden], .ruang-pin-lencana[hidden]{ display:none; }
.ruang-pintu-chevron{
  width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:50%;
  background:var(--ruang-kanvas); transition:transform .18s ease;
}
.ruang-percakapan[open] > summary .ruang-pintu-chevron{ transform:rotate(180deg); }
/* Penyatu band kepala: pintu hidup DI LUAR .ruang-host, kepala DI DALAMNYA — garis pemisah
   di antara keduanya dihapus saat terbuka supaya keduanya terbaca sebagai satu band. */
.ruang-host{ border-top:1px solid var(--ruang-garis); }
.ruang-host:empty{ border-top:0; }
.ruang-percakapan[open] > .ruang-host{ border-top:0; }
.ruang{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding:0; }
/* --- BARIS 2 band kepala --- */
.ruang-kepala{
  position:relative; display:flex; align-items:center; gap:10px;
  padding-block:2px; padding-inline:var(--ruang-jajar); min-height:var(--ruang-kepala-h);
  border:0; border-radius:0; border-bottom:1px solid var(--ruang-garis);
  background:var(--ruang-kepala-bg);
}
.ruang-anggota-strip{ display:flex; align-items:center; flex:1; min-width:0; }
.ruang-anggota-strip .ruang-avatar{ margin-left:-8px; border:2px solid var(--ruang-kepala-bg); }
.ruang-anggota-strip .ruang-avatar:first-child{ margin-left:0; }
.ruang-anggota-strip button{
  margin-left:8px; border:0; background:transparent; color:var(--ink); font-size:var(--fs-label);
  font-weight:var(--fw-bold); cursor:pointer; min-height:var(--tap-min); padding:0 6px;
}
.ruang-avatar{
  width:var(--ruang-avatar); height:var(--ruang-avatar); flex:0 0 var(--ruang-avatar);
  border-radius:50%; display:grid; place-items:center;
  font-size:var(--fs-caption); font-weight:var(--fw-heavy); color:#fff; background:#123c52; overflow:hidden;
  letter-spacing:.02em;
}
.ruang-avatar.kecil{ width:var(--ruang-avatar-kecil); height:var(--ruang-avatar-kecil); flex-basis:var(--ruang-avatar-kecil); font-size:9px; }
.ruang-kepala-aksi{ display:flex; gap:2px; }
.ruang-tombol-ikon{
  width:var(--tap-min); height:var(--tap-min); border:0; border-radius:50%;
  background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:16px;
}
.ruang-tombol-ikon:hover{ background:var(--ruang-kanvas); }
.ruang-tombol-ikon.is-aktif{ background:var(--ruang-aksen-bg); color:var(--ruang-aksen); }
.ruang-menu-popover{
  position:absolute; right:var(--ruang-jajar); top:calc(100% + 4px); z-index:6; display:grid; min-width:200px;
  background:var(--ruang-slab); border:1px solid var(--ruang-garis); border-radius:12px;
  box-shadow:var(--shadow-soft); padding:4px;
}
.ruang-menu-popover[hidden]{ display:none; }
.ruang-menu-popover button{
  border:0; background:transparent; text-align:left; padding:10px; border-radius:8px;
  font-size:var(--fs-label); cursor:pointer; color:var(--ink); min-height:var(--tap-min);
}
.ruang-menu-popover button:hover{ background:var(--ruang-kanvas); }
/* --- Lembar anggota: slab MENEMPEL, bukan kartu melayang --- */
.ruang-anggota-lembar{
  display:grid; gap:8px; padding-block:10px; padding-inline:var(--ruang-jajar);
  border:0; border-bottom:1px solid var(--ruang-garis); border-radius:0; background:var(--ruang-slab);
}
.ruang-anggota-lembar[hidden]{ display:none; }
.ruang-anggota-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ruang-chip-anggota{
  display:inline-flex; align-items:center; gap:6px; min-height:32px;
  border:1px solid var(--ruang-garis); border-radius:var(--ui-r-pill);
  padding:3px 8px 3px 4px; background:var(--ruang-kanvas); font-size:var(--fs-caption);
}
.ruang-chip-anggota.is-tidak-aktif{ color:var(--ruang-meta-ink); border-style:dashed; }
.ruang-chip-anggota small{ color:var(--ruang-meta-ink); font-size:var(--fs-caption); }
.ruang-chip-anggota button{ border:0; background:transparent; color:var(--ruang-meta-ink); border-radius:var(--ui-r-pill); width:20px; height:20px; cursor:pointer; padding:0; line-height:1; }
.ruang-chip-anggota button:hover{ background:var(--ruang-slab); color:var(--ink); }
/* Koreksi pemilik 7 Sep: panel Tata Kelola anggota dirapikan — satu kolom bertingkat,
   lebar terbatas supaya tidak melar di layar lebar, tombol sejajar di kanan. */
.ruang-anggota-lembar > *{ max-width:var(--ruang-anggota-lebar,720px); }
.ruang-anggota-tambah{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-items:stretch; }
.ruang-anggota-tambah > button{ justify-self:end; }
.ruang-anggota-tambah input[type=search]{ width:100%; }
.ruang-anggota-tambah select{ width:100%; border:1px solid var(--ruang-garis); border-radius:10px; background:var(--ruang-field-bg); color:var(--ink); font-size:var(--fs-label); padding:4px; }
.ruang-anggota-tambah select{ padding-block:0; padding-inline:6px; }
.ruang-anggota-catatan{ margin:0; color:var(--ruang-meta-ink); font-size:var(--fs-caption); }
/* --- PENEKANAN #1: bilah Arahan Menteri (pindah dari keluarga kuning ke aksen) --- */
.ruang-sematan{
  position:relative; display:flex; flex-wrap:nowrap; gap:8px; align-items:center;
  min-height:var(--ruang-sematan-h); padding-block:4px; padding-inline:var(--ruang-jajar);
  border:0; border-bottom:1px solid var(--ruang-garis); border-radius:0;
  background:var(--ruang-aksen-bg); font-size:var(--fs-label); color:var(--ink);
}
.ruang-sematan::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:var(--ruang-pita); height:24px; border-radius:0 2px 2px 0; background:var(--ruang-aksen);
}
.ruang-sematan[hidden]{ display:none; }
.ruang-sematan-teks{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ruang-sematan small{ color:var(--ruang-aksen); font-size:var(--fs-caption); font-weight:var(--fw-heavy); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; flex:0 0 auto; }
.ruang-sematan button{ flex:0 0 auto; border:1px solid var(--ruang-garis); background:var(--ruang-slab); border-radius:var(--ui-r-pill); padding:4px 10px; cursor:pointer; color:var(--ink); min-height:32px; }
.ruang-sematan.is-dihapus{ color:var(--ruang-meta-ink); font-style:italic; }
.ruang-sematan.is-dihapus::before{ opacity:.4; }
/* --- Cari: slab menempel di bawah bilah sematan --- */
.ruang-cari{
  display:grid; gap:6px; padding-block:8px; padding-inline:var(--ruang-jajar);
  background:var(--ruang-slab); border-bottom:1px solid var(--ruang-garis);
}
.ruang-cari[hidden]{ display:none; }
.ruang-cari input{ width:100%; min-height:var(--tap-min); border:1px solid var(--ruang-garis); border-radius:var(--ui-r-pill); padding:6px 14px; background:var(--ruang-field-bg); color:var(--ink); font-size:var(--fs-input-mobile); }
.ruang-cari-hasil{ display:grid; gap:4px; max-height:200px; overflow:auto; }
.ruang-cari-item{ min-height:var(--tap-min); border:1px solid var(--ruang-garis); background:var(--ruang-kanvas); border-radius:10px; padding:6px 9px; text-align:left; cursor:pointer; color:var(--ink); display:grid; gap:2px; align-content:center; font-size:var(--fs-body); }
.ruang-cari-item small{ color:var(--ruang-meta-ink); font-size:var(--fs-caption); }
.ruang-cari-kosong{ margin:0; color:var(--ruang-meta-ink); font-size:var(--fs-caption); }
/* --- KANVAS PERCAKAPAN: edge-to-edge, radius 0, dijangkar ke DASAR --- */
.ruang-linimasa{
  position:relative; height:var(--ruang-linimasa-h); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
  display:flex; flex-direction:column; gap:0;
  padding-block:8px 6px; padding-inline:var(--ruang-jajar);
  border-radius:0; background:var(--ruang-kanvas); min-width:0;
}
.ruang-linimasa > *{ flex:0 0 auto; min-width:0; }
.ruang-linimasa:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
/* JANGKAR DASAR. DILARANG memakai align-content:end / justify-content:flex-end di sini —
   keduanya membuat luapan tak terjangkau sehingga pesan tertua tidak dapat digulir. */
.ruang-isi{ margin-block-start:auto; }
.ruang-isi, .ruang-masuk{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.ruang-masuk:empty{ display:none; }
.ruang-muat-lama, .ruang-muat-baru{
  align-self:center; justify-self:center; border:1px solid var(--ruang-garis); background:var(--ruang-slab); color:var(--link);
  border-radius:var(--ui-r-pill); padding:6px 12px; font-size:var(--fs-caption); font-weight:var(--fw-bold); cursor:pointer; min-height:32px;
}
.ruang-muat-lama{ margin-bottom:8px; }
.ruang-muat-baru{ margin-top:8px; }
.ruang-muat-lama[hidden], .ruang-muat-baru[hidden], .ruang-peringatan-batas[hidden], .ruang-pil-baru[hidden], .ruang-offline[hidden]{ display:none; }
.ruang-peringatan-batas{
  min-height:32px; display:flex; align-items:center; justify-content:center; margin-bottom:8px;
  font-size:var(--fs-caption); color:var(--status-pending); background:color-mix(in srgb,var(--status-pending-bg) 50%,var(--panel));
  border:1px solid var(--status-pending-border); border-radius:var(--ruang-r-pil); padding:0 10px; text-align:center;
}
.ruang-kerangka{ display:grid; gap:8px; padding:8px 0; }
.ruang-kerangka span{ display:block; height:38px; border-radius:var(--ruang-r-gelembung); background:var(--ruang-slab); border:1px solid var(--ruang-garis); opacity:.7; width:60%; }
.ruang-kerangka span:nth-child(2){ width:45%; justify-self:end; }
.ruang-memuat, .ruang-kosong p{ margin:0; text-align:center; color:var(--ruang-meta-ink); font-size:var(--fs-caption); }
.ruang-kosong{ margin-block:auto; padding:26px 12px; display:grid; gap:4px; }
/* --- Pemisah dan baris sistem: pil terpusat, kapital-polos dihentikan --- */
.ruang-pemisah-tanggal, .ruang-pemisah-gabung{
  justify-self:center; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--ruang-pil-h); padding:0 10px; border-radius:var(--ruang-r-pil);
  background:var(--ruang-pil-bg); border:1px solid var(--ruang-garis);
  color:var(--ruang-meta-ink); font-size:var(--fs-caption); font-weight:var(--fw-bold);
  text-transform:none; letter-spacing:0;
  margin-block:var(--ruang-jarak-pemisah) 8px;
}
/* PENEKANAN #2: penanda belum dibaca — pil aksen di antara dua garis aksen. */
.ruang-pemisah-baru{
  display:flex; align-items:center; gap:8px; min-height:var(--ruang-pil-h); padding:0 10px;
  border-radius:var(--ruang-r-pil); background:var(--ruang-aksen-bg);
  color:var(--ruang-aksen); font-size:var(--fs-caption); font-weight:var(--fw-heavy);
  text-transform:none; letter-spacing:0;
  margin-block:var(--ruang-jarak-pemisah) 8px;
}
.ruang-pemisah-baru::before, .ruang-pemisah-baru::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.6;
}
.ruang-pemisah-baru[hidden], .ruang-pemisah-gabung[hidden]{ display:none; }
.ruang-sistem{ display:flex; justify-content:center; gap:8px; align-items:center; padding:0; margin-block:var(--ruang-jarak-pemisah) 8px; }
.ruang-sistem span{
  min-height:var(--ruang-pil-h); display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-caption); color:var(--ruang-meta-ink); background:var(--ruang-pil-bg);
  border:1px solid var(--ruang-garis); border-radius:var(--ruang-r-pil); padding:0 10px;
  text-align:center; max-width:78%;
}
.ruang-sistem time{ font-size:var(--fs-caption); color:var(--ruang-meta-ink); }
/* --- GELEMBUNG: width:fit-content adalah INTI perbaikan "melar" --- */
.ruang-pesan{
  position:relative; display:grid; grid-template-columns:var(--ruang-avatar) minmax(0,1fr); gap:8px;
  align-items:start; width:fit-content; max-width:var(--ruang-gelembung-maks);
}
.ruang-pesan.is-mine{ grid-template-columns:minmax(0,1fr); justify-self:end; }
.ruang-pesan + .ruang-pesan{ margin-top:var(--ruang-jarak-beda); }
.ruang-pesan.is-lanjutan{ margin-top:var(--ruang-jarak-sama); }
.ruang-pesan.is-lanjutan > .ruang-avatar{ visibility:hidden; }
.ruang-pesan:focus{ outline:none; }
.ruang-pesan:focus-visible .ruang-gelembung{ outline:2px solid var(--link); outline-offset:2px; }
.ruang-gelembung{
  position:relative; border:1px solid var(--ruang-garis); border-radius:var(--ruang-r-gelembung);
  box-shadow:var(--ruang-bayang-gelembung);
  background:var(--ruang-gelembung-lain-bg); color:var(--ink); padding:var(--ruang-gelembung-pad);
  display:grid; gap:4px; min-width:0;
}
.ruang-pesan.is-mine .ruang-gelembung{
  background:var(--ruang-gelembung-saya-bg);
}
/* Sudut datar + ekor berada di ATAS (WhatsApp), dan HANYA pada gelembung pertama sebuah grup. */
.ruang-pesan.is-other:not(.is-lanjutan) .ruang-gelembung{ border-start-start-radius:var(--ruang-r-ekor); }
.ruang-pesan.is-mine:not(.is-lanjutan) .ruang-gelembung{ border-start-end-radius:var(--ruang-r-ekor); }
.ruang-pesan:not(.is-lanjutan) .ruang-gelembung::after{
  content:""; position:absolute; top:0; width:var(--ruang-ekor-w); height:var(--ruang-ekor-h);
  background:inherit; clip-path:polygon(100% 0, 0 0, 100% 100%); pointer-events:none;
}
.ruang-pesan.is-other:not(.is-lanjutan) .ruang-gelembung::after{ left:calc(-1 * var(--ruang-ekor-w) + 1px); }
.ruang-pesan.is-mine:not(.is-lanjutan) .ruang-gelembung::after{ right:calc(-1 * var(--ruang-ekor-w) + 1px); clip-path:polygon(0 0, 100% 0, 0 100%); }
.ruang-pesan.is-sebut-saya .ruang-gelembung{ border-color:var(--ruang-aksen); box-shadow:inset var(--ruang-pita) 0 0 var(--ruang-aksen), var(--ruang-bayang-gelembung); }
.ruang-pesan.is-pending .ruang-gelembung{ opacity:.72; }
.ruang-pesan.is-gagal .ruang-gelembung{ border-color:var(--danger); }
.ruang-pesan.is-dihapus .ruang-gelembung{ background:var(--ruang-pil-bg); border-style:solid; }
.ruang-pesan.is-sorot .ruang-gelembung{ background:var(--ruang-sorot-bg); transition:background .6s ease; }
.ruang-penulis{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:var(--fw-bold); min-width:0; }
/* WAJIB: tanpa baris ini, display:flex di atas mengalahkan [hidden] bawaan UA dan nama
   pengirim tetap terlihat di tengah grup. */
.ruang-penulis[hidden]{ display:none; }
.ruang-penulis-nama{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ruang-nama-0{ color:var(--ruang-nama-0); }
.ruang-nama-1{ color:var(--ruang-nama-1); }
.ruang-nama-2{ color:var(--ruang-nama-2); }
.ruang-nama-3{ color:var(--ruang-nama-3); }
.ruang-nama-4{ color:var(--ruang-nama-4); }
.ruang-nama-5{ color:var(--ruang-nama-5); }
.ruang-pin-tanda{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; min-height:20px; padding:0 6px;
  border-radius:var(--ui-r-pill); background:var(--ruang-aksen); color:var(--ruang-aksen-ink);
  font-size:var(--fs-caption); font-weight:var(--fw-bold); white-space:nowrap;
}
.ruang-gelembung:has(.ruang-pin-tanda){ border-inline-start:var(--ruang-pita) solid var(--ruang-aksen); }
.ruang-teks{ margin:0; font-size:var(--fs-body); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.ruang-teks-dihapus{ color:var(--ruang-meta-ink); font-style:italic; }
.ruang-sebut{
  color:var(--link); font-weight:var(--fw-bold); background:var(--ruang-sebut-bg);
  border-radius:5px; padding:0 3px;
}
.ruang-sebut.is-saya{ background:var(--ruang-sebut-saya-bg); color:var(--ink); }
.ruang-teks a.ruang-tautan{ color:var(--link); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.ruang-kutipan{
  margin:0; display:grid; gap:1px; padding:5px 8px;
  border-left:var(--ruang-pita) solid var(--ruang-aksen); border-radius:var(--ruang-r-gelembung);
  background:var(--ruang-kutipan-lain-bg); font-size:var(--fs-caption); cursor:pointer;
}
.ruang-pesan.is-mine .ruang-kutipan{ background:var(--ruang-kutipan-saya-bg); }
.ruang-kutipan b{ color:var(--ruang-aksen); font-size:var(--fs-caption); }
.ruang-kutipan span{ color:var(--ruang-meta-ink); overflow-wrap:anywhere; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ruang-foto-grid{ display:grid; gap:3px; }
.ruang-foto-grid[data-n="1"]{ grid-template-columns:minmax(0,240px); }
.ruang-foto-grid[data-n="2"], .ruang-foto-grid[data-n="3"], .ruang-foto-grid[data-n="4"]{ grid-template-columns:repeat(2,120px); }
.ruang-foto{
  position:relative; padding:0; border:1px solid var(--ruang-garis); border-radius:6px; overflow:hidden; background:var(--ruang-kanvas);
  cursor:zoom-in; display:block; width:100%;
}
.ruang-foto-grid[data-n="1"] .ruang-foto{ max-width:240px; max-height:320px; }
.ruang-foto-grid:not([data-n="1"]) .ruang-foto{ width:120px; height:120px; aspect-ratio:1/1 !important; }
.ruang-foto img{ display:block; width:100%; height:100%; object-fit:cover; }
.ruang-foto-lebih{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(9,14,22,.55); color:#fff;
  font-size:var(--fs-heading); font-weight:var(--fw-heavy);
}
.ruang-berkas{
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:9px; align-items:center; padding:4px 8px;
  border:1px solid var(--ruang-garis); border-radius:var(--ruang-r-gelembung); background:var(--ruang-kutipan-lain-bg); max-width:100%; cursor:pointer;
  text-align:left; color:var(--ink); min-height:var(--tap-min);
}
.ruang-pesan.is-mine .ruang-berkas{ background:var(--ruang-kutipan-saya-bg); }
.ruang-berkas-ikon{
  width:38px; height:38px; border-radius:7px; display:grid; place-items:center; font-size:9px;
  font-weight:var(--fw-heavy); color:#fff; background:var(--danger); letter-spacing:.04em; grid-row:span 2;
}
.ruang-berkas-nama{ display:block; font-size:var(--fs-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ruang-berkas small{ display:block; color:var(--ruang-meta-ink); font-size:var(--fs-caption); margin-top:1px; }
.ruang-pratinjau{
  display:grid; border:1px solid var(--ruang-garis); border-radius:var(--ruang-r-gelembung); overflow:hidden;
  background:var(--ruang-kutipan-lain-bg);
  text-decoration:none; color:inherit; max-width:100%; padding:6px 9px; gap:2px;
}
.ruang-pesan.is-mine .ruang-pratinjau{ background:var(--ruang-kutipan-saya-bg); }
.ruang-pratinjau.is-memuat{ opacity:.7; }
.ruang-pratinjau-judul{ font-size:var(--fs-label); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.ruang-pratinjau-deskripsi{ font-size:var(--fs-caption); color:var(--ruang-meta-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ruang-pratinjau-situs{ font-style:normal; color:var(--ruang-meta-ink); font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.04em; }
/* Jam + centang BERDAMPINGAN di sudut kanan bawah gelembung (detail paling ikonik acuan). */
.ruang-kaki{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px;
  min-height:16px; font-size:var(--fs-caption); color:var(--ruang-meta-ink);
}
.ruang-kaki time{ white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Meta (jam + centang) adalah bagian dari BARIS TERAKHIR teks, bukan blok tersendiri dan
   bukan elemen yang ditempel ke sudut. Karena ia sebaris dan disejajarkan pada garis dasar,
   posisinya konsisten pada SEMUA gelembung: pesan sendiri, balasan, pendek maupun panjang.
   Gelembung pun menyusut mengikuti isi seperti WhatsApp ("dimana?  17.37 ✓✓"). */
.ruang-kaki-sebaris{
  display:inline-flex; align-items:baseline; gap:6px;
  vertical-align:baseline; white-space:nowrap;
  padding-inline-start:10px; min-height:0;
}
.ruang-dibaca{ margin-left:0; white-space:nowrap; cursor:default; }
.ruang-status-kirim[hidden]{ display:none; }
.ruang-status-tombol{ border:0; background:transparent; color:var(--ruang-meta-ink); font-size:var(--fs-caption); cursor:pointer; padding:0; }
.ruang-pesan.is-gagal .ruang-status-tombol{ color:var(--danger); font-weight:var(--fw-bold); }
/* Reaksi MENGGANTUNG 11 px pada tepi bawah gelembung (reactionOverhang mobile). */
.ruang-reaksi{
  display:flex; flex-wrap:wrap; gap:6px; grid-column:2; justify-self:start;
  margin-top:calc(-1 * var(--ruang-reaksi-gantung)); position:relative; z-index:1;
}
.ruang-pesan.is-mine .ruang-reaksi{ grid-column:1; justify-self:end; }
.ruang-reaksi:empty{ display:none; }
.ruang-pesan:has(.ruang-reaksi button) .ruang-gelembung{ padding-bottom:var(--ruang-gelembung-pad-reaksi); }
.ruang-reaksi button{
  min-width:44px; min-height:32px; border:1px solid var(--ruang-garis); border-radius:var(--ui-r-pill); padding:2px 9px;
  font-size:var(--fs-caption); background:var(--ruang-slab); color:var(--ink); cursor:pointer;
}
.ruang-reaksi button.is-aktif{ border-color:var(--ruang-aksen); background:var(--ruang-aksen-bg); color:var(--ruang-aksen); }
.ruang-reaksi-pilihan{ display:inline-flex; gap:6px; }
/* Toolbar aksi TETAP pil melayang (empat tombol, urutan, label, dan pemicu tak berubah). */
.ruang-pesan-aksi{
  position:absolute; right:6px; top:-14px; display:none; gap:2px; background:var(--ruang-slab); border:1px solid var(--ruang-garis);
  border-radius:var(--ui-r-pill); padding:2px 4px; box-shadow:var(--shadow-soft); z-index:3;
}
.ruang-pesan.is-mine .ruang-pesan-aksi{ right:auto; left:6px; }
.ruang-pesan:hover .ruang-pesan-aksi, .ruang-pesan:focus-within .ruang-pesan-aksi{ display:inline-flex; }
.ruang-pesan-aksi button{
  border:0; background:transparent; border-radius:var(--ui-r-pill); padding:2px 8px; font-size:var(--fs-caption); cursor:pointer;
  color:var(--ink); min-height:24px;
}
.ruang-pesan-aksi button:hover{ background:var(--ruang-kanvas); }
.ruang-pesan-aksi button[hidden]{ display:none; }
.ruang-pil-baru{
  position:sticky; bottom:6px; align-self:center; justify-self:center; border:1px solid var(--ruang-aksen); background:var(--ruang-aksen);
  color:var(--ruang-aksen-ink); border-radius:var(--ui-r-pill); padding:6px 12px; font-size:var(--fs-caption); font-weight:var(--fw-bold);
  cursor:pointer; min-height:32px; box-shadow:var(--shadow-soft);
}
.ruang-offline{
  min-height:32px; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-caption); color:var(--status-pending); background:color-mix(in srgb,var(--status-pending-bg) 50%,var(--panel));
  border:0; border-top:1px solid var(--ruang-garis); border-radius:0; padding-inline:var(--ruang-jajar); text-align:center;
}
.ruang-hanya-baca{
  margin:0; min-height:var(--tap-min); display:flex; align-items:center; justify-content:center;
  color:var(--ruang-meta-ink); font-size:var(--fs-caption); text-align:center;
  padding-inline:var(--ruang-jajar); background:var(--ruang-kepala-bg); border-top:1px solid var(--ruang-garis);
}
.ruang-tertutup{ padding-block:14px; padding-inline:var(--ruang-jajar); border:0; border-radius:0; background:var(--ruang-slab); }
.ruang-tertutup p{ margin:0; color:var(--ruang-meta-ink); font-size:var(--fs-caption); line-height:1.45; }
/* --- KOMPOSER: susunan grid (tambah kiri, kolom lebar tengah, kirim kanan) DIPERTAHANKAN --- */
.ruang-komposer{
  display:grid; gap:6px; min-height:var(--ruang-komposer-h);
  padding-block:6px; padding-inline:var(--ruang-jajar);   /* 44 + 2x6 = 56 = --ruang-komposer-h */
  border:0; border-top:1px solid var(--ruang-garis); border-radius:0;
  background:var(--ruang-kepala-bg); position:relative;
}
.ruang-konteks{
  display:flex; align-items:center; gap:8px; min-height:var(--ruang-sematan-h); padding:5px 8px;
  border-left:var(--ruang-pita) solid var(--ruang-aksen); border-radius:var(--ruang-r-gelembung);
  background:var(--ruang-kutipan-lain-bg); font-size:var(--fs-caption); min-width:0;
}
.ruang-konteks[hidden]{ display:none; }
.ruang-konteks span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ruang-meta-ink); }
.ruang-konteks b{ color:var(--ruang-aksen); font-size:var(--fs-caption); }
.ruang-konteks button, .ruang-chip-lampiran > button{
  border:0; background:var(--ruang-kanvas); border-radius:50%; width:24px; height:24px; font-size:12px; line-height:1;
  cursor:pointer; display:grid; place-items:center; padding:0; color:var(--ink);
}
.ruang-lampiran-tertunda{ display:flex; flex-wrap:wrap; gap:6px; }
.ruang-lampiran-tertunda:empty{ display:none; }
.ruang-chip-lampiran{
  display:inline-flex; align-items:center; gap:6px; min-height:var(--ruang-sematan-h);
  border:1px solid var(--ruang-garis); border-radius:10px; padding:4px 6px 4px 4px;
  background:var(--ruang-slab); font-size:var(--fs-caption); max-width:260px; position:relative;
}
.ruang-chip-lampiran img{ width:28px; height:28px; object-fit:cover; border-radius:6px; }
.ruang-chip-lampiran .ruang-berkas-ikon{ width:24px; height:28px; font-size:8px; grid-row:auto; }
.ruang-chip-nama{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:grid; }
.ruang-chip-nama small{ color:var(--ruang-meta-ink); font-size:var(--fs-caption); }
.ruang-chip-lampiran.is-gagal{ border-color:var(--danger); }
.ruang-chip-lampiran.is-gagal small{ color:var(--danger); }
/* Bilah tak-tentu STATIS (tanpa animasi infinite): mode tenang app-latest.css menjeda animasi
   dekoratif saat idle, dan satu denyut infinite saja membangunkan compositor terus (test-beban-idle). */
.ruang-chip-progres{ display:block; height:3px; border-radius:2px; width:100%; margin-top:2px; overflow:hidden; background:color-mix(in srgb,var(--link) 20%,transparent); }
.ruang-chip-ulang{ border:0; background:transparent; color:var(--danger); font-size:var(--fs-caption); cursor:pointer; font-weight:var(--fw-bold); }
.ruang-komposer-baris{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px; align-items:end; }
.ruang-komposer textarea{
  width:100%; min-height:40px; max-height:160px; resize:none; border:1px solid var(--ruang-garis); border-radius:20px;
  background:var(--ruang-field-bg); padding:10px 14px; font-size:var(--fs-input-mobile); line-height:1.4; color:var(--ink); font-family:inherit;
}
.ruang-komposer [data-ruang-lampir]{ width:var(--tap-min); height:var(--tap-min); border-radius:50%; }
/* (0,3,1) supaya kulit lingkaran aksen mengalahkan .btn.primary dan [data-theme=dark] .btn.primary */
.ruang-komposer .ruang-komposer-baris button.ruang-kirim{
  min-height:var(--tap-min); min-width:var(--tap-min); width:var(--tap-min); height:var(--tap-min);
  padding:0; border:0; border-radius:50%; font-size:16px;
  background:var(--ruang-aksen); color:var(--ruang-aksen-ink); box-shadow:none;
}
.ruang-sebut-popover{
  position:absolute; bottom:calc(100% + 6px); left:var(--ruang-jajar); z-index:6; min-width:260px; max-width:320px; background:var(--ruang-slab);
  border:1px solid var(--ruang-garis); border-radius:12px; box-shadow:var(--shadow-soft); padding:4px; display:grid; gap:2px;
}
.ruang-sebut-popover[hidden]{ display:none; }
.ruang-sebut-popover [role=option]{
  border:0; background:transparent; display:grid; grid-template-columns:var(--ruang-avatar-kecil) minmax(0,1fr); gap:8px; align-items:center;
  text-align:left; padding:6px 8px; border-radius:8px; cursor:pointer; color:var(--ink); min-height:var(--tap-min);
}
.ruang-sebut-popover [role=option].is-aktif, .ruang-sebut-popover [role=option]:hover{ background:var(--ruang-aksen-bg); }
.ruang-sebut-popover [role=option] strong{ display:block; font-size:var(--fs-body); }
.ruang-sebut-popover [role=option] small{ display:block; color:var(--ruang-meta-ink); font-size:var(--fs-caption); }
/* Pembaca tautan di tempat (KEPUTUSAN E3): iframe ber-sandbox + tombol "Buka di tab baru" selalu ada. */
.ruang-pembaca{ position:fixed; inset:0; z-index:250; background:rgba(9,14,22,.55); display:none; align-items:center; justify-content:center; padding:16px; }
.ruang-pembaca.active{ display:flex; }
.ruang-pembaca[hidden]{ display:none; }
.ruang-pembaca-kotak{ width:min(1100px,100%); height:min(88vh,900px); display:grid; grid-template-rows:auto minmax(0,1fr); background:var(--panel-strong); border:1px solid var(--line); border-radius:var(--radius-inner); overflow:hidden; box-shadow:var(--shadow-soft); }
.ruang-pembaca-kepala{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); }
.ruang-pembaca-url{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-caption); color:var(--muted); }
.ruang-pembaca-frame{ width:100%; height:100%; border:0; background:#fff; }
/* Fokus terlihat untuk SETIAP kontrol yang sudah ada (nol kontrol baru); cincin --link 5,03-8,58. */
.ruang-pintu:focus-visible,
.ruang-tombol-ikon:focus-visible,
.ruang-anggota-strip button:focus-visible,
.ruang-menu-popover button:focus-visible,
.ruang-sematan button:focus-visible,
.ruang-cari input:focus-visible,
.ruang-cari-item:focus-visible,
.ruang-muat-lama:focus-visible,
.ruang-muat-baru:focus-visible,
.ruang-pil-baru:focus-visible,
.ruang-pesan-aksi button:focus-visible,
.ruang-reaksi button:focus-visible,
.ruang-dibaca:focus-visible,
.ruang-foto:focus-visible,
.ruang-berkas:focus-visible,
.ruang-kutipan:focus-visible,
.ruang-pratinjau:focus-visible,
.ruang-chip-anggota button:focus-visible,
.ruang-komposer textarea:focus-visible,
.ruang-kirim:focus-visible,
.ruang-komposer [data-ruang-lampir]:focus-visible,
.ruang-sebut-popover [role=option]:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .ruang-pintu-chevron, .ruang-pesan.is-sorot .ruang-gelembung, .ruang-chip-progres{ transition:none; animation:none; }
}
@media (forced-colors:active){
  .ruang-gelembung, .ruang-sematan, .ruang-pil-baru, .ruang-menu-popover,
  .ruang-sebut-popover{ border:1px solid CanvasText; }
  .ruang-pesan-aksi{ background:Canvas; border:1px solid CanvasText; }
}

/* ADR-0007 — pelengkap permukaan yang disetujui: lencana kartu, avatar, anggota, dibaca. */
.ruang-lencana-kartu{
  display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:44px; min-height:32px;
  margin:2px 0; padding:4px 10px; border:1px solid var(--info-border); border-radius:var(--ui-r-pill);
  background:var(--info-bg); color:var(--link); font:inherit; font-size:var(--fs-caption); cursor:pointer;
}
.ruang-lencana-kartu[hidden]{ display:none; }
.ruang-avatar img{ display:block; width:100%; height:100%; object-fit:cover; }
.ruang-anggota-ganti{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:end; }
.ruang-anggota-ganti label{ display:grid; gap:4px; min-width:0; font-size:var(--fs-caption); }
.ruang-anggota-ganti select, .ruang-anggota-tambah input{
  min-height:44px; min-width:0; width:100%; background:var(--ruang-field-bg); color:var(--ink); border:1px solid var(--ruang-garis); border-radius:8px; padding:6px;
}
.ruang-anggota-tambah input{ grid-column:1/-1; }
/* Koreksi pemilik 7 Sep: sasaran sentuh dipertahankan (44 lebar) tetapi tingginya
   mengikuti preseden tombol reaksi 44x32 supaya chip anggota tidak setinggi kartu. */
.ruang-chip-anggota button{ width:auto; min-width:44px; height:32px; }
.ruang-chip-lampiran [data-ruang-kualitas-penuh]{ min-width:44px; min-height:44px; font-size:var(--fs-caption); color:var(--link); }
button.ruang-dibaca{ border:0; background:transparent; color:var(--ruang-meta-ink); font:inherit; font-size:var(--fs-caption); border-radius:var(--ui-r-pill); min-width:44px; min-height:32px; cursor:pointer; }
.ruang-dibaca-lembar{ display:grid; gap:6px; padding:12px; border:1px solid var(--ruang-garis); border-radius:12px; background:var(--ruang-slab); }
.ruang-dibaca-lembar header, .ruang-dibaca-lembar p{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; }
.ruang-dibaca-lembar time{ color:var(--ruang-meta-ink); font-size:var(--fs-caption); }
.ruang-dibaca-lembar button{ min-width:44px; min-height:44px; background:transparent; color:var(--ink); border:0; cursor:pointer; }
.ruang-dibaca-lembar:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }

/* Progres byte asli; tak tentu tetap statis dan tidak diberi persentase. */
.ruang-chip-progres > span{ display:block; height:100%; width:0; background:var(--link); }
.ruang-chip-progres:not([aria-valuenow]){ background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 8px); }
.ruang-konfirmasi{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(9,14,22,.55); }
.ruang-konfirmasi-kotak{ width:min(420px,100%); padding:20px; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--panel-strong); color:var(--ink); box-shadow:var(--shadow-soft); }
.ruang-konfirmasi-kotak h3{ margin:0 0 12px; font-size:var(--fs-body); }
.ruang-konfirmasi-kotak p{ margin:0 0 20px; line-height:1.5; overflow-wrap:anywhere; }
.ruang-konfirmasi-aksi{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.ruang-konfirmasi-aksi button{ min-width:88px; min-height:44px; }
.ruang-konfirmasi-aksi button:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
/* ---- RUANG PERCAKAPAN F5 (5 Sep 2026): @semua (D2), Minta ditambahkan (P2), permintaan bergabung,
   gambar pratinjau tautan (§7.4), lampiran kedaluwarsa (E4), baris sistem status-agenda ---- */
.ruang-sebut.is-semua{ letter-spacing:.01em; }
.ruang-sebut-popover [role="option"].is-semua strong{ color:var(--link); }
.ruang-avatar.is-semua{ background:var(--link); color:var(--link-contrast); font-size:12px; }
.ruang-tertutup .ruang-minta{ display:grid; gap:8px; margin-top:6px; }
.ruang-tertutup .ruang-minta > button{ justify-self:start; min-height:var(--tap-min); }
.ruang-minta-isi{ display:grid; gap:8px; }
.ruang-minta-isi[hidden]{ display:none; }
.ruang-minta-isi textarea{
  width:100%; min-height:56px; resize:vertical; padding:8px 10px; border:1px solid var(--ruang-garis);
  border-radius:var(--radius-control); background:var(--ruang-field-bg); color:var(--ink); font:inherit;
}
.ruang-minta-isi textarea:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
.ruang-minta-aksi{ display:flex; justify-content:flex-end; }
.ruang-minta-aksi button{ min-height:var(--tap-min); }
.ruang-minta-sudah{ margin:6px 0 0; padding:8px 10px; border-radius:var(--radius-control); background:var(--ruang-kanvas); color:var(--ruang-meta-ink); font-size:var(--fs-label); }
.ruang-minta-sudah:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
.ruang-permintaan{ display:grid; gap:6px; padding:8px 10px; border:1px solid var(--ruang-garis); border-radius:12px; background:var(--ruang-aksen-bg); }
.ruang-permintaan-judul{ font-size:var(--fs-label); color:var(--ruang-meta-ink); }
.ruang-permintaan-baris{ display:flex; align-items:center; gap:8px; min-height:var(--tap-min); }
.ruang-permintaan-isi{ display:grid; flex:1; min-width:0; gap:1px; }
.ruang-permintaan-isi strong{ font-size:var(--fs-label); }
.ruang-permintaan-catatan{ font-size:var(--fs-caption); color:var(--ink); overflow-wrap:anywhere; }
.ruang-permintaan-isi small{ font-size:var(--fs-caption); color:var(--ruang-meta-ink); }
.ruang-permintaan-baris button{ min-height:36px; }
.ruang-pratinjau.has-gambar{ display:grid; grid-template-columns:96px minmax(0,1fr); }
.ruang-pratinjau-gambar{
  width:96px; height:100%; min-height:72px; object-fit:cover; display:block;
  border-right:1px solid var(--ruang-garis); background:var(--ruang-kanvas);
}
.ruang-lampiran-kedaluwarsa{
  display:flex; align-items:center; gap:10px; margin:4px 0; padding:4px 10px; min-height:var(--tap-min);
  border:1px solid var(--ruang-garis); border-radius:var(--ruang-r-gelembung); background:var(--ruang-kutipan-lain-bg); color:var(--ruang-meta-ink);
}
.ruang-pesan.is-mine .ruang-lampiran-kedaluwarsa{ background:var(--ruang-kutipan-saya-bg); }
.ruang-lampiran-kedaluwarsa .ruang-berkas-ikon{ opacity:.55; }
.ruang-lampiran-kedaluwarsa .ruang-berkas-nama{ display:grid; gap:2px; min-width:0; }
.ruang-lampiran-kedaluwarsa b{ font-size:var(--fs-label); color:var(--ink); }
.ruang-lampiran-kedaluwarsa small{ font-size:var(--fs-caption); overflow-wrap:anywhere; }
.ruang-sistem.is-status-agenda{ font-weight:var(--fw-bold); color:var(--ink); }
.ruang-sistem-ikon{ margin-right:4px; }