/* ELARA 0.9.75 — internal chat visual redesign.
   UI/UX only: no API, permission, data model or message-flow changes. */

:root{
  --chat-accent:var(--accent,#e6a848);
  --chat-canvas:color-mix(in srgb,var(--surface2) 72%,var(--bg));
  --chat-row-hover:color-mix(in srgb,var(--chat-accent) 8%,var(--surface2));
  --chat-row-unread:color-mix(in srgb,var(--chat-accent) 11%,var(--surface));
  --chat-mine:color-mix(in srgb,var(--chat-accent) 19%,var(--surface));
  --chat-received:var(--surface2);
  --chat-soft-shadow:0 10px 30px rgba(0,0,0,.10);
  --chat-modal-shadow:0 30px 90px rgba(0,0,0,.32);
}
html[data-theme="light"]{
  --chat-canvas:#edf3f7;
  --chat-row-hover:#f4f8fb;
  --chat-row-unread:#fff8e9;
  --chat-mine:#fff0cb;
  --chat-received:#fff;
  --chat-soft-shadow:0 10px 28px rgba(23,59,98,.08);
  --chat-modal-shadow:0 28px 85px rgba(23,59,98,.18);
}
html[data-theme="dark"]{
  --chat-canvas:#071521;
  --chat-row-hover:#10263b;
  --chat-row-unread:#182b3d;
  --chat-mine:#2b2b25;
  --chat-received:#102439;
}

/* Conversation inbox */
.conversation-list{
  gap:9px!important;
  max-height:none!important;
  padding:2px!important;
  overflow:visible!important;
}
.conversation-row{
  position:relative;
  width:100%;
  min-height:86px;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 13px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  text-align:right;
  box-shadow:var(--chat-soft-shadow);
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease;
  overflow:hidden;
}
.conversation-row:hover,
.conversation-row:focus-visible{
  border-color:color-mix(in srgb,var(--chat-accent) 65%,var(--line))!important;
  background:var(--chat-row-hover)!important;
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  outline:none;
}
.conversation-row.unread{
  background:var(--chat-row-unread)!important;
  border-color:color-mix(in srgb,var(--chat-accent) 50%,var(--line))!important;
}
.conversation-row.unread:before{
  content:"";
  position:absolute;
  inset-block:11px;
  inset-inline-start:0;
  width:3px;
  border-radius:4px;
  background:var(--chat-accent);
}
.conversation-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:var(--chat-accent);
  background:color-mix(in srgb,var(--chat-accent) 10%,var(--surface2));
  border:1px solid color-mix(in srgb,var(--chat-accent) 25%,var(--line));
  font-size:18px;
  flex:none;
}
.conversation-row>div{
  min-width:0;
  display:grid!important;
  gap:4px!important;
}
.conversation-row>div>b{
  min-width:0;
  font-size:14px;
  font-weight:900;
  line-height:1.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conversation-row>div>small{
  color:var(--muted)!important;
  font-size:11px;
  line-height:1.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conversation-row>div>p{
  margin:1px 0 0!important;
  color:color-mix(in srgb,var(--text) 78%,var(--muted));
  font-size:12px;
  line-height:1.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conversation-row>aside{
  min-width:72px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  gap:7px;
  padding-block:3px;
}
.conversation-row>aside time{
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}
.conversation-row>aside em{
  min-width:39px;
  min-height:24px;
  display:inline-grid;
  place-items:center;
  padding:3px 8px;
  border-radius:999px;
  color:#172638;
  background:var(--chat-accent);
  font-size:10px;
  font-weight:900;
  font-style:normal;
}

/* Multi-recipient picker: department -> people */
.multi-recipient{
  position:relative;
  isolation:isolate;
}
.multi-recipient-control{
  min-height:56px!important;
  padding:8px 12px!important;
  border-radius:15px!important;
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  box-shadow:inset 0 0 0 1px transparent;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.multi-recipient-control:hover,
.multi-recipient-control:focus-visible{
  border-color:color-mix(in srgb,var(--chat-accent) 58%,var(--line))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--chat-accent) 10%,transparent);
  outline:none;
}
.multi-recipient.disabled .multi-recipient-control{
  cursor:not-allowed;
  background:var(--surface2)!important;
}
.multi-recipient-summary{
  gap:6px!important;
  min-height:36px;
}
.multi-recipient-summary>span{
  max-width:240px!important;
  min-height:32px;
  padding:5px 9px!important;
  border:1px solid color-mix(in srgb,var(--chat-accent) 30%,var(--line));
  border-radius:999px!important;
  background:color-mix(in srgb,var(--chat-accent) 11%,var(--surface2))!important;
  color:var(--text);
  font-size:11px!important;
  font-weight:800;
}
.multi-recipient-summary>span i{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  margin-inline-start:1px;
  border-radius:50%;
  color:var(--muted);
  background:color-mix(in srgb,var(--text) 6%,transparent);
  line-height:1;
}
.multi-recipient-summary>span i:hover{
  color:var(--danger);
  background:color-mix(in srgb,var(--danger) 10%,transparent);
}
.multi-recipient-summary>em{
  padding:4px 8px;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--line);
  font-size:10px;
  font-weight:900;
}
.multi-recipient-summary small{
  padding-inline:3px;
  font-size:12px;
}
.multi-recipient-control>b{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--muted);
  background:var(--surface2);
  transition:transform .18s ease,color .18s ease;
}
.multi-recipient-menu{
  z-index:200!important;
  top:calc(100% + 8px)!important;
  border-radius:18px!important;
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
  overflow:hidden!important;
}
.recipient-dropdown-search{
  position:sticky;
  top:0;
  z-index:3;
  grid-template-columns:30px minmax(0,1fr)!important;
  min-height:55px;
  padding:7px 10px!important;
  border-bottom:1px solid var(--line)!important;
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.recipient-dropdown-search>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--muted);
  background:var(--surface2);
  font-size:17px;
}
.recipient-dropdown-search input{
  min-height:40px!important;
  padding:8px!important;
  color:var(--text)!important;
  font-size:12px!important;
}
.recipient-dropdown-list{
  display:grid!important;
  gap:4px!important;
  max-height:min(360px,42vh)!important;
  padding:7px!important;
  background:var(--surface)!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent;
}
.recipient-dropdown-list button{
  min-height:58px;
  grid-template-columns:32px minmax(0,1fr)!important;
  gap:10px!important;
  padding:8px 10px!important;
  border-radius:13px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
}
.recipient-dropdown-list button:hover,
.recipient-dropdown-list button:focus-visible{
  background:var(--chat-row-hover)!important;
  border-color:var(--line)!important;
  transform:translateX(-1px);
  outline:none;
}
.recipient-dropdown-list button.selected{
  background:color-mix(in srgb,var(--chat-accent) 10%,var(--surface2))!important;
  border-color:color-mix(in srgb,var(--chat-accent) 55%,var(--line))!important;
}
.recipient-check{
  width:28px!important;
  height:28px!important;
  border-radius:9px!important;
  background:var(--surface2);
  font-weight:900;
  transition:transform .15s ease,background-color .15s ease;
}
.recipient-dropdown-list button.selected .recipient-check{
  transform:scale(1.04);
  box-shadow:0 5px 14px color-mix(in srgb,var(--chat-accent) 25%,transparent);
}
.recipient-dropdown-list button>span:last-child>b{
  display:block;
  min-width:0;
  color:var(--text);
  font-size:12px;
  font-weight:900;
  line-height:1.6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.recipient-dropdown-list small{
  gap:5px!important;
  color:var(--muted)!important;
  font-size:10px;
  line-height:1.55;
}
.recipient-empty,
.recipient-dropdown-empty{
  margin:6px;
  padding:24px 12px!important;
  border:1px dashed var(--line);
  border-radius:13px;
  background:var(--surface2);
  color:var(--muted)!important;
  text-align:center;
  line-height:1.9;
}
.multi-recipient-menu>footer{
  position:sticky;
  bottom:0;
  z-index:3;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--muted);
  font-size:10px;
}
.multi-recipient-menu>footer button{
  border:0;
  border-radius:9px;
  padding:6px 9px;
  color:var(--danger);
  background:color-mix(in srgb,var(--danger) 8%,transparent);
  font-weight:800;
}

