@font-face{
    font-family:"VerstakLogo";
    src:url("/static/fonts/Script Smooth.ttf") format("truetype");
}

*{box-sizing:border-box;}

html,
body{max-width:100%;overflow-x:hidden;}

body{
    margin:0;
    min-height:100vh;
    background:var(--bg-f7f8fa);
    color:var(--text-20242a);
    font-family:"DejaVu Sans Mono", Consolas, "Liberation Mono", Menlo, monospace;
    font-size:14px;
}

:root{
    --chat-panel-border:#c7d3e0;
    --chat-panel-bg-sidebar:#f4f8fc;
    --chat-input-border:#b9c4d6;
    --private-card-bg:#e3f7ea;
    --private-card-border:#9fddb5;
    --private-card-hover-bg:#d3f0dd;
    --private-card-hover-border:#7fd1a0;
    --uid-card-bg:#e3f7ea;
    --uid-card-border:#9fddb5;
}

:root[data-theme="dark"]{
    --chat-panel-border:#33404f;
    --chat-panel-bg-sidebar:#161b22;
    --chat-input-border:#3a4655;
    --private-card-bg:#132018;
    --private-card-border:#2f6b45;
    --private-card-hover-bg:#18291f;
    --private-card-hover-border:#3b8a58;
    --uid-card-bg:#132018;
    --uid-card-border:#2f6b45;
}

.language-switch{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--text-777);
    font-size:12px;
    line-height:18px;
}

.language-switch a,
.language-switch span{
    color:inherit;
    text-decoration:none;
}

.language-switch .active{
    color:var(--text-222);
    font-weight:bold;
}

.messenger-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.messenger-topbar{
    height:56px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 22px;
    border-bottom:1px solid var(--border-e5e7eb);
    background:var(--bg-fff);
}

.brand-link{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-111827);
    text-decoration:none;
}

.brand-mark{
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.brand-mark img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.brand-name{
    font-family:"VerstakLogo", cursive;
    font-size:30px;
    line-height:1;
    font-weight:normal;
}

.header-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.top-status{
    color:var(--text-6b7280);
    font-size:13px;
}

.status-dot{
    display:inline-block;
    width:8px;
    height:8px;
    margin-right:7px;
    border-radius:50%;
    background:var(--bg-22c55e);
}

.wrapper{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:12px 18px;
    flex:1;
}

.chat-layout{
    display:grid;
    grid-template-columns:260px minmax(360px, 1fr);
    gap:14px;
    align-items:stretch;
}

.panel,
.main-stage{
    height:calc(100vh - 82px);
    min-height:0;
    background:var(--bg-fff);
    border:1px solid var(--chat-panel-border);
    border-radius:8px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    overflow:hidden;
}

.profile-panel,
.chat-panel{
    display:flex;
    flex-direction:column;
    background:var(--chat-panel-bg-sidebar);
}

.main-stage{
    position:relative;
}

.stage-pane{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
}

.stage-private{
    position:absolute;
    inset:0;
    display:none;
    background:var(--bg-fff);
    z-index:5;
}

.main-stage.private-open .stage-private{
    display:flex;
}

.main-stage.private-open .stage-hall{
    visibility:hidden;
}

.private-panel-header{
    display:flex;
    align-items:center;
    gap:10px;
}

.private-back-button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid var(--border-d7dce2);
    border-radius:6px;
    background:var(--bg-fff);
    color:var(--text-374151);
    padding:5px 9px;
    font:inherit;
    font-size:12px;
    cursor:pointer;
}

.private-back-button:hover{
    background:var(--bg-f2f5f9);
}

.private-chat-card{
    display:flex;
    align-items:center;
    gap:10px;
    width:calc(100% - 32px);
    margin:0 16px 14px;
    padding:12px 14px;
    border:1px solid var(--private-card-border);
    border-radius:10px;
    background:var(--private-card-bg);
    color:var(--text-1f5132);
    font:inherit;
    font-size:13px;
    line-height:18px;
    text-align:left;
    cursor:pointer;
}

