:root {
    --navy: #0c2340;
    --navy-2: #12325c;
    --navy-deep: #08172c;
    --saffron: #e87722;
    --white: #ffffff;
    --paper: #f4f6f9;
    --line: #d8dee8;
    --text: #1c2430;
    --muted: #5b6778;
    --green: #22c55e;
    --radius: 16px;
    --shadow: 0 18px 50px rgba(8, 23, 44, .28);
    font-family: Noto Sans,Segoe UI,sans-serif
}

*,*:before,*:after {
    box-sizing: border-box
}

html,body,#root {
    margin: 0;
    min-height: 100%;
    background: var(--paper);
    color: var(--text)
}

a {
    color: #12325c;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-all;
}

button,input,select {
    font: inherit
}

.site-top {
    background: var(--navy-deep);
    color: #d7deea;
    font-size: 12px
}

.site-top__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 8px 20px
}

.site-top a {
    text-decoration: none
}

.site-top a:hover {
    color: #fff
}

.site-top__sep {
    width: 1px;
    height: 12px;
    background: #3b4d68
}

.a-size {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 0 2px
}

.site-head {
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.site-head__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-right: auto
}

.site-brand img {
    width: 52px;
    height: 52px;
    object-fit: contain
}

.site-brand strong {
    display: block;
    font-size: 18px;
    letter-spacing: .02em;
    color: var(--navy)
}

.site-brand span {
    color: var(--muted);
    font-size: 13px
}

.site-search {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden
}

.site-search input {
    border: 0;
    padding: 8px 14px;
    width: 180px;
    outline: none
}

.site-search button {
    border: 0;
    background: var(--navy);
    color: #fff;
    padding: 0 12px;
    cursor: pointer
}

.whats-new {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--saffron);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 14px;
    border-radius: 6px
}

.site-nav {
    background: var(--navy);
    color: #fff
}

.site-nav__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 12px
}

.site-nav a {
    text-decoration: none;
    font-size: 13px;
    padding: 12px 10px;
    white-space: nowrap
}

.site-nav a:hover {
    background: #1a3d6e
}

.site-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 80px
}

.highlights h2,.map-card h2 {
    margin: 0 0 14px;
    font-size: 20px;
    color: var(--navy)
}

.news h2 {
    margin: 0 0 14px;
    font-size: 20px
}

.highlights__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.highlights article {
    background: var(--navy);
    color: #fff;
    padding: 18px;
    border-radius: 8px;
    min-height: 140px
}

.highlights h3 {
    margin: 0 0 8px;
    font-size: 15px
}

.highlights p {
    margin: 0;
    font-size: 13px;
    color: #d5deea
}

.split {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 22px;
    margin-top: 28px
}

.news {
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    padding: 16px 18px 8px
}

.news__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.news h2 {
    color: #fff
}

.news__head a {
    color: var(--saffron);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none
}

.news__item {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,.18)
}

.news__item img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 6px
}

.news__item h3 {
    margin: 0 0 4px;
    font-size: 14px;
    color: #fff
}

.news__item p {
    margin: 0;
    font-size: 13px;
    color: #d5deea
}

.news__item time {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--saffron)
}

.map-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px
}

.map-card p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--muted)
}

.map-card iframe {
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: 6px
}

.boxes {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 22px
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px
}

.box--light {
    background: #fff;
    border: 2px solid var(--navy);
    color: var(--navy)
}

.box--navy {
    background: var(--navy);
    color: #fff
}

.site-foot {
    background: var(--navy-deep);
    color: #c5d0e0;
    padding: 22px 20px;
    font-size: 13px
}

.site-foot__inner {
    max-width: 1180px;
    margin: 0 auto
}

.site-foot p {
    margin: 0 0 6px
}

.site-foot a {
    color: #fff
}

@media (max-width: 900px) {
    .highlights__grid,.split,.boxes {
        grid-template-columns:1fr
    }

    .whats-new,.site-search {
        display: none
    }
}

.widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px
}

.widget__hint {
    position: relative;
    max-width: 240px;
    background: #fff;
    color: var(--text);
    border-radius: 12px;
    padding: 12px 28px 12px 14px;
    box-shadow: var(--shadow);
    font-size: 13px;
    line-height: 1.4
}

.widget__hint:after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: -8px;
    border: 8px solid transparent;
    border-top-color: #fff;
    border-bottom: 0
}

.widget__hint-x {
    position: absolute;
    top: 4px;
    right: 6px;
    border: 0;
    background: none;
    color: #8a93a3;
    cursor: pointer;
    font-size: 16px
}

.widget__fab {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 3px solid var(--saffron);
    background: #0c2340;
    box-shadow: var(--shadow);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    line-height: 0
}

