/* =========================================================
   THEDESKHELP — ONE UNIFIED APPLICATION DESIGN SYSTEM
   Legacy + Module Upgrade + Premium Overview
   ========================================================= */

#app.tdh-unified{
  --ui-blue:#0047AB;
  --ui-indigo:#480082;
  --ui-violet:#734E96;
  --ui-navy:#121B35;
  --ui-bg:#F5F7FB;
  --ui-surface:#FFFFFF;
  --ui-line:#E4E9F1;
  --ui-muted:#667085;
  --ui-soft:#F8FAFD;
  --ui-green:#18A86B;
  --ui-red:#E25567;

  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  background:var(--ui-bg) !important;
  color:var(--ui-navy) !important;
}

/* ================= GLOBAL SHELL ================= */

#app.tdh-unified,
#app.tdh-unified *{
  box-sizing:border-box !important;
}

html,
body{
  overflow:hidden !important;
}

#app.tdh-unified{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:100vw !important;
  overflow:hidden !important;
}

/* ================= SIDEBAR ================= */

#app.tdh-unified .sidebar{
  position:fixed !important;
  inset:0 auto 0 0 !important;
  width:252px !important;
  min-width:252px !important;
  max-width:252px !important;
  height:100vh !important;

  display:flex !important;
  flex-direction:column !important;

  background:#fff !important;
  border-right:1px solid var(--ui-line) !important;
  box-shadow:8px 0 30px rgba(18,27,53,.035) !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  z-index:500 !important;
}

/* Native approved logo */

#app.tdh-unified .sidebar .brand{
  flex:0 0 82px !important;
  width:100% !important;
  height:82px !important;
  margin:0 !important;
  padding:0 !important;

  border-bottom:1px solid var(--ui-line) !important;
  background:
    #fff url('/assets/thedeskhelp-final-logo.png')
    18px center / 205px auto no-repeat !important;
}

#app.tdh-unified .sidebar .brand > *{
  visibility:hidden !important;
}

#app.tdh-unified .nav-item{
  width:calc(100% - 22px) !important;
  min-height:44px !important;
  margin:3px 11px !important;
  padding:0 12px !important;

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

  background:transparent !important;
  color:#667085 !important;

  font-family:'Inter',sans-serif !important;
  font-size:13px !important;
  font-weight:650 !important;

  transition:.16s ease !important;
}

#app.tdh-unified .nav-item:hover{
  background:#F6F8FC !important;
  color:var(--ui-navy) !important;
}

#app.tdh-unified .nav-item.active{
  background:#EDF3FF !important;
  border-color:#DCE8FF !important;
  color:var(--ui-blue) !important;
  box-shadow:none !important;
}

#app.tdh-unified .nav-icon{
  color:#8590A3 !important;
  font-size:14px !important;
}

#app.tdh-unified .nav-item.active .nav-icon{
  color:var(--ui-blue) !important;
}

/* ================= MAIN FRAME ================= */

#app.tdh-unified main{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:252px !important;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  height:100vh !important;
  max-height:100vh !important;

  overflow:hidden !important;
  background:var(--ui-bg) !important;
}

/* Standard header */

#app.tdh-unified main > header{
  position:sticky !important;
  top:0 !important;

  height:78px !important;
  width:100% !important;

  display:flex !important;
  align-items:center !important;

  padding:0 28px !important;

  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid var(--ui-line) !important;
  box-shadow:none !important;

  z-index:300 !important;
}

/* Overview has its own product topbar */
#app.tdh-unified.pdx-active main > header{
  display:none !important;
}

#app.tdh-unified #content{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  height:calc(100vh - 78px) !important;
  max-height:calc(100vh - 78px) !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  padding:28px 32px 42px !important;
  background:var(--ui-bg) !important;
}

#app.tdh-unified.pdx-active #content{
  height:100vh !important;
  max-height:100vh !important;
  padding:0 !important;
}

/* ================= TYPOGRAPHY ================= */

#app.tdh-unified h1,
#app.tdh-unified h2,
#app.tdh-unified h3,
#app.tdh-unified h4,
#app.tdh-unified .module-title h2,
#app.tdh-unified .dh-module-title,
#app.tdh-unified .tdh-kpi-value{
  font-family:'Manrope','Inter',sans-serif !important;
  color:var(--ui-navy) !important;
  letter-spacing:-.035em !important;
}

#app.tdh-unified .module-title h2,
#app.tdh-unified .dh-module-title{
  font-size:27px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
}

#app.tdh-unified .module-title p,
#app.tdh-unified .dh-module-sub{
  margin-top:5px !important;
  color:#7B8799 !important;
  font-size:11px !important;
  line-height:1.6 !important;
}

/* ================= COMMON PANELS ================= */

#app.tdh-unified .card,
#app.tdh-unified .section,
#app.tdh-unified .panel,
#app.tdh-unified .module-card,
#app.tdh-unified .dh-module,
#app.tdh-unified .dh-module > .dh-table-wrap,
#app.tdh-unified .dh-module > .card{
  background:#fff !important;
  border:1px solid var(--ui-line) !important;
  border-radius:14px !important;
  box-shadow:0 4px 18px rgba(18,27,53,.035) !important;
}

#app.tdh-unified .card,
#app.tdh-unified .section,
#app.tdh-unified .panel,
#app.tdh-unified .module-card{
  padding:20px !important;
}

#app.tdh-unified .dh-module{
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#app.tdh-unified .dh-module-head{
  margin-bottom:20px !important;
}

