/* =========================================================
   PTK CHAT LITE - CLEAN ROOM UI
   SAFE MODE: CSS only / clean mobile layout
========================================================= */

/* =========================================================
   BASE WRAP
========================================================= */

.ptk-chat-lite-wrap,
.ptk-chat-lite-box{
    width:100%;
    max-width:100%;
    box-sizing:border-box;

    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:16px;

    background:#fff;
    color:#111827;
}

/* =========================================================
   TOPBAR
========================================================= */

.ptk-chat-topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;

    margin-bottom:16px;
}

.ptk-chat-title{
    margin:0 0 6px;
    color:#111827;
    font-size:22px;
    line-height:1.3;
    font-weight:800;
}

.ptk-chat-submeta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;

    color:#6b7280;
    font-size:14px;
    line-height:1.45;
}

.ptk-chat-topbar-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.ptk-chat-inline-form{
    margin:0;
}

/* =========================================================
   BUTTONS - CLEAN
========================================================= */

.ptk-chat-btn{
    appearance:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-height:40px;
    padding:9px 14px;

    border:1px solid transparent;
    border-radius:10px;

    background:#a40000;
    color:#fff !important;

    text-decoration:none !important;
    cursor:pointer;

    font-size:14px;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;

    box-shadow:none;

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

.ptk-chat-btn:hover{
    background:#8f0000;
    color:#fff !important;
    transform:translateY(-1px);
}

.ptk-chat-btn:active{
    transform:scale(.98);
}

.ptk-chat-btn:focus-visible{
    outline:2px solid rgba(196,154,61,.45);
    outline-offset:2px;
}

.ptk-chat-btn--ghost{
    background:#f3f4f6;
    border-color:#e5e7eb;
    color:#111827 !important;
}

.ptk-chat-btn--ghost:hover{
    background:#e5e7eb;
    border-color:#d1d5db;
    color:#111827 !important;
}

.ptk-chat-btn--danger{
    background:#b91c1c;
    border-color:#b91c1c;
    color:#fff !important;
}

.ptk-chat-btn--danger:hover{
    background:#991b1b;
    border-color:#991b1b;
    color:#fff !important;
}

/* =========================================================
   ROOM HEADER
========================================================= */

.ptk-chat-room-header{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:14px;
    align-items:start;

    margin-bottom:14px;
}

.ptk-chat-room-header__thumb{
    width:88px;
    height:88px;
    border-radius:14px;
    overflow:hidden;
    background:#f3f4f6;
}

.ptk-chat-room-header__thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.ptk-chat-room-header__no-thumb{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    color:#6b7280;
    font-size:12px;
    text-align:center;
}

.ptk-chat-room-header__links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:10px;
}

/* =========================================================
   MESSAGE LIST
========================================================= */

.ptk-chat-messages{
    display:flex;
    flex-direction:column;
    gap:10px;

    margin:0 0 16px;
}

.ptk-chat-message{
    width:fit-content;
    max-width:82%;
    padding:11px 13px;

    border:1px solid #e5e7eb;
    border-radius:14px;

    background:#f9fafb;
    color:#111827;
}

.ptk-chat-message.is-me{
    align-self:flex-end;
    background:#eef7ff;
    border-color:#dbeafe;
}

.ptk-chat-message.is-other{
    align-self:flex-start;
    background:#f9fafb;
}

.ptk-chat-message__meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin-bottom:7px;

    color:#6b7280;
    font-size:12px;
    line-height:1.35;
}

.ptk-chat-message__body{
    color:#111827;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    line-height:1.6;
}

.ptk-chat-message.is-new{opacity:1}
.ptk-chat-message.is-mid{opacity:.92}
.ptk-chat-message.is-old{opacity:.78}

/* =========================================================
   MESSAGE FORM
========================================================= */

.ptk-chat-form{
    margin:0;
}

