@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('/livechat/assets/css/platform-theme.css');
@import url('/livechat/platform-theme.css.php');

/* =========================================
   ALERT
========================================= */

.lc-alert {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 99998;
    width: calc(100% - 36px);
    max-width: 420px;
    min-height: 70px;
    padding: 13px 14px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.12);
    animation: lcAlertIn 0.25s ease;
}

.lc-alert-success {background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;}
.lc-alert-error {background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;}
.lc-alert-warning {background:#fffbeb;border:1px solid #fde68a;color:#92400e;}
.lc-alert-info {background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;}
.lc-alert-icon {width:28px;height:28px;min-width:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.75);font-size:14px;font-weight:800;}
.lc-alert-content {flex:1;min-width:0;}
.lc-alert-title {font-size:13px;font-weight:800;}
.lc-alert-message {margin-top:3px;font-size:12px;line-height:1.5;}
.lc-alert-close {width:27px;height:27px;border:0;background:transparent;color:currentColor;border-radius:8px;font-size:20px;line-height:1;cursor:pointer;}
.lc-alert-close:hover {background:rgba(0,0,0,.05);}
.lc-alert.hide {opacity:0;transform:translateY(-10px);transition:.25s ease;}
@keyframes lcAlertIn {from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.lc-alert{top:10px;right:10px;width:calc(100% - 20px)}}

.header-brand{display:flex;align-items:center;gap:10px;}
.header-logo{width:38px;height:38px;object-fit:contain;border-radius:10px;}
.header-logo-box{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--brand-primary,#2563eb);color:white;font-weight:900;border-radius:10px;}
.notification-dot{position:absolute;top:5px;right:5px;width:10px;height:10px;background:var(--brand-danger,#ef4444);border-radius:50%;border:2px solid white;}
.header-action{position:relative;}


/* =========================================
   RESPONSIVE FEATURE PARITY (2026-08 audit)
   Shared safeguards for admin, customer, partner and agent workspaces.
========================================= */
html,body{max-width:100%}
img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
pre,code,.breakable,[class*="reference"],[class*="token"],[class*="url"],[class*="email"]{overflow-wrap:anywhere;word-break:break-word}
.lc-responsive-table{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.lc-responsive-table>table{margin:0}
.lc-mobile-overlay{position:fixed;inset:0;z-index:998;background:rgba(15,23,42,.55);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.lc-mobile-overlay.active{opacity:1;visibility:visible}
.lc-mobile-only{display:none!important}
[role="dialog"],.modal-content,.dialog-content{max-width:min(94vw,760px);max-height:calc(100dvh - 24px)}
.modal-body,.dialog-body{overflow:auto;overscroll-behavior:contain}
canvas{width:100%!important}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--brand-primary,#2563eb) 32%,transparent);outline-offset:2px}

@media(max-width:768px){
  body.lc-drawer-open{overflow:hidden;touch-action:none}
  .lc-mobile-only{display:flex!important}
  .admin-content,.customer-content,.pr-content,.ag-main{min-width:0}
  .page-heading,.section-header,.pr-page-head,.pr-card-head{min-width:0}
  .page-heading h1,.pr-page-head h1{overflow-wrap:anywhere}
  .section-header,.pr-card-head{align-items:flex-start;flex-wrap:wrap}
  .section-header>*:last-child,.pr-card-head>*:last-child{margin-left:auto}
  .header-title,.pr-title strong,.ag-mobile-bar strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-text,.pr-title{min-width:0}
  :where(button,.btn,[class$="-btn"],[class*="-button"],[class*="-action"],a[role="button"]){min-height:44px}
  :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){width:100%;font-size:16px}
  :where(.row,.form-row,.filter-row,.toolbar,.actions,.button-row){max-width:100%}
  .lc-responsive-table{border-radius:14px}
  .lc-mobile-cards thead{display:none}
  .lc-mobile-cards,.lc-mobile-cards tbody,.lc-mobile-cards tr,.lc-mobile-cards td{display:block;width:100%}
  .lc-mobile-cards tr{margin:0 0 12px;padding:10px 12px;border:1px solid var(--brand-border,#e5e7eb);border-radius:14px;background:var(--brand-surface,#fff);box-shadow:0 4px 14px rgba(15,23,42,.04)}
  .lc-mobile-cards td{display:grid;grid-template-columns:minmax(92px,38%) minmax(0,1fr);align-items:start;gap:10px;padding:7px 0!important;border:0!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere}
  .lc-mobile-cards td::before{content:attr(data-label);font-size:11px;font-weight:800;color:var(--brand-muted,#64748b);text-align:left}
  .lc-mobile-cards td[data-label=""],.lc-mobile-cards td:not([data-label]){display:block;text-align:left!important}
  .lc-mobile-cards td:last-child{padding-top:10px!important}
  .lc-mobile-cards td:last-child :where(.actions,[class*="actions"],form){display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .lc-mobile-cards td:last-child :where(a,button){white-space:nowrap}
  .modal,.dialog,[role="dialog"]{padding:8px!important}
  .modal-dialog,.dialog-panel{width:100%!important;max-width:100%!important;margin:0!important}
  .modal-content,.dialog-content,[role="dialog"]{max-height:calc(100dvh - 16px)!important;border-radius:16px}
  .modal-header,.modal-footer,.dialog-header,.dialog-footer{position:sticky;background:inherit;z-index:2}
  .modal-header,.dialog-header{top:0}
  .modal-footer,.dialog-footer{bottom:0;display:flex;flex-wrap:wrap;gap:8px}
  .pagination{display:flex;max-width:100%;overflow-x:auto;padding-bottom:4px}
  .ag-side{z-index:1000!important}
}
@media(max-width:390px){
  .admin-content,.customer-content,.pr-content{padding-left:12px!important;padding-right:12px!important}
  .header-actions,.pr-head-actions{gap:4px}
  .header-action,.pr-head-link{width:38px;height:38px}
  .wallet-actions,.pr-grid{grid-template-columns:1fr}
  .lc-mobile-cards td{grid-template-columns:1fr;text-align:left!important;gap:3px}
}
@media(max-width:768px) and (orientation:landscape){
  [role="dialog"],.modal-content,.dialog-content{max-height:calc(100dvh - 12px)}
}
@media(prefers-reduced-motion:reduce){
  .admin-sidebar,.customer-sidebar,.pr-sidebar,.ag-side,.sidebar-overlay,.pr-overlay,.lc-mobile-overlay{transition:none!important}
}


/* Prevent mobile browsers (especially iOS Safari) from auto-zooming focused form controls. */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px !important;
  }
}


/* =========================================
   GLOBAL APP TYPOGRAPHY
   Consistent, readable type across every workspace and mobile form.
========================================= */
:root {
  --lc-font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html {
  font-family: var(--lc-font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body,
button,
input,
select,
textarea {
  font-family: var(--lc-font-sans) !important;
}
body {
  line-height: 1.5;
  letter-spacing: -0.005em;
}
:where(h1, h2, h3, h4, h5, h6, strong, b, .header-title, .page-title) {
  letter-spacing: -0.025em;
}
:where(p, li, label, input, select, textarea, button, a) {
  line-height: 1.5;
}
@media (max-width: 768px) {
  body { font-size: 15px; }
  :where(h1) { line-height: 1.15; }
  :where(h2, h3, h4) { line-height: 1.25; }
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px !important;
    line-height: 1.4;
  }
}