```css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: #f5f7fb;
  background: #08090d;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  min-height: 100vh;

  background:
    radial-gradient(
      900px 500px at 50% -150px,
      #1c2235 0%,
      #0c0f17 45%,
      #08090d 100%
    );

  color: #f5f7fb;
}

button,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.hidden {
  display: none !important;
}


/* =========================================
   TOP BAR
========================================= */

.topbar {
  position: relative;
  z-index: 10;

  height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 26px;

  border-bottom: 1px solid #202532;

  background: rgba(8, 9, 13, 0.82);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

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

.brand-icon {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #353b4b;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dfe3eb
    );

  color: #090b10;

  font-size: 18px;
  font-weight: 800;

  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.2);
}

.brand-info h1 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.2px;
}

.brand-info span {
  display: block;

  margin-top: 2px;

  color: #7f8799;

  font-size: 11px;
}

.model-status {
  display: flex;
  align-items: center;
  gap: 8px;

  color: #8d95a7;

  font-size: 12px;
}

.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #747b8b;

  box-shadow:
    0 0 0 3px rgba(116, 123, 139, 0.08);
}


/* =========================================
   LOADING SCREEN
========================================= */

.loading-panel {
  min-height: calc(100vh - 68px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px 20px;
}

.loading-card {
  width: min(470px, 100%);

  padding: 42px 38px;

  border: 1px solid #272d3b;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(21, 25, 36, 0.96),
      rgba(12, 14, 20, 0.96)
    );

  text-align: center;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.35);
}

.loading-logo {
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 17px;

  border: 1px solid #343b4b;

  border-radius: 17px;

  background: #151923;

  color: #ffffff;

  font-size: 25px;

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.25);
}

.loading-badge,
.error-badge {
  display: inline-flex;
  align-items: center;

  padding: 5px 9px;

  border: 1px solid #2d3443;

  border-radius: 7px;

  background: #11151e;

  color: #8992a5;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.9px;
}

.loading-card h2 {
  margin-top: 15px;

  font-size: 23px;
  font-weight: 650;

  letter-spacing: -0.5px;
}

.loading-card > p {
  margin-top: 8px;
  margin-bottom: 27px;

  color: #858d9f;

  font-size: 13px;
}

.progress-container {
  width: 100%;
  height: 7px;

  overflow: hidden;

  border-radius: 10px;

  background: #252b38;
}

.progress-bar {
  width: 0%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #8e97aa,
      #ffffff
    );

  transition: width 0.25s ease;
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: 9px;

  color: #737b8e;

  font-size: 11px;
}

#progressPercent {
  color: #d9dde6;

  font-weight: 600;
}

#progressFile {
  max-width: 70%;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  text-align: right;
}

.loading-note {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 28px;

  color: #686f80;

  font-size: 11px;

  line-height: 1.5;
}


/* =========================================
   WEBGPU ERROR
========================================= */

.message-panel {
  min-height: calc(100vh - 68px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;
}

.error-card {
  width: min(470px, 100%);

  padding: 42px 35px;

  border: 1px solid #3b3034;

  border-radius: 22px;

  background: #111218;

  text-align: center;

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.3);
}

.error-icon {
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 16px;

  border: 1px solid #46383d;

  border-radius: 16px;

  background: #1a1518;

  color: #e2a1a8;

  font-size: 22px;
  font-weight: 700;
}

.error-card h2 {
  margin-top: 15px;

  font-size: 22px;
}

.error-card p {
  margin-top: 10px;

  color: #8e95a5;

  line-height: 1.65;

  font-size: 13px;
}


/* =========================================
   CHAT CONTAINER
========================================= */

.chat-container {
  height: calc(100vh - 68px);

  display: flex;
  flex-direction: column;

  position: relative;
}


/* =========================================
   CHAT HEADER
========================================= */

.chat-header {
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 26px;

  border-bottom: 1px solid #1b202b;

  background: rgba(8, 9, 13, 0.52);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chat-title {
  font-size: 13px;

  font-weight: 600;

  color: #dce0e9;
}

.chat-subtitle {
  margin-top: 2px;

  color: #6f7789;

  font-size: 10px;
}

.local-badge {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 5px 9px;

  border: 1px solid #252c38;

  border-radius: 7px;

  color: #7f889b;

  font-size: 10px;
}

.local-badge span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #68c58c;

  box-shadow:
    0 0 0 3px rgba(104, 197, 140, 0.08);
}


/* =========================================
   MESSAGES AREA
========================================= */

.messages {
  flex: 1;

  width: min(900px, 100%);

  margin: 0 auto;

  padding: 40px 22px 155px;

  overflow-y: auto;

  scroll-behavior: smooth;
}

.messages::-webkit-scrollbar {
  width: 7px;
}

.messages::-webkit-scrollbar-track {
  background: transparent;
}

.messages::-webkit-scrollbar-thumb {
  border-radius: 20px;

  background: #292e3a;
}


/* =========================================
   WELCOME
========================================= */

.welcome {
  max-width: 650px;

  margin: 90px auto 0;

  text-align: center;
}

.welcome-logo {
  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 21px;

  border: 1px solid #343a49;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #1c2130,
      #11141d
    );

  color: #ffffff;

  font-size: 27px;

  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.22);
}

.welcome h2 {
  font-size: 29px;

  font-weight: 650;

  letter-spacing: -0.8px;
}

.welcome p {
  max-width: 530px;

  margin: 12px auto 0;

  color: #7f8799;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================
   SUGGESTIONS
========================================= */

.suggestions {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 30px;
}

.suggestion {
  min-height: 82px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  padding: 14px;

  border: 1px solid #252b38;

  border-radius: 13px;

  background: #10131b;

  color: #c4c9d4;

  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.suggestion:hover {
  background: #161a24;

  border-color: #3a4151;

  transform: translateY(-2px);
}

.suggestion-icon {
  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #303747;

  border-radius: 7px;

  color: #aeb6c6;

  font-size: 11px;
}

.suggestion > span:last-child {
  font-size: 11px;

  line-height: 1.4;
}


/* =========================================
   CHAT MESSAGES
========================================= */

.message {
  display: flex;

  gap: 11px;

  margin-bottom: 26px;

  animation:
    messageIn 0.22s ease;
}

@keyframes messageIn {

  from {
    opacity: 0;

    transform: translateY(5px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }

}

.message.user {
  justify-content: flex-end;
}

.message-bubble {
  max-width: 76%;

  padding: 12px 15px;

  border-radius: 14px;

  font-size: 13px;

  line-height: 1.65;

  white-space: pre-wrap;

  word-break: break-word;
}

.user .message-bubble {
  background: #f0f2f5;

  color: #111318;

  border-bottom-right-radius: 4px;

  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.14);
}

.assistant .message-bubble {
  background: #151923;

  border: 1px solid #252b38;

  color: #e1e5ed;

  border-bottom-left-radius: 4px;
}


/* =========================================
   INPUT AREA
========================================= */

.input-area {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 5;

  padding:
    22px
    20px
    18px;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 9, 13, 0),
      rgba(8, 9, 13, 0.94) 30%,
      #08090d 100%
    );

  pointer-events: none;
}

.input-wrapper {
  width: min(850px, 100%);

  margin: 0 auto;

  display: flex;
  align-items: flex-end;

  gap: 9px;

  padding: 7px;

  border: 1px solid #303746;

  border-radius: 16px;

  background:
    rgba(17, 20, 28, 0.96);

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.42);

  pointer-events: auto;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.input-wrapper:focus-within {
  border-color: #464e60;

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(255, 255, 255, 0.025);
}

textarea {
  flex: 1;

  width: 100%;

  min-height: 42px;

  max-height: 150px;

  resize: none;

  padding:
    10px
    10px
    9px;

  border: 0;

  outline: none;

  background: transparent;

  color: #f5f7fb;

  font-size: 13px;

  line-height: 1.55;

  overflow-y: auto;
}

textarea::placeholder {
  color: #697183;
}

textarea:disabled {
  opacity: 0.55;

  cursor: not-allowed;
}

.send-button {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dfe3ea
    );

  color: #0a0c11;

  cursor: pointer;

  font-size: 20px;
  font-weight: 700;

  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.send-button:not(:disabled):hover {
  transform: translateY(-1px);
}

.send-button:not(:disabled):active {
  transform: translateY(1px);
}

.send-button:disabled {
  opacity: 0.28;

  cursor: not-allowed;
}

.input-footer {
  width: min(850px, 100%);

  margin: 8px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  color: #596173;

  font-size: 9px;

  pointer-events: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 760px) {

  .suggestions {
    grid-template-columns: 1fr;
  }

  .suggestion {
    min-height: auto;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;
  }

  .suggestion > span:last-child {
    font-size: 12px;
  }

  .welcome {
    margin-top: 55px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .topbar {
    height: 62px;

    padding: 0 14px;
  }

  .brand-icon {
    width: 35px;
    height: 35px;

    border-radius: 10px;
  }

  .brand-info h1 {
    font-size: 14px;
  }

  .brand-info span {
    font-size: 10px;
  }

  .model-status {
    font-size: 10px;
  }

  .chat-container {
    height: calc(100vh - 62px);
  }

  .chat-header {
    height: 53px;

    padding: 0 15px;
  }

  .messages {
    padding:
      25px
      12px
      145px;
  }

  .welcome {
    margin-top: 42px;
  }

  .welcome-logo {
    width: 54px;
    height: 54px;

    margin-bottom: 17px;
  }

  .welcome h2 {
    font-size: 25px;
  }

  .welcome p {
    font-size: 12px;
  }

  .suggestions {
    margin-top: 23px;
  }

  .message-bubble {
    max-width: 88%;

    font-size: 12px;
  }

  .input-area {
    padding:
      16px
      10px
      13px;
  }

  .input-wrapper {
    border-radius: 14px;
  }

  .input-footer {
    font-size: 8px;
  }

  .loading-card {
    padding:
      34px
      22px;
  }

  .error-card {
    padding:
      35px
      23px;
  }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 380px) {

  .model-status {
    display: none;
  }

  .welcome h2 {
    font-size: 23px;
  }

  .input-footer {
    display: none;
  }

}
```