/* =========================================================
   ADAR CRM V2
   DESIGN SYSTEM
========================================================= */

:root{

  --v2-navy:#0b1427;
  --v2-navy-2:#111d33;

  --v2-bg:#f7f8fb;
  --v2-white:#ffffff;

  --v2-text:#101828;
  --v2-text-2:#344054;
  --v2-muted:#7b8495;

  --v2-line:#e8ebf0;

  --v2-blue:#246bfd;
  --v2-blue-bg:#e8f0ff;

  --v2-red:#f04438;
  --v2-red-bg:#ffe8e8;

  --v2-green:#17b26a;
  --v2-green-bg:#def8ea;

  --v2-orange:#f79009;
  --v2-orange-bg:#fff0da;

  --v2-purple:#7a5af8;
  --v2-purple-bg:#eeeaff;

  --v2-cyan:#06a6a6;
  --v2-cyan-bg:#dcf7f5;

  --v2-pink:#ee5d8f;
  --v2-pink-bg:#ffe8f0;

  --v2-shadow:
    0 1px 2px rgba(16,24,40,.02),
    0 8px 30px rgba(16,24,40,.035);

  --v2-shadow-hover:
    0 2px 5px rgba(16,24,40,.04),
    0 18px 40px rgba(16,24,40,.08);

}


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

html{
  background:var(--v2-bg);
}


body{
  background:var(--v2-bg);

  color:var(--v2-text);

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;
}


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


button{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}


button:active{
  transform:scale(.985);
}


input,
select,
textarea{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


/* =========================================================
   APP
========================================================= */

.app{

  display:grid;

  grid-template-columns:
    214px
    1fr;

  min-height:100vh;

  background:var(--v2-bg);

}


.main{

  grid-column:2;

  min-width:0;

  position:relative;

}


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

.sidebar{

  position:fixed;

  top:0;
  left:0;
  bottom:0;

  width:214px;

  z-index:100;

  display:flex;

  flex-direction:column;

  align-items:stretch;

  gap:0;

  padding:
    25px
    16px
    18px;

  background:
    radial-gradient(
      circle at 30% 100%,
      rgba(66,91,140,.15),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #0a1325 0%,
      #0d1729 100%
    );

  color:#fff;

  border-right:
    1px solid rgba(255,255,255,.04);

}


.logo{
  display:none;
}


.v2-brand{

  padding:
    0
    12px
    28px;

}


.v2-brand-name{

  color:#fff;

  font-size:21px;

  font-weight:800;

  letter-spacing:.34em;

}


.v2-brand-sub{

  margin-top:7px;

  color:#8290a8;

  font-size:12px;

  letter-spacing:.30em;

}


.sidebar nav{

  display:flex;

  flex-direction:column;

  width:100%;

  gap:5px;

}


.nav-item{

  width:100%;

  min-height:48px;

  display:flex;

  align-items:center;

  gap:13px;

  padding:
    0
    13px;

  border-radius:13px;

  background:transparent;

  color:#b7c0d0;

  font-size:12px;

  font-weight:550;

  text-align:left;

}


.nav-item:hover{

  background:
    rgba(255,255,255,.055);

  color:#fff;

}


.nav-item.active{

  background:
    linear-gradient(
      90deg,
      rgba(79,124,207,.26),
      rgba(255,255,255,.065)
    );

  color:#fff;

  box-shadow:
    inset 3px 0 0
    rgba(83,155,255,.95);

}


.v2-nav-icon{

  width:22px;
  height:22px;

  flex:0 0 22px;

  display:flex;

  align-items:center;

  justify-content:center;

}


.v2-nav-icon svg{

  width:20px;
  height:20px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.7;

  stroke-linecap:round;

  stroke-linejoin:round;

}


.nav-item[data-view="dashboard"]
.v2-nav-icon svg path:first-child{

  fill:currentColor;

  stroke:none;

}


.v2-sidebar-new{

  width:100%;

  margin-top:25px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:11px 10px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:13px;

  background:
    rgba(255,255,255,.055);

  color:#fff;

  font-size:11px;

  font-weight:650;

}


.v2-sidebar-new:hover{

  background:
    rgba(255,255,255,.10);

}


.v2-sidebar-new span{

  font-size:17px;

  line-height:1;

}


.logout{

  width:100%;

  margin-top:auto;

  padding:11px;

  border-radius:11px;

  background:transparent;

  color:#8290a8;

  text-align:left;

  font-size:11px;

}


.logout:hover{

  background:
    rgba(255,255,255,.05);

  color:#fff;

}


/* =========================================================
   CHAT
========================================================= */

.chat-rail{

  position:fixed;

  left:214px;

  top:50%;

  transform:
    translateY(-50%);

  width:31px;
  height:auto;

  z-index:120;

  overflow:visible;

  background:transparent;

}


.chat-label{

  position:relative;

  width:31px;
  height:86px;

  inset:auto;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    0
    11px
    11px
    0;

  background:var(--v2-navy);

  color:#e7ebf2;

  font-size:9px;

  font-weight:700;

  letter-spacing:.17em;

  writing-mode:vertical-rl;

  transform:rotate(180deg);

  cursor:pointer;

  box-shadow:
    5px 5px 18px
    rgba(9,18,36,.12);

}


.chat-panel{

  position:absolute;

  left:39px;
  top:50%;

  width:330px;
  height:auto;

  max-height:72vh;

  padding:18px;

  border:
    1px solid
    var(--v2-line);

  border-radius:17px;

  background:
    rgba(255,255,255,.98);

  box-shadow:
    0 25px 60px
    rgba(16,24,40,.17);

  transform:
    translateY(-50%)
    translateX(-10px);

  opacity:0;

  pointer-events:none;

  overflow:auto;

  transition:
    opacity .18s ease,
    transform .18s ease;

}


.chat-rail:hover
.chat-panel{

  opacity:1;

  pointer-events:auto;

  transform:
    translateY(-50%)
    translateX(0);

}


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

.topbar{

  position:sticky;

  top:0;

  z-index:70;

  height:80px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:
    0
    34px;

  background:
    rgba(255,255,255,.90);

  border-bottom:
    1px solid
    rgba(228,232,238,.9);

  backdrop-filter:
    blur(18px);

}


.v2-page-identity{

  min-width:140px;

}


.topbar .eyebrow{

  color:#8a94a6;

  font-size:9px;

  font-weight:700;

  letter-spacing:.14em;

}


.topbar h2{

  margin:4px 0 0;

  font-size:18px;

  letter-spacing:-.025em;

}


.actions{

  display:flex;

  align-items:center;

  gap:10px;

}


.smart-search-wrap{

  position:relative;

  width:
    min(510px,45vw);

}


.smart-search-wrap input{

  height:45px;

  padding:
    0
    78px
    0
    44px;

  border:
    1px solid
    #e2e6ec;

  border-radius:14px;

  background:#f7f8fb;

  color:#263246;

  font-size:12px;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.9);

}