/* Conversation window */
.chat-modal{
  width:min(1040px,calc(100vw - 30px))!important;
  height:min(88dvh,880px)!important;
  max-height:min(88dvh,880px)!important;
  padding:0!important;
  border-radius:24px!important;
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  box-shadow:var(--chat-modal-shadow)!important;
  overflow:hidden!important;
}
.chat-modal>.modal-close{
  z-index:10;
  top:14px!important;
  left:14px!important;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line)!important;
  border-radius:12px;
  background:color-mix(in srgb,var(--surface2) 88%,transparent)!important;
  color:var(--text)!important;
  font-size:23px!important;
  line-height:1;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.chat-header{
  position:relative;
  flex:none;
  min-height:78px;
  display:flex;
  align-items:center;
  margin:0!important;
  padding:15px 64px 14px 18px!important;
  border-bottom:1px solid var(--line)!important;
  background:color-mix(in srgb,var(--surface) 94%,var(--surface2))!important;
}
.chat-header:before{
  content:"";
  width:42px;
  height:42px;
  flex:none;
  margin-inline-end:11px;
  border-radius:14px;
  background:linear-gradient(145deg,var(--chat-accent),color-mix(in srgb,var(--chat-accent) 62%,#fff));
  box-shadow:0 8px 20px color-mix(in srgb,var(--chat-accent) 22%,transparent);
}
.chat-header:after{
  content:"✉";
  position:absolute;
  inset-inline-start:29px;
  top:28px;
  color:#172638;
  font-size:17px;
  transform:translateX(0);
  pointer-events:none;
}
.chat-header>div{
  min-width:0;
}
.chat-header h2{
  max-width:calc(100vw - 180px);
  margin:0 0 3px!important;
  color:var(--text)!important;
  font-size:16px;
  font-weight:950;
  line-height:1.6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-header p{
  max-width:calc(100vw - 180px);
  margin:0!important;
  color:var(--muted)!important;
  font-size:10px;
  line-height:1.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-messages{
  position:relative;
  flex:1;
  min-height:0;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding:18px 20px 24px!important;
  background-color:var(--chat-canvas)!important;
  background-image:
    radial-gradient(circle at 14px 14px,color-mix(in srgb,var(--muted) 6%,transparent) 1px,transparent 1.3px),
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 10%,transparent),transparent)!important;
  background-size:28px 28px,100% 100%!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent;
}
.chat-message{
  position:relative;
  width:fit-content!important;
  max-width:min(76%,680px)!important;
  display:grid!important;
  gap:4px!important;
  padding:9px 12px 8px!important;
  border:1px solid color-mix(in srgb,var(--line) 86%,transparent)!important;
  color:var(--text)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.09)!important;
}
.chat-message.received{
  background:var(--chat-received)!important;
  border-radius:17px 17px 17px 5px!important;
}
.chat-message.mine{
  background:var(--chat-mine)!important;
  border-color:color-mix(in srgb,var(--chat-accent) 32%,var(--line))!important;
  border-radius:17px 17px 5px 17px!important;
}
.chat-message header{
  min-height:17px;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  color:var(--muted)!important;
  font-size:9px!important;
  line-height:1.4;
}
.chat-message header b{
  color:color-mix(in srgb,var(--text) 86%,var(--muted))!important;
  font-size:10px;
  font-weight:900;
}
.chat-message header time{
  direction:ltr;
  unicode-bidi:plaintext;
  white-space:nowrap;
}
.chat-message p{
  margin:1px 0 0!important;
  color:var(--text)!important;
  font-size:13px;
  line-height:1.85!important;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.chat-files{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin-top:3px;
}
.chat-files a{
  min-height:31px;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:5px 9px!important;
  border:1px solid color-mix(in srgb,var(--chat-accent) 28%,var(--line))!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--surface) 66%,transparent)!important;
  color:var(--text)!important;
  font-size:10px!important;
  font-weight:700;
}
.chat-files a:hover{
  border-color:var(--chat-accent)!important;
}