#app.tdh-unified .dh-module-toolbar{
  min-height:52px !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;

  margin-bottom:14px !important;
  padding:7px !important;

  border:1px solid var(--ui-line) !important;
  border-radius:11px !important;
  background:#fff !important;
}

/* ================= BUTTONS ================= */

#app.tdh-unified .btn,
#app.tdh-unified .dh-primary,
#app.tdh-unified button.btn-primary{
  min-height:40px !important;
  padding:0 15px !important;

  border:1px solid #DCE3ED !important;
  border-radius:9px !important;

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

  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  font-weight:750 !important;

  cursor:pointer !important;
}

#app.tdh-unified .btn.primary,
#app.tdh-unified .dh-primary,
#app.tdh-unified button.btn-primary{
  border-color:var(--ui-blue) !important;
  background:var(--ui-blue) !important;
  color:#fff !important;
  box-shadow:0 7px 18px rgba(0,71,171,.16) !important;
}

#app.tdh-unified .btn:hover,
#app.tdh-unified .dh-primary:hover{
  border-color:#C9D5E5 !important;
  background:#F8FAFD !important;
}

#app.tdh-unified .btn.primary:hover,
#app.tdh-unified .dh-primary:hover{
  background:#003D93 !important;
  color:#fff !important;
}

/* ================= FORM ELEMENTS ================= */

#app.tdh-unified input,
#app.tdh-unified select,
#app.tdh-unified textarea,
#app.tdh-unified .input{
  min-height:40px !important;
  border:1px solid #DCE3ED !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#172033 !important;
  font-family:'Inter',sans-serif !important;
  font-size:12px !important;
  box-shadow:none !important;
}

#app.tdh-unified textarea{
  padding:10px 12px !important;
}

#app.tdh-unified input:focus,
#app.tdh-unified select:focus,
#app.tdh-unified textarea:focus,
#app.tdh-unified .input:focus{
  outline:none !important;
  border-color:#7A9AD7 !important;
  box-shadow:0 0 0 3px rgba(0,71,171,.08) !important;
}

/* ================= TABLES ================= */

#app.tdh-unified .table,
#app.tdh-unified .dh-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:#fff !important;
}

#app.tdh-unified .table th,
#app.tdh-unified .dh-table th{
  padding:13px 14px !important;
  background:#F8FAFD !important;
  border-bottom:1px solid var(--ui-line) !important;

  color:#7B8799 !important;
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}

#app.tdh-unified .table td,
#app.tdh-unified .dh-table td{
  padding:14px !important;
  border-bottom:1px solid #EEF1F5 !important;

  color:#344054 !important;
  font-size:12px !important;
}

#app.tdh-unified .table tr:hover td,
#app.tdh-unified .dh-table tr:hover td{
  background:#FBFCFE !important;
}

/* ================= LISTS / INBOX / EMAIL / TICKETS ================= */

#app.tdh-unified .conversation-item,
#app.tdh-unified .thread-item,
#app.tdh-unified .mail-row,
#app.tdh-unified .ticket-row,
#app.tdh-unified .list-item{
  min-height:58px !important;
  padding:12px 14px !important;

  border-bottom:1px solid #EEF1F5 !important;
  background:#fff !important;

  font-size:12px !important;
}

#app.tdh-unified .conversation-item:hover,
#app.tdh-unified .thread-item:hover,
#app.tdh-unified .mail-row:hover,
#app.tdh-unified .ticket-row:hover,
#app.tdh-unified .list-item:hover{
  background:#F8FAFD !important;
}

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

#app.tdh-unified .badge,
#app.tdh-unified .dh-pill{
  display:inline-flex !important;
  align-items:center !important;

  min-height:23px !important;
  padding:4px 8px !important;

  border:0 !important;
  border-radius:7px !important;

  background:#EDF3FF !important;
  color:var(--ui-blue) !important;

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

/* ================= MODULE-UPGRADE NORMALIZATION ================= */

#app.tdh-unified .dh-mail-app,
#app.tdh-unified .dh-module{
  font-family:'Inter',sans-serif !important;
}

#app.tdh-unified .dh-mail-app h1,
#app.tdh-unified .dh-mail-app h2,
#app.tdh-unified .dh-mail-app h3,
#app.tdh-unified .dh-mail-app strong{
  font-family:'Manrope','Inter',sans-serif !important;
  color:var(--ui-navy) !important;
}

#app.tdh-unified .dh-mail-app{
  background:transparent !important;
}

/* ================= OVERVIEW NORMALIZATION ================= */

/* Special overview topbar stays only on Overview,
   but uses same design language */

#app.tdh-unified.pdx-active .tdh-topbar{
  height:76px !important;
  padding:0 24px !important;
  background:#fff !important;
  border-bottom:1px solid var(--ui-line) !important;
  box-shadow:none !important;
}

#app.tdh-unified.pdx-active .tdh-main{
  padding:26px 30px 40px !important;
  background:var(--ui-bg) !important;
}

#app.tdh-unified.pdx-active .tdh-welcome h1{
  font-family:'Manrope','Inter',sans-serif !important;
  font-size:28px !important;
  font-weight:800 !important;
  color:var(--ui-navy) !important;
}

#app.tdh-unified.pdx-active .tdh-welcome p{
  font-size:11px !important;
  color:#7B8799 !important;
}

#app.tdh-unified.pdx-active .tdh-kpi,
#app.tdh-unified.pdx-active .tdh-card{
  border:1px solid var(--ui-line) !important;
  border-radius:13px !important;
  background:#fff !important;
  box-shadow:0 4px 18px rgba(18,27,53,.035) !important;
}