.smart-search-wrap input:focus{

  background:#fff;

  border-color:#cfd7e4;

  box-shadow:
    0 0 0 4px
    rgba(36,107,253,.07);

}


.search-icon{

  position:absolute;

  z-index:3;

  left:15px;
  top:50%;

  width:18px;
  height:18px;

  transform:
    translateY(-50%);

  display:flex;

  color:#627089;

}


.search-icon svg{

  width:18px;
  height:18px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;

}


.v2-command-trigger{

  position:absolute;

  z-index:4;

  right:7px;
  top:50%;

  transform:
    translateY(-50%);

  padding:
    5px
    8px;

  border:
    1px solid
    #dfe4eb;

  border-radius:8px;

  background:#fff;

  color:#69758a;

  font-size:9px;

  font-weight:700;

  box-shadow:
    0 1px 2px
    rgba(16,24,40,.03);

}


.v2-command-trigger:active{

  transform:
    translateY(-50%)
    scale(.97);

}


/* =========================================================
   HOME
========================================================= */

.dashboard-view{

  height:
    calc(100vh - 80px);

  overflow:auto;

  padding:0;

  background:

    radial-gradient(
      circle at 85% 0%,
      rgba(208,225,255,.36),
      transparent 27%
    ),

    var(--v2-bg);

}


.dashboard-content{

  width:
    min(1400px,100%);

  margin:0 auto;

  padding:
    30px
    34px
    38px;

}


.dashboard-loading{

  min-height:500px;

  display:grid;

  place-items:center;

  color:#8490a2;

  font-size:12px;

}


/* =========================================================
   HERO
========================================================= */

.v2-home-hero{

  position:relative;

  min-height:122px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  overflow:hidden;

  margin-bottom:22px;

  padding:
    22px
    26px;

  border:
    1px solid
    rgba(226,231,238,.7);

  border-radius:21px;

  background:

    linear-gradient(
      105deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.91) 47%,
      rgba(233,241,250,.82) 100%
    );

  box-shadow:
    0 1px 2px
    rgba(16,24,40,.015);

}


.v2-home-hero::before{

  content:"";

  position:absolute;

  width:350px;
  height:350px;

  right:-85px;
  top:-210px;

  border:
    42px solid
    rgba(91,119,161,.075);

  transform:
    rotate(28deg);

}


.v2-home-hero::after{

  content:"";

  position:absolute;

  width:260px;
  height:90px;

  right:90px;
  bottom:-55px;

  border:
    20px solid
    rgba(20,40,70,.035);

  transform:
    rotate(-12deg);

}


.v2-home-title{

  position:relative;

  z-index:2;

}


.v2-home-kicker{

  margin-bottom:6px;

  color:#748197;

  font-size:9px;

  font-weight:800;

  letter-spacing:.16em;

  text-transform:uppercase;

}


.v2-home-title h1{

  margin:0;

  color:#101828;

  font-size:30px;

  font-weight:760;

  letter-spacing:-.04em;

}


.v2-home-title p{

  margin:
    7px
    0
    0;

  color:#68748a;

  font-size:12px;

}


.v2-home-quote{

  position:relative;

  z-index:2;

  width:300px;

  color:#68748a;

  font-size:10px;

  line-height:1.6;

  text-align:right;

}


.v2-home-quote strong{

  display:block;

  margin-top:5px;

  color:#97a0af;

  font-size:8px;

  font-weight:700;

  letter-spacing:.16em;

}


/* =========================================================
   HOME GRID
========================================================= */

.v2-home-grid{

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:14px;

}


.v2-home-card{

  position:relative;

  min-width:0;

  min-height:166px;

  display:flex;

  flex-direction:column;

  padding:17px;

  overflow:hidden;

  border:
    1px solid
    var(--v2-line);

  border-radius:18px;

  background:
    rgba(255,255,255,.94);

  color:inherit;

  text-align:left;

  box-shadow:
    var(--v2-shadow);

  cursor:pointer;

}


.v2-home-card:hover{

  transform:
    translateY(-3px);

  border-color:#dfe4eb;

  box-shadow:
    var(--v2-shadow-hover);

}


.v2-home-card-top{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:12px;

}


.v2-card-identity{

  display:flex;

  align-items:center;

  gap:12px;

  min-width:0;

}


.v2-card-icon{

  width:48px;
  height:48px;

  flex:0 0 48px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:14px;

}


.v2-card-icon svg{

  width:25px;
  height:25px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;

  stroke-linejoin:round;

}


.v2-card-blue{

  background:
    var(--v2-blue-bg);

  color:
    var(--v2-blue);

}


.v2-card-red{

  background:
    var(--v2-red-bg);

  color:
    var(--v2-red);

}


.v2-card-green{

  background:
    var(--v2-green-bg);

  color:
    var(--v2-green);

}


.v2-card-orange{

  background:
    var(--v2-orange-bg);

  color:
    var(--v2-orange);

}


.v2-card-purple{

  background:
    var(--v2-purple-bg);

  color:
    var(--v2-purple);

}


.v2-card-cyan{

  background:
    var(--v2-cyan-bg);

  color:
    var(--v2-cyan);

}


.v2-card-pink{

  background:
    var(--v2-pink-bg);

  color:
    var(--v2-pink);

}


.v2-card-neutral{

  background:#f0f3f7;

  color:#59677e;

}


.v2-card-name{

  display:block;

  margin-bottom:3px;

  color:#344054;

  font-size:11px;

  font-weight:680;

}


.v2-card-number{

  display:block;

  color:#101828;

  font-size:29px;

  line-height:1;

  font-weight:780;

  letter-spacing:-.045em;

}


