:root {
  --isq-green: #0a8f55;
  --isq-green-dark: #08683f;
  --isq-green-soft: #dff5ea;
  --isq-line: #d2dcd5;
  --isq-panel: #f7faf7;
  --isq-panel-strong: #ffffff;
  --isq-ink: #16241d;
  --isq-muted: #5d7167;
  --isq-error: #b42318;
  --isq-warn: #b54708;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #edf3ef;
  color: var(--isq-ink);
  font-family: Arial, "Segoe UI", sans-serif;
}

body {
  min-height: 100dvh;
}

.isq-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 48px 1fr;
  background: linear-gradient(180deg, #f7fbf8 0%, #ebf3ee 100%);
}

.isq-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  color: #fff;
  background: linear-gradient(180deg, var(--isq-green), var(--isq-green-dark));
  border-bottom: 1px solid #064e31;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  position: relative;
  z-index: 5;
}

.isq-brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.isq-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.isq-brand-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.isq-brand-subtitle {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
}

.isq-flower {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffe66d 0 12%, transparent 13%),
    radial-gradient(circle at 50% 12%, #fff 0 16%, transparent 17%),
    radial-gradient(circle at 88% 50%, #fff 0 16%, transparent 17%),
    radial-gradient(circle at 50% 88%, #fff 0 16%, transparent 17%),
    radial-gradient(circle at 12% 50%, #fff 0 16%, transparent 17%),
    #42c978;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.22);
}

.isq-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.isq-connection-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.isq-connection-pill[data-tone="online"] {
  background: rgba(120, 255, 176, 0.18);
}

.isq-connection-pill[data-tone="busy"] {
  background: rgba(255, 212, 102, 0.22);
}

.isq-ghost-button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.isq-main {
  min-height: 0;
}

.isq-auth-screen,
.isq-chat-screen {
  min-height: calc(100dvh - 48px);
}

.isq-auth-screen {
  display: grid;
  grid-template-columns: minmax(260px, 460px) minmax(300px, 420px);
  justify-content: center;
  align-content: center;
  gap: 48px;
  padding: 40px 24px 56px;
}

.isq-auth-copy {
  align-self: center;
}

.isq-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--isq-green-soft);
  color: var(--isq-green-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.isq-auth-title {
  margin: 18px 0 12px;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 0.98;
}

.isq-auth-text {
  margin: 0;
  max-width: 32rem;
  color: var(--isq-muted);
  font-size: 18px;
  line-height: 1.55;
}

.isq-login-card {
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--isq-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(9, 32, 21, 0.08);
}

.isq-field {
  display: grid;
  gap: 8px;
}

.isq-field-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--isq-ink);
}

.isq-jid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.isq-input,
.isq-domain-badge {
  min-height: 52px;
  border: 1px solid var(--isq-line);
  background: var(--isq-panel-strong);
  color: var(--isq-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1;
}

.isq-input {
  width: 100%;
  padding: 0 16px;
  border-radius: 12px;
  outline: none;
}

.isq-jid-row .isq-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.isq-domain-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-left: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  color: var(--isq-muted);
  white-space: nowrap;
}

.isq-input::placeholder {
  color: #8a9b92;
  opacity: 1;
}

.isq-input:focus {
  border-color: var(--isq-green);
  box-shadow: 0 0 0 3px rgba(10, 143, 85, 0.12);
}

.isq-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--isq-ink);
  font-size: 14px;
  font-weight: 600;
}

.isq-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--isq-green);
}

.isq-form-status {
  min-height: 22px;
  margin: 0;
  color: var(--isq-muted);
  font-size: 14px;
  line-height: 1.45;
}

.isq-form-status[data-tone="success"] {
  color: var(--isq-green-dark);
}

.isq-form-status[data-tone="error"] {
  color: var(--isq-error);
}

.isq-form-status[data-tone="warning"] {
  color: var(--isq-warn);
}

.isq-primary-button {
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--isq-green), var(--isq-green-dark));
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.isq-primary-button:disabled,
.isq-ghost-button:disabled {
  opacity: 0.65;
  cursor: default;
}

.isq-chat-screen {
  padding: 0;
}

.isq-chat-frame {
  min-height: calc(100dvh - 48px);
}

.isq-chat-stage {
  min-height: calc(100dvh - 48px);
}

converse-root#conversejs {
  position: fixed;
  inset: 48px 0 0;
  display: none;
  width: 100%;
  min-height: calc(100dvh - 48px);
  background: #f7faf7;
  color: var(--isq-ink) !important;
  z-index: 2;
  --background-color: #f7faf7;
  --controlbox-pane-background-color: #f7faf7;
  --chatroom-head-color-dark: var(--isq-green-dark);
  --primary-color: var(--isq-green);
  --secondary-color: #e6f4ed;
  --text-color: var(--isq-ink);
  --link-color: var(--isq-green-dark);
  --link-hover-color: #065636;
  --subdued-color: #64756d;
  --border-color: var(--isq-line);
}

body[data-state="chat"] converse-root#conversejs {
  display: block !important;
}