.private-chat-card:hover{
    border-color:var(--private-card-hover-border);
    background:var(--private-card-hover-bg);
}

.private-chat-card-icon{
    flex:0 0 auto;
    font-size:16px;
}

.private-chat-card-label{
    font-weight:bold;
}

.profile-head{
    display:flex;
    gap:14px;
    padding:16px 16px 10px;
    align-items:center;
}

.top-logo{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 auto;
}

.profile-name{
    width:100%;
    text-align:center;
    font-size:15px;
    line-height:20px;
    font-weight:normal;
}

.profile-status{
    margin-top:3px;
    color:var(--text-6b7280);
    line-height:20px;
}

.uid-card{
    margin:14px 16px 4px;
    padding:12px 14px;
    border:1px solid var(--uid-card-border);
    border-radius:10px;
    background:var(--uid-card-bg);
}

.uid-line{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    line-height:28px;
}

.uid-line button{
    margin-left:auto;
    border:1px solid var(--border-d7dce2);
    border-radius:6px;
    background:var(--bg-fff);
    color:var(--text-4b5563);
    cursor:pointer;
    padding:4px 8px;
}

#copy-status{
    color:var(--text-16a34a);
}

.profile-list{
    margin:0;
    margin:0 16px 12px;
    padding:10px 12px;
    list-style:none;
    color:var(--text-4b5563);
    line-height:16px;
    font-size:12px;
    text-align:left;
    background:var(--bg-f8fafc);
    border:1px dashed var(--border-d8dee7);
    border-radius:8px;
}

.profile-list li{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    gap:7px;
    margin:5px 0;
}

.profile-icon{
    flex:0 0 auto;
    color:var(--text-6b7280);
}

.profile-text{
    min-width:0;
}

.private-setup{
    margin-top:auto;
    padding:12px 14px;
    border-bottom:1px solid var(--border-eef1f4);
}

.private-setup-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.uid-wrapper{
    position:relative;
    flex:1;
}

.uid-wrapper input{
    width:100%;
    box-sizing:border-box;
    padding-right:30px;
}

.uid-status{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:10px;
    height:10px;
    border-radius:50%;
}

.uid-status.online{background:var(--bg-22c55e);}
.uid-status.offline{background:var(--bg-ef4444);}
.uid-status.unknown{background:var(--bg-9ca3af);}

.panel-header{
    position:relative;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 46px;
    text-align:center;
    border-bottom:1px solid var(--chat-input-border);
}

.panel-title{
    width:100%;
    text-align:center;
    font-size:14px;
    line-height:20px;
    font-weight:normal;
}

.panel-subtitle{
    margin-top:3px;
    color:var(--text-6b7280);
    font-size:12px;
    line-height:18px;
    font-weight:normal;
}

.panel-meta{
    color:var(--text-6b7280);
    font-size:13px;
    white-space:nowrap;
}

.notice-box{
    margin:14px;
    padding:10px 12px;
    border:1px dashed var(--border-cbd5df);
    border-radius:7px;
    color:var(--text-4b5563);
    background:var(--bg-fff);
    line-height:20px;
}

.chat-window{
    flex:1;
    min-height:0;
    border:none;
    overflow-y:auto;
    padding:12px;
    background:var(--bg-fff);
    word-wrap:break-word;
    overflow-wrap:break-word;
    word-break:break-word;
    line-height:22px;
}

#hall-window{
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--bg-fcfcfd);
}

.hall-message{
    width:min(82%, 620px);
    padding:10px 12px;
    border:1px solid var(--border-e1e5ea);
    border-radius:8px;
    background:var(--bg-fff);
    color:var(--text-20242a);
    box-shadow:0 1px 1px rgba(15,23,42,.03);
}

.hall-message.is-own{
    align-self:flex-end;
    border-color:var(--border-cfe0f8);
    background:var(--bg-f4f8ff);
}

.hall-message.is-jack{
    align-self:flex-start;
    border-color:var(--border-d8e7de);
    background:var(--bg-f6fbf7);
}

.hall-message.is-jack-typing{
    display:flex;
    align-items:center;
    padding:12px 14px;
}

.jack-typing-dots{
    display:flex;
    align-items:center;
    gap:4px;
}

.jack-typing-dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--bg-7fae8d);
    opacity:.35;
    animation:jackTypingBounce 1.2s ease-in-out infinite;
}

.jack-typing-dots span:nth-child(2){
    animation-delay:.15s;
}

.jack-typing-dots span:nth-child(3){
    animation-delay:.3s;
}

@keyframes jackTypingBounce{
    0%, 60%, 100%{
        transform:translateY(0);
        opacity:.35;
    }
    30%{
        transform:translateY(-4px);
        opacity:1;
    }
}

.message-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:5px;
    color:var(--text-6b7280);
    font-size:12px;
    line-height:16px;
}

.message-author{
    color:var(--text-111827);
    font-weight:bold;
}

.message-badge{
    padding:2px 6px;
    border:1px solid var(--border-d8e7de);
    border-radius:999px;
    color:var(--text-2f6b45);
    background:var(--bg-eef8f0);
    font-size:11px;
    line-height:14px;
}

.message-text{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    font-size:13px;
    line-height:20px;
}

/* System-generated "external, unverified information" warning (Evidence
   Gate v2) -- server always sends this as its own paragraph starting with
   the fixed "ВНИМАНИЕ:"/"WARNING:" prefix; chat.js wraps ONLY that
   paragraph in a plain <u> element (never innerHTML/model-controlled
   markup, see renderJackMessageBody) and this class only adds visual
   emphasis; text-decoration:none overrides the <u> tag's own default
   underline. */
.jack-warning{
    text-decoration:none;
    color:var(--red);
    font-weight:600;
    font-size:12px;
}

.jack-typewriter-cursor{
    display:inline;
    font-weight:bold;
    color:currentColor;
    animation:jackCursorBlink 1s step-start infinite;
}

@keyframes jackCursorBlink{
    50%{
        opacity:0;
    }
}

.jack-reply-context{
    display:grid;
    gap:3px;
    max-width:100%;
    margin:0 0 8px;
    padding:7px 9px;
    border:1px solid var(--border-d8e7de);
    border-radius:8px;
    background:var(--bg-fdfefe);
    color:var(--text-52606d);
    font-size:12px;
    line-height:16px;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.jack-reply-context-line{
    min-width:0;
}

.jack-reply-context strong{
    color:var(--text-111827);
}

.message-docs{
    display:grid;
    gap:8px;
    margin-top:10px;
}

.message-doc{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border:1px solid var(--border-d8e7de);
    border-radius:8px;
    background:var(--bg-fff);
}

.message-doc-title{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
    color:var(--text-20242a);
    font-size:13px;
    line-height:18px;
}

.message-doc-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 10px;
    border:1px solid var(--border-2f6b45);
    border-radius:6px;
    color:var(--text-245338);
    background:var(--bg-eef8f0);
    font-size:12px;
    line-height:16px;
    font-weight:bold;
    text-decoration:none;
    white-space:nowrap;
}

.message-doc-link:hover{
    background:var(--bg-e4f3e8);
}

.message-doc-info{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.message-doc-page{
    color:var(--text-5f6b7a);
    font-size:11px;
    line-height:14px;
}

.message-source-label{
    margin-top:10px;
    color:var(--text-6b7280);
    font-size:11px;
    line-height:14px;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.message-source-label:first-of-type{
    margin-top:8px;
}

.message-web-results,
.message-search-results{
    display:grid;
    gap:8px;
    margin-top:6px;
}

.message-web-result{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    gap:6px;
    padding:8px 10px;
    border:1px solid var(--border-c9d7eb);
    border-radius:8px;
    background:var(--bg-fff);
}

.message-web-result-url{
    display:block;
    color:var(--text-20242a);
    background:var(--bg-f4f6f9);
    border:1px solid var(--border-dde5ef);
    border-radius:6px;
    padding:6px 8px;
    font-family:monospace;
    font-size:12px;
    line-height:16px;
    overflow-wrap:anywhere;
    word-break:break-all;
    user-select:text;
    cursor:text;
}

.message-web-result-info{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.message-web-result-title{
    color:var(--text-20242a);
    font-size:13px;
    line-height:18px;
    font-weight:bold;
}

.message-web-result-domain{
    color:var(--text-5f6b7a);
    font-size:11px;
    line-height:14px;
}

.message-web-result-snippet{
    margin:2px 0 0;
    color:var(--text-4b5563);
    font-size:12px;
    line-height:17px;
}

.message-search-item-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 10px;
    border:1px solid var(--border-c9d7eb);
    border-radius:6px;
    color:var(--text-1f4f7a);
    background:var(--bg-eef6ff);
    font-size:12px;
    line-height:16px;
    font-weight:bold;
    text-decoration:none;
    white-space:nowrap;
}

.message-search-item-link:hover{
    background:var(--bg-e3f0ff);
}

.message-search-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border:1px solid var(--border-e1e5ea);
    border-radius:8px;
    background:var(--bg-fff);
}

.message-search-item-info{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.message-search-item-title{
    color:var(--text-20242a);
    font-size:13px;
    line-height:18px;
    font-weight:bold;
}

.message-search-item-meta{
    color:var(--text-6b7280);
    font-size:11px;
    line-height:14px;
}

.message-search-item-price{
    color:var(--text-20242a);
    font-size:13px;
    font-weight:bold;
    white-space:nowrap;
}

#private-window{
    background:linear-gradient(180deg,var(--bg-fff) 0%,var(--bg-fbfdff) 100%);
}

.private-message{
    width:fit-content;
    max-width:min(78%, 620px);
    margin:8px 0;
    padding:10px 12px;
    border:1px solid var(--border-e4e8ee);
    border-radius:8px;
    background:var(--bg-f7f9fc);
    color:var(--text-20242a);
    box-sizing:border-box;
    clear:both;
}

.private-message-own{
    margin-left:auto;
    background:var(--bg-eef5ff);
    border-color:var(--border-d8e6fb);
}

.private-message-peer{
    margin-right:auto;
    background:var(--bg-f8fafc);
}

.private-message-system{
    width:fit-content;
    max-width:min(88%, 520px);
    margin:8px auto;
    padding:7px 10px;
    border:1px solid var(--border-e5e7eb);
    border-radius:8px;
    background:var(--bg-fff);
    color:var(--text-6b7280);
    font-size:12px;
    line-height:16px;
    text-align:center;
    box-sizing:border-box;
}

.private-message-meta{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:4px;
    color:var(--text-6b7280);
    font-size:12px;
    line-height:16px;
}

.private-message-own .private-message-meta{
    justify-content:flex-end;
}

.private-message-author{
    color:var(--text-111827);
    font-weight:bold;
}

.private-message-text{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    font-size:13px;
    line-height:20px;
}

.delivery-status{
    margin-left:6px;
    color:var(--text-2f8a45);
    font-size:12px;
}

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

    .private-message-system{
        max-width:92%;
    }
}

.chat-input{
    display:flex;
    gap:10px;
    padding:12px 14px;
    border-top:1px solid var(--chat-input-border);
    background:var(--bg-fff);
}

.private-setup .chat-input{
    padding:0;
    border-top:none;
    margin-top:10px;
}

.chat-input input{
    flex:1;
    min-width:0;
    border:1px solid var(--chat-input-border);
    border-radius:6px;
    background:var(--bg-fff);
    color:var(--text-20242a);
    padding:10px 12px;
    font:inherit;
    font-size:13px;
}

.chat-input input:focus{
    outline:none;
    border-color:var(--blue);
}

.chat-input button,
.clear-button,
.icon-button{
    border:1px solid var(--chat-input-border);
    border-radius:6px;
    background:var(--bg-fff);
    color:var(--text-20242a);
    padding:9px 12px;
    font:inherit;
    font-size:13px;
    cursor:pointer;
}

.send-button{
    border-color:var(--border-245ec7);
    background:var(--bg-245ec7);
    color:var(--text-fff);
    min-width:102px;
}

.clear-row{
    padding:0 12px 10px;
}

.clear-button{
    color:var(--text-4b5563);
}

.icon-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 8px;
}

.icon-button-img{
    width:16px;
    height:16px;
    max-width:16px;
    max-height:16px;
    object-fit:contain;
    display:block;
    flex:0 0 auto;
}

.icon-button-accent{
    display:none;
}

:root[data-theme="dark"] .icon-button-img{
    display:none;
}

:root[data-theme="dark"] .icon-button-accent{
    display:block;
    width:16px;
    height:16px;
    flex:0 0 auto;
    background-color:var(--blue);
    -webkit-mask-image:url("/static/icons/C.png");
    mask-image:url("/static/icons/C.png");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

#sound-toggle{
    cursor:pointer;
}

.sound-in-header{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-4b5563);
    font-size:15px;
    line-height:1;
}

.mobile-tabs{
    display:none;
}

@media(max-width:1120px){
    .chat-layout{
        grid-template-columns:1fr;
    }

    .panel{
        min-height:auto;
    }

    .chat-window{
        min-height:320px;
    }
}

@media(max-width:640px){
    .chat-input .icon-button{
        display:none;
    }

    .messenger-topbar{
        height:auto;
        padding:12px 14px;
        align-items:flex-start;
        flex-direction:column;
    }

    .header-actions{
        width:100%;
        margin-left:0;
        justify-content:flex-end;
    }

    .wrapper{
        padding:8px;
    }

    .mobile-tabs{
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
        gap:5px;
        margin-bottom:7px;
    }

    .mobile-tab{
        border:1px solid var(--border-d8dde4);
        border-radius:7px;
        background:var(--bg-fff);
        color:var(--text-4b5563);
        padding:7px 5px;
        font:inherit;
        font-size:12px;
        cursor:pointer;
    }

    .mobile-tab.is-active{
        color:var(--text-111827);
        border-color:var(--border-9ca3af);
        background:var(--bg-f8fafc);
        font-weight:bold;
    }

    .chat-layout{
        display:block;
    }

    .panel,
    .main-stage{
        display:none;
        height:calc(100vh - 128px);
    }

    .panel.mobile-active{
        display:flex;
    }

    .main-stage.mobile-active{
        display:block;
    }

    .chat-window{
        min-height:0;
    }

    .hall-message{
        width:100%;
        padding:9px 10px;
    }

    .message-text,
    .private-message-text{
        font-size:13px;
        line-height:19px;
    }

    .message-doc{
        grid-template-columns:1fr;
        align-items:start;
    }

    .message-doc-link{
        width:max-content;
        max-width:100%;
    }

    .message-web-result,
    .message-search-item{
        grid-template-columns:1fr;
        align-items:start;
    }

    .message-search-item-link,
    .message-search-item-price{
        width:max-content;
        max-width:100%;
    }

    .private-chat-card{
        width:calc(100% - 24px);
        margin:0 12px 12px;
    }

    .message-meta{
        flex-wrap:wrap;
    }

    .profile-panel.mobile-active{
        height:auto;
        overflow:visible;
    }

    .profile-list{
        margin-bottom:12px;
    }

    .chat-input{
        flex-direction:column;
        gap:7px;
        padding:8px 10px;
    }

    .chat-input input{
        font-size:16px;
        padding:9px 10px;
    }

    .clear-row{
        padding:0 10px 8px;
    }

    .send-button{
        width:100%;
    }
}