/* DPDPiq Approved Theme 4 - onboarding presentation only */

body:not(.phase4-assessment){
  margin:0;
  color:#191918;
  background:
    radial-gradient(circle at 78% 7%,rgba(156,117,0,.045),transparent 26%),
    #fdfcf8;
  font-family:"Segoe UI",Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

body:not(.phase4-assessment) #app{
  width:100%;
  min-height:100vh;
}

body:not(.phase4-assessment) .shell{
  width:100%;
  height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  overflow:hidden;
  background:#fdfcf8;
}

/* LEFT SIDEBAR */

body:not(.phase4-assessment) .side{
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:auto;
  background:rgba(252,251,247,.97);
  border-right:1px solid rgba(25,25,24,.12);
}

body:not(.phase4-assessment) .side .brand{
  min-height:94px;
  display:flex;
  align-items:center;
  padding:20px 26px;
  border-bottom:1px solid rgba(25,25,24,.12);
  color:#191918;
  font-family:Georgia,"Times New Roman",serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
}

body:not(.phase4-assessment) .side .brand em{
  color:#0f766e;
  font-style:normal;
}

body:not(.phase4-assessment) .side > p{
  margin:16px 22px 5px;
  color:#95928b;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.5;
  text-transform:uppercase;
}

body:not(.phase4-assessment) .preset{
  width:calc(100% - 36px);
  min-height:39px;
  margin:13px 18px 18px;
  padding:8px 12px;
  border:1px solid rgba(25,25,24,.17);
  border-radius:0;
  background:#fff;
  color:#191918;
  cursor:pointer;
  box-shadow:0 3px 9px rgba(0,0,0,.025);
  font-size:10px;
  font-weight:700;
  letter-spacing:.035em;
  text-transform:uppercase;
}

body:not(.phase4-assessment) .preset:hover{
  border-color:#9c7500;
  background:#fbf6e8;
  color:#9c7500;
}

body:not(.phase4-assessment) .facts{
  display:grid;
  gap:0;
  margin:0 18px 18px;
  padding-top:8px;
  border-top:1px solid rgba(25,25,24,.12);
}

body:not(.phase4-assessment) .facts span{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 4px;
  border-bottom:1px solid rgba(25,25,24,.08);
}

body:not(.phase4-assessment) .facts small{
  color:#95928b;
  font-size:9px;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
}

body:not(.phase4-assessment) .facts b{
  max-width:135px;
  color:#191918;
  font-size:10px;
  font-weight:650;
  text-align:right;
  overflow-wrap:anywhere;
}

/* MAIN WORKSPACE */

body:not(.phase4-assessment) .main{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#fdfcf8;
}

body:not(.phase4-assessment) .pin{
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border-bottom:1px solid rgba(180,35,43,.16);
  background:#fff0f0;
  color:#b4232b;
  font-size:9px;
  font-weight:750;
  letter-spacing:.075em;
  text-align:center;
  text-transform:uppercase;
}

body:not(.phase4-assessment) .head{
  height:64px;
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 30px;
  border-bottom:1px solid rgba(25,25,24,.12);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
}

body:not(.phase4-assessment) .head b{
  color:#191918;
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px;
  font-weight:600;
}

body:not(.phase4-assessment) .head span{
  padding:6px 10px;
  border:1px solid rgba(156,117,0,.22);
  background:#fbf6e8;
  color:#9c7500;
  font-size:9px;
  font-weight:750;
  letter-spacing:.075em;
  text-transform:uppercase;
}

/* CONVERSATION AREA */

body:not(.phase4-assessment) .thread{
  min-height:0;
  flex:1;
  overflow:auto;
  padding:28px 34px 34px;
  scroll-behavior:smooth;
}

body:not(.phase4-assessment) .msg{
  width:min(1080px,100%);
  margin:0 auto 14px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  align-items:flex-start;
}

body:not(.phase4-assessment) .msg > i{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(15,118,110,.23);
  border-radius:50%;
  background:#fff;
  color:#0f766e;
  font-style:normal;
  font-size:10px;
  font-weight:750;
}

body:not(.phase4-assessment) .msg.user > i{
  border-color:rgba(156,117,0,.28);
  color:#9c7500;
}

body:not(.phase4-assessment) .bubble{
  padding:21px 24px;
  border:1px solid rgba(25,25,24,.12);
  border-top:2px solid #0f766e;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 40px rgba(74,58,20,.045),0 2px 8px rgba(0,0,0,.025);
  color:#191918;
}

body:not(.phase4-assessment) .msg.user .bubble{
  border-top-color:#9c7500;
  background:#fffdf7;
}

body:not(.phase4-assessment) .bubble small{
  display:block;
  margin-bottom:10px;
  color:#0f766e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

body:not(.phase4-assessment) .bubble h2{
  margin:0 0 12px;
  color:#191918;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,2vw,32px);
  font-weight:550;
  line-height:1.15;
  letter-spacing:-.02em;
}

body:not(.phase4-assessment) .bubble h3{
  margin:15px 0 8px;
  color:#191918;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  font-weight:600;
}

body:not(.phase4-assessment) .bubble p{
  margin:7px 0;
  color:#66645f;
  font-size:13px;
  line-height:1.6;
}

body:not(.phase4-assessment) .bubble b,
body:not(.phase4-assessment) .bubble strong{
  color:#191918;
}

/* OPTION BUTTONS */

body:not(.phase4-assessment) .chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}

