:root {
  --focus-ring: 0 0 0 4px rgba(11, 107, 58, .16);
}

:focus-visible {
  outline: 3px solid rgba(11, 107, 58, .38);
  outline-offset: 2px;
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
  cursor: not-allowed;
  opacity: .62;
}

button.is-loading {
  color: transparent !important;
  position: relative;
  pointer-events: none;
}

button.is-loading::after {
  animation: cgser-spin .75s linear infinite;
  border: 3px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  border-top-color: #fff;
  content: "";
  height: 18px;
  left: calc(50% - 9px);
  position: absolute;
  top: calc(50% - 9px);
  width: 18px;
}

button.secondary.is-loading::after {
  border-color: rgba(11, 107, 58, .25);
  border-top-color: #0b6b3a;
}

@keyframes cgser-spin {
  to { transform: rotate(360deg); }
}

.connection-banner {
  align-items: center;
  background: #fff4e5;
  border: 1px solid #ffd69a;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(87, 54, 5, .14);
  color: #784b06;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 9px;
  left: 50%;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  position: fixed;
  top: 12px;
  transform: translateX(-50%);
  z-index: 110;
}

.connection-banner.online {
  background: #e9f8ee;
  border-color: #b9e4c7;
  color: #075e34;
}

.toast-region {
  display: grid;
  gap: 10px;
  max-width: min(390px, calc(100vw - 24px));
  pointer-events: none;
  position: fixed;
  right: 16px;
  top: 16px;
  width: 100%;
  z-index: 120;
}

.toast {
  align-items: flex-start;
  animation: toast-in .2s ease-out;
  background: #fff;
  border: 1px solid #cdded3;
  border-left: 5px solid #0b6b3a;
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(9, 55, 31, .18);
  color: #24352b;
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
  line-height: 1.45;
  padding: 13px 14px;
  pointer-events: auto;
}

.toast.error { border-left-color: #b42318; }
.toast.warning { border-left-color: #a45f00; }
.toast.success { border-left-color: #087443; }
.toast-icon { font-size: 18px; line-height: 1.2; }
.toast strong { display: block; margin-bottom: 2px; }
.toast-close {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #64748b;
  min-height: 28px;
  padding: 0 3px;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
}

dialog.system-dialog {
  max-height: min(90dvh, 720px);
  overflow: hidden;
  width: min(520px, calc(100% - 24px));
}

.system-dialog .dialog-card {
  max-height: min(90dvh, 720px);
  overflow: auto;
}

.system-dialog .dialog-icon {
  align-items: center;
  background: #eaf7ef;
  border-radius: 16px;
  color: #0b6b3a;
  display: flex;
  flex: 0 0 auto;
  font-size: 24px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.system-dialog.danger-dialog .dialog-icon {
  background: #fff0ee;
  color: #b42318;
}

.system-dialog .dialog-head-copy {
  display: flex;
  gap: 12px;
}

.system-dialog .dialog-head-copy h3 {
  margin: 2px 0 5px;
}

.system-dialog .dialog-message {
  color: #52655a;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
}

.system-dialog-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.system-dialog .actions {
  border-top: 1px solid #e1ebe4;
  margin-top: 18px;
  padding-top: 15px;
}

.mobile-menu-dialog {
  width: min(560px, calc(100% - 20px));
}

.mobile-menu-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-menu-grid button {
  align-items: center;
  background: #f6faf7;
  border-color: #d9e8dd;
  box-shadow: none;
  color: #153724;
  display: flex;
  gap: 11px;
  justify-content: flex-start;
  min-height: 54px;
  text-align: left;
}

.mobile-menu-grid button span {
  align-items: center;
  background: #e5f3ea;
  border-radius: 11px;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.chat-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.chat-heading h3 {
  margin-bottom: 0;
}

.chat-msg.pending {
  opacity: .72;
}

.chat-msg.failed {
  background: #fff0ee;
  border-color: #efb9b3;
}

.message-state {
  align-items: center;
  display: flex !important;
  gap: 6px;
}

.retry-message {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #b42318;
  font-size: 11px;
  min-height: auto;
  padding: 0;
  text-decoration: underline;
}

.new-message-jump {
  bottom: 92px;
  display: none;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

.internal-chat-panel {
  position: relative;
}

.mobile-unread {
  align-items: center;
  background: #e03131;
  border: 2px solid #0b3d26;
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 9px;
  font-weight: 900;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 4px;
  position: absolute;
  right: 6px;
  top: 4px;
}

@media (max-width: 1100px) {
  .bottom-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .bottom-nav button {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-height: 52px;
    position: relative;
  }

  .bottom-nav button > span {
    font-size: 18px;
    line-height: 1;
  }

  .bottom-nav button > small {
    color: inherit;
    display: block;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
  }

  dialog {
    margin: auto;
  }

  .dialog-card {
    padding: 18px;
  }

  .toast-region {
    left: 12px;
    max-width: calc(100vw - 24px);
    right: 12px;
    top: 12px;
  }
}

@media (max-width: 560px) {
  .mobile-menu-grid { grid-template-columns: 1fr; }
  .system-dialog .actions { display: grid; }
  .system-dialog .actions button { width: 100%; }
  .chat-compose { grid-template-columns: 1fr; }
  .chat-compose button { width: 100%; }
  .chat-msg { max-width: 94%; }
  .connection-banner { top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}