.ptk-chat-form textarea{
    display:block;
    width:100%;
    min-height:110px;
    box-sizing:border-box;

    border:1px solid #d1d5db;
    border-radius:12px;
    padding:12px;

    background:#fff;
    color:#111827;

    font-size:14px;
    line-height:1.55;
    resize:vertical;
}

.ptk-chat-form textarea:focus{
    outline:none;
    border-color:#c49a3d;
}

.ptk-chat-form__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;

    margin-top:12px;
}

/* =========================================================
   ROOM LIST
========================================================= */

.ptk-chat-room-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.ptk-chat-room-card{
    display:block;
    box-sizing:border-box;

    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:14px;

    background:#fff;
    color:inherit;
    text-decoration:none;
}

.ptk-chat-room-card__link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.ptk-chat-room-card__layout{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:12px;
    align-items:start;
}

.ptk-chat-room-card__thumb{
    width:72px;
    height:72px;
    border-radius:12px;
    overflow:hidden;
    background:#f3f4f6;
}

.ptk-chat-room-card__thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.ptk-chat-room-card__no-thumb{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    color:#6b7280;
    font-size:12px;
    text-align:center;
}

.ptk-chat-room-card__head,
.ptk-chat-room-card__meta{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}

.ptk-chat-room-card__meta{
    margin-top:8px;
    color:#6b7280;
    font-size:14px;
    line-height:1.45;
}

.ptk-chat-room-card__snippet{
    margin-top:10px;
    color:#374151;
    line-height:1.55;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.ptk-chat-room-card__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;

    margin-top:12px;
}

.ptk-chat-room-card.is-new{
    border-color:#3b82f6;
}

.ptk-chat-room-card.is-mid{
    opacity:.94;
}

.ptk-chat-room-card.is-old{
    opacity:.82;
}

.ptk-chat-room-card.has-unread{
    border-color:#dc2626;
}

.ptk-chat-room-card__unread{
    margin-top:10px;
}

/* =========================================================
   UNREAD BADGES
========================================================= */

.ptk-chat-badge,
.ptk-chat-badge-target .ptk-chat-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:18px;
    height:18px;
    padding:0 5px;

    border-radius:999px;
    background:#e11d48;
    color:#fff;

    font-size:11px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.ptk-chat-badge{
    min-width:24px;
    height:auto;
    padding:4px 10px;
    background:#dc2626;
    font-size:12px;
}

.ptk-chat-badge-target{
    position:relative;

    display:inline-flex;
    align-items:center;
    gap:6px;
}

.ptk-badge-dot{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-left:6px;
    padding:2px 8px;

    border-radius:999px;
    background:#dc2626;
    color:#fff;

    font-size:12px;
    font-weight:700;
    line-height:1;
}

/* =========================================================
   NOTICE BOX
========================================================= */

.ptk-chat-lite-box.success{
    background:#ecfdf5;
    border-color:#10b981;
    color:#065f46;
}

.ptk-chat-lite-box.error{
    background:#fef2f2;
    border-color:#dc2626;
    color:#7f1d1d;
}

.ptk-chat-lite-box.notice{
    background:#eff6ff;
    border-color:#3b82f6;
    color:#1e3a8a;
}

/* =========================================================
   READABILITY FIX
========================================================= */

.ptk-chat-lite-wrap h1,
.ptk-chat-lite-wrap h2,
.ptk-chat-lite-wrap h3,
.ptk-chat-lite-wrap h4,
.ptk-chat-lite-wrap strong{
    color:#111827;
}

.ptk-chat-lite-wrap a{
    color:#1f2937;
}

.ptk-chat-lite-wrap a:hover{
    color:#92400e;
}

.ptk-chat-lite-wrap .ptk-highlight,
.ptk-chat-lite-wrap .ptk-gold{
    color:#92400e;
}

/* =========================================================
   HELP BOX - CLEAN LIGHT
========================================================= */

.ptk-chat-help-wrap{
    margin:14px 0 16px;
    padding:0;
}