/* WhatsApp-like composer, while preserving the existing form and submit logic. */
.chat-reply{
  flex:none;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:8px!important;
  margin:0!important;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
  border-top:1px solid var(--line)!important;
  background:var(--surface)!important;
}
.chat-reply textarea{
  grid-column:1/2;
  min-height:50px!important;
  max-height:132px!important;
  resize:none!important;
  padding:13px 15px!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:var(--surface2)!important;
  color:var(--text)!important;
  line-height:1.7;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.chat-reply textarea:focus{
  border-color:color-mix(in srgb,var(--chat-accent) 58%,var(--line))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--chat-accent) 9%,transparent);
}
.chat-reply-actions{
  grid-column:2/3;
  display:flex!important;
  flex-direction:column;
  align-items:stretch!important;
  justify-content:flex-end;
  gap:6px!important;
}
.chat-reply-actions label{
  min-width:72px;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 9px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:var(--surface2)!important;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.chat-reply-actions label:hover{
  color:var(--text);
  border-color:color-mix(in srgb,var(--chat-accent) 45%,var(--line))!important;
}
.chat-reply-actions .button.primary{
  min-width:72px;
  min-height:38px;
  padding:7px 12px!important;
  border-radius:13px!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--chat-accent) 20%,transparent);
}
.chat-reply-actions small{
  max-width:90px;
  color:var(--muted)!important;
  font-size:9px;
  text-align:center;
  line-height:1.5;
}