/* ================= NO TRANSFORMS / NO POSTER EFFECT ================= */

#app.tdh-unified .card,
#app.tdh-unified .panel,
#app.tdh-unified .module-card,
#app.tdh-unified .dh-module,
#app.tdh-unified .dh-mail-app{
  transform:none !important;
}

#app.tdh-unified > *,
#app.tdh-unified main > *,
#app.tdh-unified #content > *{
  max-width:100% !important;
  min-width:0 !important;
}

/* ================= SCROLL / OVERFLOW ================= */

#app.tdh-unified,
#app.tdh-unified main{
  overflow:hidden !important;
}

#app.tdh-unified #content{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

  #app.tdh-unified .sidebar{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
  }

  #app.tdh-unified main{
    left:78px !important;
  }
}

@media(max-width:650px){

  #app.tdh-unified .sidebar{
    display:none !important;
  }

  #app.tdh-unified main{
    left:0 !important;
    width:100% !important;
  }

  #app.tdh-unified #content{
    padding:18px 15px 30px !important;
  }

  #app.tdh-unified.pdx-active #content{
    padding:0 !important;
  }
}


/* =========================================================
   ONE UI — OVERVIEW MODULE
   ========================================================= */

#app.tdh-unified .one-overview-toolbar{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;
}

#app.tdh-unified .one-search{
  flex:1;
  min-width:220px;
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid #DDE4EE;
  border-radius:9px;
  background:#fff;
  color:#98A2B3;
}

#app.tdh-unified .one-search input{
  flex:1;
  min-height:0 !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  padding:0 !important;
}

#app.tdh-unified .one-welcome{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

#app.tdh-unified .one-welcome h1{
  margin:0;
  font-size:28px;
  font-weight:800;
}

#app.tdh-unified .one-welcome p{
  margin:6px 0 0;
  color:#7B8799;
  font-size:11px;
}

#app.tdh-unified .one-kpis{
  margin-bottom:14px;
}

#app.tdh-unified .one-line-chart{
  height:220px;
  margin-top:12px;
}

#app.tdh-unified .one-line-chart svg{
  width:100%;
  height:100%;
}

#app.tdh-unified .one-axis{
  display:flex;
  justify-content:space-between;
  color:#98A2B3;
  font-size:7px;
}

#app.tdh-unified .one-channel{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
}

#app.tdh-unified .one-donut{
  width:145px;
  height:145px;
  flex:0 0 145px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(
    #0047AB 0 42%,
    #734E96 42% 60%,
    #A18FD1 60% 74%,
    #D8B9E8 74% 88%,
    #DDE3EC 88% 100%
  );
}

#app.tdh-unified .one-donut:after{
  content:"";
  width:86px;
  height:86px;
  border-radius:50%;
  background:#fff;
}

#app.tdh-unified .one-legend{
  display:grid;
  gap:13px;
}

#app.tdh-unified .one-legend div{
  min-width:125px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#667085;
  font-size:9px;
}

#app.tdh-unified .one-legend i{
  width:7px;
  height:7px;
  border-radius:50%;
}

#app.tdh-unified .one-legend b{
  margin-left:auto;
  color:#344054;
}

#app.tdh-unified .overview-conversation-row{
  min-height:57px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 0;
  border-bottom:1px solid #EEF1F5;
}

#app.tdh-unified .overview-ticket{
  min-height:51px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 0;
  border-bottom:1px solid #EEF1F5;
}

#app.tdh-unified .overview-ticket > div:nth-child(2){
  flex:1;
  min-width:0;
}

#app.tdh-unified .one-big-number{
  color:#121B35;
  font-family:'Manrope',sans-serif;
  font-size:29px;
  font-weight:800;
}

#app.tdh-unified .one-big-number span{
  margin-left:6px;
  color:#18A86B;
  font-family:'Inter',sans-serif;
  font-size:9px;
  font-weight:800;
}

#app.tdh-unified .one-bars{
  height:145px;
  display:flex;
  align-items:flex-end;
  gap:7px;
  margin-top:10px;
}

#app.tdh-unified .one-bars i{
  flex:1;
  border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,#734E96,#0047AB);
  opacity:.82;
}

#app.tdh-unified .one-page{
  display:grid;
  grid-template-columns:55px 1fr 42px;
  gap:9px;
  align-items:center;
  padding:9px 0;
}

#app.tdh-unified .one-page > span{
  color:#667085;
  font-size:9px;
}

#app.tdh-unified .one-page > div{
  height:6px;
  border-radius:99px;
  overflow:hidden;
  background:#EDF1F6;
}

#app.tdh-unified .one-page i{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#0047AB,#734E96);
}

#app.tdh-unified .one-page b{
  text-align:right;
  color:#344054;
  font-size:9px;
}

#app.tdh-unified .one-team{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid #EEF1F5;
}

#app.tdh-unified .one-team span{
  flex:1;
  color:#344054;
  font-size:10px;
  font-weight:650;
}

#app.tdh-unified .one-team b{
  color:#0047AB;
  font-size:10px;
}

@media(max-width:900px){
  #app.tdh-unified .one-channel{
    flex-direction:column;
    gap:15px;
  }

  #app.tdh-unified .one-overview-toolbar{
    flex-wrap:wrap;
  }

  #app.tdh-unified .one-search{
    flex-basis:100%;
  }
}


/* =========================================================
   THEDESKHELP — FINAL HORIZONTAL LOCK
   ========================================================= */

html,
body{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
}

#app.tdh-unified{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:0 !important;
  height:100vh !important;
  max-height:100vh !important;
  overflow:hidden !important;
}

