/* Support — front-end application styles.
   Premium SaaS look: clean, corporate, minimal, rounded cards, subtle shadows. */

:root{
	--support-primary:#2563eb;
	--support-secondary:#111827;
	--support-bg:#f4f6f9;
	--support-surface:#ffffff;
	--support-border:#e5e7eb;
	--support-text:#111827;
	--support-text-muted:#6b7280;
	--support-bubble-me:#2563eb;
	--support-bubble-me-text:#ffffff;
	--support-bubble-them:#ffffff;
	--support-bubble-them-text:#111827;
	--support-online:#22c55e;
	--support-away:#eab308;
	--support-busy:#ef4444;
	--support-offline:#9ca3af;
	--support-radius:14px;
	--support-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* The lightbox, transfer/templates/action/document-request/schedule/form
   side panels, and any other element this app toggles via the plain HTML
   `hidden` attribute all set their own unconditional `display:flex` further
   down this file (needed to center/position them while visible). A class
   selector like `.support-lightbox{display:flex}` beats the browser's
   built-in `[hidden]{display:none}` default, so without this rule those
   overlays render permanently on top of the app -- including their own
   Close (✕) buttons, which then look "broken" because toggling `hidden`
   in JS has no visible effect. This one rule keeps `hidden` authoritative
   everywhere in the app, regardless of what any other rule sets. */
[hidden]{display:none!important;}
body.support-app-body{
	background:var(--support-bg);
	color:var(--support-text);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	height:100vh;
	overflow:hidden;
}

.support-shell{display:flex;flex-direction:column;height:100vh;width:100vw;}

/* ---------- Topbar ---------- */
.support-topbar{
	display:flex;align-items:center;gap:16px;
	padding:10px 20px;background:var(--support-surface);
	border-bottom:1px solid var(--support-border);
	flex:0 0 auto;
}
.support-topbar-brand{font-weight:700;font-size:18px;color:var(--support-primary);}
.support-topbar-nav{margin-left:auto;display:flex;gap:16px;align-items:center;}
.support-topbar-nav a{color:var(--support-text-muted);text-decoration:none;font-size:14px;}
.support-topbar-nav a.active,.support-topbar-nav a:hover{color:var(--support-primary);}
.support-presence-picker select{border:1px solid var(--support-border);border-radius:8px;padding:6px 10px;font-size:13px;background:var(--support-surface);}

/* ---------- Layout ---------- */
.support-chat-layout{flex:1 1 auto;display:flex;min-height:0;}
.support-chat-layout--single .support-chat-main{width:100%;}
.support-chat-layout--split{width:100%;}

.support-conversation-list{
	width:340px;flex:0 0 340px;background:var(--support-surface);
	border-right:1px solid var(--support-border);display:flex;flex-direction:column;min-height:0;
}
.support-conv-search{padding:12px;border-bottom:1px solid var(--support-border);}
.support-conv-search input{width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--support-border);font-size:13px;}
.support-conv-filters{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--support-border);}
.support-conv-filters button{border:none;background:transparent;padding:6px 10px;border-radius:20px;font-size:12px;color:var(--support-text-muted);cursor:pointer;}
.support-conv-filters button.active{background:var(--support-primary);color:#fff;}
.support-conv-items{flex:1;overflow-y:auto;}

.support-conv-item{
	display:flex;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--support-border);
	align-items:flex-start;position:relative;
}
.support-conv-item:hover,.support-conv-item.active{background:var(--support-bg);}
.support-conv-item .support-avatar{flex:0 0 auto;}
.support-conv-item-body{flex:1;min-width:0;}
.support-conv-item-top{display:flex;justify-content:space-between;gap:8px;}
.support-conv-item-name{font-weight:600;font-size:14px;}
.support-conv-item-time{font-size:11px;color:var(--support-text-muted);}
.support-conv-item-preview{font-size:13px;color:var(--support-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.support-sla-badge{display:inline-block;font-size:10px;font-weight:600;padding:1px 7px;border-radius:10px;margin-top:2px;}
.support-sla-ok{background:#dcfce7;color:#15803d;}
.support-sla-warning{background:#fef9c3;color:#a16207;}
.support-sla-breached{background:#fee2e2;color:#b91c1c;}
.support-conv-item-badge{
	background:var(--support-primary);color:#fff;font-size:11px;border-radius:20px;
	min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px;
}

/* ---------- Chat main ---------- */
.support-chat-main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;background:var(--support-bg);}
.support-chat-header{
	display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--support-surface);
	border-bottom:1px solid var(--support-border);flex:0 0 auto;
}
.support-back-btn{border:none;background:none;font-size:18px;cursor:pointer;display:none;}
.support-chat-header-info{flex:1;min-width:0;}
.support-chat-header-name{font-weight:600;font-size:15px;}
.support-chat-header-status{font-size:12px;color:var(--support-text-muted);}
.support-chat-header-actions{display:flex;gap:8px;}
.support-connection-indicator{font-size:12px;}

.support-avatar{
	width:40px;height:40px;border-radius:50%;background:var(--support-primary);color:#fff;
	display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex:0 0 auto;
	position:relative;
}
.support-avatar .support-presence-dot{
	position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;
	border:2px solid var(--support-surface);background:var(--support-offline);
}
.support-presence-dot.online{background:var(--support-online);}
.support-presence-dot.away{background:var(--support-away);}
.support-presence-dot.busy{background:var(--support-busy);}

.support-messages{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:4px;}
.support-day-separator{align-self:center;font-size:12px;color:var(--support-text-muted);background:var(--support-surface);padding:4px 12px;border-radius:20px;margin:12px 0;box-shadow:var(--support-shadow);}

.support-msg-row{display:flex;margin-bottom:6px;max-width:100%;}
.support-msg-row.mine{justify-content:flex-end;}
.support-msg-bubble{
	max-width:min(560px,72%);padding:10px 14px;border-radius:var(--support-radius);
	background:var(--support-bubble-them);color:var(--support-bubble-them-text);
	box-shadow:var(--support-shadow);font-size:14px;line-height:1.45;position:relative;
}
.support-msg-row.mine .support-msg-bubble{background:var(--support-bubble-me);color:var(--support-bubble-me-text);}
.support-msg-row.system .support-msg-bubble{background:transparent;box-shadow:none;color:var(--support-text-muted);font-size:12px;text-align:center;margin:0 auto;}
.support-msg-meta{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:4px;font-size:11px;opacity:.75;}
.support-msg-ticks{font-size:12px;}
.support-msg-ticks.read{color:#93c5fd;}
.support-msg-edited{font-style:italic;opacity:.7;font-size:11px;}
.support-msg-deleted{font-style:italic;opacity:.7;}

.support-file-card{display:flex;align-items:center;gap:10px;padding:8px;background:rgba(0,0,0,.04);border-radius:10px;margin-bottom:6px;text-decoration:none;color:inherit;}
.support-msg-row.mine .support-file-card{background:rgba(255,255,255,.15);}
.support-file-card-icon{font-size:22px;}
.support-file-card-name{font-size:13px;font-weight:600;word-break:break-all;}
.support-file-card-size{font-size:11px;opacity:.75;}
.support-msg-image{max-width:260px;border-radius:10px;cursor:pointer;display:block;margin-bottom:4px;}

.support-action-block{background:rgba(0,0,0,.04);border-radius:10px;padding:10px;margin-top:6px;}
.support-msg-row.mine .support-action-block{background:rgba(255,255,255,.15);}
.support-action-btn{
	margin-top:8px;border:none;background:var(--support-primary);color:#fff;padding:8px 14px;
	border-radius:8px;font-size:13px;cursor:pointer;
}
.support-action-btn:disabled{background:var(--support-offline);cursor:default;}
.support-action-sent{font-size:12px;color:var(--support-text-muted);margin-top:6px;}

.support-typing-indicator{padding:0 24px 6px;font-size:12px;color:var(--support-text-muted);min-height:18px;}

/* ---------- Composer ---------- */
.support-composer{display:flex;align-items:flex-end;gap:8px;padding:12px 16px;background:var(--support-surface);border-top:1px solid var(--support-border);flex:0 0 auto;}
.support-composer-icon{border:none;background:none;font-size:20px;cursor:pointer;padding:6px;}
.support-composer textarea{
	flex:1;resize:none;border:1px solid var(--support-border);border-radius:20px;padding:10px 16px;
	font-size:14px;max-height:120px;font-family:inherit;
}
.support-composer-send{border:none;background:var(--support-primary);color:#fff;width:40px;height:40px;border-radius:50%;font-size:16px;cursor:pointer;flex:0 0 auto;}
.support-upload-progress{padding:0 16px 10px;font-size:12px;color:var(--support-text-muted);}

/* ---------- Empty states ---------- */
.support-empty-state{padding:40px 20px;text-align:center;color:var(--support-text-muted);}
.support-empty-state--center{flex:1;display:flex;flex-direction:column;justify-content:center;}

/* ---------- Auth screens ---------- */
.support-auth-screen{display:flex;min-height:100vh;width:100%;}
.support-auth-panel{flex:1;display:flex;flex-direction:column;justify-content:center;padding:60px;}
.support-auth-panel--brand{background:linear-gradient(160deg,var(--support-secondary),#1f2937);color:#fff;}
.support-auth-brandmark{font-size:22px;font-weight:700;margin-bottom:24px;}
.support-auth-logo{max-width:160px;margin-bottom:24px;}
.support-auth-panel--brand h1{font-size:32px;line-height:1.25;margin:0 0 12px;}
.support-auth-sub{opacity:.8;}
.support-auth-panel--form{background:var(--support-bg);align-items:center;}
.support-auth-card{width:100%;max-width:400px;background:var(--support-surface);border-radius:16px;padding:36px;box-shadow:var(--support-shadow);}
.support-auth-card h2{margin:0 0 4px;}
.support-auth-lead{color:var(--support-text-muted);margin:0 0 20px;font-size:14px;}
.support-auth-footer{margin-top:18px;font-size:13px;text-align:center;color:var(--support-text-muted);}
.support-auth-footer a{color:var(--support-primary);text-decoration:none;font-weight:600;}

.support-2fa-qr{display:flex;justify-content:center;margin:4px 0 14px;}
.support-2fa-qr img{border-radius:12px;border:1px solid var(--support-border);}
.support-2fa-secret{text-align:center;font-size:13px;color:var(--support-text-muted);margin:0 0 18px;word-break:break-all;}
.support-2fa-secret code{background:var(--support-bg);padding:3px 8px;border-radius:6px;font-size:13px;}
.support-2fa-codes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px;}
.support-2fa-codes code{display:block;text-align:center;padding:10px 6px;background:var(--support-bg);border-radius:8px;font-size:14px;letter-spacing:.5px;}

.support-form{display:flex;flex-direction:column;gap:14px;}
.support-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--support-text-muted);}
.support-field input,.support-field select,.support-input,.support-select{
	padding:10px 12px;border:1px solid var(--support-border);border-radius:10px;font-size:14px;color:var(--support-text);
	font-family:inherit;background:var(--support-surface);
}
.support-field input:disabled{background:var(--support-bg);}
.support-form-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.support-checkbox{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--support-text-muted);}
.support-field-row{margin-bottom:6px;}

.support-btn{border:1px solid var(--support-border);background:var(--support-surface);color:var(--support-text);padding:10px 16px;border-radius:10px;font-size:14px;cursor:pointer;}
.support-btn--primary{background:var(--support-primary);border-color:var(--support-primary);color:#fff;}
.support-btn--ghost{background:transparent;}
.support-btn--block{width:100%;}
.support-btn--danger{background:#dc2626;border-color:#dc2626;color:#fff;}

.support-alert{padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:6px;}
.support-alert--error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.support-alert--info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;}
.support-alert--success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;}

/* ---------- Profile ---------- */
.support-profile-main{flex:1;overflow-y:auto;display:flex;justify-content:center;padding:40px 20px;}
.support-profile-card{width:100%;max-width:520px;background:var(--support-surface);border-radius:16px;padding:32px;box-shadow:var(--support-shadow);height:fit-content;}
.support-profile-card h3{margin-top:22px;font-size:14px;}

/* ---------- Lightbox ---------- */
/* Slim top progress bar shown while the initial "/me" + conversation
   history/list fetch is in flight right after login -- gives the user
   and agent visible feedback during that first load instead of a bare
   "Loading…" label with nothing else happening on screen. Sits above
   every other overlay (lightbox/panels included) so it's never hidden
   behind one; an indeterminate sweeping fill since there's no real
   percentage to report. */
.support-toploader{position:fixed;top:0;left:0;width:100%;height:3px;z-index:300;overflow:hidden;background:transparent;}
.support-toploader::before{content:'';position:absolute;top:0;left:0;height:100%;width:35%;background:var(--support-primary);border-radius:0 2px 2px 0;animation:support-toploader-sweep 1.1s ease-in-out infinite;}
@keyframes support-toploader-sweep{
	0%{transform:translateX(-100%);}
	100%{transform:translateX(385%);}
}

.support-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:200;}
.support-lightbox img{max-width:90vw;max-height:90vh;border-radius:6px;}
.support-lightbox-close{position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;}

/* ---------- Modal / confirm ---------- */
.support-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:210;}
.support-modal-card{background:var(--support-surface);border-radius:14px;padding:24px;max-width:360px;box-shadow:var(--support-shadow);}
.support-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}