/* New-conversation modal details that are safe to scope through chat-only controls. */
.multi-recipient + .field-help{
  display:block;
  margin-top:5px;
  padding-inline:4px;
  color:var(--muted)!important;
  font-size:10px!important;
  line-height:1.8;
}

/* Light/Dark parity for all chat surfaces, overriding legacy broad card rules. */
html[data-theme="light"] .conversation-row,
html[data-theme="light"] .multi-recipient-control,
html[data-theme="light"] .multi-recipient-menu,
html[data-theme="light"] .recipient-dropdown-list,
html[data-theme="light"] .chat-modal,
html[data-theme="light"] .chat-reply{
  color-scheme:light;
}
html[data-theme="dark"] .conversation-row,
html[data-theme="dark"] .multi-recipient-control,
html[data-theme="dark"] .multi-recipient-menu,
html[data-theme="dark"] .recipient-dropdown-list,
html[data-theme="dark"] .chat-modal,
html[data-theme="dark"] .chat-reply{
  color-scheme:dark;
}

/* Mobile chat: full-width, thumb-friendly and safe-area aware. */
@media(max-width:760px){
  .conversation-list{gap:7px!important}
  .conversation-row{
    min-height:78px;
    grid-template-columns:40px minmax(0,1fr) 56px!important;
    gap:9px!important;
    padding:10px!important;
    border-radius:16px!important;
    box-shadow:none;
  }
  .conversation-icon{width:38px;height:38px;border-radius:12px;font-size:16px}
  .conversation-row>div>b{font-size:13px}
  .conversation-row>div>small{font-size:9px}
  .conversation-row>div>p{font-size:11px}
  .conversation-row>aside{min-width:52px}
  .conversation-row>aside time{font-size:8px}
  .conversation-row>aside em{min-width:34px;min-height:21px;padding:2px 6px;font-size:9px}

  .multi-recipient-menu{
    position:fixed!important;
    z-index:10020!important;
    top:auto!important;
    left:9px!important;
    right:9px!important;
    bottom:calc(9px + env(safe-area-inset-bottom,0px))!important;
    max-height:min(72dvh,620px);
    border-radius:22px!important;
  }
  .recipient-dropdown-list{max-height:min(52dvh,460px)!important}
  .recipient-dropdown-list button{min-height:60px}
  .multi-recipient-menu>footer{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}

  .chat-modal{
    width:100vw!important;
    max-width:none!important;
    height:calc(100dvh - env(safe-area-inset-top,0px))!important;
    max-height:calc(100dvh - env(safe-area-inset-top,0px))!important;
    margin-top:env(safe-area-inset-top,0px)!important;
    border:0!important;
    border-radius:22px 22px 0 0!important;
  }
  .chat-modal>.modal-close{
    top:12px!important;
    left:12px!important;
    width:36px;
    height:36px;
  }
  .chat-header{
    min-height:70px;
    padding:12px 56px 11px 12px!important;
  }
  .chat-header:before{width:38px;height:38px;border-radius:13px;margin-inline-end:9px}
  .chat-header:after{inset-inline-start:25px;top:25px;font-size:15px}
  .chat-header h2{max-width:calc(100vw - 145px);font-size:14px}
  .chat-header p{max-width:calc(100vw - 145px);font-size:9px}
  .chat-messages{
    gap:7px!important;
    padding:12px 9px 18px!important;
  }
  .chat-message{
    max-width:88%!important;
    padding:8px 10px 7px!important;
    border-radius:15px!important;
  }
  .chat-message.received{border-radius:15px 15px 15px 4px!important}
  .chat-message.mine{border-radius:15px 15px 4px 15px!important}
  .chat-message p{font-size:12px;line-height:1.8!important}
  .chat-message header{font-size:8px!important;gap:12px!important}
  .chat-message header b{font-size:9px}

  .chat-reply{
    grid-template-columns:minmax(0,1fr) 70px!important;
    gap:7px!important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))!important;
  }
  .chat-reply textarea{
    min-height:48px!important;
    max-height:108px!important;
    padding:12px 13px!important;
    border-radius:18px!important;
    font-size:12px;
  }
  .chat-reply-actions{gap:5px!important}
  .chat-reply-actions label,
  .chat-reply-actions .button.primary{min-width:68px!important;width:68px!important}
  .chat-reply-actions label{min-height:31px!important;padding:5px!important;font-size:9px}
  .chat-reply-actions .button.primary{min-height:36px!important;padding:6px!important}
  .chat-reply-actions small{display:none}
}