.widget__fab img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.14)
}

.widget__panel {
    width: min(460px,calc(100vw - 24px));
    height: min(640px,calc(100vh - 40px));
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff
}

.mitra {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #e8eef6
}

.mitra__header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%),repeating-linear-gradient(90deg,#0c2340 0,#0c2340 10px,#102a4c 10px,#102a4c 12px,#0c2340 12px,#0c2340 22px);
    color: #fff;
    padding: 10px
}

.mitra__tricolor {
    height: 4px;
    flex-shrink: 0;
    background: linear-gradient(90deg,#f93 0,#f93 33.33%,#fff 33.33%,#fff 66.66%,#138808 66.66%,#138808)
}

.mitra__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0
}

.mitra__emblem-wrap {
    position: relative;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.mitra__emblem {
    width: 30px;
    height: 30px;
    object-fit: contain
}

.mitra__online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    background: var(--green);
    border: 2px solid #fff;
    border-radius: 50%
}

.mitra__name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap
}

.mitra__lang {
  background-color: #163a66 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    width: 118px !important;
    cursor: pointer;
    position: relative;
    padding: 2px 10px !important;
   
}



.mitra__lang option {
    color: #0c2340;
    background: #fff
}

.mitra__icon-btn {
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease,box-shadow .15s ease,color .15s ease;
    padding: 0;
}

.mitra__icon-btn:focus,.mitra__icon-btn:focus-visible,.mitra__icon-btn:active {
    outline: none
}

.mitra__icon-btn--reload:hover {
    color: #cfe8ff;
    background: #388ce647;
    box-shadow: 0 0 0 2px #5aafff8c,0 0 12px #46a0ffb3
}

.mitra__icon-btn--close:hover {
    color: #ffd6d6;
    background: #c8282852;
    box-shadow: 0 0 0 2px #ff5a5a8c,0 0 12px #ff4646b3
}

.mitra__icon-btn.is-spinning svg {
    animation: reloadSpin .7s linear infinite
}

@keyframes reloadSpin {
    to {
        transform: rotate(360deg)
    }
}

.mitra__reload {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    gap: 10px;
    background: #eef3f8e0;
    color: var(--navy);
    font-size: 13px;
    font-weight: 600
}

.mitra__reload-spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border: 3px solid rgba(12,35,64,.15);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: reloadSpin .7s linear infinite
}

.mitra__stage {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #eef3f8
}

.mitra__watermark {
    position: absolute;
    right: -42px;
    bottom: -48px;
    width: 236px;
    height: 236px;
    pointer-events: none;
    z-index: 0
}

.mitra__smoke {
    position: absolute;
    top: -18%;
    right: -18%;
    bottom: -18%;
    left: -18%;
    filter: blur(0)
}

.mitra__smoke-puff {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    will-change: transform,opacity
}

.mitra__smoke-puff--saffron {
    width: 150px;
    height: 150px;
    right: 8px;
    bottom: 28px;
    background: radial-gradient(circle,#ff9933e0,#f930 70%);
    animation: smokeDrift 16s ease-in-out infinite
}

.mitra__smoke-puff--white {
    width: 132px;
    height: 132px;
    right: 46px;
    bottom: 8px;
    background: radial-gradient(circle,#fffffffa,#fff0 72%);
    animation: smokeDrift 19s ease-in-out infinite reverse
}

.mitra__smoke-puff--green {
    width: 140px;
    height: 140px;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle,#138808c7,#13880800 70%);
    animation: smokeDrift 22s ease-in-out infinite 1.4s
}

.mitra__chakra {
    position: relative;
    z-index: 1;
    width: 210px;
    height: 210px;
    opacity: .38;
    animation: chakraSpin 56s linear infinite
}

@keyframes chakraSpin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes smokeDrift {
    0%,to {
        transform: translate(0) scale(1);
        opacity: .88
    }

    40% {
        transform: translate(-10px,-14px) scale(1.08);
        opacity: 1
    }

    70% {
        transform: translate(8px,-6px) scale(.96);
        opacity: .5
    }
}

@media (prefers-reduced-motion: reduce) {
    .mitra__chakra,.mitra__smoke-puff {
        animation: none
    }
}

.mitra__body {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    padding: 14px 12px 8px;
    background: transparent
}

.msg-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-start;
    min-width: 0;
    max-width: 100%
}

.msg-row--user {
    justify-content: flex-end
}

.msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 0;
    padding: 0;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: none
}

