/* Approved HASAD communication dock. Existing button IDs and handlers are retained. */
.topbar .topbar-communication-dock {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 3px;
  padding: 5px;
  border: 1px solid #dce6df;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(23, 60, 40, .06);
  direction: rtl;
  overflow: visible;
}

.topbar .topbar-communication-dock > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #165b49;
  box-shadow: none;
  transform: none;
  line-height: 1;
  transition: background-color .16s, color .16s;
}

.topbar .topbar-communication-dock > button:hover,
.topbar .topbar-communication-dock > button:active {
  background: #eaf2ec;
  border-color: transparent;
  transform: none;
}

.topbar .topbar-communication-dock > button:focus-visible {
  outline: 2px solid #178060;
  outline-offset: 2px;
}

.topbar .topbar-communication-dock > #notifications-bell { color: #957337; }

.topbar .topbar-control-icon { display: inline-flex; align-items: center; justify-content: center; }
.topbar .topbar-control-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar .topbar-communication-dock > .language-button {
  width: auto;
  min-width: 76px;
  padding: 0 12px;
  gap: 8px;
  direction: ltr;
}
.topbar .topbar-communication-dock .language-button svg { width: 17px; height: 17px; }
.topbar .topbar-communication-dock .language-button b {
  display: block;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1;
}
.topbar .topbar-control-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 19px;
  margin: 0 3px;
  background: #dce6df;
}

.topbar .topbar-communication-dock .messages-unread {
  top: -3px;
  inset-inline-end: -1px;
  inset-inline-start: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: #a3484d;
  color: #fff;
  font: 600 10px/14px "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  pointer-events: none;
}

/* Keep the whole dock together, and let surrounding controls wrap on small screens. */
@media (max-width: 680px) {
  .topbar:has(.topbar-communication-dock) { height: auto; min-height: 76px; flex-wrap: wrap; padding-block: 10px; }
  .topbar:has(.topbar-communication-dock) .top-actions { max-width: 100%; flex-wrap: wrap; }
  .topbar:has(.topbar-communication-dock) .topbar-utilities { max-width: 100%; flex-wrap: wrap; }
}
@media (pointer: coarse) {
  .topbar .topbar-communication-dock > button { min-width: 44px; min-height: 44px; }
  .topbar .topbar-communication-dock > .language-button { min-width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .topbar-communication-dock > button { transition: none; }
}