.v2-card-number.v2-small-value{

  font-size:18px;

  line-height:1.2;

}


.v2-card-arrow{

  margin-top:3px;

  color:#66758e;

  font-size:18px;

  font-weight:400;

}


.v2-card-bottom{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:10px;

  margin-top:auto;

  padding-top:18px;

}


.v2-card-copy{

  min-width:0;

  color:#7b8699;

  font-size:10px;

  line-height:1.4;

}


.v2-mini-bars{

  height:30px;

  display:flex;

  align-items:flex-end;

  gap:3px;

  flex:0 0 auto;

}


.v2-mini-bars span{

  width:4px;

  min-height:4px;

  border-radius:
    3px
    3px
    1px
    1px;

  background:currentColor;

  opacity:.42;

}


.v2-mini-bars span:nth-child(1){
  height:8px;
}

.v2-mini-bars span:nth-child(2){
  height:13px;
}

.v2-mini-bars span:nth-child(3){
  height:20px;
}

.v2-mini-bars span:nth-child(4){
  height:15px;
}

.v2-mini-bars span:nth-child(5){
  height:27px;
}


/* =========================================================
   CARD STATUS
========================================================= */

.v2-home-card.is-alert{

  border-color:
    rgba(240,68,56,.17);

}


.v2-home-card.is-good{

  border-color:
    rgba(23,178,106,.15);

}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.v2-quick-actions{

  margin-top:16px;

  display:flex;

  align-items:center;

  gap:10px;

  padding:13px;

  border:
    1px solid
    var(--v2-line);

  border-radius:17px;

  background:
    rgba(255,255,255,.76);

}


.v2-quick-title{

  flex:0 0 auto;

  padding:
    0
    8px;

  color:#364153;

  font-size:11px;

  font-weight:700;

}


.v2-quick-btn{

  display:flex;

  align-items:center;

  gap:7px;

  padding:
    9px
    13px;

  border:
    1px solid
    #e3e7ed;

  border-radius:11px;

  background:#fff;

  color:#344054;

  font-size:10px;

  font-weight:600;

}


.v2-quick-btn:hover{

  border-color:#d2d9e3;

  box-shadow:
    0 5px 15px
    rgba(16,24,40,.05);

}


/* =========================================================
   DRAWER
========================================================= */

.v2-drawer-backdrop{

  position:fixed;

  inset:0;

  z-index:300;

  background:
    rgba(15,23,42,.22);

  opacity:0;

  pointer-events:none;

  transition:
    opacity .22s ease;

  backdrop-filter:
    blur(2px);

}


.v2-drawer-backdrop.open{

  opacity:1;

  pointer-events:auto;

}


.v2-drawer{

  position:fixed;

  top:0;
  right:0;
  bottom:0;

  z-index:310;

  width:
    min(440px,92vw);

  display:flex;

  flex-direction:column;

  background:#fff;

  border-left:
    1px solid
    var(--v2-line);

  box-shadow:
    -24px 0 60px
    rgba(15,23,42,.12);

  transform:
    translateX(104%);

  transition:
    transform .26s
    cubic-bezier(.2,.8,.2,1);

}


.v2-drawer.open{

  transform:
    translateX(0);

}


.v2-drawer-head{

  min-height:82px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  padding:
    18px
    20px;

  border-bottom:
    1px solid
    var(--v2-line);

}


.v2-drawer-head h2{

  margin:0;

  font-size:19px;

  letter-spacing:-.025em;

}


.v2-drawer-head p{

  margin:
    4px
    0
    0;

  color:#8a94a5;

  font-size:10px;

}


.v2-drawer-close{

  width:35px;
  height:35px;

  display:grid;

  place-items:center;

  padding:0;

  border:
    1px solid
    #e5e9ee;

  border-radius:50%;

  background:#fff;

  color:#69758a;

  font-size:18px;

}


.v2-drawer-body{

  flex:1;

  padding:14px;

  overflow:auto;

}


.v2-drawer-item{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  padding:
    13px
    12px;

  border:0;

  border-bottom:
    1px solid
    #edf0f3;

  border-radius:0;

  background:transparent;

  color:inherit;

  text-align:left;

}


.v2-drawer-item:hover{

  background:#f8f9fb;

}


.v2-drawer-item-main{

  min-width:0;

}


.v2-drawer-item-main strong{

  display:block;

  overflow:hidden;

  color:#263246;

  font-size:11px;

  text-overflow:ellipsis;

  white-space:nowrap;

}


.v2-drawer-item-main span{

  display:block;

  margin-top:4px;

  overflow:hidden;

  color:#8b95a7;

  font-size:9px;

  text-overflow:ellipsis;

  white-space:nowrap;

}


.v2-drawer-date{

  flex:0 0 auto;

  color:#8b95a7;

  font-size:9px;

}


.v2-drawer-empty{

  padding:50px 20px;

  color:#9099aa;

  font-size:11px;

  text-align:center;

}


/* =========================================================
   COMMAND PALETTE
========================================================= */

.v2-command-overlay{

  position:fixed;

  inset:0;

  z-index:500;

  display:flex;

  align-items:flex-start;

  justify-content:center;

  padding-top:
    min(18vh,150px);

  background:
    rgba(15,23,42,.28);

  opacity:0;

  pointer-events:none;

  backdrop-filter:
    blur(7px);

  transition:
    opacity .18s ease;

}


.v2-command-overlay.open{

  opacity:1;

  pointer-events:auto;

}


.v2-command{

  width:
    min(630px,92vw);

  overflow:hidden;

  border:
    1px solid
    rgba(222,227,235,.95);

  border-radius:20px;

  background:
    rgba(255,255,255,.985);

  box-shadow:
    0 35px 100px
    rgba(15,23,42,.22);

  transform:
    translateY(-7px)
    scale(.985);

  transition:
    transform .18s ease;

}


.v2-command-overlay.open
.v2-command{

  transform:
    translateY(0)
    scale(1);

}


.v2-command-search{

  position:relative;

  padding:13px;

  border-bottom:
    1px solid
    var(--v2-line);

}


.v2-command-search input{

  height:48px;

  padding:
    0
    14px;

  border:0;

  border-radius:11px;

  background:#f7f8fa;

  box-shadow:none;

  color:#1d2939;

  font-size:13px;

}


