/* Message box styles for error/success messages */
.message-box {
    display: none;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.message-box.show {
    display: block;
}

.message-box.error {
    background-color: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Responsive header bar for triangle calculator, matches password generator style */
.header-bar {
    top: 0;
    z-index: 5;
    min-height: 64px;
}
.header-bar button {
    -webkit-transition: background 0.12s, -webkit-box-shadow 0.12s;
    transition: background 0.12s, -webkit-box-shadow 0.12s;
    transition: box-shadow 0.12s, background 0.12s;
    transition: box-shadow 0.12s, background 0.12s, -webkit-box-shadow 0.12s;
    -webkit-box-shadow: none;
            box-shadow: none;
}
.header-bar button:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 2px #2563eb;
            box-shadow: 0 0 0 2px #2563eb;
}
.header-bar .font-semibold {
    font-weight: 600;
}

@media (max-width: 640px) {
    .header-bar {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .header-bar h2 {
        font-size: 1.25rem;
        margin-left: 0.1rem;
        margin-right: 0.1rem;
    }
}

@media (min-width: 641px) {
    .header-bar {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .header-bar h2 {
        font-size: 2rem;
        margin-left: 0.75rem;
        text-align: left;
    }
}

/* Triangle calculator — AI chat visual language */
#trianglecalculator.triangle-page {
    --tc-ink: #171717;
    --tc-muted: #6b6b6b;
    --tc-line: #e7e7e5;
    --tc-soft: #f7f7f5;
    min-height: 100vh;
    margin: 0;
    padding: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: #fafaf9;
    color: var(--tc-ink);
    font-family: Inter, system-ui, sans-serif;
}

#trianglecalculator .triangle-shell {
    width: min(100%, 880px);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 22px;
    -webkit-box-shadow: 0 18px 55px rgba(17, 24, 39, .07);
            box-shadow: 0 18px 55px rgba(17, 24, 39, .07);
}

#trianglecalculator .triangle-topbar {
    min-height: 68px;
    padding: 0 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    color: var(--tc-ink);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--tc-line);
    border-radius: 0;
}

#trianglecalculator .triangle-topbar h3 {
    margin: 0;
    color: var(--tc-ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

#trianglecalculator .triangle-topbar button {
    min-width: 40px;
    min-height: 40px;
    padding: 9px 12px;
    color: #575757;
    background: transparent;
    border: 0;
    border-radius: 10px;
}

#trianglecalculator .triangle-topbar button:hover {
    color: var(--tc-ink);
    background: var(--tc-soft);
}

#trianglecalculator .triangle-topbar button:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
    -webkit-box-shadow: none;
            box-shadow: none;
}

#trianglecalculator .triangle-content {
    padding: 38px 42px 42px;
}

#trianglecalculator .triangle-canvas {
    width: min(100%, 430px);
    min-height: 230px;
    margin-bottom: 8px;
    padding: 18px;
    background: var(--tc-soft);
    border: 1px solid var(--tc-line);
    border-radius: 18px;
}

#trianglecalculator label {
    color: #414141;
    font-size: .8125rem;
    font-weight: 600;
}

#trianglecalculator input[type="number"],
#trianglecalculator input[type="text"] {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    color: var(--tc-ink);
    background: #fff;
    border: 1px solid #ddddda;
    border-radius: 12px;
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

#trianglecalculator input[type="number"]:focus,
#trianglecalculator input[type="text"]:focus {
    border-color: #a8a8a4;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 24, 39, .06);
            box-shadow: 0 0 0 3px rgba(17, 24, 39, .06);
}

#trianglecalculator .triangle-content button {
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 12px;
    font-weight: 600;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

#trianglecalculator .triangle-content button:hover {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

#trianglecalculator .triangle-action-primary {
    color: #fff;
    background: #111827;
    border: 1px solid #111827;
}

#trianglecalculator .triangle-action-primary:hover {
    background: #252d3c;
    border-color: #252d3c;
}

#trianglecalculator .triangle-action-secondary {
    color: #3f3f3f;
    background: #fff;
    border: 1px solid var(--tc-line);
}

#trianglecalculator .triangle-action-secondary:hover {
    background: var(--tc-soft);
    border-color: #d6d6d2;
}

#trianglecalculator .message-box {
    border-radius: 12px;
}

@media (max-width: 640px) {
    #trianglecalculator.triangle-page {
        padding: 0;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        background: #fff;
    }

    #trianglecalculator .triangle-shell {
        width: 100%;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
    }

    #trianglecalculator .triangle-topbar {
        position: sticky;
        top: 0;
        z-index: 5;
        min-height: 64px;
        padding: 0 16px;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-backdrop-filter: blur(14px);
                backdrop-filter: blur(14px);
    }

    #trianglecalculator .triangle-topbar h3 {
        text-align: left;
        font-size: 1rem;
    }

    #trianglecalculator .triangle-content {
        padding: 28px 20px 34px;
    }

    #trianglecalculator .triangle-canvas {
        min-height: 190px;
        padding: 12px;
        border-radius: 15px;
    }
}

/* Chat message layout */
.chat-messages {
    scroll-behavior: smooth;
}

.chat-thread {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 14px;
    min-height: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            /* justify-content: flex-end; */
}

.chat-message {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.chat-message-user {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.chat-message-assistant {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.chat-bubble {
    max-width: min(78%, 680px);
    padding: 12px 15px;
    border-radius: 18px;
    -webkit-box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    overflow-wrap: anywhere;
}

.chat-message-user .chat-bubble {
    color: #ffffff;
    background: #2563eb;
    border-bottom-right-radius: 6px;
}

.chat-message-assistant .chat-bubble {
    color: #111827;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 6px;
}

.chat-message-label {
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.82;
}

.chat-message-content {
    font-size: 0.96rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .chat-bubble {
        max-width: 88%;
    }
}

/* Full-screen mobile layout for chat page */
@media (max-width: 640px) {
    body#chat {
        min-height: 100dvh;
        height: 100dvh;
        padding: 0 !important;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        overflow: hidden;
    }

    body#chat .chat-page-wrap,
    body#chat .chat-shell {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        height: 100dvh;
    }

    body#chat .chat-shell {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        border-radius: 0 !important;
        -webkit-box-shadow: none;
                box-shadow: none;
    }

    body#chat .chat-shell > .p-6 {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        min-height: 0;
        padding: 1rem;
    }

    body#chat .header-bar {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        border-radius: 0 !important;
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    body#chat .chat-messages {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 1rem;
        border-radius: 0.75rem;
    }

    body#chat #chat_form {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        padding-bottom: max(0, env(safe-area-inset-bottom));
    }

    body#chat #chat_form .flex.gap-3 {
        gap: 0.75rem;
    }

    body#chat #chat_form button[type="submit"] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Transcription editor */
.transcript-editor {
    resize: vertical;
    line-height: 1.6;
    white-space: pre-wrap;
}

.copy-transcript-btn {
    -webkit-box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.copy-transcript-btn svg {
    pointer-events: none;
}

@media (max-width: 640px) {
    .transcript-editor {
        min-height: 16rem;
    }
}

/* Formatted AI transcript result */
.ai-result-content h1,
.ai-result-content h2,
.ai-result-content h3,
.ai-result-content h4 {
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.ai-result-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.ai-result-content ul,
.ai-result-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.ai-result-content ul {
    list-style-type: disc;
}

.ai-result-content ol {
    list-style-type: decimal;
}

.ai-result-content li {
    margin-bottom: 0.35rem;
}

.ai-result-content strong {
    font-weight: 700;
}

.ai-result-content blockquote {
    border-left: 4px solid #d1d5db;
    padding-left: 1rem;
    color: #4b5563;
    margin: 1rem 0;
}

.ai-result-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.ai-result-content th,
.ai-result-content td {
    border: 1px solid #d1d5db;
    padding: 0.75rem;
}

.ai-result-content th {
    background: #f3f4f6;
}

/* Mahneti home tool launcher */
body#index {
    min-height: 100vh;
    background-color: var(--bs-tertiary-bg);
}

body#index .home-header {
    z-index: 1030;
    background-color: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}

body#index .brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

body#index .home-hero {
    background:
        radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--bs-primary) 15%, transparent), transparent 28rem),
        var(--bs-body-bg);
}

body#index .home-hero .lead {
    max-width: 42rem;
}

body#index .home-search {
    border-radius: var(--bs-border-radius-lg);
}

body#index .home-search .input-group-text,
body#index .home-search .form-control {
    border-color: var(--bs-border-color);
}

body#index .home-search .input-group-text {
    border-radius: var(--bs-border-radius-lg) 0 0 var(--bs-border-radius-lg);
}

body#index .home-search .form-control {
    border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
}

body#index .home-search:focus-within {
    border-radius: var(--bs-border-radius-lg);
    -webkit-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18) !important;
            box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18) !important;
}

body#index .home-search:focus-within .input-group-text,
body#index .home-search:focus-within .form-control {
    border-color: var(--bs-primary);
    -webkit-box-shadow: none;
            box-shadow: none;
}

body#index .tool-card {
    border-color: var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius-xl);
    overflow: hidden;
    -webkit-transition: border-color .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
    transition: border-color .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
}

body#index .tool-card .card-body {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.25rem;
}

body#index .tool-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--bs-border-radius-lg);
    font-size: 1.2rem;
}

body#index .tool-copy {
    min-width: 0;
}

body#index .tool-card .card-title,
body#index .tool-card .card-text {
    display: block;
}

body#index .tool-card .card-title {
    margin-bottom: .2rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

body#index .tool-card .card-text {
    color: var(--bs-secondary-color);
    font-size: .875rem;
    line-height: 1.35;
}

body#index .tool-arrow {
    color: var(--bs-secondary-color);
    font-size: .8rem;
    -webkit-transition: -webkit-transform .18s ease;
    transition: -webkit-transform .18s ease;
    transition: transform .18s ease;
    transition: transform .18s ease, -webkit-transform .18s ease;
}

body#index .tool-card:hover,
body#index .tool-card:focus-visible {
    border-color: var(--bs-primary-border-subtle);
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-box-shadow: var(--bs-box-shadow) !important;
            box-shadow: var(--bs-box-shadow) !important;
}

body#index .tool-card:hover .tool-arrow,
body#index .tool-card:focus-visible .tool-arrow {
    color: var(--bs-primary);
    -webkit-transform: translateX(.2rem);
            transform: translateX(.2rem);
}

body#index .home-about {
    background-color: var(--bs-body-bg);
}

@media (max-width: 575.98px) {
    body#index .home-hero .display-5 {
        font-size: 2rem;
    }

    body#index .home-hero .lead {
        font-size: 1rem;
    }

    body#index .tool-card .card-body {
        gap: .85rem;
        min-height: 4.75rem;
        padding: .75rem;
    }

    body#index .tool-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    body#index .tool-card .card-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* IP information — AI chat visual language */
#ipinfo {
    --ip-ink: #171717;
    --ip-muted: #6b6b6b;
    --ip-line: #e7e7e5;
    --ip-soft: #f7f7f5;
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    display: block !important;
    background: #fff !important;
    color: var(--ip-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ipinfo *,
#ipinfo *::before,
#ipinfo *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.ip-shell {
    width: 100%;
    min-height: 100vh;
    background: #fff;
}

.ip-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--ip-line);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

.ip-back,
.ip-home {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border: 1px solid var(--ip-line);
    background: #fff;
    color: var(--ip-ink);
    cursor: pointer;
    -webkit-transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

.ip-back {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
}

.ip-home {
    gap: 8px;
    min-height: 40px;
    margin-left: auto;
    padding: 0 14px;
    border-radius: 12px;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
}

.ip-back:hover,
.ip-home:hover {
    border-color: #d4d4d1;
    background: var(--ip-soft);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

.ip-back:focus-visible,
.ip-home:focus-visible {
    outline: 3px solid rgba(23, 23, 23, .16);
    outline-offset: 2px;
}

.ip-back svg,
.ip-home svg,
.ip-card-icon svg,
.ip-privacy-note > svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ip-back svg {
    width: 20px;
    height: 20px;
}

.ip-home svg {
    width: 17px;
    height: 17px;
}

.ip-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 11px;
    min-width: 0;
}

.ip-brand-mark,
.ip-hero-mark {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: var(--ip-ink);
    color: #fff;
    font-weight: 700;
    letter-spacing: -.04em;
}

.ip-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: .82rem;
}

.ip-brand div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ip-brand strong { font-size: .93rem; }
.ip-brand span:last-child { color: var(--ip-muted); font-size: .75rem; }

.ip-main {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 72px 28px 64px;
}

.ip-intro {
    max-width: 650px;
    margin: 0 auto 42px;
    text-align: center;
}