.bubble {
    max-width: 82%;
    min-width: 0;
    overflow: hidden;
    background: #ffffffdb;
    border: 1px solid rgba(12,35,64,.1);
    border-radius: 12px 12px 12px 4px;
    padding: 10px 12px;
    box-shadow: 0 1px #0c23400a;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.bubble--user {
    background: linear-gradient(180deg,#163a66,var(--navy));
    color: #fff;
    border-color: transparent;
    border-radius: 12px 12px 4px
}

.bubble__text {
   margin: 0;
    font-size: 13.5px !important;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 400 !important;
}

.bubble__link {
    color: var(--navy-2);
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-all
}

.bubble--user .bubble__link {
    color: #fff
}

.tag {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted)
}

.tag--verified {
    color: #0f7a3d;
    text-decoration: none
}

.quick-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px 36px
}

.pill {
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--navy);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    cursor: pointer
}

.pill:hover:not(:disabled) {
    background: var(--navy);
    color: #fff
}

.pill:disabled {
    opacity: .5
}

.composer {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg,#fffdf8,#fff);
    border-top: 1px solid rgba(12,35,64,.1);
    padding: 8px 10px 10px
}

.composer__field {
    flex: 1;
    border: 2px solid var(--navy) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    outline: none !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px #0c234014 !important
}

.composer__field:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px #0c23402e
}

.composer__mic,.composer__send {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    padding: 0 !important;
}

.composer__mic {
    background: var(--navy);
    color: #fff;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease,box-shadow .15s ease,color .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;

}

.composer__mic:hover:not(:disabled) {
    color: #cfe8ff;
    background: #12325c;
    box-shadow: 0 0 0 2px #5aafff8c,0 0 12px #46a0ffb3
}

.composer__mic:focus,.composer__mic:focus-visible,.composer__mic:active {
    outline: none
}

.composer__mic:disabled {
    opacity: .4;
    cursor: default
}

.composer__mic.is-on {
    background: #fee2e2;
    color: #b91c1c
}

.composer__send {
    background: var(--navy);
    color: #fff
}

.composer__send:disabled {
    opacity: .4
}

.gate {
    padding: 4px 2px 8px
}

.gate__error {
    color: #b91c1c;
    font-size: 12px;
    margin: 4px 0 0 36px
}

.gate__btn {
    background: var(--navy);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    font-weight: 600
}

.error-banner {
    background: #fee2e2;
    color: #9f1239;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px
}

.caret {
    display: inline-block;
    width: 7px;
    height: 12px;
    background: var(--navy);
    margin-left: 2px;
    animation: blink 1s steps(1) infinite
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

.analyzing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12.5px
}

.analyzing__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--navy);
    animation: pulse 1.2s ease-in-out infinite
}

@keyframes pulse {
    50% {
        opacity: .35;
        transform: scale(.85)
    }
}

.admin--login {
    min-height: 100vh;
    font-family: Segoe UI,Noto Sans,sans-serif;
    background: linear-gradient(135deg,#ff9933f2,#fffffff5 48%,#138808e6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px
}

.admin--login .admin__shell {
    width: 100%;
    max-width: 470px
}

.admin--login .admin__card {
    width: 100%;
    background: #fffffffa;
    border-radius: 24px;
    padding: 38px;
    box-shadow: 0 25px 60px #0c234038,0 8px 25px #08172c1a;
    position: relative;
    overflow: hidden
}

.admin--login .admin__card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg,#f93 0,#f93 33.33%,#fff 33.33%,#fff 66.66%,#138808 66.66%,#138808)
}

.admin--login .admin__card:after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 10px;
    background: repeating-linear-gradient(90deg,#0c2340 0,#0c2340 10px,#102a4c 10px,#102a4c 12px,#0c2340 12px,#0c2340 22px)
}

.admin--login .admin__brand {
    text-align: center;
    display: block;
    margin: 18px 0 32px
}

.admin--login .admin__logo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block
}

.admin--login .admin__brand h1 {
    color: #0c2340;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px
}

.admin--login .admin__brand p {
    color: #69727d;
    font-size: 14px;
    line-height: 1.6;
    margin: 0
}

.admin--login .admin__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #eef3f8;
    color: #0c2340;
    padding: 7px 13px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 14px
}

.admin--login .admin__badge span {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block
}

.admin--login .admin__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: none
}

.admin--login .admin__field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 8px
}

.admin--login .admin__input-wrap {
    position: relative
}

.admin--login .admin__input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: #7b858f;
    pointer-events: none
}

.admin--login .admin__input {
    width: 100%;
    height: 52px;
    border: 1px solid #dce1e6;
    border-radius: 12px;
    padding: 0 44px 0 48px;
    font-size: 15px;
    color: #222;
    background: #fafbfc;
    outline: none;
    transition: all .25s ease
}