.v2-command-results{

  max-height:390px;

  overflow:auto;

  padding:8px;

}


.v2-command-group-title{

  padding:
    8px
    10px
    5px;

  color:#99a2b1;

  font-size:8px;

  font-weight:800;

  letter-spacing:.11em;

  text-transform:uppercase;

}


.v2-command-row{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding:
    10px
    11px;

  border-radius:10px;

  background:transparent;

  color:#344054;

  text-align:left;

}


.v2-command-row:hover{

  background:#f4f6f9;

}


.v2-command-row strong{

  display:block;

  font-size:11px;

}


.v2-command-row small{

  display:block;

  margin-top:2px;

  color:#98a1b0;

  font-size:9px;

}


.v2-command-shortcut{

  color:#98a1b0;

  font-size:9px;

}


/* =========================================================
   EXISTING WORKSPACES — POLISH
========================================================= */

.workspace{

  padding:20px;

  gap:14px;

  height:
    calc(100vh - 80px);

  background:var(--v2-bg);

}


.list-pane,
.detail-pane,
.card{

  border:
    1px solid
    var(--v2-line);

  border-radius:18px;

  box-shadow:
    var(--v2-shadow);

}


.list-toolbar{

  padding:14px;

  border-bottom:
    1px solid
    var(--v2-line);

  background:
    rgba(255,255,255,.96);

  backdrop-filter:
    blur(10px);

}


.prospect-card{

  border-radius:12px;

}


.prospect-card:hover{

  background:#f6f8fb;

}


.prospect-card.active{

  border-color:
    #cdd9ef;

  background:#f3f7ff;

}


.detail-pane{

  padding:22px;

}


.prospect-avatar{

  background:#eaf1ff;

  color:#2e65c7;

}


.stage-select{

  background:#eaf1ff;

  color:#2a62c5;

}


.next-action-card{

  background:
    var(--v2-navy);

}


.progress-bar{

  background:
    var(--v2-green);

}


.tabs button{

  border-radius:10px;

}


.tabs button.active{

  background:
    var(--v2-navy);

}


/* =========================================================
   PIPELINE POLISH
========================================================= */

.prospect-view-controls{

  margin-bottom:6px;

}


.prospect-view-switch{

  background:#e9edf3;

}


.prospect-view-btn.active{

  box-shadow:
    0 2px 8px
    rgba(15,23,42,.07);

}


.pipeline-board{

  gap:12px;

}


.pipeline-column{

  border-color:
    #e4e8ee;

  border-radius:17px;

  background:#f0f2f5;

}


.pipeline-card{

  border-color:#e4e8ee;

  border-radius:15px;

  box-shadow:
    0 2px 10px
    rgba(16,24,40,.025);

}


.pipeline-card:hover{

  transform:
    translateY(-3px);

  box-shadow:
    0 13px 30px
    rgba(16,24,40,.09);

}


/* =========================================================
   DIALOG
========================================================= */

dialog{

  border-radius:20px;

  border:
    1px solid
    rgba(227,231,237,.9);

  box-shadow:
    0 40px 100px
    rgba(15,23,42,.24);

}


dialog::backdrop{

  background:
    rgba(15,23,42,.30);

  backdrop-filter:
    blur(5px);

}


/* =========================================================
   LOGIN
========================================================= */

.login-shell{

  background:

    radial-gradient(
      circle at 25% 25%,
      #eaf2ff,
      transparent 33%
    ),

    #f6f8fb;

}


.login-card{

  border-color:#e4e8ee;

  box-shadow:
    0 30px 80px
    rgba(15,23,42,.09);

}


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

@media(max-width:1180px){

  .v2-home-grid{

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );

  }

}


@media(max-width:980px){

  .app{

    grid-template-columns:1fr;

  }


  .main{

    grid-column:1;

  }


  .sidebar{

    display:none;

  }


  .chat-rail{

    left:0;

  }


  .v2-home-grid{

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

  }


  .smart-search-wrap{

    width:
      min(500px,60vw);

  }

}


@media(max-width:680px){

  .topbar{

    min-height:76px;

    height:auto;

    padding:
      12px
      14px;

  }


  .v2-page-identity{

    display:none;

  }


  .actions{

    width:100%;

  }


  .smart-search-wrap{

    width:100%;

  }


  .dashboard-view{

    height:
      calc(100vh - 76px);

  }


  .dashboard-content{

    padding:
      16px
      12px
      30px;

  }


  .v2-home-hero{

    min-height:120px;

    padding:19px;

  }


  .v2-home-title h1{

    font-size:25px;

  }


  .v2-home-quote{

    display:none;

  }


  .v2-home-grid{

    grid-template-columns:
      1fr
      1fr;

    gap:9px;

  }


  .v2-home-card{

    min-height:145px;

    padding:13px;

  }


  .v2-card-icon{

    width:40px;
    height:40px;

    flex-basis:40px;

  }


  .v2-card-icon svg{

    width:21px;
    height:21px;

  }


  .v2-card-number{

    font-size:25px;

  }


  .v2-card-bottom{

    padding-top:12px;

  }


  .v2-mini-bars{

    display:none;

  }


  .v2-quick-actions{

    align-items:stretch;

    flex-direction:column;

  }


  .v2-quick-title{

    padding:
      3px
      2px;

  }


  .v2-quick-btn{

    justify-content:center;

  }


  .workspace{

    padding:10px;

    height:auto;

  }

}


@media(max-width:420px){

  .v2-home-grid{

    grid-template-columns:1fr;

  }


  .v2-home-card{

    min-height:130px;

  }

}
/* =========================================================
   ADAR CRM
   PROSPECT DRAWER V2
========================================================= */

.adar-prospect-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:800;
  background:rgba(15,23,42,.22);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.adar-prospect-drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.adar-prospect-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:810;

  width:min(570px,94vw);

  background:#f8f9fb;

  border-left:1px solid #e4e8ee;

  box-shadow:
    -30px 0 80px
    rgba(15,23,42,.15);

  transform:translateX(104%);

  transition:
    transform .28s
    cubic-bezier(.2,.8,.2,1);

  overflow:hidden;
}

.adar-prospect-drawer.open{
  transform:translateX(0);
}

.adar-prospect-drawer-content{
  height:100%;
  display:flex;
  flex-direction:column;
}