.ip-hero-mark {
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    border-radius: 18px;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.ip-eyebrow {
    margin: 0 0 10px;
    color: var(--ip-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ip-intro h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.35rem);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.06;
}

.ip-lead {
    max-width: 570px;
    margin: 18px auto 0;
    color: var(--ip-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.ip-data-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ip-data-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 16px;
    min-height: 142px;
    padding: 24px;
    border: 1px solid var(--ip-line);
    border-radius: 20px;
    background: #fff;
    -webkit-box-shadow: 0 8px 26px rgba(0, 0, 0, .035);
            box-shadow: 0 8px 26px rgba(0, 0, 0, .035);
}

.ip-data-card-featured { grid-column: 1 / -1; min-height: 154px; }

.ip-card-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 44px;
    height: 44px;
    -ms-flex: 0 0 44px;
        -webkit-box-flex: 0;
            flex: 0 0 44px;
    border-radius: 14px;
    background: var(--ip-soft);
    color: var(--ip-ink);
}

.ip-card-icon svg { width: 22px; height: 22px; }
.ip-card-copy { min-width: 0; }
.ip-card-copy h2 { margin: 1px 0 10px; color: var(--ip-muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ip-value { margin: 0; overflow-wrap: anywhere; color: var(--ip-ink); font-size: 1.28rem; font-weight: 600; line-height: 1.35; }
.ip-value-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: clamp(1.3rem, 4vw, 2rem); letter-spacing: -.04em; }
.ip-meta { margin: 5px 0 0; color: var(--ip-muted); font-size: .88rem; }

.ip-privacy-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 14px;
    margin-top: 18px;
    padding: 19px 21px;
    border: 1px solid var(--ip-line);
    border-radius: 16px;
    background: var(--ip-soft);
}

/* Image resizer controls and interaction states */
#imageresizer .resizer-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}

#imageresizer .resizer-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

#imageresizer .resizer-field label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    color: #3f3f46;
    font-size: .82rem;
    font-weight: 600;
}

#imageresizer .resizer-field select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d4d4d8;
    border-radius: 12px;
    background: #fff;
    color: #18181b;
    font: inherit;
}

#imageresizer .resizer-field input[type="range"] {
    width: 100%;
    accent-color: #2563eb;
}

#imageresizer .resizer-field output {
    color: #2563eb;
    font-variant-numeric: tabular-nums;
}

#imageresizer .resizer-field.is-hidden {
    display: none;
}

#imageresizer .resizer-check {
    grid-column: 1 / -1;
}

#imageresizer .resizer-dropzone {
    cursor: pointer;
    -webkit-transition: border-color .18s ease, background-color .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
    transition: border-color .18s ease, background-color .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
}

#imageresizer .resizer-dropzone:hover,
#imageresizer .resizer-dropzone:focus-visible,
#imageresizer .resizer-dropzone.is-dragging {
    border-color: #2563eb;
    background: #eff6ff;
    -webkit-box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
    outline: none;
}

#imageresizer .resizer-dropzone.is-dragging {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
}

#imageresizer .resizer-upload-message {
    min-height: 20px;
    margin: 4px 0 0;
    color: #15803d;
    font-size: .82rem;
    font-weight: 600;
}

#imageresizer .resizer-upload-message:empty {
    display: none;
}

#imageresizer .resizer-upload-message.is-error {
    color: #b91c1c;
}

#imageresizer .resizer-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
}

#imageresizer .resizer-actions button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8px;
}

#imageresizer .resizer-actions button:first-child {
    background: #18181b;
}

@media (max-width: 640px) {
    #imageresizer .resizer-controls {
        grid-template-columns: 1fr;
    }

    #imageresizer .resizer-check {
        grid-column: auto;
    }

    #imageresizer .resizer-actions,
    #imageresizer .resizer-actions button {
        width: 100%;
    }
}

/* Image resizer — AI chat and unit converter visual language */
#imageresizer {
    --ir-ink: #171717;
    --ir-muted: #6b6b6b;
    --ir-line: #e7e7e5;
    --ir-soft: #f7f7f5;
    --ir-accent: #2563eb;
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    display: block !important;
    background: #fff !important;
    color: var(--ir-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#imageresizer *,
#imageresizer *::before,
#imageresizer *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#imageresizer .resizer-shell {
    min-height: 100vh;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(72%, #fff), to(#fafaf8));
    background: linear-gradient(180deg, #fff 0, #fff 72%, #fafaf8 100%);
}

#imageresizer .resizer-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 72px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    padding: 12px clamp(18px, 4vw, 48px);
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--ir-line);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#imageresizer .resizer-home {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--ir-ink);
    background: transparent;
    border: 1px solid var(--ir-line);
    border-radius: 12px;
    cursor: pointer;
    -webkit-transition: background .18s ease, border-color .18s ease, -webkit-transform .18s ease;
    transition: background .18s ease, border-color .18s ease, -webkit-transform .18s ease;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, -webkit-transform .18s ease;
}

#imageresizer .resizer-home:hover {
    background: var(--ir-soft);
    border-color: #d5d5d2;
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
}

#imageresizer .resizer-home:focus-visible,
#imageresizer .resizer-dropzone:focus-visible,
#imageresizer #copyBtn:focus-visible,
#imageresizer input:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18);
    outline-offset: 2px;
}

#imageresizer .resizer-home svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#imageresizer .resizer-brand {
    min-width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 11px;
}

#imageresizer .resizer-brand-mark {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--ir-ink);
    border-radius: 11px;
}

#imageresizer .resizer-brand-mark svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#imageresizer .resizer-brand div {
    min-width: 0;
    display: grid;
    gap: 1px;
}

#imageresizer .resizer-brand strong {
    font-size: .95rem;
    line-height: 1.25;
}

#imageresizer .resizer-brand span:not(.resizer-brand-mark) {
    overflow: hidden;
    color: var(--ir-muted);
    font-size: .76rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#imageresizer .resizer-status {
    padding: 7px 11px;
    color: #505050;
    background: var(--ir-soft);
    border: 1px solid var(--ir-line);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
}

#imageresizer .resizer-main {
    width: min(100% - 32px, 820px);
    margin: 0 auto;
    padding: clamp(52px, 9vw, 92px) 0 72px;
}

#imageresizer .resizer-intro {
    max-width: 660px;
    margin: 0 auto 34px;
    text-align: center;
}

#imageresizer .resizer-kicker {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-bottom: 14px;
    padding: 6px 10px;
    color: #4f4f4f;
    background: var(--ir-soft);
    border: 1px solid var(--ir-line);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#imageresizer .resizer-intro h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.04;
}

#imageresizer .resizer-intro p {
    max-width: 570px;
    margin: 16px auto 0;
    color: var(--ir-muted);
    font-size: clamp(.98rem, 2vw, 1.08rem);
    line-height: 1.65;
}

#imageresizer .resizer-panel {
    padding: clamp(20px, 4vw, 34px);
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: 22px;
    -webkit-box-shadow: 0 18px 48px rgba(20, 20, 20, .07);
            box-shadow: 0 18px 48px rgba(20, 20, 20, .07);
}

#imageresizer .resizer-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 1fr);
    gap: 18px;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    margin-bottom: 22px;
}

#imageresizer .resizer-field label {
    display: block;
    margin-bottom: 8px;
    font-size: .82rem;
    font-weight: 700;
}

#imageresizer .resizer-input-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    border: 1px solid #d9d9d6;
    border-radius: 12px;
    -webkit-transition: border-color .18s ease, -webkit-box-shadow .18s ease;
    transition: border-color .18s ease, -webkit-box-shadow .18s ease;
    transition: border-color .18s ease, box-shadow .18s ease;
    transition: border-color .18s ease, box-shadow .18s ease, -webkit-box-shadow .18s ease;
}

#imageresizer .resizer-input-wrap:focus-within {
    border-color: #aaa;
    -webkit-box-shadow: 0 0 0 3px rgba(23, 23, 23, .06);
            box-shadow: 0 0 0 3px rgba(23, 23, 23, .06);
}

#imageresizer #targetWidth {
    min-width: 0;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    color: var(--ir-ink);
    background: #fff;
    border: 0;
    outline: 0;
    font: inherit;
    font-weight: 600;
}

#imageresizer .resizer-input-wrap > span {
    padding: 0 14px;
    color: var(--ir-muted);
    font-size: .84rem;
    font-weight: 600;
}

#imageresizer .resizer-check {
    min-height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 11px;
    padding: 9px 12px;
    background: var(--ir-soft);
    border: 1px solid var(--ir-line);
    border-radius: 12px;
    cursor: pointer;
}

#imageresizer .resizer-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--ir-ink);
}

#imageresizer .resizer-check span {
    display: grid;
    gap: 1px;
}

#imageresizer .resizer-check strong { font-size: .82rem; }
#imageresizer .resizer-check small { color: var(--ir-muted); font-size: .72rem; }

#imageresizer .resizer-dropzone {
    min-height: 240px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 34px 20px;
    color: var(--ir-ink);
    background: #fafaf8;
    border: 1.5px dashed #cfcfcb;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: border-color .18s ease, background .18s ease, -webkit-transform .18s ease;
    transition: border-color .18s ease, background .18s ease, -webkit-transform .18s ease;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, -webkit-transform .18s ease;
}

#imageresizer .resizer-dropzone:hover,
#imageresizer .resizer-dropzone.border-blue-500 {
    background: #f5f7ff !important;
    border-color: #8fa8ef !important;
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

#imageresizer .resizer-upload-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: 15px;
    -webkit-box-shadow: 0 8px 20px rgba(20, 20, 20, .06);
            box-shadow: 0 8px 20px rgba(20, 20, 20, .06);
}

#imageresizer .resizer-upload-icon svg,
#imageresizer .resizer-note svg,
#imageresizer #copyBtn svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#imageresizer .resizer-dropzone strong { margin-bottom: 5px; font-size: 1rem; }
#imageresizer .resizer-dropzone > span:not(.resizer-upload-icon) { color: var(--ir-muted); font-size: .88rem; }
#imageresizer .resizer-dropzone small { margin-top: 13px; color: #888; font-size: .72rem; }

#imageresizer .resizer-preview { margin-top: 22px; }
#imageresizer .resizer-preview-frame { display: grid; place-items: center; min-height: 180px; padding: 18px; overflow: hidden; background: #f2f2ef; border-radius: 15px; }
#imageresizer #previewCanvas { max-width: 100%; height: auto; border-radius: 8px; -webkit-box-shadow: 0 10px 28px rgba(20, 20, 20, .12); box-shadow: 0 10px 28px rgba(20, 20, 20, .12); }
#imageresizer .resizer-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 18px; margin-top: 15px; }
#imageresizer .resizer-result p { margin: 0; }
#imageresizer #statusText { font-size: .86rem; font-weight: 700; }
#imageresizer #dimensionsText { margin-top: 3px; color: var(--ir-muted); font-size: .76rem; }
#imageresizer #copyBtn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; color: #fff; background: var(--ir-ink); border: 0; border-radius: 11px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; -webkit-transition: background .18s ease, -webkit-transform .18s ease; transition: background .18s ease, -webkit-transform .18s ease; transition: background .18s ease, transform .18s ease; transition: background .18s ease, transform .18s ease, -webkit-transform .18s ease; }
#imageresizer #copyBtn:hover { background: #333; -webkit-transform: translateY(-1px); transform: translateY(-1px); }

#imageresizer .resizer-note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10px; margin-top: 22px; padding-top: 20px; color: var(--ir-muted); border-top: 1px solid var(--ir-line); font-size: .76rem; line-height: 1.55; }
#imageresizer .resizer-note svg { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 18px; height: 18px; color: #4f7f5a; }
#imageresizer .resizer-note strong { color: var(--ir-ink); }

@media (max-width: 640px) {
    #imageresizer .resizer-topbar { grid-template-columns: 42px minmax(0, 1fr); padding: 10px 16px; }
    #imageresizer .resizer-status { display: none; }
    #imageresizer .resizer-main { width: min(100% - 24px, 820px); padding-top: 42px; }
    #imageresizer .resizer-intro { margin-bottom: 26px; }
    #imageresizer .resizer-panel { border-radius: 18px; }
    #imageresizer .resizer-controls { grid-template-columns: 1fr; gap: 12px; }
    #imageresizer .resizer-dropzone { min-height: 210px; }
    #imageresizer .resizer-result { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
    #imageresizer #copyBtn { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}

/* Wood volume calculator — AI chat / unit converter visual language */
#woodvolumecalculator.wood-page {
    --wood-ink: #181a18;
    --wood-muted: #70756f;
    --wood-line: #e5e8e3;
    --wood-soft: #f5f7f3;
    --wood-accent: #2f6b4f;
    --wood-accent-dark: #24543e;
    min-height: 100vh;
    background: #f7f8f6;
    color: var(--wood-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wood-shell { min-height: 100vh; }

.wood-topbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 0 28px;
    border-bottom: 1px solid var(--wood-line);
    background: rgba(255, 255, 255, .94);
}

.wood-home {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--wood-line);
    border-radius: 13px;
    background: #fff;
    color: var(--wood-ink);
    cursor: pointer;
    -webkit-transition: border-color .18s ease, background .18s ease, -webkit-transform .18s ease;
    transition: border-color .18s ease, background .18s ease, -webkit-transform .18s ease;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, -webkit-transform .18s ease;
}

