/* =====================================================================
styles3.css — uporządkowana wersja (bez zmiany efektu 1:1)
- Zachowana kolejność kaskady i nadpisań (bez agresywnego przenoszenia reguł)
- Dodane nagłówki sekcji dla czytelności
- Analiza użycia: login.html, main2.html, scripts1.js, contentMap.js, worker.js
===================================================================== */
/* =====================================================================
Reset / Base / Global
===================================================================== */
html.skip-animations body {
animation: none !important;
transition: none !important;
}
.no-anim-line {
animation: none !important;
transition: none !important;
}
body {
background-color: white;
margin-bottom: 60px;
text-size-adjust: 100%;
font-feature-settings: normal;
-webkit-tap-highlight-color: transparent;
font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
font-variation-settings: normal;
line-height: 1.5;
tab-size: 4;
margin: 0px;
opacity: 0;
transition: opacity 2s ease-in-out;
padding-bottom: 75px;
}
body.loaded {
opacity: 1;
}
@media (prefers-reduced-motion: reduce){
.popup, .popup.show, .popup.hide{
transition: none !important;
animation: none !important;
}
}
/* =====================================================================
Typography / Content — Code highlighting (Prism/HLJS base)
===================================================================== */
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
/* =====================================================================
Typography / Content — Tables, headings, content elements
===================================================================== */
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1em;
}
th, td {
padding: 0.5em;
text-align: left;
}
th {
background-color: #f4f4f4;
}
title {
display: block;
font-size: 1.2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
h1 {
display: block;
font-size: 1.1em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
h2 {
display: block;
font-size: 1.05em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
h3 {
display: block;
font-size: 1.02em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
/*
/* =====================================================================
Components — Loaders / Waiting
===================================================================== */
/*
.waiting {
display: flex;
justify-content: center;
align-items: center;
color: #555;
font-size: 15px;
margin: 20px 0;
}
.waiting-text {
animation: pulseText 2s infinite ease-in-out;
}
*/
.waiting {
display: flex;
justify-content: center;
align-items: center;
margin: 16px 0;
}
.waiting-text {
max-width: 420px;
padding: 8px 12px;
border-radius: 15px; /* „pigułka” */
background: #f5f5f5;
color: #444;
font-size: 13px;
line-height: 1.4;
text-align: center;
box-shadow: 0 0 0 1px rgba(0,0,0,0.03);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
animation: pulseText 2s infinite ease-in-out;
}
.dots {
display: inline-block;
min-width: 1.5ch;
}
.dots::after {
content: '…';
animation: blinkDots 1s steps(3, start) infinite;
}
@keyframes blinkDots {
0% { content: ''; }
33% { content: '.'; }
66% { content: '..'; }
100% { content: '...'; }
}
@keyframes pulseText {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.95; transform: scale(1.03); }
}
.spinner {
margin-left: 20px;
margin-top: 10px;
border: 4px solid #f3f3f3;
border-top: 4px solid #333;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 4s linear infinite, pulseCircle 2s infinite ease-in-out;
}
/* Pulsowanie tekstu */
@keyframes pulse-text {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes move-text {
0% { transform: translateX(0px); opacity: 1; }
50% { transform: translateX(-140px); opacity: 0.7; }
100% { transform: translateX(0px); opacity: 1; }
}
.pulsing-text {
display: inline-block;
animation: pulse-text 1s ease-in-out;
}
.moving-text {
display: inline-block;
animation: move-text 1s ease-in-out;
}
/* Styl dla spinnera */
.loading-spinner {
display: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
width: 16px;
height: 16px;
border: 2px solid white;
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 8px;
}
.loading-spinner.visible {
opacity: 1;
visibility: visible;
display: inline-block;
}
.button-text {
margin-top: 3px;
}
.pricing-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
padding: 40px;
}
.pricing-card {
background: #ffffff;
border-radius: 10px;
padding: 30px;
text-align: center;
width: 280px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
}
.pricing-title {
font-size: 22px;
font-weight: bold;
color: #333;
}
.pricing-price {
font-size: 28px;
color: rgb(181 181 181);
margin: 10px 0;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 20px 0;
color: #333;
}
.pricing-features li {
margin-bottom: 10px;
}
.pricing-button {
background: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
font-size: 16px;
width: 100%;
}
.selected {
border: 2px solid #2c64ff;
}
.pricing-button:hover {
background: #45a049;
}
.premium {
position: relative;
}
.premium::before {
content: "Najlepszy wybór";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: #888;
color: white;
padding: 5px 10px;
font-size: 12px;
border-radius: 5px;
}
/*
.popup-container {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 1000;
}
.popup {
background: rgba(255, 69, 58, 0.95);
color: black;
padding: 15px 20px;
border-radius: 8px;
font-size: 16px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
margin-top: 10px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
cursor: pointer;
animation: fadeIn 0.5s forwards;
}
.popup.success {
background: RGBA(204, 204, 204, 0.8);
}
.popup.warning {
background: rgba(255, 165, 0, 0.8);
}
.popup.error {
background: RGBA(255, 0, 0, 0.6);
}
.popup.show {
opacity: 1;
transform: translateY(0);
}
.popup.hide {
opacity: 0;
transform: translateY(20px);
}
*/
/*
.popup.hide {
animation: fadeOut 0.5s forwards;
}
*/
/* Animacje */
.fade-out {
animation: fadeOut 1s forwards; /* Animacja zanikania */
}
.fade-in {
animation: fadeIn 2s forwards; /* Animacja pojawiania siÄ™ */
}
@keyframes fadeOut {
from {
opacity: 1;
/*transform: translateX(0);*/
}
to {
opacity: 0;
/*transform: translateX(20px);*/
}
}
/* ========================= */
/* Toast / Popup (Nowy) */
/* ========================= */
:root{
--toast-gap: 10px;
--toast-safe: env(safe-area-inset-bottom, 0px);
--bottom-box-h: 0px; /* ustawiane JS-em */
/* zostawiamy (bo masz już w pliku) */
--yta-accent-b-22: color-mix(in srgb, var(--yta-accent-b) 22%, transparent);
--yta-text: #0f172a;
--yta-muted: #64748b;
--yta-border: rgba(15, 23, 42, 0.10);
--yta-blue: #1d72d8;
--yta-teal: #12b5a5;
/* toast-only */
--toast-radius: 16px;
--toast-shadow:
0 18px 56px rgba(0,0,0,0.14),
0 0 0 1px rgba(255,255,255,0.35) inset;
}
/* Kontener toastów – zawsze nad bottom-box */
.popup-container{
position: fixed;
/* klucz: dynamiczny offset */
bottom: calc(var(--toast-safe) + var(--bottom-box-h) + 12px);
right: 16px;
display: flex;
flex-direction: column;
gap: var(--toast-gap);
align-items: flex-end;
z-index: 2500;
pointer-events: none; /* klik ma działać na samym toast */
width: min(420px, calc(100vw - 32px));
}
/* Toast = karta “glass” spójna z resztą UI */
.popup{
/* domyślne (info) */
--toast-accent: rgba(59,130,246,0.95);
--toast-accent-soft: rgba(59,130,246,0.12);
--toast-ttl: 4200ms;
pointer-events: auto;
width: 100%;
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: start;
gap: 10px;
padding: 12px 14px 14px 14px;
border-radius: var(--toast-radius);
color: var(--yta-text, rgba(17, 24, 39, 0.95));
/* delikatny tint + glass */
background:
linear-gradient(135deg, var(--toast-accent-soft), rgba(255,255,255,0.90) 45%),
rgba(255,255,255,0.86);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* fallback + lepszy border jeśli color-mix dostępny */
border: 1px solid rgba(15,23,42,0.10);
border-color: color-mix(in srgb, var(--toast-accent) 22%, var(--yta-border, rgba(15,23,42,0.10)));
box-shadow: var(--toast-shadow);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(12px);
transition: opacity .18s ease, transform .18s ease;
}
/* Akcent po lewej (cienki, nowoczesny) */
.popup::before{
content: "";
position: absolute;
left: 8px;
top: 10px;
bottom: 10px;
width: 4px;
border-radius: 999px;
background: var(--toast-accent);
opacity: 0.92;
}
/* widoczny */
.popup.show{
opacity: 1;
transform: translateY(0);
}
/* animacja znikania */
.popup.hide{
opacity: 0;
transform: translateY(10px);
}
/* Ikona stanu */
.popup .toast-icon{
grid-column: 1;
margin-top: 1px;
color: var(--toast-accent);
font-size: 20px;
line-height: 1;
}
/* Tekst */
.popup .toast-message{
grid-column: 2;
font-size: 13.5px;
line-height: 1.35;
white-space: pre-wrap;
word-break: break-word;
}
/* Close */
.popup .toast-close{
grid-column: 3;
background: transparent;
border: none;
width: 32px;
height: 32px;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(17, 24, 39, 0.56);
transition: background .14s ease, color .14s ease, transform .14s ease;
}
.popup .toast-close:hover{
background: rgba(15,23,42,0.06);
color: rgba(17, 24, 39, 0.86);
transform: translateY(-1px);
}
.popup .toast-close:focus{ outline: none; }
.popup .toast-close:focus-visible{
box-shadow: 0 0 0 4px var(--yta-focus, rgba(59,130,246,0.18));
}
/* Pasek czasu (subtelny, pomaga “zrozumieć” toast) */
.popup .toast-progress{
position: absolute;
left: 12px;
right: 12px;
bottom: 8px;
height: 2px;
border-radius: 999px;
/* fallback */
background: rgba(15,23,42,0.14);
/* jeśli color-mix wspierany -> akcent */
background: color-mix(in srgb, var(--toast-accent) 42%, transparent);
transform-origin: left;
transform: scaleX(1);
opacity: 0.55;
animation: toastProgress var(--toast-ttl) linear forwards;
}
@keyframes toastProgress{
to { transform: scaleX(0); }
}
/* Typy */
.popup.success{
--toast-accent: rgba(16,185,129,0.95);
--toast-accent-soft: rgba(16,185,129,0.12);
}
.popup.warning{
--toast-accent: rgba(245,158,11,0.95);
--toast-accent-soft: rgba(245,158,11,0.14);
}
.popup.error{
--toast-accent: rgba(239,68,68,0.95);
--toast-accent-soft: rgba(239,68,68,0.14);
}
.popup.info{
--toast-accent: rgba(59,130,246,0.95);
--toast-accent-soft: rgba(59,130,246,0.12);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.popup{ transition: none; transform: none; }
.popup.hide{ transform: none; }
.popup .toast-progress{ animation: none; display: none; }
}
/* =====================================================================
Layout — Top bar / Header / Logo
===================================================================== */
.top-bar {
position: fixed;
left: -1%;
width: 100%;
height: 70px;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
font-size: 28px;
color: rgb(0, 0, 0);
cursor: default;
font-weight: 500;
font-size: 32px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
clip-path: inset(0 -0 -15px 0);
white-space: nowrap;
z-index: 1000;
background: rgba(255,255,255,.78);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(15,23,42,.10);
}
/*
.YTAlogo {
position: absolute;
top: 0%;
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-columns: 1fr 10px 120px;
z-index: 998;
transition: grid-template-columns 0.4s ease;
}
.YTAlogo1 {
position: absolute;
top: 0%;
left: 50%;
transform: translateX(-50%);
z-index: 998;
}
.YTAlogo.expanded {
grid-template-columns: 1fr 10px 140px;
transition: grid-template-columns 0.4s ease;
}
*/
/* Główny kontener logo w top-barze */
.YTAlogo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 16px;
padding: 4px 10px;
border-radius: 0px;
/* background-color: #ffffff; */
/* delikatny cień, nadaje „chipowy” charakter */
/*box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 6px 18px rgba(0,0,0,0.04);*/
max-width: 70vw;
overflow: hidden;
}
/* Lewa część: logo + „YTAcore” + mały tag */
.YTAlogo-left {
display: flex;
align-items: center;
gap: 10px;
}
.brand {
font-weight: 800;
letter-spacing: -0.03em;
font-size: 20px;
display: inline-flex;
align-items: center;
}
.brand__yta {
color: var(--yta-text);
}
.brand__core {
margin-left: 1px;
background: linear-gradient(90deg, var(--yta-teal), var(--yta-blue));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.side-menu__header .brand{
margin-top: -5px;
}
/* Ikona (zastępuje base-text + background image) */
.YTAlogo-icon {
width: 80px;
height: 80px;
border-radius: 12px;
background:
url("images/image.png?v=3.2") no-repeat center center / 70px 50px;
/*box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.08);*/
}
/* Główny napis */
.YTAlogo-main {
font-family: "Oswald", system-ui, sans-serif;
font-size: 18px;
letter-spacing: 0.03em;
font-weight: 600;
line-height: 1;
}
/* Sub-tag (np. „Podatki”, „Ogólny”) */
.YTAlogo-sub {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
/* kolor możesz powiązać z obecnym rgb([PHONE]) */
color: rgba(0,0,0,0.35);
background: rgba(0, 0, 0, 0.04);
}
/* Pionowy separator */
.YTAlogo-divider {
width: 2px;
height: 40px;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.35), transparent);
}
/* Kiedy ma wyglądać, jakby wchodził ZA logo (zanikanie) */
.YTAlogo-mode.behind-logo {
opacity: 0; /* lub np. 0.1, jeśli chcesz lekko widoczny */
}
.YTAlogo-mode.moving-text {
/* możesz zostawić istniejące .moving-text,
albo użyć czegoś subtelniejszego: */
transform: translateY(-3px);
opacity: 0;
/* opacity: 0; <= to lepiej usunąć lub zredukować */
}
.invisible-on-load {
visibility: hidden;
pointer-events: none;
}
/*
.logoline {
margin-top: 10px;
display: block;
top: 0%;
height: 50px;
position: relative;
width: 3px;
background-color: rgb(157 157 157);
border-radius: 5000px;
z-index: 998;
}
*/
/*
.lineBg {
position: relative;
height: 60px;
width: 10px;
background-color: #ffffff;
z-index: 998;
display: flex;
justify-content: flex-end;
}
*/
/*
.base-text {
position: sticky;
margin-top: 7px;
display: block;
height: 60px;
width: 100px;
background: url(
images/YTA2-Trans.png) no-repeat calc(100% - 10px) center;
/* wielkość ikony, dopasuj do preferencji */
background-size: 80px;
z-index: 998;
background-color: #ffffff;
}
*/
.base-text1 {
position: sticky;
margin-top: 7px;
display: block;
height: 60px;
width: 130px;
background: url(images/image.png?v=3.2) no-repeat calc(100% - 10px) center;
/* wielkość ikony, dopasuj do preferencji */
background-size: 80px;
z-index: 998;
background-color: #ffffff;
}
/*
.changing-text {
font-size: 22px;
color: rgb(157 157 157);
position: sticky;
margin-top: 20px;
z-index: 997;
overflow: hidden;
}
*/
/* Sekcja wprowadzajÄ…ca (np. YTA Prawo / YTA Podatki) */
.intro-section {
text-align: center;
padding: 2rem 1rem;
background-color: #f8f8f8; /* delikatny szary */
}
/* Kafle (dla dwóch kafelków) */
.intro-tiles {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Pojedynczy kafelek */
.tile {
background-color: #fff;
border: 1px solid #ccc;
padding: 2rem;
width: 584px;
transition: transform 0.5s ease;
}
.tile:hover {
transform: scale(1.05);
z-index: 2;
}
.tile-podatki {
background: url("images/icon-podatki.svg") no-repeat center center;
background-size: 40% auto; /* wielkość ikony, dopasuj do preferencji */
background-color: #f8f8f8;
background-position: -20% center;
}
.tile-prawo {
background: url("images/icon-prawo.svg") no-repeat center center;
background-size: 40% auto; /* wielkość ikony, dopasuj do preferencji */
background-color: #f8f8f8;
background-position: 120% center;
}
/* Przyciski w kafelkach - można skorzystać z Twoich styli "button",
lub zrobić bardziej unikatowe */
.tile button {
background-color: #4b4b4b;
color: #fff;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
text-align: center;
}
/* Sekcja "oferta" (możesz użyć w .offer-section: YTA Podatki, YTA Prawo) */
.offer-section {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}
.offer-section h2 {
margin-top: 0;
margin-bottom: 1rem;
text-align: center;
}
.offer-section ul {
list-style: disc;
margin-left: 1.5rem;
margin-top: 1rem;
}
.about-section {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
text-align: center;
}
.contact-section {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
text-align: center;
}
.menu-container {
position: absolute;
top: 13px;
height: 40px;
right: 10px;
padding: 0px 0px;
display: flex;
align-items: center;
gap: 10px;
}
button {
/* margin: 10px 0; */
padding: 10px;
width: 150px;
transition: border-radius 0.5s, box-shadow 0.5s;
cursor: pointer;
border: 0px solid rgba(0,0,0,0.1);
background-color: white;
border-radius: 5px;
color: #4f4f4f;
font-size: 13px;
text-align: left;
font-family: inherit;
text-shadow: 0px -0.5px 0px black;
}
.side-menu button{
background-color: #2b2b2b;
color: rgb(255 255 255);
width: 99%;
border-radius: 5px;
margin-top: 0px;
margin-bottom: 5px;
}
.side-menu button:hover {
background: #3b3b3b;
color: rgb(255 255 255);
}
/* Efekty wizualne przycisków przy klikaniu */
button:hover {
color: #000000;
background-color: #eeeeee;
box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.05);
}
/* Styl przycisku */
.menu-button1 {
position: fixed;
top: 23px;
left: 15px;
width: 40px;
height: 30px;
cursor: pointer;
z-index: 2001;
opacity: 0.8; /* Przezroczystość */
transition: left 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.menu-button1:hover .line1.move-right {
background-color: #000000bd;
}
.menu-button1:hover .line2.move-right {
background-color: #000000bd;
}
.menu-button1:hover .line3.move-right {
background-color: #000000bd;
}
@keyframes hideAndShow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hideAndShow1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.menu-button1 .line1.disappear {
animation: hideAndShow 2s ease-in-out;
}
.menu-button1 .line2.disappear {
animation: hideAndShow 2s ease-in-out;
}
.menu-button1 .line3.disappear {
animation: hideAndShow 2s ease-in-out;
}
.menu-button1 .line1.appear {
animation: hideAndShow1 2s ease-in-out;
}
.menu-button1 .line2.appear {
animation: hideAndShow1 2s ease-in-out;
}
.menu-button1 .line3.appear {
animation: hideAndShow1 2s ease-in-out;
}
.menu-button1 .line1 {
width: 20%;
height: 1.5px;
background-color: #000000;
margin: 5px 0;
border-radius: 10px;
transition: width 0.3s;
}
.menu-button1 .line2 {
width: 35%;
height: 1.5px;
background-color: #000000;
margin: 5px 0;
border-radius: 10px;
transition: width 0.3s;
}
.menu-button1 .line3 {
width: 50%;
height: 1.5px;
background-color: #000000;
margin: 5px 0;
border-radius: 10px;
transition: width 0.3s;
}
.menu-button1:hover .line1 {
width: 50%;
height: 1.5px;
background-color: #000000;
margin: 5px 0;
border-radius: 10px;
}
.menu-button1:hover .line2 {
width: 50%;
height: 1.5px;
background-color: #000000;
margin: 5px 0;
border-radius: 10px;
}
.menu-button1:hover .line3 {
width: 50%;
height: 1.5px;
background-color: #000000;
margin: 5px 0;
border-radius: 10px;
}
/* Styl menu */
/* =====================================================================
Layout / Navigation — Side menu + overlays
===================================================================== */
.side-menu::after {
content: '';
position: absolute;
right: 0; /* Przylega do prawej ściany */
top: 50%; /* Pozycjonowanie względem środka */
transform: translateY(-50%); /* Przesunięcie, aby wyśrodkować w pionie */
width: 1px; /* Szerokość ramki */
height: 100%; /* Długość ramki */
/* background-color: rgb(169, 169, 169, 0.9); */ /* Kolor ramki */
}
.side-menu ul {
list-style-type: none;
padding: 0;
margin-top: 5px;
margin-bottom: 0px;
}
.bottom-btn-logout2 {
margin-bottom: 0px;
}
.side-menu ul li {
padding: 20px 0;
}
/* Overlay (półprzezroczyste tło) */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 150; /* Pomiędzy menu a resztą */
display: none; /* Domyślnie ukryte */
}
.overlay.active {
display: block;
}
/* Ukryj przycisk, gdy menu jest aktywne */
.menu-button1.hidden {
display: block;
}
.hidden {
display: none !important;
}
/* =====================================================================
Components — Chat / Composer / Scroll controls
===================================================================== */
.bottom-box {
position: fixed;
width: 52%;
left: 50%;
transform: translateX(-50%);
/*bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);*/
/* brak sztywnej wysokości – box rośnie z textarea */
min-height: 30px;
max-height: 40vh; /* zabezpieczenie, żeby nie zalał całego ekranu */
background-color: #fff;
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 0 6px rgba(0,0,0,0.1);
padding: 8px 12px; /* bez sztucznego miejsca na przycisk */
z-index: 1000;
/* układ poziomy: textarea + przycisk obok siebie, wyśrodkowane pionowo */
display: flex;
align-items: center;
gap: 8px;
}
.bottom-box:hover {
background-color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* ===================== */
/* Bottom input — FINAL */
/* ===================== */
.bottom-box{
display: flex;
align-items: flex-end; /* textarea może rosnąć */
gap: 8px;
}
/* textarea wypełnia, przycisk zawsze po prawej */
.bottom-box .question-box{
flex: 1 1 auto;
min-width: 0; /* bardzo ważne na mobile, żeby flex nie wypychał buttona */
margin: 0; /* usuń margin 0 4% 0 0 — to robi „dziury” i może wypychać */
padding: 6px 8px;
}
/* przycisk to element flex, NIE fixed */
.bottom-box .send-it{
flex: 0 0 auto;
position: static; /* kluczowe: żadnego fixed */
margin: 0; /* bez dziwnych marginów */
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.question-box {
flex: 1 1 auto; /* wypełnia dostępne miejsce między lewą krawędzią a przyciskiem */
width: 100%;
border: none;
background-color: transparent;
color: #000;
font-family: inherit;
box-sizing: border-box;
min-height: 24px;
max-height: 20vh; /* max wysokość samego textarea */
height: auto;
resize: none;
overflow-y: hidden; /* brak wewnętrznego scrolla – wysokość steruje JS */
outline: none;
overflow-y: auto;
padding: 2px 4px;
margin: 0px 4% 0px 0px;
}
.bottom-box button {
flex: 0 0 auto;
position: static; /* przyjmuje pozycję w flexboxie, nie fixed */
/* margin: 0 0 0 8px; */
right: 1%;
height: 30px;
width: 30px;
background-color: #000000;
border-radius: 50%;
}
.bottom-box .send-it{
margin-left: auto;
}
.model button {
font-family: "Quicksand", sans-serif;
font-weight: 400;
text-align: left;
}
.model button:active {
background-color: #dfdfdf;
color: #000000;
}
.response-box {
width: 100%;
min-height: 10px;
text-align: left;
/* padding-right: 100px; */
margin-top: 20px;
margin-bottom: 20px;
text-align: justify;
/* OPT: duże odpowiedzi/notatki – renderuj tylko to, co jest w viewport (mniej freezów) */
content-visibility: auto;
contain-intrinsic-size: 800px;
}
.qusetionwr {
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
min-height: 10px;
text-align: left;
font-weight: 550;
text-align: justify;
}
#main-container {
width: 100%;
max-width: 600px; /* Maksymalna szerokość kontenera głównego */
margin: 0 auto;
padding: 10px;
border: 1px solid #ddd;
}
.dynamic-div {
padding: 10px;
margin-top: 10px; /* Odstęp między dodanymi divami */
background-color: #f0f0f0;
border: 1px solid #ccc;
word-wrap: break-word; /* Zawija długie słowa */
}
.box-container {
margin-top: 5px;
transform: translateX(-50%);
bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-box-reserved-h, var(--bottom-box-h)) + 14px);
scroll-behavior: smooth;
}
.linebtw {
position: relative;
width: 90%;
height: 1px;
background-color: rgb(169, 169, 169, 0.3);
margin-top: 20px;
margin-bottom: 20px;
border-radius: 10px;
left: 50%; /* Ustawienie lewego marginesu na 50% szerokości ekranu */
transform: translateX(-50%); /* Przesunięcie boxa o połowę jego szerokości w lewo */
}
/* Dla przeglÄ…darek opartych na Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 5px; /* szerokość scrollbara */
height: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* kolor tła scrollbara */
border-radius: 500px /* opcjonalnie zaokrÄ…glenie */
}
::-webkit-scrollbar-thumb {
background: #9999; /* kolor suwaka */
border-radius: 50px; /* zaokrÄ…glenie suwaka */
}
::-webkit-scrollbar-thumb:hover {
background: #888; /* kolor suwaka podczas najechania myszÄ… */
}
.loader {
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 3px solid #f3f3f3; /* Light gray background */
border-top: 3px solid #696969; /* Blue top border for effect */
border-radius: 50%; /* Rounded shape */
width: 15px; /* Width */
height: 15px; /* Height */
animation: spin 1s linear infinite; /* Animation */
overflow: hidden;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader1 {
position: relative;
top: 3px;
left: 10px;
border: 3px solid #f3f3f3; /* Light gray background */
border-top: 3px solid #696969; /* Blue top border for effect */
border-radius: 50%; /* Rounded shape */
width: 15px; /* Width */
height: 15px; /* Height */
animation: spin1 1s linear infinite; /* Animation */
overflow: hidden;
}
@keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
button.loading1 {
pointer-events: none;
cursor: not-allowed;
}
button.loading1:hover {
background-color: white;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
/* Ukrycie scrollbara */
.twoj-element::-webkit-scrollbar {
display: none;
}
body.loading {
overflow: hidden;
}
/* =====================================================================
Pages — Login / Auth
===================================================================== */
.containerlogin {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 90vh;
padding: 10px 0;
margin: 40px auto;
box-sizing: border-box;
width: 100%;
}
.login-box {
width: 500px;
padding: 30px;
border-radius: 6px;
border: 1px solid #e7e7e7;
box-sizing: border-box;
background-color: #ffffff;
transition: border-radius 0.3s;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
}
.login-input {
width: 100%;
padding: 15px;
margin: 15px 0;
border-radius: 6px;
border: 1px solid #e7e7e7;
box-sizing: border-box;
transition: box-shadow 0.5s;
}
.login-input:hover {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
}
.login-input:focus {
outline: none;
}
.login-submit {
display: flex;
padding: 15px;
width: 100%;
border-radius: 10px;
border: none;
cursor: pointer;
text-align: center;
border: 1px solid #e7e7e7;
height: 55px;
justify-content: center;
}
.register-link {
margin-top: 20px;
text-align: center;
}
.register-link a {
color: #007BFF;
text-decoration: none;
}
.register-link a:hover {
text-decoration: underline;
}
.pin-v {
padding: 20px;
text-align: center;
font-size: 24px;
color: rgb(0, 0, 0);
cursor: default;
}
#paymentBox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1000px;
height: 450px;
border-radius: 8px;
border: 1px solid #e6e6e6;
background-color: white;
padding: 20px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.pay {
text-align: center;
}
.left, .right1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.left button, .right1 button {
margin: 15px 0;
width: 300px;
}
.left h3, .right1 h3 {
text-align: center;
}
.left a, .right1 a {
text-align: left;
}
#overlay1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.02);
z-index: 999;
}
#overlay1, #paymentBox {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0s 0.5s;
}
#userbutton {
border: none;
padding: 9px;
height: 40px;
width: 40px;
margin: 0px;
}
.show {
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.5s ease !important;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 0px;
gap: 0px;
}
.header {
grid-column: 1 / -1;
/* padding: 20px; */
height: 50px;
}
.column {
padding-bottom: 20px;
}
.bottom-container{
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--toast-safe) + var(--bottom-box-h) + 14px);
z-index: 2000;
/* ważne: niech kontener NIE wymusza szerokości, która może powodować "pływanie" */
width: auto;
height: auto;
}
.bottom-container button {
width: 35px;
height: 35px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.bottom-container button {
display: inline-flex;
align-items: center;
justify-content: center;
}
.bottom-container svg {
transition: opacity 0.3s ease;
}
.bottom-container #copyIcon, .bottom-container #confirmIcon {
width: 22px;
height: 22px;
}
#scrollDownButton {
display: none;
/*bottom: 90px; dobierz pod bottom-box */
/*bottom: calc(var(--toast-safe) + var(--bottom-box-h) + 10px); */
z-index: 1900;
border-radius: 50%;
}
#scrollDownButton[style*="display: none"] {
opacity: 0;
}
#scrollDownButton {
z-index: 2000;
}
.bottom-container #scrollDownButton {
transition: opacity 0.3s ease;
text-align: center;
}
.linesidemenu {
width: 250px;
height: 0.5px;
background-color: rgb(169, 169, 169, 0.3);
margin-top: 5px;
}
.linesidemenu1 {
width: 250px;
height: 0.5px;
background-color: rgb(169, 169, 169, 0.3);
margin-top: 10px;
margin-bottom: 10px;
}
.linesidemenu2 {
display: none; /* Ukryty do momentu kliknięcia */
width: 250px;
height: 0.5px;
background-color: rgb(169, 169, 169, 0.3);
margin-top: 10px;
margin-bottom: 10px;
}
.linesidemenu21 {
display: none; /* Ukryty do momentu kliknięcia */
width: 250px;
height: 0.5px;
background-color: rgb(169, 169, 169, 0.9);
margin-top: 10px;
margin-bottom: 10px;
}
.linesidemenu22 {
display: none; /* Ukryty do momentu kliknięcia */
width: 250px;
height: 0.5px;
background-color: rgb(169, 169, 169, 0.9);
margin-top: 10px;
margin-bottom: 10px;
}
.linesidemenu2.show {
display: block;
opacity: 1;
}
.linesidemenu3 {
width: 250px;
height: 0.5px;
background-color: rgb(169, 169, 169, 0.9);
margin-top: 5px;
margin-bottom: 10px;
}
.teksth1 {
display: flex;
font-size: 13px;
font-weight: 600;
color: rgb(255 255 255);
padding: 5px 10px;
border-radius: 5px;
margin-bottom: 0px;
margin-top: 40px;
height: 26px;
align-items: center;
}
.historia button {
border: 0px solid #ececec ;
}
.historia {
overflow: visible !important;
height: 240px;
}
/* Tooltip container */
.tooltip-container{
position: relative;
display: inline-block;
}
/* Button styling */
.tooltip-container button{
width: 33px;
height: 33px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Host dla tooltipów bez wrappera (np. ikony w topbar/bottom-box) */
.has-tooltip{
position: relative;
}
/* Styl dla dymku (nowoczesny, lekki) */
.tooltip-text,
.tooltip-text1{
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translate(-50%, 6px);
padding: 8px 10px;
border-radius: 12px;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(15, 23, 42, 0.14);
box-shadow: 0 16px 50px rgba(0,0,0,0.16);
color: rgba(17,24,39,0.92);
font-size: 12.5px;
line-height: 1.25;
font-weight: 600;
text-align: center;
max-width: 260px;
white-space: normal;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1400;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
transition:
opacity 0.14s ease,
transform 0.14s ease,
visibility 0s linear 0.14s;
}
/* Tooltip pod elementem (dla topbara) */
.has-tooltip.tooltip-bottom .tooltip-text,
.has-tooltip.tooltip-bottom .tooltip-text1{
top: calc(100% + 10px);
bottom: auto;
transform: translate(-50%, -6px);
}
/* Pokaż dymek na hover / focus */
.tooltip-container:hover .tooltip-text,
.tooltip-container:hover .tooltip-text1,
.tooltip-container:focus-within .tooltip-text,
.tooltip-container:focus-within .tooltip-text1,
.has-tooltip:hover .tooltip-text,
.has-tooltip:hover .tooltip-text1,
.has-tooltip:focus-visible .tooltip-text,
.has-tooltip:focus-visible .tooltip-text1,
.has-tooltip:focus-within .tooltip-text,
.has-tooltip:focus-within .tooltip-text1{
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition:
opacity 0.14s ease,
transform 0.14s ease,
visibility 0s;
}
/* Dla tooltip-bottom: animacja z góry w dół */
.has-tooltip.tooltip-bottom:hover .tooltip-text,
.has-tooltip.tooltip-bottom:hover .tooltip-text1,
.has-tooltip.tooltip-bottom:focus-visible .tooltip-text,
.has-tooltip.tooltip-bottom:focus-visible .tooltip-text1,
.has-tooltip.tooltip-bottom:focus-within .tooltip-text,
.has-tooltip.tooltip-bottom:focus-within .tooltip-text1{
transform: translate(-50%, 0);
}
/* ========================= */
/* COPY MENU — MODERN (v3) */
/* ========================= */
:root{
--copy-font: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--copy-bg: rgba(255, 255, 255, 0.92);
--copy-border: rgba(15, 23, 42, 0.12);
--copy-shadow: 0 18px 55px rgba(0,0,0,0.20);
--copy-text: rgba(17, 24, 39, 0.92);
--copy-muted: rgba(17, 24, 39, 0.55);
--copy-radius: 14px;
--copy-item-radius: 12px;
--copy-gap: 8px;
}
/* wrapper – stabilny stacking context dla menu */
.copywrap{
position: relative;
display: inline-block;
z-index: 5000; /* ważne: wyżej niż side-menu (1200) i top-bar (1000) */
isolation: isolate; /* robi własny stacking context = przewidywalne nakładanie */
}
/* sam przycisk kopiowania: delikatnie nowocześniej (opcjonalnie) */
.copywrap .copybutton{
font-family: var(--copy-font);
-webkit-tap-highlight-color: transparent;
}
/* menu – domyślnie NAD przyciskiem */
/* =====================================================================
Components — Copy menu / Code actions
===================================================================== */
.copy-menu{
position: absolute;
right: 0;
bottom: calc(100% + 10px); /* klucz: zawsze nad buttonem */
top: auto;
min-width: 180px;
padding: 8px;
border-radius: var(--copy-radius);
/* background: var(--copy-bg);
border: 1px solid var(--copy-border);
box-shadow: var(--copy-shadow);
backdrop-filter: blur(14px);*/
z-index: 6000; /* jeszcze wyżej niż .copywrap (dla pewności) */
transform-origin: 90% 100%;
transform: translateY(6px) scale(0.98);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .14s ease,
transform .14s ease,
visibility 0s linear .14s;
font-family: var(--copy-font);
}
/* stan otwarty (JS ustawia data-open="1") */
.copywrap[data-open="1"] .copy-menu{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
transition:
opacity .14s ease,
transform .14s ease,
visibility 0s;
}
/* elementy menu */
.copy-menu-item{
width: 100%;
margin: 0;
padding: 11px 12px;
border-radius: var(--copy-item-radius);
border: 1px solid rgba(0,0,0,0.06);
background: rgba(15, 23, 42, 0.03);
text-shadow: none;
color: var(--copy-text);
font-family: var(--copy-font);
font-size: 13.5px;
font-weight: 650;
line-height: 1.2;
display: flex;
align-items: center;
gap: var(--copy-gap);
cursor: pointer;
user-select: none;
}
.copy-menu-item + .copy-menu-item{
margin-top: 6px;
}
/* hover/focus */
.copy-menu-item:hover{
background: rgba(15, 23, 42, 0.06);
box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.copy-menu-item:active{
transform: translateY(1px);
}
.copy-menu-item:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(44, 100, 255, 0.22);
}
/* ikony w opcjach (dodamy w HTML/JS albo pseudo-elementem) */
.copy-menu-item[data-copy-mode="text"]::before{
content: "T";
width: 22px;
height: 22px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
color: var(--copy-muted);
background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0.06);
}
.copy-menu-item[data-copy-mode="html"]::before{
content: "<>";
width: 22px;
height: 22px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 900;
color: var(--copy-muted);
background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0.06);
}
/* ========================= */
/* Mobile: większe hit-area */
/* + fallback pod przyciskiem*/
/* ========================= */
@media (max-width: 768px){
.copy-menu{
min-width: 210px;
padding: 10px;
right: -6px; /* delikatnie, żeby nie uciekało poza ekran przy prawym brzegu */
max-width: min(320px, calc(100vw - 24px));
}
.copy-menu-item{
padding: 13px 12px;
font-size: 14px;
}
/* jeśli JS ustawi data-placement="bottom" -> pokaż POD przyciskiem */
.copywrap[data-placement="bottom"] .copy-menu{
top: calc(100% + 10px);
bottom: auto;
transform-origin: 90% 0%;
}
}
/* Dostępność: redukcja animacji */
@media (prefers-reduced-motion: reduce){
.copy-menu,
.copywrap[data-open="1"] .copy-menu{
transition: none !important;
transform: none !important;
}
}
/* =====================================================================
2026-02-07 — Requested UI changes
1) global-status-slot: usuń status-header (zastąpione przez status-steps),
etapy rozłożone równo na szerokości paska postępu, smuklejszy wygląd,
fade-in (opacity:0 -> 0.7) po starcie pytania, fade-out przy zmianie widoku,
oraz .box-container height:75% gdy pasek znika.
===================================================================== */
/* --- global-status-slot: fade-in/out (sterowane klasą .is-visible w JS) --- */
#global-status-slot{
opacity: 0;
transform: translateY(-6px);
transition: opacity 900ms ease, transform 900ms ease;
}
#global-status-slot.is-visible{
opacity: 0.7;
transform: translateY(0);
}
/* Gdy slot jest niewidoczny (opacity:0), nie blokuj kliknięć "niewidzialnym" cardem */
#global-status-slot:not(.is-visible) .status-area{ pointer-events: none !important; }
#global-status-slot.is-visible .status-area{ pointer-events: auto; }
@media (prefers-reduced-motion: reduce){
#global-status-slot{ transition: none !important; transform: none !important; }
}
/* --- global-status-slot: layout (header -> steps) --- */
#global-status-slot .status-header{
display: none !important;
}
#global-status-slot .status-area{
/* delikatnie chudszy */
padding: 10px 12px !important;
}
#global-status-slot .status-progress{
height: 6px !important;
}
/* Etapy zawsze widoczne i równo rozłożone na długości paska */
#global-status-slot .status-steps{
position: static !important;
inset: auto !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
max-height: none !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: center;
gap: 10px;
}
#global-status-slot .status-step:first-child{ text-align: left; }
#global-status-slot .status-step:last-child{ text-align: right; }
#global-status-slot .status-step.done{ opacity: .78; }
#global-status-slot .status-step.active{ opacity: 1; color: rgba(255,255,255,.98); }
/* Ukryty (a11y) opis stanu – pozostaje aktualizowany przez JS */
#global-status-slot .status-a11y{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* --- box-container: większy gdy status-slot znika --- */
@media (min-width: 769px){
.box-container{
transition: height 900ms ease;
}
#global-status-slot.is-hidden + .chatMenu .box-container{
height: 75% !important;
}
}
@media (prefers-reduced-motion: reduce){
@media (min-width: 769px){
.box-container{ transition: none !important; }
}
}
.history-btn:hover .tooltip-text1 {
visibility: visible;
opacity: 1;
}
.history-btn {
position: relative;
display: inline-block;
align-items: center;
justify-content: space-between;
width: 91%;
border-radius: 5px;
margin-top: 0px;
margin-bottom: 5px;
padding: 10px;
transition: border-radius 0.5s, box-shadow 0.5s;
cursor: pointer;
border: 0px solid rgba(0,0,0,0.1);
background-color: #2b2b2b;
border-radius: 5px;
color: rgb(255 255 255);
font-size: 13px;
text-align: left;
font-family: inherit;
text-overflow: ellipsis; /* Dodaj wielokropek na końcu */
overflow: visible !important;
}
.cloudHistory {
overflow: hidden; /* Ukryj nadmiarowy tekst */
white-space: nowrap; /* Nie Å‚am tekstu */
text-overflow: ellipsis; /* Dodaj wielokropek */
display: inline-block; /* Ustaw tekst w jednej linii */
max-width: 90%; /* Ogranicz szerokość tekstu */
vertical-align: middle; /* Wyrównanie w pionie */
color: rgb(255 255 255);
}
.history-btn:hover {
color: #ffffff;
background-color: #3b3b3b;
box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.05);
}
.historytext {
display: inline-block;
}
.delete-btn {
display: none;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 18px !important;
height: 18px !important;
background: none;
border: none;
cursor: pointer;
}
.delete-btn::before,
.delete-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 2px;
background-color: #888;
transform-origin: center;
}
.delete-btn:hover {
background-color: #d1d1d1;
}
.delete-btn::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.delete-btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.history-btn:hover .delete-btn {
display: inline-block; /* Pokazuje przycisk "Usuń" */
}
/*
.saldo {
position: relative;
font-size: 11px;
}
.saldo1 {
position: relative;
font-size: 11px;
}
.lewo {
padding: 10px;
}
.prawo {
padding: 10px;
margin-left: auto;
}
*/
.userData {
/*
PROFILE-DATA (desktop)
- poprzednio blok miał stałą wysokość 32px, a teraz renderujemy 2 wiersze (limity + ważność),
więc content „wystawał” poniżej top-bar.
- dodatkowo, prawy górny róg jest „zatłoczony” (add_card + user menu), więc odsuwamy badge w lewo.
*/
position: fixed;
top: 7px;
right: 118px; /* miejsce na ikony po prawej (add_card + konto) */
z-index: 1202;
display: flex;
width: auto;
height: auto;
max-width: calc(100vw - 170px);
padding: 8px 10px;
font-size: 12px;
box-sizing: border-box;
}
.userData p, .userData strong {
margin: 0px;
text-align: center;
font-weight: 500;
}
/* --- PROFILE-DATA inner UI (chips + expiry) --- */
.userData .limits-ui{
display: flex;
/* gap: 6px; */
min-width: 0;
flex-direction: column;
}
.userData .limits-ui__row{
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: space-between;
min-width: 0;
align-items: center;
align-content: center;
flex-direction: row-reverse;
}
.userData .limit-chip{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.08);
font-size: 12px;
line-height: 1;
white-space: nowrap;
}
.userData .limit-chip.is-low{
background: rgba(239, 68, 68, 0.10);
border-color: rgba(239, 68, 68, 0.25);
}
.userData .limit-chip__label{
opacity: 0.8;
}
.userData .limit-chip__value{
font-weight: 700;
}
.userData .limits-ui__expiry{
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
opacity: 0.75;
white-space: nowrap;
justify-content: center;
}
.userData .limits-ui__expiry .material-symbols-rounded{
font-size: 16px;
}
.userData .limit-chip__dots{
display: inline-flex;
gap: 3px;
margin-left: 6px;
}
.userData .limit-dot{
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(0,0,0,0.22);
opacity: 0.35;
}
.userData .limit-dot.is-on{
opacity: 1;
}
@media (max-width: 1024px){
#profile-original-container #profile-data.userData .limits-ui__expiry{ display: none; }
#profile-original-container #profile-data.userData .limit-chip__label{ display: none; }
}
.tooltip1 {
position: relative;
display: inline-block;
cursor: pointer;
color: rgb(20 20 20);
}
.tooltip1 .tooltiptext1 {
visibility: hidden;
width: 200px;
background-color: #626262;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 5px;
position: absolute;
z-index: 9999999 !important;
bottom: -210%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltiptext1 {
max-width: 200px;
}
.tooltip1:hover .tooltiptext1 {
visibility: visible;
opacity: 1;
}
#userName {
justify-items: center;
padding: 5px;
font-size: 14px;
}
#userName strong{
display: block;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
}
/*
.main-func {
position: relative;
left: 50%;
transform: translateX(-50%);
font-family: inherit;
width: 60%;
margin-bottom: 200px;
}
.container-func {
position: relative;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
opacity: 0;
transition: opacity 2s ease-in-out;
}
*/
.main-func {
position: relative;
margin: 0 auto 200px auto;
width: 100%;
max-width: 900px; /* albo zostaw 60% */
}
.container-func {
position: relative;
/* usuń left:50% i transform */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
opacity: 0;
transition: opacity 2s ease-in-out;
}
/* JEDYNA definicja pól w kalkulatorze */
.tbl-func {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #d5d5d5;
border-radius: 6px;
background-color: #fff;
color: #000;
font-family: inherit;
font-size: 0.9rem;
line-height: 1.4;
min-height: 44px; /* startowa wysokość */
resize: none; /* user nie rozciąga ręcznie */
overflow-x: hidden;
overflow-y: hidden; /* wysokość kontrolujemy JS-em */
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word;
}
.tbl-func:focus {
border-color: rgb([PHONE]);
box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
outline: none;
}
/*
.button-func {
height: 50px;
width: 300px;
text-align: center;
margin: 25px;
margin-bottom: 30px;
border: 1px solid grey;
border-radius: 5px;
font-size: 16px;
}
*/
/* Przycisk analizy – bardziej „primary” */
.button-func {
height: 46px;
min-width: 260px;
max-width: 320px;
padding: 0 18px;
margin-top: 22px;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
border: none;
background: #000;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.button-func:hover {
background: rgba(0,0,0,0.4);
}
.output-func {
position: relative;
text-align: left;
width: 95%;
left: 50%;
transform: translateX(-50%);
font-family: inherit;
margin-bottom: 30px;
}
.output-func pre {
font-family: inherit;
overflow-wrap: break-word;
white-space: normal;
}
.container-tbl-func {
width: 600px;
margin: 15px;
height: 47px;
}
.container-tbl-func label {
text-align: left;
margin-left: 10px;
}
.p-func {
width: 600px;
text-align: justify;
}
#additionalButtons {
overflow: hidden;
max-height: 0;
transition: max-height 0.8s linear;
}
#additionalButtons.active {
max-height: 400px; /* Dopasuj do wysokości przycisków */
overflow-y: auto;
}
#additionalButtons1 {
overflow: hidden;
height: 0;
transition: height 0.8s linear;
}
#additionalButtons1.active {
height: 82px; /* Dopasuj do wysokości przycisków */
overflow-y: auto;
}
/* Stylizacja przełączników */
.toggle-container {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.toggle-label {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
cursor: pointer;
font-size: 14px;
}
.toggle-label a {
text-decoration: none;
color: #007bff;
}
.toggle-label a:hover {
text-decoration: underline;
}
.toggle-label input {
display: none;
}
.toggle-slider1 {
position: relative;
width: 40px;
height: 16px;
background: #ccc;
border-radius: 16px;
transition: background 0.3s;
}
.toggle-slider1::before {
content: "";
position: absolute;
top: 2px;
left: 3px;
width: 13px;
height: 13px;
background: white;
border-radius: 50%;
transition: transform 0.3s;
}
.toggle-slider {
position: relative;
width: 40px;
height: 20px;
background: #ccc;
border-radius: 18px;
transition: background 0.3s;
display: inline-block;
margin-left: inherit;
vertical-align: middle;
}
.toggle-slider::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s;
}
/* Gdy przycisk ma klasę .active, zmień suwak na 'włączony' */
.context.active .toggle-slider {
background: #000000;
}
.context.active .toggle-slider::before {
transform: translateX(20px);
}
.toggle-label input:checked + .toggle-slider {
background: #4caf50;
}
.toggle-label input:checked + .toggle-slider::before {
transform: translateX(20px);
}
/* Stylizacja modali */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
width: 800px;
max-height: 80vh;
text-align: left;
overflow-y: auto;
}
.modal-content h2 {
text-align: center;
}
.close {
position: absolute;
top: 10px;
right: 20px;
font-size: 20px;
cursor: pointer;
}
/* Dymek ostrzegawczy */
.warning-bubble {
display: none;
background-color: rgba(255, 0, 0, 0.8);
color: white;
padding: 10px;
border-radius: 5px;
text-align: center;
position: relative;
top: -10px;
margin-bottom: 10px;
font-size: 14px;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.tools-button {
display: flex;
}
#toggleMoreButton {
margin-top: 0px;
transition: margin-top 0.5s ease;
}
.tools-button span {
transition: transform 0.3s ease-in-out;
}
.tools-button.active span {
transform: rotate(360deg);
}
#togglePlus {
display: flex;
margin-left: auto;
font-family: auto;
}
#togglePlus1 {
display: flex;
margin-left: auto;
font-family: auto;
}
.settings-menu.active, #usermenu.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.home-Topbar button {
text-align: center;
font-size: 16px;
padding: 0px;
}
.homeLeft-topBar button {
margin:0px;
border-radius: 0px;
height: 60px;
transition: transform 0.1s ease;
}
.homeLeft-topBar button:hover {
background-color: rgba(0, 0, 0, 0.1);
transform: scale(1.05);
}
.homeLeft-topBar {
position: absolute;
top: 0%;
left: 50%;
transform: translateX(calc(-50% - 350px));
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 60px;
gap: 0px;
}
.homeRight-topBar button {
height: 40px;
padding: 5px;
}
.homeRight-topBar {
position:absolute;
top: 0%;
right: 20px;
color: black;
}
/* Prosty reset / bazowe ustawienia */
#hero {
opacity: 0;
transition: opacity 1s ease-in;
}
#yta-tiles {
opacity: 0;
transition: opacity 1s ease-in;
}
#yta-podatki {
opacity: 0;
transition: opacity 1s ease-in;
}
#yta-prawo {
opacity: 0;
transition: opacity 1s ease-in;
}
#about {
opacity: 0;
transition: opacity 1s ease-in;
}
#cta {
opacity: 0;
transition: opacity 1s ease-in;
}
header, main, footer {
width: 100%;
margin: 0 auto;
overflow-x: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 3;
background-color: white;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 0;
}
nav {
display: flex;
justify-content: flex-end;
gap: 20px;
margin-top: 20px;
}
nav a {
font-weight: 500;
}
/* Sekcja HERO */
.hero {
padding: 0 0;
text-align: center;
background-color: #f8f8f8;
}
.hero h1 {
font-size: 2rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1rem;
max-width: 700px;
margin: 0 auto 30px auto;
line-height: 1.5;
}
.button-primary {
padding: 12px 24px;
background-color: #333;
color: #fff;
border-radius: 4px;
transition: background-color 0.3s;
display: inline-block;
margin-top: 10px;
}
.button-primary:hover {
background-color: #555;
}
/* Sekcja USLUGI */
.services {
text-align: center;
background-color: #fff;
}
.services h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.services p.section-description {
max-width: 700px;
margin: 0 auto 40px auto;
color: #666;
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
justify-content: center;
}
.last-row {
display: flex;
justify-content: center;
grid-column: span 4;
gap: 20px;
}
.service-item {
flex: 0 1 auto;
background-color: #f0f0f0;
border-radius: 4px;
padding: 20px;
text-align: center;
transition: transform 0.3s ease;
}
.service-item:hover {
transform: scale(1.1);
z-index: 2;
}
.service-item h3 {
margin-bottom: 10px;
font-size: 1.1rem;
}
/* Sekcja O NAS */
.about {
text-align: center;
background-color: #fafafa;
}
.about h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.about .section-description {
max-width: 700px;
margin: 0 auto 30px auto;
color: #666;
}
/* CTA */
.cta {
text-align: center;
background-color: #fff;
}
.cta h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.cta p {
color: #666;
max-width: 600px;
margin: 0 auto 30px auto;
line-height: 1.5;
}
/* FOOTER */
footer {
text-align: center;
padding: 20px;
background-color: #f0f0f0;
padding-left: 0px;
padding-right: 0px;
}
footer p {
margin: 5px 0;
color: #666;
}
.historia, .history-btn, #contentBelow {
overflow-x: visible !important;
position: relative !important;
z-index: 10 !important;
overflow-y: hidden;
}
#contentBelow {
font-family: "Quicksand", sans-serif;
font-weight: 300;
margin-top: 0px;
transition: margin-top 0.5s ease;
}
#contentBelow .linesidemenu {
height: 1px;
background-color: rgb(169, 169, 169, 0.9);
}
#settings:hover,
#settings.hover-active {
color: #000000;
background-color: #eeeeee;
box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.05);
}
.app-switcher {
position: relative;
display: inline-block;
}
/* Panel z przyciskami wyboru aplikacji */
.app-chooser {
position: absolute;
top: 100%;
right: 0;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
padding: 8px;
border-radius: 4px;
}
/* Przyciski w panelu wyboru (YTA Podatki / YTA Prawo) */
.app-chooser button {
display: block;
width: 100%;
margin: 4px 0;
padding: 8px;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
text-align: left;
}
.app-chooser button:hover {
background-color: #eee;
}
.overlay2 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
}
/* Okienko modalne */
.modal-box {
background-color: #fff;
width: 600px;
height: 450px;
max-width: 90%;
padding: 60px;
border-radius: 8px;
position: relative;
align-content: center;
text-align: center;
align-items: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/* Przycisk zamykania okna (X) */
.close-btn {
position: absolute;
top: 10px;
width: 24px;
padding: 0px;
margin: 0px;
right: 10px;
background: none;
border: none;
font-size: 18px;
text-align: center;
cursor: pointer;
}
/* Tytuł i opis w oknie (opcjonalne) */
.modal-box h2 {
margin-top: 0;
margin-bottom: 10px;
font-size: 2.5rem;
}
.modal-box h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.5rem;
}
.modal-box p {
margin-bottom: 40px;
line-height: 1.4;
font-size: 1rem;
color: #333;
}
/* Kontener przycisków */
.modal-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Dostosuj ilość kolumn */
gap: 20px;
justify-content: center; /* Centruje cały grid w poziomie */
justify-items: center;
}
/* Przykład stylu przycisków w oknie */
.modal-buttons button {
background-color: #414141;
border: none;
color: #fff;
width: 180px;
height: 50px;
padding: 12px;
border-radius: 4px;
cursor: pointer;
text-align: center;
transition: transform 0.3s ease;
font-size: 1.2rem;
}
.tile2 {
padding: 15px;
height: 280px;
border: 1px solid #ccc;
transition: transform 0.5s ease;
}
.tile2:hover {
transform: translateY(-10px);
}
.lastthread {
position: relative;
z-index: 1;
font-weight: 400;
justify-self: left;
margin-left: 2px;
font-size: 13px;
font-weight: 600;
pointer-events: none;
margin-top: 40px;
}
.modal-buttons button:hover {
transform: scale(1.1); /* powiększenie do 110% */
z-index: 2;
}
.modal-buttons button:hover {
background-color: #6b6b6b;
}
.form-popup {
position: relative;
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
z-index: 1000;
width: 80%;
max-width: 900px;
height: 500px;
left: 50%;
transform: translateX(-50%);
}
.form-box {
display: flex;
gap: 15px;
min-width: 250px;
flex-direction: column;
align-items: center;
}
.form-box h3 {
text-align: center;
font-size: 20px;
margin-top: 10px;
}
.form-box button {
align-self: center;
text-align: center;
width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.form-box label {
display: flex;
flex-direction: column;
font-weight: bold;
}
.form-box input {
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
}
.tooltippay {
position: relative;
display: inline-block;
color: #2c64ff;
font-size: 15px;
margin-left: 8px;
}
.tooltippay i {
cursor: pointer;
transition: color 0.3s ease;
}
.tooltippay i:hover {
color: #0056b3;
}
.tooltippaytext {
visibility: hidden;
opacity: 0;
max-width: 200px;
width: 160px;
background: #6f6f6f;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 5px;
position: absolute;
z-index: 10;
top: 28px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
line-height: 1.3;
font-weight: 500;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
transition: opacity 0.3s ease;
}
.tooltippay:hover .tooltippaytext {
visibility: visible;
opacity: 1;
}
.form-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.1); /* przyciemnienie */
z-index: 999;
}
.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #999;
}
.close-button:hover {
color: #000;
}
.form-column {
display: flex;
column-gap: 200px;
row-gap: 20px;
margin-bottom: 20px;
}
.selected-info {
margin-top: 20px;
font-size: 20px;
}
.form-column-left {
display: flex;
flex-direction: column;
row-gap: 20px;
width: 400px;
}
.form-column-right {
display: flex;
flex-direction: column;
row-gap: 20px;
width: 50%;
}
.star {
color: #eb3131;
}
.side-menu .selectedModel {
background-color: rgb(139 140 143 / 90%); /* Kolor tła dla zaznaczonego przycisku */
color: rgb(255 255 255); /* Kolor tekstu */
}
.selectedModel button:hover {
background-color: #007BFF; /* Kolor tła dla zaznaczonego przycisku */
color: white; /* Kolor tekstu */
}
.models-typ {
text-align: left;
font-family: "Quicksand", sans-serif;
font-size: 14px;
font-weight: 600;
}
.model .models-typ {
font-size: 13px;
font-weight: 600;
margin-top: 50px;
}
.model #toggleMoreButton {
font-size: 13px;
font-weight: 600;
}
.context-tooltip {
position: relative;
overflow: visible;
}
.tooltip-inline {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: -10%;
left: 0;
transform: translateX(-220px);
background-color: #474747;
color: #fff;
padding: 6px 10px;
border-radius: 5px;
white-space: normal;
z-index: 1000;
transition: opacity 0.3s ease-in-out;
font-size: 14px;
max-width: 220px;
text-align: center;
}
.tooltip-inline1 {
visibility: hidden;
opacity: 0;
position: absolute;
top: -10%;
right: 0%;
transform: translateX(-220px);
background-color: #474747;
color: #fff;
padding: 6px 10px;
border-radius: 5px;
white-space: normal;
z-index: 1000;
transition: opacity 0.3s ease-in-out;
font-size: 13px;
max-width: 300px;
text-align: center;
}
.context-tooltip:hover .tooltip-inline {
visibility: visible;
opacity: 1;
}
.context-tooltip:hover .tooltip-inline1 {
visibility: visible;
opacity: 1;
}
.payIcon {
width: 24px;
height: 24px;
margin-bottom: 0px;
}
.plusForpayment {
position: fixed;
right: 68px;
top: 21px;
padding: 0;
margin: 0;
font-size: 0;
margin-left: 5px;
cursor: pointer;
z-index: 1203;
}
.plusForpayment:hover {
background-color: #e4e4e4;
width: 24px;
height: 24px;
border-radius: 5px;
}
svg:not(:root) {
overflow: visible !important;
overflow-clip-margin: unset !important;
}
svg {
overflow: visible !important;
overflow-clip-margin: unset !important;
width: 22px;
height: 22px;
display: inline-block;
fill: currentColor;
}
textarea { height: auto; min-height: 20px; }
textarea, .tbl-func{
white-space: pre-wrap !important; /* zawijanie + zachowanie \n */
overflow-wrap: anywhere; /* łamie bardzo długie ciągi */
word-break: break-word; /* fallback dla Safari */
overflow-x: hidden; /* bez poziomego paska */
}
.register-free-box {
text-align: center;
margin-top: 10px;
margin-bottom: 15px;
}
.free-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: linear-gradient(135deg, #ffb74d, #ff9800);
color: #fff;
font-size: 12px;
font-weight: 700;
margin-bottom: 6px;
}
.register-free-info {
font-size: 14px;
color: #555;
margin: 0;
}
.register-free-info strong {
color: #2e7d32;
}
.pricing-price {
font-size: 22px;
margin: 10px 0;
display: flex;
justify-content: center;
gap: 8px;
align-items: baseline;
}
.old-price {
font-size: 18px;
color: #b5b5b5;
text-decoration: line-through;
}
.new-price {
font-size: 24px;
background: linear-gradient(135deg, #ff9900, #ff6600);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-weight: 700;
}
.pricing-price {
flex-direction: column;
align-items: center;
}
/* Na mobile lekko większy tekst */
@media only screen and (max-width: 768px) {
.register-free-info {
font-size: 15px;
}
}
@media (min-width: 768px) {
.intro-tiles {
flex-direction: row;
justify-content: space-around;
}
.tile {
max-width: 45%;
}
}
@media only screen and (max-width: 768px) {
.login-box {
width: 90% !important;
padding: 20px !important;
box-shadow: none !important;
border: none !important;
}
.containerlogin {
padding: 10px;
}
.login-input,
.login-submit {
font-size: 16px !important;
padding: 14px !important;
height: auto !important;
}
.register-link {
font-size: 15px;
padding: 10px;
}
/*
.popup-container {
bottom: 70px;
left: 10px;
right: 10px;
align-items: center;
}
.popup {
width: 100%;
max-width: 300px;
}
*/
.popup-container{
right: 12px;
left: 12px;
align-items: stretch;
}
.popup{
width: 100%;
border-radius: 14px;
}
.toggle-label {
font-size: 14px;
line-height: 1.3;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.toggle-label a {
font-size: 14px;
}
.toggle-slider {
width: 45px;
height: 25px;
border-radius: 30px;
}
.toggle-label input[type="checkbox"] {
width: 0;
height: 0;
visibility: hidden;
}
.toggle-label input[type="checkbox"] + .toggle-slider {
display: inline-block;
background-color: #ccc;
position: relative;
cursor: pointer;
transition: 0.4s;
}
.toggle-label input[type="checkbox"]:checked + .toggle-slider {
background-color: #4CAF50;
}
.toggle-slider::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: white;
border-radius: 50%;
transition: 0.4s;
}
.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
transform: translateX(20px);
}
.pin-v {
font-size: 18px !important;
padding: 10px !important;
}
.modal-content {
width: 80%;
max-width: 500px;
margin: 0 auto;
}
.toggle-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
margin-top: 20px;
}
.top-bar {
flex-direction: column;
gap: 10px;
}
.YTAlogo {
font-size: 16px;
padding-left: 10px;
}
.menu-container {
position: absolute;
top: 15px;
right: 15px;
}
.menu-button1 {
top: 25px;
left: 25px;
width: 35px;
height: 35px;
position: fixed;
}
.line1, .line2, .line3 {
width: 28px;
height: 3px;
margin: 4px 0;
}
.side-menu {
width: 85%;
max-width: 300px;
}
.box-container{
position: fixed; /* zamiast absolute */
height: auto; /* zamiast 70% */
max-height: 70vh;
left: auto;
transform: none;
padding: 10px 12px;
}
.bottom-box {
width: 96%;
left: 50%;
transform: translateX(-50%);
/*bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);*/
bottom: 2px;
min-height: 40px;
max-height: 40vh;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
}
.bottom-box button {
position: static; /* nadpisujemy fixed z głównej definicji */
margin-left: 8px;
}
.question-box {
font-size: 14px;
padding: 2px 4px;
}
.send-it {
width: 100%;
margin-top: 10px;
align-items: center;
}
.bottom-box{
width: 96%;
/*bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);*/
}
.bottom-box .send-it{
width: 38px;
height: 38px;
}
/* usuń/neutralizuj poprzednią regułę, która robiła send-it na 100% */
.send-it{
width: auto;
margin-top: 0;
}
#paymentBox {
width: 95%;
flex-direction: column;
gap: 20px;
}
.grid-container {
display: flex;
flex-direction: column;
align-items: center;
}
.grid-column {
width: 100%;
}
.payButton1 {
width: 100%;
font-size: 16px;
}
/* === INNE === */
#mobile-question-row {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
#mobile-profile-data {
font-size: 15px;
font-weight: 600;
color: #888;
padding: 5px 0;
text-align: center;
}
/*
.settings-menu {
right: 10px;
width: calc(300px - 42px);
max-width: 300px !important;
position: fixed;
top: 345px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
height: 145px;
padding: 15px 20px;
border-radius: 8px;
}
*/
.context {
font-size: 15px;
padding: 10px;
}
.tooltip-inline, .tooltip-inline1 {
font-size: 13px;
transform: translateY(-60px);
}
.chatMenu {
padding: 0 5px;
}
.scrollDownButton {
bottom: 70px;
right: 10px;
}
#mobile-payment-icon {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
#mobile-payment-icon img {
width: 24px;
height: 24px;
cursor: pointer;
}
/* Ukryj #profile-data poza usermenu */
#profile-data:not(#usermenu #profile-data) {
display: none;
}
#userName p {
margin: 0;
}
.tooltip1 {
color: #474747;
}
.form-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-column-left,
.form-column-right {
width: 100%;
}
.form-popup {
width: 90vw;
max-height: 90vh;
overflow-y: auto;
padding: 20px;
}
.form-box {
padding: 10px;
width: 90%;
}
.form-box h3 {
text-align: center;
font-size: 1.2rem;
}
.form-box .selected-info {
text-align: center;
font-size: 1rem;
font-weight: bold;
margin-bottom: 10px;
}
.form-box label {
width: 100%;
}
.form-box input {
width: 100%;
box-sizing: border-box;
}
.form-box button {
width: 100%;
padding: 12px;
font-size: 1rem;
margin-top: 20px;
}
/* Popup wyśrodkowany */
.form-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1001;
background: white;
border-radius: 12px;
padding: 20px;
width: 80%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* Zmiana układu formularza w popupie */
.form-column {
flex-direction: column;
gap: 20px;
}
.form-column-left,
.form-column-right {
width: 100%;
}
/* Wyłącz przewijanie strony pod spodem */
body.modal-open {
overflow: hidden;
}
.container-tbl-func, .p-func {
width: 90%;
}
.main-func {
width: 100%;
}
.button-func {
margin-top: 50px;
}
textarea.tbl-func::placeholder {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* zamiast białej linii z przycinaniem – normalne łamanie tekstu */
textarea.tbl-func {
white-space: pre-wrap; /* łamanie linii z zachowaniem \n */
overflow-wrap: break-word; /* łamanie bardzo długich wyrazów */
word-break: break-word;
overflow-x: hidden;
resize: vertical; /* pozwól użytkownikowi powiększyć w pionie, jeśli chcesz */
}
.container-func h1 {
width: 90%;
}
.output-func {
width: 90%;
}
.two-label-func {
margin-bottom: 35px;
}
}
/* Mobile: jedna kolumna */
@media (max-width: 768px) {
.tool-section {
padding: 12px 12px;
border-radius: 8px;
}
/* =====================================================================
Components — Tools / Forms (contentMap panels)
===================================================================== */
.tool-grid {
grid-template-columns: 1fr;
gap: 8px 0;
}
.tool-header h1 {
font-size: 1.2rem;
}
.tool-header .p-func {
width: 100%;
}
}
#send-it {
/*right: 10px;
bottom: 10px;*/
background: #000;
color: white;
}
pre.hljs {
background-color: #2d2d2d; /* Ciemne tło, np. kolor "Monokai" lub podobny */
color: #cccccc; /* Jasny tekst dla kontrastu */
padding: 15px;
border-radius: 8px; /* Zaokrąglone rogi */
overflow-x: auto; /* Włącz poziome przewijanie dla długich linii */
font-family: "Google Sans Code", monospace; /* Czcionka monospaced */
font-size: 0.725rem;
line-height: 1.3125rem;
margin: 15px 0; /* Odstęp pionowy od reszty czatu */
border: 1px solid #444444; /* Lekka ramka */
position: relative; /* Potrzebne do ewentualnego przycisku kopiowania */
}
/* Upewnij się, że przycisk nie przesłania kodu */
pre.hljs {
padding-top: 30px; /* Zwiększ górny padding, by zrobić miejsce */
}
/* Kod (highlight.js) fallback */
pre.hljs {
padding: 0.8em;
border-radius: 6px;
overflow: auto;
}
pre.hljs {
background-color: #1e1e1e;
color: #e0e0e0;
border-color: #3c3c3c;
}
:not(pre) > code {
background-color: #f0f0f0;
color: #333;
}
pre.hljs code {
display: block;
/* padding: 12px; */
background: none;
color: inherit;
}
pre.hljs code::before {
content: 'code';
display: block;
width: 2em;
text-align: right;
margin-right: 1em;
opacity: 0.5;
}
example {
display: block;
background: #f8f9fb;
border-left: 4px solid #1e88e5;
padding: 1em;
}
note {
display: block;
background-color: #f2f7f9;
border-left: 4px solid #0277bd;
padding: 1em;
}
warning[level="high"] {
background-color: #fff3e0;
border-left: 4px solid #f57c00;
}
/* Styl dla całego bloku kodu */
/*pre {
/*background-color: #2d2d2d; /* Ciemne tło, np. kolor "Monokai" lub podobny */
/*color: #cccccc; /* Jasny tekst dla kontrastu */
/*/*padding: 15px;
/*border-radius: 8px; /* Zaokrąglone rogi */
/*overflow-x: auto; /* Włącz poziome przewijanie dla długich linii */
/*font-family: "Google Sans Code", monospace; /* Czcionka monospaced */
/*font-size: 0.725rem;
/*line-height: 1.3125rem;
/*margin: 15px 0; /* Odstęp pionowy od reszty czatu */
/*border: 1px solid #444444; /* Lekka ramka */
/*position: relative; /* Potrzebne do ewentualnego przycisku kopiowania */
/*}
/* Styl dla samego kodu wewnątrz bloku */
pre code {
/* Usuń domyślne style inline, jeśli byłyby ustawione */
display: block;
padding: 0;
background: none;
color: inherit;
overflow-x: auto;
scrollbar-width: thin; /* dla Firefox — zmniejsza grubość paska */
}
/* Styl dla kodu w tekście, np. zmienna */
:not(pre) > code {
background-color: #e0e0e0; /* Bardzo jasne tło dla kontrastu z jasnym tłem czatu */
color: #444444; /* Ciemniejszy kolor tekstu */
padding: 2px 5px;
border-radius: 4px;
font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 0.9em; /* Trochę mniejszy niż tekst otaczający */
white-space: nowrap; /* Zapobiega łamaniu linii w środku krótkiego kodu */
border: 1px solid #cccccc; /* Lekka ramka, by odróżnić od tła */
}
/* Jeśli tło czatu jest ciemne, użyj tego stylu: */
/*
:not(pre) > code {
background-color: #444444;
color: #f0f0f0;
padding: 2px 5px;
border-radius: 4px;
font-family: ...;
font-size: 0.9em;
white-space: nowrap;
border: 1px solid #555555;
}
*/
.copy-button {
width: 57px;
position: absolute;
top: -2px; /* Odległość od góry */
right: 10px; /* Odległość od prawej */
background-color: rgba(255, 255, 255, 0.1); /* Lekko przezroczyste tło */
color: #ffffff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
opacity: 0.5; /* Lekko niewidoczny, aby nie dominował */
transition: opacity 0.2s, background-color 0.2s;
}
.copy-button:hover {
opacity: 1; /* Pojawia się w całości przy najechaniu */
background-color: rgba(255, 255, 255, 0.2);
}
.typewriter-fade {
opacity: 0;
transition: opacity 0.3s ease;
}
.typewriter-fade:not(:empty) {
opacity: 1;
}
/* Ogólne linki */
a {
/* color: #0b66c2; */
color: inherit;
text-decoration: underline;
transition: color 0.12s ease-in-out;
}
a:hover,
a:focus {
color: #084d94;
}
/* Linki do artykułów i paragrafów */
.article-link {
color: #0b66c2;
text-decoration: none;
border-bottom: 1px dotted currentColor;
font-style: italic;
}
.article-link:hover {
border-bottom-style: solid;
}
.par-link {
color: #0b66c2;
text-decoration: none;
border-bottom: 1px dotted currentColor;
font-style: italic;
}
.par-link:hover {
border-bottom-style: solid;
}
/* Cytaty */
.custom-quote {
border-left: 4px solid #d0d0d0;
margin: 0.8em 0;
padding: 0.6em 1em;
font-style: italic;
background: #fbfbfb;
border-radius: 6px;
}
/* KaTeX */
.katex-display {
font-size: 0.95em;
margin: 0.5em 0;
}
.katex-inline {
font-size: 0.9em;
}
/* Błędy matematyczne */
.math-error {
color: #c00;
background: #fee;
padding: 0.5em;
border-radius: 4px;
}
.copied {
transition: all 0.3s ease;
color: white;
font-weight: bold;
text-align: center;
}
/* Nowy CSS*/
.status-area {
width: 30%;
/*max-width: 420px;*/
margin: 10px auto 0 auto;
font-size: 13px;
color: #555;
position: relative;
bottom: 15px;
}
/*
.status-label {
margin-bottom: 4px;
}
*/
.status-label {
margin-bottom: 10px;
font-size: 12px;
font-weight: 500;
color: #666;
}
.status-progress {
width: 100%;
height: 4px;
background: #eee;
border-radius: 999px;
overflow: hidden;
}
.status-progress-bar {
width: 0;
height: 100%;
background: #000; /* możesz zmienić na rgb([PHONE]) */
transition: width 0.3s ease-out;
}
.status-steps {
display: flex;
justify-content: space-between; /* równe rozłożenie */
gap: 0; /* wyrównanie odstępów */
margin-top: 6px;
font-size: 11px;
}
.status-step {
flex: 1 1 0;
text-align: center;
opacity: 0.45;
white-space: nowrap;
}
/*
.status-steps {
display: flex;
gap: 8px;
margin-top: 6px;
font-size: 11px;
}
.status-step {
opacity: 0.45;
}
*/
.status-step.active {
font-weight: 600;
opacity: 1;
}
/* Nagłówek narzędzia */
.tool-header h1 {
font-size: 1.4rem;
margin-top: 0.5rem;
margin-bottom: 0.75rem;
}
.tool-header .p-func {
font-size: 0.92rem;
color: #555;
}
/* Sekcje formularzy */
.tool-section {
width: 100%;
max-width: 800px;
margin: 18px auto 8px auto;
padding: 14px 18px;
border-radius: 10px;
background: #fafafa;
border: 1px solid #e5e5e5;
}
.tool-section-title {
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 10px 0;
color: #444;
}
/* Siatka pól – 2 kolumny na desktopie, 1 na mobile */
.tool-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr)); /* było: 1fr */
gap: 10px 20px;
}
/* gdy element ma jednocześnie klasy: container_rM i tool-grid */
.container_rM.tool-grid{
grid-template-columns: 1fr !important;
}
/* (opcjonalnie) dopilnuj, że pole wypełnia komórkę grid */
.container_rM.tool-grid .tool-field{
width: 100%;
}
/* większa wysokość startowa textarea */
#income_sources.tbl-func, #user_input.tbl-func, #issue_description.tbl-func {
min-height: 140px;
line-height: 1.45;
}
#questions.tbl-func, #facts.tbl-func, #description.tbl-func, #subject.tbl-func, #type_activity.tbl-func, #questions.tbl-func, #financial_data.tbl-func {
min-height: 88px;
line-height: 1.45;
}
.tool-field {
display: flex;
flex-direction: column;
}
.tool-field label {
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 4px;
}
/* Tylko dla sekcji "Dane podstawowe"
.tool-section:first-of-type .tool-grid {
grid-template-columns: 1fr;
}
*/
/* żeby odpowiedzi nie „wchodziły” pod sticky status */
.MainYTAmenu .chatMenu {
padding-top: 146px; /* ewentualnie większe, jeśli status jest wyższy */
/* padding-top: 80px; */ /* 70px top-bar + ~10px marginesu */
}
/* ===================== */
/* Nagłówek Kalkulatora */
/* ===================== */
.tool-header {
position: relative; /* NIE sticky/fixed/absolute */
z-index: 1; /* nad tłem, ale pod top-bar i status-slot */
width: 100%;
Height: auto;
max-width: 800px;
margin: 12px auto 8px auto;
padding: 18px 22px;
border-radius: 16px;
background: linear-gradient(135deg, #f7f8fb, #eef1f7);
border: 1px solid #dfe3ee;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
/*box-sizing: border-box;*/
display: flex;
flex-direction: column;
gap: 6px;
}
/* Tytuł kalkulatora */
.tool-header h1 {
margin: 0 0 4px 0;
font-family: "Raleway", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 1.55rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #111827; /* ciemny granat/czarny */
}
/* Podtytuł/opis */
.tool-header .p-func {
margin: 0;
width: 100%;
max-width: 100%;
font-family: "Quicksand", system-ui, sans-serif;
font-size: 0.95rem;
line-height: 1.55;
color: #4b5563; /* neutralny szary */
text-align: left; /* zamiast justify */
}
/* Delikatny „badge” z nazwą narzędzia – opcjonalnie, jeśli chcesz */
.tool-header::before {
content: "Kalkulator podatkowy AI";
display: inline-flex;
align-self: flex-start;
padding: 2px 10px;
margin-bottom: 4px;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: #111827;
background: rgba(15, 23, 42, 0.06);
}
.tool-header.badge-kalkulator-podatkowy::before { content: "Kalkulator podatkowy AI"; }
.tool-header.badge-symulacja-podatkowa::before { content: "Symulacja podatkowa AI"; }
.tool-header.badge-dna-podatkowe::before { content: "Podatkowe DNA AI"; }
.tool-header.badge-prognoza-podatkowa::before { content: "Prognoza podatkowa AI"; }
.tool-header.badge-ryzyko-kontroli::before { content: "Ryzyko kontroli AI"; }
.tool-header.badge-rozliczenia-miedzynarodowe::before { content: "Rozliczenia międzynarodowe AI"; }
.tool-header.badge-transport-miedzynarodowy::before { content: "Transport międzynarodowy AI"; }
.tool-header.badge-spory-podatkowe::before { content: "Spory podatkowe AI"; }
.tool-header.badge-interpretacja-indywidualna::before { content: "Interpretacja indywidualna AI"; }
.tool-header.badge-minimalizacja-ryzyka::before { content: "Minimalizacja ryzyka AI"; }
.tool-header.badge-orzecznictwo-powszechne::before { content: "Opinia prawna AI"; }
.tool-header.badge-orzecznictwo-administracyjne::before { content: "Opinia prawna AI"; }
.tool-header.badge-analiza-umowy::before { content: "Analiza umowy AI"; }
.tool-header.badge-rodo::before { content: "RODO AI"; }
.tool-header.badge-nda::before { content: "Generator NDA AI"; }
.tool-header.badge-rozliczenia-miedzynarodowe::before { content: "Rozliczenia międzynarodowe AI"; }
.tool-header.badge-transport-miedzynarodowy::before { content: "Transport międzynarodowy AI"; }
.tool-header.badge-spory-podatkowe::before { content: "Spory podatkowe AI"; }
.tool-header.badge-interpretacja-indywidualna::before { content: "Interpretacja indywidualna AI"; }
.tool-header.badge-minimalizacja-ryzyka::before { content: "Minimalizacja ryzyka AI"; }
/* Responsywność – na małych ekranach wszystko „bliżej” */
@media (max-width: 768px) {
.tool-header {
margin-top: 8px;
padding: 14px 14px;
border-radius: 12px;
}
.tool-header h1 {
font-size: 1.25rem;
}
.tool-header .p-func {
font-size: 0.9rem;
}
.container_kP .tool-grid {
grid-template-columns: 1fr !important;
gap: 8px 0;
}
}
:root{
--toast-gap: 10px;
--toast-safe: env(safe-area-inset-bottom, 0px);
--bottom-box-h: 64px; /* fallback, JS nadpisze realną wartością */
--bottom-box-reserved-h: 64px; /* fallback: rezerwa dla boxContainer (JS nadpisze) */
}
/* bottom-box ZAWSZE na dole */
.bottom-box{
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--toast-safe) + 8px); /* KLUCZ: nie może być zakomentowane */
z-index: 2000; /* wyżej niż czat */
width: 52%;
}
/* box-container jako fixed i z bottom zależnym od bottom-box */
.box-container{
position: fixed;
left: 50%;
width: 60%;
overflow-y: auto;
overflow-x: hidden;
scroll-padding-bottom: calc(var(--bottom-box-h) + 84px);
padding: 10px;
padding: 10px 40px 40px 40px;
}
/* ============================== */
/* FIX: Mobile horizontal overflow */
/* ============================== */
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden; /* kluczowe: ucina 1–2px overflow */
}
/* Nie pozwól elementom fixed/sticky robić 101% */
.top-bar {
left: 0 !important; /* było -1% */
right: 0;
width: 100%;
max-width: 100%;
}
/* Bezpieczne box-sizing globalnie (ogranicza „wystawanie” przez padding) */
*, *::before, *::after {
box-sizing: border-box;
}
/* ============================== */
/* FIX: Tools layout never overflow */
/* ============================== */
/* Usuń historyczne sztywne 600px, bo to robi overflow na mobile */
.container-tbl-func,
.p-func{
width: 100% !important;
max-width: 100% !important;
}
/* Siatka pól ma nie wypychać */
.tool-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,...) ważne */
}
@media (max-width: 768px){
.tool-grid{ grid-template-columns: 1fr; }
}
/* Stabilizuje szerokość viewportu (Chrome/Edge/Firefox) */
/* html { scrollbar-gutter: stable both-edges; } */
/* ================================ */
/* UJEDNOLICENIE SZEROKOŚCI: CHAT + TOOLS (DESKTOP) */
/* ================================ */
:root{
--content-w: 45%;
--content2-w: 65%; /* tak jak .box-container */
--content-max: 1100px; /* opcjonalnie, żeby nie rosło w nieskończoność */
--content-pad-x: 40px; /* tak jak padding w box-container */
}
/* TOOLS: wrapper ma być identycznie centrowany i tej samej szerokości */
.main-func{
width: var(--content-w);
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
/* usuń „wiszący” stary odstęp jeśli robi kłopot */
/* margin-bottom: 200px; -> zostaw jeśli potrzebujesz */
}
/* container-func ma wypełniać main-func, ale bez sztucznych przesunięć */
.container-func{
width: 100%;
max-width: 100%;
margin: 0; /* ważne: brak dziwnych auto/left/transform */
align-items: stretch; /* żeby sekcje miały pełną szerokość */
/*text-align: left;*/ /* zwykle w narzędziach lepsze niż center */
}
/* nagłówek i sekcje narzędzi NIE powinny mieć własnych „auto-center”, bo to robi różnice */
.tool-header,
.tool-section,
.output-func{
width: 100%;
max-width: 100%;
}
/* ================================ */
/* STABILIZACJA LOGO (bez pływania) */
/* ================================ */
/* Stała szerokość kolumny z trybem (nie zmienia wymiaru całego logo) */
.YTAlogo-mode{
font-weight: 500;
/* tu klucz – płynne przejście nie tylko przy zmianie tekstu */
transition:
opacity 0.2s ease,
transform 2s ease; /* jeśli dalej używasz lekkiego przesunięcia */
text-align: left;
}
/* Dodatkowo: żeby flex nie przeliczał szerokości inaczej przy zmianach */
.YTAlogo{
justify-content: center;
height: 60px;
}
@media (max-width: 768px){
.status-area {
width: 95%;
position: relative;
}
}
/* kontener na pasek statusu, na górze obszaru czatu */
/* =====================================================================
Components — Status area / SSE progress
===================================================================== */
#global-status-slot {
position: sticky;
top: 70px; /* wysokość .top-bar (70px) */
z-index: 900; /* poniżej top-bar (1000), ale nad treścią */
background: #fff; /* żeby treść spod spodu nie prześwitywała */
/* padding-top: 4px; */
padding-bottom: 4px;
}
#global-status-slot .status-area{
background: #fff;
border-radius: 10px;
/*box-shadow: 0 4px 18px rgba(0,0,0,0.05); */
padding: 14px 5px;
}
/* Ukrywanie całego obszaru statusu (bez pustego miejsca) */
#global-status-slot.is-hidden {
display: none !important;
}
@media (max-width: 768px){
#global-status-slot{ top: 70px; }
}
/* =============================== */
/* CENTER: analyzeButton (TOOLS) */
/* =============================== */
#analyzeButton,
.analyzeButton.button-func{
display: flex; /* zamiast inline-flex (albo block) */
margin: 15px auto 10px auto; /* auto = środek */
}
.analyzeButton.button-func:disabled,
.analyzeButton.button-func.is-disabled{
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
filter: none;
}
/* ========================================= */
/* MOBILE: side-menu ma być nad bottom-box */
/* (i/lub bottom-box ma się schować) */
/* ========================================= */
@media (max-width: 768px){
/* wariant A (rekomendowany): chowaj bottom-box gdy menu otwarte */
#sideMenu.active ~ .MainYTAmenu #bottom-box{
display: none !important;
}
/* opcjonalnie: chowaj też scrollDownButton, żeby nie wchodził na menu */
#sideMenu.active ~ .MainYTAmenu #scrollDownButton{
display: none !important;
}
}
/* Mobile */
@media (max-width: 768px){
:root{
--content-w: 90%; /* tak jak .box-container */
--content-max: 1100px; /* opcjonalnie, żeby nie rosło w nieskończoność */
--content-pad-x: 40px; /* tak jak padding w box-container */
}
.box-container{
width: 96%;
left: 50%;
transform: translateX(-50%);
top: 100px !important;
bottom: calc(var(--toast-safe) + var(--bottom-box-h) + 12px);
max-height: 68vh !important;
min-height: 66vh !important; /* KLUCZ: co najmniej 70vh */
padding: 6px 10px;
transition: height 900ms ease;
}
.bottom-box{
width: 90%;
bottom: 5px;
/* bottom: calc(var(--toast-safe) - 10px); */
}
#bottom-box.bottom-box .send-it{
width: 34px !important;
height: 34px !important;
}
#bottom-box.bottom-box{
/* identyczna logika jak na desktop */
bottom: calc(var(--toast-safe) + 12px) !important;
height: 60px !important;
/*max-height: 70px; !important;*/
max-height: none !important; /* usuwa „sufit” 70vh, bo min-height i bottom i tak to kontrolują */
width: 90% !important;
}
.question-box {
flex: 1 1 auto; /* wypełnia dostępne miejsce między lewą krawędzią a przyciskiem */
width: 100%;
border: none;
background-color: transparent;
color: #000;
font-family: inherit;
box-sizing: border-box;
min-height: 24px;
max-height: 56px !important; /* max wysokość samego textarea */
}
.status-area {
width: 95% !important;
margin: 0px auto 0 auto;
}
}
/* ============================== */
/* USERMENU v2 (desktop + mobile) */
/* ============================== */
:root{
--um-bg: rgba(255,255,255,0.82);
--um-border: rgba(15, 23, 42, 0.10);
--um-shadow: 0 20px 60px rgba(0,0,0,0.18);
--um-text: rgba(17, 24, 39, 0.92);
--um-muted: rgba(17, 24, 39, 0.55);
--um-radius: 16px;
--um-pad: 12px;
--um-item-radius: 12px;
--um-item-bg: rgba(15, 23, 42, 0.04);
--um-item-bg-hover: rgba(15, 23, 42, 0.07);
--um-focus: 0 0 0 3px rgba(44, 100, 255, 0.25);
--um-danger: rgba(220, 38, 38, 0.95);
--um-danger-bg: rgba(220, 38, 38, 0.08);
}
/* Overlay pod menu (klik = zamknij) */
.usermenu-overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,0.18);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
z-index: 1200; /* poniżej #usermenu (1201 u Ciebie), ale nad resztą */
}
/* Bazowy panel */
#usermenu.usermenu{
position: fixed;
top: 64px;
right: 60px;
width: 320px;
max-width: calc(100vw - 24px);
padding: var(--um-pad);
border-radius: var(--um-radius);
border: 1px solid var(--um-border);
color: var(--um-text);
background: var(--um-bg);
backdrop-filter: blur(14px);
box-shadow: var(--um-shadow);
opacity: 0;
transform: translateY(-10px) scale(0.98);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
z-index: 2001;
}
/* Stan active */
#usermenu.usermenu.active{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Overlay aktywny gdy menu otwarte (ustawimy JS-em lub CSS-sibling jeśli chcesz) */
.usermenu-overlay.active{
opacity: 1;
pointer-events: auto;
}
/* Header */
.usermenu__header{
display: grid;
grid-template-columns: 40px 1fr 34px;
align-items: center;
/* gap: 10px; */
padding: 6px 0px 10px 0px;
}
.usermenu__avatar{
width: 40px;
height: 40px;
/*border-radius: 14px;
background:
radial-gradient(circle at 30% 20%, rgba(44,100,255,0.35), transparent 55%),
radial-gradient(circle at 80% 70%, rgba(0,0,0,0.14), transparent 60%),
rgba(15,23,42,0.06);
box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;*/
}
.usermenu__identity{
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.usermenu__name{
font-size: 14px;
font-weight: 700;
line-height: 1.2;
max-width: 100%;
}
.usermenu__name strong{
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.usermenu__meta{
font-size: 12px;
color: var(--um-muted);
}
/* UWAGA: Twój .userData był fixed i w top-bar.
W menu chcemy normalny flow, więc neutralizujemy, ale tylko gdy siedzi w usermenu */
#usermenu .userData{
position: static;
width: 300px;
height: auto;
border: none;
padding: 0;
display: block;
z-index: auto;
font-size: 12px;
}
/* Close button */
.usermenu__close{
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(255,255,255,0.55);
color: rgba(17, 24, 39, 0.65);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.usermenu__close:hover{
background: rgba(0,0,0,0.05);
color: rgba(17, 24, 39, 0.9);
}
.usermenu__close:focus-visible{
outline: none;
box-shadow: var(--um-focus);
}
/* Divider */
.usermenu__divider{
height: 1px;
background: rgba(0,0,0,0.08);
margin: 6px 6px;
}
/* Group */
.usermenu__group{
display: grid;
gap: 8px;
padding: 6px;
}
/* Item button */
.usermenu__item{
width: 100%;
border: 1px solid rgba(0,0,0,0.06);
background: var(--um-item-bg);
border-radius: var(--um-item-radius);
padding: 10px 10px;
display: grid;
grid-template-columns: 26px 1fr 18px;
align-items: center;
gap: 10px;
cursor: pointer;
/* ważne: neutralizujemy globalne style button */
margin: 0;
text-align: left;
text-shadow: none;
color: var(--um-text);
font-size: 13.5px;
font-weight: 600;
}
.usermenu__item:hover{
background: var(--um-item-bg-hover);
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.usermenu__item:active{
transform: translateY(1px);
}
.usermenu__item:focus-visible{
outline: none;
box-shadow: var(--um-focus);
}
.usermenu__icon{
display: inline-flex;
width: 26px;
height: 26px;
border-radius: 10px;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.65);
border: 1px solid rgba(0,0,0,0.06);
color: rgba(17, 24, 39, 0.7);
font-size: 14px;
}
.usermenu__text{
min-width: 0;
}
.usermenu__chevron{
color: rgba(17,24,39,0.35);
font-size: 18px;
text-align: right;
}
/* Danger variant (logout) */
.usermenu__item--danger{
background: var(--um-danger-bg);
border-color: rgba(220, 38, 38, 0.18);
color: var(--um-danger);
}
.usermenu__item--danger .usermenu__icon{
background: rgba(220,38,38,0.10);
border-color: rgba(220,38,38,0.18);
color: var(--um-danger);
}
.usermenu__item--danger:hover{
background: rgba(220,38,38,0.14);
}
/* ===== Mobile: bottom sheet ===== */
@media (max-width: 768px){
#usermenu.usermenu{
right: 12px;
left: 12px;
top: auto;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
width: auto;
border-radius: 18px;
transform: translateY(14px) scale(0.99);
}
#usermenu.usermenu.active{
transform: translateY(0) scale(1);
}
.usermenu__header{
grid-template-columns: 30px 1fr 34px;
}
.usermenu__name{
font-size: 15px;
}
.usermenu__item{
padding: 12px 12px;
font-size: 14px;
}
.usermenu-overlay{
background: rgba(0,0,0,0.22);
}
}
/* Preferencje dostępności */
@media (prefers-reduced-motion: reduce){
#usermenu.usermenu,
.usermenu-overlay{
transition: none !important;
}
}
/* ================================ */
/* FIX: usermenu - neutralizacja starych styli */
/* ================================ */
/* 1) Wyłącz stare, konfliktowe reguły dla #usermenu */
#usermenu{
/* niech wygra definicja z USERMENU v2 */
width: auto;
height: auto;
text-align: initial;
align-items: initial;
}
/* 2) Twoja stara reguła: #usermenu button { width:170px; ... } psuje grid w .usermenu__item */
#usermenu button{
width: auto; /* kluczowe */
margin: 0; /* kluczowe */
text-shadow: none; /* globalny button ma text-shadow */
padding: 0; /* padding ustawiamy w .usermenu__item */
border-radius: 0; /* kontrolujemy w .usermenu__item */
background: none; /* kontrolujemy w .usermenu__item */
}
/* 3) Ale zostawiamy poprawne style dla elementów usermenu v2 */
#usermenu .usermenu__item{
width: 100%;
margin: 0;
padding: 10px 10px;
border-radius: var(--um-item-radius);
background: var(--um-item-bg);
border: 1px solid rgba(0,0,0,0.06);
}
/* 4) Close button ma mieć własny wygląd, nie globalny */
#usermenu .usermenu__close{
padding: 0;
width: 34px;
height: 34px;
background: rgba(255,255,255,0.55);
}
/* ================================ */
/* SETTINGSMENU v2 (spójne z usermenu) */
/* ================================ */
#settingsMenu.settingsmenu{
position: fixed;
top: 64px;
right: 250px;
width: 340px;
max-width: calc(100vw - 24px);
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.10);
background: rgba(255,255,255,0.82);
backdrop-filter: blur(14px);
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
opacity: 0;
transform: translateY(-10px) scale(0.98);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
z-index: 2001;
}
#settingsMenu.settingsmenu.active{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.settingsmenu__header{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 6px 6px 10px 6px;
}
.settingsmenu__title{
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.settingsmenu__icon{
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(15,23,42,0.06);
border: 1px solid rgba(0,0,0,0.06);
}
.settingsmenu__h{
font-size: 14px;
font-weight: 800;
line-height: 1.2;
}
.settingsmenu__sub{
font-size: 12px;
color: rgba(17, 24, 39, 0.55);
}
.settingsmenu__close{
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(255,255,255,0.55);
color: rgba(17, 24, 39, 0.65);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.settingsmenu__close:hover{
background: rgba(0,0,0,0.05);
color: rgba(17, 24, 39, 0.9);
}
.settingsmenu__divider{
height: 1px;
background: rgba(0,0,0,0.08);
margin: 6px 6px;
}
.settingsmenu__group{
display: grid;
gap: 8px;
padding: 6px;
}
/* Item: bazuje na Twojej klasie .context (żeby JS od toggli działał bez zmian) */
.settingsmenu__item{
width: 100%;
margin: 0;
padding: 10px 10px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.06);
background: rgba(15, 23, 42, 0.04);
text-shadow: none;
text-align: left;
}
.settingsmenu__item:hover{
background: rgba(15, 23, 42, 0.07);
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.settingsmenu__row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.settingsmenu__label{
font-size: 13.5px;
font-weight: 650;
color: rgba(17, 24, 39, 0.92);
}
/* Settings: link-style item (np. konfigurator historii) */
.settingsmenu__item--nav{
background: rgba(255,255,255,0.55);
}
.settingsmenu__label--nav{
display: inline-flex;
align-items: center;
gap: 8px;
}
.settingsmenu__chevron{
color: rgba(17, 24, 39, 0.55);
font-size: 18px;
line-height: 1;
}
.settingsmenu__hint{
display: block;
margin-top: 6px;
font-size: 12px;
color: rgba(17, 24, 39, 0.55);
line-height: 1.35;
}
/* Mobile: bottom sheet, tak jak usermenu */
@media (max-width: 768px){
#settingsMenu.settingsmenu{
right: 12px;
left: 12px;
top: auto;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
width: auto;
}
}
/* ========================= */
/* COPY MENU — PORTAL (fixed) */
/* ========================= */
:root{
--copy-portal-z: 999999; /* najwyżej, ponad side-menu/usermenu/toasty */
}
/* Kiedy copy-menu jest otwarte, blokujemy „hover tooltips”,
bo one często zostają w stanie „sticky hover” (zwłaszcza na mobile). */
body.copymenu-open .tooltip-text,
body.copymenu-open .tooltip-text1,
body.copymenu-open .tooltip-inline,
body.copymenu-open .tooltip-inline1{
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Dodatkowo: wyłącz hover na przyciskach historii, gdy copy-menu otwarte */
body.copymenu-open .history-btn:hover .tooltip-text1{
visibility: hidden !important;
opacity: 0 !important;
}
/* Portal menu kopiowania */
#copy-menu-portal{
position: fixed;
inset: 0;
z-index: var(--copy-portal-z);
pointer-events: none; /* klik działa tylko na samym menu */
}
/* Samo menu (renderowane w portalu) */
#copy-menu-portal .copy-menu{
position: fixed;
pointer-events: auto;
min-width: 190px;
max-width: min(340px, calc(100vw - 24px));
padding: 8px;
border-radius: 14px;
/* background: rgba(255,255,255,0.92);
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 18px 55px rgba(0,0,0,0.20);
backdrop-filter: blur(14px);*/
transform-origin: 90% 100%;
transform: translateY(6px) scale(0.98);
opacity: 0;
visibility: hidden;
transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
#copy-menu-portal[data-open="1"] .copy-menu{
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
/* pozycjonowanie POD przyciskiem (gdy brak miejsca nad) */
#copy-menu-portal[data-placement="bottom"] .copy-menu{
transform-origin: 90% 0%;
}
/* elementy menu */
#copy-menu-portal .copy-menu-item{
width: 100%;
margin: 0;
padding: 11px 12px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.06);
background: rgba(15, 23, 42, 0.03);
text-shadow: none;
color: rgba(17, 24, 39, 0.92);
font-size: 13.5px;
font-weight: 650;
line-height: 1.2;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
#copy-menu-portal .copy-menu-item + .copy-menu-item{ margin-top: 6px; }
#copy-menu-portal .copy-menu-item:hover{
background: rgba(15, 23, 42, 0.06);
box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
#copy-menu-portal .copy-menu-item:active{ transform: translateY(1px); }
/* Mobile: większy hit-area */
@media (max-width: 768px){
#copy-menu-portal .copy-menu-item{
padding: 13px 12px;
font-size: 14px;
}
}
/* ================================ */
/* (moved to OVERRIDES section at bottom to reduce scattering) */
/* =========================
OVERRIDES (consolidated)
========================= */
/* COPY MENU — PRO (final override) */
/* ================================ */
:root{
--copy-portal-z: 999999;
/* nowy, czytelny wygląd */
--cm-bg: rgba(255,255,255,0.96);
--cm-border: rgba(15, 23, 42, 0.14);
--cm-shadow:
0 24px 70px rgba(0,0,0,0.22),
0 0 0 1px rgba(255,255,255,0.35) inset;
--cm-text: rgba(17, 24, 39, 0.92);
--cm-muted: rgba(17, 24, 39, 0.60);
--cm-radius: 14px;
--cm-pad: 6px;
/* WĘŻSZE menu */
--cm-w: 176px; /* desktop */
--cm-w-mobile: 210px;
}
#copy-menu-portal{
position: fixed;
inset: 0;
z-index: var(--copy-portal-z);
pointer-events: none;
}
/* MENU */
#copy-menu-portal .copy-menu{
position: fixed;
pointer-events: auto;
width: var(--cm-w);
max-width: calc(100vw - 24px);
padding: var(--cm-pad);
border-radius: var(--cm-radius);
/*background: var(--cm-bg);
border: 1px solid rgb(15 23 42 / 0%);*/
/* czytelność nad box-container */
/* box-shadow: var(--cm-shadow);
backdrop-filter: blur(18px) saturate(1.15);*/
-webkit-backdrop-filter: blur(18px) saturate(1.15);
/* minimalniejsza animacja = mniej „pływania” */
transform-origin: 50% 100%;
transform: translateY(4px);
opacity: 0;
visibility: hidden;
transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
#copy-menu-portal .copy-menu-portal-menu{
position: fixed;
/* reszta stylu jak wcześniej */
}
#copy-menu-portal[data-open="1"] .copy-menu{
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .12s ease, transform .12s ease, visibility 0s;
}
/* ITEMY – bez „doklejonych elementów”: jedna karta + miękki hover */
#copy-menu-portal .copy-menu-item{
width: 100%;
margin: 0;
padding: 10px 10px;
border-radius: 12px;
border: 1px solid rgb(15 23 42 / 50%);
background: rgb(255 255 255);
text-shadow: none;
color: var(--cm-text);
font-size: 13px;
font-weight: 650;
line-height: 1.2;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
#copy-menu-portal .copy-menu-item + .copy-menu-item{
margin-top: 6px;
}
#copy-menu-portal .copy-menu-item:hover{
background: rgb(215 215 215);
border: 1px solid rgb(15 23 42 / 50%);
box-shadow: 0 12px 26px rgba(0,0,0,0.10);
}
#copy-menu-portal .copy-menu-item:active{
transform: translateY(1px);
}
#copy-menu-portal .copy-menu-item:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(44, 100, 255, 0.22), 0 12px 26px rgba(0,0,0,0.10);
}
/* „pro” ikonki w itemach (bez emoji, spójne) */
#copy-menu-portal .copy-menu-item::before{
content: "";
width: 22px;
height: 22px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgb(255 255 255);
border: 1px solid rgb(15 23 42 / 50%);
box-shadow: 0 6px 14px rgba(0,0,0,0.06);
/* placeholder, nadpisujemy per tryb */
}
#copy-menu-portal .copy-menu-item[data-copy-mode="text"]::before{
content: "T";
font-size: 12px;
font-weight: 900;
color: var(--cm-muted);
}
#copy-menu-portal .copy-menu-item[data-copy-mode="html"]::before{
content: "<>";
font-size: 11px;
font-weight: 900;
color: var(--cm-muted);
}
@media (max-width: 768px){
#copy-menu-portal .copy-menu{
width: var(--cm-w-mobile);
}
#copy-menu-portal .copy-menu-item{
padding: 12px 12px;
font-size: 14px;
}
}
/* Neutralizacja globalnego button dla menu kopiowania */
#copy-menu-portal button{
width: 100%;
margin: 0;
text-align: left;
background: none;
}
/* =============================== */
/* Material Symbols (Rounded) base */
/* =============================== */
.material-symbols-rounded{
font-family: "Material Symbols Rounded";
font-weight: 500;
font-style: normal;
font-size: 22px; /* default */
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
/* Dziedziczy kolor z buttona (jak SVG currentColor) */
color: currentColor;
/* Zapobiega rozjeżdżaniu w flex/grid */
flex: 0 0 auto;
}
/* Warianty rozmiarów */
.material-18{ font-size: 18px; }
.material-20{ font-size: 20px; }
.material-24{ font-size: 24px; }
#copy-menu-portal .copy-menu-item::before{ content: none !important; }
#copy-menu-portal .copy-menu-item::after{ content: none !important; }
/* =============================== */
/* Material Symbols (Rounded) base */
/* =============================== */
.material-symbols-rounded{
font-family: "Material Symbols Rounded";
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
color: currentColor; /* dziedziczy kolor z przycisku */
flex: 0 0 auto;
}
/* Rozmiary */
.ms-18{ font-size: 18px; }
.ms-20{ font-size: 20px; }
.ms-22{ font-size: 22px; }
.ms-24{ font-size: 24px; }
/* Ikona w "chipie" (do usermenu/settings) */
.icon-chip{
width: 26px;
height: 26px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.65);
border: 1px solid rgba(0,0,0,0.06);
color: rgba(17, 24, 39, 0.70);
}
.top-bar .menu-container button,
.plusForpayment{
color: rgba(136, 136, 136, 1);
}
.top-bar .menu-container button:hover,
.plusForpayment:hover{
color: rgba(17, 24, 39, 0.9);
}
/* ========================================= */
/* SEND-IT — PRO hover/active/focus (FINAL) */
/* ========================================= */
:root{
--send-bg: #0b0b0c; /* primary */
--send-bg-hover: #111113;
--send-fg: rgba(255,255,255,0.95);
--send-ring: 0 0 0 3px rgba(44, 100, 255, 0.26); /* spójne z Twoim UI */
--send-shadow:
0 10px 30px rgba(0,0,0,0.20),
0 0 0 1px rgba(255,255,255,0.08) inset;
--send-shadow-hover:
0 14px 38px rgba(0,0,0,0.26),
0 0 0 1px rgba(255,255,255,0.10) inset;
}
/* bazowo – tylko przycisk w bottom-box */
.bottom-box .send-it{
width: 36px; /* u Ciebie jest 34–38; tutaj stabilnie */
height: 36px;
border-radius: 999px;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 42%),
var(--send-bg);
color: var(--send-fg);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: var(--send-shadow);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
transition:
transform .12s ease,
box-shadow .14s ease,
background .14s ease,
border-color .14s ease,
filter .14s ease;
}
/* ikonka: mikroruch + czytelność */
.bottom-box .send-it .material-symbols-rounded{
font-size: 22px; /* ms-24 bywa optycznie za duże w 36px; tu jest „premium” */
line-height: 1;
transition: transform .14s ease, opacity .14s ease;
transform: translateY(-0.5px); /* minimalny „lift” */
}
/* hover: minimalne powiększenie + mocniejszy cień */
.bottom-box .send-it:hover{
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.13), transparent 42%),
var(--send-bg-hover);
box-shadow: var(--send-shadow-hover);
transform: translateY(-1px);
border-color: rgba(255,255,255,0.14);
}
/* hover na ikonie: „sprężynka” w górę */
.bottom-box .send-it:hover .material-symbols-rounded{
transform: translateY(-1.5px);
}
/* active: wciśnięcie */
.bottom-box .send-it:active{
transform: translateY(0);
filter: brightness(0.98);
}
.bottom-box .send-it:active .material-symbols-rounded{
transform: translateY(0);
opacity: 0.92;
}
/* focus: ring jak w SaaSach */
.bottom-box .send-it:focus-visible{
outline: none;
box-shadow: var(--send-shadow-hover), var(--send-ring);
}
/* disabled (spójnie z Twoim setButtonsDisabled) */
.bottom-box .send-it:disabled,
.bottom-box .send-it.is-disabled{
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
filter: none;
}
/* ========================================= */
/* ScrollDownButton — spójny wygląd (opt.) */
/* ========================================= */
#scrollDownButton{
position: static;
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255,255,255,0.92);
color: rgba(17, 24, 39, 0.82);
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 14px 40px rgba(0,0,0,0.16);
backdrop-filter: blur(12px);
align-items: center;
justify-content: center;
transition: transform .12s ease, box-shadow .14s ease, background .14s ease;
}
/* ================================ */
/* FIX: scrollDownButton nie ucieka */
/* ================================ */
#scrollDownButton{
/* trzymamy stabilne centrowanie zawsze */
transform-origin: 50% 50%;
/* opcjonalnie: płynność i brak "layout shift" */
will-change: transform;
}
#scrollDownButton:focus-visible{
outline: none;
box-shadow: 0 18px 55px rgba(0,0,0,0.18), 0 0 0 3px rgba(44, 100, 255, 0.22);
}
#scrollDownButton{
position: static;
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255,255,255,0.92);
color: rgba(17, 24, 39, 0.82);
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 14px 40px rgba(0,0,0,0.16);
backdrop-filter: blur(12px);
align-items: center;
justify-content: center;
transition: transform .12s ease, box-shadow .14s ease, background .14s ease;
}
#scrollDownButton:hover{
transform: translateY(-1px);
background: rgba(255,255,255,0.96);
box-shadow: 0 18px 55px rgba(0,0,0,0.18);
}
#scrollDownButton:active{
transform: translateY(0);
}
#scrollDownButton:focus-visible{
outline: none;
box-shadow: 0 18px 55px rgba(0,0,0,0.18), 0 0 0 3px rgba(44, 100, 255, 0.22);
}
/* ============================================ */
/* FINAL FIX: scrollDownButton bez „kiwania” */
/* centrowanie robi tylko .bottom-container */
/* ============================================ */
.bottom-container{
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--toast-safe) + var(--bottom-box-h) + 14px);
z-index: 2000;
/* stabilizacja, żeby nic nie „pływało” */
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
/* opcjonalnie: żeby hover/transform nie wpływał na inne rzeczy */
will-change: transform;
}
#scrollDownButton{
/* KLUCZ: żadnego translateX tutaj */
position: static;
display: inline-flex;
width: 36px;
height: 36px;
padding: 0;
margin: 0;
border-radius: 999px;
background: rgba(255,255,255,0.92);
color: rgba(17, 24, 39, 0.82);
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 14px 40px rgba(0,0,0,0.16);
backdrop-filter: blur(12px);
align-items: center;
justify-content: center;
/* tylko Y */
transform: translateY(0);
transition: transform .12s ease, box-shadow .14s ease, background .14s ease;
}
#scrollDownButton:hover{
transform: translateY(-1px);
background: rgba(255,255,255,0.96);
box-shadow: 0 18px 55px rgba(0,0,0,0.18);
}
#scrollDownButton:active{
transform: translateY(0);
}
#scrollDownButton:focus-visible{
outline: none;
box-shadow: 0 18px 55px rgba(0,0,0,0.18), 0 0 0 3px rgba(44, 100, 255, 0.22);
}
/* ============================================ */
/* MOBILE FIX: input z ikoną nie nachodzi na tekst */
/* ============================================ */
/* Ujednolicone zmienne dla pól z ikoną */
:root{
--icon-left: 12px;
--icon-size: 22px; /* ms-22 */
--icon-gap: 10px; /* odstęp ikona → tekst */
--input-pad-y: 14px; /* bazowa pionowa */
--input-pad-x: 14px; /* bazowa pozioma */
}
/* Wrapper input+ikona */
.input-wrap{
position: relative;
width: 100%;
}
/* Ikona w polu */
.input-wrap .input-icon{
position: absolute;
left: var(--icon-left);
top: 50%;
transform: translateY(-50%);
pointer-events: none;
/* stabilny rozmiar, żeby padding dało się policzyć */
width: var(--icon-size);
height: var(--icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(17,24,39,0.45);
}
/* Input ma zawsze wystarczający padding-left */
input.with-icon,
textarea.with-icon,
select.with-icon,
.login-input.with-icon,
.form-box input.with-icon{
padding-top: var(--input-pad-y) !important;
padding-bottom: var(--input-pad-y) !important;
padding-right: var(--input-pad-x) !important;
/* KLUCZ: miejsce na ikonę + gap */
padding-left: calc(
var(--icon-left) + var(--icon-size) + var(--icon-gap)
) !important;
box-sizing: border-box;
}
/* Placeholder ma się ładnie skracać na mobile (bez wchodzenia na ikonę) */
input.with-icon::placeholder,
textarea.with-icon::placeholder,
.login-input.with-icon::placeholder,
.form-box input.with-icon::placeholder{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.75;
}
/* Mobile: trochę większy padding-left i mniejszy placeholder (dla ciasnych ekranów) */
@media (max-width: 768px){
:root{
--icon-left: 12px;
--icon-size: 22px;
--icon-gap: 12px;
--input-pad-y: 14px;
--input-pad-x: 12px;
}
input.with-icon,
textarea.with-icon,
select.with-icon,
.login-input.with-icon,
.form-box input.with-icon{
font-size: 16px; /* iOS: zapobiega zoomowaniu po focus */
}
input.with-icon::placeholder,
textarea.with-icon::placeholder,
.login-input.with-icon::placeholder,
.form-box input.with-icon::placeholder{
font-size: 0.92em;
}
}
/* Bardzo małe ekrany: jeszcze ciaśniej, ale nadal bez kolizji */
@media (max-width: 380px){
:root{
--icon-gap: 10px;
}
input.with-icon::placeholder,
.login-input.with-icon::placeholder{
font-size: 0.88em;
}
}
.user-info {
text-align: center;
font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.user-info .username {
display: block;
font-weight: bold;
font-size: 16px; /* lub inna wartość */
}
.user-info .email {
display: block;
font-size: 12px; /* mniejsze litery */
color: #b0b0b0; /* jasnoszary */
}
/* ============================== */
/* SaaS SideMenu — modern upgrade */
/* ============================== */
:root{
--sm-bg: #2b2b2b;
--sm-panel: rgba(255,255,255,0.04);
--sm-panel2: rgba(255,255,255,0.06);
--sm-border: rgba(255,255,255,0.08);
--sm-text: rgba(255,255,255,0.92);
--sm-muted: rgba(255,255,255,0.55);
--sm-accent: rgb(139 140 143 / 90%); /* rgba(44, 100, 255, 0.9); masz już ten klimat w selected */
--sm-radius: 14px;
}
/* sekcje */
.side-menu__section{
margin-top: 10px;
}
.side-menu__sectionTitle{
color: var(--sm-muted);
font-size: 12px;
font-weight: 700;
padding: 6px 8px;
}
/* przyciski-sekcje (Modele / Narzędzia) */
.side-menu .tools-button{
width: 100%;
margin: 0 0 8px 0;
padding: 10px 10px;
border-radius: 12px;
border: 1px solid var(--sm-border);
background: var(--sm-panel);
color: var(--sm-text);
text-shadow: none;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
/* chevron */
.side-menu__chev{
margin-left: auto;
color: var(--sm-muted);
transition: transform .16s ease, color .16s ease;
}
.tools-button.active .side-menu__chev{
transform: rotate(180deg);
color: var(--sm-text);
}
/* itemy w grupach (Ogólny / Podatkowy / narzędzia) */
.side-menu .toggleButton{
width: 100%;
margin: 6px 0;
padding: 10px 10px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
color: var(--sm-text);
text-shadow: none;
font-weight: 600;
}
.side-menu .toggleButton:hover{
background: rgba(255,255,255,0.06);
}
/* aktywny model = „SaaS marker” */
.side-menu .selectedModel{
background: rgb(79 81 87 / 90%) !important; /*rgba(44, 100, 255, 0.15) !important; */
border-color: rgb(112 112 112 / 90%) !important; /*rgba(44, 100, 255, 0.15) !important; */
box-shadow: 0 0 0 1px rgba(44, 100, 255, 0.12) inset;
position: relative;
}
/* Historia: przewijana sekcja */
.side-menu__section--history{
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.historia{
height: 240px;
overflow: auto !important; /* zamiast visible */
padding-right: 2px;
}
/* history item: odchudzony */
.history-btn{
width: 100%;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
}
.history-btn:hover{
background: rgba(255,255,255,0.06);
}
.side-menu button:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(44, 100, 255, 0.22);
}
/* ========================================= */
/* SIDE-MENU: FIX PACK (final override) */
/* ========================================= */
:root{
--sm-w: 260px;
--sm-pad: 12px;
--sm-gap: 10px;
--sm-scrollbar-gap: 10px; /* odstęp od scrolla do treści */
}
/* 1) usuń ryzyko białego paska i subpixel */
html, body{
overflow-x: hidden;
}
/* 3) header niech będzie stabilny, a reszta przewijana */
.side-menu__header{
position: sticky;
top: 0;
z-index: 3;
background: var(--sm-bg, #2b2b2b);
margin: calc(-1 * var(--sm-pad));
padding: 12px 12px 10px 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* 4) sekcje standardowe */
.side-menu__section{
width: 100%;
}
/* 5) content (wszystko poza headerem) ma się zmieścić i przewijać tylko w razie potrzeby */
.side-menu__section--history{
flex: 1 1 auto; /* KLUCZ: historia dostaje resztę miejsca */
min-height: 0; /* KLUCZ: pozwala na scroll wewnątrz flex child */
display: flex;
flex-direction: column;
}
/* 6) Historia: żadnych dziwnych overflow:visible. Ma być normalny scroll tylko gdy trzeba */
#historia.historia{
flex: 1 1 auto;
min-height: 0;
height: auto; /* zamiast 240px */
overflow-y: auto; /* scroll tylko historii */
overflow-x: hidden;
padding-right: var(--sm-scrollbar-gap);
scrollbar-gutter: stable; /* stabilizuje layout gdy scrollbar się pojawia */
}
/* 7) Scrollbar nie może „doklejać się” do przycisków */
.side-menu__group,
#historia.historia{
padding-right: var(--sm-scrollbar-gap);
}
/* 8) Rozwijane grupy: animacja max-height (NIE height) i brak scrolla w aktywnym stanie,
chyba że naprawdę trzeba */
#additionalButtons,
#additionalButtons1{
overflow: hidden;
max-height: 0;
transition: max-height 0.28s ease;
}
/* ustaw „duży” max-height – bezpieczniej niż 400px i bez ucinania */
#additionalButtons.active{
max-height: 600px;
overflow-y: auto; /* OK, ale: tylko jeśli przekroczy max-height */
}
/* Modele AI: tam masz tylko 2 przyciski, NIE chcemy scrolla w ogóle */
#additionalButtons1.active{
max-height: 200px; /* wystarczy na 2–3 pozycje */
overflow-y: hidden; /* KLUCZ: brak scrollbara */
}
/* 9) przyciski w menu: wyrównanie, brak „99%” i brak dziwnych marginesów */
.side-menu button{
width: 100% !important;
margin: 0 0 8px 0; /* spójnie */
box-sizing: border-box;
}
/* 10) Modele/Narzędzia toggle header: wyrównanie ikon i tekstu */
.side-menu .tools-button{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px;
}
/* 11) chevron: tylko obrót 180deg (bez 360deg) – wygląda stabilniej */
.tools-button.active .side-menu__chev{
transform: rotate(180deg) !important;
}
/* 12) Naprawa uciętego „Podatkowy” / długich nazw – przyciski mają ellipsis */
.side-menu .toggleButton,
.side-menu .tools-button,
.history-btn{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 13) Historia: elementy bez overflow-visible */
.history-btn{
overflow: hidden !important; /* zamiast visible */
}
/* 14) usuń stare wymuszenia, które psują layout (Twoje własne „!importanty”) */
.historia, .history-btn, #contentBelow{
overflow-x: hidden !important;
position: relative !important;
z-index: auto !important;
}
.side-menu *::-webkit-scrollbar{
width: 6px;
}
.side-menu *::-webkit-scrollbar-track{
background: rgba(255,255,255,0.08);
border-radius: 999px;
}
.side-menu *::-webkit-scrollbar-thumb{
background: rgba(255,255,255,0.22);
border-radius: 999px;
}
.side-menu *::-webkit-scrollbar-thumb:hover{
background: rgba(255,255,255,0.32);
}
/* =========================================================
SIDE MENU — HARD FIX (wklej na sam koniec CSS)
========================================================= */
/* 0) Global: bez poziomego przesuwania przez subpixel */
html, body { overflow-x: hidden; }
.side-menu.active{
left: 0 !important;
}
/* 2) Przyciski w menu: żadnych 99% (to robi wrażenie "offsetu") */
.side-menu button{
width: 100% !important;
margin: 0 0 8px 0 !important;
box-sizing: border-box !important;
}
/* 3) Rozwijane sekcje — ZAMIANA height -> max-height (żeby nie ucinało) */
#additionalButtons1,
#additionalButtons{
overflow: hidden !important;
max-height: 0 !important;
height: auto !important; /* ważne: kasuje height:0 z wcześniejszych reguł */
transition: max-height 0.28s ease !important;
}
/* Modele AI: tylko 2 przyciski, ma się rozwinąć bez scrolla i bez ucinania */
#additionalButtons1.active{
max-height: 220px !important; /* zapas */
overflow: visible !important; /* nie ucina "Podatkowy" */
}
/* Narzędzia: tu dopuszczamy scroll, ale tylko gdy faktycznie za dużo */
#additionalButtons.active{
max-height: 55vh !important; /* responsywnie, zamiast 400/600px */
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 8px !important; /* odsunięcie od scrollbara */
}
/* 4) Historia: ma być przewijana i stabilna */
.side-menu__section--history{
flex: 1 1 auto !important;
min-height: 0 !important; /* klucz dla scrolla w flex child */
display: flex !important;
flex-direction: column !important;
}
#historia.historia{
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important; /* kasuje 240px */
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 8px !important;
scrollbar-gutter: stable !important;
}
/* 5) History item: tekst NIE znika, X jest mały i nie "pływa" */
.history-btn{
position: relative !important;
overflow: hidden !important;
display: block !important;
width: 100% !important;
padding-right: 34px !important; /* stałe miejsce na X, żeby tekst nie skakał */
}
.cloudHistory{
display: block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* delete button: stabilny rozmiar + bez "giganta" */
.delete-btn{
display: none;
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 22px !important;
height: 22px !important;
border-radius: 8px !important;
background: rgba(255,255,255,0.08) !important;
}
.delete-btn::before,
.delete-btn::after{
width: 12px !important;
height: 2px !important;
background-color: rgba(255,255,255,0.65) !important;
}
.history-btn:hover .delete-btn{
display: inline-flex !important;
}
/* Tooltip w historii: niech nie rozwala hover + niech nie przykrywa X */
.tooltip-text1{
pointer-events: none !important;
}
/* =========================================================
HISTORY DELETE "X" — SMALL & ELEGANT (final override)
Wklej na sam koniec CSS
========================================================= */
/* History item: rezerwujemy stałe miejsce na X,
żeby tekst nigdy nie "znikał" / nie był przykrywany */
.history-btn{
position: relative !important;
display: block !important;
/* stały padding na prawą ikonę */
padding-right: 44px !important;
overflow: hidden !important;
}
/* Tekst historii: zawsze ellipsis i pełna szerokość */
.cloudHistory{
display: block !important;
max-width: 100% !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
/* Mały przycisk X: niezależny od globalnych styli button */
.history-btn .delete-btn{
/* widoczność tylko na hover/focus-within */
display: none !important;
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 22px !important;
height: 22px !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid rgba(255,255,255,0.16) !important;
border-radius: 8px !important;
background: rgba(255,255,255,0.08) !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
cursor: pointer !important;
text-shadow: none !important;
/* żeby pseudo-elementy rysowały się poprawnie */
position: absolute !important;
}
/* Hover/focus: pokaż X elegancko */
.history-btn:hover .delete-btn,
.history-btn:focus-within .delete-btn{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Rysowanie X: cienkie, krótkie ramiona */
.history-btn .delete-btn::before,
.history-btn .delete-btn::after{
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 12px !important; /* długość ramion X */
height: 2px !important; /* grubość ramion X */
background: rgba(255,255,255,0.78) !important;
border-radius: 999px !important;
transform-origin: center !important;
}
/* Krzyżyk */
.history-btn .delete-btn::before{
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.history-btn .delete-btn::after{
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
/* Interakcje */
.history-btn .delete-btn:hover{
background: rgba(255,255,255,0.14) !important;
border-color: rgba(255,255,255,0.22) !important;
}
.history-btn .delete-btn:active{
transform: translateY(-50%) scale(0.98) !important;
}
/* Tooltip nad historią ma nie przechwytywać kursora (eliminuje migotanie hover) */
.history-btn .tooltip-text1{
pointer-events: none !important;
}
/* Historia ma być normalnie przewijalna (stabilnie) */
#historia.historia{
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* ================================ */
/* COPY MENU: stabilny layout (fix) */
/* ================================ */
/* Menu ma być w pełni widoczne – bez ucinania */
#copy-menu-portal .copy-menu{
overflow: visible !important;
}
/* Każdy element menu ma stałą wysokość (eliminuje zmianę wysokości po doładowaniu fontu) */
#copy-menu-portal .copy-menu-item{
min-height: 42px; /* dobierz: 40–46px */
line-height: 1.2;
}
/* Ikona ma stały "box" niezależnie od fontu */
#copy-menu-portal .copy-menu-item .material-symbols-rounded{
width: 22px;
min-width: 22px;
height: 22px;
font-size: 22px;
line-height: 22px;
flex: 0 0 22px;
}
/* ========================================= */
/* CONTEXT INDICATOR — subtle / modern */
/* ========================================= */
:root{
--ctx-safe-top: env(safe-area-inset-top, 0px);
--ctx-safe-right: env(safe-area-inset-right, 0px);
}
/* =========================================================
WELCOME SCREEN (CHAT START) — Premium UX (dopasowane do aplikacji)
- premium card + subtelny glow w kolorach aplikacji
- kafelki w grid (jak ChatGPT) + brak brzydkich złamań
- skeleton zamiast "Przygotowuję..."
========================================================= */
.welcome-screen{
position: absolute;
inset: 0;
display: none; /* JS ustawia na flex */
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 56px);
z-index: 50;
background: transparent;
}
.welcome-screen.is-visible{
animation: welcomeFadeIn .18s ease-out both;
}
@keyframes welcomeFadeIn{
from{ opacity: 0; transform: translateY(8px); }
to{ opacity: 1; transform: translateY(0); }
}
.welcome-card{
width: min(880px, 100%);
border-radius: 26px;
padding: clamp(18px, 3vw, 30px);
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(0,0,0,0.07);
box-shadow:
0 28px 90px rgba(0,0,0,0.14),
0 10px 26px rgba(0,0,0,0.08),
0 0 0 1px rgba(255,255,255,0.55) inset;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* premium “edge” – tylko w palecie aplikacji (nie tęczowe) */
.welcome-card::before{
content:"";
position:absolute;
inset:0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(135deg,
rgba(44, 100, 255, 0.70),
rgba(44, 100, 255, 0.18),
rgba(0, 0, 0, 0.10)
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
z-index: 0;
}
.welcome-card::after{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 28% 20%, rgba(44,100,255,0.13), transparent 60%),
radial-gradient(circle at 70% 25%, rgba(44,100,255,0.08), transparent 58%),
radial-gradient(circle at 50% 82%, rgba(0,0,0,0.05), transparent 60%);
pointer-events:none;
z-index: 0;
}
.welcome-card > *{
position: relative;
z-index: 1;
}
.welcome-header{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.welcome-icon{
width: 46px;
height: 46px;
border-radius: 16px;
display: grid;
place-items: center;
font-size: 20px;
background: linear-gradient(180deg, rgba(44,100,255,0.14), rgba(0,0,0,0.02));
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 10px 20px rgba(0,0,0,0.10);
}
.welcome-headings{ min-width: 0; }
.welcome-title{
font-size: 24px;
line-height: 1.12;
font-weight: 780;
color: rgba(17,24,39,0.94);
letter-spacing: -0.02em;
}
.welcome-subtitle{
margin-top: 5px;
font-size: 13px;
line-height: 1.35;
color: rgba(17,24,39,0.62);
}
.welcome-meta{
display: inline-flex;
align-items: center;
gap: 10px;
}
.welcome-pill{
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(0,0,0,0.08);
color: rgba(17,24,39,0.70);
}
.welcome-dots{
display: none; /* pokazujemy tylko podczas ładowania AI */
gap: 4px;
align-items: center;
}
.welcome-card.is-loading .welcome-dots{
display: inline-flex;
}
.welcome-dots span{
width: 5px;
height: 5px;
border-radius: 999px;
background: rgba(17,24,39,0.35);
animation: welcomeDots 1.05s infinite ease-in-out;
}
.welcome-dots span:nth-child(2){ animation-delay: 0.12s; }
.welcome-dots span:nth-child(3){ animation-delay: 0.24s; }
@keyframes welcomeDots{
0%, 80%, 100%{ opacity: .35; transform: translateY(0); }
40%{ opacity: .9; transform: translateY(-3px); }
}
.welcome-message{
font-size: 15px;
line-height: 1.62;
color: rgba(17,24,39,0.86);
margin: 10px 0 16px;
white-space: pre-wrap; /* gdyby AI dało \n */
}
/* tytuł sekcji sugestii */
.welcome-suggestions-title{
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(17,24,39,0.52);
margin-bottom: 12px;
}
/* GRID kafelków jak w ChatGPT */
.welcome-suggestions{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* kafelek – resetuje globalne style buttonów */
.welcome-chip{
all: unset;
box-sizing: border-box;
display: flex;
gap: 10px;
align-items: flex-start;
width: 100%;
min-height: 64px;
padding: 14px 14px 13px;
border-radius: 18px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(0,0,0,0.08);
box-shadow:
0 14px 28px rgba(0,0,0,0.08),
0 1px 0 rgba(255,255,255,0.55) inset;
cursor: pointer;
transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.welcome-chip:hover{
transform: translateY(-1px);
background: rgba(255,255,255,0.92);
border-color: rgba(44,100,255,0.30);
box-shadow:
0 18px 38px rgba(0,0,0,0.10),
0 1px 0 rgba(255,255,255,0.60) inset;
}
.welcome-chip:active{ transform: translateY(0); }
.welcome-chip:focus{ outline: none; }
.welcome-chip:focus-visible{
outline: 2px solid rgba(44,100,255,0.55);
outline-offset: 2px;
}
/* tekst w kafelku – clamp i brak wychodzenia poza kafelek */
.welcome-chip__text{
min-width: 0;
font-size: 13.5px;
line-height: 1.28;
font-weight: 650;
color: rgba(17,24,39,0.88);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
/* strzałka/skrót – premium detail */
.welcome-chip__arrow{
margin-left: auto;
font-size: 13px;
font-weight: 800;
line-height: 1;
color: rgba(44,100,255,0.70);
opacity: 0.95;
padding-top: 2px;
}
/* footnote */
.welcome-footnote{
margin-top: 14px;
font-size: 12.5px;
line-height: 1.45;
color: rgba(17,24,39,0.55);
}
/* ---------- Skeleton (premium) ---------- */
@keyframes welcomeShimmer{
0%{ transform: translateX(-120%); }
100%{ transform: translateX(120%); }
}
.welcome-skeleton-line,
.welcome-skeleton-tile{
position: relative;
overflow: hidden;
background: rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.06);
}
.welcome-skeleton-line::after,
.welcome-skeleton-tile::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg,
transparent,
rgba(44,100,255,0.10),
transparent
);
transform: translateX(-120%);
animation: welcomeShimmer 1.15s infinite ease-in-out;
}
.welcome-skeleton-line{
height: 12px;
border-radius: 999px;
margin: 10px 0;
}
.welcome-skeleton-tile{
height: 64px;
border-radius: 18px;
}
/* szerokości skeleton linii */
.welcome-skeleton-line.w-92{ width: 92%; }
.welcome-skeleton-line.w-78{ width: 78%; }
.welcome-skeleton-line.w-64{ width: 64%; }
/* mobile */
@media (max-width: 768px){
.welcome-card{
border-radius: 20px;
padding: 16px;
}
.welcome-title{ font-size: 20px; }
.welcome-message{ font-size: 14.5px; }
.welcome-suggestions{ grid-template-columns: 1fr; }
}
/* preferencje animacji */
@media (prefers-reduced-motion: reduce){
.welcome-screen.is-visible{ animation: none; }
.welcome-dots span{ animation: none; }
.welcome-chip{ transition: none; }
.welcome-skeleton-line::after,
.welcome-skeleton-tile::after{ animation: none; }
}
/* =========================================================
WELCOME SCREEN — COMPACT OVERRIDE
- mniejsze, bardziej neutralne
- brak „glow”
- nie ucina się (overlay ma overflow)
========================================================= */
.welcome-screen{
padding: 12px 14px;
align-items: flex-start;
justify-content: center;
overflow: auto; /* klucz: overlay sam się scrolluje, więc nie będzie ucinany */
}
.welcome-card{
width: min(640px, 100%);
border-radius: 16px;
padding: 14px 14px 12px;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 10px 30px rgba(0,0,0,0.10);
max-height: calc(100% - 12px); /* klucz: nie wychodzi poza kontener */
overflow: auto;
}
/* wyłącz „premium edge/glow” żeby nie wybijało się wizualnie */
.welcome-card::before,
.welcome-card::after{
content: none !important;
display: none !important;
}
.welcome-header{
gap: 10px;
margin-bottom: 10px;
}
.welcome-icon{
width: 34px;
height: 34px;
border-radius: 12px;
font-size: 16px;
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.welcome-title{
font-size: 18px;
line-height: 1.15;
font-weight: 750;
}
.welcome-subtitle{
margin-top: 3px;
font-size: 12.5px;
line-height: 1.35;
}
.welcome-message{
font-size: 13.5px;
line-height: 1.50;
margin: 8px 0 12px;
}
.welcome-suggestions-title{
margin-bottom: 8px;
font-size: 11px;
letter-spacing: 0.06em;
}
.welcome-suggestions{
gap: 10px;
}
.welcome-chip{
min-height: 52px;
padding: 10px 10px 9px;
border-radius: 14px;
box-shadow:
0 10px 18px rgba(0,0,0,0.06),
0 1px 0 rgba(255,255,255,0.50) inset;
}
.welcome-chip__text{
font-size: 13px;
font-weight: 650;
-webkit-line-clamp: 2; /* niższe kafelki */
}
.welcome-chip__arrow{
font-size: 12px;
padding-top: 1px;
}
.welcome-footnote{
margin-top: 10px;
font-size: 11.5px;
line-height: 1.45;
}
@media (max-width: 768px){
.welcome-screen{ padding: 10px 10px; }
.welcome-card{ width: 100%; border-radius: 14px; padding: 12px; }
.welcome-suggestions{ grid-template-columns: 1fr; }
}
/* =========================================================
WELCOME SCREEN (CHAT START) — minimal jak chatgpt.com
- tylko przywitanie + 3–4 kafelki
- panel niżej i na środku (bez „karty” w tle)
- nowoczesna animacja wejścia + kaskada kafelków
========================================================= */
/* overlay */
.welcome-screen{
position: absolute;
inset: 0;
display: none; /* JS ustawia na flex */
align-items: flex-start;
justify-content: center;
padding-left: clamp(16px, 4vw, 56px);
padding-right: clamp(16px, 4vw, 56px);
padding-top: clamp(72px, 12vh, 170px);
padding-bottom: 28px;
z-index: 50;
background: transparent;
overflow: auto; /* ważne: bez ucinania u góry/dołu */
}
.welcome-screen.is-visible{
animation: welcomeSceneIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes welcomeSceneIn{
from{ opacity: 0; transform: translateY(16px); filter: blur(7px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* centralny blok */
.welcome-center{
width: min(880px, 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
/* duże przywitanie */
.welcome-title{
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.05;
font-weight: 820;
letter-spacing: -0.03em;
color: rgba(17,24,39,0.94);
}
/* delikatny opis trybu */
.welcome-subtitle{
max-width: 720px;
margin-top: 0;
font-size: 14px;
line-height: 1.45;
color: rgba(17,24,39,0.62);
}
/* grid kafelków */
.welcome-suggestions{
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 10px;
}
/* kafelki — subtelniejsze, mniej „kafelkowe” */
.welcome-chip{
min-height: 62px;
background: rgba(255,255,255,0.74);
border: 1px solid rgba(0,0,0,0.08);
box-shadow:
0 12px 28px rgba(0,0,0,0.08),
0 1px 0 rgba(255,255,255,0.55) inset;
}
/* kaskadowa animacja pojawiania się kafelków */
.welcome-screen.is-visible .welcome-chip{
animation: welcomeTileIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 80ms + 120ms);
will-change: transform, opacity;
}
@keyframes welcomeTileIn{
from{ opacity: 0; transform: translateY(10px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* mobile */
@media (max-width: 768px){
.welcome-suggestions{
grid-template-columns: 1fr;
}
.welcome-title{
font-size: clamp(26px, 7vw, 34px);
}
.welcome-screen{
padding-top: clamp(60px, 10vh, 120px);
}
}
@media (prefers-reduced-motion: reduce){
.welcome-screen.is-visible{ animation: none !important; }
.welcome-screen.is-visible .welcome-chip{ animation: none !important; }
}
/* =========================================================
WELCOME SCREEN — ChatGPT.com-like (FINAL OVERRIDE)
Cel:
1) font + typografia jak na chatgpt.com (pierwsze wejście)
2) profesjonalne „kafelki” — wtopione w stronę, spójne z UI
========================================================= */
#welcome-screen.welcome-screen{
position: absolute;
inset: 0;
display: none;
align-items: flex-start;
justify-content: center;
padding: 0;
padding-top: clamp(30px, 12vh, 45px);
padding-bottom: 34px;
z-index: 60;
background: transparent;
overflow: auto;
scrollbar-width: none;
}
#welcome-screen.welcome-screen.is-visible{
animation: welcomeSceneIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#welcome-screen .welcome-center{
width: min(760px, 100%);
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}
/* tytuł jak ChatGPT */
#welcome-screen .welcome-title{
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: clamp(28px, 3.1vw, 35px);
line-height: 1.05;
font-weight: 450;
letter-spacing: -0.02em;
color: rgba(17,24,39,0.94);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* subtelny opis trybu (mniej dominantny niż title) */
#welcome-screen .welcome-subtitle{
max-width: 680px;
font-size: 14px;
line-height: 1.50;
color: rgba(17,24,39,0.60);
}
/* kafelki jak ChatGPT (2 kolumny na desktop) */
#welcome-screen .welcome-suggestions{
width: 100%;
margin-top: 12px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* reset + premium card look */
#welcome-screen .welcome-chip{
all: unset;
box-sizing: border-box;
width: 100%;
min-height: 70px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
border-radius: 16px;
cursor: pointer;
/* background: rgba(15,23,42,0.03);
border: 1px solid rgba(15,23,42,0.08); */
/* box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset; */
transition: transform .12s ease,
box-shadow .14s ease,
background .14s ease,
border-color .14s ease,
color .14s ease,
filter .14s ease;
}
#welcome-screen .welcome-chip:hover{
transform: translateY(-1px);
/* box-shadow:
0 12px 28px rgba(15,23,42,0.10),
0 1px 0 rgba(255,255,255,0.75) inset; */
}
#welcome-screen .welcome-chip:active{
transform: translateY(0);
}
/* animacja „stagger” (JS ustawia --i) */
#welcome-screen.is-visible .welcome-chip {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06),
0 1px 4px rgba(0, 0, 0, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.4);
}
/* ikonka w kafelku */
#welcome-screen .welcome-chip__icon{
width: 34px;
height: 34px;
border-radius: 12px;
flex: 0 0 auto;
display: grid;
place-items: center;
background: rgba(44,100,255,0.10);
border: 1px solid rgba(44,100,255,0.16);
color: rgba(44,100,255,0.92);
}
#welcome-screen .welcome-chip__icon.material-symbols-rounded{
font-size: 18px;
line-height: 1;
}
/* tekst */
#welcome-screen .welcome-chip__text{
min-width: 0;
flex: 1 1 auto;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.35;
font-weight: 560;
color: rgba(17,24,39,0.90);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
/* strzałka (material icon) */
#welcome-screen .welcome-chip__arrow{
flex: 0 0 auto;
color: rgba(17,24,39,0.45);
}
#welcome-screen .welcome-chip__arrow.material-symbols-rounded{
font-size: 18px;
line-height: 1;
}
/* opcjonalnie: lekko różne odcienie dla trybów */
#welcome-screen[data-mode="tax"] .welcome-chip__icon{
background: rgba(16,185,129,0.12);
border-color: rgba(16,185,129,0.22);
}
/* mobile */
@media (max-width: 768px){
#welcome-screen.welcome-screen{
padding-top: clamp(46px, 8vh, 110px);
padding-bottom: 20px;
}
#welcome-screen .welcome-suggestions{
grid-template-columns: 1fr;
}
#welcome-screen .welcome-chip{
min-height: 64px;
}
}
/* preferencje animacji */
@media (prefers-reduced-motion: reduce){
#welcome-screen.welcome-screen.is-visible{ animation: none !important; }
#welcome-screen.welcome-screen.is-visible .welcome-chip{ animation: none !important; }
#welcome-screen .welcome-chip{ transition: none !important; }
}
/* =========================================================
FIX (welcome screen) — brak „mignięcia” scrollbara przy ponownym klikaniu Ogólny/Podatkowy
========================================================= */
#boxContainer,
.box-container{
scrollbar-gutter: stable;
height: 70% !important;
}
/* =========================================================
UX polish: Kalkulator podatkowy + Symulacja podatkowa
(instrukcje, opisy pól, walidacja inline, accordion)
========================================================= */
.tool-intro {
margin-top: 14px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(6px);
}
.tool-intro__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 860px) {
.tool-intro__grid {
grid-template-columns: 1fr;
}
}
.tool-intro__card {
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.48);
background: rgba(0, 0, 0, 0.18);
}
.tool-intro__title {
font-weight: 800;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 0.92);
}
.tool-intro__list {
margin: 8px 0 0 18px;
padding: 0;
color: rgba(255, 255, 255, 0.84);
font-size: 0.92rem;
line-height: 1.35;
}
.tool-intro__footnote {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
color: rgba(255, 255, 255, 0.78);
font-size: 0.85rem;
}
.tool-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.88);
font-weight: 700;
font-size: 0.78rem;
}
.tool-badge--req {
border-color: rgba(255, 90, 90, 0.35);
background: rgba(255, 90, 90, 0.14);
}
.req {
color: rgba(255, 90, 90, 0.95);
font-weight: 900;
}
.field-help {
margin-top: 6px;
font-size: 0.82rem;
line-height: 1.25;
color: rgba(255, 255, 255, 0.70);
}
/* Inline validation (setupAnalyzeButton) */
.tool-field.field-invalid label {
color: rgba(255, 150, 150, 0.95);
}
.tbl-func.is-invalid {
border-color: rgba(255, 90, 90, 0.75) !important;
box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.18);
}
.field-error {
margin-top: 6px;
font-size: 0.82rem;
line-height: 1.25;
color: rgba(255, 150, 150, 0.95);
}
/* Accordion (native ) */
.tool-accordion {
margin: 14px 0 18px;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
overflow: hidden;
}
.tool-accordion summary {
cursor: pointer;
padding: 12px 14px;
font-weight: 800;
color: rgba(255, 255, 255, 0.92);
list-style: none;
}
.tool-accordion summary::-webkit-details-marker {
display: none;
}
.tool-accordion summary::after {
content: "›";
float: right;
opacity: 0.85;
transform: rotate(90deg);
transition: transform 0.18s ease;
}
.tool-accordion[open] summary::after {
transform: rotate(-90deg);
}
.tool-accordion__content {
padding: 12px 14px 4px;
}
/* =========================================================
TOOLS / AGENTS — UX POLISH (opisy, tipy, czytelność)
Wklejone jako override na końcu pliku.
========================================================= */
.container-func {
text-align: left; /* override wcześniejszego center */
}
.tool-header,
.tool-header h1 {
text-align: left;
}
.tool-header .p-func {
text-wrap: pretty;
hyphens: auto;
}
/* Sekcje formularzy — bardziej nowoczesna karta */
.tool-section {
background: linear-gradient(180deg, #ffffff, #fafbff);
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.tool-section-title {
color: #111827;
font-size: 0.98rem;
letter-spacing: 0.01em;
}
.tool-section-desc {
margin: -2px 0 10px 0;
font-size: 0.85rem;
line-height: 1.45;
color: #6b7280;
text-align: left;
}
/* Etykiety + wymagane pola */
.tool-field label {
font-size: 0.88rem;
font-weight: 650;
color: #111827;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
text-align: left;
}
.req-star {
color: #ef4444;
font-weight: 800;
line-height: 1;
}
/* Opisy/tipy pod polami — wyraźniejsze */
.field-help {
margin-top: 8px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(17, 24, 39, 0.03);
border: 1px solid rgba(17, 24, 39, 0.08);
border-left: 3px solid rgba(17, 24, 39, 0.18);
color: #4b5563;
font-size: 0.82rem;
line-height: 1.45;
text-align: left;
}
.field-help strong {
color: #111827;
font-weight: 650;
}
.field-help em {
color: #374151;
}
/* Instrukcja w nagłówku narzędzia */
.tool-instructions {
margin-top: 10px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.10);
color: #374151;
}
.tool-instructions strong {
color: #111827;
font-weight: 700;
}
.tool-instructions ul {
margin: 8px 0 0 18px;
padding: 0;
}
.tool-instructions li {
margin: 4px 0;
line-height: 1.45;
}
/* Pola wejściowe — lepszy kontrast, brak przycinania placeholderów */
.tbl-func {
border-radius: 10px;
border-color: #d1d5db;
}
.tbl-func::placeholder,
textarea.tbl-func::placeholder {
color: #6b7280;
opacity: 0.9;
/* wcześniej było nowrap + ellipsis — to „zjadało” tipy */
white-space: normal;
overflow: visible;
text-overflow: unset;
}
/* Fokus — poprawiamy błędne rgb([PHONE]) */
.tbl-func:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
outline: none;
}
/* Walidacja pól wymaganych (JS dodaje .is-invalid) */
.tbl-func.is-invalid {
border-color: #ef4444 !important;
background: rgba(239, 68, 68, 0.05);
}
.tbl-func.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
/* Sekcja „Zaawansowane” (details) */
.tool-details {
width: 100%;
max-width: 800px;
margin: 12px auto 8px auto;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: linear-gradient(180deg, #ffffff, #fafbff);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
padding: 0 18px;
}
.tool-details summary {
padding: 14px 0;
cursor: pointer;
font-weight: 650;
color: #111827;
list-style: none;
}
.tool-details summary::-webkit-details-marker {
display: none;
}
.tool-details summary::after {
content: "▾";
float: right;
opacity: 0.7;
}
.tool-details[open] summary::after {
content: "▴";
}
.tool-details[open] summary {
border-bottom: 1px solid #e5e7eb;
margin-bottom: 12px;
}
@media (max-width: 768px) {
.field-help {
font-size: 0.83rem;
}
.tool-instructions {
padding: 10px 12px;
}
}
/* =========================================================
TOOLS UX — lepsza czytelność opisów i tipów (2026-01)
Wklej NA KOŃCU styles3.css (nadpisuje wcześniejsze reguły)
========================================================= */
.container-func{
text-align: left !important;
align-items: stretch;
}
.tool-header,
.tool-header h1,
.tool-header .p-func{
text-align: left;
}
.tool-header .p-func{
text-wrap: pretty;
hyphens: auto;
}
@media (min-width: 900px){
.tool-header .p-func{
text-align: justify;
text-align-last: left;
}
}
.tool-section{
background: linear-gradient(180deg,#ffffff,#fafbff);
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(15,23,42,0.06);
}
.tool-section-title{
color:#111827;
font-size: 1rem;
font-weight: 650;
letter-spacing: 0.01em;
margin-bottom: 6px;
}
.tool-section-desc{
margin: -2px 0 12px 0;
font-size: 0.88rem;
line-height: 1.55;
color: #6b7280;
text-wrap: pretty;
hyphens: auto;
}
.tool-grid{
align-items: start;
}
.tool-field label{
font-size: 0.9rem;
font-weight: 650;
color: #111827;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.req-star{
color: #ef4444;
font-weight: 800;
line-height: 1;
}
.tool-field--full{
grid-column: 1 / -1;
}
.field-help{
margin-top: 8px;
border-radius: 12px;
background: rgba(37,99,235,0.06);
border: 1px solid rgba(37,99,235,0.18);
border-left: 4px solid rgba(37,99,235,0.55);
color: #374151;
font-size: 0.86rem;
line-height: 1.55;
text-wrap: pretty;
hyphens: auto;
}
@media (min-width: 900px){
.field-help{
text-align-last: left;
}
}
.field-help strong{ color:#111827; font-weight: 700; }
.field-help em{ color:#111827; font-weight: 600; }
.tool-instructions{
margin-top: 10px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(15,23,42,0.04);
border: 1px solid rgba(15,23,42,0.10);
border-left: 4px solid rgba(44,100,255,0.38);
color: #374151;
}
.tool-instructions strong{ color:#111827; font-weight:700; }
.tool-instructions ul{ margin: 8px 0 0 18px; padding:0; }
.tool-instructions li{ margin: 5px 0; line-height: 1.55; }
/* placeholder: NIE ucinaj długich instrukcji w placeholderach */
textarea.tbl-func::placeholder,
.tbl-func::placeholder{
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
opacity: 0.95;
color: #6b7280;
}
/* Fokus */
.tbl-func:focus{
border-color:#2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,0.16);
outline: none;
}
/* Walidacja (JS dodaje .is-invalid) */
.tbl-func.is-invalid{
border-color:#ef4444 !important;
background: rgba(239,68,68,0.06);
}
.tbl-func.is-invalid:focus{
box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
/* details (sekcje zaawansowane) */
.tool-details{
width: 100%;
max-width: 800px;
margin: 12px auto 8px auto;
border-radius: 14px;
border: 1px solid #e5e7eb;
background: linear-gradient(180deg,#ffffff,#fafbff);
box-shadow: 0 10px 26px rgba(15,23,42,0.06);
padding: 0 18px;
}
.tool-details summary{
padding: 14px 0;
cursor:pointer;
font-weight: 650;
color:#111827;
list-style: none;
}
.tool-details summary::-webkit-details-marker{ display: none; }
.tool-details summary::after{
content:"▾";
float:right;
opacity:0.7;
}
.tool-details[open] summary::after{ content:"▴"; }
.tool-details[open] summary{
border-bottom: 1px solid #e5e7eb;
margin-bottom: 12px;
}
/* =========================================================
UX DOPIESZCZENIE: opisy pól, instrukcje i pasek statusu
(dodane na końcu pliku – nadpisuje wcześniejsze style)
========================================================= */
/* Formularze narzędzi – spójne wyrównanie tekstu */
.container-func {
text-align: left;
}
.tool-header,
.tool-header h1,
.tool-section,
.tool-section-desc {
text-align: left;
}
.tool-field label {
display: flex;
align-items: center;
gap: 6px;
text-align: left;
}
.req-star {
color: #ef4444;
font-weight: 800;
line-height: 1;
}
/* Opisy pól (tipy) – większy kontrast */
.field-help {
background: rgba(37, 99, 235, 0.05);
border: 1px solid rgba(37, 99, 235, 0.18);
border-left: 4px solid rgba(37, 99, 235, 0.55);
color: #111827;
font-size: 0.86rem;
line-height: 1.55;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.field-help strong {
color: #111827;
}
.field-help em {
color: #374151;
}
/* Instrukcje w nagłówku narzędzi – większy kontrast i lepsza czytelność */
.tool-instructions {
background: rgba(17, 24, 39, 0.03);
border: 1px solid rgba(17, 24, 39, 0.12);
color: #111827;
font-size: 0.88rem;
line-height: 1.55;
}
.tool-instructions li {
margin: 6px 0;
}
/* Pasek statusu – czytelniejszy, z rozróżnieniem etapów */
.status-label {
margin-bottom: 8px;
font-size: 12px;
font-weight: 650;
color: rgba(17, 24, 39, 0.72);
}
.status-progress {
height: 6px;
background: rgba(17, 24, 39, 0.10);
}
.status-progress-bar {
background: #111827;
border-radius: 999px;
}
.status-steps {
margin-top: 8px;
font-size: 11px;
color: rgba(17, 24, 39, 0.70);
}
.status-step {
opacity: 0.45;
overflow: hidden;
text-overflow: ellipsis;
}
.status-step::before {
content: "○ ";
}
.status-step.done {
opacity: 0.80;
}
.status-step.done::before {
content: "✓ ";
}
.status-step.active {
font-weight: 700;
opacity: 1;
}
.status-step.active::before {
content: "● ";
}
/* Dopasowanie paska w globalnym slocie (bardziej specyficzne selektory) */
#global-status-slot .status-progress {
height: 6px;
}
#global-status-slot .status-steps {
margin-top: 8px;
}
/* === Notes performance / large note view === */
.note-loading{
opacity: 0.85;
font-style: italic;
}
.note-big-wrapper{
width: 100%;
}
.note-big-info{
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 10px;
background: rgba(255, 193, 7, 0.12);
border: 1px solid rgba(255, 193, 7, 0.35);
}
.note-render-btn{
border: 0;
border-radius: 10px;
padding: 8px 12px;
cursor: pointer;
}
.note-plain-pre{
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
padding: 12px;
border-radius: 10px;
background: rgba(0,0,0,0.04);
}
/* =========================================================
UI POLISH (2026-02-02) — requested tweaks
- #global-status-slot: lekka przezroczystość + „glass” (nowocześniej)
- #bottom-box + #profile-data.userData: zaokrąglenia jak welcome-chip
- welcome-screen: czytelniej + bardziej „pro” + lepiej wkomponowany
========================================================= */
:root{
--ui-radius: 24px;
--ui-radius-sm: 12px;
/* Glass tokens */
--ui-glass-bg: rgba(255,255,255,0.72);
--ui-glass-border: rgba(15,23,42,0.10);
--ui-glass-shadow: 0 18px 46px rgba(0,0,0,0.12);
--ui-glass-blur: 14px;
/* Accent (spójne z istniejącym ring/focus w CSS) */
--ui-accent: 44, 100, 255;
}
/* ------------------------------- */
/* 1) GLOBAL STATUS SLOT (glass) */
/* ------------------------------- */
#global-status-slot{
/* było: background: #fff */
background: rgba(255,255,255,0.55) !important;
backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
border-bottom: 1px solid rgba(0,0,0,0.06);
padding: 6px 0 8px !important;
}
/* usuń pusty pasek, gdy nic nie jest renderowane */
#global-status-slot:empty{
display: none;
}
#global-status-slot .status-area{
/* dopasuj szerokość do chat/tools (masz już --content-w / --content-max) */
width: 33%;
max-width: var(--content-max, 1100px);
margin-left: auto;
margin-right: auto;
/* było: background: #fff */
background: rgba(255,255,255,0.23) !important;
/* border: 1px solid var(--ui-glass-border) !important; */
/* było: 10px */
border-radius: var(--ui-radius) !important;
/* box-shadow: var(--ui-glass-shadow); */
-webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
background: transparent !important;
}
/* ------------------------------------- */
/* 3) BOTTOM BOX — radius jak welcome-chip */
/* ------------------------------------- */
#bottom-box.bottom-box{
border-radius: var(--ui-radius) !important; /* jak welcome-chip */
background: rgba(255,255,255,0.80) !important;
border: 1px solid rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 46px rgba(0,0,0,0.12) !important;
backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
}
#bottom-box.bottom-box:hover{
background: rgba(255,255,255,0.88) !important;
}
#bottom-box.bottom-box:focus-within{
border-color: rgba(var(--ui-accent), 0.40) !important;
}
/* ------------------------------------- */
/* 4) USER DATA (top bar) — radius jak welcome-chip */
/* ------------------------------------- */
/* W HTML to jest #profile-data z klasą .userData */
#profile-data.userData{
border-radius: var(--ui-radius) !important;
border: 1px solid rgba(15,23,42,0.10) !important;
/* background: rgba(255,255,255,0.72) !important; */
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow: 0 14px 34px var(--yta-accent-b-22);
}
/* pilnuj ellipsis (masz to częściowo już, tu „dokręcamy”) */
#profile-data.userData #userName strong{
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Gdy przenosisz .userData do usermenu (mobile), zostawiamy ją „czystą” */
#usermenu .userData{
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
}
/* ------------------------------------- */
/* 5) WELCOME SCREEN — bardziej pro / czytelne */
/* ------------------------------------- */
#welcome-screen .welcome-center{
padding: 22px 22px 18px;
border-radius: 22px;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* title bardziej „productowy” */
#welcome-screen .welcome-title{
letter-spacing: -0.025em;
}
/* opis: ciut większy kontrast */
#welcome-screen .welcome-subtitle{
font-size: 14px;
line-height: 1.55;
color: rgba(17,24,39,0.62);
}
/* sugerowane akcje – delikatnie większy odstęp */
#welcome-screen .welcome-suggestions{
gap: 10px;
margin-top: 14px;
}
/* chips: ujednolicenie radius + kontrast */
#welcome-screen .welcome-chip{
border-radius: var(--ui-radius) !important;
/* background: rgba(15,23,42,0.04);
border-color: rgba(15,23,42,0.10); */
}
html {
background:
radial-gradient(
900px 500px at 15% 10%,
rgba(255, 153, 0, 0.12),
transparent 55%
),
radial-gradient(
700px 400px at 85% 15%,
rgba(255, 193, 7, 0.10),
transparent 60%
),
radial-gradient(
800px 500px at 50% 90%,
rgba(255, 111, 0, 0.08),
transparent 65%
),
#ffffff;
background-attachment: fixed;
}
body {
background: transparent;
}
/*
.container-func,
.output-func,
.modal-content,
.form-popup,
.login-box,
.modal-box {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 14px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
*/
/*
.top-bar {
background:
linear-gradient(
90deg,
rgba(255, 152, 0, 0.04),
rgba(255, 193, 7, 0.06),
rgba(255, 152, 0, 0.04)
),
#ffffff;
}
*/
/* ========================================= */
/* FIX: BACKGROUND TILING / REPEAT (GRADIENT) */
/* ========================================= */
html, body{
min-height: 100%;
}
/* Gradienty NIE mogą się powtarzać (domyślnie repeat potrafi “kafelkować” tło) */
html{
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover !important;
}
/* U Ciebie body ma ustawione tło na białe – to potrafi “przykryć” html-background */
body{
background: transparent !important;
background-color: transparent !important;
}
html, body{
min-height: 100%;
}
/* Tło: baza (linear) + 3 radiale jako akcenty */
html{
background:
/* baza — bardzo delikatny tint na całej stronie */
linear-gradient(
180deg,
rgba(255, 154, 0, 0.06) 0%,
rgba(255, 255, 255, 0.00) 45%,
rgba(255, 154, 0, 0.04) 100%
),
/* akcenty — większe "plamy" */
radial-gradient(
1200px 700px at 12% 12%,
rgba(255, 153, 0, 0.16),
transparent 60%
),
radial-gradient(
1100px 650px at 88% 18%,
rgba(255, 193, 7, 0.14),
transparent 62%
),
radial-gradient(
1200px 800px at 50% 92%,
rgba(255, 111, 0, 0.10),
transparent 65%
),
#ffffff;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: 100% 100% !important;
}
/* U Ciebie body ma domyślnie białe tło — musi być transparent, żeby było widać html background */
body{
background: transparent !important;
background-color: transparent !important;
}
:root{
/* Bazowe tło (jasne) */
--yta-bg-0: #fff7ed; /* ciepły, kremowy top */
--yta-bg-1: #ffffff; /* środek */
--yta-bg-2: #f8fafc; /* delikatnie chłodniejszy dół */
/* „Plamy” koloru (pomarańcz/amber) */
--yta-spot-1: rgba(255, 138, 0, 0.30);
--yta-spot-2: rgba(255, 193, 7, 0.20);
--yta-spot-3: rgba(255, 87, 34, 0.14);
}
/* Na mobile fixed bywa problematyczne — dajemy bezpieczny fallback */
@media (max-width: 768px){
html{ background-attachment: scroll; }
}
/* 2) body nie może przykrywać tła z html */
body{
background: transparent !important;
}
/* 3) Bezpiecznie: główne wrappery (gdyby gdzieś dostały tło) też transparentne */
#MainYTAmenu,
.MainYTAmenu,
.chatMenu,
#panelContent{
background: transparent !important;
}
/* 5) Status-slot — jeszcze bardziej „wtopiony” w gradient (opcjonalny override) */
#global-status-slot{
background: rgba(255,255,255,0.23) !important;
}
/* =========================================================
PROFILE-DATA — pokazuj „Ważne do” tylko na hover
========================================================= */
/* kontener profilu – brak skakania layoutu */
#profile-data.userData {
overflow: hidden;
transition: box-shadow 0.2s ease;
}
/* sekcja „Ważne do” — DOMYŚLNIE UKRYTA */
#profile-data .limits-ui__expiry {
max-height: 0;
opacity: 0;
margin-top: 0;
pointer-events: none;
overflow: hidden;
transition:
max-height 0.25s ease,
opacity 0.2s ease,
margin-top 0.2s ease;
}
/* PO NAJECHANIU — pokazujemy i rozszerzamy profile-data */
#profile-data.userData:hover .limits-ui__expiry {
max-height: 40px; /* wystarczy na jedną linię */
opacity: 0.85;
margin-top: 4px;
pointer-events: auto;
}
/* opcjonalnie: lekki efekt podkreślenia na hover */
#profile-data.userData:hover {
box-shadow: 0 18px 44px rgba(0,0,0,0.14);
}
.YTAlogo-mode{
flex: 0 0 auto; /* zamiast: flex: 0 0 72px */
min-width: 72px; /* opcjonalnie: minimum, żeby nie było "zbyt ciasno" */
max-width: none; /* pozwól rosnąć pod tekst */
overflow: visible; /* bez cięcia */
text-overflow: clip; /* bez "..." */
white-space: nowrap; /* w jednej linii */
}
/* =========================================================
PATCH: CUSTOM-QUOTE dopasowany do tła (bez białej "płachty")
========================================================= */
.custom-quote{
/* delikatne przyciemnienie przy lewej krawędzi + reszta przezroczysta */
background: linear-gradient(90deg, rgba(15,23,42,.04), rgba(15,23,42,0));
border-left: 4px solid rgba(15,23,42,.18);
border-radius: 14px;
padding: 12px 14px;
margin: 14px 0;
font-style: italic;
color: rgba(15,23,42,.86);
/* usuń efekt "kartki" */
box-shadow: none;
}
.custom-quote p{ margin: 0; }
.custom-quote > *:first-child{ margin-top: 0; }
.custom-quote > *:last-child{ margin-bottom: 0; }
/* =========================================================
UI HOTFIX (2026-02-04)
Transparent / glass icon-buttons + quote + speedhint
- usuwa „białe kwadraty” wynikające z globalnego button{ background:white }
- wtapianie blockquote.custom-quote w stałe tło (glass)
========================================================= */
/* ---------- Icon buttons (konto + kopiuj/pobierz) ---------- */
:root{
--yta-icon-bg: rgba(255,255,255,0.18);
--yta-icon-bg-hover: rgba(255,255,255,0.30);
--yta-icon-border: rgba(15,23,42,0.10);
--yta-icon-border-hover: rgba(15,23,42,0.14);
--yta-icon-fg: rgba(17,24,39,0.74);
--yta-icon-fg-hover: rgba(17,24,39,0.92);
--yta-icon-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
/* 1) Konto (prawy górny róg) */
#userbutton{
background: var(--yta-icon-bg) !important;
border: 1px solid !important;
color: var(--yta-icon-fg) !important;
text-shadow: none !important;
box-shadow: var(--yta-icon-shadow);
backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(140%);
border-radius: 16px !important;
box-sizing: border-box;
/* reset global button */
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform .12s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease, color .14s ease;
}
#userbutton:hover{
background: var(--yta-icon-bg-hover) !important;
border-color: var(--yta-icon-border-hover) !important;
color: var(--yta-icon-fg-hover) !important;
transform: translateY(-1px);
}
#userbutton:active{
transform: translateY(0);
filter: brightness(0.98);
}
#userbutton:focus-visible{
outline: none;
box-shadow: var(--yta-icon-shadow), 0 0 0 3px rgba(var(--ui-accent, 44, 100, 255), 0.22);
}
/* 2) Ikony w treści (copy/download) */
.tooltip-container > button.copybutton,
.tooltip-container > button.copybutton1,
.tooltip-container > button[id^="copybutton"]{
background: var(--yta-icon-bg) !important;
border: 1px solid var(--yta-icon-border) !important;
color: var(--yta-icon-fg) !important;
text-shadow: none !important;
backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(140%);
box-sizing: border-box;
/* reset global button */
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform .12s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease, color .14s ease;
}
.tooltip-container > button.copybutton:hover,
.tooltip-container > button.copybutton1:hover,
.tooltip-container > button[id^="copybutton"]:hover{
background: var(--yta-icon-bg-hover) !important;
border-color: var(--yta-icon-border-hover) !important;
color: var(--yta-icon-fg-hover) !important;
transform: translateY(-1px);
}
.tooltip-container > button.copybutton:active,
.tooltip-container > button.copybutton1:active,
.tooltip-container > button[id^="copybutton"]:active{
transform: translateY(0);
filter: brightness(0.98);
}
.tooltip-container > button.copybutton:focus-visible,
.tooltip-container > button.copybutton1:focus-visible,
.tooltip-container > button[id^="copybutton"]:focus-visible{
outline: none;
}
/* ikona w środku bez „rozjeżdżania” */
#userbutton .material-symbols-rounded,
.tooltip-container > button .material-symbols-rounded{
line-height: 1 !important;
}
/* =========================================================
AGENTS / TOOLS – visual alignment with current UI (2026-02)
(wklej na samym końcu styles3.css – nadpisuje wcześniejsze reguły)
========================================================= */
.container-func{
/* scoped tokens (fallbacks if vars not present) */
--yta-tool-accent: var(--ui-accent, 44, 100, 255);
--yta-tool-radius: var(--ui-radius, 16px);
--yta-tool-bg: rgba(255,255,255,0.86);
--yta-tool-bg-soft: rgba(248,250,252,0.72);
--yta-tool-border: var(--ui-glass-border, rgba(15,23,42,0.10));
--yta-tool-shadow: var(--ui-glass-shadow, 0 18px 46px rgba(0,0,0,0.12));
--yta-tool-blur: var(--ui-glass-blur, 14px);
}
/* Card surfaces */
.container-func .tool-header,
.container-func .tool-section,
.container-func .tool-details{
background: var(--yta-tool-bg) !important;
border: 1px solid var(--yta-tool-border) !important;
border-radius: var(--yta-tool-radius) !important;
box-shadow: var(--yta-tool-shadow) !important;
backdrop-filter: blur(var(--yta-tool-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--yta-tool-blur)) saturate(140%);
}
/* Header: subtle top glow + spacing */
.container-func .tool-header{
position: relative;
overflow: hidden;
padding: 18px 20px !important;
}
/* background wash behind content */
.container-func .tool-header::after{
content:"";
position:absolute;
inset:0;
z-index: 0;
background:
radial-gradient(900px 240px at 12% 0%, rgba(var(--yta-tool-accent),0.09), transparent 55%),
radial-gradient(900px 240px at 88% 0%, rgba(var(--yta-tool-accent),0.06), transparent 55%);
pointer-events:none;
opacity: 0.95;
}
/* keep content above the wash */
.container-func .tool-header::before,
.container-func .tool-header > *{
position: relative;
z-index: 1;
}
/* Badge pill in header */
.container-func .tool-header::before{
background: rgba(255,255,255,0.66) !important;
border: 1px solid var(--yta-tool-border) !important;
color: rgba(17,24,39,0.70) !important;
backdrop-filter: blur(calc(var(--yta-tool-blur) * 0.75)) saturate(140%);
-webkit-backdrop-filter: blur(calc(var(--yta-tool-blur) * 0.75)) saturate(140%);
}
/* Sections padding */
.container-func .tool-section{
padding: 16px 16px !important;
}
/* details panel */
.container-func .tool-details{
padding: 20px !important;
}
/* Instruction + Field help match */
.container-func .tool-instructions{
background: rgba(255,255,255,0.58) !important;
border: 1px solid var(--yta-tool-border) !important;
border-left: 4px solid rgba(var(--yta-tool-accent),0.38) !important;
}
.container-func .field-help{
background: rgba(var(--yta-tool-accent),0.08) !important;
border: 1px solid rgba(var(--yta-tool-accent),0.18) !important;
border-left: 4px solid rgba(var(--yta-tool-accent),0.55) !important;
}
/* Inputs/selects */
.container-func .tbl-func{
background: rgba(255,255,255,0.92) !important;
border-color: rgba(15,23,42,0.14) !important;
}
.container-func .tbl-func:focus{
border-color: rgba(var(--yta-tool-accent),0.90) !important;
box-shadow: 0 0 0 4px rgba(var(--yta-tool-accent),0.16) !important;
}
/* Select arrow */
.container-func select.tbl-func{
-webkit-appearance: none;
appearance: none;
padding-right: 44px !important;
background-image:
linear-gradient(45deg, transparent 50%, rgba(17,24,39,0.55) 50%),
linear-gradient(135deg, rgba(17,24,39,0.55) 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
/* Primary action button */
.container-func .button-func{
border-radius: 12px !important;
background: rgba(17,24,39,0.92) !important;
box-shadow: 0 14px 34px rgba(17,24,39,0.18) !important;
}
.container-func .button-func:hover{
background: rgba(17,24,39,0.74) !important;
}
/* Cytaty (blockquote.custom-quote) — dopasuj do stałego tła (glass) */
.custom-quote{
background: rgba(255,255,255,0.62) !important;
border: 1px solid var(--ui-glass-border, rgba(15,23,42,0.10)) !important;
border-left: 4px solid rgba(var(--ui-accent, 44, 100, 255),0.35) !important;
border-radius: var(--ui-radius-sm, 12px) !important;
backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(140%);
box-shadow: 0px 2px 2px rgba(0,0,0,0.12) !important;
}
/* =========================================================
ICON CHIPS — spójne z "Zagadnienia" (#profile-data.userData)
Cel: ikony (kopiuj/pobierz/konto/doładuj) mają wyglądać jak chip/pill,
a nie "białe kwadraty/kółka" odcinające się od tła.
Nie zmienia JS ani HTML — tylko CSS.
========================================================= */
:root{
--ui-icon-size: 40px;
--ui-icon-radius: var(--ui-radius, 16px);
/* trochę lżejszy cień niż duże karty, żeby nie dominowało */
--ui-icon-shadow: 0px 0px 1px rgba(0,0,0,0.12);
--ui-icon-shadow-hover: 0 0px 3px rgba(0,0,0,0.14);
--mask-shimmer-offset: 0%;
--tw-mask-shimmer-duration: 4s;
--tw-mask-shimmer-delay: 0s
}
/* Wspólny „chip” dla ikon */
.copywrap .copybutton,
.tooltip-container .copybutton,
.tooltip-container .copybutton1,
.menu-container #userbutton,
.plusForpayment{
width: var(--ui-icon-size) !important;
height: var(--ui-icon-size) !important;
border-radius: var(--ui-icon-radius) !important;
border: 1px solid var(--ui-glass-border, rgba(15,23,42,0.10)) !important;
/* background: var(--ui-glass-bg, rgba(255,255,255,0.72)) !important; */
box-shadow: var(--ui-icon-shadow) !important;
backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(140%) !important;
-webkit-backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(140%) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
text-align: center !important;
text-shadow: none !important;
color: rgba(17,24,39,0.74) !important;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
transform .12s ease,
box-shadow .12s ease,
background .12s ease,
border-color .12s ease,
color .12s ease;
}
/* Ikony Material: bez żadnego tła (czasem bywa nadpisane) */
.copywrap .copybutton .material-symbols-rounded,
.tooltip-container .copybutton .material-symbols-rounded,
.tooltip-container .copybutton1 .material-symbols-rounded,
.menu-container #userbutton .material-symbols-rounded,
.plusForpayment .material-symbols-rounded{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
line-height: 1 !important;
}
/* Hover */
.copywrap .copybutton:hover,
.tooltip-container .copybutton:hover,
.tooltip-container .copybutton1:hover,
.menu-container #userbutton:hover,
.plusForpayment:hover{
background: rgba(255,255,255,0.84) !important;
border-color: rgba(var(--ui-accent, 44,100,255), 0.28) !important;
box-shadow: var(--ui-icon-shadow-hover) !important;
transform: translateY(-1px);
}
/* Active / klik */
.copywrap .copybutton:active,
.tooltip-container .copybutton:active,
.tooltip-container .copybutton1:active,
.menu-container #userbutton:active{
transform: translateY(0);
}
/* plusForpayment to div, więc :active nie zawsze zadziała (zależy od przeglądarki),
ale dodajemy dla spójności */
.plusForpayment:active{
transform: translateY(0);
}
/* Focus ring (klawiatura) */
.copywrap .copybutton:focus-visible,
.tooltip-container .copybutton:focus-visible,
.tooltip-container .copybutton1:focus-visible,
.menu-container #userbutton:focus-visible{
outline: none !important;
border-color: rgba(var(--ui-accent, 44,100,255), 0.45) !important;
box-shadow:
0 0 0 4px rgba(var(--ui-accent, 44,100,255), 0.16),
var(--ui-icon-shadow-hover) !important;
}
/* plusForpayment nie jest buttonem — dajemy ring na focus (jeśli kiedyś dostanie tabindex) */
.plusForpayment:focus-visible{
outline: none !important;
border-color: rgba(var(--ui-accent, 44,100,255), 0.45) !important;
box-shadow:
0 0 0 4px rgba(var(--ui-accent, 44,100,255), 0.16),
var(--ui-icon-shadow-hover) !important;
}
/* Ikony Material: bez żadnego tła (czasem bywa nadpisane) */
.copywrap .copybutton .material-symbols-rounded,
.tooltip-container .copybutton1 .material-symbols-rounded,
.menu-container #userbutton .material-symbols-rounded,
.plusForpayment .material-symbols-rounded{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
line-height: 1 !important;
}
/* Hover */
.copywrap .copybutton:hover,
.tooltip-container .copybutton1:hover,
.menu-container #userbutton:hover,
.plusForpayment:hover{
background: rgba(255,255,255,0.84) !important;
border-color: rgba(var(--ui-accent, 44,100,255), 0.28) !important;
box-shadow: var(--ui-icon-shadow-hover) !important;
transform: translateY(-1px);
}
/* Active / klik */
.copywrap .copybutton:active,
.tooltip-container .copybutton1:active,
.menu-container #userbutton:active{
transform: translateY(0);
}
/* plusForpayment to div, więc :active nie zawsze zadziała (zależy od przeglądarki),
ale dodajemy dla spójności */
.plusForpayment:active{
transform: translateY(0);
}
/* Focus ring (klawiatura) */
.copywrap .copybutton:focus-visible,
.tooltip-container .copybutton1:focus-visible,
.menu-container #userbutton:focus-visible{
outline: none !important;
border-color: rgba(var(--ui-accent, 44,100,255), 0.45) !important;
box-shadow:
0 0 0 4px rgba(var(--ui-accent, 44,100,255), 0.16),
var(--ui-icon-shadow-hover) !important;
}
/* plusForpayment nie jest buttonem — dajemy ring na focus (jeśli kiedyś dostanie tabindex) */
.plusForpayment:focus-visible{
outline: none !important;
border-color: rgba(var(--ui-accent, 44,100,255), 0.45) !important;
box-shadow:
0 0 0 4px rgba(var(--ui-accent, 44,100,255), 0.16),
var(--ui-icon-shadow-hover) !important;
}
/* Uporządkuj plusForpayment: stały rozmiar + brak "skakania" (wcześniej zmieniał wymiary na hover) */
.plusForpayment{
/* dopasuj pion do #userbutton i #profile-data */
top: 13px !important;
}
/* Nadpisz stary hover, który zmieniał wymiary */
.plusForpayment:hover{
width: var(--ui-icon-size) !important;
height: var(--ui-icon-size) !important;
}
/* Jeśli tooltip-container miał narzucone małe wymiary, podbijamy tylko dla tych ikon */
.tooltip-container .copybutton,
.tooltip-container .copybutton1{
width: var(--ui-icon-size) !important;
height: var(--ui-icon-size) !important;
}
#panelContent {
top: 20px;
}
/* =========================================================
TOOLS / AGENTS — spójność kolorystyczna z tłem strony (warm UI)
(wklej na samym końcu styles3.css)
========================================================= */
.container-func{
/* warm brand accents */
--yta-tool-warm: 255, 152, 0; /* orange */
--yta-tool-warm2: 255, 193, 7; /* amber */
--yta-tool-line: rgba(15,23,42,0.10);
--yta-tool-surface: rgba(255,255,255,0.86);
--yta-tool-surface2: rgba(255,250,240,0.82);
/* --yta-tool-shadow: 0 10px 30px rgba(0,0,0,0.08); */
--yta-tool-shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
0 2px 6px rgba(0, 0, 0, 0.04);;
--yta-tool-shadow-soft: 0 10px 26px rgba(15,23,42,0.06);
}
/* Header card */
.container-func .tool-header{
background: linear-gradient(135deg, var(--yta-tool-surface), var(--yta-tool-surface2)) !important;
border-color: var(--yta-tool-line) !important;
box-shadow: var(--yta-tool-shadow) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
}
/* Badge in header */
.container-func .tool-header::before{
background: rgba(var(--yta-tool-warm2),0.18) !important;
border: 1px solid rgba(var(--yta-tool-warm2),0.28) !important;
color: rgba(17,24,39,0.72) !important;
}
/* Sections/details */
.container-func .tool-section,
.container-func .tool-details{
background: rgba(255,255,255,0.92) !important;
border-color: var(--yta-tool-line) !important;
box-shadow: var(--yta-tool-shadow-soft) !important;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
/* Instructions + field tips: warm instead of blue */
.container-func .tool-instructions{
background: rgba(255,255,255,0.62) !important;
border: 1px solid var(--yta-tool-line) !important;
border-left: 4px solid rgba(var(--yta-tool-warm),0.48) !important;
}
.container-func .field-help{
background: rgba(var(--yta-tool-warm2),0.12) !important;
border: 1px solid rgba(var(--yta-tool-warm2),0.24) !important;
border-left: 4px solid rgba(var(--yta-tool-warm),0.60) !important;
}
/* Focus ring in tools = warm, not blue */
.container-func .tbl-func:focus{
border-color: rgba(var(--yta-tool-warm),0.90) !important;
box-shadow: 0 0 0 4px rgba(var(--yta-tool-warm),0.16) !important;
outline: none;
}
/* Keep invalid state (red) even when focused */
.container-func .tbl-func.is-invalid{
border-color: rgba(239,68,68,0.95) !important;
background: rgba(239,68,68,0.06) !important;
}
.container-func .tbl-func.is-invalid:focus{
border-color: rgba(239,68,68,0.95) !important;
box-shadow: 0 0 0 4px rgba(239,68,68,0.18) !important;
}
/* =========================================================
SSE / STATUS UX (2026-02-05)
- czytelniejszy status-area + stabilny waiting bubble
========================================================= */
#global-status-slot .status-header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
#global-status-slot .status-label{
display: flex;
align-items: center;
gap: 8px;
margin: 0 !important;
min-width: 0;
}
#global-status-slot .status-dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(var(--ui-accent, 44, 100, 255), 0.85);
box-shadow: 0 0 0 3px rgba(var(--ui-accent, 44, 100, 255), 0.18);
animation: statusPulse 1.3s ease-in-out infinite;
flex: 0 0 auto;
}
#global-status-slot .status-area.is-idle .status-dot{
animation: none;
opacity: 0.35;
box-shadow: none;
}
@keyframes statusPulse{
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.25); opacity: 1; }
}
#global-status-slot .status-stage{
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
letter-spacing: .02em;
background: rgba(15,23,42,0.06);
border: 1px solid rgba(15,23,42,0.10);
color: rgba(17,24,39,0.80);
white-space: nowrap;
}
#global-status-slot .status-stage:empty{
display: none;
}
#global-status-slot .status-label-text{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(17,24,39,0.78);
font-size: 12px;
font-weight: 550;
}
#global-status-slot .status-percent{
flex: 0 0 auto;
font-size: 11px;
font-weight: 650;
color: rgba(17,24,39,0.55);
}
/* Waiting bubble: mniej „pulsowania”, bardziej pro + dots animacja */
.waiting-text{
position: relative;
overflow: hidden;
max-width: 420px;
padding: 8px 12px;
border-radius: 15px;
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
box-shadow: var(--ui-glass-shadow);
backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
color: rgba(17,24,39,0.86);
font-size: 13px;
line-height: 1.4;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
animation: waitingBubbleBreathe 2.5s ease-in-out infinite;
}
.waiting-text .waiting-msg{
position: relative;
display: inline-block;
overflow: hidden;
}
.waiting-text .waiting-msg::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(
110deg,
transparent 0%,
rgba(255,255,255,0.15) 40%,
rgba(255,255,255,0.45) 50%,
rgba(255,255,255,0.15) 60%,
transparent 100%
);
transform: translateX(-140%);
animation: waitingTextShimmer 2.6s ease-in-out infinite;
pointer-events:none;
mix-blend-mode: screen;
opacity:0.55;
will-change: transform;
}
@keyframes waitingTextShimmer{
0%{
transform: translateX(-140%);
}
55%{
transform: translateX(140%);
}
100%{
transform: translateX(140%);
}
}
@keyframes waitingBubbleBreathe{
0%,100%{
transform: scale(1);
opacity:0.96;
}
50%{
transform: scale(1.03);
opacity:0.86;
}
}
.waiting-dots{
display: inline-flex;
gap: 3px;
margin-left: 6px;
vertical-align: middle;
}
.waiting-dots span{
width:4px;
height:4px;
border-radius:999px;
background:currentColor;
opacity:0.28;
animation: waitingDot 1.25s cubic-bezier(.4,0,.2,1) infinite;
will-change: transform,opacity;
}
.waiting-dots span:nth-child(2){ animation-delay: 0.2s; }
.waiting-dots span:nth-child(3){ animation-delay: 0.4s; }
@keyframes waitingDot{
0%{
transform: translateY(0);
opacity:0.25;
}
30%{
transform: translateY(-2px);
opacity:1;
}
60%{
transform: translateY(0);
opacity:0.55;
}
100%{
transform: translateY(0);
opacity:0.25;
}
}
/* =========================================================
FIX: końcówka odpowiedzi + ikony copy/download nie pod bottom-box
========================================================= */
/* =========================================================
PATCH 2026-02-24 — Chat: waiting zawsze nad bottom-box (jak scrollDownButton)
- Na desktopie --bottom-box-reserved-h bywa “zamrożone” na hover/focus,
a realna wysokość composera rośnie ( --bottom-box-h ).
- Dokładamy dynamiczny margin-bottom dla .waiting w .box-container o (real - reserved),
żeby loader nigdy nie chował się pod bottom-box.
========================================================= */
.box-container .waiting{
/* bazowo było 16px (z .waiting { margin: 16px 0; }),
podbijamy dół o różnicę realnej wysokości composera vs “rezerwy” */
margin-bottom: max(
16px,
calc(
16px + var(--bottom-box-h, 0px) - var(--bottom-box-reserved-h, var(--bottom-box-h, 0px))
)
);
}
/* Status slot: niech nie zjada przestrzeni (i nie wymusza “dziury” gdy pusty) */
#global-status-slot:empty{
display: none !important;
}
/* Drobny lift status-area, żeby wizualnie “oddychało” nad chatem */
#global-status-slot{
padding-bottom: 2px;
}
/* =====================================================================
SIDE MENU — GLASS / ALIGNMENT UPGRADE (FINAL OVERRIDE)
Wklej na sam koniec styles3.css
===================================================================== */
#sideMenu.side-menu{
/* Tokens lokalne dla menu (LIGHT domyślnie) */
--sm-accent-rgb: 255, 153, 0; /* amber — pasuje do Twoich warm akcentów */
--sm-bg: rgba(255,255,255,0.66);
--sm-panel: rgba(255,255,255,0.42);
--sm-panel2: rgba(255,255,255,0.55);
--sm-border: rgba(15,23,42,0.10);
--sm-text: rgba(17,24,39,0.86);
--sm-muted: rgba(17,24,39,0.56);
--sm-item-radius: 14px;
--sm-item-h: 44px;
--sm-item-h-compact: 40px;
border-right: 1px solid var(--sm-border);
box-shadow: 0 26px 70px rgba(0,0,0,0.18);
-webkit-backdrop-filter: blur(18px) saturate(150%);
color: var(--sm-text);
/* neutralizacja legacy center + rozpychania */
text-align: left !important;
align-items: stretch !important;
justify-content: flex-start !important;
/* lekko “premium” róg po prawej */
border-radius: 0 18px 18px 0;
/* spójne odstępy (nie rozwalamy układu fix-packów) */
padding: 12px !important;
gap: 12px !important;
}
/* Subtelna linia krawędzi (czytelniejsza niż stare ::after) */
#sideMenu.side-menu::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
transform: none;
background: linear-gradient(to bottom,
transparent,
rgba(var(--sm-accent-rgb),0.18),
transparent);
opacity: 0.55;
pointer-events: none;
}
#sideMenu .side-menu__title{
font-size: 14px;
letter-spacing: 0.06em;
font-weight: 850 !important;
color: rgba(17,24,39,0.92) !important;
}
#sideMenu .side-menu__subtitle{ color: rgba(17,24,39,0.60) !important; }
/* Tytuły sekcji — nowocześnie i czytelnie */
#sideMenu .side-menu__sectionTitle{
color: var(--sm-muted);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 6px 10px;
}
/* Sekcje: usuń stare "margin-top" żeby nie dublowało gapów z flex */
#sideMenu .side-menu__section{
margin-top: 0 !important;
}
#sideMenu .side-menu__section--history{
border-top: 1px solid var(--sm-border) !important;
}
/* Grupy w menu */
#sideMenu .side-menu__group{
display: grid;
gap: 8px;
}
/* =====================================================================
Buttons (toggleButton / tools-button) — równe ikony + tekst
===================================================================== */
#sideMenu .toggleButton,
#sideMenu .tools-button{
width: 100% !important;
box-sizing: border-box;
min-height: var(--sm-item-h);
border-radius: var(--sm-item-radius);
border: 1px solid var(--sm-border);
background: var(--sm-panel);
color: var(--sm-text);
text-shadow: none !important;
/* box-shadow: 0 1px 0 rgb(26 24 24 / 6%) inset; */
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
line-height: 1.2;
text-align: left;
transition:
transform .12s ease,
box-shadow .14s ease,
background .14s ease,
border-color .14s ease,
color .14s ease,
filter .14s ease;
}
/* Nie dubluj odstępów: w group korzystamy z gap, więc margin kasujemy */
#sideMenu .side-menu__group .toggleButton{
margin: 0 !important;
}
/* Hover */
#sideMenu .toggleButton:hover,
#sideMenu .tools-button:hover{
background: rgba(255,255,255,0.58);
border-color: rgba(var(--ui-accent, 44, 100, 255), 0.22);
box-shadow:
0 14px 34px rgba(0,0,0,0.10),
0 1px 0 rgba(255,255,255,0.65) inset;
transform: translateY(-1px);
}
#sideMenu .toggleButton:active,
#sideMenu .tools-button:active{
transform: translateY(0);
filter: brightness(0.98);
}
/* Focus (klawiatura) */
#sideMenu .toggleButton:focus-visible,
#sideMenu .tools-button:focus-visible{
outline: none;
border-color: rgba(var(--ui-accent, 44,100,255), 0.40);
box-shadow:
0 0 0 4px rgba(var(--ui-accent, 44,100,255), 0.16),
0 14px 34px rgba(0,0,0,0.12);
}
/* Tekst w przyciskach trybu ma mieć stabilny ellipsis */
#sideMenu .side-menu__itemText{
flex: 1 1 auto;
min-width: 0;
font-weight: 650;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =====================================================================
Tryb (ma ikony w HTML) — chip na ikonę + równy layout
===================================================================== */
#sideMenu .side-menu__group--modes .material-symbols-rounded{
width: 30px;
height: 30px;
flex: 0 0 auto;
}
/* =====================================================================
Narzędzia (tools-button) — ikona + chevron w “slotach”
Bez zmian HTML (ikona przez ::before)
===================================================================== */
#sideMenu .tools-button{
font-weight: 750;
}
/* Ikona po lewej (ligature Material Symbols) */
#sideMenu .tools-button::before{
content: "handyman";
font-family: "Material Symbols Rounded";
font-weight: 500;
font-style: normal;
font-size: 20px;
line-height: 1;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
width: 30px;
height: 30px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sm-muted);
flex: 0 0 auto;
}
/* Chevron po prawej: stały box = “równo” */
#sideMenu .side-menu__chev{
margin-left: -5px;
width: 30px;
height: 30px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
color: var(--sm-muted);
}
/* Expanded — czytelne podświetlenie */
#sideMenu .tools-button.active{
background:
linear-gradient(180deg, rgba(var(--sm-accent-rgb),0.16), rgba(var(--sm-accent-rgb),0.08)),
var(--sm-panel);
border-color: rgba(var(--sm-accent-rgb),0.26);
}
#sideMenu .tools-button.active .side-menu__chev{
color: var(--sm-text);
border-color: rgba(var(--sm-accent-rgb),0.18);
background: rgba(var(--sm-accent-rgb),0.10);
}
/* =====================================================================
Narzędzia — elementy rozwiniętej listy (ikonka + compact)
===================================================================== */
/* =====================================================================
Selected (aktywny tryb / aktywna historia) — spójny premium marker
===================================================================== */
#sideMenu .selectedModel{
background:
linear-gradient(180deg, rgba(var(--sm-accent-rgb),0.18), rgba(var(--sm-accent-rgb),0.10)),
var(--sm-panel) !important;
border-color: rgba(var(--sm-accent-rgb),0.32) !important;
box-shadow:
0 18px 46px rgba(0,0,0,0.14),
0 0 0 1px rgba(var(--sm-accent-rgb),0.18) inset;
position: relative;
}
/* =================================================================
Historia — dopasowanie do nowych “cardów”
===================================================================== */
#sideMenu .history-btn:hover{
background: rgba(255,255,255,0.58) !important;
border-color: rgba(var(--ui-accent, 44,100,255), 0.22) !important;
}
/* Delete (X) — czytelny na jasnym i ciemnym tle */
#sideMenu .history-btn .delete-btn{
border: 1px solid rgba(15,23,42,0.12) !important;
background: rgba(15,23,42,0.06) !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.10) !important;
}
#sideMenu .history-btn .delete-btn::before,
#sideMenu .history-btn .delete-btn::after{
background: rgba(17,24,39,0.62) !important;
}
#sideMenu .history-btn .delete-btn:hover{
background: rgba(15,23,42,0.10) !important;
border-color: rgba(15,23,42,0.18) !important;
}
/* Naprawa reguły z końca pliku, która potrafi ubić scroll historii */
#sideMenu #historia.historia{
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* =====================================================================
Overlay pod menu — subtelny dim + blur (premium)
===================================================================== */
.overlay{
background: rgba(15,23,42,0.14);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
transition: opacity .18s ease;
}
.overlay.active{
opacity: 1;
}
/* Mobile: zostaw poziomy pasek — ignoruj height z JS */
@media (max-width: 768px){
#global-status-slot .status-progress-bar{
height: 100% !important;
}
}
/* =========================================================
LEFT SIDE MENU — 2026 PRO OVERRIDE (FINAL)
Wklej na SAM KONIEC styles3.css
========================================================= */
:root{
--sm-w: 288px;
--sm-bg: #1f232a;
--sm-surface: linear-gradient(135deg, rgba(31,122,224,.96), rgba(20,184,166,.88)); /* linear-gradient(135deg, rgba(31,122,224,.96), rgba(20,184,166,.88)); rgba(31,122,224,.35); rgba(255,255,255,0.06); */
--sm-surface-2: rgba(255,255,255,0.09);
--sm-border: rgba(255,255,255,0.10);
--sm-text: rgba(255,255,255,0.92);
--sm-muted: rgba(255,255,255,0.60);
--sm-accent: rgba(44, 100, 255, 0.95); /* spójne z resztą UI */
--sm-accent-soft: rgba(44, 100, 255, 0.18);
--sm-radius: 14px;
--sm-item-radius: 14px;
--sm-pad: 12px;
--sm-gap: 10px;
--sm-focus: 0 0 0 3px rgba(44, 100, 255, 0.26);
--sm-shadow: 18px 0 60px rgba(0,0,0,0.40);
--sm-scrollbar: rgba(255,255,255,0.22);
--sm-scrollbar-hover: rgba(255,255,255,0.32);
}
/* 0) Stabilizacja */
html, body { overflow-x: hidden; }
.side-menu.active{
transform: translateX(0);
}
/* 2) Header: czysty, “product-like”, sticky */
.side-menu__header{
position: sticky;
top: 0;
z-index: 5;
/* background: linear-gradient(180deg, rgba(31,35,42,0.98), rgba(31,35,42,0.92));
backdrop-filter: blur(10px); */
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--sm-radius);
padding: 12px 12px 10px;
margin: 0 0 2px 0;
}
.side-menu__title{
font-size: 13px;
font-weight: 850;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sm-text);
}
.side-menu__subtitle{
margin-top: -5px;
font-size: 12px;
color: var(--sm-muted);
}
/* 3) Sekcje + nagłówki */
.side-menu__section{
width: 100%;
margin: 0;
}
.side-menu__sectionTitle{
padding: 6px 10px;
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
/* 4) Reset globalnego buttona TYLKO w menu (żeby nie walczył z globalnym) */
.side-menu button{
appearance: none;
-webkit-appearance: none;
border: 0 !important;
text-shadow: none !important;
font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
width: 100% !important;
margin: 0 0 8px 0 !important;
padding: 0 !important; /* padding dostają konkretne klasy */
background: transparent !important;
color: inherit !important;
}
/* 5) Grupowanie elementów */
.side-menu__group{
display: grid;
gap: 8px;
padding: 0 2px;
}
/* 6) “Mode” buttons (Podatkowy / Ogólny) – z ikoną i czytelną typografią */
.side-menu__group--modes .toggleButton{
display: grid;
grid-template-columns: 24px 1fr;
align-items: center;
gap: 10px;
padding: 10px 12px !important;
border-radius: var(--sm-item-radius);
border: 1px solid var(--sm-border);
background: var(--sm-surface) !important;
border-color: rgba(31,122,224,.35);
background: linear-gradient(135deg, rgba(31,122,224,.96), rgba(20,184,166,.88));
color: #fff;
color: var(--sm-text) !important;
font-size: 13px;
font-weight: 700;
line-height: 1.1;
transition: transform .12s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.side-menu__group--modes .toggleButton:hover{
background: var(--sm-surface-2) !important;
transform: translateY(-1px);
}
.side-menu__group--modes .toggleButton:active{
transform: translateY(0);
}
.side-menu__group--modes .toggleButton:focus-visible{
outline: none;
box-shadow: var(--sm-focus);
}
.side-menu__itemText{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 7) Tools accordion button (Narzędzia podatkowe) */
.side-menu .tools-button{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px !important;
border-radius: var(--sm-item-radius);
border: 1px solid var(--sm-border);
background: rgba(255,255,255,0.05) !important;
color: var(--sm-text) !important;
font-size: 13px;
font-weight: 800;
transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.side-menu .tools-button:hover{
background: rgba(255,255,255,0.08) !important;
}
.side-menu .tools-button:focus-visible{
outline: none;
box-shadow: var(--sm-focus);
}
.side-menu .tools-button .side-menu__chev{
margin-left: auto;
color: rgba(255,255,255,0.62);
transition: transform .16s ease, color .16s ease;
}
.side-menu .tools-button.active .side-menu__chev{
transform: rotate(180deg);
color: rgba(255,255,255,0.90);
}
/* 8) Rozwijane sekcje – bez ucinania, max-height zamiast height */
#additionalButtons,
#additionalButtons1{
overflow: hidden !important;
max-height: 0 !important;
height: auto !important;
transition: max-height .22s ease !important;
}
#additionalButtons.active{
max-height: 56vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 8px !important;
padding-top: 5px !important;
scrollbar-gutter: stable;
}
#additionalButtons1.active{
max-height: 220px !important;
overflow: visible !important;
}
/* 9) Tool items w rozwijanej liście */
#additionalButtons .toggleButton{
padding: 10px 12px !important;
border-radius: var(--sm-item-radius);
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04) !important;
color: var(--sm-text) !important;
font-size: 13px;
font-weight: 650;
transition: background .14s ease, transform .12s ease, border-color .14s ease;
}
#additionalButtons .toggleButton:hover{
background: rgba(255,255,255,0.07) !important;
transform: translateY(-1px);
}
#additionalButtons .toggleButton:active{
transform: translateY(0);
}
/* 10) Selected state – premium “marker” + lepszy kontrast */
.side-menu .selectedModel{
background: rgba(255,255,255,0.08) !important;
border-color: rgba(44,100,255,0.35) !important;
box-shadow: 0 0 0 1px rgba(44,100,255,0.14) inset;
position: relative;
}
.side-menu .selectedModel .material-symbols-rounded{
color: rgba(255,255,255,0.95);
}
/* 11) Historia – prawdziwy scroll, bez “overflow: visible”, z eleganckim X */
.side-menu__section--history{
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 10px;
margin-top: 6px;
}
#historia.historia{
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 8px !important;
scrollbar-gutter: stable;
}
.history-btn{
position: relative !important;
display: block !important;
padding: 10px 44px 10px 12px !important; /* stałe miejsce na X */
border-radius: var(--sm-item-radius) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
background: rgba(255,255,255,0.04) !important;
color: var(--sm-text) !important;
font-size: 13px !important;
font-weight: 650 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transition: background .14s ease, transform .12s ease, border-color .14s ease, box-shadow .14s ease;
}
.history-btn:hover{
background: rgba(255,255,255,0.07) !important;
transform: translateY(-1px);
}
.history-btn:active{
transform: translateY(0);
}
.history-btn:focus-visible{
outline: none;
box-shadow: var(--sm-focus);
}
.cloudHistory{
display: block !important;
max-width: 100% !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
/* mały “X” (delete-btn) – niech nie dziedziczy globalnego buttona */
.history-btn .delete-btn{
display: none !important;
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 22px !important;
height: 22px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 8px !important;
border: 1px solid rgba(255,255,255,0.16) !important;
background: rgba(255,255,255,0.08) !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}
.history-btn:hover .delete-btn,
.history-btn:focus-within .delete-btn{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.history-btn .delete-btn::before,
.history-btn .delete-btn::after{
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 12px !important;
height: 2px !important;
background: rgba(255,255,255,0.78) !important;
border-radius: 999px !important;
}
.history-btn .delete-btn::before{ transform: translate(-50%, -50%) rotate(45deg) !important; }
.history-btn .delete-btn::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }
.history-btn .delete-btn:hover{
background: rgba(255,255,255,0.14) !important;
border-color: rgba(255,255,255,0.24) !important;
}
/* 12) Scrollbar (tylko w menu) */
.side-menu *::-webkit-scrollbar{ width: 6px; }
.side-menu *::-webkit-scrollbar-track{
background: rgba(255,255,255,0.08);
border-radius: 999px;
}
.side-menu *::-webkit-scrollbar-thumb{
background: var(--sm-scrollbar);
border-radius: 999px;
}
.side-menu *::-webkit-scrollbar-thumb:hover{
background: var(--sm-scrollbar-hover);
}
/* 13) Mobile: szerzej i bez konfliktów z bottom-box */
@media (max-width: 768px){
:root{ --sm-w: min(320px, 86vw); }
.side-menu{
width: var(--sm-w) !important;
transform: translateX(calc(-1 * var(--sm-w)));
}
/* chowaj input gdy menu otwarte – u Ciebie już było, zostawiamy, ale doprecyzowane */
#sideMenu.active ~ .MainYTAmenu #bottom-box{ display: none !important; }
#sideMenu.active ~ .MainYTAmenu #scrollDownButton{ display: none !important; }
}
/* 14) Dostępność: ogranicz animacje */
@media (prefers-reduced-motion: reduce){
.side-menu{ transition: none !important; }
.side-menu *{ transition: none !important; }
}
/* =========================================================
SIDE MENU — POLISH PATCH (2026-02)
Fix:
1) hamburger nachodzi na header (YTACORE / Panel AI)
2) historia ("Ostatnie wątki") nieczytelna
3) selected w "Narzędzia podatkowe" wygląda brzydko
========================================================= */
:root{
/* Light palette dopasowana do aktualnej szaty (jasne tła + delikatne akcenty) */
--lm-bg: #fbf6eb; /* ciepły off-white jak na screenach */
--lm-surface: linear-gradient(135deg, rgba(31,122,224,.96), rgba(20,184,166,.88));
--lm-surface-2: linear-gradient(135deg, rgba(31,122,224,1), rgba(20,184,166,.94));
/* --lm-border: rgba(17,24,39,0.10); */
--lm-text: #fff;
--lm-muted: rgba(17,24,39,0.60);
/* akcent aplikacji (u Ciebie jest mocno obecny) */
--lm-accent: #2c64ff;
--lm-accent-soft: rgba(44,100,255,0.14);
--lm-radius: 16px;
--lm-item-radius: 24px;
--lm-focus: 0 0 0 3px rgba(44,100,255,0.22);
/* miejsce na hamburger */
--lm-hamburger-safe: 54px;
}
/* =========================
A) MENU jako light card
========================= */
/* reset konfliktów globalnych buttonów tylko w menu */
#sideMenu.side-menu button{
text-shadow: none !important;
}
/* =========================
1) FIX: hamburger nie nachodzi na header
========================= */
/* Header w menu (YTACORE / Panel AI) :contentReference[oaicite:2]{index=2} */
#sideMenu .side-menu__header{
text-align: center;
background: transparent !important;
}
/* Na mobile hamburger bywa bliżej/większy – zwiększamy safe padding */
@media (max-width: 768px){
:root{ --lm-hamburger-safe: 62px; }
#sideMenu .side-menu__header{ padding-left: var(--lm-hamburger-safe) !important; }
}
/* =========================
B) Przyciskowe sekcje (Tryb / Narzędzia)
========================= */
/* =========================
2) FIX: "Ostatnie wątki" — czytelne kafelki historii
========================= */
/* Lista historii (ul#historia) :contentReference[oaicite:3]{index=3} */
#sideMenu #historia.historia{
/* zostawiamy scroll, ale stylujemy treść */
padding-right: 10px !important;
padding-top: 5px !important;
}
#sideMenu .history-btn:hover{
background: var(--lm-surface-2) !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.10) !important;
}
/* Tekst wątku (cloudHistory) – wymuszamy dziedziczenie koloru, bo tu najczęściej „znika” */
#sideMenu .cloudHistory{
color: inherit !important;
opacity: 1 !important;
}
/* Focus a11y */
#sideMenu .history-btn:focus-visible{
outline: none !important;
box-shadow: var(--lm-focus) !important;
}
/* Wewnątrz rozwijanych narzędzi: dodatkowo podbijamy czytelność (to jest Twoje #additionalButtons) :contentReference[oaicite:4]{index=4} */
/* Selected w narzędziach: bardziej „premium” i spokojniej niż obecnie */
#sideMenu #additionalButtons .toggleButton.selectedModel{
background: rgba(44,100,255,0.12) !important;
border-color: rgba(44,100,255,0.32) !important;
}
/* Focus w narzędziach */
#sideMenu #additionalButtons .toggleButton:focus-visible{
outline: none !important;
box-shadow: var(--lm-focus) !important;
}
/* =========================
D) Małe dopieszczenia ikon
========================= */
#sideMenu .toggleButton.selectedModel .material-symbols-rounded{
color: rgba(17,24,39,0.88);
}
/* =========================================================
SIDE MENU — FIX PACK v2 (FINAL OVERRIDE)
1) usuwa pionowy pasek z selected (w narzędziach)
2) ellipsis + nowoczesny tooltip dla długich nazw
3) przywraca działanie show/hide menu (unifikacja na LEFT, bez transform)
========================================================= */
/* -----------------------------------------
(3) MENU TOGGLE FIX: używamy tylko LEFT
----------------------------------------- */
#sideMenu.side-menu{
/* JS (bindSideMenu) pracuje na klasie .active (bez modyfikacji left w JS),
więc musimy mieć spójny mechanizm: left + transition */
width: 260px !important;
left: -260px !important;
top: 0 !important;
height: 100dvh !important;
/* KLUCZ: wyłącz wszystkie transformy z wcześniejszych override’ów */
transform: none !important;
/* przywróć animację left (spójne z Twoim pierwotnym CSS) */
transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
/* żeby klik w menu nie był blokowany przez inne warstwy */
z-index: 1200 !important;
}
#sideMenu.side-menu.active{
left: 0 !important;
transform: none !important;
}
/* -----------------------------------------
(1) SELECTED: usuń pionowy pasek w TOOLS
----------------------------------------- */
/* To jest ten “brzydki” pionowy pasek po lewej w selected */
#sideMenu #additionalButtons .toggleButton.selectedModel::before{
content: none !important;
}
/* Zamiast paska: elegancki ring + lekkie podbicie tła */
#sideMenu #additionalButtons .toggleButton.selectedModel{
background: rgba(44,100,255,0.10) !important;
border-color: rgba(44,100,255,0.32) !important;
box-shadow: 0 0 0 1px rgba(44,100,255,0.10) inset,
0 10px 24px rgba(0,0,0,0.08) !important;
background: var(--lm-surface) !important;
}
/* -----------------------------------------
(2) NARZĘDZIA: ellipsis + tooltip-text PRO
Wymaga małej zmiany HTML (punkt 2 poniżej)
----------------------------------------- */
/* Układ przycisku narzędzia: ikonka + tekst, tekst się ucina */
#sideMenu #additionalButtons .toggleButton{
gap: 10px !important;
}
/* Ikona “chevron” w narzędziach */
#sideMenu #additionalButtons .toggleButton .side-menu__toolIcon{
width: 24px;
height: 24px;
min-width: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid rgba(17,24,39,0.10);
background: rgba(255,255,255,0.70);
color: rgba(17,24,39,0.65);
}
/* Tekst narzędzia: KLUCZ (ellipsis) */
#sideMenu #additionalButtons .toggleButton .side-menu__itemText{
min-width: 0; /* wymagane dla ellipsis w flex */
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 650;
color: rgba(17,24,39,0.92);
}
/* Tooltip (nowoczesny, spójny) — tylko w side-menu */
#sideMenu .menu-tooltip{
position: relative;
}
#sideMenu .menu-tooltip .tooltip-text{
/* nadpisujemy Twoje globalne tooltipy, ale TYLKO w menu */
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
left: 14px; /* “od krawędzi” przycisku */
top: calc(100% + 8px); /* pod przyciskiem */
transform: translateY(4px);
z-index: 1400;
max-width: 240px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(17, 24, 39, 0.92);
color: rgba(255,255,255,0.92);
font-size: 12.5px;
line-height: 1.25;
letter-spacing: 0.01em;
box-shadow: 0 18px 46px rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.10);
transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
/* strzałka dymka */
#sideMenu .menu-tooltip .tooltip-text::before{
content: "";
position: absolute;
top: -6px;
left: 18px;
width: 12px;
height: 12px;
transform: rotate(45deg);
background: rgba(17, 24, 39, 0.92);
border-left: 1px solid rgba(255,255,255,0.10);
border-top: 1px solid rgba(255,255,255,0.10);
}
/* pokazuj tooltip tylko gdy tekst jest faktycznie ucięty:
CSS nie umie tego wykryć w 100%, więc pokazujemy na hover,
ale niech będzie subtelny i nie przeszkadza */
#sideMenu .menu-tooltip:hover .tooltip-text,
#sideMenu .menu-tooltip:focus-visible .tooltip-text{
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
/* focus ring dla a11y */
#sideMenu .menu-tooltip:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(44,100,255,0.22);
}
/* Mobile: tooltip niech nie wychodzi poza ekran */
@media (max-width: 768px){
#sideMenu .menu-tooltip .tooltip-text{
max-width: min(260px, calc(100vw - 40px));
}
}
/* =========================================================
FIX: Box-container "rozjechany" przy otwartym side-menu
Cel: gdy #sideMenu.active na desktop, przesuń centrum treści w prawo,
żeby menu NIE przykrywało powitania / czatu.
========================================================= */
:root{
--sidebar-w: 260px; /* szerokość menu (spójne z .side-menu width) */
--sidebar-shift: calc(var(--sidebar-w) / 2);
}
/* TYLKO desktop/tablet (na mobile menu i tak przykrywa treść celowo) */
@media (min-width: 900px){
/* Czat (box-container) – kluczowe
#sideMenu.active ~ .MainYTAmenu .box-container,
#sideMenu.active ~ .MainYTAmenu #boxContainer{
left: calc(50% + var(--sidebar-shift)) !important;
transform: translateX(-50%) !important; /* zachowaj centrowanie */
}
*/
/* Dolny input (bottom-box) – żeby też nie wchodził pod menu
#sideMenu.active ~ .MainYTAmenu #bottom-box.bottom-box{
left: calc(50% + var(--sidebar-shift)) !important;
transform: translateX(-50%) !important;
}
*/
/* Przycisk scrollowania na dół – spójnie z inputem */
#sideMenu.active ~ .MainYTAmenu .bottom-container{
left: calc(50% + var(--sidebar-shift)) !important;
transform: translateX(-50%) !important;
}
/* (opcjonalnie) Pasek statusu – jeżeli chcesz, by był idealnie w osi treści */
#sideMenu.active ~ .MainYTAmenu #global-status-slot .status-area{
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Bezpiecznik: gdy menu zamknięte, wróć do standardu (gdyby coś nadpisało) */
@media (min-width: 900px){
#sideMenu:not(.active) ~ .MainYTAmenu .box-container,
#sideMenu:not(.active) ~ .MainYTAmenu #boxContainer{
left: 50% !important;
transform: translateX(-50%) !important;
}
#sideMenu:not(.active) ~ .MainYTAmenu #bottom-box.bottom-box{
left: 50% !important;
transform: translateX(-50%) !important;
}
#sideMenu:not(.active) ~ .MainYTAmenu .bottom-container{
left: 50% !important;
transform: translateX(-50%) !important;
}
}
/* =========================================================
GLOBAL STATUS SLOT — Vertical progress rail (modern)
- Desktop: slim rail aligned to .box-container (right side)
- Tekst/status PO PRAWEJ stronie paska (nie chowa się pod box-container)
- Mobile: zostaje klasyczny (poziomy) pasek u góry
========================================================= */
/* Spójna paleta dla statusu (ciepły akcent jak w UI) */
#global-status-slot{
--status-accent-1: 255, 193, 7; /* amber */
--status-accent-2: 255, 152, 0; /* orange */
--status-track: rgba(15, 23, 42, 0.08);
--status-track-border: rgba(15, 23, 42, 0.12);
}
/* Nowy wrapper z meta (JS renderuje .status-meta) */
#global-status-slot .status-area{
display: flex;
flex-direction: column;
gap: 10px;
}
#global-status-slot .status-meta{
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
/* Gdy label pusty – nie zabieraj miejsca i nie zostawiaj "gap" */
#global-status-slot .status-label-text:empty{
display: none;
}
/* Dot + progres w ciepłej palecie (żeby pasowało do beżowo-złotej szaty) */
#global-status-slot .status-dot{
background: rgba(var(--status-accent-1), 0.92);
box-shadow: 0 0 0 3px rgba(var(--status-accent-1), 0.18);
}
/* Track/fill (mobile + fallback) */
#global-status-slot .status-progress{
background: var(--status-track);
border: 1px solid var(--status-track-border);
border-radius: 999px;
overflow: hidden;
}
#global-status-slot .status-progress-bar{
background: linear-gradient(
to right,
rgba(var(--status-accent-2), 0.95),
rgba(var(--status-accent-1), 0.92)
);
border-radius: 999px;
transition: width 220ms cubic-bezier(.2,.8,.2,1);
}
/* Mobile: ignoruj inline height (JS ustawia height dla desktop rail) */
@media (max-width: 768px){
#global-status-slot .status-progress-bar{
height: 100% !important;
}
}
/* =========================================================
GLOBAL STATUS SLOT — Right-edge Progress + Timeline Tree
- rail: fixed to the far right of viewport
- stages: vertical "tree/timeline" connected to the rail
========================================================= */
#global-status-slot{
--yta-amber-1: 255, 205, 135;
--yta-amber-2: 244, 182, 86;
--yta-amber-3: 208, 140, 56;
--rail-w: 10px; /* sam pasek */
--rail-hit: 30px; /* strefa klikalna / hover */
--tree-w: 240px; /* szerokość "drzewka" (karty etapów) */
--tree-gap: 14px; /* odległość między drzewkiem i railem */
--node-dot: 10px; /* kropka węzła */
--track-bg: rgba(0,0,0,0.08);
--track-border: rgba(0,0,0,0.10);
}
/* Mobile: zostaw poziomy pasek (jak dotąd) */
@media (max-width: 768px){
#global-status-slot .status-rail{
display: none;
}
}
@media (min-width: 769px){
/* Panel z tekstem/stage — po LEWEJ stronie rail */
#global-status-slot .status-meta{
position: absolute;
top: 50%;
/* było: left: calc(100% + var(--status-meta-gap)); */
right: calc(100% + var(--status-meta-gap));
left: auto;
transform: translateY(-50%) translateX(0);
width: min(var(--status-meta-w), calc(100vw - 24px));
max-height: min(480px, 72vh);
overflow: hidden;
padding: 12px 12px;
border-radius: 16px;
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
box-shadow: var(--ui-glass-shadow);
backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
opacity: 0.95;
transition: opacity 140ms ease, transform 140ms ease;
pointer-events: auto;
}
/* Idle – schowaj panel (ale pokaż na hover/focus) */
#global-status-slot .status-area.is-idle .status-meta{
opacity: 0;
pointer-events: none;
transform: translateY(-50%) translateX(6px); /* było -6px; teraz "odjeżdża" w lewo */
}
#global-status-slot:hover .status-area.is-idle .status-meta,
#global-status-slot .status-area.is-idle:focus-within .status-meta{
opacity: 0.92;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
/* (opcjonalnie) Jeśli masz % badge na pasku i chcesz go też po LEWEJ: */
#global-status-slot .status-progress-bar::before{
left: auto;
right: calc(100% + 10px);
}
}
/* =====================================================================
THEME OVERRIDE — Home parity (tech/modern/clean)
Wklej na sam koniec styles3.css
Źródło stylistyki: home.css / home.html (tokens + gradient + glass UI)
===================================================================== */
/* 1) DESIGN TOKENS (zgodne z home.css) */
:root{
/* bazowe powierzchnie */
--yta-bg: #f6f7fb;
--yta-surface: #ffffff;
--yta-surface-2: #fbfcff;
/* tekst */
--yta-text: #0f141c;
--yta-muted: #5c6676;
/* obramowania/cienie */
--yta-border: rgba(15,20,28,.10);
--yta-border-strong: rgba(15,20,28,.16);
--yta-shadow-sm: 0 10px 28px rgba(15,20,28,.10);
--yta-shadow: 0 18px 55px rgba(15,20,28,.12);
/* radius */
--yta-radius: 18px;
--yta-radius-sm: 14px;
/* akcent (jak w home.css – domyślnie “tech blue → teal”) */
--yta-accent-a: #1f7ae0;
--yta-accent-b: #14b8a6;
--yta-accent-gradient: linear-gradient(135deg, var(--yta-accent-a), var(--yta-accent-b));
/* focus ring */
--yta-focus: rgba(31, 122, 224, .28);
--yta-focus-strong: rgba(31, 122, 224, .40);
/* pochodne (z fallbackami niżej tam, gdzie używane) */
--yta-a-10: color-mix(in srgb, var(--yta-accent-a) 10%, transparent);
--yta-a-14: color-mix(in srgb, var(--yta-accent-a) 14%, transparent);
--yta-a-18: color-mix(in srgb, var(--yta-accent-a) 18%, transparent);
--yta-b-06: color-mix(in srgb, var(--yta-accent-b) 6%, transparent);
--yta-b-10: color-mix(in srgb, var(--yta-accent-b) 10%, transparent);
--yta-b-22: color-mix(in srgb, var(--yta-accent-b) 22%, transparent);
--yta-b-28: color-mix(in srgb, var(--yta-accent-b) 28%, transparent);
}
/* 2) GLOBAL BACKGROUND + TYPO */
body{
background:
radial-gradient(1200px 520px at 22% 8%, rgba(31,122,224,.10), transparent 60%),
radial-gradient(900px 460px at 78% 18%, rgba(20,184,166,.08), transparent 60%),
var(--yta-bg);
color: var(--yta-text);
}
/* poprawa czytelności w content (chat/tool output) */
.response-box,
.output-func{
color: var(--yta-text);
}
.tool-header .p-func,
.tool-section-desc,
.field-help,
.status-label{
color: var(--yta-muted) !important;
}
/* ikonki po prawej – neutral + hover “tech” */
.top-bar .menu-container button,
.plusForpayment{
color: rgba(15,20,28,.55) !important;
}
.top-bar .menu-container button:hover,
.plusForpayment:hover{
color: rgba(15,20,28,.90) !important;
background: rgba(15,23,42,.06) !important;
}
/* hamburger – lekko mocniejszy */
.menu-button1 .line1,
.menu-button1 .line2,
.menu-button1 .line3{
background-color: rgba(15,20,28,.85) !important;
}
.menu-button1:hover .line1,
.menu-button1:hover .line2,
.menu-button1:hover .line3{
background-color: rgba(15,20,28,1) !important;
}
/* 4) INPUTS (focus + border w stylu home) */
.tbl-func{
border: 1px solid var(--yta-border-strong) !important;
background: rgba(255,255,255,.92) !important;
color: var(--yta-text) !important;
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.tbl-func:focus{
border-color: rgba(31,122,224,.55) !important;
box-shadow: 0 0 0 3px var(--yta-focus), 0 1px 0 rgba(255,255,255,.7) inset !important;
outline: none !important;
}
/* wymagane gwiazdki – spójne i czytelne */
.req-star{
color: rgba(220, 38, 38, .92) !important;
}
/* 5) TOOL HEADER / SEKCJE — nowoczesny “soft tech gradient” */
.tool-header{
border-radius: var(--yta-radius) !important;
border: 1px solid var(--yta-border) !important;
/* fallback + nowa wersja */
background: linear-gradient(135deg, rgba(31,122,224,.08), rgba(20,184,166,.06)) !important;
background: linear-gradient(135deg, var(--yta-a-10, rgba(31,122,224,.10)), var(--yta-b-06, rgba(20,184,166,.06))) !important;
box-shadow: var(--yta-shadow) !important;
}
.tool-header::before{
background: rgba(255,255,255,.55) !important;
border: 1px solid var(--yta-border) !important;
color: rgba(15,20,28,.85) !important;
}
/* sekcje formularza = “cards” jak na home */
.tool-section{
border-radius: var(--yta-radius) !important;
background: rgba(255,255,255,.88) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--yta-border) !important;
box-shadow: var(--yta-shadow-sm) !important;
}
.tool-section-title{
color: rgba(15,20,28,.88) !important;
}
/* 6) PRIMARY BUTTONS (analyze + send) — gradient CTA */
.button-func,
#analyzeButton.analyzeButton.button-func{
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.16) !important;
/* gradient CTA */
background: var(--yta-accent-gradient) !important;
color: rgba(255,255,255,.96) !important;
box-shadow: 0 14px 34px rgba(31,122,224,.18), 0 0 0 1px rgba(255,255,255,.14) inset !important;
transition: transform .14s ease, box-shadow .16s ease, filter .16s ease !important;
}
.button-func:hover,
#analyzeButton.analyzeButton.button-func:hover{
transform: translateY(-1px);
box-shadow: 0 18px 44px rgba(31,122,224,.22), 0 0 0 1px rgba(255,255,255,.16) inset !important;
filter: saturate(1.03);
}
.button-func:active,
#analyzeButton.analyzeButton.button-func:active{
transform: translateY(0);
filter: brightness(.98);
}
.button-func:focus-visible,
#analyzeButton.analyzeButton.button-func:focus-visible{
outline: none !important;
box-shadow: 0 18px 44px rgba(31,122,224,.22), 0 0 0 3px var(--yta-focus-strong) !important;
}
/* bottom composer */
.bottom-box{
border-radius: 16px !important;
border: 1px solid var(--yta-border) !important;
background: rgba(255,255,255,.85) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--yta-shadow-sm) !important;
}
.bottom-box .question-box{
color: var(--yta-text) !important;
}
.bottom-box .question-box::placeholder{
color: rgba(15,20,28,.48) !important;
}
/* send-it = “mini CTA” */
.bottom-box .send-it{
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 42%),
var(--yta-accent-gradient) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
box-shadow: 0 14px 34px var(--yta-accent-b-22) !important;
}
.bottom-box .send-it:hover{
transform: translateY(-1px);
box-shadow: 0 18px 44px rgba(31,122,224,.22) !important;
}
.bottom-box .send-it:focus-visible{
box-shadow: 0 18px 44px rgba(31,122,224,.22), 0 0 0 3px var(--yta-focus-strong) !important;
}
/* 7) STATUS AREA — progress w kolorach akcentu */
.status-progress{
background: rgba(15,20,28,.10) !important;
}
.status-progress-bar{
background: var(--yta-accent-gradient) !important;
}
.status-step.active{
color: rgba(15,20,28,.92) !important;
}
/* 8) LINKI — czytelne, tech */
a:hover,
a:focus{
color: rgba(31,122,224,.95) !important;
}
/* 9) SUBTLE UI: separators + linebtw */
.linebtw{
background-color: rgba(15,20,28,.10) !important;
}
/* 10) ScrollDownButton — spójny glass + ring */
#scrollDownButton{
background: rgba(255,255,255,.90) !important;
border: 1px solid var(--yta-border) !important;
color: rgba(15,20,28,.82) !important;
}
#scrollDownButton:hover{
background: rgba(255,255,255,.96) !important;
}
#scrollDownButton:focus-visible{
box-shadow: 0 18px 55px rgba(0,0,0,0.12), 0 0 0 3px var(--yta-focus-strong) !important;
}
/* 11) “Gradienty” w pricing (jeśli gdzieś są widoczne w tym UI) */
.free-pill,
.new-price{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
/* =====================================================================
MAIN.CSS THEME OVERRIDE (UI parity)
Cel:
1) userbutton widoczny + zgodny z main.css
2) top-bar zgodny z main.css
3) side-menu + wszystkie elementy zgodne z main.css
4) główne tło (gradient) zgodne z main.css
5) plusForpayment zgodny z main.css
6) MainYTAmenu zgodny z main.css
7) profile-data (userData) zgodny z main.css
===================================================================== */
:root{
/* main.css vibe: tech blue + teal + glass surfaces */
--mc-accent-a: #1f7ae0; /* blue */
--mc-accent-b: #14b8a6; /* teal */
--mc-accent-grad: linear-gradient(135deg, var(--mc-accent-a), var(--mc-accent-b));
--mc-text-strong: rgba(17,24,39,0.92);
--mc-text: rgba(17,24,39,0.86);
--mc-muted: rgba(17,24,39,0.60);
--mc-border: rgba(17,24,39,0.10);
--mc-border-2: rgba(17,24,39,0.14);
--mc-surface: rgba(255,255,255,0.86);
--mc-surface-2: rgba(255,255,255,0.92);
--mc-shadow-sm: 0 10px 28px rgba(15,23,42,0.10);
--mc-shadow: 0 18px 44px rgba(17,24,39,0.18);
--mc-radius: 18px;
--mc-radius-sm: 14px;
--mc-focus: 0 0 0 3px rgba(31,122,224,0.22);
--mc-focus-strong: 0 0 0 4px rgba(31,122,224,0.26);
/* icon chips (userbutton / plusForpayment) */
--mc-icon-size: 40px;
--mc-icon-radius: 16px;
--mc-icon-bg: rgba(255,255,255,0.74);
--mc-icon-bg-hover: rgba(255,255,255,0.92);
}
/* =========================================================
4) GŁÓWNE TŁO (gradient) — main.css vibe
========================================================= */
html{
min-height: 100%;
background:
radial-gradient(900px 560px at 14% 10%, rgba(31,122,224,0.16), transparent 60%),
radial-gradient(820px 520px at 86% 14%, rgba(20,184,166,0.12), transparent 60%),
radial-gradient(900px 620px at 50% 92%, rgba(31,122,224,0.10), transparent 65%),
#f7f8fc;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
body{
background: transparent !important;
background-color: transparent !important;
color: var(--mc-text);
}
/* =========================================================
1) USERBUTTON — widoczny + main.css UI chip
(naprawa błędnego border z wcześniejszego override)
========================================================= */
#userbutton{
width: var(--mc-icon-size) !important;
height: var(--mc-icon-size) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
background: var(--mc-icon-bg) !important;
border: 1px solid var(--mc-border) !important; /* <- KLUCZ: zawsze ustawiony */
border-radius: var(--mc-icon-radius) !important;
color: rgba(17,24,39,0.78) !important;
text-shadow: none !important;
box-shadow: var(--mc-shadow-sm) !important;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
cursor: pointer;
transition: transform .12s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
#userbutton:hover{
background: var(--mc-icon-bg-hover) !important;
border-color: rgba(31,122,224,0.22) !important;
color: rgba(17,24,39,0.92) !important;
transform: translateY(-1px);
box-shadow: var(--mc-shadow) !important;
}
#userbutton:active{
transform: translateY(0);
filter: brightness(0.99);
}
#userbutton:focus-visible{
outline: none !important;
box-shadow: var(--mc-shadow), var(--mc-focus-strong) !important;
}
/* ikonka w środku */
#userbutton .material-symbols-rounded{
font-size: 22px;
line-height: 1;
}
/* =========================================================
5) plusForpayment — jak userbutton (chip)
========================================================= */
.plusForpayment{
width: var(--mc-icon-size) !important;
height: var(--mc-icon-size) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--mc-icon-bg) !important;
border: 1px solid var(--mc-border) !important;
border-radius: var(--mc-icon-radius) !important;
color: rgba(17,24,39,0.78) !important;
box-shadow: var(--mc-shadow-sm) !important;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
/* nie zmieniaj rozmiaru na hover (u Ciebie było) */
padding: 0 !important;
margin: 0 !important;
transition: transform .12s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
.plusForpayment:hover{
background: var(--mc-icon-bg-hover) !important;
border-color: rgba(31,122,224,0.22) !important;
color: rgba(17,24,39,0.92) !important;
transform: translateY(-1px);
box-shadow: var(--mc-shadow) !important;
/* pewność: bez “skakania” */
width: var(--mc-icon-size) !important;
height: var(--mc-icon-size) !important;
}
.plusForpayment:active{
transform: translateY(0);
}
/* =========================================================
7) profile-data (userData) — jak profileBlock z main.css
========================================================= */
#profile-data.userData{
border: 1px solid rgba(31,122,224,0.16) !important;
/* background:
radial-gradient(900px 220px at 14% 0%, rgba(31,122,224,0.10), transparent 55%),
radial-gradient(900px 220px at 90% 0%, rgba(20,184,166,0.10), transparent 55%),
rgba(255,255,255,0.86) !important; */
background: var(--yta-accent-gradient) !important;
border-radius: 24px !important;
/* box-shadow: var(--mc-shadow-sm) !important; */
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
color: var(--mc-text) !important;
}
/* chipy w profilu (limity) */
#profile-data.userData .limit-chip{
background: rgba(255,255,255,0.78) !important;
border: 1px solid rgba(17,24,39,0.10) !important;
color: rgba(17,24,39,0.84) !important;
}
#profile-data.userData .limit-chip__label{ color: rgba(17,24,39,0.62) !important; }
#profile-data.userData .limit-chip__value{ color: rgba(17,24,39,0.92) !important; }
#profile-data.userData .limits-ui__expiry{ color: var(--lm-text) !important; }
/* =========================================================
6) MainYTAmenu — nie zasłania gradientu + spójne tło
========================================================= */
#MainYTAmenu,
.MainYTAmenu,
.chatMenu,
#panelContent{
background: transparent !important;
color: var(--mc-text) !important;
}
/* =========================================================
3) SIDE-MENU — glass light / main.css style + wszystkie elementy
(Uwaga: masz w pliku wiele “final override”; tu robimy najwyższą specyfikę)
========================================================= */
#sideMenu.side-menu{
/* zachowaj logikę otwierania (left) z Twoich fixów */
width: 260px !important;
left: -260px !important;
top: 0 !important;
height: 100dvh !important;
transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
transform: none !important;
/* background: rgba(255,255,255,0.72) !important; */
border-right: 1px solid var(--mc-border) !important;
box-shadow: 18px 0 60px rgba(0,0,0,0.18) !important;
-webkit-backdrop-filter: blur(18px) saturate(150%);
color: var(--mc-text) !important;
text-align: left !important;
padding: 12px !important;
display: flex !important;
flex-direction: column !important;
gap: var(--sm-gap) !important;
transform: translateX(calc(-1 * var(--sm-w)));
isolation: isolate;
z-index: 1200;
}
#sideMenu.side-menu.active{ left: 0 !important; }
/* === SIDE MENU – FINAL TOGGLE FIX === */
#sideMenu.side-menu{
position: fixed;
top: 0;
left: -260px; /* SCHOWANE */
width: 260px;
height: 100dvh;
transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
transform: none !important; /* ważne: zero transform */
z-index: 1200;
}
#sideMenu.side-menu.active{
left: 0; /* WYSUNIĘTE */
}
/* overlay pod menu */
.overlay{
display: none;
position: fixed;
inset: 0;
background: rgba(15,23,42,0.18);
backdrop-filter: blur(2px);
z-index: 1100;
}
.overlay.active{
display: block;
}
/* Reset global buttonów tylko w side-menu (żeby nie było “white squares”) */
#sideMenu button{
background: transparent !important;
border: 0 !important;
text-shadow: none !important;
color: inherit !important;
}
/* Nagłówki sekcji */
#sideMenu .side-menu__sectionTitle{
letter-spacing: 0.10em;
text-transform: uppercase;
}
/* Tryby (toggleButton) + Tools accordion (tools-button) */
#sideMenu .toggleButton,
#sideMenu .tools-button,
#sideMenu .history-btn,
#sideMenu #additionalButtons .toggleButton{
/* background: var(--lm-surface) !important; */
background: var(--yta-accent-gradient) !important;
border: 1px solid var(--lm-border) !important;
border-radius: var(--lm-item-radius) !important;
color: var(--lm-text) !important;
border-color: rgba(31,122,224,.35);
box-shadow: 0 14px 34px var(--yta-accent-b-22);
}
#sideMenu .toggleButton:hover,
#sideMenu .tools-button:hover,
#sideMenu .history-btn:hover{
box-shadow: 0 18px 44px rgba(255,122,0,.28); /* fallback */
box-shadow: 0 18px 44px var(--yta-accent-b-28);
transform: translateY(-2px);
}
#sideMenu .toggleButton:focus-visible,
#sideMenu .tools-button:focus-visible,
#sideMenu .history-btn:focus-visible{
outline: none !important;
box-shadow: 0 18px 44px rgba(15,23,42,0.12), var(--mc-focus) !important;
}
/* Tekst w przyciskach: stabilny ellipsis */
#sideMenu .toggleButton,
#sideMenu .tools-button,
#sideMenu .history-btn,
#sideMenu #additionalButtons .toggleButton{
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Historia: czytelny tekst */
#sideMenu .cloudHistory{
color: rgba(17,24,39,0.86) !important;
}
/* X (delete) w historii — dopasowany do jasnej szaty */
#sideMenu .history-btn .delete-btn{
border: 1px solid rgba(17,24,39,0.12) !important;
background: rgba(17,24,39,0.06) !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.10) !important;
}
#sideMenu .history-btn .delete-btn::before,
#sideMenu .history-btn .delete-btn::after{
background: rgba(17,24,39,0.62) !important;
}
#sideMenu .history-btn .delete-btn:hover{
background: rgba(17,24,39,0.10) !important;
border-color: rgba(17,24,39,0.18) !important;
}
/* Ikony w menu */
#sideMenu .material-symbols-rounded{
color: rgba(17,24,39,0.88);
}
#sideMenu .selectedModel .material-symbols-rounded{
color: rgba(17,24,39,0.86);
}
/* Overlay pod menu: delikatny “dim” jak w main.css */
.overlay{
background: rgba(15,23,42,0.14) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* =====================================================================
PATCH (UI PRO) — SideMenu + Welcome-chip + YTAlogo + top-right icons
Wklej NA SAM KONIEC pliku styles3.css
===================================================================== */
/* -----------------------------
1) SideMenu — PRO układ + białe teksty w Tools/Historia
(zachowujemy tło/kolory przycisków — tylko typografia i "układ")
----------------------------- */
/* Czytelne wcięcie narzędzi (nested list) + stabilny rytm */
#sideMenu #additionalButtons.active{
padding-left: 10px !important;
margin-left: 4px !important;
border-left: 1px solid rgba(255,255,255,0.18) !important;
}
/* TOOL BUTTONS — biały tekst + ikona w "glass chip" */
#sideMenu #additionalButtons .toggleButton{
justify-content: flex-start !important;
gap: 10px !important;
color: rgba(255,255,255,0.94) !important; /* <- wymagane wg. request */
}
#sideMenu #additionalButtons .toggleButton .side-menu__itemText{
color: rgba(255,255,255,0.94) !important; /* <- wymagane, bo wcześniej było ciemne */
letter-spacing: 0.01em;
}
/* ikona chevron: nowocześnie, spójnie z gradientem przycisku */
#sideMenu #additionalButtons .toggleButton .side-menu__toolIcon{
background: rgba(255,255,255,0.18) !important;
border: 1px solid rgba(255,255,255,0.26) !important;
color: rgba(255,255,255,0.92) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
#sideMenu #additionalButtons .toggleButton:hover .side-menu__toolIcon{
background: rgba(255,255,255,0.24) !important;
border-color: rgba(255,255,255,0.32) !important;
}
/* Historia — biały tekst (button + wewnętrzny span) */
#sideMenu .history-btn{
color: rgba(255,255,255,0.94) !important;
}
#sideMenu .history-btn .cloudHistory{
color: rgba(255,255,255,0.94) !important;
}
/* Delete X w historii: bielszy, "premium", bez ciemnych override */
#sideMenu .history-btn .delete-btn{
border: 1px solid rgba(255,255,255,0.22) !important;
background: rgba(255,255,255,0.14) !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}
#sideMenu .history-btn .delete-btn::before,
#sideMenu .history-btn .delete-btn::after{
background: rgba(255,255,255,0.90) !important;
}
#sideMenu .history-btn .delete-btn:hover{
background: rgba(255,255,255,0.18) !important;
border-color: rgba(255,255,255,0.28) !important;
}
/* -----------------------------
2) Welcome-chip — ikony dopasowane do szaty (blue/teal)
----------------------------- */
#welcome-screen .welcome-chip__icon{
background: linear-gradient(135deg,
rgba(31,122,224,0.18),
rgba(20,184,166,0.14)
) !important;
border: 1px solid rgba(31,122,224,0.20) !important;
color: rgba(31,122,224,0.95) !important;
box-shadow:
0 12px 26px rgba(31,122,224,0.12),
inset 0 1px 0 rgba(255,255,255,0.70) !important;
}
#welcome-screen .welcome-chip:hover .welcome-chip__icon{
background: linear-gradient(135deg,
rgba(31,122,224,0.24),
rgba(20,184,166,0.18)
) !important;
border-color: rgba(31,122,224,0.28) !important;
color: rgba(31,122,224,0.98) !important;
}
#welcome-screen[data-mode="tax"] .welcome-chip__icon{
background: linear-gradient(135deg,
rgba(16,185,129,0.20),
rgba(20,184,166,0.14)
) !important;
border-color: rgba(16,185,129,0.26) !important;
box-shadow:
0 12px 26px rgba(16,185,129,0.12),
inset 0 1px 0 rgba(255,255,255,0.70) !important;
}
/* -----------------------------
3) YTAlogo — PRO brand chip + dynamiczny "mode pill"
(napis obok logo zmienia się: PODATKI / OGÓLNY / NARZĘDZIA AI)
----------------------------- */
.YTAlogo{
border-radius: 18px !important;
padding: 6px 10px !important;
gap: 10px !important;
}
.YTAlogo-icon{
width: 60px !important;
height: 50px !important;
background-size: 60px 50px !important;
}
.YTAlogo-divider{
width: 1px !important;
height: 28px !important;
opacity: 0.65 !important;
background: linear-gradient(to bottom,
transparent,
rgba(15,23,42,0.32),
transparent
) !important;
}
/* Pill z nazwą trybu */
.YTAlogo-mode{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px !important;
border-radius: 12px !important;
/* border: 1px solid rgba(31,122,224,0.18) !important;
background: linear-gradient(135deg,
rgba(31,122,224,0.12),
rgba(20,184,166,0.10)
) !important; */
color: rgba(15,20,28,0.88) !important;
font-size: 12px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
white-space: nowrap !important;
text-shadow: none !important;
/* box-shadow:
0 14px 30px rgba(31,122,224,0.10),
inset 0 1px 0 rgba(255,255,255,0.72) !important; */
}
/* kolorowy "status dot" */
.YTAlogo-mode::before{
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(31,122,224,0.95);
box-shadow: 0 0 0 3px rgba(31,122,224,0.16);
}
/* TRYB: Podatki */
.YTAlogo[data-app-mode="tax"] .YTAlogo-mode{
/* border-color: rgba(16,185,129,0.22) !important;
background: linear-gradient(135deg,
rgba(16,185,129,0.14),
rgba(20,184,166,0.10)
) !important; */
}
.YTAlogo[data-app-mode="tax"] .YTAlogo-mode::before{
background: rgba(16,185,129,0.96);
box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
/* TRYB: Ogólny */
.YTAlogo[data-app-mode="general"] .YTAlogo-mode{
/* border-color: rgba(31,122,224,0.20) !important; */
}
.YTAlogo[data-app-mode="general"] .YTAlogo-mode::before{
background: rgba(31,122,224,0.96);
box-shadow: 0 0 0 3px rgba(31,122,224,0.16);
}
/* TRYB: Narzędzia AI */
.YTAlogo[data-app-mode="ai"] .YTAlogo-mode{
/* border-color: rgba(20,184,166,0.22) !important;
background: linear-gradient(135deg,
rgba(31,122,224,0.10),
rgba(20,184,166,0.12)
) !important; */
}
.YTAlogo[data-app-mode="ai"] .YTAlogo-mode::before{
background: rgba(20,184,166,0.96);
box-shadow: 0 0 0 3px rgba(20,184,166,0.18);
}
/* -----------------------------
4) Top-right — przywrócenie widoczności menu-container i userbutton
(problem: top-bar ma z-index=1000, a menu-container był bez z-index)
----------------------------- */
.menu-container{
position: fixed !important;
top: 13px !important;
right: 10px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
z-index: 1300 !important; /* > top-bar (1000) i overlaye */
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.menu-container #userbutton{
display: inline-flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Mobile: zachowaj lekki oddech jak było */
@media (max-width: 768px){
.menu-container{
top: 15px !important;
right: 15px !important;
}
.YTAlogo{
padding: 6px 8px !important;
}
.YTAlogo-mode{
padding: 7px 10px !important;
letter-spacing: 0.10em !important;
}
}
/* =========================
INPUT BOX (BOTTOM)
========================= */
#bottom-box.bottom-box{
border-radius: var(--ui-radius) !important;
background: rgba(255,255,255,0.60) !important;
/* border: 1px solid rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 46px rgba(0,0,0,0.12) !important; */
border: 1px solid rgba(255, 255, 255, 0.4) !important;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.08),
0 2px 6px rgba(0, 0, 0, 0.04) !important;
/* backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%); */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
/* ✅ nowoczesne przejścia kontenera */
transition:
box-shadow 180ms ease,
border-color 180ms ease,
background-color 180ms ease,
transform 180ms ease,
height 220ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: height, transform;
}
/* Fokus na całym kontenerze, gdy fokus ma textarea albo przycisk */
#bottom-box.bottom-box:focus-within{
border-color: rgba(59,130,246,0.55) !important;
background: rgba(255,255,255,0.88) !important;
}
#bottom-box.bottom-box::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
transform: translateY(0);
transition: transform 180ms ease;
}
#bottom-box.bottom-box:focus-within::after{
transform: translateY(-1px);
}
/* Textarea: hover/focus expand (działa nawet gdy puste) */
#bottom-box .question-box{
width: 100%;
resize: none;
outline: none;
border: 0;
background: transparent;
display: block;
/* ✅ startowa wysokość */
height: 44px; /* zamiast max-height */
min-height: 44px;
max-height: 10dvh; /* twardy limit */
overflow: hidden;
transition:
height 220ms cubic-bezier(0.22, 1, 0.36, 1),
color 140ms ease,
opacity 140ms ease;
will-change: height;
}
#bottom-box .question-box:hover,
#bottom-box .question-box:focus{
height: 10dvh; /* ✅ realnie rośnie na hover/focus */
overflow: auto; /* przy focus pozwól scrollować */
}
/* Opcjonalnie: przyjemniejszy placeholder */
#bottom-box .question-box::placeholder{
opacity: 0.75;
transition: opacity 140ms ease;
}
#bottom-box:focus-within .question-box::placeholder{
opacity: 0.55;
}
/* Przycisk wysyłki: miękkie wejście/wyjście stanu */
#bottom-box .send-it{
transition:
transform 160ms ease,
opacity 160ms ease,
filter 160ms ease;
}
#bottom-box:focus-within .send-it{
transform: translateY(-1px);
}
/* Disabled: czytelny, ale "żywy" */
#bottom-box .send-it.is-disabled{
opacity: 0.55;
filter: grayscale(0.2);
}
/* =========================================================
UI polish: sideMenu / question-box / profile-data
(wklej na sam koniec styles3.css)
========================================================= */
:root{
--yta-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------------------------------------------------------
1) SideMenu — nowocześniejsze wysuwanie/chowanie
(slide + delikatny fade)
--------------------------------------------------------- */
#sideMenu.side-menu{
/* zostawiamy Twój mechanizm left (fix-packi), dokładamy fade i lepszą płynność */
transition:
left 360ms var(--yta-ease-out),
opacity 220ms ease !important;
opacity: 0;
will-change: left, opacity;
}
#sideMenu.side-menu.active{
opacity: 1;
}
/* ---------------------------------------------------------
2) question-box — hover -> 10vh i zostaje podczas pisania,
a podczas pisania może urosnąć max do 15vh
(tylko desktop: hover+mouse, żeby nie rozwalić mobile)
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
/* maksymalny wzrost podczas pisania */
#bottom-box .question-box{
max-height: 15vh; /* było 10dvh (twardy limit) */
}
/* klucz: min-height trzyma 10vh nawet gdy JS ustawi mniejszy inline height */
#bottom-box .question-box:hover,
#bottom-box .question-box:focus,
#bottom-box:focus-within .question-box{
min-height: 10vh;
}
}
/* ---------------------------------------------------------
3) profile-data — wolniejsze i subtelniejsze rozwijanie
(żeby nie “strzelało”)
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
#profile-data.userData{
transition: box-shadow 320ms ease;
}
#profile-data .limits-ui__expiry{
transition:
max-height 460ms var(--yta-ease-out),
opacity 280ms ease 60ms,
margin-top 280ms ease 60ms;
}
#profile-data.userData:hover .limits-ui__expiry{
max-height: 44px; /* lekki zapas vs 40px */
opacity: 0.90;
margin-top: 6px;
pointer-events: auto;
}
/* naprawa: wcześniej była niepoprawna wartość box-shadow (ucięta) */
#profile-data.userData:hover{
box-shadow: 0 18px 44px rgba(0,0,0,0.14);
}
}
/* ---------------------------------------------------------
A11y: prefer-reduced-motion
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
#sideMenu.side-menu,
#bottom-box .question-box,
#profile-data .limits-ui__expiry{
transition: none !important;
}
}
/* =========================================================
GLOBAL STATUS SLOT — TOP under logo (Desktop = Mobile parity)
- Przywraca pasek statusu pod logiem (zamiast prawego rail)
- Spójny, elegancki „glass-card” z resztą UI
========================================================= */
/* Karta (szerokość jak chat/tools) */
#global-status-slot .status-area{
width: var(--content-w, 62%) !important;
max-width: var(--content-max, 1100px) !important;
margin: 0 auto !important;
}
/* Układ wewnętrzny */
#global-status-slot .status-meta{
display: flex;
flex-direction: column;
gap: 8px;
}
#global-status-slot .status-header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#global-status-slot .status-label{
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* Track paska */
#global-status-slot .status-progress{
width: 100%;
height: 8px !important;
border-radius: 999px;
background: rgba(15,23,42,0.08);
border: 1px solid rgba(15,23,42,0.12);
overflow: hidden;
}
/* Fill paska (poziomy, pod logo) */
#global-status-slot #status-progress-bar{
position: relative !important;
left: auto !important;
bottom: auto !important;
height: 100% !important;
width: 0%; /* realna wartość ustawiana w JS z !important */
border-radius: 999px;
background: linear-gradient(
to right,
rgba(var(--yta-amber-2, 244, 182, 86), 0.95),
rgba(var(--yta-amber-1, 255, 205, 135), 0.95)
);
transition: width 220ms cubic-bezier(.2,.8,.2,1);
}
/* Etapy jako „chips” – jedna linia, z poziomym scroll (bez skakania wysokości) */
#global-status-slot .status-steps{
display: flex !important;
flex-wrap: nowrap;
gap: 6px;
margin-top: 10px !important;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none; /* Firefox */
-webkit-overflow-scrolling: touch;
}
#global-status-slot .status-steps::-webkit-scrollbar{
height: 0; /* WebKit */
}
/* Wyłącz stare znaczniki (○/✓/●), bo chipy same „niosą” etap */
#global-status-slot .status-step::before{
content: "" !important;
}
#global-status-slot .status-step.done{
opacity: 0.88;
background: rgba(var(--yta-amber-1, 255, 205, 135), 0.14);
border-color: rgba(var(--yta-amber-2, 244, 182, 86), 0.22);
}
/* Mobile: szerzej (tak jak już masz) */
@media (max-width: 768px){
#global-status-slot .status-area{
width: 95% !important;
}
}
/* Bezpiecznik: jeśli gdzieś zostały elementy od „pionowego rail” */
#global-status-slot .status-rail,
#global-status-slot .status-tree{
display: none !important;
}
/* =========================================================
SIDE MENU — wolniejsze otwieranie/zamykanie + easing
(final override; nadpisuje wcześniejsze definicje)
========================================================= */
#sideMenu.side-menu{
transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: left;
}
/* Dostępność: redukcja animacji jeśli systemowo ustawione */
@media (prefers-reduced-motion: reduce){
#sideMenu.side-menu{
transition: none !important;
}
}
/* =========================================================
SIDE MENU — slow open/close + fade (final override)
========================================================= */
#sideMenu.side-menu{
transition:
left 560ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 260ms ease !important;
opacity: 0;
will-change: left, opacity;
}
#sideMenu.side-menu.active{
opacity: 1;
}
/* =========================================================
QUESTION-BOX — gdy puste, nie trzymaj min-height 10vh
========================================================= */
@media (hover: hover) and (pointer: fine){
#bottom-box.qb-empty:hover .question-box,
#bottom-box.qb-empty:focus-within .question-box{
min-height: unset !important; /* pozwól wrócić do domyślnej wysokości */
}
}
/* =====================================================================
FINAL: GLOBAL STATUS SLOT — top pod logo (desktop parity z mobile)
- Desktop: kompaktowa karta pod logo (bez brzydkiego "paska" na całą szerokość)
- Etapy: dropdown POD paskiem (nie obok / nie losowo)
- Klikalność: slot jest "click-through" poza samą kartą
===================================================================== */
:root{
--yta-topbar-h: 70px;
/* Desktop: logo realnie wystaje poza 70px top-bar (u Ciebie sprawdziło się ~86px) */
--yta-logo-overhang: 16px;
--yta-status-top: calc(var(--yta-topbar-h) + var(--yta-logo-overhang) + env(safe-area-inset-top, 0px));
--yta-status-w: 560px;
}
@media (max-width: 768px){
:root{
--yta-logo-overhang: 0px;
--yta-status-w: 92vw;
}
}
/* Slot = tylko pozycjonowanie (bez tła i bez "sticky") */
#global-status-slot{
position: fixed !important;
top: var(--yta-status-top) !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100% !important;
padding: 6px 12px !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 980 !important; /* pod top-bar (1000), nad treścią */
overflow: visible !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
pointer-events: none; /* ✅ nie blokuj klików w UI pod spodem */
isolation: isolate;
}
/* Nie pokazuj pustego slota */
#global-status-slot:empty{
display: none !important;
}
/* Twój przełącznik "Ukryj pasek statusu" */
#global-status-slot.is-hidden{
display: none !important;
}
/* Wyłącz stare warianty rail/tree/meta (jeśli zostały w CSS/DOM) */
#global-status-slot .status-rail,
#global-status-slot .status-tree{
display: none !important;
}
#global-status-slot .status-area.is-idle{
opacity: 0.7;
}
#global-status-slot .status-area.is-idle:hover{
opacity: 1;
}
/* Header */
#global-status-slot .status-header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 0 8px 0;
}
#global-status-slot .status-left{
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1 1 auto;
}
/* stage jako chip – dopięcie do istniejącej stylistyki */
#global-status-slot .status-stage{
background: rgba(15,23,42,0.06);
border: 1px solid rgba(15,23,42,0.10);
}
/* Tekst statusu: jedna linia + ellipsis */
#global-status-slot .status-label-text{
min-width: 0;
flex: 1 1 auto;
}
/* Pasek postępu: reset po starych wariantach (MUSI BYĆ poziomy) */
#global-status-slot .status-progress{
position: relative !important;
height: 8px !important;
border-radius: 999px !important;
background: rgba(15,23,42,0.08) !important;
border: 1px solid rgba(15,23,42,0.12) !important;
overflow: hidden !important;
}
#global-status-slot #status-progress-bar{
position: relative !important;
left: auto !important;
bottom: auto !important;
width: 0%;
height: 100% !important;
border-radius: 999px !important;
background: var(--yta-accent-gradient, linear-gradient(90deg, rgba(var(--ui-accent),0.95), rgba(var(--ui-accent),0.55))) !important;
box-shadow: none !important;
transition: width 220ms cubic-bezier(.2,.8,.2,1);
}
/* Wyłącz pseudo-elementy z poprzednich wariantów (thumb/% badge) */
#global-status-slot #status-progress-bar::before,
#global-status-slot #status-progress-bar::after{
content: none !important;
}
/* Dropdown etapów — POD kartą */
#global-status-slot .status-steps{
position: absolute !important;
top: calc(100% - 5px) !important;
left: 0 !important;
right: 0 !important;
transform: translateY(-6px) !important;
opacity: 0;
pointer-events: none;
padding: 10px 10px;
border-radius: 14px;
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
box-shadow: var(--ui-glass-shadow);
backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(140%);
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
max-height: min(260px, 42vh);
overflow: auto;
transition: opacity 140ms ease, transform 140ms ease;
z-index: 1;
}
#global-status-slot .status-area:hover .status-steps,
#global-status-slot .status-area:focus-within .status-steps{
opacity: 1;
pointer-events: auto;
/* transform: translateY(0) !important; */
}
/* Etapy jako chipy (PRO) */
/* Reset starych kropek/okręgów z wcześniejszych stylów */
#global-status-slot .status-step::before{
content: "" !important;
}
#global-status-slot .status-step.done::before{
content: "✓" !important;
font-weight: 900;
color: rgba(20,184,166,0.95);
padding: 3px;
}
#global-status-slot .status-step.active{
color: rgba(17,24,39,0.86) !important;
}
#global-status-slot .status-step.active::before{
content: "●" !important;
font-size: 9px;
color: rgba(var(--ui-accent), 0.85);
padding: 3px;
}
/* Mobile: etapy na stałe (bez hover) */
@media (max-width: 768px){
#global-status-slot{
top: calc(var(--yta-topbar-h) + env(safe-area-inset-top, 0px)) !important;
padding: 6px 10px !important;
}
#global-status-slot .status-area{
width: min(92vw, 680px);
}
#global-status-slot .status-steps{
position: static !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
margin-top: 10px;
max-height: none;
overflow: visible;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
}
/* =====================================================================
2026-02-07 — Global status slot: PRO fade + compact (override @ EOF)
Cel:
- poprawny fade-in/out (domyślnie ukryty, widoczny tylko z .is-visible)
- nie chowamy .status-header / .status-meta (to jest aktywny layout JS)
===================================================================== */
#global-status-slot{
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 220ms ease, transform 220ms ease;
}
#global-status-slot.is-visible{
opacity: 0.78;
transform: translateY(0);
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce){
#global-status-slot{ transition: none !important; transform: none !important; }
}
/* Lekko kompaktowy wariant */
#global-status-slot .status-area{
padding: 10px 12px !important;
}
#global-status-slot .status-progress{
height: 6px !important;
}
/* A11y helper (jeśli kiedyś dodasz .status-a11y do DOM) */
#global-status-slot .status-a11y{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* =====================================================================
Auth UI vNext (spójny UX/UI dla stron: login / rejestracja / weryfikacja
/ reset / zmiana hasła / pakiety)
Wklej NA SAM KONIEC pliku styles3.css.
===================================================================== */
/* 0) Delikatniejsze wejście (szybciej niż globalne 2s) */
body.auth{
transition: opacity .65s ease-in-out;
}
/* 1) Kontener + karta */
body.auth .containerlogin{
/* zostawiamy flex (jest w bazowym CSS), dopracowujemy spacing */
min-height: calc(100vh - 70px);
padding: 75px 16px 48px;
margin: 0 auto;
}
body.auth .containerlogin .login-box{
width: min(540px, 100%);
max-width: 540px;
border-radius: var(--yta-radius);
border: 1px solid var(--yta-border);
background:
linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
backdrop-filter: blur(10px);
box-shadow: var(--yta-shadow-sm);
padding: 28px;
}
@media (max-width: 480px){
body.auth .containerlogin .login-box{ padding: 22px; border-radius: 16px; }
body.auth .containerlogin{ padding-top: 96px; }
}
/* Dodatkowe nadpisania mobile (w bazowym CSS są !important) */
@media only screen and (max-width: 768px){
body.auth .containerlogin .login-box{
width: min(540px, 100%) !important;
border: 1px solid var(--yta-border) !important;
box-shadow: var(--yta-shadow-sm) !important;
padding: 22px !important;
}
body.auth .containerlogin .login-input{
height: 48px !important;
padding: 0 14px !important;
}
body.auth .containerlogin .login-submit{
height: 52px !important;
padding: 0 16px !important;
}
}
/* 2) Nagłówki */
body.auth .containerlogin .login-title{
font-family: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: .2px;
margin: 0 0 6px 0;
text-align: center;
color: color-mix(in srgb, var(--yta-text) 92%, transparent);
}
body.auth .containerlogin .login-subtitle{
margin: 0 0 18px 0;
text-align: center;
color: color-mix(in srgb, var(--yta-text) 55%, transparent);
font-size: 0.95rem;
font-family: "Quicksand", system-ui, sans-serif;
}
/* 3) Pola formularza */
body.auth .field{
display:flex;
flex-direction:column;
gap: 6px;
margin-top: 12px;
}
body.auth .field label{
font-size: 0.86rem;
font-weight: 700;
color: color-mix(in srgb, var(--yta-text) 74%, transparent);
}
body.auth .input-wrap{
position: relative;
display:flex;
align-items:center;
}
body.auth .input-icon{
position: absolute;
left: 12px;
color: color-mix(in srgb, var(--yta-text) 42%, transparent);
pointer-events:none;
}
body.auth .containerlogin .login-input{
width: 100%;
margin: 0; /* usuwa "dziury" z bazowego CSS */
height: 48px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid var(--yta-border);
background: var(--yta-surface);
color: var(--yta-text);
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
body.auth .containerlogin .login-input::placeholder{
color: color-mix(in srgb, var(--yta-text) 38%, transparent);
}
body.auth .containerlogin .login-input:hover{
border-color: var(--yta-border-strong);
box-shadow: 0 10px 24px rgba(15,20,28,.08);
}
body.auth .containerlogin .login-input:focus{
outline: none; /* fallback */
}
body.auth .containerlogin .login-input:focus-visible{
outline: none;
border-color: color-mix(in srgb, var(--yta-accent-a) 68%, var(--yta-border));
box-shadow: 0 0 0 4px var(--yta-focus);
}
body.auth .containerlogin .login-input.with-icon{
padding-left: 42px;
}
body.auth .containerlogin .login-input.with-suffix{
padding-right: 46px;
}
/* 4) Przycisk akcji */
body.auth .containerlogin .login-submit{
margin-top: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 52px;
padding: 0 16px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--yta-accent-a) 32%, transparent);
background: var(--yta-accent-gradient);
color: #fff;
font-weight: 500;
letter-spacing: .2px;
cursor: pointer;
box-shadow: var(--yta-shadow-sm);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.auth .containerlogin .login-submit:hover{
transform: translateY(-1px);
box-shadow: var(--yta-shadow);
filter: brightness(1.02);
}
body.auth .containerlogin .login-submit:active{
transform: translateY(0);
filter: brightness(.98);
}
body.auth .containerlogin .login-submit:disabled{
cursor: not-allowed;
opacity: .70;
transform: none;
box-shadow: none;
}
/* spinner już istnieje w bazowym CSS; dopinamy układ */
body.auth .containerlogin .login-submit .material-symbols-rounded{ margin-left: 0; }
/* 5) Linki pomocnicze */
body.auth .containerlogin .register-link{
margin-top: 16px;
text-align: center;
}
body.auth .containerlogin .register-link p{
margin: 10px 0;
}
/* wspólna “pozycja linku” z ikoną */
body.auth .containerlogin .link-row{
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: color-mix(in srgb, var(--yta-accent-a) 92%, #000);
font-weight: 800;
font-family: "Quicksand", system-ui, sans-serif;
}
body.auth .containerlogin .link-row:hover{
text-decoration: underline;
color: color-mix(in srgb, var(--yta-accent-a) 82%, #000);
}
/* 6) Toggle “pokaż/ukryj hasło” */
body.auth .input-suffix-btn{
position:absolute;
right: 8px;
width: 38px;
height: 38px;
border: 0;
border-radius: 12px;
background: transparent;
color: color-mix(in srgb, var(--yta-text) 50%, transparent);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.auth .input-suffix-btn:hover{
background: color-mix(in srgb, var(--yta-accent-a) 10%, transparent);
color: color-mix(in srgb, var(--yta-text) 72%, transparent);
}
body.auth .input-suffix-btn:focus-visible{
outline: none;
box-shadow: 0 0 0 4px var(--yta-focus);
}
/* 7) Inline error (spójne z toastami) */
body.auth input.is-invalid{
border-color: rgba(239,68,68,.80);
box-shadow: 0 0 0 4px rgba(239,68,68,.18);
}
/* 8) Pakiety (choose-package) — spójne karty + modal */
body.auth .page-title{
font-family: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
font-weight: 900;
font-size: 1.4rem;
margin: 96px 0 6px 0; /* nad top-barem jest fixed */
text-align: center;
color: color-mix(in srgb, var(--yta-text) 92%, transparent);
}
body.auth .page-subtitle{
margin: 0 0 18px 0;
text-align: center;
color: color-mix(in srgb, var(--yta-text) 55%, transparent);
font-family: "Quicksand", system-ui, sans-serif;
font-size: 0.98rem;
padding-top: 0; /* usuwa “dziwny” offset */
}
body.auth .pricing-container{
padding: 18px 16px 48px;
gap: 16px;
}
body.auth .pricing-card{
border-radius: var(--yta-radius);
border: 1px solid var(--yta-border);
box-shadow: var(--yta-shadow-sm);
background: var(--yta-surface);
width: min(320px, calc(100vw - 32px));
}
body.auth .pricing-card:hover{
transform: translateY(-3px);
box-shadow: var(--yta-shadow);
}
body.auth .pricing-card.selected{
border-color: color-mix(in srgb, var(--yta-accent-a) 70%, var(--yta-border));
box-shadow: 0 0 0 4px var(--yta-focus), var(--yta-shadow-sm);
}
/* tytuł w kartach */
body.auth .pricing-title{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
}
/* ceny */
body.auth .pricing-price{
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
margin: 12px 0 8px;
}
body.auth .old-price{
color: color-mix(in srgb, var(--yta-text) 40%, transparent);
text-decoration: line-through;
font-size: 0.98rem;
}
body.auth .new-price{
color: color-mix(in srgb, var(--yta-text) 88%, transparent);
font-weight: 900;
font-size: 1.25rem;
}
/* info o zaznaczeniu */
body.auth .selected-info{
width: 90%;
text-align: center;
margin: 0 0 10px 0;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--yta-border);
background: color-mix(in srgb, var(--yta-accent-a) 8%, var(--yta-surface));
}
/* modal / popup */
body.auth .form-overlay{
background: rgba(15,20,28,.22);
backdrop-filter: blur(2px);
}
body.auth .form-popup{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(920px, calc(100vw - 32px));
max-height: min(640px, calc(100vh - 120px));
height: auto;
overflow: auto;
border-radius: var(--yta-radius);
border: 1px solid var(--yta-border);
box-shadow: var(--yta-shadow);
background: var(--yta-surface);
}
body.auth .form-box{
width: 100%;
align-items: stretch;
}
body.auth .form-box h3{
font-family: "Raleway", system-ui, sans-serif;
font-weight: 900;
margin: 4px 0 2px;
}
body.auth .form-box input{
height: 44px;
border-radius: 14px;
border: 1px solid var(--yta-border);
padding: 0 12px;
}
body.auth .form-box input:focus-visible{
outline: none;
border-color: color-mix(in srgb, var(--yta-accent-a) 68%, var(--yta-border));
box-shadow: 0 0 0 4px var(--yta-focus);
}
body.auth .form-box button{
height: 48px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--yta-accent-a) 32%, transparent);
background: var(--yta-accent-gradient);
color: #fff;
font-weight: 900;
}
body.auth .close-button{
position: absolute;
top: 10px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 14px;
border: 1px solid var(--yta-border);
background: color-mix(in srgb, var(--yta-surface) 70%, transparent);
color: color-mix(in srgb, var(--yta-text) 62%, transparent);
cursor: pointer;
}
body.auth .close-button:hover{
background: color-mix(in srgb, var(--yta-accent-a) 10%, var(--yta-surface));
color: color-mix(in srgb, var(--yta-text) 82%, transparent);
}
/* Modal (pakiety): inputy z ikoną + lepszy layout kolumn */
body.auth .form-box input.with-icon{
padding-left: 42px;
}
body.auth .form-column{
column-gap: 24px;
row-gap: 14px;
flex-wrap: wrap;
justify-content: space-between;
}
body.auth .form-column-left,
body.auth .form-column-right{
width: 100%;
}
@media (min-width: 920px){
body.auth .form-column{
flex-wrap: nowrap;
}
body.auth .form-column-left{
width: 420px;
}
body.auth .form-column-right{
width: 420px;
}
}
/* 9) Dark mode tylko dla auth (podpina się pod istniejący localStorage 'dark-mode') */
body.auth.dark-mode{
--yta-bg: #0b1220;
--yta-surface: rgba(15,23,42,.92);
--yta-surface-2: rgba(15,23,42,.72);
--yta-text: #e6edf7;
--yta-muted: rgba(230,237,247,.72);
--yta-border: rgba(148,163,184,.18);
--yta-border-strong: rgba(148,163,184,.28);
--yta-shadow-sm: 0 18px 55px rgba(0,0,0,.35);
--yta-shadow: 0 28px 95px rgba(0,0,0,.45);
--yta-focus: rgba(56,189,248,.22);
--yta-focus-strong: rgba(56,189,248,.35);
background:
radial-gradient(1200px 520px at 22% 8%, rgba(56,189,248,.12), transparent 60%),
radial-gradient(900px 460px at 78% 18%, rgba(20,184,166,.10), transparent 60%),
var(--yta-bg);
color: var(--yta-text);
}
body.auth.dark-mode .top-bar{
background: rgba(15,23,42,.72);
border-bottom: 1px solid rgba(148,163,184,.14);
}
body.auth.dark-mode .containerlogin .login-box{
background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.82));
}
body.auth.dark-mode .containerlogin .login-input{
background: rgba(2,6,23,.30);
}
body.auth.dark-mode .containerlogin .link-row{
color: rgba(56,189,248,.95);
}
body.auth.dark-mode .containerlogin .link-row:hover{
color: rgba(125,211,252,.95);
}
/* 10) Szanuj prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
body.auth, body.auth *{
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* =====================================================================
TYPEWRITER SPEEDHINT — right-side slot (no text overlap) (2026-02-08)
- Host: #tw-speedhint-slot (pozycjonowany przez JS obok .box-container / #main-func)
- Cel: nie zasłaniać treści (poza box-container), spójne "glass" z resztą UI
===================================================================== */
:root{
--tw-hint-gap: 12px;
--tw-hint-max-w: 260px;
--tw-hint-bg: rgba(255,255,255,0.78);
--tw-hint-border: var(--ui-glass-border, rgba(15,23,42,0.10));
--tw-hint-shadow: 0 12px 32px rgba(0,0,0,0.10);
--tw-hint-blur: var(--ui-glass-blur, 14px);
}
#tw-speedhint-slot{
position: fixed;
left: -9999px;
top: -9999px;
z-index: 2100;
display: flex;
align-items: flex-start;
justify-content: flex-start;
pointer-events: none; /* nigdy nie blokuje klików */
}
.tw-speedhint{
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 999px;
/* Glass + subtelny akcent (jak w innych chipach) */
background:
radial-gradient(120px 60px at 20% 12%, rgba(var(--ui-accent, 44,100,255), 0.10), transparent 60%),
var(--tw-hint-bg);
border: 1px solid var(--tw-hint-border);
box-shadow: var(--tw-hint-shadow);
backdrop-filter: blur(var(--tw-hint-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--tw-hint-blur)) saturate(140%);
color: rgba(17,24,39,0.78);
font: 600 12px/1.15 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
letter-spacing: 0.18px;
user-select: none;
pointer-events: none;
max-width: var(--tw-hint-max-w);
white-space: nowrap;
opacity: 0;
transform: translateY(6px);
transition: opacity 180ms ease, transform 180ms ease;
overflow: hidden; /* shimmer przycięty do radius */
}
.tw-speedhint.is-visible{
opacity: 1;
transform: translateY(0);
}
.tw-speedhint.is-used{
background:
radial-gradient(120px 60px at 20% 12%, rgba(16,185,129,0.10), transparent 60%),
rgba(236,253,245,0.74);
border-color: rgba(16,185,129,0.22);
color: rgba(5,46,22,0.86);
}
/* Ikona */
.tw-speedhint .tw-ico{
width: 18px;
height: 18px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(15,23,42,0.05);
border: 1px solid rgba(15,23,42,0.10);
}
/* mikro „kropka” sygnalizująca akcję */
.tw-speedhint .tw-dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--yta-accent-gradient, linear-gradient(135deg, #1f7ae0, #14b8a6));
box-shadow: 0 0 0 4px rgba(var(--ui-accent, 44,100,255), 0.16);
}
.tw-speedhint.is-used .tw-dot{
background: rgba(16,185,129,0.95);
box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}
.tw-speedhint .tw-text{
overflow: hidden;
text-overflow: ellipsis;
}
/* shimmer – delikatny na jasnym tle */
.tw-speedhint::after{
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: linear-gradient(
110deg,
transparent 0%,
rgba(255,255,255,0.30) 40%,
rgba(255,255,255,0.65) 50%,
rgba(255,255,255,0.30) 60%,
transparent 100%
);
transform: translateX(-120%);
animation: tw-shimmer 2.6s ease-in-out infinite;
pointer-events: none;
opacity: 0.18;
}
.tw-speedhint.is-used::after{
animation: none;
opacity: 0;
}
@keyframes tw-shimmer{
0% { transform: translateX(-120%); }
55% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce){
.tw-speedhint,
.tw-speedhint::after{
animation: none !important;
transition: none !important;
}
}
/* =========================================================
2026-02-08 — SIDE MENU / HISTORIA: fix rozjechanych przycisków
- neutralizuje globalne .side-menu ul li { padding: 20px 0; }
========================================================= */
#sideMenu #historia.historia > li{
padding: 0 !important;
margin: 0 0 8px 0 !important;
}
#sideMenu #historia.historia > li:last-child{
margin-bottom: 0 !important;
}
/* =====================================================================
THEME VARIANT A — Light Tech Blue (FINAL OVERRIDE) (2026-02-09)
Cel:
- spójny, premium "Light Tech Blue" w całej aplikacji
- jedno źródło prawdy dla akcentu (blue) + sekundarnego (teal)
- ujednolicone focus ringi / bordery / info toasty
- naprawa brakującego --lm-border (side-menu)
===================================================================== */
:root{
/* Primary accent (RGB) — używane w rgba(var(--ui-accent), a) */
--ui-accent: 31, 122, 224; /* #1f7ae0 */
/* Bazowe powierzchnie */
--yta-bg: #f7f8fc;
--yta-surface: #ffffff;
--yta-surface-2: #fbfcff;
/* Tekst */
--yta-text: #0f141c;
--yta-muted: #5c6676;
/* Obramowania / cienie */
--yta-border: rgba(15,23,42,0.10);
--yta-border-strong: rgba(15,23,42,0.16);
--yta-shadow-sm: 0 10px 28px rgba(15,23,42,0.10);
--yta-shadow: 0 18px 55px rgba(15,23,42,0.12);
/* Radius */
--yta-radius: 18px;
--yta-radius-sm: 14px;
/* Akcent (Light Tech Blue → Teal) */
--yta-accent-a: #1f7ae0;
--yta-accent-b: #14b8a6;
--yta-accent-gradient: linear-gradient(135deg, var(--yta-accent-a), var(--yta-accent-b));
/* Focus ring */
--yta-focus: rgba(var(--ui-accent), 0.28);
--yta-focus-strong: rgba(var(--ui-accent), 0.40);
/* Pochodne / tints */
--yta-a-10: color-mix(in srgb, var(--yta-accent-a) 10%, transparent);
--yta-a-14: color-mix(in srgb, var(--yta-accent-a) 14%, transparent);
--yta-a-18: color-mix(in srgb, var(--yta-accent-a) 18%, transparent);
--yta-b-06: color-mix(in srgb, var(--yta-accent-b) 6%, transparent);
--yta-b-10: color-mix(in srgb, var(--yta-accent-b) 10%, transparent);
/* (często używane w box-shadow) */
--yta-accent-b-22: color-mix(in srgb, var(--yta-accent-b) 22%, transparent);
--yta-accent-b-28: color-mix(in srgb, var(--yta-accent-b) 28%, transparent);
/* Main.css parity — trzymamy spójność z wariantem A */
--mc-accent-a: var(--yta-accent-a);
--mc-accent-b: var(--yta-accent-b);
--mc-accent-grad: var(--yta-accent-gradient);
--mc-focus: 0 0 0 3px rgba(var(--ui-accent), 0.22);
--mc-focus-strong: 0 0 0 4px rgba(var(--ui-accent), 0.26);
/* SideMenu patch: wcześniej było zakomentowane => border nie działał */
--lm-border: rgba(255,255,255,0.22);
--lm-accent: var(--yta-accent-a);
--lm-accent-soft: rgba(var(--ui-accent), 0.14);
--lm-focus: 0 0 0 3px rgba(var(--ui-accent), 0.22);
}
/* Tło globalne (cool, tech) — w oparciu o tokeny */
html{
background:
radial-gradient(900px 560px at 14% 10%, rgba(var(--ui-accent),0.16), transparent 60%),
radial-gradient(820px 520px at 86% 14%, rgba(20,184,166,0.12), transparent 60%),
radial-gradient(900px 620px at 50% 92%, rgba(var(--ui-accent),0.10), transparent 65%),
var(--yta-bg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* Bottom composer — fokus zawsze spójny z akcentem (zamiast "tailwind blue") */
#bottom-box.bottom-box:focus-within{
border-color: rgba(var(--ui-accent), 0.25) !important;
}
/* Toast INFO — używa akcentu wariantu A (zamiast domyślnego blue-500) */
.popup.info{
--toast-accent: rgba(var(--ui-accent),0.95);
--toast-accent-soft: rgba(var(--ui-accent),0.12);
}
/* Focus ring dla menu (premium + a11y) */
#settingsMenu .settingsmenu__item:focus-visible,
#usermenu .usermenu__item:focus-visible{
outline: none !important;
border-color: rgba(var(--ui-accent),0.28) !important;
box-shadow: 0 0 0 3px rgba(var(--ui-accent),0.18) !important;
}
/* =========================================================
PREMIUM TYPO POLISH — Variant A (Light Tech Blue)
Scope: welcome screen, tool cards, chat bubbles
(cosmetic only: micro-contrast, line-height, spacing)
========================================================= */
/* -----------------------------
1) Welcome screen
----------------------------- */
/* Title: bardziej "premium" (mikro-kontrast + lepsze łamanie linii) */
#welcome-screen .welcome-title{
/* fallback first (dla przeglądarek bez color-mix) */
color: rgba(15,20,28,0.92);
/* preferuj tokeny wariantu A */
color: color-mix(in srgb, var(--yta-text, #0f141c) 96%, transparent);
line-height: 1.04;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* lepszy rytm i łamanie */
max-width: 35ch;
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
/* Subtitle: delikatnie większy leading + stabilniejszy kontrast */
#welcome-screen .welcome-subtitle{
color: rgba(15,20,28,0.64);
color: color-mix(in srgb, var(--yta-text, #0f141c) 68%, transparent);
letter-spacing: 0.002em;
line-height: 1.56;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
max-width: 56ch;
margin-left: auto;
margin-right: auto;
text-wrap: pretty;
hyphens: auto;
}
/* Tekst kafelków: lekko ciaśniej i czytelniej */
#welcome-screen .welcome-chip__text{
color: rgba(15,20,28,0.88);
color: color-mix(in srgb, var(--yta-text, #0f141c) 88%, transparent);
letter-spacing: -0.006em;
line-height: 1.35;
}
/* Footnote: mikro-kontrast, bez "mgły" */
#welcome-screen .welcome-footnote{
color: rgba(15,20,28,0.54);
color: color-mix(in srgb, var(--yta-text, #0f141c) 58%, transparent);
letter-spacing: 0.002em;
line-height: 1.55;
}
/* -----------------------------
2) Tool cards (container-func)
----------------------------- */
/* Nagłówek narzędzia: mniej "rozstrzelony" tracking, lepszy leading */
.container-func .tool-header h1{
color: rgba(15,20,28,0.94);
color: color-mix(in srgb, var(--yta-text, #0f141c) 96%, transparent);
font-weight: 760;
letter-spacing: -0.016em !important;
line-height: 1.15 !important;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* Opis pod nagłówkiem: wygodniejszy reading width + rytm */
.container-func .tool-header .p-func{
font-size: 0.96rem;
line-height: 1.66;
letter-spacing: 0.001em;
max-width: 78ch;
text-wrap: pretty;
hyphens: auto;
}
/* Tytuły sekcji: subtelna korekta trackingu + rhythm */
.container-func .tool-section-title{
letter-spacing: -0.012em;
line-height: 1.25;
margin-bottom: 8px;
}
/* Opisy sekcji: większy leading + czystsze odstępy */
.container-func .tool-section-desc{
line-height: 1.65;
letter-spacing: 0.001em;
margin-top: -3px;
margin-bottom: 14px;
text-wrap: pretty;
hyphens: auto;
}
/* Label: ciaśniej i czytelniej */
.container-func .tool-field label{
line-height: 1.25;
letter-spacing: 0.002em;
}
/* Tipy / help: premium leading (łatwiej "skanuje się" wzrokiem) */
.container-func .field-help{
line-height: 1.65;
letter-spacing: 0.001em;
}
/* -----------------------------
3) Chat bubble (question + response)
----------------------------- */
.box-container .qusetionwr,
.box-container .response-box{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: 15px;
letter-spacing: 0.001em;
/* chat = lepiej czytelny, nie "rzeki" jak w justify */
text-align: left;
text-wrap: pretty;
hyphens: auto;
}
/* Pytanie użytkownika: mocniejsze, ale nadal lekkie */
.box-container .qusetionwr{
color: rgba(15,20,28,0.92);
color: color-mix(in srgb, var(--yta-text, #0f141c) 92%, transparent);
font-weight: 650;
line-height: 1.56;
}
.box-container .qusetionwr .question{
margin: 0;
}
/* Odpowiedź: regularny ciężar + większy leading */
.box-container .response-box{
color: rgba(15,20,28,0.86);
color: color-mix(in srgb, var(--yta-text, #0f141c) 86%, transparent);
font-weight: 450;
line-height: 1.72;
}
/* Stabilne "rytmiczne" odstępy w markdown */
.box-container .response-box > *:first-child{ margin-top: 0; }
.box-container .response-box > *:last-child{ margin-bottom: 0; }
.box-container .response-box p{
margin: 0 0 0.90em 0;
}
.box-container .response-box h1,
.box-container .response-box h2,
.box-container .response-box h3{
color: rgba(15,20,28,0.92);
color: color-mix(in srgb, var(--yta-text, #0f141c) 92%, transparent);
margin: 1.05em 0 0.45em 0;
line-height: 1.20;
letter-spacing: -0.015em;
}
.box-container .response-box ul,
.box-container .response-box ol{
margin: 0.65em 0 0.95em 1.20em;
padding: 0;
}
.box-container .response-box li{
margin: 0.28em 0;
}
.box-container .response-box strong{
font-weight: 650;
}
.box-container .response-box code{
font-size: 1em;
font-weight: 500;
}
/* Mobile: minimalnie mniejszy tekst (żeby nie "puchło") */
@media (max-width: 768px){
#welcome-screen .welcome-title{ max-width: 20ch; }
#welcome-screen .welcome-subtitle{ max-width: 46ch; }
.box-container .qusetionwr,
.box-container .response-box{
font-size: 14.5px;
}
}
/* =========================================================
Answer actions (Copy / Download) — pod odpowiedzią
- zawsze obok siebie (flex)
- lewy dół pod treścią
========================================================= */
.yta-answer-actions{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
/* pod odpowiedzią */
margin: 10px 0 0 0;
padding: 0 0 4px 0;
width: 100%;
align-self: flex-start;
}
.yta-answer-actions .tooltip-container{
margin: 0;
}
/* Tooltip widoczny także przy obsłudze klawiaturą */
.tooltip-container:focus-within .tooltip-text{
visibility: visible;
opacity: 1;
}
/* =====================================================================
Narzędzia podatkowe — UX/UI final polish
Cel: czytelność, spójna typografia, lepsze pola/placeholdery/przyciski
Uwaga: bez nowych klas — tylko nadpisania istniejących selektorów.
===================================================================== */
/* 1) Układ i rytm narzędzi */
.main-func{
/* wątek narzędzi ma zachowywać „czytelny” content width jak chat */
width: 100% !important;
max-width: var(--content2-w, 980px) !important;
margin-left: auto !important;
margin-right: auto !important;
/* spójny padding wewnątrz (desktop + mobile) */
padding: 14px 14px 24px;
/*
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 14px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.6) inset;
*/
}
/* Desktop: narzędzia przewijają się wewnątrz (jak .box-container),
dzięki czemu treść nie wchodzi pod top-bar i global-status-slot */
@media (min-width: 769px){
#panelContent .main-func{
position: fixed;
top: var(--yta-safe-top, calc(var(--yta-topbar-h, 70px) + 96px));
bottom: calc(var(--toast-safe, env(safe-area-inset-bottom, 0px)) + var(--bottom-box-h, 64px) - 240px);
left: 51%;
transform: translateX(-50%);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
/* żeby ostatnie elementy nie chowały się pod bottom-box */
scroll-padding-bottom: calc(var(--bottom-box-h, 64px) + 84px);
/* scrollbar-width: none; */
-ms-overflow-style: none;
/* stabilny gutter (mniej „mignięć”) */
scrollbar-gutter: stable;
padding: 10px var(--content-pad-x) 40px var(--content-pad-x) !important;
}
}
/* (legacy) Nie potrzebujemy już dodatkowego padding-top przy status-slot,
ale zostawiamy neutralnie dla kompatybilności kaskady. */
.container-func{
align-items: stretch !important;
text-align: left !important;
gap: 14px !important;
}
/* 2) Nagłówki / opisy */
.tool-header h1{
margin: 0 !important;
font-family: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font-weight: 850 !important;
line-height: 1.12 !important;
letter-spacing: -0.018em;
font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
color: color-mix(in srgb, var(--yta-text, #0f141c) 92%, transparent);
}
.tool-header .p-func{
margin: 10px 0 0 0 !important;
width: 100% !important;
max-width: 90ch;
font-size: 15px;
line-height: 1.66;
text-align: left !important;
text-wrap: pretty;
hyphens: auto;
color: var(--yta-muted, rgba(15,20,28,.68)) !important;
}
.tool-instructions{
margin-top: 12px !important;
border-radius: 14px !important;
background: rgba(255,255,255,0.62) !important;
border: 1px solid var(--yta-border, rgba(15,23,42,0.10)) !important;
padding: 12px 14px !important;
}
.tool-instructions strong{
margin-bottom: 6px;
font-weight: 800;
color: color-mix(in srgb, var(--yta-text, #0f141c) 86%, transparent);
}
.tool-instructions ul{
margin: 0;
padding-left: 18px;
}
.tool-instructions li{
margin: 6px 0;
color: color-mix(in srgb, var(--yta-text, #0f141c) 84%, transparent);
}
/* 3) Sekcje formularza */
.tool-section{
padding: 16px 18px !important;
}
.tool-section-title{
margin: 0 0 6px 0 !important;
font-family: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font-weight: 850 !important;
letter-spacing: -0.012em;
line-height: 1.18;
font-size: 1.05rem;
}
.tool-section-desc{
margin: 0 0 12px 0 !important;
font-size: 0.92rem;
line-height: 1.55;
text-wrap: pretty;
color: var(--yta-muted, rgba(15,20,28,.66)) !important;
}
/* 4) Siatka pól — bardziej elastyczna (2 kolumny gdy jest miejsce, 1 na wąsko) */
.tool-grid{
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 14px 18px !important;
align-items: start;
}
@media (max-width: 520px){
.tool-grid{ grid-template-columns: 1fr !important; }
}
/* 5) Labelki + gwiazdki wymaganych pól */
.tool-field label{
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 6px 0;
font-size: 0.90rem;
font-weight: 750;
letter-spacing: 0.002em;
color: color-mix(in srgb, var(--yta-text, #0f141c) 90%, transparent);
}
.req-star{
font-size: 0.95em;
transform: translateY(-0.5px);
}
/* 6) Pola (textarea/select) */
.tbl-func{
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
padding: 11px 14px !important;
border-radius: 12px !important;
font-size: 15px;
line-height: 1.45;
/* lepsze „feel” w toolach */
background: rgba(255,255,255,.92) !important;
border: 1px solid var(--yta-border-strong, rgba(15,23,42,0.14)) !important;
}
textarea.tbl-func{
min-height: 44px;
}
select.tbl-func{
min-height: 44px;
}
.tbl-func::placeholder{
color: color-mix(in srgb, var(--yta-muted, rgba(15,20,28,.66)) 78%, transparent) !important;
opacity: 0.82;
font-size: 0.94em;
line-height: 1.35;
}
.tbl-func:hover{
border-color: color-mix(in srgb, var(--yta-border-strong, rgba(15,23,42,0.14)) 60%, rgba(31,122,224,.35));
}
.tbl-func:focus{
outline: none !important;
border-color: rgba(31,122,224,.55) !important;
box-shadow: 0 0 0 3px var(--yta-focus, rgba(31,122,224,.18)) !important;
}
/* Błędy walidacji — spójne i czytelne */
.tbl-func.is-invalid{
border-color: rgba(220,38,38,.65) !important;
box-shadow: 0 0 0 3px rgba(220,38,38,.14) !important;
}
/* 7) Pomoc pod polami */
.field-help{
margin-top: 8px !important;
font-size: 0.86rem;
line-height: 1.50;
color: var(--yta-muted, rgba(15,20,28,.66)) !important;
}
.field-help strong{
color: color-mix(in srgb, var(--yta-text, #0f141c) 88%, transparent);
}
/* 8) Przycisk analizy — czytelny „primary” w stylu aplikacji */
#analyzeButton.analyzeButton.button-func,
.analyzeButton.button-func{
width: min(360px, 100%);
height: 48px;
font-size: 0.98rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* 9) Wynik (output) — typografia jak w czacie + empty state */
.output-func{
padding: 18px 0px !important;
font-size: 15px;
line-height: 1.72;
text-align: left;
text-wrap: pretty;
hyphens: auto;
scroll-margin-top: 190px;
}
/* Placeholder, gdy nie ma jeszcze wyniku */
#output-func:empty{
min-height: 84px;
display: grid;
place-items: center;
}
#output-func:empty::before{
content: "Wynik analizy pojawi się tutaj po kliknięciu „Przeprowadź analizę”.";
color: var(--yta-muted, rgba(15,20,28,.62));
font-size: 0.95rem;
text-align: center;
max-width: 56ch;
}
/* Stabilny rytm dla markdown w output */
.output-func > *:first-child{ margin-top: 0; }
.output-func > *:last-child{ margin-bottom: 0; }
.output-func p{ margin: 0 0 0.90em 0; }
.output-func h1,
.output-func h2,
.output-func h3{
margin: 1.05em 0 0.45em 0;
line-height: 1.20;
letter-spacing: -0.015em;
color: color-mix(in srgb, var(--yta-text, #0f141c) 92%, transparent);
}
.output-func ul,
.output-func ol{
margin: 0.65em 0 0.95em 1.20em;
padding: 0;
}
.output-func li{ margin: 0.28em 0; }
.output-func code{ font-size: 0.92em; }
/* =========================================================
PATCH 2026-02-10 — HISTORIA (SideMenu + Manager modal)
- Ulubione (⭐) + Ostatnie 10
- Import / eksport (JSON)
========================================================= */
/* SideMenu: nagłówek sekcji historii z akcją "Zarządzaj" */
#sideMenu .side-menu__sectionTitle--history{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap: 8px !important;
margin-bottom: 8px !important;
min-width: 0;
}
/* Ikona + label to 2 osobne w HTML — układujemy je jak jeden "tytuł" */
#sideMenu .side-menu__sectionTitle--history > span.material-symbols-rounded{
flex: 0 0 auto;
opacity: 0.90;
}
#sideMenu .side-menu__sectionTitle--history > span:not(.material-symbols-rounded){
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Przycisk "Zarządzaj" w SideMenu */
#sideMenu .history-manage-btn{
margin-left: auto;
display:inline-flex;
align-items:center;
gap: 8px;
height: 32px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--sm-border, rgba(255,255,255,0.22));
background: var(--sm-panel2, rgba(255,255,255,0.06));
color: rgba(255,255,255,0.96);
font-size: 12px;
line-height: 1;
cursor:pointer;
user-select:none;
/* mniejszy cień — mniej "ciężkie" w nagłówku */
box-shadow: none;
}
#sideMenu .history-manage-btn:hover{
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.20);
transform: translateY(-1px);
}
#sideMenu .history-manage-btn:focus-visible{
outline:none !important;
box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}
#sideMenu .history-manage-btn__text{
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
@media (max-width: 420px){
#sideMenu .history-manage-btn__text{ display:none; }
#sideMenu .history-manage-btn{ padding: 6px 8px; }
}
/* Hint (Ulubione / Ostatnie 10) */
#sideMenu .side-menu__historyHint{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0 0 10px 0;
}
@media (max-width: 420px){
#sideMenu .side-menu__historyHint{ grid-template-columns: 1fr; }
}
#sideMenu .history-hint-chip{
width: 100%;
display:inline-flex;
align-items:center;
gap: 6px;
/* reset domyślnych stylów