@media(max-width:390px){
  .conversation-row{grid-template-columns:36px minmax(0,1fr) 48px!important}
  .conversation-icon{width:34px;height:34px}
  .conversation-row>aside{min-width:45px}
  .multi-recipient-summary>span{max-width:180px!important}
  .chat-message{max-width:92%!important}
}

@media(prefers-reduced-motion:reduce){
  .conversation-row,
  .multi-recipient-control,
  .recipient-dropdown-list button,
  .recipient-check{transition:none!important}
  .chat-messages{scroll-behavior:auto}
}

/* Progressive scoping for modern browsers: polish chat-only containers without touching other modules. */
@supports selector(:has(*)){
  section.panel:has(>.conversation-list){
    padding:10px!important;
    border-radius:20px!important;
    background:color-mix(in srgb,var(--surface) 96%,var(--surface2))!important;
  }

  form.modal.xlarge.scrollable:has(.multi-recipient){
    width:min(860px,calc(100vw - 28px))!important;
    max-height:min(92dvh,900px)!important;
    padding:24px!important;
    border-radius:24px!important;
    background:var(--surface)!important;
    box-shadow:var(--chat-modal-shadow)!important;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient)>h2{
    margin:0 0 20px!important;
    padding-inline-end:4px;
    padding-inline-start:48px;
    font-size:19px;
    line-height:1.7;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient) .form-grid{
    gap:15px!important;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient) .field>span{
    color:var(--text)!important;
    font-size:11px!important;
    font-weight:900;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient) .field>select,
  form.modal.xlarge.scrollable:has(.multi-recipient) .field>input,
  form.modal.xlarge.scrollable:has(.multi-recipient) .field>textarea{
    min-height:50px;
    border-radius:14px!important;
    border-color:var(--line)!important;
    background:var(--surface2)!important;
    color:var(--text)!important;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient) .field>textarea{
    min-height:118px;
    line-height:1.9;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient) .upload-box.professional{
    min-height:92px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:4px;
    border:1px dashed color-mix(in srgb,var(--chat-accent) 42%,var(--line))!important;
    border-radius:16px!important;
    background:color-mix(in srgb,var(--chat-accent) 4%,var(--surface2))!important;
    text-align:center;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient) .upload-box.professional:hover{
    border-color:var(--chat-accent)!important;
    background:color-mix(in srgb,var(--chat-accent) 8%,var(--surface2))!important;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient) .upload-box.professional>b{
    color:var(--text)!important;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient) .upload-box.professional>span{
    color:var(--muted)!important;
    font-size:10px;
  }
  form.modal.xlarge.scrollable:has(.multi-recipient)>.button.primary.wide{
    position:sticky;
    bottom:-1px;
    z-index:4;
    min-height:48px;
    margin-top:18px;
    border-radius:15px!important;
    box-shadow:0 10px 28px color-mix(in srgb,var(--chat-accent) 22%,transparent);
  }
}