.wood-home:hover { border-color: #cbd2c8; background: var(--wood-soft); -webkit-transform: translateX(-2px); transform: translateX(-2px); }
.wood-home:focus-visible { outline: 3px solid rgba(47, 107, 79, .18); outline-offset: 2px; }
.wood-home svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.wood-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    min-width: 0;
}

.wood-brand-mark {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--wood-ink);
    color: #fff;
    font-size: .87rem;
    font-weight: 750;
}

.wood-brand strong, .wood-brand span { display: block; }
.wood-brand strong { font-size: .96rem; line-height: 1.2; }
.wood-brand div > span { margin-top: 3px; color: var(--wood-muted); font-size: .76rem; }
.wood-status { margin-left: auto; padding: 8px 12px; border-radius: 999px; background: #edf5ef; color: var(--wood-accent-dark); font-size: .75rem; font-weight: 700; }

.wood-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: min(920px, calc(100% - 36px));
    margin: 0 auto;
    padding: 68px 0 64px;
}

.wood-intro { grid-column: 1 / -1; max-width: 650px; margin: 0 auto 18px; text-align: center; }
.wood-kicker { display: inline-block; margin-bottom: 13px; color: var(--wood-accent); font-size: .73rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.wood-intro h1 { margin: 0; color: var(--wood-ink); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 650; letter-spacing: -.055em; line-height: 1.04; }
.wood-intro p { margin: 17px auto 0; color: var(--wood-muted); font-size: 1rem; line-height: 1.65; }

.wood-field,
.wood-current,
.wood-total,
.wood-history {
    border: 1px solid var(--wood-line);
    border-radius: 19px;
    background: #fff;
    -webkit-box-shadow: 0 8px 30px rgba(26, 32, 27, .035);
            box-shadow: 0 8px 30px rgba(26, 32, 27, .035);
}

.wood-field { padding: 24px; }
.wood-field-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--wood-ink); font-size: .82rem; font-weight: 700; }
.wood-step { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--wood-soft); color: var(--wood-accent); font-size: .7rem; }
.wood-field label { display: block; margin-bottom: 9px; color: var(--wood-muted); font-size: .78rem; font-weight: 650; }

.wood-field input {
    width: 100%;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid var(--wood-line);
    border-radius: 13px;
    background: var(--wood-soft);
    color: var(--wood-ink);
    font-size: 1.25rem;
    font-weight: 600;
    outline: none;
    -webkit-transition: border-color .18s ease, background .18s ease, -webkit-box-shadow .18s ease;
    transition: border-color .18s ease, background .18s ease, -webkit-box-shadow .18s ease;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, -webkit-box-shadow .18s ease;
}

.wood-field input:focus { border-color: var(--wood-accent); background: #fff; -webkit-box-shadow: 0 0 0 4px rgba(47, 107, 79, .1); box-shadow: 0 0 0 4px rgba(47, 107, 79, .1); }
.wood-current { grid-column: 1 / -1; padding: 23px 25px; background: var(--wood-ink); color: #fff; }
.wood-current h4 { margin: 0 0 12px; color: #b9c4bc; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.wood-current > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
.wood-current > div span:first-child { color: #aeb7b0; font-size: .85rem; }
.wood-current > div span:last-child { margin-left: auto; color: #fff; font-size: clamp(1.65rem, 5vw, 2.25rem); font-weight: 650; letter-spacing: -.04em; }

.wood-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wood-actions button { min-height: 50px; padding: 12px 18px; border: 1px solid var(--wood-line); border-radius: 13px; font-size: .87rem; font-weight: 700; cursor: pointer; -webkit-transition: background .18s ease, border-color .18s ease, -webkit-transform .18s ease; transition: background .18s ease, border-color .18s ease, -webkit-transform .18s ease; transition: background .18s ease, border-color .18s ease, transform .18s ease; transition: background .18s ease, border-color .18s ease, transform .18s ease, -webkit-transform .18s ease; }
.wood-actions button:first-child { border-color: var(--wood-accent); background: var(--wood-accent); color: #fff; }
.wood-actions button:first-child:hover { border-color: var(--wood-accent-dark); background: var(--wood-accent-dark); -webkit-transform: translateY(-1px); transform: translateY(-1px); }
.wood-actions button:last-child { background: #fff; color: var(--wood-ink); }
.wood-actions button:last-child:hover { background: var(--wood-soft); }

.wood-total { grid-column: 1 / -1; padding: 24px; background: #edf5ef; border-color: #d8e7dc; text-align: center; }
.wood-total h4 { margin: 0 0 8px; color: var(--wood-accent-dark); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wood-total span { color: var(--wood-accent-dark); font-size: 2rem; font-weight: 650; letter-spacing: -.04em; }
.wood-total div div { margin-top: 4px; color: var(--wood-muted); font-size: .78rem; }

.wood-history { grid-column: 1 / -1; padding: 24px; }
.wood-history > h4 { margin: 0 0 18px; color: var(--wood-ink); font-size: 1rem; font-weight: 700; }
.wood-history > div { display: grid; gap: 9px; max-height: 310px; overflow-y: auto; }
.wood-history [is="dmx-repeat"] > div { padding: 15px 17px; border: 1px solid var(--wood-line); border-radius: 13px; background: var(--wood-soft); }
.wood-history [is="dmx-repeat"] > div > div:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; }
.wood-history [is="dmx-repeat"] > div > div:first-child div:first-child { color: var(--wood-muted); font-size: .76rem; }
.wood-history [is="dmx-repeat"] > div > div:first-child div:last-child { margin-left: auto; color: var(--wood-accent); font-weight: 750; }
.wood-history [is="dmx-repeat"] > div > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; color: var(--wood-ink); font-size: .82rem; }
.wood-history [is="dmx-repeat"] > div > div:last-child span:first-child { color: var(--wood-muted); }

@media (max-width: 640px) {
    .wood-topbar { min-height: 64px; padding: 0 16px; }
    .wood-brand div > span, .wood-status { display: none; }
    .wood-main { grid-template-columns: 1fr; width: min(100% - 28px, 540px); padding: 48px 0 42px; }
    .wood-intro { margin-bottom: 8px; }
    .wood-intro h1 { font-size: 2.15rem; }
    .wood-field, .wood-current, .wood-total, .wood-history { grid-column: 1; border-radius: 16px; }
    .wood-actions { grid-column: 1; }
}

@media (max-width: 420px) {
    .wood-brand-mark { display: none; }
    .wood-actions { grid-template-columns: 1fr; }
    .wood-field, .wood-history { padding: 20px; }
}

.ip-privacy-note > svg { width: 21px; height: 21px; -ms-flex: 0 0 21px; -webkit-box-flex: 0; flex: 0 0 21px; }
.ip-privacy-note strong { display: block; margin-bottom: 4px; font-size: .9rem; }
.ip-privacy-note p { margin: 0; color: var(--ip-muted); font-size: .86rem; line-height: 1.55; }

@media (max-width: 640px) {
    .ip-topbar { min-height: 64px; padding: 0 16px; }
    .ip-home span { display: none; }
    .ip-home { width: 40px; padding: 0; }
    .ip-brand span:last-child { display: none; }
    .ip-main { padding: 48px 18px 40px; }
    .ip-intro { margin-bottom: 32px; }
    .ip-data-panel { grid-template-columns: 1fr; }
    .ip-data-card-featured { grid-column: auto; }
    .ip-data-card { min-height: 0; padding: 20px; border-radius: 17px; }
    .ip-value { font-size: 1.12rem; }
    .ip-value-mono { font-size: 1.3rem; }
}

/* AI image generator — visual language shared with AI Chat */
.image-generator-page {
    --ig-ink: #171717;
    --ig-muted: #6b6b6b;
    --ig-line: #e7e7e5;
    --ig-soft: #f7f7f5;
    min-height: 100vh;
    margin: 0;
    background: #fff;
    color: var(--ig-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.image-generator-page *,
.image-generator-page *::before,
.image-generator-page *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.image-generator-shell,
.image-generator-card {
    min-height: 100vh;
    width: 100%;
}

.image-generator-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: visible;
    background: #fff;
}

.image-generator-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--ig-line);
    background: rgba(255, 255, 255, .92);
    color: var(--ig-ink);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.image-generator-topbar h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

.image-generator-topbar button {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #575757;
    cursor: pointer;
    -webkit-transition: background-color .16s ease, color .16s ease;
    transition: background-color .16s ease, color .16s ease;
}

.image-generator-topbar button:first-child {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    width: 40px;
    padding: 9px;
}

.image-generator-topbar button:last-child {
    margin-left: auto;
}

.image-generator-topbar button:hover {
    background: var(--ig-soft);
    color: var(--ig-ink);
}

.image-generator-topbar button:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

.image-generator-main {
    width: min(100% - 40px, 860px);
    margin: 0 auto;
    padding: 64px 0 80px;
}

.image-generator-intro {
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

.image-generator-intro::before {
    content: "AI";
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: #111827;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.image-generator-intro h2 {
    margin: 0 0 9px;
    color: var(--ig-ink);
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.image-generator-intro p {
    max-width: 590px;
    margin: 0 auto;
    color: var(--ig-muted);
    font-size: .98rem;
    line-height: 1.65;
}

.image-generator-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 22px;
    padding: 28px;
    border: 1px solid var(--ig-line);
    border-radius: 20px;
    background: #fff;
    -webkit-box-shadow: 0 12px 35px rgba(17, 24, 39, .06);
            box-shadow: 0 12px 35px rgba(17, 24, 39, .06);
}

.image-generator-form label {
    display: block;
    margin-bottom: 8px;
    color: #343434;
    font-size: .84rem;
    font-weight: 600;
}

.image-generator-form textarea,
.image-generator-form input:not([type="hidden"]):not([type="checkbox"]),
.image-generator-form select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #d8d8d5;
    border-radius: 12px;
    background: #fff;
    color: var(--ig-ink);
    font: inherit;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

.image-generator-form textarea {
    min-height: 138px;
    line-height: 1.55;
    resize: vertical;
}

.image-generator-form textarea:focus,
.image-generator-form input:not([type="checkbox"]):focus,
.image-generator-form select:focus {
    border-color: #9a9a96;
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
            box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
}

.image-generator-form input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 7px 11px;
    border: 0;
    border-radius: 8px;
    background: var(--ig-soft);
    color: #343434;
    font-weight: 600;
    cursor: pointer;
}

.image-generator-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 11px;
    border: 0;
    border-radius: 8px;
    background: var(--ig-soft);
    color: #343434;
    font-weight: 600;
    cursor: pointer;
}

.image-generator-form #modeNotice {
    border-color: var(--ig-line);
    background: var(--ig-soft);
    color: #4b4b4b;
}

.image-generator-attachment {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

.image-generator-form .image-generator-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Voice chat — AI chat visual language */
#voicechat.voice-page {
    --vc-ink: #171717;
    --vc-muted: #6b6b6b;
    --vc-line: #e7e7e5;
    --vc-soft: #f5f5f3;
    --vc-panel: #ffffff;
    --vc-accent: #202020;
    min-height: 100vh;
    margin: 0;
    background: #fafaf9;
    color: var(--vc-ink);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
}

#voicechat *,
#voicechat *::before,
#voicechat *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#voicechat button {
    font: inherit;
}

#voicechat .voice-shell {
    width: min(100%, 960px);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--vc-panel);
    border-right: 1px solid var(--vc-line);
    border-left: 1px solid var(--vc-line);
}

#voicechat .voice-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 44px 1fr auto;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 76px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--vc-line);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#voicechat .voice-home {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--vc-line);
    border-radius: 12px;
    background: #fff;
    color: var(--vc-ink);
    cursor: pointer;
    -webkit-transition: background .18s ease, border-color .18s ease, -webkit-transform .18s ease;
    transition: background .18s ease, border-color .18s ease, -webkit-transform .18s ease;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, -webkit-transform .18s ease;
}

#voicechat .voice-home:hover {
    border-color: #d1d1ce;
    background: var(--vc-soft);
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
}

#voicechat .voice-home:focus-visible,
#voicechat .voice-button:focus-visible {
    outline: 3px solid rgba(23, 23, 23, .16);
    outline-offset: 2px;
}

#voicechat .voice-home svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#voicechat .voice-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 11px;
    min-width: 0;
}

#voicechat .voice-brand-mark {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--vc-accent);
    color: #fff;
}

#voicechat .voice-brand-mark svg,
#voicechat .voice-info-icon svg,
#voicechat .voice-button svg,
#voicechat .voice-notice svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#voicechat .voice-brand-mark svg {
    width: 20px;
    height: 20px;
}

#voicechat .voice-brand strong,
#voicechat .voice-brand span {
    display: block;
}

#voicechat .voice-brand strong {
    margin-bottom: 2px;
    font-size: 15px;
    line-height: 1.2;
}

#voicechat .voice-brand div > span {
    overflow: hidden;
    color: var(--vc-muted);
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#voicechat .voice-topbar-status {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--vc-line);
    border-radius: 999px;
    color: #4f4f4f;
    font-size: 12px;
    font-weight: 600;
}

