/* =========================================================
 LIVEHELP UI THEME
 Chat page + Home widget + Admin page
 Upgraded visual hierarchy + cleaner widget layout
 ========================================================= */

/* -----------------------------
 Root variables
----------------------------- */
:root{
 --bg: #000;
 --panel: rgba(12,12,12,0.94);
 --panel2: rgba(8,8,8,0.96);
 --panel3: rgba(0,0,0,0.42);
 --panel4: rgba(255,255,255,0.04);
 --panel5: rgba(255,255,255,0.03);

 --border: rgba(255,255,255,0.10);
 --border2: rgba(255,255,255,0.14);
 --border3: rgba(255,255,255,0.18);

 --text: #fff;
 --muted: rgba(255,255,255,0.78);
 --muted2: rgba(255,255,255,0.60);
 --muted3: rgba(255,255,255,0.38);

 --red: #ff0000;
 --red2: rgba(255,0,0,0.95);
 --red3: rgba(255,0,0,0.16);
 --red4: rgba(255,0,0,0.08);

 --green: rgba(0,190,90,0.95);
 --green2: rgba(0,190,90,0.16);
 --orange: rgba(255,140,0,0.95);

 --shadow: 0 18px 70px rgba(0,0,0,0.76);
 --shadow-soft: 0 8px 30px rgba(0,0,0,0.36);
 --shadow-card: 0 10px 24px rgba(0,0,0,0.20);
 --glow-red: 0 0 16px rgba(255,0,0,0.16);
 --glow-green: 0 0 14px rgba(0,190,90,0.18);

 --radius: 18px;
 --radius2: 14px;
 --radius3: 12px;
 --radius4: 10px;

 --widget-w: 400px;
 --widget-h: 640px;
 --widget-right: 20px;
 --widget-bottom: 98px;

 --bubble-right: 20px;
 --bubble-bottom: 20px;
}

/* -----------------------------
 Base reset
----------------------------- */
*{ box-sizing:border-box; }

html, body{
 margin:0;
 padding:0;
 height:100%;
 background:var(--bg);
 color:var(--text);
 font-family:Arial, sans-serif;
}

body{
 background:
 radial-gradient(1200px 600px at 50% 0%, rgba(255,0,0,0.10), transparent 60%),
 radial-gradient(900px 500px at 0% 100%, rgba(255,255,255,0.06), transparent 60%),
 #000;
}

a{
 color:var(--text);
 text-decoration:none;
}

button,
input,
textarea,
select{
 font-family:inherit;
}

img{
 max-width:100%;
 display:block;
}

/* -----------------------------
 Helpers
----------------------------- */
.hidden{
 display:none !important;
}

/* -----------------------------
 Generic utility controls
----------------------------- */
.btn{
 border:1px solid var(--border2);
 background:rgba(0,0,0,0.6);
 color:var(--text);
 border-radius:var(--radius2);
 padding:10px 14px;
 cursor:pointer;
 font-weight:900;
 transition:background .12s ease, transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover{
 background:rgba(255,255,255,0.06);
}
.btn:active{
 transform:translateY(1px);
}
.btn:disabled{
 opacity:.55;
 cursor:not-allowed;
}

.btn-red{
 background:var(--red2);
 border-color:rgba(255,255,255,0.15);
}
.btn-red:hover{
 filter:brightness(1.05);
 box-shadow:var(--glow-red);
}

.btn-muted{
 background:rgba(60,60,60,0.35);
}

.btn-ghost{
 background:rgba(0,0,0,0.35);
}

.input{
 height:44px;
 padding:0 14px;
 border-radius:var(--radius2);
 border:1px solid rgba(255,255,255,0.16);
 background:rgba(230,240,255,0.95);
 color:#000;
 outline:none;
}
.input:focus{
 border-color:rgba(255,0,0,0.30);
 box-shadow:0 0 0 3px rgba(255,0,0,0.08);
}

.select{
 height:42px;
 padding:0 12px;
 border-radius:var(--radius2);
 border:1px solid rgba(255,255,255,0.16);
 background:rgba(0,0,0,0.65);
 color:var(--text);
 outline:none;
}

.textarea{
 min-height:56px;
 max-height:160px;
 resize:vertical;
 border-radius:var(--radius);
 border:1px solid rgba(255,0,0,0.22);
 background:rgba(0,0,0,0.65);
 color:var(--text);
 padding:12px 14px;
 outline:none;
}
.textarea:focus{
 border-color:rgba(255,0,0,0.36);
 box-shadow:0 0 0 3px rgba(255,0,0,0.08);
}

/* -----------------------------
 Toast
----------------------------- */
.lh-toast{
 position:fixed;
 left:50%;
 bottom:24px;
 transform:translateX(-50%) translateY(20px);
 background:rgba(0,0,0,0.88);
 border:1px solid rgba(255,255,255,0.14);
 color:#fff;
 padding:10px 14px;
 border-radius:14px;
 opacity:0;
 transition:opacity .25s ease, transform .25s ease;
 z-index:99999;
 font-size:13px;
 box-shadow:var(--shadow-soft);
}
.lh-toast.show{
 opacity:1;
 transform:translateX(-50%) translateY(0);
}

/* =========================================================
 USER CHAT PAGE
 ========================================================= */

#chat-box{
 max-width:1200px;
 margin:22px auto;
 border-radius:var(--radius);
 border:1px solid var(--border);
 background:var(--panel);
 box-shadow:var(--shadow);
 overflow:hidden;
 display:flex;
 flex-direction:column;
 min-height:680px;
}