@media(max-width:760px){
  @supports selector(:has(*)){
    section.panel:has(>.conversation-list){padding:7px!important;border-radius:17px!important}
    form.modal.xlarge.scrollable:has(.multi-recipient){
      width:100vw!important;
      max-width:none!important;
      max-height:calc(100dvh - env(safe-area-inset-top,0px))!important;
      height:calc(100dvh - env(safe-area-inset-top,0px))!important;
      margin-top:env(safe-area-inset-top,0px)!important;
      padding:18px 12px calc(14px + env(safe-area-inset-bottom,0px))!important;
      border:0!important;
      border-radius:22px 22px 0 0!important;
    }
    form.modal.xlarge.scrollable:has(.multi-recipient)>h2{font-size:17px;margin-bottom:15px!important}
    form.modal.xlarge.scrollable:has(.multi-recipient) .form-grid{grid-template-columns:1fr!important;gap:12px!important}
    form.modal.xlarge.scrollable:has(.multi-recipient)>.button.primary.wide{bottom:calc(-1px + env(safe-area-inset-bottom,0px))}
  }
}

/* Win against the global X10/X12 theme normalizer only inside chat. */
html[data-theme="light"] .admin-shell .conversation-row,
html[data-theme="dark"] .admin-shell .conversation-row{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme="light"] .admin-shell .conversation-row.unread,
html[data-theme="dark"] .admin-shell .conversation-row.unread{
  background:var(--chat-row-unread)!important;
  border-color:color-mix(in srgb,var(--chat-accent) 50%,var(--line))!important;
}
html[data-theme="light"] .admin-shell .conversation-row:hover,
html[data-theme="dark"] .admin-shell .conversation-row:hover,
html[data-theme="light"] .admin-shell .conversation-row:focus-visible,
html[data-theme="dark"] .admin-shell .conversation-row:focus-visible{
  background:var(--chat-row-hover)!important;
  border-color:color-mix(in srgb,var(--chat-accent) 65%,var(--line))!important;
}
html[data-theme="light"] .admin-shell .chat-modal,
html[data-theme="dark"] .admin-shell .chat-modal{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme="light"] .admin-shell .chat-message.received,
html[data-theme="dark"] .admin-shell .chat-message.received{background:var(--chat-received)!important}
html[data-theme="light"] .admin-shell .chat-message.mine,
html[data-theme="dark"] .admin-shell .chat-message.mine{background:var(--chat-mine)!important}