converse-root#conversejs,
converse-root#conversejs .converse-chatboxes,
converse-root#conversejs .chatbox,
converse-root#conversejs .chatroom,
converse-root#conversejs .controlbox {
  min-height: calc(100dvh - 48px);
}

#conversejs .background,
#conversejs .converse-brand,
#conversejs .converse-brand-logo,
#conversejs .converse-brand-text,
#conversejs .converse-brand-heading,
#conversejs .conversejs-brand,
#conversejs .conversejs-brand-logo,
#conversejs .conversejs-brand-text,
#conversejs .conversejs-brand-heading,
#conversejs .conversejs-toppanel,
#conversejs .conversejs-menu,
#conversejs .navbar,
#conversejs .nav,
#conversejs .top-links,
#conversejs .links,
#conversejs .info,
#conversejs .converse-info,
#conversejs .converse-client-info,
#conversejs .conversejs-client-info,
#conversejs .conversejs-about,
#conversejs .converse-about,
#conversejs .about,
#conversejs .documentation,
#conversejs .contact,
#conversejs .github,
#conversejs .social,
#conversejs .welcome,
#conversejs .hero,
#conversejs a[href*="github.com"],
#conversejs a[href*="conversejs.org/docs"],
#conversejs a[href*="/docs"],
#conversejs a[href*="/contact"],
#conversejs a[href*="/about"],
#conversejs .footer,
#conversejs .page-footer,
#conversejs .converse-footer,
#conversejs footer,
#conversejs .sponsor,
#conversejs .sponsors,
#conversejs .credits,
#conversejs .version,
#conversejs .login-panel,
#conversejs .register-panel,
#conversejs form.converse-form {
  display: none !important;
}

#conversejs .controlbox-pane,
#conversejs .controlbox,
#conversejs .flyout,
#conversejs .chatbox,
#conversejs .chatroom,
#conversejs .chat {
  border-radius: 8px;
}

#conversejs .controlbox-pane,
#conversejs .controlbox,
#conversejs .flyout {
  background: #f7faf7 !important;
  color: var(--isq-ink) !important;
}

#conversejs .controlbox-pane *,
#conversejs .controlbox *,
#conversejs .flyout * {
  color: var(--isq-ink);
}

#conversejs input,
#conversejs textarea,
#conversejs select,
#conversejs .form-control,
#conversejs .form-select {
  color: var(--isq-ink) !important;
  -webkit-text-fill-color: var(--isq-ink);
  opacity: 1 !important;
}

#conversejs ::placeholder {
  color: #64756d !important;
  opacity: 1 !important;
}

#conversejs a,
#conversejs .btn-link,
#conversejs .clickable {
  color: var(--isq-green-dark) !important;
}

#conversejs .controlbox-pane label,
#conversejs .controlbox label,
#conversejs .flyout label,
#conversejs .controlbox-pane .form-label,
#conversejs .controlbox .form-label {
  color: var(--isq-ink) !important;
  font-weight: 700;
}

#conversejs .controlbox-pane .form-control,
#conversejs .controlbox .form-control,
#conversejs .flyout .form-control {
  color: var(--isq-ink) !important;
  background: #fff !important;
  border-color: var(--isq-line) !important;
}

#conversejs .controlbox-pane .form-control::placeholder,
#conversejs .controlbox .form-control::placeholder,
#conversejs .flyout .form-control::placeholder {
  color: #6a7b73 !important;
}

#conversejs .box-flyout,
#conversejs .flyout {
  box-shadow: none !important;
}

#conversejs .conversejs-main,
#conversejs .converse-root,
#conversejs .converse-content,
#conversejs .converse-container {
  background: transparent !important;
}

#conversejs .controlbox .btn,
#conversejs .flyout .btn {
  color: #fff !important;
}

#conversejs .btn-primary,
#conversejs button.btn-primary {
  background-color: var(--isq-green);
  border-color: var(--isq-green-dark);
}

#conversejs input,
#conversejs textarea,
#conversejs select {
  border-radius: 4px;
}

@media (max-width: 640px) {
  .isq-topbar {
    height: 44px;
    padding-inline: 12px;
  }

  .isq-shell {
    grid-template-rows: 44px 1fr;
  }

  .isq-brand-subtitle,
  .isq-connection-pill {
    display: none;
  }

  .isq-auth-screen {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 14px 36px;
  }

  .isq-auth-title {
    font-size: 34px;
  }

  .isq-auth-text {
    font-size: 16px;
  }

  .isq-login-card {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .isq-jid-row {
    grid-template-columns: 1fr;
  }

  .isq-jid-row .isq-input {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .isq-domain-badge {
    min-height: 44px;
    border-left: 1px solid var(--isq-line);
    border-top: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
  }

  converse-root#conversejs {
    inset: 44px 0 0;
    min-height: calc(100dvh - 44px);
  }

  converse-root#conversejs,
  converse-root#conversejs .converse-chatboxes,
  converse-root#conversejs .chatbox,
  converse-root#conversejs .chatroom,
  converse-root#conversejs .controlbox,
  .isq-chat-frame,
  .isq-chat-stage {
    min-height: calc(100dvh - 44px);
  }
}