.admin--login .admin__input:focus {
    background: #fff;
    border-color: #0c2340;
    box-shadow: 0 0 0 4px #0c23401f
}

.admin--login .admin__password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #737d87;
    padding: 5px;
    display: grid;
    place-items: center
}

.admin--login .admin__password-toggle:hover {
    color: #0c2340
}

.admin--login .admin__options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -4px
}

.admin--login .admin__remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #68717b;
    font-size: 13px;
    cursor: pointer
}

.admin--login .admin__remember input {
    width: 15px;
    height: 15px;
    accent-color: #0c2340;
    cursor: pointer
}

.admin--login .gate__btn {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,#163a66,#0c2340);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 8px 18px #0c234047
}

.admin--login .gate__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px #0c234061
}

.admin--login .gate__btn:active {
    transform: translateY(0)
}

.admin--login .admin__security {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    color: #7b838b;
    font-size: 12px
}

.admin--login .admin__security svg {
    width: 15px;
    height: 15px
}

.admin--login .admin__footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #edf0f2;
    color: #9299a1;
    font-size: 11px;
    line-height: 1.6
}

.admin--login .gate__error {
    margin: 0;
    color: #9f1239;
    font-size: 13px
}

@media (max-width: 520px) {
    .admin--login {
        padding:15px
    }

    .admin--login .admin__card {
        padding: 30px 22px;
        border-radius: 20px
    }

    .admin--login .admin__brand h1 {
        font-size: 25px
    }

    .admin--login .admin__logo {
        width: 78px;
        height: 78px
    }
}

.admin--log {
    min-height: 100vh;
    background: linear-gradient(135deg,#ff99332e,#ffffff8c 48%,#13880829),var(--paper);
    display: grid;
    place-items: start center;
    padding: 40px 16px
}

.admin--log .admin__card {
    width: min(860px,100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 10px 30px #0c234014
}

.admin--log .admin__brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px
}

.admin--log .admin__brand img {
    width: 48px;
    height: 48px;
    object-fit: contain
}

.admin--log .admin__brand h1 {
    margin: 0;
    font-size: 20px;
    color: var(--navy)
}

.admin--log .admin__brand p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px
}

.admin__notice {
    background: #f4f7fb;
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
    margin-bottom: 16px
}

.admin__csv {
    border: 0;
    background: var(--navy);
    color: #fff;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer
}

.admin__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 12px
}

.admin__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto
}

.admin__search input {
    min-width: 220px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--text)
}

.admin__search input:focus {
    outline: 2px solid color-mix(in srgb,var(--navy) 35%,transparent);
    border-color: var(--navy)
}

.admin__search button {
    border: 0;
    background: var(--navy);
    color: #fff;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 13px
}

.admin__refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--navy);
    background: #fff;
    color: var(--navy);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease,box-shadow .15s ease,color .15s ease
}

.admin__refresh:hover:not(:disabled),.admin__refresh.is-refreshing {
    background: #12325c;
    color: #fff;
    box-shadow: 0 0 0 2px #5aafff73,0 0 12px #46a0ff8c
}

.admin__refresh:focus,.admin__refresh:focus-visible {
    outline: none
}

.admin__refresh:disabled {
    cursor: wait
}

.admin__refresh-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(12,35,64,.25);
    border-top-color: var(--navy);
    border-radius: 50%;
    flex-shrink: 0
}

.admin__refresh:hover:not(:disabled) .admin__refresh-spinner,.admin__refresh.is-refreshing .admin__refresh-spinner {
    border-color: #ffffff59;
    border-top-color: #fff;
    animation: reloadSpin .7s linear infinite
}

.admin__table-wrap {
    overflow: auto
}

.admin table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px
}

.admin th,.admin td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line)
}

.admin th {
    background: var(--navy);
    color: #fff
}

.admin .gate__error {
    margin-left: 0
}
/* Smooth AI response cursor */
.caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -2px;
    background: currentColor;
    border-radius: 2px;
    animation: mitraCaretBlink 0.8s ease-in-out infinite;
}

@keyframes mitraCaretBlink {
    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}

/* Streaming assistant message */
.bubble--assistant .bubble__text {
    line-height: 1.6;
    word-break: break-word;
}

/* Prevent ugly layout movement during streaming */
.msg-row {
    contain: layout style;
}

/* Smooth chat scrolling */
.mitra__body {
    scroll-behavior: smooth;
}

/* Typing dots */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.typing-indicator::before,
.typing-indicator::after {
    content: "";
}

.typing-indicator {
    animation: mitraTyping 1.2s ease-in-out infinite;
}

@keyframes mitraTyping {
    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}