/* =========================================================
   NEXORAHOST SUPPORT — TICKET V2
   ========================================================= */

.tk2-page{
    width:100%;
    max-width:1280px;
    margin:0 auto;
}


/* HEADER */

.tk2-ticket-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;

    margin-bottom:18px;
}

.tk2-ticket-ref{
    margin-bottom:7px;

    color:var(--muted);

    font-size:11px;
    font-weight:700;

    letter-spacing:.05em;
}

.tk2-ticket-title h1{
    margin:0;

    font-size:30px;
    line-height:1.18;
}

.tk2-ticket-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;

    margin-top:9px;

    color:var(--muted);

    font-size:11px;
}

.tk2-dot-separator{
    opacity:.4;
}

.tk2-ticket-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}


/* BADGES */

.tk2-badge{
    display:inline-flex;
    align-items:center;

    padding:7px 10px;

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

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

.tk2-status-open{
    border-color:#537ac0;
    color:#8eb6ff;
}

.tk2-status-pending{
    border-color:#a98342;
    color:#e6bc71;
}

.tk2-status-resolved{
    border-color:#3f885d;
    color:#78d99d;
}

.tk2-status-closed{
    opacity:.55;
}

.tk2-priority-urgent{
    border-color:#a94751;
    color:#ff909a;
}

.tk2-priority-high{
    border-color:#a67841;
    color:#ebb167;
}


/* SUMMARY */

.tk2-summary{
    display:grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        1fr;

    gap:12px;

    margin-bottom:18px;
}

.tk2-summary-item{
    min-width:0;

    padding:15px 17px;

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

    background:var(--panel);
}

.tk2-summary-item>span{
    display:block;

    margin-bottom:6px;

    color:var(--muted);

    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.tk2-summary-item>strong{
    display:block;

    font-size:11px;

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

.tk2-summary-item>small{
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:9px;

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


/* LAYOUT */

.tk2-layout{
    display:grid;

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

    gap:18px;

    align-items:start;
}

.tk2-main,
.tk2-sidebar{
    display:grid;
    gap:16px;
}


/* PANEL */

.tk2-panel{
    overflow:hidden;

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

    background:var(--panel);
}

.tk2-panel-header{
    min-height:68px;

    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:16px 19px;

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

.tk2-panel-header.compact{
    min-height:58px;
}

.tk2-eyebrow{
    display:block;

    margin-bottom:5px;

    color:var(--muted);

    font-size:8px;
    font-weight:800;

    letter-spacing:.09em;
}

.tk2-panel-header h2{
    margin:0;

    font-size:14px;
}

.tk2-message-count,
.tk2-note-count{
    padding:5px 8px;

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

    color:var(--muted);

    font-size:9px;
}


/* THREAD */

.tk2-thread{
    padding:18px;
}

.tk2-message{
    position:relative;

    display:grid;

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

    gap:13px;

    padding-bottom:21px;
}

.tk2-message:last-child{
    padding-bottom:0;
}

.tk2-message:not(:last-child)::before{
    content:"";

    position:absolute;

    left:20px;
    top:44px;
    bottom:0;

    width:1px;

    background:var(--line);
}

.tk2-message-avatar{
    position:relative;
    z-index:1;

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:1px solid #384058;
    border-radius:12px;

    background:#181e2c;

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

.tk2-message-agent .tk2-message-avatar{
    border-color:#6958ab;
    background:#1e1a31;
}

.tk2-message-content{
    min-width:0;

    padding:14px;

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

    background:#111622;
}

.tk2-message-agent .tk2-message-content{
    border-color:#40385e;
    background:#141522;
}

.tk2-message-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    margin-bottom:10px;
}

.tk2-message-head strong{
    font-size:11px;
}

.tk2-message-head time{
    flex:0 0 auto;

    color:var(--muted);

    font-size:9px;
}

.tk2-agent-label,
.tk2-client-label{
    display:inline-flex;

    margin-left:7px;

    padding:3px 6px;

    border-radius:999px;

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

.tk2-agent-label{
    border:1px solid #5c4c9b;

    color:#b5a4fa;
}

.tk2-client-label{
    border:1px solid #36425a;

    color:#8997b5;
}

.tk2-message-body{
    white-space:pre-wrap;

    font-size:12px;
    line-height:1.65;
}


/* REPLY */

.tk2-reply-form{
    padding:18px;
}

.tk2-reply-form textarea{
    min-height:135px;

    line-height:1.6;
}

.tk2-reply-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    margin-top:12px;
}

.tk2-reply-footer span{
    color:var(--muted);

    font-size:9px;
}

.tk2-closed-notice{
    padding:16px;

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

    color:var(--muted);

    background:var(--panel);

    font-size:11px;
}


/* INFORMATION SIDEBAR */

.tk2-info-list{
    padding:5px 18px 14px;
}

.tk2-info-list>div{
    padding:12px 0;

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

.tk2-info-list>div:last-child{
    border-bottom:0;
}

.tk2-info-list span{
    display:block;

    margin-bottom:5px;

    color:var(--muted);

    font-size:8px;

    text-transform:uppercase;
    letter-spacing:.05em;
}

.tk2-info-list strong{
    display:block;

    font-size:10px;

    overflow-wrap:anywhere;
}

.tk2-info-list small{
    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:8px;

    overflow-wrap:anywhere;
}


/* PRIORITY TEXT */

.tk2-text-priority-urgent{
    color:#ff8b96;
}

.tk2-text-priority-high{
    color:#e8b46e;
}


/* ADMIN */

.tk2-admin-form{
    padding:17px;
}

.tk2-admin-field{
    margin-bottom:13px;
}

.tk2-admin-field label{
    display:block;

    margin-bottom:6px;

    color:var(--muted);

    font-size:9px;
}

.tk2-admin-field select{
    min-height:41px;

    font-size:10px;
}

.tk2-admin-save{
    width:100%;

    margin-top:5px;
}


/* NOTES */

.tk2-notes{
    padding:14px 16px 0;
}

.tk2-note{
    margin-bottom:9px;

    padding:11px;

    border:1px solid #66562e;
    border-radius:10px;

    background:#1b1820;
}

.tk2-note-body{
    font-size:10px;
    line-height:1.5;
}

.tk2-note-meta{
    margin-top:7px;

    color:var(--muted);

    font-size:8px;
}

.tk2-empty-notes{
    padding:8px 0 13px;

    color:var(--muted);

    font-size:9px;
}

.tk2-note-form{
    padding:14px 16px 16px;
}

.tk2-note-form textarea{
    min-height:90px;

    font-size:10px;
}

.tk2-note-form .btn{
    width:100%;

    margin-top:8px;
}


/* RESPONSIVE */

@media(max-width:1000px){

    .tk2-layout{
        grid-template-columns:1fr;
    }

    .tk2-sidebar{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .tk2-admin-panel{
        grid-column:1/-1;
    }
}


@media(max-width:760px){

    .tk2-ticket-header{
        flex-direction:column;
    }

    .tk2-ticket-badges{
        justify-content:flex-start;
    }

    .tk2-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .tk2-sidebar{
        grid-template-columns:1fr;
    }

    .tk2-admin-panel{
        grid-column:auto;
    }

    .tk2-message-head,
    .tk2-reply-footer{
        flex-direction:column;
        align-items:flex-start;
    }
}


@media(max-width:520px){

    .tk2-summary{
        grid-template-columns:1fr;
    }

    .tk2-ticket-title h1{
        font-size:24px;
    }

    .tk2-message{
        grid-template-columns:1fr;
    }

    .tk2-message-avatar,
    .tk2-message:not(:last-child)::before{
        display:none;
    }
}



/* =========================================================
   TICKET ADMIN LOCK + DRAWER
   ========================================================= */

.tk2-admin-lock{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid #594b8e;
    border-radius:10px;

    background:#191629;
    color:#b9a8ff;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.tk2-admin-lock:hover{
    background:#211b36;
    border-color:#7f68ce;
    transform:translateY(-1px);
}

.tk2-admin-lock svg{
    width:15px;
    height:15px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* DRAWER */

.tk2-admin-drawer{
    position:fixed;
    inset:0;

    z-index:9999;

    visibility:hidden;
    pointer-events:none;
}

.tk2-admin-drawer.open{
    visibility:visible;
    pointer-events:auto;
}

.tk2-admin-backdrop{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    padding:0;
    border:0;

    opacity:0;

    background:rgba(4,7,12,.72);
    backdrop-filter:blur(4px);

    cursor:default;

    transition:opacity .18s ease;
}

.tk2-admin-drawer.open .tk2-admin-backdrop{
    opacity:1;
}


.tk2-admin-drawer-panel{
    position:absolute;

    top:0;
    right:0;

    width:min(440px,100%);
    height:100%;

    display:flex;
    flex-direction:column;

    background:#0d121d;

    border-left:1px solid #30384c;

    box-shadow:
        -20px 0 60px rgba(0,0,0,.35);

    transform:translateX(100%);

    transition:transform .2s ease;
}

.tk2-admin-drawer.open .tk2-admin-drawer-panel{
    transform:translateX(0);
}


/* HEADER */

.tk2-admin-drawer-head{
    min-height:82px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    padding:17px 19px;

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

.tk2-admin-drawer-title{
    display:flex;
    align-items:center;
    gap:12px;

    min-width:0;
}

.tk2-admin-lock-large{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    border:1px solid #594b8e;
    border-radius:11px;

    background:#191629;
    color:#b9a8ff;
}

.tk2-admin-lock-large svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.tk2-admin-drawer-title span{
    display:block;

    margin-bottom:4px;

    color:#9588cf;

    font-size:8px;
    font-weight:800;

    letter-spacing:.1em;
}

.tk2-admin-drawer-title h2{
    margin:0;

    font-size:15px;
}

.tk2-admin-drawer-title p{
    margin:4px 0 0;

    color:var(--muted);

    font-size:9px;
}


.tk2-admin-drawer-close{
    width:34px;
    height:34px;

    flex:0 0 34px;

    padding:0;

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

    background:#141a27;
    color:#aeb6c8;

    cursor:pointer;

    font-size:20px;
    line-height:1;
}

.tk2-admin-drawer-close:hover{
    color:#fff;
    border-color:#414a62;
}


/* BODY */

.tk2-admin-drawer-body{
    flex:1;

    overflow:auto;

    padding:18px;
}


/* CURRENT STATE */

.tk2-admin-current{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:8px;

    margin-bottom:18px;
}

.tk2-admin-current>div{
    min-width:0;

    padding:11px;

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

    background:#111722;
}

.tk2-admin-current span{
    display:block;

    margin-bottom:5px;

    color:var(--muted);

    font-size:8px;

    text-transform:uppercase;
}

.tk2-admin-current strong{
    display:block;

    font-size:9px;

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


/* FORM */

.tk2-admin-drawer-form{
    padding:17px;

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

    background:#111722;
}

.tk2-admin-drawer-form .tk2-admin-field{
    margin-bottom:14px;
}

.tk2-admin-drawer-form .tk2-admin-field:last-of-type{
    margin-bottom:0;
}

.tk2-admin-drawer-form label{
    display:block;

    margin-bottom:6px;

    color:#a9b1c2;

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

.tk2-admin-drawer-form select{
    min-height:43px;

    background:#0d121d;

    font-size:10px;
}


/* WARNING */

.tk2-admin-warning{
    margin-top:18px;

    padding:12px;

    border:1px solid #4c416d;
    border-radius:10px;

    background:#171522;
}

.tk2-admin-warning strong{
    display:block;

    margin-bottom:5px;

    color:#c0b1ff;

    font-size:9px;
}

.tk2-admin-warning span{
    display:block;

    color:#8e97aa;

    font-size:8px;
    line-height:1.5;
}


/* SAVE */

.tk2-admin-drawer-save{
    width:100%;

    min-height:42px;

    margin-top:15px;
}


/* BODY LOCK */

body.tk2-admin-drawer-open{
    overflow:hidden;
}


/* MOBILE */

@media(max-width:520px){

    .tk2-admin-drawer-panel{
        width:100%;
    }

    .tk2-admin-current{
        grid-template-columns:1fr;
    }
}



/* =========================================================
   ADMIN LOCK V2
   ========================================================= */

.tk2-admin-lock{
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid #58498b;
    border-radius:10px;

    background:#191628;
    color:#b6a5fa;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.tk2-admin-lock:hover{
    background:#221c36;
    border-color:#8069cb;
    transform:translateY(-1px);
}

.tk2-admin-lock svg{
    width:15px;
    height:15px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   ADMIN DRAWER
   ========================================================= */

.tk2-admin-drawer{
    position:fixed !important;

    top:0;
    right:0;

    z-index:10000;

    width:min(420px,100vw);
    height:100vh;

    margin:0 !important;

    border-radius:0 !important;
    border-top:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;

    background:#0d121d !important;

    box-shadow:
        -24px 0 70px rgba(0,0,0,.45);

    overflow:auto;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateX(100%);

    transition:
        transform .2s ease,
        opacity .18s ease,
        visibility .18s ease;
}

.tk2-admin-drawer.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateX(0);
}


/* Empêche la règle tablette de repositionner le drawer */

.tk2-admin-drawer.tk2-admin-panel{
    grid-column:auto !important;
}


/* Header */

.tk2-admin-drawer .tk2-panel-header{
    position:sticky;
    top:0;
    z-index:5;

    min-height:72px;

    background:#101621;

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

.tk2-admin-close{
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:grid;
    place-items:center;

    padding:0;

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

    background:#171c29;
    color:#adb6c8;

    cursor:pointer;

    font-size:20px;
    line-height:1;
}

.tk2-admin-close:hover{
    color:#fff;
    border-color:#444d66;
}


/* Formulaire */

.tk2-admin-drawer .tk2-admin-form{
    padding:20px;
}

.tk2-admin-drawer .tk2-admin-field{
    margin-bottom:16px;
}

.tk2-admin-drawer .tk2-admin-field label{
    margin-bottom:7px;

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

    color:#aeb6c7;
}

.tk2-admin-drawer .tk2-admin-field select{
    min-height:44px;

    border-radius:10px;

    background:#101622;

    font-size:11px;
}

.tk2-admin-drawer .tk2-admin-save{
    min-height:44px;

    margin-top:6px;
}


/* Fond sombre derrière le panneau */

body.tk2-admin-open::after{
    content:"";

    position:fixed;
    inset:0;

    z-index:9999;

    background:rgba(4,7,12,.68);
    backdrop-filter:blur(3px);
}

body.tk2-admin-open{
    overflow:hidden;
}


/* Le drawer reste au-dessus du backdrop */

body.tk2-admin-open .tk2-admin-drawer{
    z-index:10000;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:520px){

    .tk2-admin-drawer{
        width:100vw;
    }

}



/* =========================================================
   NOTES INTERNES — BUTTON
   ========================================================= */

.tk2-notes-lock{
    position:relative;
}

.tk2-notes-lock svg{
    width:16px;
    height:16px;
}

.tk2-notes-indicator{
    position:absolute;

    top:-6px;
    right:-6px;

    min-width:17px;
    height:17px;

    display:grid;
    place-items:center;

    padding:0 4px;

    border:2px solid #090d16;
    border-radius:999px;

    background:#8b6cf6;
    color:#fff;

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


/* =========================================================
   NOTES INTERNES — DRAWER
   ========================================================= */

.tk2-notes-drawer{
    position:fixed !important;

    top:0;
    right:0;

    z-index:10000;

    width:min(440px,100vw);
    height:100vh;

    margin:0 !important;

    border-radius:0 !important;

    border-top:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;

    border-left:1px solid #30384c !important;

    background:#0d121d !important;

    box-shadow:
        -24px 0 70px rgba(0,0,0,.45);

    overflow:auto;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateX(100%);

    transition:
        transform .2s ease,
        opacity .18s ease,
        visibility .18s ease;
}


.tk2-notes-drawer.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateX(0);
}


/* Header fixe */

.tk2-notes-drawer .tk2-panel-header{
    position:sticky;

    top:0;

    z-index:5;

    min-height:72px;

    background:#101621;

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


/* Liste des notes */

.tk2-notes-drawer .tk2-notes{
    padding:18px 18px 4px;
}


.tk2-notes-drawer .tk2-note{
    margin-bottom:11px;

    padding:13px;

    border:1px solid #5c4d2c;
    border-radius:11px;

    background:#1b1820;
}


.tk2-notes-drawer .tk2-note-body{
    font-size:11px;
    line-height:1.6;

    white-space:pre-wrap;
}


.tk2-notes-drawer .tk2-note-meta{
    display:flex;
    align-items:center;

    margin-top:9px;

    color:#8e97aa;

    font-size:8px;
}


/* Aucune note */

.tk2-notes-drawer .tk2-empty-notes{
    padding:20px;

    border:1px dashed #30384c;
    border-radius:10px;

    color:#7f899d;

    text-align:center;

    font-size:9px;
}


/* Formulaire nouvelle note */

.tk2-notes-drawer .tk2-note-form{
    margin:14px 18px 18px;

    padding:15px;

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

    background:#111722;
}


.tk2-notes-drawer .tk2-note-form::before{
    content:"Nouvelle note interne";

    display:block;

    margin-bottom:10px;

    color:#aeb6c7;

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


.tk2-notes-drawer .tk2-note-form textarea{
    min-height:115px;

    padding:11px;

    border-radius:9px;

    background:#0d121d;

    font-size:10px;
    line-height:1.5;
}


.tk2-notes-drawer .tk2-note-form .btn{
    width:100%;

    min-height:40px;

    margin-top:9px;
}


/* Information de confidentialité */

.tk2-notes-drawer .tk2-note-form::after{
    content:"Visible uniquement par les administrateurs.";

    display:block;

    margin-top:9px;

    color:#747e94;

    font-size:8px;

    text-align:center;
}


@media(max-width:520px){

    .tk2-notes-drawer{
        width:100vw;
    }

}