#voicechat .voice-topbar-status i,
#voicechat .voice-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #28a66a;
    -webkit-box-shadow: 0 0 0 4px rgba(40, 166, 106, .12);
            box-shadow: 0 0 0 4px rgba(40, 166, 106, .12);
}

#voicechat .voice-main {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 68px 30px 56px;
}

#voicechat .voice-intro {
    max-width: 650px;
    margin: 0 auto 38px;
    text-align: center;
}

#voicechat .voice-kicker,
#voicechat .voice-eyebrow,
#voicechat .voice-info-label {
    color: var(--vc-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#voicechat .voice-intro h1 {
    margin: 12px 0 14px;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.06;
}

#voicechat .voice-intro p {
    max-width: 580px;
    margin: 0 auto;
    color: var(--vc-muted);
    font-size: 16px;
    line-height: 1.65;
}

#voicechat .voice-console {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 42px 32px 34px;
    border: 1px solid var(--vc-line);
    border-radius: 24px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfa), to(#fff));
    background: linear-gradient(180deg, #fbfbfa 0%, #fff 100%);
    -webkit-box-shadow: 0 18px 50px rgba(18, 18, 18, .06);
            box-shadow: 0 18px 50px rgba(18, 18, 18, .06);
    text-align: center;
}

#voicechat .voice-orb {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 94px;
    height: 94px;
    margin-bottom: 25px;
    border-radius: 50%;
    background: var(--vc-accent);
    color: #fff;
    -webkit-box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

#voicechat .voice-orb-ring {
    position: absolute;
    inset: -9px;
    border: 1px solid #dededb;
    border-radius: 50%;
}

#voicechat .voice-orb svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#voicechat .voice-console-copy h2 {
    margin: 8px 0 8px;
    font-size: 24px;
    letter-spacing: -.025em;
}

#voicechat .voice-console-copy p {
    margin: 0;
    color: var(--vc-muted);
    font-size: 14px;
    line-height: 1.55;
}

#voicechat .voice-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

#voicechat .voice-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 17px;
    border: 1px solid var(--vc-accent);
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: opacity .18s ease, background .18s ease, -webkit-transform .18s ease;
    transition: opacity .18s ease, background .18s ease, -webkit-transform .18s ease;
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
    transition: transform .18s ease, opacity .18s ease, background .18s ease, -webkit-transform .18s ease;
}

#voicechat .voice-button svg {
    width: 18px;
    height: 18px;
}

#voicechat .voice-button-primary {
    background: var(--vc-accent);
    color: #fff;
}

#voicechat .voice-button-secondary {
    border-color: var(--vc-line);
    background: #fff;
    color: var(--vc-ink);
}

#voicechat .voice-button:not(:disabled):hover {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

#voicechat .voice-button-primary:not(:disabled):hover {
    background: #383838;
}

#voicechat .voice-button-secondary:not(:disabled):hover {
    background: var(--vc-soft);
}

#voicechat .voice-button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

#voicechat .voice-info-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 14px 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

#voicechat .voice-info-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--vc-line);
    border-radius: 16px;
    background: #fff;
}

#voicechat .voice-info-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--vc-soft);
}

#voicechat .voice-info-icon svg {
    width: 18px;
    height: 18px;
}

#voicechat .voice-info-icon-status {
    background: #edf8f2;
}

#voicechat .voice-info-card p {
    margin: 5px 0 0;
    color: #4f4f4f;
    font-size: 13px;
    line-height: 1.45;
}

#voicechat .voice-status-card #status {
    color: var(--vc-ink);
    font-weight: 700;
}

#voicechat .voice-notice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 13px;
    margin-top: 14px;
    padding: 17px 19px;
    border: 1px solid #ece7d8;
    border-radius: 16px;
    background: #fcfaf3;
}

#voicechat .voice-notice > svg {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: #85713a;
}

#voicechat .voice-notice strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

#voicechat .voice-notice p {
    margin: 0;
    color: #746a50;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 640px) {
    #voicechat .voice-shell {
        border: 0;
    }

    #voicechat .voice-topbar {
        -ms-grid-columns: 40px 1fr;
        grid-template-columns: 40px 1fr;
        min-height: 68px;
        padding: 12px 16px;
    }

    #voicechat .voice-topbar-status {
        display: none;
    }

    #voicechat .voice-brand-mark {
        width: 36px;
        height: 36px;
    }

    #voicechat .voice-main {
        padding: 46px 18px 36px;
    }

    #voicechat .voice-intro {
        margin-bottom: 28px;
    }

    #voicechat .voice-intro h1 {
        font-size: 2.25rem;
    }

    #voicechat .voice-console {
        padding: 36px 20px 24px;
        border-radius: 20px;
    }

    #voicechat .voice-orb {
        width: 82px;
        height: 82px;
    }

    #voicechat .voice-actions {
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    #voicechat .voice-button {
        width: 100%;
    }

    #voicechat .voice-info-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    #voicechat .voice-home,
    #voicechat .voice-button {
        -webkit-transition: none;
        transition: none;
    }
}

.image-generator-attach-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid var(--ig-line);
    border-radius: 11px;
    background: #fff;
    color: #343434;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: background-color .16s ease, border-color .16s ease;
    transition: background-color .16s ease, border-color .16s ease;
}

/* Water dilution calculator — AI chat visual language */
#vodnidodatek.water-tool-page {
    --water-ink: #171717;
    --water-muted: #6b6b6b;
    --water-line: #e7e7e5;
    --water-soft: #f7f7f5;
    --water-accent: #111827;
    min-height: 100vh;
    margin: 0;
    background: #fff;
    color: var(--water-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#vodnidodatek.water-tool-page *,
#vodnidodatek.water-tool-page *::before,
#vodnidodatek.water-tool-page *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#vodnidodatek .water-tool-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 22%, rgba(247, 247, 245, .85), transparent 32rem),
        #fff;
}

#vodnidodatek .water-tool-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--water-line);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#vodnidodatek .water-tool-home {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #575757;
    cursor: pointer;
    -webkit-transition: background .16s ease, color .16s ease;
    transition: background .16s ease, color .16s ease;
}

#vodnidodatek .water-tool-home:hover {
    background: var(--water-soft);
    color: var(--water-ink);
}

#vodnidodatek .water-tool-home:focus-visible,
#vodnidodatek .water-tool-submit:focus-visible,
#vodnidodatek .water-tool-field input:focus-visible {
    outline: 3px solid rgba(17, 24, 39, .18);
    outline-offset: 2px;
}

#vodnidodatek .water-tool-home svg,
#vodnidodatek .water-tool-submit svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#vodnidodatek .water-tool-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

#vodnidodatek .water-tool-brand-mark {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--water-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

#vodnidodatek .water-tool-brand strong,
#vodnidodatek .water-tool-brand span:not(.water-tool-brand-mark) {
    display: block;
}

#vodnidodatek .water-tool-brand strong {
    font-size: .95rem;
    line-height: 1.25;
}

#vodnidodatek .water-tool-brand div > span {
    margin-top: 2px;
    color: var(--water-muted);
    font-size: .74rem;
}

#vodnidodatek .water-tool-status {
    margin-left: auto;
    padding: 7px 11px;
    border: 1px solid var(--water-line);
    border-radius: 999px;
    color: var(--water-muted);
    font-size: .75rem;
    font-weight: 600;
}

#vodnidodatek .water-tool-main {
    width: min(100% - 40px, 760px);
    margin: 0 auto;
    padding: 72px 0 48px;
}

#vodnidodatek .water-tool-intro {
    max-width: 620px;
    margin: 0 auto 34px;
    text-align: center;
}

#vodnidodatek .water-tool-kicker {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--water-soft);
    color: #555;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

#vodnidodatek .water-tool-intro h1 {
    margin: 0 0 12px;
    color: var(--water-ink);
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.08;
}

#vodnidodatek .water-tool-intro p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--water-muted);
    font-size: .98rem;
    line-height: 1.65;
}

#vodnidodatek .water-tool-card {
    padding: 30px;
    border: 1px solid var(--water-line);
    border-radius: 20px;
    background: #fff;
    -webkit-box-shadow: 0 16px 45px rgba(17, 24, 39, .065);
            box-shadow: 0 16px 45px rgba(17, 24, 39, .065);
}

#vodnidodatek .water-tool-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#vodnidodatek .water-tool-field label {
    display: block;
    margin-bottom: 8px;
    color: #343434;
    font-size: .82rem;
    font-weight: 600;
}

#vodnidodatek .water-tool-field label span {
    color: #8a8a8a;
    font-weight: 500;
}

#vodnidodatek .water-tool-input-wrap {
    position: relative;
}

#vodnidodatek .water-tool-field input {
    width: 100%;
    min-height: 50px;
    padding: 11px 70px 11px 13px;
    border: 1px solid #d8d8d5;
    border-radius: 12px;
    background: #fff;
    color: var(--water-ink);
    font: inherit;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

#vodnidodatek .water-tool-field input:focus {
    border-color: #8e8e89;
    outline: none;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 24, 39, .07);
            box-shadow: 0 0 0 3px rgba(17, 24, 39, .07);
}

#vodnidodatek .water-tool-field input::-webkit-input-placeholder { color: #aaa; }
#vodnidodatek .water-tool-field input::-moz-placeholder { color: #aaa; }
#vodnidodatek .water-tool-field input:-ms-input-placeholder { color: #aaa; }
#vodnidodatek .water-tool-field input::-ms-input-placeholder { color: #aaa; }
#vodnidodatek .water-tool-field input::placeholder { color: #aaa; }

#vodnidodatek .water-tool-unit {
    position: absolute;
    top: 50%;
    right: 13px;
    color: #777;
    font-size: .76rem;
    font-weight: 600;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

#vodnidodatek .water-tool-result {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--water-line);
    border-radius: 15px;
    background: var(--water-soft);
}

#vodnidodatek .water-tool-result-label {
    display: block;
    margin-bottom: 4px;
    font-size: .88rem;
    font-weight: 700;
}

#vodnidodatek .water-tool-result small {
    color: var(--water-muted);
    font-size: .76rem;
}

#vodnidodatek .water-tool-result p {
    margin: 0;
    color: var(--water-accent);
    font-size: clamp(1.65rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: -.035em;
    white-space: nowrap;
}

#vodnidodatek .message-box {
    margin: 16px 0 0;
}

#vodnidodatek .water-tool-submit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
    padding: 12px 18px;
    border: 1px solid var(--water-accent);
    border-radius: 12px;
    background: var(--water-accent);
    color: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

#vodnidodatek .water-tool-submit:hover {
    border-color: #273244;
    background: #273244;
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

#vodnidodatek .water-tool-submit:active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

#vodnidodatek .water-tool-submit svg {
    width: 18px;
    height: 18px;
}

#vodnidodatek .water-tool-note {
    max-width: 590px;
    margin: 22px auto 0;
    color: #858585;
    font-size: .78rem;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 680px) {
    #vodnidodatek .water-tool-topbar {
        height: 62px;
        padding: 0 14px;
    }

    #vodnidodatek .water-tool-status {
        display: none;
    }

    #vodnidodatek .water-tool-main {
        width: min(100% - 28px, 760px);
        padding: 46px 0 32px;
    }

    #vodnidodatek .water-tool-intro {
        margin-bottom: 26px;
    }

    #vodnidodatek .water-tool-intro h1 {
        font-size: 2rem;
    }

    #vodnidodatek .water-tool-card {
        padding: 20px;
        border-radius: 17px;
    }

    #vodnidodatek .water-tool-fields {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #vodnidodatek .water-tool-result {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 12px;
    }
}

/* Unit converter — AI chat visual language */
#unitconverter {
    --uc-ink: #171717;
    --uc-muted: #6b6b6b;
    --uc-line: #e7e7e5;
    --uc-soft: #f7f7f5;
    --uc-accent: #111827;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #fff;
    color: var(--uc-ink);
    font-family: Inter, system-ui, sans-serif;
    display: block;
}

#unitconverter *,
#unitconverter *::before,
#unitconverter *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#unitconverter .converter-shell {
    min-height: 100vh;
    background: #fff;
}

#unitconverter .converter-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 68px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    padding: 0 24px;
    border-bottom: 1px solid var(--uc-line);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#unitconverter .converter-home,
#unitconverter .converter-swap,
#unitconverter #copy-button {
    border: 0;
    font: inherit;
    cursor: pointer;
}

#unitconverter .converter-home {
    width: 40px;
    height: 40px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 10px;
    color: #575757;
    background: transparent;
}

#unitconverter .converter-home:hover {
    background: var(--uc-soft);
}

#unitconverter .converter-home svg,
#unitconverter .converter-swap svg,
#unitconverter #copy-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#unitconverter .converter-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    min-width: 0;
}

#unitconverter .converter-brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--uc-accent);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

#unitconverter .converter-brand strong,
#unitconverter .converter-brand span {
    display: block;
}

#unitconverter .converter-brand strong {
    font-size: 15px;
    line-height: 1.25;
}

