:root{
      --bg: #0b0f14;
      --panel: #0f1620;
      --panel-2: #0c121a;
      --text: #e8eef6;
      --muted: #97a6b6;
      --border: rgba(255,255,255,.08);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --maxw: 860px;
    }

    *{ box-sizing: border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 50% 0%, rgba(78,120,255,.10), transparent 55%),
                  radial-gradient(900px 700px at 0% 30%, rgba(245,80,120,.09), transparent 60%),
                  var(--bg);
      color: var(--text);
      overflow: hidden;
    }
	/* Splash overlay */
.splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background: #0b0b0f; /* match your app background */
  color: #fff;
  transition: opacity 260ms ease, visibility 260ms ease;
  opacity: 1;
  visibility: visible;
}

/* Card */
.splash__card {
  width: min(420px, calc(100vw - 48px));
  padding: 28px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  text-align: center;
  backdrop-filter: blur(10px);
}

.splash__logo {
  width: 164px;
  height: 164px;
  margin: 0 auto 14px auto;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #7aa2ff);
  opacity: 0.95;
  background-image: url('/assets/img/icons/icon_150.png');
  background-position: center center;
  background-size: cover;
}

.splash__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.splash__sub {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.85;
}

/* Loading bar */
.splash__bar {
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.splash__bar span {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: inherit;
  background: rgba(255,255,255,0.65);
  animation: splashSlide 0.9s ease-in-out infinite alternate;
}
@keyframes splashSlide {
  from { transform: translateX(-20%); }
  to   { transform: translateX(160%); }
}

/* Hide state */
.splash--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splash, .splash__bar span { transition: none; animation: none; }
}


    .app{
      height: 100%;
      height: calc(100% - 20px);
      margin-top: 10px;
      display:flex;
      flex-direction: column;
      padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom) 12px;
    }

    .wrap{
      height: 100%;
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      display:flex;
      flex-direction: column;
      gap: 10px;
    }

    header{
      flex: 0 0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 10px 12px;
      border: 1px solid var(--border);
      background: rgba(15,22,32,.72);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      box-shadow: var(--shadow);
    }

    header .title {
      display:flex;
      flex-direction:column;
      gap:2px;
      line-height: 1.1;
      line-height: 30px;
      vertical-align: middle;
    }
    header .title img {
        width: 32px;
        height: 32px;
        float: left;
    }
    header .title b {
        font-size: 14px;
        letter-spacing:.2px;
    }
    header .title span{
        font-size: 12px;
        color: var(--muted);
    }

    header .actions{
      display:flex;
      gap:8px;
      align-items:center;
    }

    .btn{
      border: 1px solid var(--border);
      background: rgba(12,18,26,.75);
      color: var(--text);
      border-radius: 12px;
      padding: 8px 10px;
      font-size: 12px;
      cursor:pointer;
      user-select:none;
    }
    .btn:active{ transform: translateY(1px); }
    .btn[disabled]{ opacity:.55; cursor:not-allowed; }

    .statusDot{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: #ffd166;
      box-shadow: 0 0 0 6px rgba(255,209,102,.12);
    }
    .statusDot.ok{ background: #2fe37a; box-shadow: 0 0 0 6px rgba(47,227,122,.12); }
    .statusDot.bad{ background: #ff4d6d; box-shadow: 0 0 0 6px rgba(255,77,109,.12); }

    /* Chat area */
    .chat{
      flex: 1 1 auto;
      min-height: 0;
      border: 1px solid var(--border);
      background: rgba(15,22,32,.55);
      backdrop-filter: blur(10px);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      display:flex;
      flex-direction: column;
    }

    .messages{
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 14px 12px 10px 12px;
      scroll-behavior: smooth;
    }

    .row{
      display:flex;
      margin: 10px 0;
      gap: 10px;
    }
    .row.user{ justify-content:flex-end; }
    .row.assistant{ justify-content:flex-start; }

    .bubble{
      max-width: 86%;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: rgba(12,18,26,.72);
      white-space: pre-wrap;
      word-wrap: break-word;
      line-height: 1.35;
      font-size: 14px;
    }

    .row.user .bubble{
      background: linear-gradient(180deg, rgba(78,120,255,.30), rgba(78,120,255,.14));
      border-color: rgba(78,120,255,.30);
      border-top-right-radius: 8px;
    }

    .row.assistant .bubble{
      background: rgba(12,18,26,.72);
      border-top-left-radius: 8px;
    }

    .meta{
      margin-top: 6px;
      font-size: 11px;
      color: var(--muted);
      display:flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .row.assistant .meta{ justify-content:flex-start; }

    /* Composer */
    .composer{
      flex: 0 0 auto;
      padding: 10px;
      border-top: 1px solid var(--border);
      background: rgba(12,18,26,.70);
      backdrop-filter: blur(10px);
    }

    .composerInner{
      display:flex;
      gap: 8px;
      align-items:flex-end;
    }

    textarea{
      flex: 1 1 auto;
      resize: none;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.18);
      color: var(--text);
      border-radius: 14px;
      padding: 10px 12px;
      min-height: 44px;
      max-height: 140px;
      outline: none;
      font-size: 14px;
      line-height: 1.25;
    }
    textarea::placeholder{ color: rgba(151,166,182,.7); }

    .send{
      flex: 0 0 auto;
      border-radius: 14px;
      padding: 10px 14px;
      font-weight: 600;
    }

    .hint{
      margin-top: 8px;
      font-size: 11px;
      color: var(--muted);
      display:flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    /* bubble entrance */
    @keyframes popIn {
    from { opacity: 0; transform: translateY(6px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .row { animation: popIn 160ms ease-out; }

    /* typing indicator (three dots) */
    .typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    }
    .typing .dot{
    width: 6px; height: 6px;
    border-radius: 999px;
    background: rgba(232,238,246,.85);
    opacity: .35;
    animation: typingBounce 900ms infinite ease-in-out;
    }
    .typing .dot:nth-child(2){ animation-delay: 150ms; }
    .typing .dot:nth-child(3){ animation-delay: 300ms; }

    @keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .35; }
    40% { transform: translateY(-4px); opacity: .9; }
    }

    /* send button micro-interaction */
    .send:active { transform: translateY(1px) scale(.98); }


    /* Mobile tweaks */
    @media (max-width: 520px){
      header .title b{ font-size: 13px; }
      .bubble{ max-width: 92%; }
      .messages{ padding: 12px 10px 10px 10px; }
    }