/* Custom styles moved from newUI/v2/index.html */

/* Font setup is handled in index.html or imported */

/* Animated Background Blobs */
.blob {
    position: absolute;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.6;
    animation: float 10s infinite ease-in-out;
}
.blob-1 { top: -10%; left: -10%; width: 300px; height: 300px; background: #2a9d8f; animation-delay: 0s; }
.blob-2 { bottom: -10%; right: -10%; width: 350px; height: 350px; background: #264653; animation-delay: -5s; }
.blob-3 { top: 40%; left: 40%; width: 200px; height: 200px; background: #e9c46a; opacity: 0.4; animation-delay: -2s; transform: translate(-50%, -50%); }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* Glassmorphism Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* White Logo Helper */
.logo-white {
    filter: brightness(0) invert(1);
}

/* Modern Button */
.btn-modern {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
    color: #0f172a;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-modern:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Safe Area Helpers */
.safe-area-top { padding-top: max(env(safe-area-inset-top), 20px); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Panic Buttons */
.btn-panic {
    background: linear-gradient(135deg, #c25050 0%, #7a2e2e 100%);
    box-shadow: 0 4px 15px rgba(160, 50, 50, 0.35);
    /* border: 1px solid rgba(255, 255, 255, 0.1);  Original white border */
    border: 1px solid rgba(194, 80, 80, 0.4);   /* Red border requested */
    transition: transform 0.1s;
}
.btn-panic:active { transform: scale(0.95); }

/* Chat Bubbles */
.bubble-bot {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
}
.bubble-user {
    background: linear-gradient(135deg, #2a9d8f 0%, #264653 100%);
    box-shadow: 0 4px 15px rgba(42, 157, 143, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

/* Input */
.glass-input {
    background: rgba(0, 0, 0, 0.2);
    /* border: 1px solid rgba(255, 255, 255, 0.1); Old border */
    border: none;
}

/* Body styles overrides for new UI pages */
.new-ui-body {
    background-color: #0f172a;
    color: white;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Usunięcie ramki fokusa na elementach interaktywnych */
.new-ui-body *:focus,
.new-ui-body *:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Scrollbar Hiding Utility */
.scrollbar-hide, .chat-scroll-area {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.scrollbar-hide::-webkit-scrollbar, .chat-scroll-area::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* =============================================
   PWA Standalone Mode — force mobile layout
   When the app is installed and runs as a standalone
   PWA, remove the desktop phone-frame and go
   full-screen mobile style regardless of screen size.
   ============================================= */
@media (display-mode: standalone) {
    /* The outer centering wrapper — no need to center a frame */
    .new-ui-body {
        /* keep flex column but remove centering so child fills the space */
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    /* The "phone frame" container — make it fill the PWA window */
    .new-ui-body > div {
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        /* Tailwind ring-8 ring-gray-800 → remove */
        --tw-ring-offset-width: 0px !important;
        --tw-ring-shadow: none !important;
        ring: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }
}

/* =============================================
   Chat Markdown Rendering
   Scoped to .chat-markdown so it never leaks
   ============================================= */

.chat-markdown { display: inline; }
.chat-markdown > *:first-child { margin-top: 0; }
.chat-markdown > *:last-child  { margin-bottom: 0; }

.chat-markdown p {
    margin: 0.15em 0;
    line-height: 1.6;
}
.chat-markdown > p:only-child {
    margin: 0;
    display: inline;
}

.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4,
.chat-markdown h5,
.chat-markdown h6 {
    margin: 0.6em 0 0.3em;
    font-weight: 700;
    line-height: 1.3;
    color: white;
}
.chat-markdown h1 { font-size: 1.4em; }
.chat-markdown h2 { font-size: 1.25em; }
.chat-markdown h3 { font-size: 1.1em; }
.chat-markdown h4,
.chat-markdown h5,
.chat-markdown h6 { font-size: 1em; }

.chat-markdown strong { font-weight: 700; }
.chat-markdown em     { font-style: italic; }

.chat-markdown a {
    color: #6ee7b7;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.chat-markdown a:hover { color: #a7f3d0; }

/* Inline code */
.chat-markdown code {
    background: rgba(255, 255, 255, 0.12);
    padding: 0.15em 0.4em;
    border-radius: 0.3em;
    font-size: 0.88em;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

/* Code blocks */
.chat-markdown pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75em;
    padding: 0.8em 1em;
    margin: 0.5em 0;
    overflow-x: auto;
}
.chat-markdown pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
    line-height: 1.5;
}

/* Lists */
.chat-markdown ul,
.chat-markdown ol {
    margin: 0.35em 0;
    padding-left: 1.5em;
}
.chat-markdown ul { list-style-type: disc; }
.chat-markdown ol { list-style-type: decimal; }
.chat-markdown li { margin: 0.15em 0; line-height: 1.5; }
.chat-markdown li > ul,
.chat-markdown li > ol { margin: 0.1em 0; }

/* Blockquote */
.chat-markdown blockquote {
    border-left: 3px solid rgba(110, 231, 183, 0.5);
    margin: 0.5em 0;
    padding: 0.3em 0.8em;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 0.5em 0.5em 0;
}

/* Horizontal rule */
.chat-markdown hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0.6em 0;
}

/* Tables */
.chat-markdown table {
    border-collapse: collapse;
    margin: 0.5em 0;
    width: 100%;
    font-size: 0.9em;
}
.chat-markdown th,
.chat-markdown td {
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.35em 0.6em;
    text-align: left;
}
.chat-markdown th {
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

/* Task lists (checkbox) */
.chat-markdown li.task-list-item {
    list-style-type: none;
    margin-left: -1.2em;
}
.chat-markdown li.task-list-item input[type="checkbox"] {
    margin-right: 0.4em;
    accent-color: #6ee7b7;
}