.lh-user-page{
 position:relative;
}

/* -----------------------------
 Chat header
----------------------------- */
#chat-header{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
 padding:16px 18px;
 background:var(--panel2);
 border-bottom:1px solid var(--border);
 flex:0 0 auto;
}

.lh-header-left,
.lh-header-center,
.lh-header-right{
 display:flex;
 align-items:center;
}

.lh-header-left{
 flex:1 1 33%;
 justify-content:flex-start;
}
.lh-header-center{
 flex:1 1 33%;
 justify-content:center;
}
.lh-header-right{
 flex:1 1 33%;
 justify-content:flex-end;
}

.lh-title{
 font-size:18px;
 font-weight:900;
 letter-spacing:.8px;
 text-transform:uppercase;
}

#close-chat,
#minimize-btn{
 width:40px;
 height:40px;
 border-radius:12px;
 border:1px solid var(--border2);
 background:rgba(0,0,0,0.60);
 color:var(--text);
 cursor:pointer;
 font-size:18px;
 line-height:1;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:background .12s ease, transform .08s ease, box-shadow .12s ease;
}
#close-chat:hover,
#minimize-btn:hover{
 background:rgba(255,255,255,0.06);
 box-shadow:var(--glow-red);
}
#close-chat:active,
#minimize-btn:active{
 transform:translateY(1px);
}

#lh-sound-toggle,
.lh-sound-toggle{
 min-width:96px;
 height:36px;
 padding:0 12px;
 border-radius:12px;
 border:1px solid rgba(255,255,255,0.14);
 background:rgba(0,0,0,0.55);
 color:#fff;
 font-size:11px;
 font-weight:900;
 cursor:pointer;
 transition:background .12s ease, transform .08s ease, box-shadow .12s ease;
}
#lh-sound-toggle:hover,
.lh-sound-toggle:hover{
 background:rgba(255,255,255,0.06);
}
#lh-sound-toggle:active,
.lh-sound-toggle:active{
 transform:translateY(1px);
}

/* -----------------------------
 Widget header buttons
----------------------------- */
.lh-widget-head-actions{
 display:flex;
 align-items:center;
 gap:8px;
 margin-left:auto;
}

.lh-widget-head-btn{
 height:34px;
 min-width:34px;
 padding:0 12px;
 border-radius:12px;
 border:1px solid rgba(255,255,255,0.10);
 background:rgba(255,255,255,0.04);
 color:#fff;
 font-size:14px;
 font-weight:900;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:
 background .14s ease,
 border-color .14s ease,
 transform .08s ease,
 box-shadow .14s ease,
 filter .14s ease;
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,0.03),
 0 4px 14px rgba(0,0,0,0.35);
}

.lh-widget-head-btn:hover{
 background:rgba(255,255,255,0.08);
 border-color:rgba(255,255,255,0.16);
}

.lh-widget-head-btn:active{
 transform:translateY(1px);
}

.lh-widget-end-btn{
 min-width:60px;
 padding:0 14px;
 background:linear-gradient(180deg, rgba(255,35,35,0.98), rgba(210,0,0,0.95));
 border:1px solid rgba(255,255,255,0.12);
 box-shadow:
 0 6px 18px rgba(255,0,0,0.22),
 inset 0 1px 0 rgba(255,255,255,0.10);
}

.lh-widget-end-btn:hover{
 filter:brightness(1.06);
 box-shadow:
 0 8px 22px rgba(255,0,0,0.28),
 0 0 14px rgba(255,0,0,0.16);
}

#maximize-chat-btn,
#minimize-btn{
 font-size:15px;
 line-height:1;
}

/* -----------------------------
 Session bar
----------------------------- */
.lh-session-bar{
 padding:8px 18px 10px;
 border-bottom:1px solid rgba(255,255,255,0.08);
 background:rgba(255,255,255,0.03);
 flex:0 0 auto;
}
.lh-session-text{
 font-size:12px;
 color:var(--muted);
 letter-spacing:.2px;
}

/* -----------------------------
 Pre-chat form
----------------------------- */
#user-info{
 padding:18px;
 border-bottom:1px solid var(--border);
 background:var(--panel3);
 flex:0 0 auto;
}