#unitconverter .converter-brand div > span {
    margin-top: 2px;
    color: var(--uc-muted);
    font-size: 12px;
}

#unitconverter .converter-status {
    margin-left: auto;
    padding: 7px 11px;
    border: 1px solid var(--uc-line);
    border-radius: 999px;
    color: var(--uc-muted);
    font-size: 12px;
    font-weight: 600;
}

#unitconverter .converter-main {
    width: min(100% - 40px, 920px);
    margin: 0 auto;
    padding: 64px 0 80px;
}

#unitconverter .converter-intro {
    max-width: 640px;
    margin: 0 auto 34px;
    text-align: center;
}

#unitconverter .converter-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--uc-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#unitconverter .converter-intro h1 {
    margin: 0;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 700;
}

#unitconverter .converter-intro p {
    margin: 15px 0 0;
    color: var(--uc-muted);
    font-size: 16px;
    line-height: 1.6;
}

#unitconverter .converter-panel {
    padding: 28px;
    border: 1px solid var(--uc-line);
    border-radius: 24px;
    background: #fff;
    -webkit-box-shadow: 0 18px 55px rgba(17, 24, 39, .07);
            box-shadow: 0 18px 55px rgba(17, 24, 39, .07);
}

#unitconverter .converter-category {
    max-width: 360px;
    margin-bottom: 24px;
}

#unitconverter label {
    display: block;
    margin: 0 0 8px;
    color: #4f4f4f;
    font-size: 13px;
    font-weight: 600;
}

#unitconverter input,
#unitconverter select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #d9d9d6;
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: var(--uc-ink);
    font: inherit;
    -webkit-transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

#unitconverter input:focus,
#unitconverter select:focus {
    border-color: #9b9b96;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
            box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
}

#unitconverter .converter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    gap: 16px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#unitconverter .converter-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--uc-line);
    border-radius: 18px;
    background: var(--uc-soft);
}

#unitconverter .converter-card-heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 700;
}

#unitconverter .converter-step {
    color: #8a8a85;
    font-size: 11px;
    letter-spacing: .08em;
}

#unitconverter .converter-card input,
#unitconverter .converter-card select {
    margin-bottom: 18px;
}

#unitconverter .converter-card select:last-child {
    margin-bottom: 0;
}

#unitconverter .converter-swap {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--uc-line);
    border-radius: 50%;
    background: #fff;
    color: var(--uc-ink);
    -webkit-transition: background .16s ease, -webkit-transform .2s ease;
    transition: background .16s ease, -webkit-transform .2s ease;
    transition: transform .2s ease, background .16s ease;
    transition: transform .2s ease, background .16s ease, -webkit-transform .2s ease;
}

#unitconverter .converter-swap:hover {
    background: var(--uc-soft);
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

#unitconverter .converter-result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 18px;
}

#unitconverter .converter-result-row input {
    margin: 0;
    border-radius: 12px 0 0 12px;
    background: #fff;
    font-weight: 700;
}

#unitconverter #copy-button {
    min-height: 48px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 0 12px 12px 0;
    background: var(--uc-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

#unitconverter #copy-button:hover {
    background: #2b3443;
}

#unitconverter .converter-formula {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 13px;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid var(--uc-line);
    border-radius: 14px;
}

#unitconverter .converter-formula-icon {
    width: 30px;
    height: 30px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--uc-soft);
    font-weight: 700;
}

#unitconverter .converter-formula h2 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
}

#unitconverter #conversion-formula {
    color: var(--uc-muted);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 720px) {
    #unitconverter .converter-main {
        width: min(100% - 28px, 920px);
        padding: 42px 0 48px;
    }

    #unitconverter .converter-panel {
        padding: 18px;
        border-radius: 20px;
    }

    #unitconverter .converter-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #unitconverter .converter-swap {
        justify-self: center;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }

    #unitconverter .converter-swap:hover {
        -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
    }
}

@media (max-width: 480px) {
    #unitconverter .converter-topbar {
        padding: 0 14px;
    }

    #unitconverter .converter-status,
    #unitconverter .converter-brand div > span,
    #unitconverter #copy-button span {
        display: none;
    }

    #unitconverter .converter-intro h1 {
        font-size: 34px;
    }

    #unitconverter .converter-intro p {
        font-size: 15px;
    }

    #unitconverter .converter-card {
        padding: 18px;
    }
}

.image-generator-attach-button:hover {
    border-color: #d2d2ce;
    background: var(--ig-soft);
}

.image-generator-file-input:focus + .image-generator-attach-button {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

.image-generator-attach-button svg,
.image-generator-advanced-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.image-generator-attachment-hint {
    color: var(--ig-muted);
    font-size: .78rem;
}

.image-generator-mode-notice {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin-top: 2px;
    padding: 10px 12px;
    border: 1px solid var(--ig-line);
    border-radius: 10px;
    background: var(--ig-soft);
    color: #4b4b4b;
    font-size: .82rem;
}

.image-generator-advanced {
    border: 1px solid var(--ig-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.image-generator-advanced[open] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 0 18px 18px;
    background: #fcfcfb;
}

.image-generator-advanced-toggle {
    grid-column: 1 / -1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 16px;
    min-height: 50px;
    margin: 0 -18px;
    padding: 0 18px;
    color: #343434;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.image-generator-advanced:not([open]) .image-generator-advanced-toggle {
    margin: 0;
}

.image-generator-advanced-toggle::-webkit-details-marker { display: none; }

.image-generator-advanced-toggle > span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 9px;
}

.image-generator-advanced-toggle:hover { background: var(--ig-soft); }

.image-generator-chevron {
    width: 18px !important;
    height: 18px !important;
    -webkit-transition: -webkit-transform .18s ease;
    transition: -webkit-transform .18s ease;
    transition: transform .18s ease;
    transition: transform .18s ease, -webkit-transform .18s ease;
}

.image-generator-advanced[open] .image-generator-chevron {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}

.image-generator-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.image-generator-actions button {
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid var(--ig-line);
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 600;
    -webkit-transition: background-color .16s ease, -webkit-transform .16s ease;
    transition: background-color .16s ease, -webkit-transform .16s ease;
    transition: transform .16s ease, background-color .16s ease;
    transition: transform .16s ease, background-color .16s ease, -webkit-transform .16s ease;
}

.image-generator-actions #submitBtn {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.image-generator-actions #submitBtn:hover { background: #242b38; }
.image-generator-actions #resetBtn { background: #fff; color: #343434; }
.image-generator-actions #resetBtn:hover { background: var(--ig-soft); }
.image-generator-actions button:active { -webkit-transform: translateY(1px); transform: translateY(1px); }

.image-generator-results {
    margin-top: 32px;
    padding: 24px;
    border: 1px solid var(--ig-line);
    border-radius: 20px;
    background: var(--ig-soft);
}

/* AI image generator composer */
.image-generator-composer-wrap {
    width: 100%;
}

.image-generator-composer {
    padding: 10px;
    border: 1px solid #d8d8d5;
    border-radius: 18px;
    background: #fff;
    -webkit-box-shadow: 0 8px 28px rgba(17, 24, 39, .07);
            box-shadow: 0 8px 28px rgba(17, 24, 39, .07);
    -webkit-transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

.image-generator-composer:focus-within {
    border-color: #a8a8a4;
    -webkit-box-shadow: 0 8px 30px rgba(17, 24, 39, .09), 0 0 0 3px rgba(17, 24, 39, .05);
            box-shadow: 0 8px 30px rgba(17, 24, 39, .09), 0 0 0 3px rgba(17, 24, 39, .05);
}

.image-generator-form .image-generator-composer textarea {
    display: block;
    width: 100%;
    min-height: 92px;
    max-height: 240px;
    padding: 8px 8px 10px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    line-height: 1.55;
    resize: vertical;
}

.image-generator-form .image-generator-composer textarea:focus {
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.image-generator-composer-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    min-height: 38px;
}

.image-generator-composer .image-generator-attach-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    min-height: 36px;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 10px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
}

.image-generator-composer .image-generator-attach-button:hover {
    background: var(--ig-soft);
}

.image-generator-inline-status {
    margin-left: auto;
    color: var(--ig-muted);
    font-size: 12px;
}

.image-generator-send {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 36px;
            flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    cursor: pointer;
    -webkit-transition: background-color .16s ease, -webkit-transform .16s ease;
    transition: background-color .16s ease, -webkit-transform .16s ease;
    transition: background-color .16s ease, transform .16s ease;
    transition: background-color .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

.image-generator-send:hover { background: #303745; }
.image-generator-send:active { -webkit-transform: scale(.96); transform: scale(.96); }
.image-generator-send:focus-visible { outline: 2px solid #111827; outline-offset: 3px; }
.image-generator-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.image-generator-stop span { width: 11px; height: 11px; border-radius: 2px; background: #fff; }

.image-generator-attachment-preview {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    margin: 1px 2px 7px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--ig-soft);
}

.image-generator-attachment-preview > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.image-generator-file-icon { font-size: 19px; }
.image-generator-attachment-preview strong { overflow: hidden; color: #343434; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.image-generator-attachment-preview small { color: var(--ig-muted); font-size: 10px; }
.image-generator-attachment-preview button { margin-left: auto; padding: 2px 5px; border: 0; background: transparent; color: #555; font-size: 21px; line-height: 1; cursor: pointer; }

.image-generator-composer-notes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    padding: 7px 5px 0;
    color: #888;
    font-size: 10px;
    line-height: 1.45;
}

.image-generator-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.image-generator-results[hidden],
.image-generator-send[hidden],
.image-generator-attachment-preview[hidden] {
    display: none !important;
}

.image-generator-results {
    scroll-margin-top: 88px;
    margin: 0 0 28px;
}

@media (max-width: 640px) {
    .image-generator-composer { border-radius: 16px; }
    .image-generator-form .image-generator-composer textarea { min-height: 105px; }
    .image-generator-composer-notes { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2px; }
    .image-generator-composer .image-generator-attach-button span { display: none; }
    .image-generator-composer .image-generator-attach-button { width: 36px; padding: 7px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .image-generator-inline-status { font-size: 11px; }
}

.image-generator-results h2,
.image-generator-results h3 { color: var(--ig-ink); }
.image-generator-results p { color: var(--ig-muted); }

@media (max-width: 640px) {
    .image-generator-topbar { min-height: 62px; padding: 0 14px; }
    .image-generator-topbar h1 { font-size: .94rem; text-align: center; }
    .image-generator-topbar button:last-child { display: none !important; }
    .image-generator-main { width: min(100% - 24px, 860px); padding: 38px 0 48px; }
    .image-generator-intro { margin-bottom: 24px; }
    .image-generator-form { gap: 19px; padding: 18px; border-radius: 16px; }
    .image-generator-attachment-hint { -ms-flex-preferred-size: 100%; flex-basis: 100%; }
    .image-generator-advanced[open] { grid-template-columns: 1fr; gap: 16px; }
    .image-generator-advanced-toggle { grid-column: 1; }
    .image-generator-actions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
    .image-generator-actions button { width: 100%; }
    .image-generator-results { margin-top: 24px; padding: 18px; border-radius: 16px; }
}

/* Password generator — AI chat visual language */
#passwordgenerator {
    --pg-ink: #171717;
    --pg-muted: #6b6b6b;
    --pg-line: #e7e7e5;
    --pg-soft: #f7f7f5;
    --pg-accent: #111827;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: block;
    background: #fff;
    color: var(--pg-ink);
    font-family: Inter, system-ui, sans-serif;
}

#passwordgenerator *,
#passwordgenerator *::before,
#passwordgenerator *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#passwordgenerator .password-app-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 12%, rgba(17, 24, 39, .035), transparent 30rem),
        #fff;
}

#passwordgenerator .password-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--pg-line);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#passwordgenerator .password-home-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #575757;
    cursor: pointer;
    -webkit-transition: background-color .16s ease;
    transition: background-color .16s ease;
}

#passwordgenerator .password-home-link:hover { background: var(--pg-soft); }
#passwordgenerator .password-home-link:focus-visible,
#passwordgenerator button:focus-visible,
#passwordgenerator input:focus-visible {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

#passwordgenerator .password-home-link svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#passwordgenerator .password-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

#passwordgenerator .password-brand-mark,
#passwordgenerator .password-welcome-mark {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: var(--pg-accent);
    color: #fff;
    font-weight: 700;
}

#passwordgenerator .password-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 11px;
    letter-spacing: .04em;
}

#passwordgenerator .password-brand div { display: grid; line-height: 1.15; }
#passwordgenerator .password-brand strong { font-size: 14px; font-weight: 700; }
#passwordgenerator .password-brand span:last-child { margin-top: 3px; color: var(--pg-muted); font-size: 11px; }

#passwordgenerator .password-status {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 8px 11px;
    border: 1px solid var(--pg-line);
    border-radius: 10px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
}

#passwordgenerator .password-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22a06b;
    -webkit-box-shadow: 0 0 0 3px rgba(34, 160, 107, .12);
            box-shadow: 0 0 0 3px rgba(34, 160, 107, .12);
}

