/* BDChat SI: additions on top of the Mockup-1 design (tokens.css + app.css). */

/* wordmark: BD Chat + small SI tag */
.brand__si {
  display: inline-block; margin-inline-start: 5px; padding: 2px 5px 1px;
  font-family: var(--font-display); font-size: 0.56em; font-weight: 700; letter-spacing: 0.04em;
  line-height: 1.1; vertical-align: 0.38em;
  color: var(--accent-soft-text); background: var(--accent-soft); border-radius: 5px;
}
html[lang="bn"] .brand__word { font-family: "Space Grotesk", var(--font-ui); }

/* open-upwards menu (sidebar account) */
.menu--up { inset-block-end: calc(100% + 6px); inset-block-start: auto; inline-size: 100%; margin-block-start: 0; }
.account-btn { justify-content: flex-start; min-height: 48px; }

.topbar__title { font-size: var(--fs-sm); font-weight: 600; max-width: 32ch; color: var(--text-2); }
.hide-sm { }
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .topbar__title { display: none; }
  .composer__hint { display: none; }
}

/* language blocks on info pages: server renders both, CSS shows one */
[data-lang-block="bn"] { display: none; }
html[lang="bn"] [data-lang-block="bn"] { display: block; }
html[lang="bn"] [data-lang-block="en"] { display: none; }

/* image shape picker */
.aspect-picker { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); }
.aspect-picker[hidden] { display: none; }
.aspect-opt {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
  padding: 5px 9px; border-radius: var(--r-pill); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600;
}
.aspect-opt i { display: inline-block; inline-size: var(--w); block-size: var(--h); border: 1.6px solid currentColor; border-radius: 3px; }
.aspect-opt:hover { color: var(--text); }
.aspect-opt[aria-checked="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .aspect-opt span { display: none; } .aspect-opt { padding: 6px 8px; } }

/* image messages */
.img-card {
  position: relative; margin: 0; inline-size: min(100%, 520px); max-block-size: 640px;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2);
}
.img-card a { display: block; inline-size: 100%; block-size: 100%; }
.img-card img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; background: var(--surface-2); }
.img-card--pending { display: grid; place-items: center; overflow: hidden; }
.img-card--pending::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--accent) 10%, transparent) 45%, transparent 70%);
  background-size: 220% 100%; animation: shimmer 1.6s linear infinite;
}
.img-card--pending .thinking { position: relative; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .img-card--pending::before { animation: none; } }
.msg--image .msg__actions { opacity: 1; }
.msg__files { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); justify-content: flex-end; }