.ptk-chat-help-btn{
    appearance:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    width:100%;
    padding:10px 14px;

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

    background:#f9fafb;
    color:#111827;

    font-size:13px;
    font-weight:600;
    line-height:1.35;

    cursor:pointer;

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

.ptk-chat-help-btn:hover{
    background:#f3f4f6;
    border-color:#9ca3af;
    color:#111827;
}

.ptk-chat-help-content{
    display:none;

    margin-top:10px;
    padding:14px 16px;

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

    background:#f9fafb;
    color:#374151;

    font-size:13px;
    line-height:1.7;
}

.ptk-chat-help-list{
    margin:0;
    padding-left:18px;
}

.ptk-chat-help-list li{
    margin:6px 0;
    color:#374151;
}

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

@media(max-width:768px){

    .ptk-chat-lite-wrap,
    .ptk-chat-lite-box{
        padding:12px;
        border-radius:14px;
    }

    .ptk-chat-topbar{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
        margin-bottom:14px;
    }

    .ptk-chat-title{
        font-size:19px;
    }

    .ptk-chat-submeta{
        gap:6px 10px;
        font-size:13px;
    }

    .ptk-chat-topbar-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
        gap:8px;
    }

    .ptk-chat-topbar-actions .ptk-chat-btn,
    .ptk-chat-topbar-actions .ptk-chat-inline-form,
    .ptk-chat-topbar-actions .ptk-chat-inline-form .ptk-chat-btn{
        width:100%;
    }

    .ptk-chat-room-header{
        grid-template-columns:72px minmax(0,1fr);
        gap:12px;
        align-items:start;
    }

    .ptk-chat-room-header__thumb{
        width:72px;
        height:72px;
        border-radius:12px;
    }

    .ptk-chat-room-header__links{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        width:100%;
    }

    .ptk-chat-room-header__links .ptk-chat-btn{
        width:100%;
    }

    .ptk-chat-messages{
        gap:9px;
    }

    .ptk-chat-message{
        width:auto;
        max-width:92%;
        padding:10px 12px;
        border-radius:13px;
    }

    .ptk-chat-message.is-me{
        margin-left:32px;
    }

    .ptk-chat-message.is-other{
        margin-right:32px;
    }

    .ptk-chat-message__meta{
        display:grid;
        grid-template-columns:1fr;
        gap:3px;
        margin-bottom:6px;
    }

    .ptk-chat-form textarea{
        min-height:96px;
        font-size:14px;
    }

    .ptk-chat-form__actions{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .ptk-chat-form__actions .ptk-chat-btn{
        width:100%;
    }

    .ptk-chat-room-card{
        padding:12px;
        border-radius:14px;
    }

    .ptk-chat-room-card__layout{
        grid-template-columns:64px minmax(0,1fr);
        gap:10px;
    }

    .ptk-chat-room-card__thumb{
        width:64px;
        height:64px;
        border-radius:10px;
    }

    .ptk-chat-room-card__head,
    .ptk-chat-room-card__meta{
        display:grid;
        grid-template-columns:1fr;
        gap:4px;
    }

    .ptk-chat-room-card__snippet{
        margin-top:8px;
        font-size:13px;
    }

    .ptk-chat-room-card__actions{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        justify-content:stretch;
        width:100%;
    }

    .ptk-chat-room-card__actions .ptk-chat-btn,
    .ptk-chat-room-card__actions .ptk-chat-inline-form,
    .ptk-chat-room-card__actions .ptk-chat-inline-form .ptk-chat-btn{
        width:100%;
    }

    .ptk-chat-help-content{
        padding:12px 14px;
        font-size:12.5px;
    }

}

@media(max-width:420px){

    .ptk-chat-room-header{
        grid-template-columns:1fr;
    }

    .ptk-chat-room-header__thumb{
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
    }

    .ptk-chat-room-card__layout{
        grid-template-columns:1fr;
    }

    .ptk-chat-room-card__thumb{
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
    }

    .ptk-chat-message{
        max-width:100%;
    }

    .ptk-chat-message.is-me,
    .ptk-chat-message.is-other{
        margin-left:0;
        margin-right:0;
    }

}