/* FIXED SIDEBAR */
#app.tdh-unified .sidebar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  bottom:0 !important;

  width:252px !important;
  min-width:252px !important;
  max-width:252px !important;

  height:100vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;

  box-sizing:border-box !important;
}

/* FIXED MAIN AREA */
#app.tdh-unified main{
  position:fixed !important;

  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:252px !important;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  height:100vh !important;
  max-height:100vh !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* PAGE HEADER */
#app.tdh-unified main > header{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:0 !important;
  box-sizing:border-box !important;
}

/* PAGE CONTENT */
#app.tdh-unified #content{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  height:calc(100vh - 78px) !important;
  max-height:calc(100vh - 78px) !important;

  margin:0 !important;
  box-sizing:border-box !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* OVERVIEW */
#app.tdh-unified.pdx-active #content{
  height:100vh !important;
  max-height:100vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* STOP FLEX/GRID CHILDREN FROM PUSHING THE APP SIDEWAYS */
#app.tdh-unified main > *,
#app.tdh-unified #content > *,
#app.tdh-unified .card,
#app.tdh-unified .section,
#app.tdh-unified .panel,
#app.tdh-unified .module-card,
#app.tdh-unified .dh-module,
#app.tdh-unified .dh-mail-app,
#app.tdh-unified .grid,
#app.tdh-unified .grid > *,
#app.tdh-unified .toolbar,
#app.tdh-unified .module-title{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* MODULE INTERNAL HORIZONTAL SCROLL ONLY */
#app.tdh-unified .dh-table-wrap,
#app.tdh-unified .table-wrap,
#app.tdh-unified .mail-list,
#app.tdh-unified .thread-list,
#app.tdh-unified .conversation-list,
#app.tdh-unified .ticket-list,
#app.tdh-unified .pipeline,
#app.tdh-unified .kanban,
#app.tdh-unified .spreadsheet-wrap{
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
}

/* NORMAL TABLES NEVER PUSH THE WHOLE APP */
#app.tdh-unified table{
  max-width:100% !important;
}

#app.tdh-unified img,
#app.tdh-unified svg,
#app.tdh-unified canvas,
#app.tdh-unified video{
  max-width:100% !important;
}

/* PREVENT LONG TEXT / IDS / EMAILS FROM EXPANDING THE LAYOUT */
#app.tdh-unified td,
#app.tdh-unified th,
#app.tdh-unified .dh-table td,
#app.tdh-unified .dh-table th{
  overflow-wrap:anywhere !important;
}

/* NO ACCIDENTAL HORIZONTAL TRANSFORM */
#app.tdh-unified,
#app.tdh-unified main,
#app.tdh-unified #content,
#app.tdh-unified .sidebar{
  transform:none !important;
}

/* MOBILE */
@media(max-width:900px){

  #app.tdh-unified .sidebar{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
  }

  #app.tdh-unified main{
    left:78px !important;
  }
}

@media(max-width:650px){

  #app.tdh-unified .sidebar{
    display:none !important;
  }

  #app.tdh-unified main{
    left:0 !important;
    right:0 !important;
    width:100% !important;
  }
}


/* =========================================================
   WORKSPACE SELECTOR — FINAL FIX
   ========================================================= */

#app.tdh-unified .workspace{
  display:block !important;
  width:calc(100% - 24px) !important;
  min-width:0 !important;
  max-width:none !important;

  margin:16px 12px 12px !important;
  padding:0 !important;

  box-sizing:border-box !important;
}

#app.tdh-unified .workspace > span,
#app.tdh-unified .workspace > label{
  display:block !important;
  width:100% !important;
  margin:0 0 7px !important;
  padding:0 7px !important;

  color:#7B8799 !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

#app.tdh-unified .workspace button,
#app.tdh-unified .workspace select,
#app.tdh-unified .workspace .workspace-btn,
#app.tdh-unified .workspace .workspace-select{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  height:42px !important;
  min-height:42px !important;

  padding:0 11px !important;
  margin:0 !important;

  border:1px solid #E0E6EF !important;
  border-radius:10px !important;

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

  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;

  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;

  box-shadow:none !important;
}

#app.tdh-unified .workspace button:hover,
#app.tdh-unified .workspace select:hover{
  background:#F8FAFD !important;
  border-color:#CFD9E7 !important;
}

#app.tdh-unified .workspace button *,
#app.tdh-unified .workspace select *{
  max-width:100% !important;
  min-width:0 !important;
}


/* =========================================================
   OVERVIEW-ONLY TOP BAR
   ========================================================= */

#app.tdh-unified > main > header,
#app.tdh-unified header{
  box-sizing:border-box !important;
}

#app.tdh-unified[data-view="overview"] > main > header,
#app.tdh-unified[data-view="overview"] header{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  height:78px !important;
  min-height:78px !important;

  background:#FFFFFF !important;
  border-bottom:1px solid #E8ECF3 !important;

  padding:0 18px !important;
}

#app.tdh-unified:not([data-view="overview"]) > main > header,
#app.tdh-unified:not([data-view="overview"]) header{
  display:none !important;
}

/* When header is hidden, content uses the full screen */
#app.tdh-unified[data-view="overview"] #content{
  height:calc(100vh - 78px) !important;
}

#app.tdh-unified:not([data-view="overview"]) #content{
  height:100vh !important;
}

/* Clean overview header */
#app.tdh-unified[data-view="overview"] header button{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  padding:0 !important;
  margin-left:9px !important;

  border:1px solid #E2E7F0 !important;
  border-radius:12px !important;

  background:#FFFFFF !important;
  color:#344054 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-shadow:0 2px 8px rgba(16,24,40,.04) !important;
  transition:.18s ease !important;
}