/* highlight.js output mapped onto the design's token colours */
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-built_in, .hljs-type { color: #9a3fbf; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute { color: #186b40; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #944b06; }
.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta { color: var(--text-3); font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-name { color: #2563c9; }
.hljs-attr, .hljs-variable, .hljs-property, .hljs-params, .hljs-tag { color: #0e7a6a; }
[data-theme="dark"] .hljs-keyword, [data-theme="dark"] .hljs-selector-tag, [data-theme="dark"] .hljs-literal, [data-theme="dark"] .hljs-built_in, [data-theme="dark"] .hljs-type { color: #d59bf0; }
[data-theme="dark"] .hljs-string, [data-theme="dark"] .hljs-regexp, [data-theme="dark"] .hljs-addition, [data-theme="dark"] .hljs-attribute { color: #86d6a4; }
[data-theme="dark"] .hljs-number, [data-theme="dark"] .hljs-symbol, [data-theme="dark"] .hljs-bullet { color: #f0bd7a; }
[data-theme="dark"] .hljs-title, [data-theme="dark"] .hljs-title.function_, [data-theme="dark"] .hljs-section, [data-theme="dark"] .hljs-name { color: #8fb6f5; }
[data-theme="dark"] .hljs-attr, [data-theme="dark"] .hljs-variable, [data-theme="dark"] .hljs-property, [data-theme="dark"] .hljs-params, [data-theme="dark"] .hljs-tag { color: #7fd9c8; }
.md .table-scroll { overflow-x: auto; }
.md pre { margin: 0; }

/* daily-limit dialog */
.limit-hero { display: flex; gap: var(--sp-4); align-items: flex-start; }
.limit-ring {
  flex: none; inline-size: 64px; block-size: 64px; border-radius: 50%;
  border: 3px solid var(--accent); color: var(--accent);
  display: grid; place-content: center; text-align: center; line-height: 1;
}
.limit-ring b { font-family: var(--font-display); font-size: 1.4rem; }
.limit-ring small { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
#limit-modal .modal__foot { flex-wrap: wrap; }

/* cards */
.cta-card { text-align: center; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.contact-card { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); margin-block: var(--sp-4); }
.share-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--sp-2); }

/* admin additions */
.admin-form { display: grid; gap: var(--sp-4); max-width: 760px; }
.admin-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 700px) { .admin-form .grid2 { grid-template-columns: 1fr; } }
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); margin-block-end: var(--sp-4); border: 1px solid; }
.alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--text); }
.alert--err { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text); }
.chart-scroll { overflow-x: auto; max-width: 100%; padding-block: var(--sp-2); }
.bars { display: flex; align-items: flex-end; gap: 6px; min-inline-size: 480px; block-size: 150px; padding-block-start: var(--sp-3); }
.bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; block-size: 100%; }
.bars i { display: block; inline-size: 100%; max-inline-size: 30px; min-block-size: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bars span { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 2px 0; }
.inline-form .input { min-height: 32px; inline-size: 140px; font-size: var(--fs-xs); }

/* layout fixes */
.model-pill { white-space: nowrap; flex: none; }
.composer__tools { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.composer__hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#chat-send, #stop-btn, #home-send { flex: none; }
.jump { inset-block-end: 176px; }
@media (max-width: 640px) {
  #chat-send, #stop-btn, #home-send { margin-inline-start: auto; }
  .jump { inset-block-end: 196px; }
  .topbar { gap: 2px; padding-inline: var(--sp-2); }
  .topbar [data-lang-label], .topbar .menu-wrap > .btn [data-icon="chevronDown"] { display: none; }
  .topbar .menu-wrap > .btn--ghost { padding-inline: 8px; }
  .model-pill { padding-inline: 10px; }
}
@media (max-width: 420px) {
  .site-header__inner .btn--primary { padding-inline: 12px; }
}
.thread { scroll-behavior: auto; }
[hidden] { display: none !important; }

.brand__word { white-space: nowrap; }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.starter-more { margin-block-start: var(--sp-3); }
.starter-more > summary { list-style: none; width: fit-content; margin-inline: auto; }
.starter-more > summary::-webkit-details-marker { display: none; }
.starter-more[open] > summary { margin-block-end: var(--sp-3); }
.admin-nav__brand { padding: var(--sp-3); margin-block-end: var(--sp-3); }
.admin-nav__chat { margin-block-start: auto; }
.auth-guest-link { margin-block-start: var(--sp-5); text-align: center; font-size: var(--fs-sm); }
.auth-guest-link a { display: inline-flex; align-items: center; min-height: 44px; }
.report-error:not([hidden]) { display: block; margin: 0 var(--sp-5) var(--sp-4); }
.report-error[hidden] { display: none; }
.ctx-chip { max-width: 100%; min-width: 0; }
.ctx-chip__name { overflow-wrap: anywhere; }
.attachment-summary { padding: var(--sp-1) var(--sp-2); border: 0; background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; }
.attachment-limits { margin-block-start: var(--sp-2); font-size: var(--fs-xs); }
.pill-note { max-inline-size: 100%; flex-wrap: wrap; }
.msg--user .msg__content { overflow-wrap: anywhere; }
.md :not(pre) > code { white-space: break-spaces; overflow-wrap: anywhere; }
.tok-str { color: #186b40; }
.tok-num { color: #944b06; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .site-header__inner { flex-wrap: wrap; gap: var(--sp-2); padding-block: var(--sp-2); }
  .site-header__inner > .brand { flex: 1 0 auto; }
  .site-header__inner > .site-header__spacer { display: none; }
  .site-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-2); min-width: 0; }
  .site-header__actions .btn { padding-inline: var(--sp-3); }
  .site-header__inner > .menu-wrap .btn { padding-inline: var(--sp-2); }
  .site-header__inner [data-lang-label], .site-header__inner .menu-wrap > .btn [data-icon="chevronDown"] { display: none; }
  .attachment-summary { min-height: 44px; }
  .ctx-chip { flex-wrap: wrap; }
  .empty-state .chip { white-space: normal; text-align: start; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .site-header__inner { flex-wrap: wrap; padding-block: var(--sp-2); gap: var(--sp-2); }
  .site-header__nav { order: 3; flex-basis: 100%; justify-content: center; flex-wrap: wrap; margin-inline-start: 0; }
}
@media (max-width: 360px) {
  .topbar { flex-wrap: wrap; padding-block: var(--sp-1); }
  .topbar .model-pill { padding-inline: var(--sp-2); gap: var(--sp-1); }
  .topbar > .menu-wrap:last-child { margin-inline-start: auto; }
  .site-header__actions { flex-basis: 100%; justify-content: flex-start; }
}