/* ELARA 0.9.76 — mobile-first inbox + chat department member management */
.chat-page{
  width:100%;
  min-width:0;
  max-width:100%;
  display:block;
  overflow-x:hidden;
}
.chat-page>.page-title{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0 0 12px!important;
  padding:2px 0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.chat-page>.page-title>div{min-width:0;flex:1}
.chat-page>.page-title h1{margin:0 0 5px!important;font-size:24px!important;line-height:1.35!important}
.chat-page>.page-title p{margin:0!important;max-width:780px;color:var(--muted)!important;font-size:12px!important;line-height:1.8!important;white-space:normal!important}
.chat-page>.page-title>.button,
.chat-page>.page-title>button{
  flex:none!important;
  width:auto!important;
  min-width:112px!important;
  min-height:44px!important;
  padding:9px 15px!important;
  border-radius:14px!important;
  white-space:nowrap!important;
  font-size:12px!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 20%,transparent);
}
.chat-page>.page-title>.button:before,
.chat-page>.page-title>button:before{content:"＋";font-size:17px;line-height:1;margin-inline-end:3px}

.chat-page>.list-filter-tabs{
  display:flex!important;
  width:100%!important;
  gap:7px!important;
  margin:0 0 10px!important;
  padding:2px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  background:transparent!important;
  border:0!important;
}
.chat-page>.list-filter-tabs::-webkit-scrollbar{display:none}
.chat-page>.list-filter-tabs button{
  flex:0 0 auto!important;
  min-width:116px!important;
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:8px 12px!important;
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:var(--surface)!important;
  color:var(--muted)!important;
  scroll-snap-align:start;
  box-shadow:none!important;
}
.chat-page>.list-filter-tabs button.active{
  border-color:var(--accent)!important;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important;
  color:var(--text)!important;
}
.chat-page>.list-filter-tabs button b{
  min-width:22px!important;height:22px!important;display:inline-grid!important;place-items:center!important;
  padding:0 5px!important;border-radius:999px!important;background:var(--surface2)!important;color:var(--muted)!important;font-size:10px!important;
}
.chat-page>.list-filter-tabs button.active b{background:var(--accent)!important;color:#152337!important}

.chat-page>section.panel:has(.list-toolbar){
  padding:9px!important;
  margin:0 0 10px!important;
  border-radius:16px!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
.chat-page .list-toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 118px!important;
  gap:8px!important;
  align-items:center!important;
  margin:0!important;
}
.chat-page .ajax-search.compact{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
  padding:0 10px!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:var(--surface2)!important;
}
.chat-page .ajax-search.compact span{display:grid;place-items:center;color:var(--accent);font-size:18px}
.chat-page .ajax-search.compact input{
  min-width:0!important;width:100%!important;height:46px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--text)!important;outline:0!important;
}
.chat-page .ajax-search.compact i{display:none!important}
.chat-page .page-size{
  min-width:0!important;display:grid!important;grid-template-columns:1fr!important;gap:3px!important;
  color:var(--muted)!important;font-size:9px!important;
}
.chat-page .page-size select{
  width:100%!important;min-height:46px!important;padding:7px 10px!important;border:1px solid var(--line)!important;border-radius:13px!important;background:var(--surface2)!important;color:var(--text)!important;
}
.chat-page>section.panel:has(>.conversation-list){
  padding:7px!important;
  margin:0!important;
  min-height:120px!important;
  border-radius:18px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.chat-page .pagination-summary,
.chat-page .pagination-bar{margin:9px 2px 0!important}
.chat-page .empty-state.chat-empty-state,
.chat-page .conversation-list>.empty-state{
  min-height:180px!important;
  display:grid!important;
  place-content:center!important;
  gap:6px!important;
  padding:24px!important;
  border:1px dashed var(--line)!important;
  border-radius:18px!important;
  background:var(--surface)!important;
  text-align:center!important;
  color:var(--muted)!important;
}
.chat-page .conversation-list>.empty-state b{font-size:14px;color:var(--text)!important}

/* Current members inside Settings > Chat departments */
.selected-department-members{
  display:grid;
  gap:9px;
  margin:12px 0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface2);
}
.selected-department-members-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.selected-department-members-head b{color:var(--text);font-size:12px}
.selected-department-members-head small{max-width:480px;color:var(--muted);font-size:9.5px;line-height:1.7}
.selected-department-member-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.selected-department-member{
  min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
}
.selected-department-member>span{min-width:0;display:grid;gap:2px}
.selected-department-member b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:11px}
.selected-department-member small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9px}
.selected-department-member .danger-text{color:var(--danger)!important;border-color:color-mix(in srgb,var(--danger) 35%,var(--line))!important}