#app.tdh-unified[data-view="overview"] header button:hover{
  background:#F7F9FC !important;
  border-color:#D5DCE8 !important;
  transform:translateY(-1px);
}

/* Avatar remains circular */
#app.tdh-unified[data-view="overview"] header .avatar,
#app.tdh-unified[data-view="overview"] header .user-avatar{
  border-radius:50% !important;
}

/* Theme toggle */
#app.tdh-unified[data-view="overview"] #tdhThemeToggle{
  font-size:20px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

.tdh-theme-icon{
  display:block;
  line-height:1;
}

/* =========================================================
   DARK MODE
   ========================================================= */

html.tdh-dark,
html.tdh-dark body{
  background:#0F1420 !important;
}

html.tdh-dark #app.tdh-unified{
  background:#0F1420 !important;
  color:#E8ECF4 !important;
}

html.tdh-dark #app.tdh-unified > main > header,
html.tdh-dark #app.tdh-unified header{
  background:#151B28 !important;
  border-bottom-color:#252D3D !important;
}

html.tdh-dark #app.tdh-unified[data-view="overview"] header button{
  background:#1B2231 !important;
  border-color:#30394B !important;
  color:#E7EBF3 !important;
}

html.tdh-dark #app.tdh-unified[data-view="overview"] header button:hover{
  background:#232C3D !important;
  border-color:#3A4559 !important;
}

html.tdh-dark #app.tdh-unified #content{
  background:#0F1420 !important;
  color:#E8ECF4 !important;
}

html.tdh-dark #app.tdh-unified .card,
html.tdh-dark #app.tdh-unified .section,
html.tdh-dark #app.tdh-unified .module-title{
  background:#151B28 !important;
  border-color:#252D3D !important;
  color:#E8ECF4 !important;
}

html.tdh-dark #app.tdh-unified h1,
html.tdh-dark #app.tdh-unified h2,
html.tdh-dark #app.tdh-unified h3,
html.tdh-dark #app.tdh-unified b,
html.tdh-dark #app.tdh-unified strong{
  color:#F1F4F9 !important;
}

html.tdh-dark #app.tdh-unified p,
html.tdh-dark #app.tdh-unified .label,
html.tdh-dark #app.tdh-unified .kpi,
html.tdh-dark #app.tdh-unified span{
  color:#AAB4C5;
}


/* =========================================================
   REMOVE LARGE SIDE GUTTERS FROM MODULE PAGES
   ========================================================= */

#app.tdh-unified #content{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;

  padding-left:18px !important;
  padding-right:18px !important;
}

#app.tdh-unified #content > *{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

#app.tdh-unified #content .dh-inbox{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

#app.tdh-unified #content .module-title{
  width:100% !important;
  max-width:none !important;
}


/* =========================================================
   INBOX — FINAL FULL WIDTH + NO CUTOFF FIX
   ========================================================= */

/* Keep sidebar exact */
#app.tdh-unified .sidebar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  bottom:0 !important;
  width:252px !important;
  min-width:252px !important;
  max-width:252px !important;
}

/* Main starts exactly after sidebar */
#app.tdh-unified main{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:252px !important;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:100vh !important;
  margin:0 !important;

  overflow:hidden !important;
}

/* Content uses the available width */
#app.tdh-unified #content{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  padding:0 8px 12px 8px !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;
}

/* Inbox filter row */
#app.tdh-unified[data-view="inbox"] #content{
  padding-left:8px !important;
  padding-right:8px !important;
}

/* Inbox itself fills width */
#app.tdh-unified[data-view="inbox"] .dh-inbox{
  box-sizing:border-box !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  height:calc(100vh - 108px) !important;
  max-height:calc(100vh - 108px) !important;

  margin:14px 0 0 0 !important;

  display:grid !important;
  grid-template-columns:350px minmax(0,1fr) 350px !important;

  overflow:hidden !important;
}

/* Chat column */
#app.tdh-unified[data-view="inbox"] .dh-chat{
  min-width:0 !important;
  min-height:0 !important;

  height:100% !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;
}

/* Chat header stays fixed */
#app.tdh-unified[data-view="inbox"] .dh-chat-head{
  flex:0 0 auto !important;
}

/* Message area takes remaining space */
#app.tdh-unified[data-view="inbox"] .dh-chat-body{
  flex:1 1 auto !important;

  min-height:0 !important;
  height:auto !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Composer stays visible */
#app.tdh-unified[data-view="inbox"] .dh-composer{
  flex:0 0 auto !important;

  position:relative !important;
  bottom:auto !important;

  width:100% !important;
  max-width:none !important;

  box-sizing:border-box !important;
}

/* Customer panel */
#app.tdh-unified[data-view="inbox"] .dh-customer{
  min-width:0 !important;
  max-width:none !important;

  height:100% !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Conversation list */
#app.tdh-unified[data-view="inbox"] .dh-inbox-list{
  min-width:0 !important;

  height:100% !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Remove accidental transforms / margins */
#app.tdh-unified[data-view="inbox"] .dh-inbox,
#app.tdh-unified[data-view="inbox"] .dh-chat,
#app.tdh-unified[data-view="inbox"] .dh-customer,
#app.tdh-unified[data-view="inbox"] .dh-inbox-list{
  transform:none !important;
}

/* Desktop: don't let old responsive rules shrink the layout */
@media (min-width:1200px){
  #app.tdh-unified[data-view="inbox"] .dh-inbox{
    grid-template-columns:350px minmax(0,1fr) 350px !important;
  }
}


