/* FJN System — the AI assistant (D165): top bar button, panel AS-02, proposal AS-05. */

.fjn-asst-btn { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; background: #fff; border: 1px solid #AEB5BE; border-radius: 6px; color: #1E4F8A; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; }
.fjn-asst-btn:hover, .fjn-asst-btn.is-on { background: #E3ECF7; border-color: #1E4F8A; }
.fjn-asst-btn.is-mobile { width: 44px; height: 44px; padding: 0; justify-content: center; margin: 0; border: 0; background: none; }
.fjn-mobilebar__brand.is-mark img { height: 32px; width: auto; }

.fjn-asst { position: fixed; top: var(--fjn-topbar-h); right: 0; bottom: 0; width: 440px; z-index: 40; display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--fjn-border); box-shadow: -8px 0 24px rgba(21, 24, 28, .12); animation: fjn-asst-in 200ms ease-out; }
@keyframes fjn-asst-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.fjn-asst.is-page { position: static; width: auto; height: 100vh; box-shadow: none; border: 0; animation: none; }
.fjn-asst-page { height: 100vh; }
.fjn-asst__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--fjn-border); }
.fjn-asst__head form { display: contents; }
.fjn-asst__badge { flex: none; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #E3ECF7; color: #1E4F8A; }
.fjn-asst__title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fjn-asst__title b { font-size: 17px; }
.fjn-asst__title small { font-size: 13px; color: var(--fjn-text-2); }
.fjn-asst__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.fjn-asst__hello h2 { margin: 0 0 6px; font-size: 19px; }
.fjn-asst__hello p { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--fjn-text-2); }
.fjn-asst__examples { display: flex; flex-direction: column; gap: 8px; }
.fjn-asst__example { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #fff; border: 1px solid var(--fjn-border); border-radius: 8px; font: inherit; font-size: 15px; text-align: left; color: var(--fjn-text); cursor: pointer; }
.fjn-asst__example:hover { border-color: #1E4F8A; }
.fjn-asst__q { align-self: flex-end; max-width: 88%; padding: 10px 14px; background: #E3ECF7; border-radius: 12px 12px 4px 12px; font-size: 15px; line-height: 22px; }
.fjn-asst__q.is-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff; border: 1px solid var(--fjn-border); border-radius: 999px; font-size: 13px; font-weight: 700; }
.fjn-asst__a { display: flex; gap: 10px; align-items: flex-start; }
.fjn-asst__avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #E3ECF7; color: #1E4F8A; }
.fjn-asst__avatar.is-info { background: #EEF0F2; color: var(--fjn-text-2); }
.fjn-asst__answer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; }
.fjn-asst__answer p { margin: 0; }
.fjn-asst__bubble { padding: 10px 14px; background: #F4F5F6; border-radius: 8px; font-size: 15px; line-height: 22px; }
.fjn-asst__cards { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fjn-border); border-radius: 8px; overflow: hidden; }
.fjn-asst__cards li + li { border-top: 1px solid var(--fjn-border); }
.fjn-asst__cards a { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: var(--fjn-text); text-decoration: none; }
.fjn-asst__cards a:hover { background: var(--fjn-brand-50); text-decoration: none; }
.fjn-asst__cards a > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fjn-asst__cards b { color: #1E4F8A; font-size: 15px; }
.fjn-asst__cards small { font-size: 13px; font-weight: 400; color: var(--fjn-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fjn-asst__file { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--fjn-border); border-radius: 8px; }
.fjn-asst__file > div { display: flex; gap: 10px; align-items: center; }
.fjn-asst__file > div > .fjn-icon { padding: 8px; box-sizing: content-box; border-radius: 6px; background: #E2F2E8; color: #1B6B41; }
.fjn-asst__file span { display: flex; flex-direction: column; }
.fjn-asst__file b { font-size: 14px; word-break: break-all; }
.fjn-asst__file small { font-size: 13px; color: var(--fjn-text-2); }
.fjn-asst__asof { font-size: 12px; color: var(--fjn-text-2); }
.fjn-asst__error { display: flex; gap: 10px; padding: 12px 14px; background: #FBE6E4; border: 1px solid #F0B6AF; border-radius: 8px; color: #B3261E; }
.fjn-asst__error p { margin: 0 0 10px; font-size: 14px; line-height: 20px; color: var(--fjn-text); }
.fjn-asst__error b { color: #B3261E; }
.fjn-asst__skel { display: block; height: 10px; border-radius: 5px; margin-top: 8px; }
.fjn-asst__skel.is-mid { width: 80%; }
.fjn-asst__skel.is-short { width: 60%; }
.fjn-asst__thinking { display: flex; flex-direction: column; gap: 14px; }
.fjn-asst__thinking[hidden] { display: none; }
.fjn-asst__off { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.fjn-asst__off > .fjn-icon { padding: 14px; box-sizing: content-box; border-radius: 12px; background: #EEF0F2; color: var(--fjn-text-2); }
.fjn-asst__off b { font-size: 17px; }
.fjn-asst__off span { font-size: 14px; line-height: 20px; color: var(--fjn-text-2); max-width: 320px; }

.fjn-asst__foot { flex: none; padding: 12px 16px 10px; border-top: 1px solid var(--fjn-border); display: flex; flex-direction: column; gap: 8px; }
.fjn-asst__form { display: flex; gap: 8px; align-items: stretch; }
.fjn-asst__field { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; min-height: 44px; border: 1px solid #AEB5BE; border-radius: 6px; box-sizing: border-box; }
.fjn-asst__field:focus-within { border: 2px solid #1E4F8A; padding: 0 11px; }
.fjn-asst__field textarea { width: 100%; border: 0; outline: 0; resize: none; background: none; font: inherit; font-size: 15px; line-height: 21px; padding: 10px 0; }
.fjn-asst__field.is-listening { border: 1px solid #B3261E; background: #FDF3F2; }
.fjn-asst__listening { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 14px; font-weight: 700; color: #B3261E; }
.fjn-asst__listening i { width: 10px; height: 10px; border-radius: 50%; background: #B3261E; box-shadow: 0 0 0 4px rgba(179, 38, 30, .2); animation: as-listen 1.2s ease-in-out infinite; }
@keyframes as-listen { 0%, 100% { box-shadow: 0 0 0 2px rgba(179, 38, 30, .2); } 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, .2); } }
@media (prefers-reduced-motion: reduce) { .fjn-asst__listening i, .fjn-asst { animation: none; } }
.fjn-asst__mic, .fjn-asst__send { flex: none; width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.fjn-asst__stopmic { flex: none; align-self: stretch; height: auto; padding: 0 16px; background: #B3261E; color: #fff; font-weight: 700; }
.fjn-asst__field.is-listening textarea { padding: 4px 0 10px; }
.fjn-asst__stopmic[hidden], .fjn-asst__mic[hidden], .fjn-asst__send[hidden] { display: none; }
.fjn-asst__counters { display: flex; justify-content: space-between; font-size: 12px; color: var(--fjn-text-2); }
.fjn-asst__note { margin: 0; font-size: 12px; color: var(--fjn-text-2); }
.fjn-asst__stop { display: flex; gap: 10px; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.fjn-asst__stop p { margin: 0; }
.fjn-asst__stop b { display: block; }
.fjn-asst__stop.is-limit { background: #FCEFD6; border: 1px solid #E8C98A; color: #8A5300; }
.fjn-asst__stop.is-limit p { color: var(--fjn-text); }
.fjn-asst__stop.is-limit b { color: #8A5300; }
.fjn-asst__stop.is-new { background: #DFF1F5; border: 1px solid #A9D6DF; color: #0B6477; }
.fjn-asst__stop.is-new > div { flex: 1; }
.fjn-asst__stop.is-new p { color: var(--fjn-text); margin-bottom: 10px; }
.fjn-asst__stop.is-new b { color: #0B6477; }
.fjn-asst__newbtn { width: 100%; justify-content: center; }

.fjn-asst-hint .fjn-dialog__body { display: flex; flex-direction: column; gap: 0; }
.fjn-asst-hint__head { display: flex; gap: 10px; align-items: flex-start; }
.fjn-asst-hint__row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fjn-border); cursor: pointer; }
.fjn-asst-hint__row > span { display: flex; flex-direction: column; gap: 2px; }
.fjn-asst-hint__row b { font-size: 17px; }
.fjn-asst-hint__row small { font-size: 13px; color: var(--fjn-text-2); }
.fjn-asst-hint__check { width: 22px; height: 22px; margin: 0; accent-color: #1E4F8A; }

@media (max-width: 1279px) {
  .fjn-asst { width: 400px; }
  .fjn-asst__field, .fjn-asst__mic, .fjn-asst__send { min-height: 56px; }
  .fjn-asst__mic, .fjn-asst__send { width: 56px; }
  .fjn-asst__cards a { min-height: 56px; }
}
@media (max-width: 767px) {
  .fjn-asst:not(.is-page) { top: 0; width: 100vw; }
  .fjn-asst__body { padding: 12px 16px; }
}
.fjn-asst-entry { display: contents; }
.fjn-asst-entry__btn { border-color: #1E4F8A; color: #1E4F8A; }
.fjn-asst-entry__btn:hover { background: #E3ECF7; }

/* AS-03 settings, AS-04 log */
.fjn-asst-cfg { display: flex; flex-direction: column; gap: 16px; max-width: 960px; }
.fjn-asst-cfg__top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
.fjn-asst-cfg__main .fjn-toggle { align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--fjn-border); }
.fjn-asst-cfg__state { margin-left: auto; color: var(--fjn-text-2); }
.fjn-asst-cfg__state.is-on { color: #1B6B41; }
.fjn-asst-cfg__limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 14px; }
.fjn-asst-cfg__unit { position: relative; display: block; }
.fjn-asst-cfg__unit input { padding-right: 64px; }
.fjn-asst-cfg__unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--fjn-text-2); font-size: 14px; }
.fjn-asst-cfg__numbers { display: flex; gap: 32px; margin: 8px 0 12px; }
.fjn-asst-cfg__numbers > div { display: flex; flex-direction: column; }
.fjn-asst-cfg__numbers b { font-size: 26px; line-height: 32px; }
.fjn-asst-cfg__numbers small, .fjn-asst-cfg__asof { font-size: 13px; color: var(--fjn-text-2); }
.fjn-asst-cfg__bar { width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--fjn-surface-2); appearance: none; overflow: hidden; }
.fjn-asst-cfg__bar::-webkit-progress-bar { background: var(--fjn-surface-2); border-radius: 4px; }
.fjn-asst-cfg__bar::-webkit-progress-value { background: #1E4F8A; border-radius: 4px; }
.fjn-asst-cfg__bar::-moz-progress-bar { background: #1E4F8A; border-radius: 4px; }
.fjn-asst-cfg__log { display: flex; width: fit-content; align-items: center; gap: 4px; margin-top: 14px; font-weight: 700; }
.fjn-asst-cfg__features { padding: 0; }
.fjn-asst-cfg__fhead { padding: 16px 20px 12px; }
.fjn-asst-cfg__fhead p { margin: 4px 0 0; font-size: 13px; color: var(--fjn-text-2); }
.fjn-asst-cfg__features ul { list-style: none; margin: 0; padding: 0; }
.fjn-asst-cfg__features li { display: flex; align-items: center; gap: 16px; padding: 9px 20px; border-top: 1px solid var(--fjn-border); }
.fjn-asst-cfg__n { width: 24px; font-size: 13px; color: var(--fjn-text-2); }
.fjn-asst-cfg__ftext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fjn-asst-cfg__ftext small { font-size: 13px; color: var(--fjn-text-2); }
.fjn-asst-cfg__switch { flex: none; }
.fjn-cfg-banner.fjn-asst-cfg__preview { background: #DFF1F5; color: #0B6477; }
.fjn-asst-log__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fjn-asst-log__filters { display: flex; gap: 16px; flex-wrap: wrap; }
.fjn-asst-log__filters .fjn-field { min-width: 240px; }
.fjn-asst-log__sums { display: flex; gap: 20px; }
.fjn-asst-log__sums > div { display: flex; flex-direction: column; }
.fjn-asst-log__sums small { font-size: 13px; color: var(--fjn-text-2); }
.fjn-asst-log__sums b { font-size: 22px; }
.fjn-asst-log__foot { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 14px; border-top: 1px solid var(--fjn-border); }
@media (max-width: 1279px) { .fjn-asst-cfg__top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .fjn-asst-cfg__limits { grid-template-columns: minmax(0, 1fr); } .fjn-asst-log__filters .fjn-field { min-width: 0; flex: 1; } }
.fjn-asst__listening[hidden] { display: none; }
.fjn-asst__field textarea:focus, .fjn-asst__field textarea:focus-visible { outline: none; box-shadow: none; }
.fjn-asst__form:has(textarea:placeholder-shown) .fjn-asst__send { background: #EEF0F2; border-color: #EEF0F2; color: #626B77; }
.fjn-asst-cfg .fjn-toggle__input:checked + .fjn-toggle__track { background: #1B6B41; }
.fjn-cfg-banner.fjn-asst-cfg__preview { max-width: 960px; box-sizing: border-box; }
.fjn-asst-cfg__main .fjn-toggle__label { font-weight: 700; }
.fjn-asst-log__who { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.fjn-asst-log__q { width: 100%; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* D168 AS-05 on the quote: „Podpowiedź usług”, „Sprawdzenie oferty” */
.fjn-asst-quote { width: min(560px, calc(100vw - 32px)); }
.fjn-asst-quote__row { align-items: flex-start; }
.fjn-asst-quote__row > span:nth-child(2) { flex: 1; min-width: 0; }
.fjn-asst-quote__row b { font-size: 15px; }
.fjn-asst-quote__price { flex: none; }
.fjn-asst-quote__mark { flex: none; width: 24px; height: 24px; border-radius: 4px; display: flex !important; align-items: center; justify-content: center; }
.fjn-asst-quote__mark.is-warn { background: #FCEFD6; color: #8A5300; }
.fjn-asst-quote__mark.is-ok { background: #E2F2E8; color: #1B6B41; }
.fjn-full-variant__add:has(.fjn-asst-entry__btn) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }