/* ZALWEB_AI_CONTROL_CENTER_V1 */

.control-page {
    display: grid;
    gap: 18px;
}

.control-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.control-page-header h2,
.control-page-header h3 {
    margin: 0;
}

.control-page-header h2 {
    margin-top: 8px;
    font-size: 24px;
}

.control-page-header p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}

.control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

.control-grid.four {
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}

.control-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 17px;

    background:
        linear-gradient(
            160deg,
            rgba(9,32,52,.98),
            rgba(6,23,39,.98)
        );

    box-shadow:
        0 16px 45px
        rgba(0,0,0,.09);
}

.control-card h3 {
    margin: 0 0 15px;
    font-size: 14px;
}

.control-card p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.85;
}

.control-stat {
    position: relative;
    overflow: hidden;
}

.control-stat::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1473d4
        );
}

.control-stat span,
.control-stat strong,
.control-stat small {
    display: block;
}

.control-stat span {
    color: var(--muted);
    font-size: 10px;
}

.control-stat strong {
    margin-top: 14px;
    font-size: 19px;
    direction: ltr;
    text-align: right;
}

.control-stat small {
    margin-top: 6px;
    color: #647f96;
    font-size: 9px;
}

.control-form {
    display: grid;
    gap: 13px;
}

.control-form.two {
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.control-field {
    display: grid;
    gap: 7px;
}

.control-field.full {
    grid-column: 1 / -1;
}

.control-field > span {
    color: #8ea5b9;
    font-size: 10px;
}

.control-input,
.control-select,
.control-textarea {
    width: 100%;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius: 11px;

    outline: 0;

    background:
        rgba(2,14,24,.63);

    color: #f4f8fd;

    font-family:
        "Shabnam",
        Tahoma,
        sans-serif;
}

.control-input,
.control-select {
    height: 45px;
    padding: 0 12px;
}

.control-textarea {
    min-height: 125px;
    padding: 12px;
    resize: vertical;
    line-height: 1.9;
}

.control-input:focus,
.control-select:focus,
.control-textarea:focus {
    border-color:
        rgba(20,115,212,.75);

    box-shadow:
        0 0 0 3px
        rgba(20,115,212,.11);
}

.control-code {
    direction: ltr;
    text-align: left;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;
}

.control-button {
    min-height: 41px;
    padding: 0 15px;

    border:
        1px solid
        rgba(20,115,212,.28);

    border-radius: 10px;

    background:
        rgba(20,115,212,.10);

    color: #80baff;

    font-family: inherit;
    cursor: pointer;
}

.control-button.primary {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #1473d4,
            #0c53a5
        );

    color: #fff;

    box-shadow:
        0 10px 25px
        rgba(20,115,212,.18);
}

.control-button.danger {
    border-color:
        rgba(255,92,92,.22);

    background:
        rgba(255,92,92,.07);

    color: #ff9292;
}

.control-button:hover {
    filter: brightness(1.1);
}

.control-button:disabled {
    opacity: .45;
    cursor: wait;
}

.control-message {
    margin-top: 13px;
    padding: 11px 13px;

    border:
        1px solid
        rgba(20,115,212,.18);

    border-radius: 10px;

    background:
        rgba(20,115,212,.06);

    color: #95c6ff;

    font-size: 11px;
    line-height: 1.8;
}

.control-message.error {
    border-color:
        rgba(255,92,92,.2);

    background:
        rgba(255,92,92,.055);

    color: #ff9e9e;
}

.runtime-console {
    width: 100%;
    min-height: 125px;
    max-height: 430px;

    margin: 0;

    padding: 15px;

    overflow: auto;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius: 11px;

    background: #03101b;

    color: #b0cbe1;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size: 10px;
    line-height: 1.75;

    direction: ltr;
    text-align: left;

    white-space: pre-wrap;
    word-break: break-word;
}

.control-list {
    display: grid;
    gap: 9px;
}

.control-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 13px;

    border:
        1px solid var(--line);

    border-radius: 11px;

    background:
        rgba(255,255,255,.018);
}

.control-list-item strong,
.control-list-item span {
    display: block;
}

.control-list-item strong {
    font-size: 11px;
}

.control-list-item span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.status-line {
    display: flex;
    align-items: center;
    gap: 7px;
}

.status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 11px
        rgba(25,169,116,.65);
}

.status-dot.offline {
    background: #687d90;
    box-shadow: none;
}

.empty-state {
    min-height: 125px;

    display: grid;
    place-content: center;

    text-align: center;

    color: var(--muted);

    font-size: 11px;
}

.control-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.control-table {
    width: 100%;
    min-width: 700px;

    border-collapse: collapse;

    font-size: 10px;
}

.control-table th,
.control-table td {
    padding: 11px 9px;

    border-bottom:
        1px solid var(--line);

    text-align: right;
    vertical-align: top;
}

.control-table th {
    color: #70899f;
    font-weight: 500;
}

.control-table td {
    color: #b4c8d8;
}

.mobile-control-nav {
    display: none;
}

.control-loading {
    min-height: 180px;

    display: grid;
    place-content: center;

    color: var(--muted);

    font-size: 11px;
}

.control-loading::before {
    content: "";

    width: 24px;
    height: 24px;

    margin: 0 auto 12px;

    border:
        2px solid
        rgba(255,255,255,.09);

    border-top-color:
        #1473d4;

    border-radius: 50%;

    animation:
        zw-spin .65s linear infinite;
}

@keyframes zw-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width:1050px) {
    .control-grid.four {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media (max-width:760px) {
    .mobile-control-nav {
        display: flex;
        gap: 7px;

        padding: 11px 15px;

        overflow-x: auto;

        border-bottom:
            1px solid var(--line);

        background:
            rgba(5,20,33,.94);
    }

    .mobile-control-nav button {
        flex: 0 0 auto;

        padding: 8px 11px;

        border:
            1px solid var(--line);

        border-radius: 9px;

        background: transparent;

        color: var(--muted);

        font-family: inherit;
    }

    .mobile-control-nav button.active {
        border-color:
            rgba(20,115,212,.35);

        background:
            rgba(20,115,212,.1);

        color: #fff;
    }

    .control-page-header {
        display: block;
    }

    .control-actions {
        margin-top: 14px;
    }

    .control-grid,
    .control-grid.four,
    .control-form.two {
        grid-template-columns: 1fr;
    }

    .control-card {
        padding: 15px;
    }
}

/* ==========================================================
   ZALWEB AI CHAT V1
   ========================================================== */

.chat-shell {
    height:
        calc(100vh - 118px);

    min-height: 620px;

    display: grid;

    grid-template-columns:
        245px minmax(0,1fr);

    overflow: hidden;

    border:
        1px solid var(--line);

    border-radius: 18px;

    background:
        rgba(6,23,39,.78);
}


.chat-history {
    min-width: 0;

    padding: 14px;

    border-left:
        1px solid var(--line);

    background:
        rgba(4,18,30,.74);

    overflow-y: auto;
}


.chat-new {
    width: 100%;
    height: 42px;

    margin-bottom: 14px;

    border:
        1px solid
        rgba(20,115,212,.3);

    border-radius: 11px;

    background:
        rgba(20,115,212,.1);

    color: #a9d1ff;

    font-family: inherit;

    cursor: pointer;
}


.chat-history-title {
    margin: 16px 4px 9px;

    color: #637f97;

    font-size: 9px;

    letter-spacing: .04em;
}


.chat-conversation-item {
    width: 100%;

    padding: 10px;

    margin-bottom: 5px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #92a9bc;

    font-family: inherit;

    text-align: right;

    cursor: pointer;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.chat-conversation-item:hover,
.chat-conversation-item.active {
    background:
        rgba(255,255,255,.045);

    color: #fff;
}


.chat-main {
    position: relative;

    min-width: 0;

    display: grid;

    grid-template-rows:
        auto minmax(0,1fr) auto;
}


.chat-topbar {
    min-height: 57px;

    padding: 10px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border-bottom:
        1px solid var(--line);
}


.chat-model-group {
    display: flex;
    align-items: center;

    gap: 7px;
}


.chat-model-select {
    height: 36px;

    max-width: 190px;

    padding: 0 10px;

    border:
        1px solid var(--line);

    border-radius: 9px;

    background:
        rgba(3,15,26,.8);

    color: #d7e4ef;

    font-family: inherit;

    font-size: 10px;
}


.chat-speed {
    padding: 6px 8px;

    border-radius: 7px;

    background:
        rgba(25,169,116,.08);

    color: #68d3aa;

    font-size: 9px;
}


.chat-messages {
    padding:
        22px max(22px,7vw) 26px;

    overflow-y: auto;

    scroll-behavior: smooth;
}


.chat-welcome {
    min-height: 100%;

    display: grid;

    place-content: center;

    text-align: center;
}


.chat-orb {
    width: 58px;
    height: 58px;

    margin:
        0 auto 17px;

    display: grid;
    place-content: center;

    border:
        1px solid
        rgba(20,115,212,.35);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 35% 30%,
            #1a83e8,
            #0c53a5 48%,
            #06294b
        );

    box-shadow:
        0 15px 45px
        rgba(20,115,212,.23);

    color: #fff;

    font-size: 21px;
    font-weight: 800;
}


.chat-welcome h2 {
    margin: 0;

    font-size: 22px;
}


.chat-welcome p {
    max-width: 530px;

    margin: 10px auto 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 2;
}


.chat-suggestions {
    max-width: 650px;

    margin: 24px auto 0;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;
}


.chat-suggestion {
    padding: 9px 12px;

    border:
        1px solid var(--line);

    border-radius: 10px;

    background:
        rgba(255,255,255,.02);

    color: #9ab2c6;

    font-family: inherit;

    font-size: 10px;

    cursor: pointer;
}


.chat-suggestion:hover {
    border-color:
        rgba(20,115,212,.35);

    background:
        rgba(20,115,212,.07);

    color: #fff;
}


.chat-row {
    width: min(850px,100%);

    margin:
        0 auto 18px;

    display: flex;

    gap: 11px;

    align-items: flex-start;
}


.chat-row.user {
    flex-direction: row-reverse;
}


.chat-avatar {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: grid;
    place-content: center;

    border-radius: 9px;

    background:
        rgba(20,115,212,.14);

    color: #83bcff;

    font-size: 10px;
    font-weight: 700;
}


.chat-row.user
.chat-avatar {
    background:
        rgba(255,255,255,.06);

    color: #b4c6d6;
}


.chat-bubble {
    max-width:
        min(720px,82%);

    padding: 11px 14px;

    border-radius: 13px;

    color: #d5e2ed;

    font-size: 12px;

    line-height: 2;

    white-space: pre-wrap;

    word-break: break-word;
}


.chat-row.assistant
.chat-bubble {
    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.045);
}


.chat-row.user
.chat-bubble {
    background:
        rgba(20,115,212,.12);

    border:
        1px solid
        rgba(20,115,212,.17);
}


.chat-thinking {
    color: #6f899e;

    font-size: 10px;
}


.chat-cursor::after {
    content: "▋";

    margin-right: 3px;

    animation:
        zw-chat-cursor .7s infinite;
}


@keyframes zw-chat-cursor {
    50% {
        opacity: 0;
    }
}


.chat-composer-wrap {
    padding:
        10px max(16px,5vw) 15px;

    background:
        linear-gradient(
            0deg,
            rgba(6,23,39,1),
            rgba(6,23,39,.92)
        );
}


.chat-composer {
    width: min(900px,100%);

    margin: auto;

    padding: 8px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr) auto;

    gap: 8px;

    align-items: end;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 15px;

    background:
        rgba(2,14,24,.82);

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.15);
}


.chat-input {
    width: 100%;

    min-height: 43px;
    max-height: 150px;

    padding:
        11px 10px;

    border: 0;

    outline: 0;

    resize: none;

    background: transparent;

    color: #f1f6fb;

    font-family: inherit;

    font-size: 12px;

    line-height: 1.8;
}


.chat-send {
    width: 43px;
    height: 43px;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #1473d4,
            #0c53a5
        );

    color: #fff;

    cursor: pointer;

    font-size: 17px;
}


.chat-send:disabled {
    opacity: .45;

    cursor: wait;
}


.chat-footnote {
    margin-top: 7px;

    text-align: center;

    color: #526b80;

    font-size: 8px;
}


@media (max-width:820px) {

    .chat-shell {
        height:
            calc(100vh - 150px);

        min-height: 570px;

        grid-template-columns: 1fr;
    }


    .chat-history {
        display: none;
    }


    .chat-messages {
        padding:
            18px 13px 22px;
    }


    .chat-bubble {
        max-width: 90%;
    }


    .chat-topbar {
        padding:
            9px 11px;
    }


    .chat-model-select {
        max-width: 145px;
    }
}

/* ZALWEB_CHAT_THINKING_V2 */

.chat-thinking-live {
    position: relative;

    color: #7f9bb2 !important;

    font-size: 11px;

    background:
        rgba(20,115,212,.035)
        !important;
}

.chat-thinking-live::before {
    content: "";

    width: 7px;
    height: 7px;

    display: inline-block;

    margin-left: 9px;

    border-radius: 50%;

    background: #1473d4;

    box-shadow:
        0 0 0 0
        rgba(20,115,212,.45);

    animation:
        zalweb-thinking-pulse
        1.1s infinite;
}

@keyframes zalweb-thinking-pulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(20,115,212,.4);
    }

    70% {
        box-shadow:
            0 0 0 8px
            rgba(20,115,212,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(20,115,212,0);
    }
}