/* Live connection UI. All rules are scoped to the live layer. */
.connection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 22px;
  min-width: 0;
  margin: 24px 35px 0;
  padding: 18px 22px;
  border: 1px solid #f2d2a5;
  border-inline-start: 5px solid #e27e16;
  border-radius: 18px;
  background: linear-gradient(110deg, #fff6e7, #ffffff 72%);
  color: #513d1f;
  box-shadow: 0 7px 24px #85344210;
  font-size: 16px;
  line-height: 1.85;
}
.connection-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 260px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.connection-status > :not(.connection-status-dot) { min-width: 0; }
.connection-status strong { display: block; font-size: 16px; font-weight: 700; }
.connection-status p, .connection-status small {
  display: block;
  margin: 2px 0 0;
  color: #705631;
  font-size: 14px;
  line-height: 1.85;
}
.connection-status-dot {
  display: inline-block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #c47410;
  box-shadow: 0 0 0 5px #f8e6c9;
}
.connection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
}
.connection-actions .button, .connection-actions button {
  min-height: 48px;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.65;
  white-space: normal;
  text-align: center;
}
.connection-actions button:not(.button) {
  border: 1px solid #f3d8d0;
  background: #fff;
  color: #8b2439;
}
.connection-bar[data-state="connected"], .connection-bar.is-connected {
  border-color: #a8dec8;
  border-inline-start-color: #087c65;
  background: linear-gradient(110deg, #e3f8ed, #ffffff 74%);
  color: #0b5d4c;
}
.connection-bar[data-state="connected"] .connection-status-dot,
.connection-bar.is-connected .connection-status-dot {
  background: #087c65;
  box-shadow: 0 0 0 5px #d4f1e3;
}
.connection-bar[data-state="connected"] .connection-status p,
.connection-bar[data-state="connected"] .connection-status small,
.connection-bar.is-connected .connection-status p,
.connection-bar.is-connected .connection-status small { color: #356b5b; }
.connection-bar[data-state="connecting"], .connection-bar.is-connecting {
  border-color: #fac8b9;
  border-inline-start-color: #df2449;
  background: linear-gradient(110deg, #ffefea, #fff 74%);
  color: #922339;
}
.connection-bar[data-state="connecting"] .connection-status-dot,
.connection-bar.is-connecting .connection-status-dot {
  background: #df2449;
  box-shadow: 0 0 0 5px #ffe4dc;
}
.connection-bar[data-state="error"], .connection-bar.has-error {
  border-color: #efb9c7;
  border-inline-start-color: #b82448;
  background: linear-gradient(110deg, #fff0f3, #fff 74%);
  color: #9c2040;
}
.connection-bar[data-state="error"] .connection-status-dot,
.connection-bar.has-error .connection-status-dot {
  background: #b82448;
  box-shadow: 0 0 0 5px #f9dfe6;
}
.connection-bar[data-state="error"] .connection-status p,
.connection-bar[data-state="error"] .connection-status small,
.connection-bar.has-error .connection-status p,
.connection-bar.has-error .connection-status small { color: #8f3d51; }
.live-badge, .live-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid #a9d9c7;
  border-radius: 9px;
  background: #e5f7ee;
  color: #09654f;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.live-badge::before {
  content: '';
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.live-state[data-state="pending"], .live-state.pending {
  border-color: #edcf99;
  background: #fff4de;
  color: #86540f;
}
.live-state[data-state="error"], .live-state.error {
  border-color: #efb6c5;
  background: #fff0f3;
  color: #a22345;
}
.live-warning, .live-error {
  display: block;
  margin: 0 0 20px;
  padding: 16px 19px;
  border: 1px solid #eccb95;
  border-inline-start: 4px solid #c78319;
  border-radius: 13px;
  background: #fff6e7;
  color: #79531d;
  font-size: 15px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}
.live-error {
  border-color: #edb7c4;
  border-inline-start-color: #b82448;
  background: #fff0f3;
  color: #9c2141;
}
.live-warning p, .live-error p { margin: 0; font-size: inherit; }
.live-warning p + p, .live-error p + p { margin-top: 8px; }
.live-warning ul, .live-error ul { margin: 8px 0 0; padding-inline-start: 22px; }
.live-warning a, .live-error a { text-decoration: underline; text-underline-offset: 4px; }
.live-empty {
  min-width: 0;
  padding: 44px 26px;
  border: 1px dashed #e8c7bd;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 10%, #ffede8, transparent 68%), #fff;
  color: #91525d;
  text-align: center;
  font-size: 16px;
  line-height: 2;
}
.live-empty h2, .live-empty h3 { margin: 0 0 9px; color: #7d293a; font-size: 22px; }
.live-empty p { margin: 0 auto 18px; max-width: 600px; font-size: 16px; }
.live-empty .button { margin-top: 10px; }
#connection-overlay { z-index: 180; }
#connection-dialog {
  width: min(580px, 100%);
  min-width: 0;
  max-height: min(90dvh, 850px);
  border-color: #fad2c6;
  overscroll-behavior: contain;
}
#connection-dialog .dialog-heading { padding: 24px 27px; }
#connection-dialog .dialog-heading h2 { font-size: 25px; }
#connection-dialog .dialog-heading p { margin-top: 5px; font-size: 14px; line-height: 1.85; }
#connection-dialog .dialog-content { padding: 25px 27px; }
#connection-dialog .dialog-footer { padding: 19px 27px; gap: 10px; flex-wrap: wrap; }
#connection-dialog form { min-width: 0; }
#connection-dialog .field-grid { grid-template-columns: minmax(0, 1fr); gap: 21px; }
#connection-dialog .field { margin-bottom: 18px; }
#connection-dialog .field-grid .field { margin-bottom: 0; }
#connection-dialog label { font-size: 16px; }
#connection-dialog input:not([type="checkbox"]):not([type="radio"]),
#connection-dialog select {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #f2d2c8;
  border-radius: 12px;
  background: #fff;
  color: #5f182d;
  font-size: 16px;
}
#connection-dialog input:focus { border-color: #df2449; }
#connection-dialog input[autocomplete="one-time-code"] {
  direction: ltr;
  text-align: center;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .16em;
}
#connection-dialog .field-hint, #connection-dialog .field-error,
#connection-dialog .form-feedback, #connection-dialog small {
  font-size: 14px;
  line-height: 1.85;
}
#connection-dialog .live-error, #connection-dialog .live-warning { margin-bottom: 21px; font-size: 14px; }
#connection-dialog button { min-height: 48px; }
#connection-dialog button[type="submit"] { width: 100%; margin-top: 20px; font-size: 16px; }
#connection-dialog .field-grid + button[type="submit"] { margin-top: 25px; }
#connection-dialog [aria-busy="true"] { opacity: .8; }
.live-composer { min-width: 0; }
.live-composer .field-grid { min-width: 0; }
.live-composer .field > label { font-size: 16px; }
.live-composer input:not([type="checkbox"]):not([type="radio"]),
.live-composer select, .live-composer textarea {
  min-height: 50px;
  font-size: 16px;
}
.live-composer textarea { min-height: 170px; }
.live-composer .field-hint, .live-composer .field-error { font-size: 14px; line-height: 1.85; }
.live-recipient-modes { min-width: 0; margin-bottom: 18px; }
.live-recipient-modes select, select.live-recipient-modes {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 11px 13px;
  border: 1px solid #f2d2c8;
  border-radius: 12px;
  background: #fffaf8;
  color: #7e1f32;
  font-size: 16px;
}
.live-group-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  max-height: 330px;
  margin-top: 10px;
  padding: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #e49aa9 #fff2ee;
}
.live-group-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 54px;
  padding: 13px;
  border: 1px solid #f0d7cf;
  border-radius: 12px;
  background: #fffaf8;
  color: #782c3b;
  font-size: 16px;
  line-height: 1.8;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.live-group-list label:has(input:checked) { border-color: #dd5a74; background: #fff1ed; color: #9e1631; }
.live-group-list label > span { min-width: 0; }
.live-group-list input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 4px 0 0;
  accent-color: #df2449;
}
.live-group-list strong { display: block; font-size: 16px; }
.live-group-list small { display: block; margin-top: 2px; font-size: 14px; color: #935d66; }
.live-group-list .live-empty { grid-column: 1 / -1; padding: 26px 18px; }
.live-review-summary {
  min-width: 0;
  padding: 18px 21px;
  border: 1px solid #f5c7b9;
  border-radius: 16px;
  background: linear-gradient(120deg, #fff3f0, #fff);
  color: #7b2234;
  font-size: 16px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}
.live-review-summary dl { margin: 0; }
.live-review-summary dt { color: #945963; font-size: 14px; }
.live-review-summary dd { margin-inline-start: 0; color: #661b31; font-size: 16px; }
.live-review-summary pre, .live-review-summary .review-message {
  max-width: 100%;
  margin: 14px 0 0;
  padding: 15px 17px;
  border: 1px solid #f4d8d0;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.live-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #d78f9d #fff1ed;
}
.live-table-scroll .data-table { min-width: 660px; font-size: 16px; }
.live-table-scroll .data-table th { font-size: 15px; }
.live-table-scroll .data-table td { font-size: 16px; }
.live-table-scroll .data-table button { min-height: 44px; font-size: 15px; }
.live-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 19px;
  min-width: 0;
  margin-bottom: 24px;
}
.live-account-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid #f5cbbe;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #fff1ed);
  color: #752132;
  box-shadow: 0 7px 23px #87273a10;
  overflow-wrap: anywhere;
}
.live-account-card:nth-child(3n+2) { border-color: #b8dfd0; background: linear-gradient(135deg, #fff, #e8f8ef); }
.live-account-card:nth-child(3n+3) { border-color: #efcfaa; background: linear-gradient(135deg, #fff, #fff2e2); }
.live-account-card h2, .live-account-card h3 { margin: 0 0 9px; color: #8f4753; font-size: 17px; }
.live-account-card > strong, .live-account-card .live-value { display: block; margin-block: 8px; color: #711933; font-size: 28px; line-height: 1.65; font-weight: 700; }
.live-account-card p { margin: 0; font-size: 16px; line-height: 1.85; }
.live-account-card small { display: block; margin-top: 6px; color: #935b64; font-size: 14px; }
.live-account-card .live-state { margin-top: 10px; }

@media (min-width: 1500px) {
  .connection-bar { margin-inline: 42px; }
}
@media (max-width: 1250px) {
  .connection-bar { margin-inline: 26px; }
  .live-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .connection-bar { margin: 20px 22px 0; padding: 17px 18px; gap: 15px; }
  .connection-status { flex-basis: 100%; }
  .connection-actions { justify-content: flex-start; width: 100%; }
  .live-group-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .connection-bar { margin: 17px 17px 0; padding: 17px 16px; border-radius: 16px; gap: 14px; }
  .connection-status { gap: 11px; }
  .connection-status strong { font-size: 16px; }
  .connection-status p, .connection-status small { font-size: 14px; }
  .connection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .connection-actions .button, .connection-actions button { width: 100%; min-height: 48px; padding: 10px 12px; font-size: 15px; }
  .connection-actions > :only-child { grid-column: 1 / -1; }
  .connection-actions > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .live-warning, .live-error { padding: 15px 16px; font-size: 14px; }
  .live-empty { padding: 33px 20px; border-radius: 16px; }
  .live-empty h2, .live-empty h3 { font-size: 21px; }
  .live-account-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .live-account-card { padding: 22px; }
  .live-account-card > strong, .live-account-card .live-value { font-size: 28px; }
  .live-group-list { max-height: 310px; }
  .live-review-summary { padding: 16px 17px; }
  #connection-overlay { padding: 12px; }
  #connection-dialog { width: 100%; border-radius: 20px; max-height: 94dvh; }
  #connection-dialog .dialog-heading { padding: 21px 20px; gap: 10px; }
  #connection-dialog .dialog-heading h2 { font-size: 23px; }
  #connection-dialog .dialog-content { padding: 22px 20px; }
  #connection-dialog .dialog-footer { padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .connection-bar *, #connection-dialog *, .live-composer * { scroll-behavior: auto; }
}