.lh-prechat-card{
 background:
 linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.lh-prechat-grid{
 display:grid;
 grid-template-columns:1fr 1fr 1fr auto;
 gap:14px;
 align-items:end;
}

.lh-field-wrap{
 display:flex;
 flex-direction:column;
 gap:8px;
}

.lh-start-wrap{
 justify-content:flex-end;
}

.lh-label{
 font-size:12px;
 font-weight:700;
 color:var(--muted);
 letter-spacing:.3px;
 text-transform:uppercase;
}

#lh-name,
#lh-email,
#lh-phone,
#user-info input{
 height:46px;
 padding:0 14px;
 border-radius:var(--radius2);
 border:1px solid rgba(255,255,255,0.16);
 background:rgba(230,240,255,0.95);
 color:#000;
 outline:none;
}
#lh-name:focus,
#lh-email:focus,
#lh-phone:focus,
#user-info input:focus{
 border-color:rgba(255,0,0,0.30);
 box-shadow:0 0 0 3px rgba(255,0,0,0.08);
}

#start-chat-btn{
 height:46px;
 padding:0 22px;
 border-radius:var(--radius2);
 border:1px solid rgba(255,255,255,0.15);
 background:var(--red2);
 color:var(--text);
 font-weight:900;
 cursor:pointer;
 white-space:nowrap;
 transition:filter .12s ease, transform .08s ease, box-shadow .12s ease;
}
#start-chat-btn:hover{
 filter:brightness(1.05);
 box-shadow:var(--glow-red);
}
#start-chat-btn:active{
 transform:translateY(1px);
}

/* -----------------------------
 Messages wrapper
----------------------------- */
#messages-box{
 display:flex;
 flex-direction:column;
 flex:1 1 auto;
 min-height:0;
}

#messages{
 flex:1 1 auto;
 min-height:0;
 overflow:auto;
 padding:18px;
 background:
 radial-gradient(900px 400px at 50% 40%, rgba(255,255,255,0.05), transparent 60%),
 rgba(0,0,0,0.20);
 scroll-behavior:smooth;
}

/* -----------------------------
 Empty state
----------------------------- */
.lh-empty{
 min-height:300px;
 height:100%;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 border:1px dashed rgba(255,255,255,0.14);
 border-radius:var(--radius);
 background:rgba(0,0,0,0.26);
 padding:24px;
 text-align:center;
}
.lh-empty-title{
 font-size:22px;
 font-weight:900;
 margin-bottom:8px;
 text-transform:uppercase;
}
.lh-empty-sub{
 font-size:13px;
 color:var(--muted);
 max-width:560px;
 line-height:1.45;
}

/* -----------------------------
 System/chat banners
----------------------------- */
.lh-chat-banner{
 display:flex;
 flex-direction:column;
 gap:4px;
 margin:10px 18px 0;
 padding:10px 12px;
 border-radius:14px;
 border:1px solid rgba(255,255,255,0.08);
 background:rgba(255,255,255,0.04);
}
.lh-chat-banner-title{
 font-size:11px;
 font-weight:900;
 color:#fff;
 text-transform:uppercase;
 letter-spacing:.5px;
}
.lh-chat-banner-sub{
 font-size:11px;
 color:var(--muted2);
 line-height:1.35;
}

#typing-indicator{
 padding:10px 18px 0;
 font-size:12px;
 color:var(--muted);
}

.lh-reconnect-line{
 padding:10px 18px 0;
 font-size:12px;
 color:#ffd6d6;
}

/* -----------------------------
 Message bubbles
----------------------------- */
.lh-bubble{
 max-width:76%;
 border:1px solid rgba(255,255,255,0.10);
 border-radius:18px;
 padding:10px 12px;
 margin:0 0 12px 0;
 background:rgba(18,18,18,0.92);
 box-shadow:var(--shadow-card);
}

.lh-user{
 margin-left:auto;
 border-color:rgba(255,0,0,0.24);
 background:linear-gradient(180deg, rgba(255,0,0,0.12), rgba(255,0,0,0.07));
}

.lh-admin{
 margin-right:auto;
 border-color:rgba(255,255,255,0.12);
 background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
}

.lh-bubble-text{
 font-size:14px;
 line-height:1.42;
 white-space:pre-wrap;
 word-break:break-word;
}

.lh-bubble-meta{
 font-size:11px;
 opacity:.72;
 margin-top:7px;
 text-transform:uppercase;
 letter-spacing:.3px;
}

/* -----------------------------
 Attachments
----------------------------- */
.lh-attachment{
 margin-top:10px;
 border:1px solid rgba(255,255,255,0.12);
 border-radius:14px;
 padding:10px 12px;
 background:rgba(0,0,0,0.28);
}
.lh-attachment-name{
 font-size:11px;
 opacity:.88;
 margin-bottom:10px;
 word-break:break-word;
 text-transform:uppercase;
}
.lh-attachment-img{
 width:100%;
 max-width:420px;
 max-height:220px;
 object-fit:contain;
 border-radius:12px;
 border:1px solid rgba(255,255,255,0.10);
 display:block;
 margin-bottom:10px;
}
.lh-attachment-link{
 display:inline-block;
 font-size:12px;
 font-weight:900;
 color:var(--text);
 border:1px solid rgba(255,255,255,0.14);
 padding:8px 10px;
 border-radius:12px;
 background:rgba(255,255,255,0.06);
 transition:filter .12s ease, transform .08s ease;
}
.lh-attachment-link:hover{
 filter:brightness(1.05);
}
.lh-attachment-link:active{
 transform:translateY(1px);
}