.adar-drawer-loading{
  height:100%;
  display:grid;
  place-items:center;
  color:#8993a4;
  font-size:12px;
}


/* HEADER */

.adar-drawer-head{
  flex:0 0 auto;
  padding:22px 22px 18px;

  background:#fff;

  border-bottom:
    1px solid #e8ebf0;
}

.adar-drawer-close{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  margin-left:auto;

  padding:0;

  border:1px solid #e4e8ee;
  border-radius:50%;

  background:#fff;
  color:#667085;
}

.adar-drawer-close svg{
  width:17px;
  height:17px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.adar-drawer-person{
  display:flex;
  align-items:center;
  gap:14px;

  margin-top:-18px;
}

.adar-drawer-avatar{
  width:54px;
  height:54px;

  flex:0 0 54px;

  display:grid;
  place-items:center;

  border-radius:17px;

  background:#e7efff;
  color:#246bfd;

  font-size:17px;
  font-weight:800;
}

.adar-drawer-kicker{
  display:block;

  margin-bottom:3px;

  color:#98a2b3;

  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}

.adar-drawer-person h2{
  margin:0;

  color:#101828;

  font-size:22px;
  font-weight:760;

  letter-spacing:-.035em;
}

.adar-drawer-person p{
  margin:4px 0 0;

  color:#7b8699;

  font-size:10px;
}

.adar-drawer-full{
  margin:
    17px
    0
    0
    68px;

  padding:0;

  border:0;

  background:transparent;

  color:#246bfd;

  font-size:10px;
  font-weight:650;
}

.adar-drawer-full span{
  margin-left:5px;
}


/* SCROLL */

.adar-drawer-scroll{
  flex:1;

  padding:14px;

  overflow:auto;
}


/* SECTIONS */

.adar-drawer-section{
  margin-bottom:12px;

  padding:16px;

  border:1px solid #e7eaf0;
  border-radius:17px;

  background:#fff;

  box-shadow:
    0 2px 10px
    rgba(16,24,40,.025);
}

.adar-drawer-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;

  margin-bottom:14px;
}

.adar-drawer-section-title > span{
  color:#344054;

  font-size:11px;
  font-weight:700;
}

.adar-drawer-section-title > strong{
  color:#667085;

  font-size:9px;
  font-weight:650;
}

.adar-drawer-section-title .has-alerts{
  color:#f04438;
}

.adar-drawer-section-title .all-good{
  color:#17b26a;
}


/* STAGE TRACK */

.adar-stage-track{
  position:relative;

  display:grid;

  grid-template-columns:
    repeat(8,1fr);

  gap:4px;
}

.adar-stage-step{
  height:8px;

  padding:0;

  border:0;
  border-radius:99px;

  background:#e8ebf0;
}

.adar-stage-step.done{
  background:#b9cdfd;
}

.adar-stage-step.current{
  background:#246bfd;

  box-shadow:
    0 0 0 3px
    rgba(36,107,253,.11);
}

.adar-stage-step:hover{
  transform:scaleY(1.45);
}


/* INTELLIGENCE */

.adar-drawer-intelligence{
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fbfcff
    );
}