/* ---------- Side panels (templates / actions / transfer) ---------- */
.support-panel{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;justify-content:flex-end;z-index:190;}
.support-panel-card{width:360px;max-width:90vw;background:var(--support-surface);height:100%;display:flex;flex-direction:column;box-shadow:-4px 0 16px rgba(0,0,0,.08);}
.support-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--support-border);}
.support-panel-close{border:none;background:none;font-size:16px;cursor:pointer;}
.support-panel-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.support-muted-small{font-size:12px;color:var(--support-text-muted);margin:2px 0 0;}
.support-inline-form{min-width:220px;}
.support-inline-form-fields{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.support-form-summary{display:flex;flex-direction:column;gap:2px;font-size:13px;margin-top:4px;}
.support-template-item,.support-action-item{border:1px solid var(--support-border);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:13px;}
.support-template-item:hover,.support-action-item:hover{background:var(--support-bg);}
.support-template-item strong,.support-action-item strong{display:block;font-size:12px;color:var(--support-text-muted);margin-bottom:4px;text-transform:uppercase;}

.support-admin-redirect{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:16px;}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
	.support-conversation-list{position:absolute;inset:0;z-index:20;width:100%;flex:none;}
	.support-chat-layout--split .support-conversation-list.support-hide-mobile{display:none;}
	.support-chat-layout--split .support-chat-main{width:100%;}
	.support-back-btn{display:inline-block;}
	.support-topbar-nav{gap:10px;}
	.support-msg-bubble{max-width:82%;}
	.support-auth-screen{flex-direction:column;}
	.support-auth-panel{padding:32px 20px;}
	.support-auth-panel--brand{padding-bottom:20px;}
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark){
	body.support-app-body:not([data-support-theme="light"]){
		--support-bg:#0b0f19;
		--support-surface:#141a26;
		--support-border:#232b3a;
		--support-text:#e5e7eb;
		--support-text-muted:#9aa4b2;
		--support-bubble-them:#1f2836;
		--support-bubble-them-text:#e5e7eb;
	}
}