#passwordgenerator .password-main {
    width: min(100% - 32px, 680px);
    margin: 0 auto;
    padding: 56px 0 48px;
}

#passwordgenerator .password-welcome {
    margin-bottom: 28px;
    text-align: center;
}

#passwordgenerator .password-welcome-mark {
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 17px;
    -webkit-box-shadow: 0 10px 28px rgba(17, 24, 39, .14);
            box-shadow: 0 10px 28px rgba(17, 24, 39, .14);
}

#passwordgenerator .password-welcome-mark svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#passwordgenerator .password-welcome h1 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

#passwordgenerator .password-welcome p {
    max-width: 520px;
    margin: 10px auto 0;
    color: var(--pg-muted);
    font-size: 14px;
    line-height: 1.6;
}

#passwordgenerator .password-card {
    border: 1px solid var(--pg-line);
    border-radius: 20px;
    background: #fff;
    -webkit-box-shadow: 0 18px 50px rgba(17, 24, 39, .07);
            box-shadow: 0 18px 50px rgba(17, 24, 39, .07);
    overflow: hidden;
}

#passwordgenerator .password-card-section,
#passwordgenerator .password-result-section { padding: 25px 28px; }
#passwordgenerator .password-card-section + .password-card-section,
#passwordgenerator .password-result-section { border-top: 1px solid var(--pg-line); }
#passwordgenerator .password-result-section { background: #fcfcfb; }

#passwordgenerator .password-section-heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

#passwordgenerator .password-eyebrow {
    display: block;
    color: #343434;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}

#passwordgenerator .password-section-heading p {
    margin: 5px 0 0;
    color: var(--pg-muted);
    font-size: 12px;
}

#passwordgenerator .password-length-value {
    min-width: 48px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--pg-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

#passwordgenerator .password-range {
    width: 100%;
    height: 5px;
    margin: 5px 0;
    border-radius: 999px;
    background: #dededb;
    accent-color: var(--pg-accent);
    cursor: pointer;
}

#passwordgenerator .password-range-labels {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 8px;
    color: #929292;
    font-size: 10px;
}

#passwordgenerator .password-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

#passwordgenerator .password-option {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 12px 13px;
    border: 1px solid var(--pg-line);
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    -webkit-transition: border-color .16s ease, background-color .16s ease;
    transition: border-color .16s ease, background-color .16s ease;
}

#passwordgenerator .password-option:hover { border-color: #cfcfcb; background: var(--pg-soft); }
#passwordgenerator .password-option > span:first-child { display: grid; min-width: 0; }
#passwordgenerator .password-option strong { color: #343434; font-size: 12px; font-weight: 650; }
#passwordgenerator .password-option small { margin-top: 3px; color: var(--pg-muted); font-size: 10px; }
#passwordgenerator .password-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }

#passwordgenerator .password-switch {
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 36px;
            flex: 0 0 36px;
    width: 36px;
    height: 21px;
    border-radius: 999px;
    background: #d7d7d3;
    -webkit-transition: background-color .18s ease;
    transition: background-color .18s ease;
}

#passwordgenerator .password-switch::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    content: "";
    -webkit-transition: -webkit-transform .18s ease;
    transition: -webkit-transform .18s ease;
    transition: transform .18s ease;
    transition: transform .18s ease, -webkit-transform .18s ease;
}

#passwordgenerator .password-option input:checked + .password-switch { background: var(--pg-accent); }
#passwordgenerator .password-option input:checked + .password-switch::after { -webkit-transform: translateX(15px); transform: translateX(15px); }
#passwordgenerator .password-option input:focus-visible + .password-switch { outline: 2px solid var(--pg-accent); outline-offset: 2px; }

#passwordgenerator .password-output-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 14px;
    border: 1px solid #dcdcd8;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

#passwordgenerator .password-output-group input {
    min-width: 0;
    height: 54px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--pg-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 15px;
    letter-spacing: .025em;
}

#passwordgenerator .password-output-group input:focus { outline: 0; }
#passwordgenerator .password-output-group button {
    min-width: 92px;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid var(--pg-line);
    background: #fff;
    color: #454545;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
#passwordgenerator .password-output-group button:hover { background: var(--pg-soft); }

#passwordgenerator .password-generate-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin-top: 14px;
    padding: 12px 18px;
    border: 0;
    border-radius: 13px;
    background: var(--pg-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: background-color .16s ease, -webkit-transform .16s ease;
    transition: background-color .16s ease, -webkit-transform .16s ease;
    transition: background-color .16s ease, transform .16s ease;
    transition: background-color .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

#passwordgenerator .password-generate-button:hover { background: #263044; }
#passwordgenerator .password-generate-button:active { -webkit-transform: translateY(1px); transform: translateY(1px); }
#passwordgenerator .password-generate-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#passwordgenerator .message-box.error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-color: #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
}

#passwordgenerator .password-privacy-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 7px;
    margin: 16px 0 0;
    color: #8a8a8a;
    font-size: 10px;
}

#passwordgenerator .password-privacy-note svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 640px) {
    #passwordgenerator .password-topbar { height: 62px; padding: 0 14px; }
    #passwordgenerator .password-status { padding: 8px; font-size: 0; }
    #passwordgenerator .password-main { width: min(100% - 24px, 680px); padding: 36px 0 36px; }
    #passwordgenerator .password-welcome { margin-bottom: 22px; }
    #passwordgenerator .password-welcome-mark { width: 48px; height: 48px; margin-bottom: 15px; border-radius: 15px; }
    #passwordgenerator .password-welcome p { font-size: 13px; }
    #passwordgenerator .password-card { border-radius: 17px; }
    #passwordgenerator .password-card-section,
    #passwordgenerator .password-result-section { padding: 21px 18px; }
    #passwordgenerator .password-options { grid-template-columns: 1fr; }
    #passwordgenerator .password-output-group { grid-template-columns: minmax(0, 1fr) 74px; }
    #passwordgenerator .password-output-group button { min-width: 74px; padding: 0 10px; }
    #passwordgenerator .password-output-group input { padding: 0 12px; font-size: 13px; }
}

/* Transcription — AI chat visual language */
#transcription.transcription-page {
    --tr-ink: #171717;
    --tr-muted: #6b6b6b;
    --tr-line: #e7e7e5;
    --tr-soft: #f7f7f5;
    min-height: 100vh;
    margin: 0;
    background: #fff;
    color: var(--tr-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#transcription .transcription-shell,
#transcription .transcription-surface {
    width: 100%;
    min-height: 100vh;
}

#transcription .transcription-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--tr-line);
    border-radius: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--tr-ink);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#transcription .transcription-topbar h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.015em;
    text-align: left;
}

#transcription .transcription-topbar h1::after {
    display: block;
    margin-top: 2px;
    color: var(--tr-muted);
    content: "AI pretvorba zvoka";
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

#transcription .transcription-topbar button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #575757;
    -webkit-box-shadow: none;
            box-shadow: none;
}

#transcription .transcription-topbar button:hover {
    background: var(--tr-soft);
    color: var(--tr-ink);
}

#transcription .transcription-topbar button:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

#transcription .transcription-main {
    width: min(100% - 32px, 820px);
    margin: 0 auto;
    padding: 54px 0 64px;
}

#transcription .transcription-welcome {
    margin: 0 auto 28px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

#transcription .transcription-welcome::before {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: #111827;
    color: #fff;
    content: "AI";
    font-size: 15px;
    font-weight: 700;
    -webkit-box-shadow: 0 10px 28px rgba(17, 24, 39, .14);
            box-shadow: 0 10px 28px rgba(17, 24, 39, .14);
}

#transcription .transcription-welcome h2 {
    margin: 0;
    color: var(--tr-ink);
    font-size: clamp(1.75rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

#transcription .transcription-welcome p {
    max-width: 630px;
    margin: 10px auto 0;
    color: var(--tr-muted);
    font-size: 14px;
    line-height: 1.65;
}

#transcription .transcription-card {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--tr-line);
    border-radius: 20px;
    background: #fff;
    -webkit-box-shadow: 0 18px 50px rgba(17, 24, 39, .07);
            box-shadow: 0 18px 50px rgba(17, 24, 39, .07);
}

#transcription .transcription-form {
    display: grid;
    gap: 20px;
}

#transcription .transcription-form > div {
    margin: 0;
}

#transcription .transcription-form label,
#transcription .transcription-output label {
    display: block;
    margin-bottom: 7px;
    color: #3f3f3f;
    font-size: 12px;
    font-weight: 600;
}

#transcription .transcription-form input,
#transcription .transcription-form select,
#transcription .transcription-output select,
#transcription .transcript-editor {
    width: 100%;
    border: 1px solid var(--tr-line);
    border-radius: 12px;
    background: #fff;
    color: var(--tr-ink);
    -webkit-box-shadow: none;
            box-shadow: none;
}

#transcription .transcription-form input,
#transcription .transcription-form select,
#transcription .transcription-output select {
    min-height: 46px;
    padding: 10px 13px;
}

#transcription .transcription-form input:focus,
#transcription .transcription-form select:focus,
#transcription .transcription-output select:focus,
#transcription .transcript-editor:focus {
    border-color: #a7a7a2;
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
            box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
}

#transcription .transcription-form input[type="file"] {
    min-height: 56px;
    padding: 7px;
    background: var(--tr-soft);
}

#transcription .transcription-form input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    color: #343434;
    font-weight: 600;
    cursor: pointer;
}

#transcription .transcription-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    color: #343434;
    font-weight: 600;
    cursor: pointer;
}

#transcription #submitBtn,
#transcription #runTranscriptActionBtn {
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    font-weight: 600;
    -webkit-box-shadow: none;
            box-shadow: none;
}

/* Text case changer — shared AI Chat / Unit Converter visual language */
#textcasechanger.case-page {
    --cc-ink: #171717;
    --cc-muted: #6b6b6b;
    --cc-line: #e7e7e5;
    --cc-soft: #f7f7f5;
    min-height: 100vh;
    margin: 0;
    background: #fff;
    color: var(--cc-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#textcasechanger *,
#textcasechanger *::before,
#textcasechanger *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#textcasechanger .case-skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 100;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--cc-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    -webkit-transform: translate(-50%, -150%);
            transform: translate(-50%, -150%);
}

#textcasechanger .case-skip-link:focus {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}

#textcasechanger .case-shell {
    min-height: 100vh;
}

#textcasechanger .case-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 42px 1fr auto;
    grid-template-columns: 42px 1fr auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--cc-line);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#textcasechanger .case-home,
#textcasechanger .case-reset,
#textcasechanger .case-action,
#textcasechanger .case-copy {
    border: 0;
    font: inherit;
    cursor: pointer;
}

#textcasechanger .case-home {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    background: #fff;
    color: var(--cc-ink);
    -webkit-transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

#textcasechanger .case-home:hover {
    border-color: #d1d1ce;
    background: var(--cc-soft);
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
}

#textcasechanger .case-home svg,
#textcasechanger .case-reset svg,
#textcasechanger .case-copy svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#textcasechanger .case-home svg {
    width: 20px;
    height: 20px;
}

#textcasechanger .case-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 11px;
    min-width: 0;
}

#textcasechanger .case-brand-mark {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--cc-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.04em;
}

#textcasechanger .case-brand strong,
#textcasechanger .case-brand div > span {
    display: block;
}

#textcasechanger .case-brand strong {
    margin-bottom: 2px;
    font-size: 15px;
    line-height: 1.2;
}

#textcasechanger .case-brand div > span {
    color: var(--cc-muted);
    font-size: 12px;
    line-height: 1.25;
}

#textcasechanger .case-status,
#textcasechanger .case-ready {
    color: var(--cc-muted);
    font-size: 12px;
    font-weight: 600;
}

#textcasechanger .case-status {
    padding: 7px 11px;
    border: 1px solid var(--cc-line);
    border-radius: 999px;
}

#textcasechanger .case-main {
    width: min(100% - 40px, 1040px);
    margin: 0 auto;
    padding: 64px 0 80px;
}

#textcasechanger .case-intro {
    max-width: 680px;
    margin: 0 auto 34px;
    text-align: center;
}

#textcasechanger .case-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--cc-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#textcasechanger .case-intro h1 {
    margin: 0;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}

#textcasechanger .case-intro p {
    margin: 15px 0 0;
    color: var(--cc-muted);
    font-size: 16px;
    line-height: 1.6;
}

#textcasechanger .case-workspace {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#textcasechanger .case-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--cc-line);
    border-radius: 22px;
    background: #fff;
    -webkit-box-shadow: 0 18px 55px rgba(17, 24, 39, .06);
            box-shadow: 0 18px 55px rgba(17, 24, 39, .06);
}

#textcasechanger .case-card-result {
    background: #fcfcfb;
}

#textcasechanger .case-card-heading,
#textcasechanger .case-card-heading > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#textcasechanger .case-card-heading {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

#textcasechanger .case-card-heading > div {
    gap: 10px;
}

#textcasechanger .case-step {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--cc-soft);
    color: var(--cc-muted);
    font-size: 11px;
    font-weight: 700;
}

