@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600&display=swap');

:root {
  --bg: #c8d9e8;
  --bg-soft: #dce8f3;
  --text: #1a1a1a;
  --text-muted: #4a5568;
  --heading: #0d47a1;
  --link: #0066cc;
  --link-hover: #004c99;
  --accent: #3a9bdc;
  --accent-dark: #1e7bb8;
  --glass: rgba(255, 255, 255, 0.7);
  --border: #a8c0d8;
  --shadow: 0 1px 4px rgba(0, 40, 80, 0.12);
}

/* Global */
body, .ui, .columns-area, .column, .drawer, .drawer__inner {
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  background: linear-gradient(180deg, #d4e4f4 0%, #b8cde0 100%) !important;
  color: var(--text) !important;
  font-size: 1.05em !important;
  line-height: 1.45 !important;
}

/* ========== HIDE MASTODON LOGO (top right) ========== */
.logo-button,
.navigation-bar .logo,
.column-link--logo,
.drawer__inner__mastodon,
.logo {
  display: none !important;
}

/* ========== COLUMNS ========== */
.column,
.drawer__inner,
.column-header__wrapper {
  background: rgba(220, 232, 243, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
}

/* Column headers */
.column-header {
  background: linear-gradient(180deg, #e8f1f8 0%, #c5d8ea 100%) !important;
  border-bottom: 1px solid #a0b8d0 !important;
  border-radius: 10px 10px 0 0 !important;
  margin: 0 !important;
}

/* ========== POSTS ========== */
.status, .status__wrapper, .detailed-status {
  background: var(--glass) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 8px !important;
  margin: 0 4px 8px 4px !important;
  padding: 12px 12px !important;
  box-shadow: var(--shadow) !important;
}

/* White box around the username / avatar area */
.status__info,
.status__display-name,
.account {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
}

.status__content,
.status__content p {
  color: var(--text) !important;
  font-size: 1.0em !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* Headings / names */
.status__display-name strong,
.account__display-name strong,
.column-header__title,
h1, h2, h3 {
  color: var(--heading) !important;
  font-weight: 600 !important;
}

/* Links */
a, .status__content a, .account__header a, .column-link {
  color: var(--link) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--link-hover) !important;
}

/* ========== EMPTY STATE ========== */
.column .scrollable {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.empty-column-indicator,
.regeneration-indicator,
.error-column {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 18px 16px !important;
  color: var(--text-muted) !important;
  font-size: 0.95em !important;
  min-height: 0 !important;
  max-height: 120px !important;
}

/* ========== COMPOSE BOX ========== */
.compose-form .account,
.compose-form .account__display-name {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #c5d4e4 !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  margin-bottom: 8px !important;
}

.compose-form__autosuggest-wrapper,
.autosuggest-textarea,
.autosuggest-textarea__textarea,
.compose-form textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--text) !important;
  border: 1px solid #c5d4e4 !important;
  border-radius: 8px !important;
  font-size: 1.0em !important;
  line-height: 1.4 !important;
  min-height: 80px !important;
  max-height: 280px !important;
  height: auto !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.compose-form {
  padding-bottom: 8px !important;
}

.compose-form__actions,
.compose-form__buttons-wrapper {
  margin-top: 8px !important;
  padding-top: 4px !important;
}

/* Glossy Vista buttons */
.button, button.button {
  background: linear-gradient(180deg, #5eb3e8 0%, #3a9bdc 45%, #2b86c4 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1e7bb8 !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.button:hover {
  background: linear-gradient(180deg, #6ec0f0 0%, #4aa8e4 45%, #3590d0 100%) !important;
}

/* Code */
code, pre {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #1a1a1a !important;
  border-radius: 4px;
  border: 1px solid #c0d0e0;
}