.adar-drawer-findings{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.adar-drawer-finding{
  width:100%;

  display:grid;

  grid-template-columns:
    8px
    1fr
    20px;

  align-items:center;

  gap:10px;

  padding:
    10px
    8px;

  border:0;
  border-radius:10px;

  background:transparent;

  text-align:left;
}

.adar-drawer-finding:hover{
  background:#f7f8fa;
}

.adar-finding-dot{
  width:7px;
  height:7px;

  border-radius:50%;
}

.adar-drawer-finding.red
.adar-finding-dot{
  background:#f04438;
}

.adar-drawer-finding.orange
.adar-finding-dot{
  background:#f79009;
}

.adar-drawer-finding.yellow
.adar-finding-dot{
  background:#eaaa08;
}

.adar-drawer-finding.blue
.adar-finding-dot{
  background:#246bfd;
}

.adar-finding-copy{
  min-width:0;
}

.adar-finding-copy strong{
  display:block;

  color:#344054;

  font-size:10px;
}

.adar-finding-copy small{
  display:block;

  margin-top:3px;

  color:#8a94a5;

  font-size:9px;
  line-height:1.4;
}

.adar-finding-arrow{
  color:#a2aaba;
}

.adar-finding-arrow svg{
  width:16px;
  height:16px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.adar-drawer-all-good{
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px;

  border-radius:13px;

  background:#effbf5;
}

.adar-drawer-good-icon{
  width:36px;
  height:36px;

  flex:0 0 36px;

  display:grid;
  place-items:center;

  border-radius:11px;

  background:#d9f7e8;
  color:#17b26a;
}

.adar-drawer-good-icon svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.adar-drawer-all-good strong{
  display:block;

  color:#137a4a;

  font-size:10px;
}

.adar-drawer-all-good p{
  margin:3px 0 0;

  color:#5b8b73;

  font-size:9px;
}


/* NEXT ACTION */

.adar-drawer-next{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;

  margin-bottom:12px;

  padding:16px;

  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      #0b1427,
      #15243f
    );

  color:#fff;
}

.adar-drawer-next span{
  display:block;

  margin-bottom:5px;

  color:#8fa0bb;

  font-size:8px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.adar-drawer-next strong{
  display:block;

  max-width:310px;

  overflow:hidden;

  color:#fff;

  font-size:12px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.adar-drawer-next small{
  display:block;

  margin-top:5px;

  color:#9cabc2;

  font-size:9px;
}

.adar-drawer-next button{
  flex:0 0 auto;

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

  padding:8px 10px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:10px;

  background:
    rgba(255,255,255,.08);

  color:#fff;

  font-size:9px;
}

.adar-drawer-next button svg{
  width:14px;
  height:14px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}


/* ACTIONS */

.adar-drawer-actions{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:8px;

  margin-bottom:12px;
}

.adar-drawer-action{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:7px;

  min-height:70px;

  padding:9px;

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

  background:#fff;

  color:#566176;

  font-size:9px;
  font-weight:600;

  text-decoration:none;
}

.adar-drawer-action:hover{
  transform:translateY(-2px);

  border-color:#d6dce6;

  box-shadow:
    0 8px 20px
    rgba(16,24,40,.06);
}

.adar-drawer-action > span{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#f0f4fb;

  color:#4267a6;
}

.adar-drawer-action svg{
  width:16px;
  height:16px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* INFO */

.adar-drawer-info-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:14px;
}

.adar-drawer-info-grid > div{
  min-width:0;
}

.adar-drawer-info-grid span{
  display:block;

  margin-bottom:4px;

  color:#98a2b3;

  font-size:8px;
}

.adar-drawer-info-grid strong{
  display:block;

  overflow:hidden;

  color:#344054;

  font-size:10px;
  font-weight:650;

  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ACTIVITY */

.adar-drawer-activity{
  display:flex;
  flex-direction:column;
}

.adar-activity-row{
  width:100%;

  display:grid;

  grid-template-columns:
    32px
    1fr
    auto;

  align-items:center;

  gap:10px;

  padding:
    10px
    0;

  border:0;
  border-bottom:
    1px solid #edf0f3;

  border-radius:0;

  background:transparent;

  text-align:left;
}

.adar-activity-row:last-child{
  border-bottom:0;
}

.adar-activity-icon{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#edf4ff;
  color:#246bfd;
}

.adar-activity-icon svg{
  width:16px;
  height:16px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.adar-activity-row strong{
  display:block;

  color:#344054;

  font-size:9px;
}

.adar-activity-row small{
  display:block;

  max-width:300px;

  margin-top:3px;

  overflow:hidden;

  color:#8c96a7;

  font-size:8px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.adar-activity-row time{
  color:#a0a8b6;

  font-size:8px;
}

.adar-drawer-empty{
  padding:22px 10px;

  color:#98a2b3;

  font-size:9px;

  text-align:center;
}


/* RESPONSIVE */

@media(max-width:620px){

  .adar-prospect-drawer{
    width:100%;
  }

  .adar-drawer-actions{
    grid-template-columns:
      1fr
      1fr;
  }

}
/* =========================================================
   ADAR CRM V3
========================================================= */


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

.v3-chat-nav{
  position:relative;

  width:100%;
  min-height:48px;

  display:flex;
  align-items:center;

  gap:13px;

  padding:0 13px;

  border:0;
  border-radius:13px;

  background:transparent;

  color:#b7c0d0;

  font-size:12px;
  font-weight:550;

  text-align:left;

  cursor:pointer;
}


.v3-chat-nav:hover,
.v3-chat-nav.active{
  background:rgba(255,255,255,.065);

  color:#fff;
}


.v3-chat-nav svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.v3-nav-badge{
  margin-left:auto;

  min-width:19px;
  height:19px;

  display:grid;
  place-items:center;

  padding:0 5px;

  border-radius:999px;

  background:#f04438;

  color:#fff;

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


/* =========================================================
   OCULTAR CHAT VIEJO
========================================================= */

.chat-rail{
  display:none!important;
}


/* =========================================================
   HOME
========================================================= */

.v3-home-head{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:24px;

  margin-bottom:22px;
}


.v3-kicker{
  margin-bottom:6px;

  color:#8a94a6;

  font-size:9px;
  font-weight:800;

  letter-spacing:.15em;
}


.v3-home-head h1{
  margin:0;

  color:#101828;

  font-size:30px;

  letter-spacing:-.04em;
}


.v3-home-head p{
  margin:6px 0 0;

  color:#778196;

  font-size:12px;
}


.v3-new-prospect{
  padding:11px 16px;

  border:0;
  border-radius:12px;

  background:#0b1427;

  color:#fff;

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}


/* =========================================================
   ADAR HOY
========================================================= */

.v3-today-hero{
  display:grid;

  grid-template-columns:
    48px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:15px;

  padding:20px;

  margin-bottom:14px;

  border:1px solid #f0ddce;
  border-radius:19px;

  background:
    linear-gradient(
      110deg,
      #fffdfb,
      #fff8f1
    );

  box-shadow:
    0 8px 26px
    rgba(16,24,40,.035);
}


.v3-today-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:#ffe7e4;

  color:#f04438;

  font-size:24px;
}


.v3-today-copy{
  min-width:0;
}


.v3-today-copy span{
  display:block;

  margin-bottom:4px;

  color:#344054;

  font-size:11px;
  font-weight:800;
}


.v3-today-copy strong{
  display:block;

  color:#d92d20;

  font-size:17px;
}


.v3-today-copy small{
  display:block;

  margin-top:5px;

  color:#7d8797;

  font-size:9px;
}


.v3-start-day{
  padding:11px 17px;

  border:0;
  border-radius:11px;

  background:#101828;

  color:#fff;

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}


/* =========================================================
   CUADROS PRINCIPALES
========================================================= */

.v3-main-cards{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;

  margin-bottom:14px;
}


.v3-main-card{
  display:grid;

  grid-template-columns:
    43px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:11px;

  min-height:110px;

  padding:15px;

  border:1px solid #e8ebf0;
  border-radius:17px;

  background:#fff;

  text-align:left;

  box-shadow:
    0 4px 18px
    rgba(16,24,40,.03);

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.v3-main-card:hover{
  transform:translateY(-2px);

  border-color:#dfe4eb;

  box-shadow:
    0 14px 30px
    rgba(16,24,40,.07);
}


.v3-main-card-icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  border-radius:14px;

  font-size:20px;
  font-weight:700;
}


.v3-main-card span{
  display:block;

  color:#344054;

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


.v3-main-card strong{
  display:inline-block;

  margin-top:4px;

  color:#101828;

  font-size:25px;
}


.v3-main-card small{
  display:block;

  margin-top:3px;

  color:#8590a2;

  font-size:9px;
}


.v3-main-card > b{
  color:#7f8a9b;

  font-size:22px;
  font-weight:400;
}


/* COLORES */

.v3-main-card.red
.v3-main-card-icon{
  background:#ffe9e8;

  color:#f04438;
}


.v3-main-card.blue
.v3-main-card-icon{
  background:#e6efff;

  color:#246bfd;
}


.v3-main-card.green
.v3-main-card-icon{
  background:#def8ea;

  color:#17b26a;
}


.v3-main-card.orange
.v3-main-card-icon{
  background:#fff0da;

  color:#f79009;
}


/* =========================================================
   ACTIVIDAD
========================================================= */

.v3-activity{
  border:1px solid #e7eaf0;
  border-radius:18px;

  background:#fff;

  overflow:hidden;

  box-shadow:
    0 4px 18px
    rgba(16,24,40,.025);
}


.v3-activity-head{
  padding:15px 17px;

  border-bottom:
    1px solid #edf0f3;
}


.v3-activity-head strong{
  display:block;

  font-size:11px;
}


.v3-activity-head span{
  display:block;

  margin-top:3px;

  color:#98a2b3;

  font-size:8px;
}


.v3-activity-row{
  width:100%;

  display:grid;

  grid-template-columns:
    8px
    150px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:12px;

  padding:11px 17px;

  border:0;
  border-bottom:
    1px solid #f0f2f5;

  border-radius:0;

  background:transparent;

  text-align:left;

  cursor:pointer;
}


.v3-activity-row:last-child{
  border-bottom:0;
}


.v3-activity-row:hover{
  background:#f8f9fb;
}


.v3-activity-row strong{
  font-size:9px;
}


.v3-activity-row > span{
  min-width:0;

  overflow:hidden;

  color:#697386;

  font-size:9px;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.v3-activity-row time{
  color:#98a2b3;

  font-size:8px;
}


.v3-activity-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#246bfd;
}


.v3-activity-dot.incoming{
  background:#f04438;
}


.v3-empty{
  padding:28px 16px;

  color:#98a2b3;

  font-size:10px;

  text-align:center;
}


/* =========================================================
   EMPEZAR MI DÍA
========================================================= */

.v3-focus-overlay{
  position:fixed;

  inset:0;

  z-index:1000;

  display:grid;
  place-items:center;

  padding:25px;

  background:
    rgba(15,23,42,.28);

  backdrop-filter:
    blur(6px);

  opacity:0;

  pointer-events:none;

  transition:
    opacity .2s ease;
}


.v3-focus-overlay.open{
  opacity:1;

  pointer-events:auto;
}


.v3-focus-card{
  position:relative;

  width:min(520px,94vw);

  min-height:330px;

  padding:34px;

  border:1px solid #e4e8ee;
  border-radius:24px;

  background:#fff;

  box-shadow:
    0 35px 100px
    rgba(15,23,42,.2);
}


.v3-focus-close{
  position:absolute;

  right:17px;
  top:17px;

  width:34px;
  height:34px;

  padding:0;

  border:0;
  border-radius:50%;

  background:#f3f5f7;

  color:#667085;

  font-size:18px;

  cursor:pointer;
}


.v3-focus-kicker{
  color:#246bfd;

  font-size:9px;
  font-weight:800;

  letter-spacing:.14em;
}


.v3-focus-progress{
  margin-top:9px;

  color:#98a2b3;

  font-size:9px;
}


.v3-focus-card h2{
  margin:30px 0 8px;

  font-size:26px;

  letter-spacing:-.04em;
}


.v3-focus-detail{
  margin:0;

  color:#667085;

  font-size:13px;

  line-height:1.5;
}


.v3-focus-meta{
  margin-top:14px;

  color:#f04438;

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


.v3-focus-actions{
  display:flex;

  gap:9px;

  margin-top:35px;
}


.v3-focus-primary,
.v3-focus-secondary{
  padding:11px 15px;

  border:0;
  border-radius:11px;

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}


.v3-focus-primary{
  background:#0b1427;

  color:#fff;
}


.v3-focus-secondary{
  background:#f3f5f7;

  color:#344054;
}


.v3-focus-done{
  min-height:260px;

  display:grid;

  place-items:center;
  align-content:center;

  text-align:center;
}


.v3-focus-check{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:#def8ea;

  color:#17b26a;

  font-size:26px;
}


.v3-focus-done h2{
  margin:16px 0 4px;
}


.v3-focus-done p{
  color:#8791a2;

  font-size:10px;
}


/* =========================================================
   INBOX BACKDROP
========================================================= */

.v3-inbox-backdrop{
  position:fixed;

  inset:0;

  z-index:1100;

  background:
    rgba(15,23,42,.22);

  backdrop-filter:
    blur(2px);

  opacity:0;

  pointer-events:none;

  transition:
    opacity .22s ease;
}


.v3-inbox-backdrop.open{
  opacity:1;

  pointer-events:auto;
}


/* =========================================================
   INBOX PANEL
========================================================= */

.v3-inbox{
  position:fixed;

  left:214px;
  top:0;
  bottom:0;

  z-index:1110;

  width:
    min(
      930px,
      calc(100vw - 214px)
    );

  display:flex;
  flex-direction:column;

  background:#fff;

  border-right:
    1px solid #e4e8ee;

  box-shadow:
    30px 0 80px
    rgba(15,23,42,.14);

  /*
    IMPORTANTE:
    El panel cerrado se mueve completamente fuera de pantalla,
    incluyendo los 214px del sidebar.
  */
  transform:
    translateX(
      calc(-100% - 214px)
    );

  pointer-events:none;

  visibility:hidden;

  transition:
    transform .28s
    cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .28s;
}


.v3-inbox.open{
  transform:
    translateX(0);

  pointer-events:auto;

  visibility:visible;

  transition:
    transform .28s
    cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}


/* =========================================================
   INBOX HEADER
========================================================= */

.v3-inbox-head{
  height:77px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:0 21px;

  border-bottom:
    1px solid #e8ebf0;
}


.v3-inbox-head h2{
  margin:0;

  font-size:20px;
}


.v3-inbox-head p{
  margin:3px 0 0;

  color:#8791a2;

  font-size:9px;
}


.v3-inbox-head button{
  width:34px;
  height:34px;

  padding:0;

  border:0;
  border-radius:50%;

  background:#f3f5f7;

  color:#667085;

  font-size:18px;

  cursor:pointer;
}


/* =========================================================
   INBOX TABS
========================================================= */

.v3-inbox-tabs{
  display:flex;

  gap:24px;

  padding:0 20px;

  border-bottom:
    1px solid #e8ebf0;
}


.v3-inbox-tabs button{
  position:relative;

  padding:13px 2px;

  border:0;
  border-radius:0;

  background:transparent;

  color:#667085;

  font-size:9px;
  font-weight:700;

  cursor:pointer;
}


.v3-inbox-tabs button.active{
  color:#101828;
}


.v3-inbox-tabs button.active::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:-1px;

  height:2px;

  background:#101828;
}


/* =========================================================
   INBOX LAYOUT
========================================================= */

.v3-inbox-layout{
  flex:1;

  min-height:0;

  display:grid;

  grid-template-columns:
    330px
    minmax(0,1fr);
}


.v3-inbox-list-pane{
  min-height:0;

  display:flex;
  flex-direction:column;

  border-right:
    1px solid #e8ebf0;
}


.v3-inbox-search{
  padding:12px;
}


.v3-inbox-search input{
  width:100%;
  height:40px;

  padding:0 12px;

  border:1px solid #e4e8ee;
  border-radius:11px;

  background:#f7f8fa;

  font-size:10px;
}


.v3-inbox-list{
  flex:1;

  overflow:auto;
}


/* =========================================================
   CHAT ROW
========================================================= */

.v3-chat-row{
  position:relative;

  width:100%;

  display:grid;

  grid-template-columns:
    40px
    minmax(0,1fr)
    8px;

  align-items:center;

  gap:10px;

  padding:12px;

  border:0;
  border-bottom:
    1px solid #f0f2f4;

  border-radius:0;

  background:transparent;

  text-align:left;

  cursor:pointer;
}


.v3-chat-row:hover,
.v3-chat-row.active{
  background:#edf4ff;
}


.v3-chat-avatar{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #dce8ff,
      #bacbf5
    );

  color:#365a9d;

  font-size:10px;
  font-weight:800;
}


.v3-chat-avatar.large{
  width:40px;
  height:40px;
}


.v3-chat-preview{
  min-width:0;
}


.v3-chat-preview > div{
  display:flex;

  justify-content:space-between;

  gap:10px;
}


.v3-chat-preview strong{
  font-size:10px;
}


.v3-chat-preview time{
  color:#8b95a6;

  font-size:8px;
}


.v3-chat-preview p{
  margin:4px 0 0;

  overflow:hidden;

  color:#697386;

  font-size:9px;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.v3-unanswered-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#f04438;
}


/* =========================================================
   CONVERSATION PANE
========================================================= */

.v3-conversation-pane{
  min-width:0;
  min-height:0;

  display:flex;
  flex-direction:column;

  background:#fafbfc;
}


.v3-chat-empty,
.v3-chat-loading{
  height:100%;

  display:grid;
  place-items:center;

  color:#98a2b3;

  font-size:10px;
}


/* =========================================================
   CHAT HEADER
========================================================= */

.v3-chat-head{
  min-height:65px;

  display:flex;

  align-items:center;

  gap:10px;

  padding:12px 16px;

  background:#fff;

  border-bottom:
    1px solid #e8ebf0;
}


.v3-chat-head > div:nth-child(2){
  min-width:0;
}


.v3-chat-head strong{
  display:block;

  font-size:10px;
}


.v3-chat-head span{
  display:block;

  margin-top:3px;

  color:#8b95a7;

  font-size:8px;
}


.v3-chat-head button{
  margin-left:auto;

  padding:7px 10px;

  border:1px solid #e1e5eb;
  border-radius:9px;

  background:#fff;

  color:#475467;

  font-size:9px;

  cursor:pointer;
}


/* =========================================================
   CHANNEL WARNING
========================================================= */

.v3-channel-warning{
  padding:7px 15px;

  background:#fff7e8;

  color:#8d6818;

  border-bottom:
    1px solid #f4e4bd;

  font-size:8px;

  line-height:1.45;
}


.v3-channel-warning strong{
  margin-right:5px;
}


/* =========================================================
   CHAT MESSAGES
========================================================= */

.v3-chat-messages{
  flex:1;

  min-height:0;

  display:flex;
  flex-direction:column;

  gap:9px;

  padding:18px;

  overflow:auto;
}


.v3-message{
  max-width:72%;

  align-self:flex-start;
}


.v3-message > div{
  padding:10px 12px;

  border:1px solid #e8ebf0;

  border-radius:
    14px
    14px
    14px
    4px;

  background:#fff;

  color:#344054;

  font-size:10px;

  line-height:1.5;
}


.v3-message.outgoing{
  align-self:flex-end;
}


.v3-message.outgoing > div{
  border-color:#cbdcff;

  border-radius:
    14px
    14px
    4px
    14px;

  background:#dce9ff;
}


.v3-message.internal > div{
  background:#fff7e7;

  border-color:#f3e2b8;
}


.v3-message small{
  display:block;

  margin-top:3px;

  color:#98a2b3;

  font-size:7px;
}


.v3-message.outgoing small{
  text-align:right;
}


/* =========================================================
   CHAT COMPOSER
========================================================= */

.v3-chat-composer{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    42px;

  align-items:end;

  gap:8px;

  padding:12px;

  background:#fff;

  border-top:
    1px solid #e8ebf0;
}


.v3-chat-composer textarea{
  width:100%;

  min-height:42px;
  max-height:100px;

  padding:10px 12px;

  resize:none;

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

  background:#f8f9fb;

  font-size:10px;
}


.v3-chat-composer button{
  width:42px;
  height:42px;

  padding:0;

  border:0;
  border-radius:12px;

  background:#101828;

  color:#fff;

  font-size:17px;

  cursor:pointer;
}


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

@media(max-width:1050px){

  .v3-main-cards{
    grid-template-columns:
      1fr
      1fr;
  }

}


@media(max-width:980px){

  .v3-inbox{
    left:0;

    width:100%;

    transform:
      translateX(-100%);
  }


  .v3-inbox.open{
    transform:
      translateX(0);
  }

}


@media(max-width:680px){

  .v3-home-head{
    align-items:flex-start;

    flex-direction:column;
  }


  .v3-today-hero{
    grid-template-columns:
      42px
      1fr;
  }


  .v3-start-day{
    grid-column:1/-1;

    width:100%;
  }


  .v3-main-cards{
    grid-template-columns:1fr;
  }


  .v3-activity-row{
    grid-template-columns:
      8px
      1fr
      auto;
  }


  .v3-activity-row > span{
    grid-column:2/-1;
  }


  .v3-inbox-layout{
    grid-template-columns:
      145px
      minmax(0,1fr);
  }


  .v3-chat-row{
    grid-template-columns:
      34px
      1fr;
  }


  .v3-unanswered-dot{
    display:none;
  }

}