/* -----------------------------
 Preview host
----------------------------- */
.lh-preview-host{
 padding:8px 18px 0;
}
.lh-preview-card{
 border:1px solid rgba(255,255,255,0.10);
 border-radius:14px;
 background:rgba(255,255,255,0.03);
 padding:12px;
}
.lh-preview-title{
 font-size:11px;
 font-weight:900;
 margin-bottom:6px;
 color:#fff;
 text-transform:uppercase;
}
.lh-preview-meta{
 font-size:11px;
 color:var(--muted2);
 line-height:1.35;
}
.lh-preview-thumb{
 max-width:220px;
 max-height:160px;
 object-fit:contain;
 border-radius:12px;
 border:1px solid rgba(255,255,255,0.10);
 margin-top:10px;
}

/* -----------------------------
 Input area
----------------------------- */
#input-area{
 flex:0 0 auto;
 border-top:1px solid var(--border);
 background:var(--panel2);
}

.lh-filebar{
 display:flex;
 gap:10px;
 align-items:center;
 padding:10px 18px 0;
 flex-wrap:wrap;
}

.lh-attach-btn{
 width:42px;
 height:42px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:12px;
 border:1px solid rgba(255,255,255,0.12);
 background:rgba(0,0,0,0.55);
 cursor:pointer;
 user-select:none;
 transition:background .12s ease, transform .08s ease;
}
.lh-attach-btn:hover{
 background:rgba(255,255,255,0.06);
}
.lh-attach-btn:active{
 transform:translateY(1px);
}
.lh-attach-btn input{
 display:none;
}

.lh-file-label{
 flex:1 1 180px;
 min-width:140px;
 height:42px;
 line-height:42px;
 font-size:11px;
 color:var(--muted);
 border:1px solid rgba(255,255,255,0.10);
 border-radius:12px;
 padding:0 12px;
 background:rgba(0,0,0,0.30);
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 text-transform:uppercase;
}

.lh-clear-file{
 height:42px;
 padding:0 14px;
 border-radius:12px;
 border:1px solid rgba(255,255,255,0.12);
 background:rgba(60,60,60,0.30);
 color:var(--text);
 cursor:pointer;
 font-size:11px;
 font-weight:900;
 text-transform:uppercase;
 transition:background .12s ease, transform .08s ease;
}
.lh-clear-file:hover{
 background:rgba(255,255,255,0.06);
}
.lh-clear-file:active{
 transform:translateY(1px);
}

.lh-compose-row{
 display:flex;
 gap:10px;
 padding:10px 18px 14px;
 align-items:flex-end;
}

#message-input{
 flex:1;
 min-height:54px;
 max-height:140px;
 resize:vertical;
 border-radius:16px;
 border:1px solid rgba(255,0,0,0.22);
 background:rgba(0,0,0,0.65);
 color:var(--text);
 padding:12px 14px;
 outline:none;
 transition:border-color .12s ease, box-shadow .12s ease;
}
#message-input:focus{
 border-color:rgba(255,0,0,0.34);
 box-shadow:0 0 0 3px rgba(255,0,0,0.08);
}
#message-input::placeholder{
 color:rgba(255,255,255,0.44);
}

#send-btn{
 width:104px;
 height:54px;
 border-radius:16px;
 border:1px solid rgba(255,255,255,0.15);
 background:rgba(255,0,0,0.95);
 color:var(--text);
 font-weight:900;
 font-size:12px;
 cursor:pointer;
 flex:0 0 104px;
 text-transform:uppercase;
 transition:filter .12s ease, transform .08s ease, box-shadow .12s ease;
}
#send-btn:hover{
 filter:brightness(1.05);
 box-shadow:var(--glow-red);
}
#send-btn:active{
 transform:translateY(1px);
}
#send-btn:disabled{
 opacity:.55;
 cursor:not-allowed;
}

/* -----------------------------
 Footer status
----------------------------- */
.lh-footer{
 flex:0 0 auto;
 border-top:1px solid rgba(255,255,255,0.08);
 background:rgba(0,0,0,0.22);
 padding:10px 18px 12px;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:4px;
}
.lh-status{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:12px;
 font-weight:900;
 text-transform:uppercase;
}
.lh-dot{
 width:10px;
 height:10px;
 border-radius:50%;
 background:rgba(140,140,140,0.95);
 box-shadow:0 0 0 2px rgba(255,255,255,0.05);
}
.lh-dot.online{
 background:var(--green);
 box-shadow:var(--glow-green);
}
.lh-dot.offline{
 background:rgba(140,140,140,0.95);
}
.lh-dot.connecting{
 background:var(--orange);
}
#lh-status-text{
 color:#fff;
}
.lh-mini{
 font-size:11px;
 color:var(--muted2);
 text-align:center;
 line-height:1.3;
 text-transform:uppercase;
}

/* =========================================================
 HOME PAGE WIDGET
 ========================================================= */

