* { box-sizing: border-box; }

:root {
  --bg: #050b1d;
  --line: rgba(112, 154, 255, 0.28);
  --text: #f5f7ff;
  --muted: #aab5d2;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(55, 91, 255, .18), transparent 35%),
    radial-gradient(circle at 20% 75%, rgba(123, 58, 255, .13), transparent 30%),
    linear-gradient(145deg, #030817 0%, #071332 52%, #05091a 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 120vw;
  height: 45vh;
  left: -10vw;
  top: 35vh;
  pointer-events: none;
  opacity: .25;
  background:
    repeating-radial-gradient(
      ellipse at 50% 50%,
      transparent 0 34px,
      rgba(55, 121, 255, .16) 35px 36px,
      transparent 37px 58px
    );
  transform: rotate(-7deg);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  min-height: 100svh;
  margin: auto;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
}

.topbar { display: flex; justify-content: space-between; align-items: center; }

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 13px; font-size: 25px; color: #d9e6ff;
  background: linear-gradient(145deg, #5da2ff, #3457db);
  box-shadow: 0 8px 30px rgba(55, 113, 255, .35);
}

.brand-name {
  font-size: clamp(24px, 7vw, 35px);
  line-height: 1; font-weight: 650; letter-spacing: -.8px;
}

.brand-name sup { font-size: .35em; vertical-align: top; margin-left: 2px; }

.brand-sub { margin-top: 5px; color: #aab3ca; font-size: 14px; letter-spacing: .3px; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(16, 29, 62, .75);
  color: #d9e3ff; font-size: 21px; cursor: pointer;
}

.intro { text-align: center; margin: clamp(40px, 9vh, 76px) 0 25px; }

.intro h1 {
  margin: 0 0 15px; font-size: clamp(23px, 6vw, 34px);
  font-weight: 400; letter-spacing: -.5px;
}

.intro h1 span { color: #e9edff; }
.intro h1 b { color: #5b9bff; font-weight: 500; }

.intro p {
  margin: 0 auto; max-width: 500px; color: var(--muted);
  font-size: 15px; line-height: 1.65;
}

.scanner-area { display: grid; place-items: center; margin: 8px 0 16px; }

.scan-button {
  width: min(62vw, 310px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid #568fff;
  background: radial-gradient(circle at 50% 40%, rgba(40, 68, 130, .55), rgba(2, 9, 27, .94) 68%);
  color: white; cursor: pointer; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  box-shadow: 0 0 16px rgba(65, 130, 255, .8), 0 0 55px rgba(83, 73, 255, .38),
              inset 0 0 35px rgba(65, 112, 255, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.scan-button:hover { transform: scale(1.025); }
.scan-button:active { transform: scale(.98); }
.scan-button:disabled { opacity: .8; cursor: wait; }

.scan-button.uploaded {
  border-color: #54d7a2;
  box-shadow: 0 0 35px rgba(54, 214, 157, .28);
}

.scan-icon { font-size: 55px; line-height: .9; color: #75aaff; margin-bottom: 18px; }

.scan-button strong { font-size: 25px; letter-spacing: 1.4px; }

.scan-button small {
  margin-top: 8px; color: #8f9fca; font-size: 12px;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.save-panel {
  border: 1px solid rgba(99, 143, 238, .35);
  border-radius: 22px; padding: 18px; margin-bottom: 12px;
  background: rgba(8, 19, 48, .86); backdrop-filter: blur(18px);
}

.save-title { font-size: 18px; font-weight: 600; }
.save-file { margin-top: 5px; color: #8f9fca; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.format-label { margin-top: 17px; color: #7f8eaf; font-size: 11px; letter-spacing: 1.4px; }

.format-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px;
}

.format-option {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid rgba(89, 127, 213, .3); border-radius: 16px;
  background: rgba(6, 15, 36, .65); cursor: pointer;
}

.format-option.selected {
  border-color: #5c8fff; box-shadow: 0 0 18px rgba(69, 120, 255, .16);
}

.format-option input { display: none; }
.format-icon { font-size: 22px; }
.format-option b { display: block; font-size: 14px; }
.format-option small { display: block; margin-top: 2px; color: #7e8eaf; font-size: 10px; }

.save-btn {
  width: 100%; margin-top: 14px; min-height: 50px; border: 0;
  border-radius: 15px; color: white; font: inherit; font-weight: 650;
  letter-spacing: .8px; cursor: pointer;
  background: linear-gradient(135deg, #4f8eff, #6448e8);
}

.save-btn:disabled { opacity: .7; cursor: wait; }

.cancel-btn {
  width: 100%; margin-top: 8px; min-height: 38px; border: 0;
  background: transparent; color: #8998b9; font: inherit; cursor: pointer;
}

.upload-status {
  min-height: 20px; text-align: center; color: #8290b1;
  font-size: 12px; opacity: 0; transition: opacity .2s ease;
}

.upload-status.visible { opacity: 1; }
.upload-status.success { color: #62dca9; }
.upload-status.error { color: #ff8995; }

.chat-card {
  border: 1px solid rgba(99, 143, 238, .35); border-radius: 25px; padding: 17px;
  background: rgba(8, 19, 48, .7); backdrop-filter: blur(18px);
  box-shadow: 0 15px 55px rgba(0,0,0,.2);
}

.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chat-title { font-size: 17px; font-weight: 550; }
.spark { color: #82adff; font-size: 21px; }

.status {
  white-space: nowrap; padding: 7px 11px; border-radius: 20px;
  color: #dbe5ff; background: rgba(40, 66, 119, .45); font-size: 12px;
}

.status i {
  display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  border-radius: 50%; background: #35d995; box-shadow: 0 0 8px #35d995;
}

.message { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 15px; }

.bot {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border-radius: 50%; background: #071735; border: 1px solid #3158a2; color: #6fa2ff;
}

.bubble {
  padding: 13px 16px; border: 1px solid rgba(82, 125, 220, .35);
  border-radius: 18px 18px 18px 5px; background: rgba(19, 37, 78, .65);
  color: #d9e1f4; font-size: 14px; line-height: 1.55;
}

.chat-input {
  display: flex; align-items: center; gap: 10px; min-height: 57px;
  padding: 6px 7px 6px 17px; border: 1px solid rgba(91, 131, 219, .35);
  border-radius: 30px; background: rgba(4, 13, 34, .65);
}

.chat-input input {
  width: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
  color: white; font: inherit; font-size: 14px;
}

.chat-input input::placeholder { color: #647291; }

.chat-input button {
  width: 43px; height: 43px; flex: 0 0 43px; border: 0; border-radius: 50%;
  background: linear-gradient(145deg, #6570ff, #5545dd); color: white;
  font-size: 26px; cursor: pointer;
}

.chat-messages { max-height: 140px; overflow-y: auto; }

.user-message, .ai-message {
  margin-top: 10px; padding: 10px 13px; border-radius: 13px;
  font-size: 13px; line-height: 1.45;
}

.user-message {
  margin-left: 25%; background: rgba(65, 105, 205, .28);
  border: 1px solid rgba(88, 132, 236, .25);
}

.ai-message { margin-right: 15%; background: rgba(36, 48, 84, .55); color: #b9c6df; }

.docs-button {
  width: 100%; min-height: 74px; margin-top: 28px; display: grid;
  grid-template-columns: 50px 1fr 40px; align-items: center;
  border: 1px solid #586eff; border-radius: 24px; background: rgba(6, 17, 42, .72);
  color: white; box-shadow: 0 0 28px rgba(84, 79, 255, .18);
  cursor: pointer; font: inherit; font-size: 17px; letter-spacing: 2px;
}

.folder {
  width: 42px; height: 42px; margin-left: 10px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(53, 95, 191, .28); color: #76a7ff; font-size: 21px;
}

.arrow { font-size: 28px; color: #c6d2f3; }

footer {
  margin-top: auto; padding-top: 20px; text-align: center; color: #5e6a86; font-size: 11px;
}

@media (min-width: 700px) {
  .app-shell { padding-top: 32px; }
  .intro { margin-top: 55px; }
}

@media (max-height: 760px) {
  .intro { margin-top: 28px; margin-bottom: 15px; }
  .scan-button { width: 220px; }
  .scanner-area { margin-bottom: 10px; }
  .docs-button { margin-top: 18px; }
}


/* =========================================================
   MyDocBox — Ask MyDocBox launcher
   ========================================================= */
.chat-launch-section {
  margin-top: 14px;
}

.chat-launch-button {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  border: 1px solid #586eff;
  border-radius: 22px;
  background: rgba(6, 17, 42, .72);
  color: white;
  box-shadow: 0 0 28px rgba(84, 79, 255, .18);
  text-decoration: none;
}

.chat-launch-icon {
  width: 38px;
  height: 38px;
  margin-left: 9px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(53, 95, 191, .28);
  color: #76a7ff;
  font-size: 20px;
}

.chat-launch-text {
  text-align: center;
  font-size: 16px;
  letter-spacing: 1.8px;
  font-weight: 600;
}

.chat-launch-arrow {
  text-align: center;
  font-size: 28px;
  color: #c6d2f3;
}