html, body, #q-app {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0a0a0f;
}

/* Force shell + wallpaper transparent so body-level gradient shows through */
.mecra-desktop-shell { background: transparent !important; }
.mecra-wp-bg { background-image: none !important; background-color: transparent !important; }

/* Body-level gradient blobs — dark theme */
body.body--dark #mecra-bg .mecra-bg-blob:nth-child(1) { background: radial-gradient(circle, #1a3a6e 0%, transparent 60%); }
body.body--dark #mecra-bg .mecra-bg-blob:nth-child(2) { background: radial-gradient(circle, #4a1a6e 0%, transparent 60%); }
body.body--dark #mecra-bg .mecra-bg-blob:nth-child(3) { background: radial-gradient(circle, #0a4a5e 0%, transparent 60%); }
body.body--dark { background: #0a0a0f !important; }

/* Body-level gradient blobs — light theme */
body.body--light #mecra-bg .mecra-bg-blob:nth-child(1) { background: radial-gradient(circle, #92b4f4 0%, transparent 60%); opacity: 0.35; }
body.body--light #mecra-bg .mecra-bg-blob:nth-child(2) { background: radial-gradient(circle, #c084fc 0%, transparent 60%); opacity: 0.3; }
body.body--light #mecra-bg .mecra-bg-blob:nth-child(3) { background: radial-gradient(circle, #67e8f9 0%, transparent 60%); opacity: 0.3; }
body.body--light { background: #e8ecf4 !important; }

/* Chat card light theme — dark frosted glass on bright bg */
body.body--light .mecra-setup { background: transparent; }
body.body--light .setup-chat {
  background: rgba(15, 20, 40, 0.55);
  backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
}
body.body--light .setup-chat__header {
  background: rgba(0,0,0,0.15);
  border-bottom-color: rgba(255,255,255,0.06);
}
/* Light theme card uses dark glass — text stays light like dark theme */
body.body--light .setup-chat__input { background: rgba(0,0,0,0.12); border-top-color: rgba(255,255,255,0.06); }
body.body--light .setup-blob { opacity: 0.5; }
body.body--light .setup-blob--1 { background: radial-gradient(circle, #6ea8fe 0%, transparent 65%); }
body.body--light .setup-blob--2 { background: radial-gradient(circle, #b07ef5 0%, transparent 65%); }
body.body--light .setup-blob--3 { background: radial-gradient(circle, #4dd9e8 0%, transparent 65%); }
body.body--light .setup-blob--4 { background: radial-gradient(circle, #f472b6 0%, transparent 65%); }

/* ── Boot loading ───────────────────────────────────────────────────────── */
.mecra-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px;
  color: #555;
}
.mecra-boot__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e0e0e0;
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: mecra-spin 0.8s linear infinite;
}
@keyframes mecra-spin {
  to { transform: rotate(360deg); }
}
.mecra-boot__text {
  font-size: 14px;
  margin: 0;
}
.mecra-boot--error {
  color: #c62828;
}
.mecra-boot__retry {
  margin-top: 8px;
  padding: 8px 24px;
  border: 1px solid #c62828;
  border-radius: 4px;
  background: transparent;
  color: #c62828;
  cursor: pointer;
  font-size: 14px;
}
.mecra-boot__retry:hover {
  background: #ffebee;
}

/* ── Login autofill stability (prevents label/value overlap) ───────────── */
/* ── Login: Defterim-style — no card, flat, logo above form ── */
.m-login-layout {
  --mecra-login-autofill-bg: transparent;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  min-height: 100vh;
}
.m-login-layout .m-login-layout__brand { display: none !important; }
.m-login-layout .m-login-layout__form {
  max-width: 400px;
  width: 100%;
  padding: 0 24px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.m-login-layout .m-login-layout__form-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* Mobile logo slot: show Mecra SVG logo above form — 2x size */
.m-login-layout .m-login-layout__mobile-logo {
  display: flex !important;
  justify-content: center;
  margin-bottom: 40px;
}
.m-login-layout .m-login-layout__mobile-logo svg {
  width: 128px !important;
  height: 128px !important;
}
.m-login-layout .m-login-layout__mobile-logo svg rect { fill: transparent !important; }
/* Hide everything except inputs + buttons */
.m-login-layout .text-h5,
.m-login-layout .text-h6,
.m-login-layout .text-subtitle1,
.m-login-layout .text-subtitle2 { display: none !important; }
/* Hide checkbox, links, footer — catch all possible selectors */
.m-login-layout .q-checkbox { display: none !important; }
.m-login-layout a[href="#"] { display: none !important; }
.m-login-layout a:not([href^="/"]):not([href^="http"]) { display: none !important; }
/* Hide any div containing "Hesabınız" or "Şifremi" text — parent containers */
.m-login-layout > div:last-child > div:last-child { display: none !important; }
.m-login-layout .m-login-layout__form > div > div:last-child:not(:first-child) { display: none !important; }
/* Force vertical center on mobile */
.m-login-layout {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.m-login-layout .m-login-layout__form {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 100vh !important;
}
.m-login-layout .q-field--float .q-field__label {
  transform: translateY(-61%) scale(0.75);
  transform-origin: left top;
}
.m-login-layout .q-field--float .q-field__native {
  padding-top: 10px;
}
/* Autofill can bypass model updates; force float-style label in that case. */
@supports selector(.q-field:has(.q-field__native:-webkit-autofill)) {
  .m-login-layout .q-field:has(.q-field__native:-webkit-autofill) .q-field__label {
    transform: translateY(-61%) scale(0.75);
    transform-origin: left top;
  }
  .m-login-layout .q-field:has(.q-field__native:-webkit-autofill) .q-field__native {
    padding-top: 10px;
  }
}
.m-login-layout .q-field__native:-webkit-autofill,
.m-login-layout .q-field__native:-webkit-autofill:hover,
.m-login-layout .q-field__native:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit !important;
  caret-color: inherit;
  -webkit-box-shadow: 0 0 0 1000px var(--mecra-login-autofill-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--mecra-login-autofill-bg) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}
/* Optional: paint the whole field control instead of only input content area. */
@supports selector(.q-field:has(.q-field__native:-webkit-autofill)) {
  .m-login-layout .q-field:has(.q-field__native:-webkit-autofill) .q-field__control {
    background: var(--mecra-login-autofill-bg);
  }
}

/* Dark mode overrides */
body.body--dark .mecra-boot {
  color: #bbb;
}
body.body--dark .mecra-boot__spinner {
  border-color: #444;
  border-top-color: #42a5f5;
}
body.body--dark .mecra-boot--error {
  color: #ef9a9a;
}
body.body--dark .mecra-boot__retry {
  border-color: #ef9a9a;
  color: #ef9a9a;
}
body.body--dark .mecra-boot__retry:hover {
  background: rgba(239,154,154,0.1);
}
body.body--dark .m-login-layout {
  --mecra-login-autofill-bg: #1b1b1b;
}

/* Dark mode: tone down MecraWindow border */
body.body--dark .mecra-window {
  border-color: rgba(255, 255, 255, 0.06) !important;
}
body.body--dark .mecra-window__topbar {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Dark mode: restore dark nav rail sidebar */
body.body--dark .m-nav-rail {
  background: var(--m-nav-rail-bg, #1a1f36) !important;
  color: var(--m-nav-rail-color, rgba(255, 255, 255, 0.7)) !important;
}
body.body--dark .m-nav-rail__item:hover,
body.body--dark .m-nav-rail .m-nav-rail__btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
body.body--dark .m-nav-rail__item--active,
body.body--dark .m-nav-rail .m-nav-rail__btn--active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

/* ── Login inputs: dark blue like Defterim ── */
.m-login-layout .q-field__control {
  background: rgba(20, 30, 60, 0.7) !important;
  border-radius: 12px !important;
}
.m-login-layout .q-field__native,
.m-login-layout .q-field__prefix,
.m-login-layout .q-field__suffix,
.m-login-layout .q-field__label {
  color: rgba(255, 255, 255, 0.85) !important;
}
.m-login-layout .q-field__label {
  color: rgba(255, 255, 255, 0.5) !important;
}
.m-login-layout .q-field--focused .q-field__label {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* (login hide rules moved to .m-login-layout block above) */

/* ── Setup Form — Premium Dark Glassmorphism ───────────────────────────── */
.mecra-setup {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background: #0a0a0f;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* Animated gradient blobs */
.setup-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.setup-blob {
  position: absolute; border-radius: 50%; opacity: 0.6;
  filter: blur(80px); will-change: transform;
}
.setup-blob--1 {
  width: 2100px; height: 2100px; top: -40%; left: -30%;
  background: radial-gradient(circle, #1a3a6e 0%, transparent 70%);
  animation: setupFloat1 22s ease-in-out infinite;
}
.setup-blob--2 {
  width: 1900px; height: 1900px; top: 30%; right: -40%;
  background: radial-gradient(circle, #4a1a6e 0%, transparent 70%);
  animation: setupFloat2 26s ease-in-out infinite;
}
.setup-blob--3 {
  width: 1700px; height: 1700px; bottom: -30%; left: 10%;
  background: radial-gradient(circle, #0a4a5e 0%, transparent 70%);
  animation: setupFloat3 20s ease-in-out infinite;
}
.setup-blob--4 {
  width: 1500px; height: 1500px; top: 0%; left: 35%;
  background: radial-gradient(circle, #6e1a4a 0%, transparent 70%);
  animation: setupFloat1 28s ease-in-out infinite reverse;
}
@keyframes setupFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(100px, -50px) scale(1.1); }
  66% { transform: translate(-50px, 80px) scale(0.9); }
}
@keyframes setupFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-80px, 60px) scale(1.2); }
  66% { transform: translate(60px, -40px) scale(0.8); }
}
@keyframes setupFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 40px) scale(1.15); }
}

/* Chat window */
.setup-chat {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 672px; height: 85vh; max-height: 864px;
  background: rgba(15, 15, 30, 0.4);
  backdrop-filter: blur(29px); -webkit-backdrop-filter: blur(29px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 29px;
  box-shadow: 0 10px 38px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Chat header */
.setup-chat__header {
  display: flex; align-items: center; gap: 14px;
  padding: 19px 24px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.setup-chat__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,0.15);
}
.setup-chat__hinfo { flex: 1; }
.setup-chat__hname { font-size: 18px; font-weight: 600; color: #e8e8ed; }
.setup-chat__hstatus { font-size: 14px; color: rgba(255,255,255,0.4); }

/* Chat body */
.setup-chat__body {
  flex: 1; overflow-y: auto; padding: 24px;
  display: flex; flex-direction: column; gap: 0;
  scroll-behavior: smooth;
}
.setup-chat__body::-webkit-scrollbar { width: 5px; }
.setup-chat__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 5px; }

/* Messages */
.sc-msg { display: flex; gap: 12px; animation: msgIn 0.3s ease-out; margin-bottom: 0; }
.sc-msg--bot { align-self: flex-start; align-items: stretch; }
.sc-msg--user { align-self: flex-end; flex-direction: row-reverse; margin: 14px 0; }

/* Gutter: avatar or line+dot */
.sc-msg__gutter { width: 36px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.sc-msg__av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sc-msg__av-tail { flex: 1; width: 2px; background: #3d4560; align-self: center; }
body.body--light .sc-msg__av-tail { background: #c8cdd8; }
.sc-msg__line {
  width: 36px; height: 100%;
  display: flex; justify-content: center;
  position: relative;
}
.sc-msg__line::after {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%);
  background: #3d4560;
}
.sc-msg__line--last::after { bottom: 50%; }
body.body--light .sc-msg__line::after { background: #c8cdd8; }
.sc-msg__dot { width: 8px; height: 8px; border-radius: 50%; background: #5a6380; flex-shrink: 0; position: relative; z-index: 1; margin-top: 8px; }
.sc-msg__dot--success { background: #4caf50; }
.sc-msg__dot--error { background: #f44336; }
body.body--light .sc-msg__dot { background: #b0b8cc; }
body.body--light .sc-msg__dot--success { background: #43a047; }
body.body--light .sc-msg__dot--error { background: #e53935; }

/* Bot text — no bubble, just text */
.sc-msg__text { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); padding-top: 2px; max-width: calc(100% - 48px); }
.sc-msg__name { font-size: 12px; font-weight: 600; color: #667eea; margin-bottom: 3px; }

/* Typing cursor */
.sc-msg__cursor {
  display: inline-block; width: 2px; height: 16px; margin-left: 1px;
  background: #667eea; vertical-align: text-bottom;
  animation: cursorBlink 0.8s steps(1) infinite;
}
@keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* User bubble — gradient */
.sc-msg__bubble {
  padding: 10px 16px; font-size: 15px; line-height: 1.5;
  border-radius: 18px; word-break: break-word;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white; border-bottom-right-radius: 4px;
  flex-shrink: 0;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Typing dots */
.sc-msg__dots { display: flex; gap: 5px; padding: 6px 0; }
.sc-msg__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: dotBounce 1.4s infinite ease-in-out both;
}
.sc-msg__dots span:nth-child(2) { animation-delay: 0.16s; }
.sc-msg__dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dotBounce { 0%,80%,100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* Error toast */
.setup-chat__err {
  margin: 0 19px 10px; padding: 10px 17px;
  background: rgba(255,59,48,0.12); border: 1px solid rgba(255,59,48,0.25);
  border-radius: 12px; color: #ff6b6b; font-size: 16px;
}

/* Input area */
.setup-chat__input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 19px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.setup-chat__inputwrap {
  flex: 1; display: flex; align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 17px; padding: 0 5px 0 0;
  transition: border-color 0.2s;
}
.setup-chat__inputwrap:focus-within { border-color: rgba(102,126,234,0.5); outline: none; }
.setup-chat__inputwrap input {
  flex: 1; padding: 14px 19px;
  background: transparent; border: none; outline: none;
  color: #e8e8ed; font-size: 18px; font-family: inherit;
  -webkit-appearance: none; box-shadow: none;
}
.setup-chat__inputwrap input:focus,
.setup-chat__inputwrap input:focus-visible { outline: none !important; box-shadow: none !important; -webkit-appearance: none; }
.setup-chat__inputwrap input::placeholder { color: rgba(255,255,255,0.25); }
.setup-chat__eye {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-family: "Material Icons"; font-size: 24px;
  cursor: pointer; padding: 5px 10px; line-height: 1;
}
.setup-chat__eye:hover { color: rgba(255,255,255,0.7); }
.setup-chat__send {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none; border-radius: 14px;
  color: white; font-family: "Material Icons"; font-size: 24px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s, transform 0.1s; flex-shrink: 0;
}
.setup-chat__send:hover:not(:disabled) { opacity: 0.85; }
.setup-chat__send:active:not(:disabled) { transform: scale(0.92); }
.setup-chat__send:disabled { opacity: 0.3; cursor: not-allowed; }

/* Auth action chips — above input */
.m-auth-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 18px;
}
.m-auth-action {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500; font-family: inherit;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.m-auth-action:hover { background: rgba(102,126,234,0.15); border-color: rgba(102,126,234,0.3); color: #a5b4fc; }
.m-auth-action--google { display: inline-flex; align-items: center; }

/* Back button in header */
.m-auth-back {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: rgba(255,255,255,0.5); border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.m-auth-back:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
.m-auth-back .material-icons { font-size: 20px; }

/* Theme toggle in login header */
.m-auth-theme-toggle {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: rgba(255,255,255,0.4); border-radius: 8px;
  transition: background 0.2s, color 0.2s; margin-left: auto;
}
.m-auth-theme-toggle:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }

/* Mobile */
@media (max-width: 480px) {
  .setup-chat { height: 100vh; max-height: none; border-radius: 0; }
  .setup-blob { opacity: 0.3; }
}

/* ── Mobile Home Screen ──────────────────────────────────── */
.mecra-mobile-home {
  padding: 24px 16px env(safe-area-inset-bottom, 16px);
  min-height: 100%;
  display: flex; flex-direction: column;
}
.mecra-mobile-home__widgets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 8px 0 20px;
}
.mecra-mobile-home__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 12px;
  padding: 0 4px;
}
.mecra-mobile-home__tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mecra-mobile-home__icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.mecra-mobile-home__tile:active .mecra-mobile-home__icon { transform: scale(0.9); }
.mecra-mobile-home__icon .material-icons { font-size: 26px; color: #fff; }
.mecra-mobile-home__label {
  font-size: 11px; text-align: center; color: var(--q-dark, #fff);
  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}