#chat-bubble.lh-bubble-btn{
 all:unset;
 position:fixed;
 right:var(--bubble-right);
 bottom:var(--bubble-bottom);
 width:64px;
 height:64px;
 border-radius:999px;
 background:linear-gradient(135deg, rgba(255,0,0,0.96), rgba(150,0,0,0.96));
 border:2px solid rgba(255,255,255,0.10);
 box-shadow:var(--shadow);
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 z-index:999999;
 user-select:none;
 transition:filter .12s ease, transform .08s ease, box-shadow .12s ease;
}
#chat-bubble.lh-bubble-btn:hover{
 filter:brightness(1.05);
 box-shadow:0 0 22px rgba(255,0,0,0.24);
}
#chat-bubble.lh-bubble-btn:active{
 transform:translateY(1px);
}
#chat-bubble .lh-bubble-ico{
 width:30px;
 height:30px;
 color:#fff;
}

#chat-bubble .lh-unread-badge{
 position:absolute;
 top:-6px;
 right:-6px;
 min-width:22px;
 height:22px;
 padding:0 6px;
 border-radius:999px;
 background:#fff;
 border:2px solid rgba(0,0,0,0.85);
 color:#000;
 font-size:12px;
 font-weight:900;
 display:none;
 align-items:center;
 justify-content:center;
 box-shadow:0 10px 28px rgba(0,0,0,0.65);
}

#chat-box.lh-widget{
 position:fixed !important;
 right:var(--widget-right) !important;
 bottom:var(--widget-bottom) !important;
 width:var(--widget-w) !important;
 height:var(--widget-h) !important;
 max-width:calc(100vw - 30px) !important;
 max-height:calc(100vh - 130px) !important;
 margin:0 !important;
 z-index:999999;
 display:flex !important;
 flex-direction:column !important;
 min-height:0 !important;
 border-radius:20px;
 overflow:hidden !important;
 background:rgba(8,8,8,0.98);
 border:1px solid rgba(255,255,255,0.10);
 box-shadow:0 24px 60px rgba(0,0,0,0.76), 0 0 20px rgba(255,0,0,0.06);
}

#chat-box.lh-widget #chat-header{
 padding:12px 14px !important;
}

#chat-box.lh-widget .lh-title,
#chat-box.lh-widget .lh-widget-title{
 font-size:16px;
}

#chat-box.lh-widget .lh-widget-head-actions,
#chat-box.lh-widget .lh-header-right{
 gap:8px;
}

#chat-box.lh-widget .lh-widget-head-btn,
#chat-box.lh-widget #lh-sound-toggle,
#chat-box.lh-widget .lh-sound-toggle,
#chat-box.lh-widget #minimize-btn{
 height:34px;
 min-width:34px;
 border-radius:12px;
 font-size:11px;
}

#chat-box.lh-widget .lh-widget-end-btn{
 min-width:58px;
 padding:0 12px;
}

#chat-box.lh-widget #user-info{
 display:flex !important;
 flex-wrap:wrap !important;
 gap:10px !important;
 padding:12px 14px !important;
}

#chat-box.lh-widget .lh-prechat-grid{
 display:flex !important;
 flex-wrap:wrap !important;
 gap:10px !important;
 width:100% !important;
}

#chat-box.lh-widget .lh-field-wrap{
 flex:1 1 140px !important;
 min-width:140px !important;
}

#chat-box.lh-widget .lh-start-wrap{
 flex:1 1 100% !important;
}

#chat-box.lh-widget #start-chat-btn{
 width:100% !important;
 height:44px !important;
}

#chat-box.lh-widget #messages-box{
 flex:1 1 auto !important;
 min-height:0 !important;
 display:flex !important;
 flex-direction:column !important;
}

#chat-box.lh-widget #messages{
 flex:1 1 auto !important;
 min-height:0 !important;
 overflow:auto !important;
 padding:12px !important;
}

#chat-box.lh-widget .lh-bubble{
 max-width:82%;
 padding:10px 12px;
 border-radius:18px;
 margin-bottom:10px;
}

#chat-box.lh-widget .lh-bubble-text{
 font-size:13px;
 line-height:1.35;
}

#chat-box.lh-widget .lh-bubble-meta{
 font-size:10px;
 margin-top:6px;
}

#chat-box.lh-widget .lh-empty{
 min-height:160px;
 padding:18px;
}

#chat-box.lh-widget .lh-empty-title{
 font-size:18px;
}

#chat-box.lh-widget .lh-empty-sub{
 font-size:12px;
}

#chat-box.lh-widget .lh-chat-banner{
 margin:8px 12px 0;
 padding:8px 10px;
}

#chat-box.lh-widget .lh-chat-banner-title{
 font-size:10px;
}

#chat-box.lh-widget .lh-chat-banner-sub{
 font-size:10px;
}

#chat-box.lh-widget #typing-indicator,
#chat-box.lh-widget .lh-reconnect-line,
#chat-box.lh-widget .lh-preview-host{
 padding-left:12px;
 padding-right:12px;
}

#chat-box.lh-widget .lh-preview-card{
 padding:10px;
}