/* =========================================================
   INBOX — READABILITY / TYPOGRAPHY UPGRADE
   ========================================================= */

/* General inbox text */
#app.tdh-unified[data-view="inbox"]{
  font-size:13px !important;
}

/* Filter buttons */
#app.tdh-unified[data-view="inbox"] #content > div:first-child button{
  font-size:13px !important;
  font-weight:700 !important;
  min-height:40px !important;
  padding:0 16px !important;
}

/* Conversation sidebar */
#app.tdh-unified[data-view="inbox"] .dh-inbox-list-head strong{
  font-size:15px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-inbox-list-head span{
  font-size:11px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-conversation-name,
#app.tdh-unified[data-view="inbox"] .dh-conversation-name b{
  font-size:13px !important;
  line-height:1.35 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-conversation-meta{
  font-size:11px !important;
  line-height:1.4 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-conversation-preview{
  font-size:12px !important;
  line-height:1.45 !important;
}

#app.tdh-unified[data-view="inbox"] .mini{
  font-size:12px !important;
}

/* Chat header */
#app.tdh-unified[data-view="inbox"] .dh-chat-title strong{
  font-size:15px !important;
  line-height:1.3 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-chat-title span{
  font-size:11px !important;
  line-height:1.4 !important;
}

/* Top action buttons */
#app.tdh-unified[data-view="inbox"] .dh-chat-head button,
#app.tdh-unified[data-view="inbox"] .dh-chat-head .btn,
#app.tdh-unified[data-view="inbox"] .dh-chat-head > div button{
  font-size:11px !important;
  font-weight:700 !important;
  min-height:40px !important;
}

/* Chat messages */
#app.tdh-unified[data-view="inbox"] .dh-msg{
  font-size:13px !important;
  line-height:1.6 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-msg-time{
  font-size:10px !important;
  line-height:1.3 !important;
}

/* Visitor intelligence */
#app.tdh-unified[data-view="inbox"] .dh-chat-body{
  font-size:13px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-chat-body b{
  font-size:12px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-chat-body small,
#app.tdh-unified[data-view="inbox"] .dh-chat-body span{
  font-size:11px !important;
}

/* Private note */
#app.tdh-unified[data-view="inbox"] .dh-chat-body .private-note,
#app.tdh-unified[data-view="inbox"] .dh-chat-body .note{
  font-size:12px !important;
  line-height:1.5 !important;
}

/* Composer */
#app.tdh-unified[data-view="inbox"] .dh-composer input,
#app.tdh-unified[data-view="inbox"] .dh-composer textarea{
  font-size:13px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-composer input::placeholder,
#app.tdh-unified[data-view="inbox"] .dh-composer textarea::placeholder{
  font-size:13px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-composer button{
  font-size:12px !important;
  font-weight:700 !important;
}