#textcasechanger .case-card h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

#textcasechanger .case-reset {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    color: #777;
}

#textcasechanger .case-reset:hover {
    background: var(--cc-soft);
    color: var(--cc-ink);
}

#textcasechanger .case-reset svg {
    width: 18px;
    height: 18px;
}

#textcasechanger label {
    display: block;
    margin-bottom: 8px;
    color: #4f4f4f;
    font-size: 13px;
    font-weight: 600;
}

#textcasechanger textarea {
    display: block;
    width: 100%;
    min-height: 220px;
    padding: 16px;
    resize: vertical;
    border: 1px solid #d9d9d6;
    border-radius: 14px;
    outline: none;
    background: #fff;
    color: var(--cc-ink);
    font: 400 15px/1.6 Inter, system-ui, sans-serif;
    -webkit-transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

#textcasechanger textarea:focus {
    border-color: #8f8f8b;
    -webkit-box-shadow: 0 0 0 3px rgba(23, 23, 23, .08);
            box-shadow: 0 0 0 3px rgba(23, 23, 23, .08);
}

#textcasechanger #output_text {
    background: var(--cc-soft);
}

#textcasechanger textarea::-webkit-input-placeholder { color: #aaa; }
#textcasechanger textarea::-moz-placeholder { color: #aaa; }
#textcasechanger textarea:-ms-input-placeholder { color: #aaa; }
#textcasechanger textarea::-ms-input-placeholder { color: #aaa; }
#textcasechanger textarea::placeholder { color: #aaa; }

#textcasechanger .case-actions {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: repeat(3, minmax(0, 1fr));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

#textcasechanger .case-action,
#textcasechanger .case-copy {
    min-height: 46px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    -webkit-transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

#textcasechanger .case-action {
    padding: 9px 8px;
    border: 1px solid var(--cc-line);
    background: #fff;
    color: var(--cc-ink);
}

#textcasechanger .case-action span {
    display: block;
    margin-bottom: 2px;
    color: var(--cc-muted);
    font-size: 10px;
}

#textcasechanger .case-action-primary,
#textcasechanger .case-copy {
    background: var(--cc-ink);
    color: #fff;
}

#textcasechanger .case-action-primary {
    border-color: var(--cc-ink);
}

#textcasechanger .case-action-primary span { color: #cfcfcf; }

#textcasechanger .case-action:hover,
#textcasechanger .case-copy:hover {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

#textcasechanger .case-action:not(.case-action-primary):hover {
    border-color: #c9c9c5;
    background: var(--cc-soft);
}

#textcasechanger .case-copy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 0 18px;
}

#textcasechanger .case-copy:hover,
#textcasechanger .case-action-primary:hover { background: #303030; }

#textcasechanger .case-copy svg {
    width: 17px;
    height: 17px;
}

#textcasechanger .case-message {
    width: min(100%, 520px);
    margin: 16px auto 0;
    padding: 12px 16px;
    border: 1px solid #dce8df;
    border-radius: 12px;
    background: #f5faf6;
    color: #287443;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

#textcasechanger button:focus-visible,
#textcasechanger textarea:focus-visible {
    outline: 3px solid rgba(23, 23, 23, .15);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    #textcasechanger .case-main {
        width: min(100% - 32px, 620px);
        padding: 46px 0 56px;
    }

    #textcasechanger .case-workspace {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    #textcasechanger .case-topbar {
        -ms-grid-columns: 40px 1fr;
        grid-template-columns: 40px 1fr;
        padding: 0 16px;
    }

    #textcasechanger .case-status,
    #textcasechanger .case-brand div > span,
    #textcasechanger .case-ready {
        display: none;
    }

    #textcasechanger .case-intro h1 { font-size: 34px; }
    #textcasechanger .case-intro p { font-size: 15px; }
    #textcasechanger .case-card { padding: 19px; border-radius: 18px; }
    #textcasechanger .case-actions { -ms-grid-columns: 1fr; grid-template-columns: 1fr; }
    #textcasechanger .case-action span { display: inline; margin: 0 7px 0 0; }
    #textcasechanger textarea { min-height: 190px; }
}

#transcription #submitBtn:hover,
#transcription #runTranscriptActionBtn:hover {
    background: #273244;
}

#transcription .transcription-player {
    text-align: center;
}

#transcription .transcription-player h2,
#transcription .transcription-output h2,
#transcription .transcription-ai-result h2 {
    margin: 0 0 14px;
    color: var(--tr-ink);
    font-size: 16px;
    font-weight: 700;
}

#transcription .transcription-results {
    display: grid;
    gap: 18px;
}

#transcription .transcript-editor {
    min-height: 260px;
    padding: 18px 48px 18px 18px;
    line-height: 1.65;
    resize: vertical;
}

#transcription #copyTranscriptBtn,
#transcription #copyAiResultBtn,
#transcription #newUploadBtn {
    border: 1px solid var(--tr-line);
    background: var(--tr-soft);
    color: #555;
    -webkit-box-shadow: none;
            box-shadow: none;
}

#transcription #copyTranscriptBtn:hover,
#transcription #copyAiResultBtn:hover,
#transcription #newUploadBtn:hover {
    background: #ededeb;
    color: var(--tr-ink);
}

#transcription .transcription-ai-result {
    background: #fcfcfb;
}

#transcription .transcription-ai-result p {
    color: #333;
    line-height: 1.7;
}

@media (max-width: 640px) {
    #transcription .transcription-topbar {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        min-height: 62px;
        padding: 0 14px;
    }

    #transcription .transcription-topbar h1 {
        font-size: 15px;
        text-align: center;
    }

    #transcription .transcription-topbar h1::after { display: none; }
    #transcription .transcription-main { width: min(100% - 24px, 820px); padding: 36px 0; }
    #transcription .transcription-welcome { margin-bottom: 22px; }
    #transcription .transcription-welcome::before { width: 50px; height: 50px; margin-bottom: 15px; border-radius: 15px; }
    #transcription .transcription-card { padding: 19px; border-radius: 17px; }
    #transcription .transcript-editor { min-height: 220px; }
}

/* Water addition calculator — AI chat visual language */
#vodnidodatek {
    --wd-ink: #171717;
    --wd-muted: #6b6b6b;
    --wd-line: #e7e7e5;
    --wd-soft: #f7f7f5;
    --wd-accent: #111827;
    display: block;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #fff;
    color: var(--wd-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#vodnidodatek *,
#vodnidodatek *::before,
#vodnidodatek *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

#vodnidodatek .water-calculator-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    overflow: visible;
}

#vodnidodatek .header-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--wd-line);
    border-radius: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--wd-ink);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#vodnidodatek .header-bar h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-align: left;
}

#vodnidodatek .header-bar h2::after {
    display: block;
    margin-top: 3px;
    color: var(--wd-muted);
    content: "Kalkulator redčenja destilata";
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

#vodnidodatek .header-bar button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8px;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #575757;
    font: inherit;
    cursor: pointer;
}

#vodnidodatek .header-bar button:hover { background: var(--wd-soft); }
#vodnidodatek .header-bar button:focus-visible {
    outline: 2px solid var(--wd-accent);
    outline-offset: 2px;
    -webkit-box-shadow: none;
            box-shadow: none;
}

#vodnidodatek .water-calculator-content {
    width: min(100% - 32px, 620px);
    margin: 0 auto;
    padding: 72px 0 80px;
}

#vodnidodatek .water-calculator-content > div { margin-bottom: 22px; }
#vodnidodatek .water-calculator-content label {
    display: block;
    margin: 0 0 8px;
    color: #343434;
    font-size: 13px;
    font-weight: 600;
}

#vodnidodatek .water-calculator-content input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--wd-line);
    border-radius: 12px;
    background: #fff;
    color: var(--wd-ink);
    font: inherit;
    -webkit-box-shadow: 0 1px 2px rgba(17, 24, 39, .03);
            box-shadow: 0 1px 2px rgba(17, 24, 39, .03);
    -webkit-transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

#vodnidodatek .water-calculator-content input:focus {
    border-color: #9a9a96;
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
            box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
}

#vodnidodatek .water-calculator-content h3 {
    margin: 34px 0 8px;
    color: var(--wd-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

#vodnidodatek #water_needed_display {
    margin: 0 0 28px;
    padding: 22px;
    border: 1px solid var(--wd-line);
    border-radius: 16px;
    background: var(--wd-soft);
    color: var(--wd-ink);
    font-size: clamp(28px, 6vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.035em;
    text-align: center;
}

#vodnidodatek #calculate_button {
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border: 1px solid var(--wd-accent);
    border-radius: 12px;
    background: var(--wd-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    -webkit-box-shadow: 0 8px 20px rgba(17, 24, 39, .12);
            box-shadow: 0 8px 20px rgba(17, 24, 39, .12);
    -webkit-transition: background-color .16s ease, -webkit-transform .16s ease;
    transition: background-color .16s ease, -webkit-transform .16s ease;
    transition: transform .16s ease, background-color .16s ease;
    transition: transform .16s ease, background-color .16s ease, -webkit-transform .16s ease;
}

#vodnidodatek #calculate_button:hover {
    background: #252d3a;
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

@media (max-width: 640px) {
    #vodnidodatek .header-bar { min-height: 62px; padding: 0 14px; }
    #vodnidodatek .header-bar h2 { margin: 0; font-size: 15px; text-align: center; }
    #vodnidodatek .water-calculator-content { width: min(100% - 24px, 620px); padding: 42px 0 56px; }
}














































































































































































































































































































































































































































/* Currency converter — shared AI chat / converter visual language */
#currencyconverter.currency-page {
    --currency-ink: #171717;
    --currency-muted: #6f6f6b;
    --currency-line: #e6e6e2;
    --currency-soft: #f5f5f2;
    --currency-accent: #111827;
    min-height: 100vh;
    margin: 0;
    background: #f7f7f5;
    color: var(--currency-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#currencyconverter * { -webkit-box-sizing: border-box; box-sizing: border-box; }

#currencyconverter .currency-skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 1001;
    padding: 10px 14px;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    -webkit-transform: translate(-50%, -150%);
            transform: translate(-50%, -150%);
    -webkit-transition: opacity .16s ease, -webkit-transform .16s ease;
    transition: opacity .16s ease, -webkit-transform .16s ease;
    transition: opacity .16s ease, transform .16s ease;
    transition: opacity .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

#currencyconverter .currency-skip-link:focus {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}

#currencyconverter .converter-shell {
    width: min(100%, 960px);
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
    border-right: 1px solid var(--currency-line);
    border-left: 1px solid var(--currency-line);
}

#currencyconverter .converter-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 76px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--currency-line);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

#currencyconverter .converter-home {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--currency-line);
    border-radius: 12px;
    background: #fff;
    color: var(--currency-ink);
    cursor: pointer;
    -webkit-transition: background .18s ease, border-color .18s ease, -webkit-transform .18s ease;
    transition: background .18s ease, border-color .18s ease, -webkit-transform .18s ease;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, -webkit-transform .18s ease;
}

#currencyconverter .converter-home:hover {
    border-color: #d0d0cc;
    background: var(--currency-soft);
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
}

#currencyconverter .converter-home:focus-visible,
#currencyconverter button:focus-visible,
#currencyconverter input:focus-visible,
#currencyconverter select:focus-visible {
    outline: 3px solid rgba(17, 24, 39, .13);
    outline-offset: 2px;
}

#currencyconverter .converter-home svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#currencyconverter .converter-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 11px;
    min-width: 0;
}

#currencyconverter .converter-brand-mark {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--currency-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

#currencyconverter .converter-brand strong,
#currencyconverter .converter-brand span { display: block; }

#currencyconverter .converter-brand strong {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
}

#currencyconverter .converter-brand div > span {
    margin-top: 2px;
    color: var(--currency-muted);
    font-size: 11px;
}

#currencyconverter .converter-status {
    padding: 7px 10px;
    border: 1px solid var(--currency-line);
    border-radius: 999px;
    background: var(--currency-soft);
    color: #585854;
    font-size: 11px;
    font-weight: 600;
}

#currencyconverter .converter-main {
    width: min(100%, 780px);
    margin: 0 auto;
    padding: 64px 28px 80px;
}

#currencyconverter .converter-intro {
    max-width: 650px;
    margin: 0 auto 30px;
    text-align: center;
}

#currencyconverter .converter-kicker,
#currencyconverter .converter-eyebrow {
    display: block;
    color: #777772;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

#currencyconverter .converter-intro h1 {
    margin: 12px 0;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.06;
}

#currencyconverter .converter-intro p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--currency-muted);
    font-size: 15px;
    line-height: 1.65;
}

#currencyconverter .converter-card {
    overflow: hidden;
    border: 1px solid var(--currency-line);
    border-radius: 22px;
    background: #fff;
    -webkit-box-shadow: 0 20px 55px rgba(17, 24, 39, .075);
            box-shadow: 0 20px 55px rgba(17, 24, 39, .075);
}