#chat-box.lh-widget .lh-preview-title{
 font-size:10px;
}

#chat-box.lh-widget .lh-preview-meta{
 font-size:10px;
}

#chat-box.lh-widget .lh-preview-thumb{
 max-width:180px;
 max-height:120px;
}

#chat-box.lh-widget #input-area{
 flex:0 0 auto !important;
 background:var(--panel2);
}

#chat-box.lh-widget .lh-filebar{
 padding:8px 12px 0 !important;
 gap:8px !important;
 display:grid !important;
 grid-template-columns:42px 1fr 62px !important;
 align-items:center !important;
}

#chat-box.lh-widget .lh-attach-btn{
 width:42px !important;
 height:42px !important;
}

#chat-box.lh-widget .lh-file-label{
 min-width:0 !important;
 height:42px !important;
 line-height:42px !important;
 padding:0 12px !important;
 font-size:10px !important;
}

#chat-box.lh-widget .lh-clear-file{
 width:62px !important;
 height:42px !important;
 padding:0 !important;
 font-size:10px !important;
}

#chat-box.lh-widget .lh-compose-row{
 padding:8px 12px 12px !important;
 gap:8px !important;
 display:grid !important;
 grid-template-columns:1fr 92px !important;
 align-items:end !important;
}

#chat-box.lh-widget #message-input{
 min-height:52px !important;
 max-height:92px !important;
 resize:none !important;
 overflow:auto !important;
 padding:12px !important;
 border-radius:16px !important;
}

#chat-box.lh-widget #send-btn{
 width:92px !important;
 height:52px !important;
 flex:0 0 92px !important;
 font-size:11px !important;
 border-radius:16px !important;
}

#chat-box.lh-widget .lh-footer{
 padding:8px 12px 10px;
}

#chat-box.lh-widget .lh-status{
 font-size:11px;
}

#chat-box.lh-widget .lh-mini{
 font-size:10px;
}

#chat-box.lh-widget.lh-started #user-info{
 display:none !important;
}

/* =========================================================
 ADMIN PAGE
 IMPORTANT: body class should be .lh-admin-page
 ========================================================= */

.lh-admin-page .wrap{
 padding:0 14px;
}

.lh-admin-page .card{
 border:1px solid var(--border);
 background:var(--panel);
 border-radius:var(--radius);
 overflow:hidden;
 box-shadow:var(--shadow);
 min-height:calc(100vh - 40px);
 display:flex;
 flex-direction:column;
}

.lh-admin-page .topbar{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:16px 18px;
 border-bottom:1px solid var(--border);
 background:var(--panel2);
 flex-wrap:wrap;
}
.lh-admin-page .topbar h1{
 margin:0;
 font-size:18px;
 letter-spacing:.8px;
 font-weight:900;
}
.lh-admin-page .topbar-tools{
 display:flex;
 align-items:center;
 gap:10px;
 flex-wrap:wrap;
}
.lh-admin-page .pill{
 font-size:12px;
 opacity:.9;
 border:1px solid var(--border2);
 padding:6px 10px;
 border-radius:999px;
 background:rgba(0,0,0,.55);
 display:flex;
 align-items:center;
 gap:8px;
}
.lh-admin-page .pillDot{
 width:10px;
 height:10px;
 border-radius:50%;
 background:rgba(140,140,140,0.95);
}
.lh-admin-page .pillDot.online{
 background:var(--green);
 box-shadow:var(--glow-green);
}

.lh-admin-page .adminNameInput{
 height:40px;
 min-width:180px;
 border-radius:12px;
 border:1px solid rgba(255,255,255,.15);
 background:rgba(0,0,0,.55);
 color:#fff;
 padding:0 12px;
 outline:none;
}
.lh-admin-page .adminNameInput:focus{
 border-color:rgba(255,0,0,0.30);
}

.lh-admin-page .topBtn{
 height:40px;
 border-radius:12px;
 border:1px solid rgba(255,255,255,.15);
 background:rgba(255,255,255,.06);
 color:#fff;
 padding:0 14px;
 font-weight:900;
 cursor:pointer;
 transition:background .12s ease, transform .08s ease, box-shadow .12s ease;
}
.lh-admin-page .topBtn:hover{
 background:rgba(255,255,255,.09);
}
.lh-admin-page .topBtn:active{
 transform:translateY(1px);
}
.lh-admin-page .topBtn.online{
 background:rgba(0,190,90,.18);
 border-color:rgba(0,190,90,.35);
}

.lh-admin-page .grid{
 display:flex;
 flex:1;
 min-height:0;
}

.lh-admin-page .left{
 width:420px;
 min-width:280px;
 border-right:1px solid var(--border);
 background:rgba(0,0,0,.35);
 display:flex;
 flex-direction:column;
 min-height:0;
}

.lh-admin-page .filters{
 display:flex;
 gap:10px;
 align-items:center;
 padding:14px;
 border-bottom:1px solid var(--border);
 flex-wrap:wrap;
}