/* Customer 360 */
#app.tdh-unified[data-view="inbox"] .dh-customer{
  font-size:12px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-customer strong{
  font-size:14px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-customer p{
  font-size:11px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-customer-head{
  font-size:13px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-customer-head span{
  font-size:10px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile strong{
  font-size:14px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile p{
  font-size:11px !important;
}

/* Lead / conversation information */
#app.tdh-unified[data-view="inbox"] .dh-info-row{
  font-size:12px !important;
  line-height:1.5 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-row span:first-child{
  font-size:10px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-row span:last-child{
  font-size:11px !important;
  font-weight:700 !important;
}

/* Badges */
#app.tdh-unified[data-view="inbox"] .badge{
  font-size:10px !important;
  font-weight:700 !important;
}

/* Section headings */
#app.tdh-unified[data-view="inbox"] .dh-customer h3,
#app.tdh-unified[data-view="inbox"] .dh-customer h4{
  font-size:13px !important;
}


/* =========================================================
   INBOX — PRODUCTION READABILITY PASS
   ========================================================= */

#app.tdh-unified[data-view="inbox"]{
  font-size:14px !important;
}

/* ---------- FILTERS ---------- */

#app.tdh-unified[data-view="inbox"] #content > div:first-child{
  min-height:44px !important;
}

#app.tdh-unified[data-view="inbox"] #content > div:first-child button{
  height:42px !important;
  min-height:42px !important;
  padding:0 17px !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:700 !important;
}

/* ---------- LEFT CONVERSATION LIST ---------- */

#app.tdh-unified[data-view="inbox"] .dh-inbox-list-head{
  height:68px !important;
  padding:0 20px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-inbox-list-head strong{
  font-size:16px !important;
  line-height:1.25 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-inbox-list-head span{
  font-size:12px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-conversation{
  padding:17px 18px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-conversation-name,
#app.tdh-unified[data-view="inbox"] .dh-conversation-name b{
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-conversation-meta{
  margin-top:4px !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-conversation-preview{
  margin-top:8px !important;
  margin-left:48px !important;

  font-size:12px !important;
  line-height:1.45 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-conversation .mini{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;

  font-size:13px !important;
  border-radius:11px !important;
}

/* ---------- CHAT HEADER ---------- */

#app.tdh-unified[data-view="inbox"] .dh-chat-head{
  min-height:72px !important;
  padding:0 18px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-chat-title strong{
  font-size:16px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-chat-title span{
  margin-top:3px !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

/* ---------- ACTION BUTTONS ---------- */

#app.tdh-unified[data-view="inbox"] .dh-chat-head button,
#app.tdh-unified[data-view="inbox"] .dh-chat-head .btn{
  min-height:40px !important;
  height:40px !important;

  padding:0 13px !important;

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

/* ---------- CHAT AREA ---------- */

#app.tdh-unified[data-view="inbox"] .dh-chat-body{
  padding:28px 30px !important;
}

/* All normal chat text */
#app.tdh-unified[data-view="inbox"] .dh-msg{
  max-width:min(72%,620px) !important;

  padding:15px 17px !important;

  font-size:14px !important;
  line-height:1.65 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-msg-time{
  margin-top:7px !important;
  font-size:10px !important;
}

/* ---------- INTELLIGENCE / NOTICE TEXT ---------- */

#app.tdh-unified[data-view="inbox"] .dh-chat-body b{
  font-size:13px !important;
  line-height:1.4 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-chat-body small{
  font-size:12px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-chat-body span{
  font-size:12px !important;
}

/* ---------- PRIVATE NOTE ---------- */

#app.tdh-unified[data-view="inbox"] .private-note,
#app.tdh-unified[data-view="inbox"] .note{
  font-size:13px !important;
  line-height:1.5 !important;
}

/* ---------- COMPOSER ---------- */

#app.tdh-unified[data-view="inbox"] .dh-composer{
  min-height:94px !important;
  height:94px !important;

  padding:14px 16px !important;
  gap:11px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-composer input,
#app.tdh-unified[data-view="inbox"] .dh-composer textarea{
  height:48px !important;

  padding:0 15px !important;

  font-size:14px !important;
  line-height:1.4 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-composer input::placeholder,
#app.tdh-unified[data-view="inbox"] .dh-composer textarea::placeholder{
  font-size:14px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-composer button{
  min-width:82px !important;
  height:48px !important;

  font-size:13px !important;
  font-weight:700 !important;
}

/* ---------- CUSTOMER 360 ---------- */

#app.tdh-unified[data-view="inbox"] .dh-customer-head{
  height:68px !important;
  padding:0 20px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-customer-head strong{
  font-size:15px !important;
  line-height:1.3 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-customer-head span{
  font-size:11px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile{
  padding:24px 20px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile-avatar{
  width:60px !important;
  height:60px !important;

  font-size:18px !important;
  border-radius:17px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile strong{
  font-size:15px !important;
  line-height:1.35 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile p{
  font-size:12px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info{
  padding:20px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info h4{
  margin-bottom:14px !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-row{
  padding:9px 0 !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-row span:first-child{
  font-size:12px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-row span:last-child{
  font-size:12px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-activity{
  padding:20px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-activity-item{
  padding-bottom:18px !important;

  font-size:12px !important;
  line-height:1.5 !important;
}

/* ---------- BADGES ---------- */

#app.tdh-unified[data-view="inbox"] .badge{
  font-size:11px !important;
  line-height:1 !important;
  font-weight:700 !important;
}

/* ---------- GENERAL SMALL TEXT ---------- */

#app.tdh-unified[data-view="inbox"] .dh-inbox *{
  text-rendering:optimizeLegibility;
}


/* =========================================================
   CUSTOMER 360 — LARGE, CLEAR, READABLE
   ========================================================= */

#app.tdh-unified[data-view="inbox"] .dh-customer{
  font-size:14px !important;
}

/* Header */
#app.tdh-unified[data-view="inbox"] .dh-customer-head{
  height:72px !important;
  padding:0 24px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-customer-head strong{
  font-size:16px !important;
  font-weight:700 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-customer-head span{
  font-size:12px !important;
}

/* Profile */
#app.tdh-unified[data-view="inbox"] .dh-profile{
  padding:26px 24px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile-avatar{
  width:64px !important;
  height:64px !important;
  font-size:20px !important;
  margin-bottom:12px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile strong{
  font-size:16px !important;
  font-weight:700 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-profile p{
  font-size:12px !important;
  margin-top:6px !important;
}

/* Lead / Conversation sections */
#app.tdh-unified[data-view="inbox"] .dh-info{
  padding:22px 24px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info h4{
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.05em !important;
  margin-bottom:16px !important;
  color:#344054 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-row{
  padding:11px 0 !important;
  font-size:14px !important;
  line-height:1.5 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-row span:first-child{
  font-size:12px !important;
  color:#7B8799 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-row span:last-child{
  font-size:13px !important;
  font-weight:700 !important;
  color:#344054 !important;
}

/* Activity */
#app.tdh-unified[data-view="inbox"] .dh-activity{
  padding:22px 24px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-activity-item{
  padding:0 0 21px 21px !important;
  font-size:13px !important;
  line-height:1.55 !important;
  color:#596579 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-activity-item:before{
  width:9px !important;
  height:9px !important;
}


/* =========================================================
   SCREENSHOT STYLE VISITOR DETAILS PANEL
   ========================================================= */

#app.tdh-unified[data-view="inbox"] .dh-inbox{
  grid-template-columns:340px minmax(0,1fr) 300px !important;
}

/* Hide old customer panel if any */
#app.tdh-unified[data-view="inbox"] .dh-customer{
  display:none !important;
}

/* Panel */
#app.tdh-unified[data-view="inbox"] .dh-visitor-panel{
  min-width:300px !important;
  width:300px !important;

  padding:10px 8px 12px !important;

  background:#161B26 !important;

  border-left:1px solid #262D3A !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  box-sizing:border-box !important;
}

/* Cards */
#app.tdh-unified[data-view="inbox"] .dh-brand-card,
#app.tdh-unified[data-view="inbox"] .dh-visitor-card,
#app.tdh-unified[data-view="inbox"] .dh-info-card,
#app.tdh-unified[data-view="inbox"] .dh-empty-card,
#app.tdh-unified[data-view="inbox"] .dh-online-card{
  width:100% !important;
  box-sizing:border-box !important;

  background:#242A37 !important;

  border:0 !important;
  border-radius:11px !important;

  margin-bottom:10px !important;
}

/* Brand */
#app.tdh-unified[data-view="inbox"] .dh-brand-card{
  padding:14px !important;
}

/* Visitor details */
#app.tdh-unified[data-view="inbox"] .dh-visitor-card{
  padding:14px !important;
}

/* Label */
#app.tdh-unified[data-view="inbox"] .dh-panel-label{
  color:#31B49F !important;

  font-size:12px !important;
  font-weight:800 !important;

  letter-spacing:.04em !important;

  margin-bottom:9px !important;
}

/* Main values */
#app.tdh-unified[data-view="inbox"] .dh-panel-value,
#app.tdh-unified[data-view="inbox"] .dh-info-main{
  color:#F2F4F8 !important;

  font-size:14px !important;
  line-height:1.45 !important;

  font-weight:500 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-info-secondary{
  color:#F0F3F7 !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

/* Inputs */
#app.tdh-unified[data-view="inbox"] .dh-visitor-input,
#app.tdh-unified[data-view="inbox"] .dh-visitor-note{
  display:block !important;

  width:100% !important;
  box-sizing:border-box !important;

  background:#11161F !important;
  color:#F0F3F7 !important;

  border:1px solid #353D4C !important;
  border-radius:7px !important;

  font-family:inherit !important;
  font-size:13px !important;

  outline:none !important;
}

#app.tdh-unified[data-view="inbox"] .dh-visitor-input{
  height:34px !important;

  margin-bottom:9px !important;
  padding:0 10px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-visitor-note{
  min-height:57px !important;
  resize:vertical !important;

  padding:9px 10px !important;

  margin-bottom:9px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-visitor-input::placeholder,
#app.tdh-unified[data-view="inbox"] .dh-visitor-note::placeholder{
  color:#8F9AAF !important;
}

#app.tdh-unified[data-view="inbox"] .dh-visitor-input:focus,
#app.tdh-unified[data-view="inbox"] .dh-visitor-note:focus{
  border-color:#31B49F !important;
}

/* Save button */
#app.tdh-unified[data-view="inbox"] .dh-save-visitor{
  width:100% !important;
  height:36px !important;

  border:0 !important;
  border-radius:7px !important;

  background:#31B49F !important;
  color:#fff !important;

  font-size:13px !important;
  font-weight:800 !important;

  cursor:pointer !important;
}

/* Info cards */
#app.tdh-unified[data-view="inbox"] .dh-info-card{
  padding:13px 14px !important;
}

/* Page URL */
#app.tdh-unified[data-view="inbox"] .dh-page-link{
  color:#4FC3B4 !important;

  font-size:13px !important;
  line-height:1.45 !important;

  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* Empty cards exactly like reference */
#app.tdh-unified[data-view="inbox"] .dh-empty-card{
  height:23px !important;
}

/* Online */
#app.tdh-unified[data-view="inbox"] .dh-online-card{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;

  padding:11px 14px !important;

  color:#DCE4ED !important;

  font-size:13px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-online-dot{
  width:12px !important;
  height:12px !important;

  flex:0 0 12px !important;

  border-radius:50% !important;

  background:#52D69B !important;

  box-shadow:0 0 0 2px rgba(82,214,155,.12) !important;
}

/* Intelligence */
#app.tdh-unified[data-view="inbox"] .dh-visitor-intelligence{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  padding:14px 16px !important;
  margin-bottom:20px !important;

  border:1px solid #E2DFFF !important;
  border-radius:13px !important;

  background:#FBFAFF !important;
}

#app.tdh-unified[data-view="inbox"] .dh-visitor-intelligence strong{
  display:block !important;
  color:#5B5CF0 !important;
  font-size:13px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-visitor-intelligence span{
  display:block !important;
  color:#8B94A6 !important;
  font-size:11px !important;
  margin-top:3px !important;
}

#app.tdh-unified[data-view="inbox"] .dh-visitor-intelligence a{
  margin-left:auto !important;

  color:#5B5CF0 !important;
  font-size:11px !important;
  font-weight:700 !important;
}

/* Private note */
#app.tdh-unified[data-view="inbox"] .dh-private-note{
  padding:14px 16px !important;

  border:1px dashed #E6C976 !important;
  border-radius:12px !important;

  background:#FFF8E6 !important;
}

#app.tdh-unified[data-view="inbox"] .dh-private-note strong{
  display:block !important;

  color:#8B6500 !important;

  font-size:11px !important;
  letter-spacing:.04em !important;
}

#app.tdh-unified[data-view="inbox"] .dh-private-note span{
  display:block !important;

  margin-top:4px !important;

  color:#9B824A !important;

  font-size:10px !important;
}

/* Composer tools */
#app.tdh-unified[data-view="inbox"] .dh-composer-tools{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;

  padding:9px 14px 0 !important;

  background:#fff !important;
}

#app.tdh-unified[data-view="inbox"] .dh-composer-tools button{
  height:30px !important;
  padding:0 11px !important;

  border:0 !important;
  border-radius:8px !important;

  background:#F1F3F7 !important;

  color:#5F6B7D !important;

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

/* Desktop */
@media(min-width:1251px){
  #app.tdh-unified[data-view="inbox"] .dh-visitor-panel{
    display:block !important;
  }
}