#currencyconverter .converter-card-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-bottom: 1px solid var(--currency-line);
}

#currencyconverter .converter-card-head h2 {
    margin: 5px 0 0;
    font-size: 20px;
    letter-spacing: -.025em;
}

#currencyconverter .converter-live {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    color: #60605c;
    font-size: 11px;
    font-weight: 600;
}

#currencyconverter .converter-live span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22a06b;
    -webkit-box-shadow: 0 0 0 4px rgba(34, 160, 107, .1);
            box-shadow: 0 0 0 4px rgba(34, 160, 107, .1);
}

#currencyconverter .currency-form {
    display: grid;
    gap: 22px;
    padding: 28px 26px 30px;
}

#currencyconverter .converter-field label {
    display: block;
    margin-bottom: 8px;
    color: #40403d;
    font-size: 12px;
    font-weight: 600;
}

#currencyconverter .converter-field input,
#currencyconverter .converter-field select {
    width: 100%;
    min-height: 50px;
    border: 1px solid #d9d9d5;
    border-radius: 12px;
    background: #fff;
    color: var(--currency-ink);
    font: inherit;
    font-size: 14px;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

#currencyconverter .converter-field input { padding: 11px 14px 11px 42px; }
#currencyconverter .converter-field select { padding: 11px 38px 11px 13px; }

#currencyconverter .converter-field input:focus,
#currencyconverter .converter-field select:focus {
    border-color: #999994;
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 24, 39, .07);
            box-shadow: 0 0 0 3px rgba(17, 24, 39, .07);
}

#currencyconverter .currency-input-wrap { position: relative; }

#currencyconverter .currency-input-wrap > span {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #777772;
    font-weight: 600;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    pointer-events: none;
}

#currencyconverter .currency-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 12px;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}

#currencyconverter .currency-swap {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 44px;
    height: 50px;
    padding: 0;
    border: 1px solid #d9d9d5;
    border-radius: 12px;
    background: var(--currency-soft);
    color: var(--currency-ink);
    cursor: pointer;
    -webkit-transition: background .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, transform .16s ease;
    transition: background .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

#currencyconverter .currency-swap:hover { background: #ecece8; -webkit-transform: translateY(-1px); transform: translateY(-1px); }

#currencyconverter .currency-swap svg,
#currencyconverter .converter-action svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#currencyconverter .converter-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--currency-accent);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: background .16s ease, -webkit-transform .16s ease, -webkit-box-shadow .16s ease;
    transition: background .16s ease, -webkit-transform .16s ease, -webkit-box-shadow .16s ease;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease, -webkit-transform .16s ease, -webkit-box-shadow .16s ease;
}

#currencyconverter .converter-action:hover {
    background: #252c3a;
    -webkit-box-shadow: 0 9px 22px rgba(17, 24, 39, .18);
            box-shadow: 0 9px 22px rgba(17, 24, 39, .18);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

#currencyconverter .currency-result {
    padding: 28px 26px 30px;
    border-top: 1px solid var(--currency-line);
    background: var(--currency-soft);
    text-align: center;
}

#currencyconverter .currency-result p {
    margin: 8px 0 7px;
    color: var(--currency-ink);
    font-size: clamp(1.8rem, 5vw, 2.45rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.2;
}

#currencyconverter .currency-result small {
    display: block;
    max-width: 520px;
    margin: 0 auto;
    color: var(--currency-muted);
    font-size: 11px;
    line-height: 1.55;
}

#currencyconverter .message-box {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 1000;
    display: block;
    margin: 0;
    padding: 12px 18px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b42318;
    -webkit-box-shadow: 0 12px 35px rgba(17, 24, 39, .14);
            box-shadow: 0 12px 35px rgba(17, 24, 39, .14);
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-8px);
            transform: translateX(-50%) translateY(-8px);
    pointer-events: none;
    -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: opacity .2s ease, transform .2s ease;
    transition: opacity .2s ease, transform .2s ease, -webkit-transform .2s ease;
}

#currencyconverter .message-box.show {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
    #currencyconverter .converter-shell { border: 0; }
    #currencyconverter .converter-topbar { grid-template-columns: 40px 1fr; padding: 12px 16px; }
    #currencyconverter .converter-status { display: none; }
    #currencyconverter .converter-main { padding: 46px 16px 56px; }
    #currencyconverter .converter-intro { margin-bottom: 24px; }
    #currencyconverter .converter-intro h1 { font-size: 2.15rem; }
    #currencyconverter .converter-card-head,
    #currencyconverter .currency-form,
    #currencyconverter .currency-result { padding-right: 18px; padding-left: 18px; }
    #currencyconverter .converter-live { display: none; }
    #currencyconverter .currency-pair { grid-template-columns: 1fr; }
    #currencyconverter .currency-swap { width: 100%; height: 42px; -webkit-transform: none; transform: none; }
    #currencyconverter .currency-swap svg { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
}

/* Mahnečani chat — shared AI chat / unit converter visual language */
#chat {
    --chat-ink: #171717;
    --chat-muted: #6f6f6b;
    --chat-line: #e6e6e2;
    --chat-soft: #f6f6f3;
    --chat-accent: #111827;
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    display: block !important;
    background: #f7f7f5 !important;
    color: var(--chat-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#chat *, #chat *::before, #chat *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

#chat .mahneti-chat-shell {
    width: min(100%, 960px);
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
    border-right: 1px solid var(--chat-line);
    border-left: 1px solid var(--chat-line);
}

#chat .mahneti-chat-panel { min-height: 100vh; }

#chat .mahneti-chat-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--chat-line);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

#chat .mahneti-chat-home,
#chat .mahneti-chat-new,
#chat .mahneti-chat-send {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border: 0;
    font: inherit;
    cursor: pointer;
    -webkit-transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, -webkit-transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, -webkit-transform .16s ease;
}

#chat .mahneti-chat-home {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--chat-line);
    border-radius: 13px;
    background: #fff;
    color: var(--chat-ink);
}

#chat .mahneti-chat-home:hover { background: var(--chat-soft); -webkit-transform: translateX(-2px); transform: translateX(-2px); }
#chat .mahneti-chat-home svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#chat .mahneti-chat-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    min-width: 0;
}

#chat .mahneti-chat-brand-mark {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 38px;
    height: 38px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 38px;
            flex: 0 0 38px;
    border-radius: 12px;
    background: var(--chat-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

#chat .mahneti-chat-brand div { min-width: 0; }
#chat .mahneti-chat-brand strong,
#chat .mahneti-chat-brand span { display: block; }
#chat .mahneti-chat-brand strong { font-size: 15px; letter-spacing: -.015em; }
#chat .mahneti-chat-brand div > span { margin-top: 2px; color: var(--chat-muted); font-size: 11px; }

#chat .mahneti-chat-new {
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    background: #fff;
    color: #343434;
    font-size: 13px;
    font-weight: 600;
}

#chat .mahneti-chat-new:hover { background: var(--chat-soft); }
#chat .mahneti-chat-new svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

#chat .mahneti-chat-home:focus-visible,
#chat .mahneti-chat-new:focus-visible,
#chat .mahneti-chat-send:focus-visible,
#chat .mahneti-chat-input:focus-visible {
    outline: 3px solid rgba(17, 24, 39, .14);
    outline-offset: 2px;
}

#chat .mahneti-chat-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: calc(100vh - 76px);
    padding: 32px 30px 24px;
}

#chat .mahneti-chat-messages {
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-height: 430px;
    max-height: calc(100vh - 246px);
    margin: 0 0 18px;
    padding: 24px;
    overflow-y: auto;
    border: 1px solid var(--chat-line);
    border-radius: 20px;
    background: #fbfbfa;
    scroll-behavior: smooth;
}

#chat .chat-thread { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 18px; }
#chat .chat-message { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; }
#chat .chat-message-user { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
#chat .chat-message-assistant { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

#chat .chat-bubble {
    max-width: min(78%, 650px);
    padding: 13px 16px;
    border: 1px solid var(--chat-line);
    border-radius: 16px 16px 16px 5px;
    background: #fff;
    -webkit-box-shadow: 0 5px 16px rgba(17, 24, 39, .035);
            box-shadow: 0 5px 16px rgba(17, 24, 39, .035);
}

#chat .chat-message-user .chat-bubble {
    border-color: var(--chat-accent);
    border-radius: 16px 16px 5px 16px;
    background: var(--chat-accent);
    color: #fff;
}

#chat .chat-message-label {
    margin-bottom: 5px;
    color: var(--chat-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

#chat .chat-message-user .chat-message-label { color: rgba(255, 255, 255, .68); }
#chat .chat-message-content { font-size: 14px; line-height: 1.62; overflow-wrap: anywhere; }

#chat .mahneti-chat-messages > [dmx-show][style] {
    border-radius: 19px;
    background: rgba(251, 251, 250, .84) !important;
}

#chat .mahneti-chat-messages > .text-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 370px;
    padding: 32px 18px;
    color: var(--chat-muted);
}

#chat .mahneti-chat-messages > .text-center svg { width: 54px; height: 54px; margin: 0 0 18px; color: #c8c8c3; }
#chat .mahneti-chat-messages > .text-center h3 { margin: 0 0 7px; color: var(--chat-ink); font-size: 18px; font-weight: 650; }
#chat .mahneti-chat-messages > .text-center p { margin: 0; font-size: 14px; }

#chat .mahneti-chat-composer {
    padding: 14px;
    border: 1px solid var(--chat-line);
    border-radius: 18px;
    background: #fff;
    -webkit-box-shadow: 0 12px 32px rgba(17, 24, 39, .07);
            box-shadow: 0 12px 32px rgba(17, 24, 39, .07);
}

#chat .mahneti-chat-input-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 10px; }
#chat .mahneti-chat-input-row > div { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }

#chat .mahneti-chat-input {
    display: block;
    width: 100%;
    min-height: 50px !important;
    max-height: 200px;
    padding: 13px 15px;
    resize: none;
    border: 1px solid #d8d8d5;
    border-radius: 13px;
    background: #fbfbfa;
    color: var(--chat-ink);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: border-color .16s ease, background .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, background .16s ease, -webkit-box-shadow .16s ease;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, -webkit-box-shadow .16s ease;
}

#chat .mahneti-chat-input:focus {
    border-color: #969691;
    outline: 0;
    background: #fff;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 24, 39, .07);
            box-shadow: 0 0 0 3px rgba(17, 24, 39, .07);
}

#chat .mahneti-chat-input::-webkit-input-placeholder { color: #92928d; }

#chat .mahneti-chat-input::-moz-placeholder { color: #92928d; }

#chat .mahneti-chat-input:-ms-input-placeholder { color: #92928d; }

#chat .mahneti-chat-input::-ms-input-placeholder { color: #92928d; }

#chat .mahneti-chat-input::placeholder { color: #92928d; }

#chat .mahneti-chat-send {
    width: 50px;
    height: 50px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50px;
            flex: 0 0 50px;
    padding: 0;
    border-radius: 13px;
    background: var(--chat-accent);
    color: #fff;
}

#chat .mahneti-chat-send:hover { background: #273244; -webkit-transform: translateY(-1px); transform: translateY(-1px); }
#chat .mahneti-chat-send:disabled { cursor: not-allowed; opacity: .5; -webkit-transform: none; transform: none; }
#chat .mahneti-chat-send svg { width: 20px; height: 20px; }

#chat .mahneti-chat-secondary-action { margin-top: 10px; text-align: center; }
#chat .mahneti-chat-secondary-action button {
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--chat-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
#chat .mahneti-chat-secondary-action button:hover { background: var(--chat-soft); color: var(--chat-ink); }

@media (max-width: 640px) {
    #chat {
        min-height: var(--chat-viewport-height, 100dvh);
        overflow: hidden;
    }

    #chat .mahneti-chat-shell { border: 0; }
    #chat .mahneti-chat-shell,
    #chat .mahneti-chat-panel {
        width: 100%;
        height: var(--chat-viewport-height, 100dvh);
        min-height: 0;
        overflow: hidden;
    }
    #chat .mahneti-chat-panel {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #chat .mahneti-chat-topbar { position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 10px; padding: 12px 14px; }
    #chat .mahneti-chat-brand-mark { display: none; }
    #chat .mahneti-chat-brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #chat .mahneti-chat-brand div > span { display: none; }
    #chat .mahneti-chat-new { width: 40px; min-height: 40px; padding: 0; }
    #chat .mahneti-chat-new span { display: none; }
    #chat .mahneti-chat-main {
        height: auto;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        min-height: 0;
        padding: 16px 12px max(14px, env(safe-area-inset-bottom));
        overflow: hidden;
    }
    #chat .mahneti-chat-messages {
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -ms-scroll-chaining: none;
            overscroll-behavior: contain;
        padding: 16px 12px;
        border-radius: 16px;
    }
    #chat .chat-bubble { max-width: 88%; }
    #chat .mahneti-chat-composer {
        position: relative;
        z-index: 5;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        padding: 10px;
        border-radius: 15px;
    }
    #chat .mahneti-chat-secondary-action { display: none; }
}