.lh-admin-page #statusSel{
 flex:1;
 min-width:140px;
 height:42px;
 border-radius:14px;
 border:1px solid rgba(255,255,255,.16);
 background:rgba(0,0,0,.65);
 color:#fff;
 padding:0 12px;
 outline:none;
}

.lh-admin-page .actionBtn{
 height:42px;
 padding:0 14px;
 border-radius:14px;
 border:1px solid rgba(255,255,255,.15);
 color:#fff;
 font-weight:900;
 cursor:pointer;
 white-space:nowrap;
}
.lh-admin-page .actionBtn:disabled{
 opacity:.45;
 cursor:not-allowed;
}
.lh-admin-page #toggleStatusBtn{ background:var(--orange); }
.lh-admin-page #banBtn{ background:var(--red2); }
.lh-admin-page #clearBtn{ background:rgba(120,120,120,.95); }
.lh-admin-page #clearAllBtn{ background:#5a5a5a; }

.lh-admin-page #threadlist{
 overflow:auto;
 padding:10px;
 flex:1;
 min-height:0;
}

.lh-admin-page .thread{
 border:1px solid rgba(255,255,255,.10);
 border-radius:var(--radius2);
 background:rgba(0,0,0,.45);
 padding:10px 12px;
 margin-bottom:10px;
 cursor:pointer;
 transition:background .12s ease, border-color .12s ease;
}
.lh-admin-page .thread:hover{
 background:rgba(255,255,255,.06);
}
.lh-admin-page .thread.active{
 border-color:rgba(255,0,0,.35);
 background:rgba(255,0,0,.08);
}
.lh-admin-page .threadTop{
 display:flex;
 justify-content:space-between;
 gap:10px;
 align-items:flex-start;
}
.lh-admin-page .threadName{
 font-weight:900;
 font-size:13px;
}
.lh-admin-page .threadMeta{
 font-size:12px;
 opacity:.75;
 margin-top:6px;
 word-break:break-word;
}
.lh-admin-page .threadSubMeta{
 display:flex;
 gap:8px;
 align-items:center;
 flex-wrap:wrap;
 margin-top:8px;
}
.lh-admin-page .tag{
 font-size:11px;
 border:1px solid rgba(255,255,255,.14);
 padding:3px 8px;
 border-radius:999px;
 opacity:.95;
}
.lh-admin-page .tag.open{
 border-color:rgba(0,190,90,.45);
 background:rgba(0,190,90,.08);
 color:#d7ffe7;
}
.lh-admin-page .tag.closed{
 border-color:rgba(255,140,0,.45);
 background:rgba(255,140,0,.08);
 color:#ffe6bf;
}
.lh-admin-page .tag.banned{
 border-color:rgba(255,0,0,.45);
 background:rgba(255,0,0,.10);
 color:#ffd4d4;
}
.lh-admin-page .tag.online,
.lh-admin-page .tag.adminonline{
 border-color:rgba(0,190,90,.45);
 background:rgba(0,190,90,.10);
 color:#d7ffe7;
}
.lh-admin-page .tag.offline,
.lh-admin-page .tag.adminoffline{
 border-color:rgba(140,140,140,.45);
 background:rgba(140,140,140,.10);
 color:#eaeaea;
}

.lh-admin-page .rightPane{
 flex:1;
 display:flex;
 flex-direction:column;
 min-width:0;
 min-height:0;
}
.lh-admin-page .chatHead{
 padding:14px 18px;
 border-bottom:1px solid var(--border);
 background:rgba(0,0,0,.25);
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
}
.lh-admin-page .chatTitle{
 font-weight:900;
}
.lh-admin-page .statusLine{
 font-size:12px;
 opacity:.82;
}
.lh-admin-page .onlineLine{
 font-size:12px;
 opacity:.82;
 margin-top:6px;
}
.lh-admin-page .typingIndicator{
 margin-top:10px;
 font-size:12px;
 color:#fff;
 opacity:.82;
}

.lh-admin-page .rightPane #messages{
 flex:1;
 overflow:auto;
 min-height:0;
 padding:18px;
 background:
 radial-gradient(900px 400px at 50% 40%, rgba(255,255,255,0.06), transparent 60%),
 rgba(0,0,0,0.20);
}

.lh-admin-page .bubble{
 max-width:78%;
 border:1px solid rgba(255,255,255,.12);
 border-radius:18px;
 padding:10px 12px;
 margin:0 0 12px 0;
 background:rgba(12,12,12,0.92);
 word-break:break-word;
 white-space:pre-wrap;
 box-shadow:var(--shadow-card);
}
.lh-admin-page .bubble.admin{
 margin-left:auto;
 border-color:rgba(255,0,0,.28);
 background:linear-gradient(180deg, rgba(255,0,0,0.12), rgba(255,0,0,0.07));
}
.lh-admin-page .bubble.user{
 margin-right:auto;
 border-color:rgba(255,255,255,.14);
 background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
}
.lh-admin-page .meta{
 font-size:11px;
 opacity:.72;
 margin-top:7px;
 text-transform:uppercase;
}

