:root {
  --q-primary: #0f766e;
  --q-primary-dark: #0b5a54;
  --q-accent: #14b8a6;
  --q-vh: 100vh;
  --q-bg: #f4f8fb;
  --q-bg-soft: #eef5f8;
  --q-card: #ffffff;
  --q-text: #0f172a;
  --q-muted: #4b6070;
  --q-border: #d9e6ec;
  --q-border-strong: #c6d8e1;
  --q-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  --q-ring: rgba(20, 184, 166, 0.2);
  --q-danger-soft: #fdecef;
  --q-success-soft: #e9f9f4;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body.q-page {
  font-family: "Manrope", "Segoe UI", "Noto Sans", Arial, sans-serif;
  color: var(--q-text);
  background:
    radial-gradient(920px 380px at 0% -10%, rgba(20, 184, 166, 0.14), transparent 58%),
    radial-gradient(920px 360px at 100% 0%, rgba(15, 118, 110, 0.12), transparent 58%),
    linear-gradient(160deg, #f8fbfd, #edf5f8);
  overflow: hidden;
}

.q-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

a {
  color: var(--q-primary);
}

.q-app-shell {
  position: relative;
  z-index: 1;
  width: min(1600px, 98vw);
  margin: 0 auto;
  height: var(--q-vh, 100vh);
  padding: 14px;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 14px;
}

.q-sidebar,
.q-sidebar-brand,
.q-sidebar-card,
.q-history-list,
.q-access-card,
.q-chat-card,
.q-quick-card {
  border-radius: 18px;
  border: 1px solid var(--q-border);
  background: var(--q-card);
  box-shadow: var(--q-shadow);
}

.q-sidebar {
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.q-sidebar-brand {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.q-brand-logo {
  width: 84px;
  height: auto;
  flex-shrink: 0;
}

.q-brand-tag {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--q-primary);
  text-transform: uppercase;
}

.q-sidebar-brand h1 {
  margin: 0;
  font-size: 1.08rem;
}

.q-brand-sub {
  margin: 4px 0 0;
  color: var(--q-muted);
  font-size: 0.8rem;
}

.q-sidebar-card {
  padding: 12px;
}

.q-card-title {
  margin: 0 0 6px;
  color: var(--q-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#qUserName {
  display: block;
  font-size: 1rem;
}

#qUserMeta {
  display: block;
  margin-top: 4px;
  color: var(--q-muted);
  font-size: 0.8rem;
}

.q-scope-pill {
  margin-top: 8px;
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid #a9e6d9;
  background: #ecfaf6;
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 10px;
}

.q-project-select {
  display: grid;
  gap: 6px;
}

.q-project-select span {
  color: var(--q-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#qProjectSelect {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--q-border-strong);
  background: #f8fbfd;
  color: var(--q-text);
  font: inherit;
  padding: 10px;
}

.q-history-list {
  margin: 0;
  padding: 12px;
}

.q-history-list h2 {
  margin: 0 0 8px;
  color: var(--q-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.q-history-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  max-height: 250px;
  overflow: auto;
}

.q-history-empty {
  border: 1px dashed var(--q-border-strong);
  border-radius: 10px;
  color: var(--q-muted);
  font-size: 0.8rem;
  padding: 8px;
}

.q-history-item {
  width: 100%;
  border: 1px solid var(--q-border);
  border-radius: 10px;
  background: #f8fbfd;
  color: var(--q-text);
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 8px;
  cursor: pointer;
}

.q-history-item:hover {
  border-color: #98e6d8;
  background: #edf9f6;
}

.q-sidebar-actions {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.q-btn {
  border-radius: 11px;
  border: 1px solid var(--q-border-strong);
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 9px 12px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.q-btn:hover {
  border-color: #98e6d8;
  background: #f1fbf8;
}

.q-btn-primary {
  border: 0;
  background: linear-gradient(140deg, var(--q-primary), var(--q-primary-dark));
  color: #f8fffd;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.2);
  padding-inline: 18px;
}

.q-btn-primary:hover {
  background: linear-gradient(140deg, #0e6b64, #0a4f4a);
}

.q-btn-ghost {
  background: #ffffff;
}

.q-app-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.q-access-card {
  padding: 16px;
}

.q-access-card h3 {
  margin: 0 0 8px;
  color: #be123c;
}

.q-access-card p {
  margin: 0 0 12px;
  color: #9f1239;
}

.q-main-grid {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  overflow: hidden;
}

.q-chat-card {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
}

.q-chat-head h3 {
  margin: 0;
  font-size: 1.1rem;
}

.q-chat-head-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.q-chat-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.q-chat-head p {
  margin: 4px 0 0;
  color: var(--q-muted);
  font-size: 0.84rem;
}

.q-chat-stream-label {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #abebe0;
  background: #effbf8;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
}

.q-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid #abebe0;
  background: #effbf8;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  white-space: nowrap;
}

.q-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--q-accent);
  box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.45);
  animation: q-pulse 1.8s infinite;
}

@keyframes q-pulse {
  70% {
    box-shadow: 0 0 0 8px rgba(20, 184, 166, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0);
  }
}

.q-chat-messages {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-anchor: none;
  border-radius: 12px;
  border: 1px solid #d9e6ec;
  background: var(--q-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: #c4d3dc #edf3f7;
}

.q-chat-messages::-webkit-scrollbar {
  width: 10px;
}

.q-chat-messages::-webkit-scrollbar-track {
  background: #edf3f7;
  border-radius: 999px;
}

.q-chat-messages::-webkit-scrollbar-thumb {
  background: #c4d3dc;
  border-radius: 999px;
  border: 2px solid #edf3f7;
}

.q-chat-messages:empty::before {
  content: "Mesajlar burada görünecek.";
  margin: auto 0;
  text-align: center;
  border: 1px dashed #c4d8e2;
  border-radius: 12px;
  color: var(--q-muted);
  font-size: 0.82rem;
  padding: 14px;
  background: #ffffff;
}

.q-form-container {
  border-radius: 12px;
  border: 1px solid #d9e6ec;
  background: #ffffff;
  padding: 10px;
}

.q-chat-form textarea {
  width: 100%;
  resize: none;
  min-height: 48px;
  max-height: 120px;
  border-radius: 12px;
  border: 1px solid var(--q-border-strong);
  background: #fdfefe;
  color: var(--q-text);
  font: inherit;
  line-height: 1.45;
  padding: 12px;
  overflow-y: hidden;
}

.q-chat-form textarea:focus {
  outline: none;
  border-color: var(--q-accent);
  box-shadow: 0 0 0 3px var(--q-ring);
}

.q-form-bottom {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.q-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.q-status-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}

.q-status-wrap small {
  color: var(--q-muted);
  font-size: 0.73rem;
}

.q-status-line {
  margin: 0;
  font-size: 0.84rem;
  color: var(--q-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.q-status-line.is-typing {
  color: #0f766e;
  font-weight: 700;
}

.q-status-line.is-typing::after {
  content: "";
  display: inline-block;
  width: 14px;
  margin-left: 5px;
  animation: q-dots 1.2s steps(3, end) infinite;
}

@keyframes q-dots {
  0% { content: ""; }
  33% { content: "."; }
  66% { content: ".."; }
  100% { content: "..."; }
}

.q-status-line.is-error {
  color: #b91c1c;
}

.q-status-line.is-ok {
  color: #0f766e;
}

.q-voice-toggle-btn,
.q-voice-input-btn,
.q-ambient-btn,
.q-tts-mode-btn {
  white-space: nowrap;
}

.q-voice-toggle-btn {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 0.76rem;
}

.q-voice-input-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.q-voice-input-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.q-voice-input-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

.q-voice-toggle-btn.is-active {
  border-color: #80dcca;
  background: #e8f8f4;
  color: #0f766e;
}

.q-voice-toggle-btn.is-unavailable {
  opacity: 0.7;
}

.q-voice-toggle-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.q-voice-input-btn.is-listening {
  border-color: #14b8a6;
  background: #e8f8f4;
  color: #0f766e;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

.q-voice-input-btn.is-active {
  border-color: #80dcca;
  background: #e8f8f4;
  color: #0f766e;
}

.q-voice-input-btn.is-unavailable {
  color: #94a3b8;
}

.q-voice-input-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.q-ambient-btn.is-active {
  border-color: #80dcca;
  background: #e8f8f4;
  color: #0f766e;
}

.q-ambient-btn.is-listening {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

.q-tts-mode-btn.is-coqui {
  border-color: #80dcca;
  background: #e8f8f4;
  color: #0f766e;
}

.q-tts-mode-btn.is-strict {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.q-quick-card {
  min-height: 0;
  padding: 12px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  overflow: hidden;
}

.q-quick-card h3 {
  margin: 0;
  font-size: 1rem;
}

.q-quick-sub {
  margin: 0;
  color: var(--q-muted);
  font-size: 0.79rem;
}

.q-quick-grid {
  min-height: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  overflow: auto;
  padding-right: 2px;
}

.q-quick-item {
  border: 1px solid var(--q-border);
  border-radius: 12px;
  background: #f8fbfd;
  color: var(--q-text);
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  font: inherit;
  transition: all 0.16s ease;
}

.q-quick-item:hover {
  border-color: #98e6d8;
  background: #edf9f6;
  transform: translateY(-1px);
}

.q-quick-code {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9f8f4;
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.q-quick-item strong {
  display: block;
  font-size: 0.84rem;
}

.q-quick-item small {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--q-muted);
  line-height: 1.35;
}

.q-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  animation: q-fade-in 0.2s ease;
}

@keyframes q-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.q-row.is-user {
  justify-content: flex-end;
}

.q-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.q-avatar-assistant {
  background: linear-gradient(150deg, #0f766e, #0d5a54);
  border: 1px solid #0a4a45;
}

.q-avatar-user {
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #f8fafc;
}

.q-bubble {
  max-width: min(940px, 86%);
  border-radius: 14px;
  padding: 10px 12px;
  line-height: 1.46;
  white-space: pre-line;
  word-break: break-word;
  font-size: 0.91rem;
}

.q-row.is-user .q-bubble {
  border-bottom-right-radius: 4px;
  background: linear-gradient(145deg, #0f6158, #0f766e);
  color: #f4fffd;
}

.q-row.is-user .q-bubble a {
  color: #d6fff4;
}

.q-row.is-assistant .q-bubble {
  border-bottom-left-radius: 4px;
  border: 1px solid #c8ddd7;
  background: #f2f9f6;
  color: #0f172a;
}

.q-row.is-assistant .q-bubble a {
  color: #0b5f58;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.q-row.is-assistant .q-bubble a:hover {
  color: #084b45;
}

.q-assistant-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #9edfcf;
  background: #ebf9f5;
  color: #0b5f58;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.q-assistant-link-btn:hover {
  border-color: #7fd6c1;
  background: #e1f6ef;
}

.q-assistant-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f5f58;
}

.q-assistant-points,
.q-assistant-notes {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.q-assistant-notes {
  margin-top: 8px;
  color: #475569;
}

.q-skeleton-bubble {
  min-width: min(420px, 72vw);
}

.q-skeleton-line {
  display: block;
  height: 10px;
  border-radius: 999px;
  margin-bottom: 7px;
  background: linear-gradient(90deg, #d8e6ec 0%, #eef5f8 45%, #d8e6ec 100%);
  background-size: 220% 100%;
  animation: q-shimmer 1.3s infinite;
}

.q-skeleton-line.is-lg {
  width: 84%;
}

.q-skeleton-line.is-sm {
  width: 52%;
  margin-bottom: 0;
}

@keyframes q-shimmer {
  to {
    background-position: -220% 0;
  }
}

.q-feedback {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.q-feedback-btn {
  border: 1px solid #a9e6d9;
  border-radius: 999px;
  background: #ebf9f5;
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.q-feedback-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

.q-feedback-status {
  font-size: 0.74rem;
  color: var(--q-muted);
}

.q-feedback.is-done .q-feedback-btn {
  display: none;
}

.q-pending {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.q-pending-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.q-pending-btn.is-confirm {
  color: #0f5f58;
  border-color: #9ee2d3;
  background: var(--q-success-soft);
}

.q-pending-btn.is-cancel {
  color: #9f1239;
  border-color: #f7bac8;
  background: var(--q-danger-soft);
}

.q-pending.is-done .q-pending-btn {
  display: none;
}

.q-pending-status {
  font-size: 0.74rem;
  color: var(--q-muted);
}

.q-readmore {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.q-readmore-btn {
  justify-self: start;
  border: 1px solid #a9e6d9;
  border-radius: 999px;
  background: #ebf9f5;
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.q-readmore-content {
  font-size: 0.84rem;
  color: #475569;
  border: 1px dashed #c5d7e2;
  border-radius: 10px;
  padding: 8px;
  max-height: 220px;
  overflow: auto;
  background: #ffffff;
}

.q-assistant-voice {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
}

.q-assistant-voice-btn {
  border: 1px solid #c7d8e1;
  border-radius: 999px;
  background: #f3f8fb;
  color: #0f4b60;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.q-assistant-voice-btn:hover {
  border-color: #94d4c7;
  background: #e8f8f4;
  color: #0f766e;
}

.q-assistant-voice-btn.is-speaking {
  border-color: #14b8a6;
  background: #e8f8f4;
  color: #0f766e;
}

.q-assistant-voice-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.q-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 1220px) {
  .q-main-grid {
    grid-template-columns: 1fr;
  }

  .q-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body.q-page:not(.q-chat-first) {
    overflow: auto;
  }

  .q-app-shell:not(.q-chatfirst-shell) {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    width: min(920px, 100vw);
    padding: 10px;
  }

  .q-sidebar {
    order: 2;
  }

  .q-app-main {
    order: 1;
    min-height: 76vh;
    overflow: visible;
  }

  .q-main-grid {
    overflow: visible;
  }

  .q-history-items {
    max-height: 180px;
  }
}

@media (max-width: 760px) {
  .q-chat-head-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .q-chat-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .q-quick-grid {
    grid-template-columns: 1fr;
  }

  .q-bubble {
    max-width: 92%;
  }

  .q-chat-form textarea {
    min-height: 48px;
    max-height: 120px;
  }

  .q-form-bottom {
    align-items: flex-end;
  }
}

body.q-page.q-chat-first {
  --q-flow-line: rgba(148, 191, 214, 0.34);
  --q-flow-line-strong: rgba(120, 203, 216, 0.52);
  --q-flow-surface: rgba(9, 30, 56, 0.28);
  --q-flow-surface-soft: rgba(9, 30, 56, 0.18);
  --q-flow-user: rgba(20, 184, 166, 0.14);
  --q-flow-assistant: rgba(110, 198, 255, 0.12);
  --q-flow-text: #e8effa;
  --q-flow-sub: #d6e6f8;
  --q-flow-heading: #f4f8ff;
  --q-flow-kicker: #8df5e6;
  --q-flow-link: #9bf9eb;
  --q-flow-empty-bg: rgba(8, 29, 54, 0.28);
  --q-flow-scroll-track: rgba(8, 29, 54, 0.36);
  --q-flow-scroll-thumb: rgba(147, 191, 215, 0.58);
  --q-flow-status-ok: #8df5e6;
  --q-flow-ghost-border: rgba(148, 191, 214, 0.44);
  --q-flow-ghost-bg: rgba(9, 30, 56, 0.34);
  --q-flow-ghost-text: #e6f6ff;
  --q-flow-ghost-hover-border: rgba(120, 203, 216, 0.72);
  --q-flow-ghost-hover-bg: rgba(20, 184, 166, 0.18);
  --q-flow-badge-border: rgba(20, 184, 166, 0.45);
  --q-flow-badge-bg: rgba(20, 184, 166, 0.14);
  --q-flow-badge-text: #dcfff6;
  --q-flow-auth-highlight-border: rgba(20, 184, 166, 0.9);
  --q-flow-auth-highlight-bg: rgba(20, 184, 166, 0.18);
  --q-flow-auth-highlight-text: #e7fff8;
  --q-flow-auth-highlight-shadow: rgba(20, 184, 166, 0.16);
  --q-flow-avatar-bg: var(--q-flow-surface-soft);
  --q-flow-avatar-border: var(--q-flow-line);
  --q-flow-avatar-text: var(--q-flow-text);
  --q-flow-avatar-assistant-border: rgba(120, 203, 216, 0.56);
  --q-flow-avatar-assistant-text: #b2fff2;
  --q-flow-avatar-user-border: rgba(110, 198, 255, 0.5);
  --q-flow-avatar-user-text: #d6e6f8;
  background:
    radial-gradient(980px 420px at 0% -10%, rgba(11, 26, 58, 0.95), transparent 62%),
    radial-gradient(980px 420px at 100% 0%, rgba(15, 118, 110, 0.3), transparent 62%),
    linear-gradient(145deg, #081a3a, #0b2c4f 50%, #0f766e);
  color: var(--q-flow-text);
  overflow: auto;
}

body.q-page.q-chat-first[data-theme="light"] {
  --q-flow-line: #d9e6ec;
  --q-flow-line-strong: #98e6d8;
  --q-flow-surface: #f4f8fb;
  --q-flow-surface-soft: rgba(255, 255, 255, 0.9);
  --q-flow-user: rgba(15, 118, 110, 0.12);
  --q-flow-assistant: #f2f9f6;
  --q-flow-text: #0f172a;
  --q-flow-sub: #4b6070;
  --q-flow-heading: #0f172a;
  --q-flow-kicker: #0f766e;
  --q-flow-link: #0b5f58;
  --q-flow-empty-bg: #ffffff;
  --q-flow-scroll-track: #edf3f7;
  --q-flow-scroll-thumb: #c4d3dc;
  --q-flow-status-ok: #0f766e;
  --q-flow-ghost-border: #c6d8e1;
  --q-flow-ghost-bg: #ffffff;
  --q-flow-ghost-text: #0f172a;
  --q-flow-ghost-hover-border: #98e6d8;
  --q-flow-ghost-hover-bg: #f1fbf8;
  --q-flow-badge-border: rgba(20, 184, 166, 0.45);
  --q-flow-badge-bg: rgba(20, 184, 166, 0.12);
  --q-flow-badge-text: #0f766e;
  --q-flow-auth-highlight-border: rgba(20, 184, 166, 0.9);
  --q-flow-auth-highlight-bg: rgba(20, 184, 166, 0.18);
  --q-flow-auth-highlight-text: #0f5f58;
  --q-flow-auth-highlight-shadow: rgba(20, 184, 166, 0.14);
  --q-flow-avatar-bg: #ffffff;
  --q-flow-avatar-border: #d9e6ec;
  --q-flow-avatar-text: #0f172a;
  --q-flow-avatar-assistant-border: #9edfcf;
  --q-flow-avatar-assistant-text: #0f766e;
  --q-flow-avatar-user-border: #c6d8e1;
  --q-flow-avatar-user-text: #0f172a;
  background:
    radial-gradient(980px 420px at 0% -10%, rgba(11, 26, 58, 0.14), transparent 62%),
    radial-gradient(980px 420px at 100% 0%, rgba(15, 118, 110, 0.12), transparent 62%),
    linear-gradient(145deg, #f8fbfd, #edf5f8 50%, #e7f8f5);
  color: var(--q-flow-text);
}

.q-chatfirst-shell {
  width: min(1180px, 96vw);
  grid-template-columns: 1fr;
  height: var(--q-vh, 100vh);
  padding: 14px;
}

body.q-page.q-chat-first.q-native-runtime.q-keyboard-active .q-chatfirst-shell {
  height: auto;
  min-height: var(--q-vh, 100vh);
  max-height: none;
  overflow: visible;
}

body.q-page.q-chat-first.q-native-runtime.q-keyboard-active .q-chatfirst-main {
  height: auto;
  min-height: 0;
  overflow: visible;
}

body.q-page.q-chat-first.q-native-runtime.q-keyboard-active .q-chatfirst-card {
  height: auto;
  min-height: 0;
  overflow: visible;
}

body.q-page.q-chat-first.q-native-runtime.q-keyboard-active .q-chatfirst-card .q-chat-messages {
  max-height: calc(var(--q-vh, 100vh) - 240px);
}

.q-chatfirst-main {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
}

.q-chatfirst-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid var(--q-flow-line);
  background: var(--q-flow-surface-soft);
  backdrop-filter: blur(6px);
  padding: 12px 14px;
}

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

.q-chatfirst-brand h1 {
  margin: 0;
  color: var(--q-flow-heading);
  font-size: 1.1rem;
}

.q-chatfirst-top .q-brand-tag {
  color: var(--q-flow-kicker);
}

.q-chatfirst-top .q-brand-sub {
  color: var(--q-flow-sub);
}

.q-chatfirst-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.q-mode-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--q-flow-badge-border);
  background: var(--q-flow-badge-bg);
  color: var(--q-flow-badge-text);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 11px;
}

.q-chatfirst-top .q-btn-ghost {
  border-color: var(--q-flow-ghost-border);
  background: var(--q-flow-ghost-bg);
  color: var(--q-flow-ghost-text);
}

.q-chatfirst-top .q-btn-ghost:hover {
  border-color: var(--q-flow-ghost-hover-border);
  background: var(--q-flow-ghost-hover-bg);
}

.q-theme-toggle {
  min-width: 104px;
  padding-inline: 12px;
}

.q-drive-toggle {
  min-width: 106px;
  padding-inline: 12px;
}

.q-drive-toggle.is-active {
  border-color: var(--q-flow-line-strong);
  background: var(--q-flow-user);
  color: var(--q-flow-link);
}

.q-drive-toggle.is-unavailable {
  opacity: 0.7;
}

.q-drive-toggle[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

#qAuthAction.is-auth-highlight {
  border-color: var(--q-flow-auth-highlight-border);
  background: var(--q-flow-auth-highlight-bg);
  color: var(--q-flow-auth-highlight-text);
  box-shadow: 0 0 0 3px var(--q-flow-auth-highlight-shadow);
}

.q-chatfirst-card {
  border: 1px solid var(--q-flow-line);
  background: var(--q-flow-surface-soft);
  box-shadow: none;
  color: var(--q-flow-text);
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.q-chatfirst-card .q-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
}

.q-chatfirst-card .q-form-container {
  flex: 0 0 auto;
  margin-top: auto;
}

.q-chatfirst-quick {
  border: 1px solid var(--q-flow-line);
  background: var(--q-flow-surface-soft);
  max-height: 180px;
  overflow: auto;
}

.q-chatfirst-card .q-chat-messages {
  border: 1px solid var(--q-flow-line);
  background: var(--q-flow-surface);
  box-shadow: none;
  scrollbar-color: var(--q-flow-scroll-thumb) var(--q-flow-scroll-track);
}

.q-chatfirst-card .q-chat-messages::-webkit-scrollbar-track {
  background: var(--q-flow-scroll-track);
}

.q-chatfirst-card .q-chat-messages::-webkit-scrollbar-thumb {
  background: var(--q-flow-scroll-thumb);
  border: 2px solid var(--q-flow-scroll-track);
}

.q-chatfirst-card .q-chat-messages:empty::before {
  border: 1px dashed var(--q-flow-line);
  background: var(--q-flow-empty-bg);
  color: var(--q-flow-sub);
}

.q-chatfirst-card .q-form-container {
  border: 1px solid var(--q-flow-line);
  background: var(--q-flow-surface);
}

.q-chatfirst-card .q-chat-form textarea {
  border: 1px solid var(--q-flow-line);
  background: var(--q-flow-surface-soft);
  color: var(--q-flow-text);
}

.q-chatfirst-card .q-chat-form textarea::placeholder {
  color: var(--q-flow-sub);
}

.q-chatfirst-card .q-chat-form textarea:focus {
  border-color: var(--q-flow-line-strong);
  box-shadow: 0 0 0 3px rgba(110, 198, 255, 0.14);
}

.q-chatfirst-card .q-status-wrap small,
.q-chatfirst-card .q-status-line {
  color: var(--q-flow-sub);
}

.q-chatfirst-card .q-status-line.is-typing,
.q-chatfirst-card .q-status-line.is-ok {
  color: var(--q-flow-status-ok);
}

.q-chatfirst-card .q-avatar {
  border: 1px solid var(--q-flow-avatar-border);
  background: var(--q-flow-avatar-bg);
  color: var(--q-flow-avatar-text);
}

.q-chatfirst-card .q-avatar-assistant {
  border-color: var(--q-flow-avatar-assistant-border);
  color: var(--q-flow-avatar-assistant-text);
}

.q-chatfirst-card .q-avatar-user {
  border-color: var(--q-flow-avatar-user-border);
  color: var(--q-flow-avatar-user-text);
}

.q-chatfirst-card .q-row.is-user .q-bubble,
.q-chatfirst-card .q-row.is-assistant .q-bubble {
  border: 1px solid var(--q-flow-line);
  color: var(--q-flow-text);
}

.q-chatfirst-card .q-row.is-user .q-bubble {
  background: var(--q-flow-user);
  border-color: rgba(120, 203, 216, 0.62);
}

.q-chatfirst-card .q-row.is-assistant .q-bubble {
  background: var(--q-flow-assistant);
  border-color: rgba(110, 198, 255, 0.52);
}

.q-chatfirst-card .q-row.is-user .q-bubble a,
.q-chatfirst-card .q-row.is-assistant .q-bubble a,
.q-chatfirst-card .q-row.is-assistant .q-bubble a:hover {
  color: var(--q-flow-link);
}

.q-chatfirst-card .q-assistant-link-btn {
  border: 1px solid var(--q-flow-line-strong);
  background: var(--q-flow-user);
  color: var(--q-flow-link);
}

.q-chatfirst-card .q-assistant-link-btn:hover {
  background: var(--q-flow-ghost-hover-bg);
}

.q-chatfirst-quick h3 {
  color: var(--q-flow-heading);
}

.q-chatfirst-quick .q-quick-sub,
.q-chatfirst-quick .q-quick-item small {
  color: var(--q-flow-sub);
}

.q-chatfirst-quick .q-quick-item {
  border: 1px solid var(--q-flow-line);
  background: var(--q-flow-surface);
  color: var(--q-flow-text);
}

.q-chatfirst-quick .q-quick-item:hover {
  border-color: var(--q-flow-line-strong);
  background: var(--q-flow-surface-soft);
}

.q-chatfirst-quick .q-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.q-inline-meta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.28);
  background: #ecfaf6;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
}

.q-inline-meta-sep {
  opacity: 0.65;
}

.q-inline-meta-link {
  color: #0b5f58;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.q-inline-meta-link:hover {
  color: #084b45;
}

body.q-page.q-chat-first .q-chatfirst-card .q-row.is-assistant .q-bubble .q-inline-meta .q-inline-meta-link {
  color: #0a4f48;
}

body.q-page.q-chat-first .q-chatfirst-card .q-row.is-assistant .q-bubble .q-inline-meta .q-inline-meta-link:hover {
  color: #083f39;
}

.q-inline-suggest-wrap {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.q-inline-suggest-title {
  margin: 0;
  font-size: 0.74rem;
  color: #0f4f48;
}

.q-inline-suggest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.q-inline-suggest-btn {
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.32);
  background: #edf9f6;
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.q-inline-suggest-btn:hover {
  background: #e2f7f1;
  border-color: rgba(15, 118, 110, 0.46);
}

.q-inline-action-wrap {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.q-inline-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.q-inline-action-btn {
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.35);
  background: #e8faf5;
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 11px;
  cursor: pointer;
}

.q-inline-action-btn:hover {
  background: #dcf5ee;
  border-color: rgba(15, 118, 110, 0.5);
}

.q-inline-action-btn:focus-visible {
  outline: none;
  border-color: rgba(15, 118, 110, 0.62);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

.q-inline-cta-wrap {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.q-inline-cta-note {
  margin: 0;
  font-size: 0.76rem;
  color: #0f4f48;
}

.q-inline-cta-btn {
  justify-self: start;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.35);
  background: #e8faf5;
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.q-chatfirst-card .q-inline-action-btn {
  border-color: var(--q-flow-line-strong);
  background: var(--q-flow-user);
  color: var(--q-flow-link);
}

.q-chatfirst-card .q-inline-action-btn:hover {
  background: var(--q-flow-ghost-hover-bg);
}

.q-auth-modal {
  --q-auth-max-w: calc(100vw - 24px);
  --q-auth-max-h: calc(100vh - 24px);
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding:
    max(16px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow: auto;
}

html.q-auth-open,
body.q-page.q-auth-open {
  height: auto !important;
  min-height: 100% !important;
  overflow: auto !important;
}

.q-auth-modal[hidden] {
  display: none !important;
}

.q-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 22, 0.62);
}

.q-auth-card {
  position: relative;
  box-sizing: border-box;
  width: min(460px, var(--q-auth-max-w));
  max-width: var(--q-auth-max-w);
  max-height: var(--q-auth-max-h);
  border-radius: 16px;
  border: 1px solid rgba(20, 184, 166, 0.3);
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(6, 18, 42, 0.35);
  padding: 18px;
  overflow: auto;
}

.q-auth-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  background: #ffffff;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.q-auth-card h3 {
  margin: 0 0 12px;
  color: #0f172a;
}

.q-auth-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.q-auth-action-btn {
  border: 1px solid #b6c7d3;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  background: #ffffff;
  color: #1f3e58;
}

.q-auth-action-btn.is-guest {
  border-color: rgba(15, 118, 110, 0.35);
  color: #0f766e;
}

.q-auth-action-btn.is-signup {
  background: linear-gradient(135deg, #0f766e, #0b4f4a);
  border-color: transparent;
  color: #ffffff;
}

.q-auth-form {
  display: grid;
  gap: 10px;
}

.q-auth-signup-form {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #bdd1db;
}

.q-auth-form label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.82rem;
}

.q-auth-form input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #c6d8e1;
  background: #f8fbfd;
  color: #0f172a;
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  padding: 10px;
}

@media (max-width: 560px) {
  .q-auth-card {
    width: min(var(--q-auth-max-w), calc(100vw - 20px));
    max-width: min(var(--q-auth-max-w), calc(100vw - 20px));
    padding: 14px;
  }
}

.q-auth-status {
  margin: 0;
  min-height: 18px;
  font-size: 0.78rem;
  color: #475569;
}

.q-auth-status.is-error {
  color: #b42318;
}

.q-auth-status.is-ok {
  color: #067647;
}

.q-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: grid;
  place-items: center;
  padding: 16px;
}

.q-consent-modal[hidden] {
  display: none !important;
}

.q-consent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 22, 0.72);
}

.q-consent-card {
  position: relative;
  width: min(540px, calc(100vw - 28px));
  border-radius: 16px;
  border: 1px solid rgba(20, 184, 166, 0.35);
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(6, 18, 42, 0.4);
  padding: 18px;
  color: #0f172a;
  display: grid;
  gap: 10px;
}

.q-consent-card h3 {
  margin: 0;
  font-size: 1.04rem;
}

.q-consent-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #334155;
}

.q-consent-links {
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.q-consent-links a {
  color: #0f766e;
  font-weight: 700;
  text-decoration: none;
}

.q-consent-links a:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  html.q-auth-open,
  body.q-page.q-auth-open {
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
  }

  body.q-page.q-auth-open .q-chatfirst-shell {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
  }

  html,
  body,
  body.q-page.q-chat-first {
    height: auto;
    min-height: var(--q-vh, 100dvh);
    overflow: auto;
  }

  .q-chatfirst-shell {
    width: min(100vw, 940px);
    height: var(--q-vh, 100dvh);
    min-height: var(--q-vh, 100dvh);
    max-height: none;
    padding: 10px;
    overflow: visible;
  }

  .q-chatfirst-main {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .q-chatfirst-card {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .q-chatfirst-card .q-form-container {
    position: static;
    bottom: auto;
    margin-top: 0;
    z-index: 4;
    box-shadow: none;
  }

  body.q-page.q-chat-first.q-native-runtime.q-keyboard-active .q-chatfirst-card .q-chat-messages {
    max-height: calc(var(--q-vh, 100dvh) - 220px);
  }

  .q-chatfirst-card .q-chat-messages {
    min-height: 0;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .q-chatfirst-quick {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .q-chatfirst-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .q-chatfirst-top-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .q-mode-badge {
    font-size: 0.72rem;
  }

  .q-chatfirst-quick .q-quick-grid {
    grid-template-columns: 1fr;
  }

  .q-chatfirst-card .q-form-bottom {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .q-chatfirst-card .q-status-wrap {
    min-width: 0;
    flex: 1 1 auto;
  }

  .q-chatfirst-card .q-form-actions {
    width: auto;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: wrap;
  }

  .q-chatfirst-card .q-voice-toggle-btn {
    font-size: 0.72rem;
    padding: 7px 8px;
  }
}