body:not(.phase4-assessment) .chips button{
  min-height:37px;
  padding:8px 14px;
  border:1px solid rgba(25,25,24,.20);
  border-radius:0;
  background:#fff;
  color:#191918;
  cursor:pointer;
  font-size:10px;
  font-weight:650;
}

body:not(.phase4-assessment) .chips button:hover:not(:disabled){
  border-color:#9c7500;
  background:#fbf6e8;
  color:#9c7500;
}

body:not(.phase4-assessment) .chips button:disabled{
  cursor:default;
  opacity:.4;
}

/* INTELLIGENCE / INFO BOX */

body:not(.phase4-assessment) .intel{
  margin:14px 0;
  padding:12px 14px;
  border-left:3px solid #0f766e;
  background:#edf8f5;
  color:#285f59;
}

body:not(.phase4-assessment) .intel strong{
  display:block;
  margin-bottom:4px;
  color:#0f766e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}

body:not(.phase4-assessment) .intel p,
body:not(.phase4-assessment) .intel span{
  color:#3e625e;
  font-size:10px;
  line-height:1.5;
}

body:not(.phase4-assessment) .warn{
  margin:14px 0;
  padding:12px 14px;
  border-left:3px solid #b4232b;
  background:#fff0f0;
  color:#8b2027;
}

body:not(.phase4-assessment) .warn p{
  color:#8b2027;
}

/* COMPOSER */

body:not(.phase4-assessment) .composer{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  padding:12px 30px 10px;
  border-top:1px solid rgba(25,25,24,.12);
  background:rgba(255,255,255,.91);
  backdrop-filter:blur(9px);
}

body:not(.phase4-assessment) .composer textarea{
  width:100%;
  min-height:46px;
  max-height:120px;
  padding:12px 13px;
  resize:none;
  border:1px solid rgba(25,25,24,.17);
  border-radius:0;
  background:#fff;
  color:#191918;
  outline:none;
  font-size:12px;
  line-height:1.45;
}

body:not(.phase4-assessment) .composer textarea:focus{
  border-color:#9c7500;
}

body:not(.phase4-assessment) .composer > button{
  width:46px;
  min-height:46px;
  border:1px solid #191918;
  border-radius:0;
  background:#191918;
  color:#fff;
  cursor:pointer;
  font-size:19px;
}

body:not(.phase4-assessment) .composer > button:hover{
  background:#34332f;
}

body:not(.phase4-assessment) .composer .hint{
  grid-column:1 / -1;
  color:#95928b;
  font-size:8px;
  letter-spacing:.04em;
}

/* SNAPSHOT TABLES */

body:not(.phase4-assessment) .snapshot{
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(25,25,24,.12);
  background:#fff;
}

body:not(.phase4-assessment) .legal{
  width:100%;
  border-collapse:collapse;
  font-size:10px;
}

body:not(.phase4-assessment) .legal th{
  padding:9px;
  border-bottom:1px solid rgba(25,25,24,.18);
  color:#95928b;
  font-size:8px;
  letter-spacing:.06em;
  text-align:left;
}

body:not(.phase4-assessment) .legal td{
  padding:9px;
  border-bottom:1px solid rgba(25,25,24,.09);
  color:#66645f;
  vertical-align:top;
}

/* MODALS */

body:not(.phase4-assessment) .modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(25,25,24,.48);
  backdrop-filter:blur(4px);
}

body:not(.phase4-assessment) .modalBox{
  width:min(720px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  padding:24px;
  border:1px solid rgba(25,25,24,.22);
  background:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.2);
}

body:not(.phase4-assessment) .pdf{
  margin:14px 0;
  padding:16px;
  border:1px solid rgba(25,25,24,.12);
  background:#faf9f5;
}

/* RESPONSIVE */

@media (max-width:860px){
  body:not(.phase4-assessment){
    overflow:auto;
  }

  body:not(.phase4-assessment) .shell{
    height:auto;
    min-height:100vh;
    grid-template-columns:1fr;
  }

  body:not(.phase4-assessment) .side{
    display:none;
  }

  body:not(.phase4-assessment) .main{
    min-height:100vh;
  }

  body:not(.phase4-assessment) .pin{
    position:sticky;
    top:0;
    z-index:60;
  }

  body:not(.phase4-assessment) .head{
    padding:0 18px;
  }

  body:not(.phase4-assessment) .head b{
    font-size:16px;
  }

  body:not(.phase4-assessment) .thread{
    padding:18px 14px 100px;
  }

  body:not(.phase4-assessment) .msg{
    grid-template-columns:28px minmax(0,1fr);
    gap:8px;
  }

  body:not(.phase4-assessment) .msg > i{
    width:28px;
    height:28px;
  }

  body:not(.phase4-assessment) .bubble{
    padding:17px 16px;
  }

  body:not(.phase4-assessment) .composer{
    position:sticky;
    bottom:0;
    padding:10px 14px;
  }
}

@media (max-width:560px){
  body:not(.phase4-assessment) .pin{
    font-size:7px;
    letter-spacing:.04em;
  }

  body:not(.phase4-assessment) .head span{
    display:none;
  }

  body:not(.phase4-assessment) .bubble h2{
    font-size:23px;
  }

  body:not(.phase4-assessment) .chips{
    display:grid;
    grid-template-columns:1fr;
  }

  body:not(.phase4-assessment) .chips button{
    width:100%;
    text-align:left;
  }
}