.lh-admin-page .att{
 margin-top:10px;
 border:1px solid rgba(255,255,255,0.12);
 border-radius:14px;
 padding:10px 12px;
 background:rgba(0,0,0,0.35);
}
.lh-admin-page .attName{
 font-size:11px;
 opacity:.9;
 margin-bottom:10px;
 word-break:break-word;
 text-transform:uppercase;
}
.lh-admin-page .att img{
 width:100%;
 max-width:420px;
 max-height:240px;
 object-fit:contain;
 border-radius:12px;
 border:1px solid rgba(255,255,255,0.12);
 display:block;
 margin:10px 0;
}
.lh-admin-page .att a{
 display:inline-block;
 font-size:12px;
 font-weight:900;
 color:var(--text);
 border:1px solid rgba(255,255,255,0.14);
 padding:8px 10px;
 border-radius:12px;
 background:rgba(255,255,255,0.06);
}
.lh-admin-page .att a:hover{
 filter:brightness(1.05);
}

.lh-admin-page .composer{
 display:flex;
 gap:12px;
 padding:14px 18px;
 border-top:1px solid var(--border);
 background:var(--panel2);
}
.lh-admin-page #message{
 flex:1;
 min-height:56px;
 max-height:160px;
 resize:vertical;
 border-radius:16px;
 border:1px solid rgba(255,0,0,.22);
 background:rgba(0,0,0,.65);
 color:#fff;
 padding:12px 14px;
 outline:none;
}
.lh-admin-page #sendBtn{
 width:140px;
 border-radius:16px;
 border:1px solid rgba(255,255,255,.15);
 background:var(--red2);
 color:#fff;
 font-weight:900;
 cursor:pointer;
}
.lh-admin-page #sendBtn:disabled{
 opacity:.45;
 cursor:not-allowed;
}
.lh-admin-page .emptyMsg{
 opacity:.7;
 font-size:14px;
 padding:18px;
}

/* =========================================================
 Responsive
 ========================================================= */

@media (max-width: 980px){
 .lh-prechat-grid{
 grid-template-columns:1fr 1fr;
 }
 .lh-start-wrap{
 grid-column:1 / -1;
 }
 #start-chat-btn{
 width:100%;
 }

 .lh-admin-page .grid{
 flex-direction:column;
 }
 .lh-admin-page .left{
 width:auto;
 }
 .lh-admin-page .bubble,
 .lh-bubble{
 max-width:92%;
 }
}

@media (max-width: 640px){
 #chat-box{
 margin:12px;
 min-height:calc(100vh - 24px);
 }

 #chat-header{
 padding:14px;
 }

 .lh-session-bar{
 padding:10px 14px;
 }

 #user-info{
 padding:14px;
 }

 .lh-prechat-grid{
 grid-template-columns:1fr;
 gap:10px;
 }

 #messages{
 padding:14px;
 }

 .lh-chat-banner{
 margin:8px 14px 0;
 }

 #typing-indicator,
 .lh-reconnect-line,
 .lh-preview-host{
 padding-left:14px;
 padding-right:14px;
 }

 .lh-filebar{
 padding:10px 14px 0;
 }

 .lh-compose-row{
 padding:10px 14px 14px;
 flex-direction:column;
 align-items:stretch;
 }

 #send-btn{
 width:100%;
 flex:0 0 auto;
 height:48px;
 }

 .lh-footer{
 padding:10px 14px 14px;
 }

 .lh-admin-page .composer{
 flex-direction:column;
 }

 .lh-admin-page #sendBtn{
 width:100%;
 }
}

@media (max-width: 520px){
 #chat-box.lh-widget{
 right:12px !important;
 left:12px !important;
 width:auto !important;
 bottom:88px !important;
 height:74vh !important;
 max-height:74vh !important;
 }

 #chat-bubble.lh-bubble-btn{
 right:12px;
 bottom:12px;
 }

 #chat-box.lh-widget .lh-field-wrap{
 flex:1 1 calc(50% - 10px) !important;
 min-width:0 !important;
 }

 #chat-box.lh-widget .lh-start-wrap{
 flex:1 1 100% !important;
 }

 #chat-box.lh-widget .lh-filebar{
 grid-template-columns:40px 1fr 58px !important;
 }

 #chat-box.lh-widget .lh-compose-row{
 grid-template-columns:1fr 86px !important;
 }

 #chat-box.lh-widget #send-btn{
 width:86px !important;
 flex:0 0 86px !important;
 }

 .lh-widget-head-actions{
 gap:6px;
 }

 .lh-widget-head-btn{
 height:32px;
 min-width:32px;
 padding:0 10px;
 border-radius:10px;
 font-size:13px;
 }

 .lh-widget-end-btn{
 min-width:52px;
 padding:0 12px;
 }
}

/* -----------------------------
 Micro polish
----------------------------- */
::-webkit-scrollbar{
 width:10px;
 height:10px;
}
::-webkit-scrollbar-thumb{
 background:rgba(255,255,255,0.14);
 border-radius:999px;
}
::-webkit-scrollbar-track{
 background:rgba(0,0,0,0.35);
}
::selection{
 background:rgba(255,0,0,0.35);
 color:#fff;
}