@media(max-width:760px){
  .chat-page{padding-inline:0!important}
  .chat-page>.page-title{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:9px!important;
    margin-bottom:9px!important;
  }
  .chat-page>.page-title h1{font-size:19px!important;margin-bottom:2px!important}
  .chat-page>.page-title p{
    max-width:100%!important;font-size:9.5px!important;line-height:1.6!important;
    display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;
  }
  .chat-page>.page-title>.button,
  .chat-page>.page-title>button{
    min-width:96px!important;min-height:40px!important;padding:7px 10px!important;border-radius:12px!important;font-size:10.5px!important;
  }
  .chat-page>.page-title>.button:before,.chat-page>.page-title>button:before{font-size:15px}

  .chat-page>.list-filter-tabs{
    gap:5px!important;margin-bottom:7px!important;padding:1px 0 4px!important;
    scroll-padding-inline:3px;
  }
  .chat-page>.list-filter-tabs button{
    min-width:auto!important;min-height:38px!important;padding:6px 9px!important;border-radius:11px!important;font-size:10px!important;
  }
  .chat-page>.list-filter-tabs button b{min-width:19px!important;height:19px!important;font-size:8.5px!important}

  .chat-page>section.panel:has(.list-toolbar){padding:6px!important;margin-bottom:7px!important;border-radius:13px!important}
  .chat-page .list-toolbar{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  .chat-page .ajax-search.compact{min-height:44px!important;border-radius:12px!important;padding-inline:8px!important}
  .chat-page .ajax-search.compact input{height:42px!important;font-size:16px!important}
  .chat-page .page-size{display:none!important}
  .chat-page>section.panel:has(>.conversation-list){padding:0!important;border-radius:0!important}

  .conversation-row{
    min-height:70px!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:9px 8px!important;
    border-radius:14px!important;
    box-shadow:none!important;
  }
  .conversation-icon{width:36px!important;height:36px!important;border-radius:11px!important}
  .conversation-row>div>b{font-size:12px!important;line-height:1.45!important}
  .conversation-row>div>small{font-size:8.5px!important;line-height:1.5!important}
  .conversation-row>div>p{font-size:10px!important;line-height:1.5!important}
  .conversation-row>aside{min-width:48px!important;gap:4px!important;padding-block:1px!important}
  .conversation-row>aside time{font-size:7.5px!important}
  .conversation-row>aside em{min-width:30px!important;min-height:19px!important;padding:2px 5px!important;font-size:8px!important}
  .chat-page .empty-state.chat-empty-state,.chat-page .conversation-list>.empty-state{min-height:150px!important;border-radius:14px!important;padding:18px!important}

  .selected-department-members{padding:9px;border-radius:13px}
  .selected-department-members-head{display:grid;gap:3px}
  .selected-department-member-list{grid-template-columns:1fr}
  .selected-department-member{min-height:52px;padding:8px}
  .selected-department-member .button{min-height:34px!important;padding:6px 9px!important;font-size:10px!important}
}

@media(max-width:390px){
  .chat-page>.page-title{grid-template-columns:minmax(0,1fr) 90px!important}
  .chat-page>.page-title>.button,.chat-page>.page-title>button{min-width:90px!important;padding-inline:7px!important}
  .chat-page>.list-filter-tabs button{padding-inline:8px!important}
  .conversation-row{grid-template-columns:34px minmax(0,1fr) 44px!important;padding-inline:7px!important}
  .conversation-icon{width:32px!important;height:32px!important}
}