/* ==========================================================
   ASK KAI
   agent.css

   Main structure:

   01 Document
   02 Conversation
   03 Job Matches
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

  --background: #f5f5f7;

  --panel:
    rgba(255, 255, 255, 0.68);

  --panel-strong:
    rgba(255, 255, 255, 0.94);

  --panel-soft:
    rgba(248, 248, 250, 0.76);

  --black: #0b0b0e;

  --text: #17171a;

  --secondary: #66666d;

  --muted: #9a9aa1;

  --border:
    rgba(15, 15, 18, 0.09);

  --border-strong:
    rgba(15, 15, 18, 0.14);

  --blue: #3478ff;

  --purple: #8c61ff;

  --green: #2fbd72;

  --green-soft:
    rgba(47, 189, 114, 0.1);

  --red: #e65050;

  --orange: #e5a332;

  --radius-xl: 32px;

  --radius-lg: 23px;

  --radius-md: 17px;

  --radius-sm: 12px;

  --ease:
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );

}


/* ==========================================================
   RESET
========================================================== */

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {

  min-height: 100vh;

  overflow-x: hidden;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    sans-serif;

  background:
    var(--background);

  color:
    var(--text);

  line-height: 1.5;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


button,
textarea,
input {
  font: inherit;
}


button {
  border: 0;

  cursor: pointer;
}


a {
  color: inherit;

  text-decoration: none;
}


img {
  max-width: 100%;

  display: block;
}


::selection {

  background:
    var(--black);

  color:
    white;

}


:focus-visible {

  outline:
    3px solid
    rgba(52, 120, 255, 0.32);

  outline-offset:
    3px;

}


/* ==========================================================
   BACKGROUND
========================================================== */

.background {

  position: fixed;

  inset: 0;

  z-index: -10;

  overflow: hidden;

  pointer-events: none;

}


.glow {

  position: absolute;

  width: 900px;
  height: 900px;

  border-radius: 50%;

  filter:
    blur(190px);

  opacity: 0.12;

}


.glow-blue {

  top: -560px;
  left: -360px;

  background:
    #3f7fff;

}


.glow-purple {

  right: -550px;
  bottom: -570px;

  background:
    #9568ff;

}


.grid {

  position: absolute;

  inset: 0;

  opacity: 0.26;

  background-image:

    linear-gradient(
      rgba(0, 0, 0, 0.022)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.022)
      1px,
      transparent 1px
    );

  background-size:
    64px
    64px;

  mask-image:

    linear-gradient(
      to bottom,
      black,
      transparent 92%
    );

}


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

.site-header {

  height: 88px;

  padding:
    14px
    22px;

}


.nav-shell {

  width:
    min(
      100%,
      1500px
    );

  height: 60px;

  margin: auto;

  padding:
    0
    20px;

  display: grid;

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

  align-items: center;

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

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.72);

  backdrop-filter:
    blur(30px)
    saturate(170%);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(170%);

  box-shadow:
    0
    14px
    45px
    rgba(0, 0, 0, 0.045);

}


.brand {

  width: fit-content;

  font-size: 20px;

  font-weight: 800;

  letter-spacing:
    -0.07em;

}


.brand span {
  color:
    var(--blue);
}


.product-title {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  font-weight: 650;

}


.online-dot {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0
    0
    13px
    rgba(47, 189, 114, 0.5);

}


.ai-badge {

  padding:
    4px
    7px;

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

  border-radius:
    999px;

  font-size: 9px;

  color:
    var(--muted);

}


.portfolio-link {

  justify-self: end;

  min-height: 42px;

  padding:
    0
    15px;

  display: flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(15, 15, 18, 0.11);

  border-radius:
    13px;

  background:
    var(--black);

  box-shadow:
    0
    10px
    24px
    rgba(0, 0, 0, 0.11);

  font-size: 13px;

  font-weight: 680;

  color:
    white;

  transition:
    transform
    0.25s ease,
    box-shadow
    0.25s ease;

}


.portfolio-link:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0
    14px
    30px
    rgba(0, 0, 0, 0.17);

}


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

.app-shell {

  width:
    min(
      calc(100% - 44px),
      1500px
    );

  height:
    calc(100vh - 112px);

  min-height:
    680px;

  margin:
    8px auto
    24px;

  display: grid;

  grid-template-columns:
    300px
    minmax(500px, 1fr)
    350px;

  overflow: hidden;

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

  border-radius:
    var(--radius-xl);

  background:
    rgba(255, 255, 255, 0.59);

  backdrop-filter:
    blur(30px);

  -webkit-backdrop-filter:
    blur(30px);

  box-shadow:
    0
    38px
    110px
    rgba(0, 0, 0, 0.07);

}


/* ==========================================================
   COMMON PANEL STYLES
========================================================== */

.document-panel,
.jobs-panel {

  min-height: 0;

  padding:
    32px
    28px;

  background:
    var(--panel-soft);

}


.document-panel {

  overflow-y: auto;

  border-right:
    1px solid
    var(--border);

}


.jobs-panel {

  position: relative;

  display: flex;

  flex-direction: column;

  overflow: hidden;

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

  transition:
    inset
    0.45s
    var(--ease),

    border-radius
    0.45s
    var(--ease),

    box-shadow
    0.45s
    var(--ease),

    background
    0.35s ease;

}


.panel-label {

  display: flex;

  align-items:
    flex-start;

  gap: 12px;

}


.panel-label > span {

  margin-top: 3px;

  font-size: 10px;

  font-weight: 650;

  color:
    #a8a8ae;

}


.panel-label strong {

  display: block;

  font-size: 16px;

  font-weight: 680;

  letter-spacing:
    -0.025em;

}


.panel-label small {

  display: block;

  margin-top: 3px;

  font-size: 11px;

  color:
    var(--muted);

}


.panel-label.compact {
  margin-bottom: 13px;
}


/* ==========================================================
   DOCUMENT PANEL
========================================================== */

.document-heading {

  margin-top: 48px;

}


.document-heading h2 {

  font-size: 42px;

  line-height: 0.96;

  letter-spacing:
    -0.065em;

  font-weight: 700;

}


.document-heading p {

  margin-top: 18px;

  max-width: 230px;

  font-size: 13px;

  line-height: 1.72;

  color:
    var(--secondary);

}


/* ==========================================================
   PDF UPLOAD
========================================================== */

.upload-zone {

  width: 100%;

  min-height: 245px;

  margin-top: 35px;

  padding: 25px;

  display: flex;

  flex-direction: column;

  align-items:
    flex-start;

  text-align: left;

  border:
    1px dashed
    rgba(15, 15, 20, 0.18);

  border-radius:
    var(--radius-lg);

  background:
    rgba(255, 255, 255, 0.7);

  transition:
    transform
    0.3s
    var(--ease),

    border-color
    0.3s ease,

    box-shadow
    0.3s
    var(--ease),

    background
    0.3s ease;

}


.upload-zone:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(52, 120, 255, 0.48);

  background:
    white;

  box-shadow:
    0
    18px
    45px
    rgba(0, 0, 0, 0.055);

}


.upload-zone:disabled {

  opacity: 0.55;

  cursor: progress;

}


.upload-icon {

  width: 50px;
  height: 50px;

  margin-bottom:
    35px;

  display: grid;

  place-items: center;

  border-radius:
    15px;

  background:
    var(--black);

  color: white;

  font-size: 25px;

  font-weight: 350;

}


.upload-zone strong {

  font-size: 19px;

  font-weight: 700;

  letter-spacing:
    -0.035em;

}


.upload-zone p {

  margin-top: 8px;

  font-size: 12px;

  line-height: 1.55;

  color:
    var(--secondary);

}


.upload-action {

  margin-top: auto;

  padding-top: 22px;

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  font-weight: 650;

  color:
    var(--blue);

}


.upload-action b {
  font-size: 12px;
}


/* ==========================================================
   ACTIVE PDF
========================================================== */

.document-card {

  margin-top: 14px;

  padding: 14px;

  display: grid;

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

  gap: 11px;

  align-items: center;

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

  border-radius:
    17px;

  background:
    white;

}


.document-card.hidden {
  display: none;
}


.pdf-icon {

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius:
    11px;

  background:
    #ededf1;

  font-size: 9px;

  font-weight: 800;

}


.document-info {
  min-width: 0;
}


.document-info strong {

  display: block;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size: 11px;

}


.document-info span {

  display: block;

  margin-top: 4px;

  font-size: 9px;

  color:
    var(--muted);

}


.ready-check {

  color:
    var(--green);

  font-size: 13px;

}


/* ==========================================================
   DOCUMENT EXAMPLE
========================================================== */

.document-example {

  margin-top: 42px;

  padding-top: 24px;

  border-top:
    1px solid
    var(--border);

}


.document-example > span {

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.14em;

  color:
    var(--muted);

}


.document-example > p {

  margin-top: 10px;

  font-size: 11px;

  color:
    var(--secondary);

}


.example-prompt {

  margin-top: 13px;

  padding: 0;

  text-align: left;

  background:
    none;

  color:
    #53535a;

  font-size: 12px;

  line-height: 1.55;

  transition:
    color
    0.2s ease;

}


.example-prompt:hover {
  color:
    var(--blue);
}


.pdf-note {

  margin-top: 30px;

  font-size: 9px;

  line-height: 1.5;

  color:
    var(--muted);

}


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

.chat-panel {

  min-width: 0;
  min-height: 0;

  height: 100%;

  padding:
    32px
    clamp(28px, 4vw, 62px)
    22px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}


.chat-header {

  flex-shrink: 0;

  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap: 25px;

  padding-bottom:
    24px;

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

}


.chat-header h1 {

  font-size:
    clamp(
      46px,
      4.8vw,
      66px
    );

  line-height: 0.94;

  letter-spacing:
    -0.072em;

  font-weight: 720;

}


.clear-button {

  padding:
    10px
    15px;

  border-radius:
    999px;

  background:
    rgba(15, 15, 18, 0.05);

  color:
    var(--secondary);

  font-size: 10px;

  transition:
    background
    0.2s ease,

    color
    0.2s ease;

}


.clear-button:hover {

  background:
    rgba(15, 15, 18, 0.09);

  color:
    var(--black);

}


/* ==========================================================
   CHAT SCROLL AREA
========================================================== */

.messages {

  flex: 1;

  min-height: 0;

  padding:
    30px
    7px
    20px;

  overflow-y: auto;

  overflow-x: hidden;

  scroll-behavior:
    smooth;

  overscroll-behavior:
    contain;

}


.messages::-webkit-scrollbar {
  width: 6px;
}


.messages::-webkit-scrollbar-track {
  background: transparent;
}


.messages::-webkit-scrollbar-thumb {

  border-radius:
    999px;

  background:
    rgba(15, 15, 18, 0.11);

}


.messages::-webkit-scrollbar-thumb:hover {

  background:
    rgba(15, 15, 18, 0.22);

}


/* ==========================================================
   WELCOME STATE
========================================================== */

.welcome {

  max-width: 720px;

  margin:
    40px auto
    22px;

}


.agent-logo {

  width: 54px;
  height: 54px;

  display: grid;

  place-items: center;

  border-radius:
    17px;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--purple)
    );

  color: white;

  font-size: 21px;

  box-shadow:
    0
    16px
    38px
    rgba(67, 101, 255, 0.22);

}


.welcome h2 {

  max-width: 620px;

  margin-top: 24px;

  font-size:
    clamp(
      38px,
      4vw,
      54px
    );

  line-height: 0.98;

  letter-spacing:
    -0.06em;

}


.welcome > p {

  max-width: 560px;

  margin-top: 18px;

  font-size: 14px;

  line-height: 1.75;

  color:
    var(--secondary);

}


/* ==========================================================
   STARTER PROMPTS
========================================================== */

.starter-prompts {

  margin-top: 32px;

  display: grid;

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

  gap: 9px;

}


.starter-prompts button {

  min-height: 110px;

  padding: 16px;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-content:
    space-between;

  text-align: left;

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

  border-radius:
    18px;

  background:
    rgba(255, 255, 255, 0.7);

  color:
    var(--text);

  font-size: 11px;

  font-weight: 600;

  transition:
    transform
    0.3s
    var(--ease),

    box-shadow
    0.3s
    var(--ease),

    background
    0.3s ease;

}


.starter-prompts button:hover {

  transform:
    translateY(-3px);

  background:
    white;

  box-shadow:
    0
    14px
    35px
    rgba(0, 0, 0, 0.05);

}


.starter-prompts button > span {

  grid-column: 1;

  font-size: 9px;

  color:
    var(--muted);

}


.starter-prompts button > b {

  grid-column: 2;

  grid-row:
    1 / 3;

  align-self: center;

}


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

.message {

  width:
    min(
      100%,
      790px
    );

  margin:
    0 auto
    28px;

}


.message-role {

  margin-bottom: 9px;

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.13em;

  color:
    var(--muted);

}


.message.user
.message-role {

  text-align: right;

}


.message-content {

  font-size: 15px;

  line-height: 1.75;

}


.message.user
.message-content {

  width: fit-content;

  max-width: 80%;

  margin-left: auto;

  padding:
    14px
    18px;

  border-radius:
    20px
    20px
    5px
    20px;

  background:
    var(--black);

  color: white;

}


.message.assistant
.message-content {

  padding:
    19px
    21px;

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

  border-radius:
    5px
    20px
    20px
    20px;

  background:
    rgba(255, 255, 255, 0.78);

}


.message-meta {

  margin-top: 9px;

  font-size: 9px;

  color:
    var(--muted);

}


/* ==========================================================
   TYPING
========================================================== */

.typing {

  display: flex;

  align-items: center;

  gap: 5px;

}


.typing span {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    #96969d;

  animation:
    typingDot
    1.1s
    infinite ease-in-out;

}


.typing span:nth-child(2) {

  animation-delay:
    0.13s;

}


.typing span:nth-child(3) {

  animation-delay:
    0.26s;

}


@keyframes typingDot {

  0%,
  60%,
  100% {

    transform:
      translateY(0);

    opacity:
      0.35;

  }

  30% {

    transform:
      translateY(-4px);

    opacity:
      1;

  }

}


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

.composer-section {

  flex-shrink: 0;

  position: relative;

  padding-top:
    14px;

}


.composer-section::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: -42px;

  height: 50px;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(248, 248, 250, 0.82)
    );

}


.composer {

  max-width:
    830px;

  margin: auto;

  padding:
    13px;

  border:
    1px solid
    rgba(15, 15, 18, 0.12);

  border-radius:
    23px;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0
    17px
    55px
    rgba(0, 0, 0, 0.075);

}


#message-input {

  width: 100%;

  min-height: 52px;

  max-height: 160px;

  padding:
    10px
    9px;

  resize: none;

  overflow-y: auto;

  border: 0;

  outline: 0;

  background:
    transparent;

  color:
    var(--text);

  font-size: 16px;

  line-height: 1.5;

}


#message-input::placeholder {

  color:
    #aaaab0;

}


.composer-footer {

  margin-top: 5px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

}


.composer-status {

  display: flex;

  align-items: center;

  gap: 7px;

  padding-left: 7px;

  font-size: 10px;

  color:
    var(--muted);

}


.status-dot {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--green);

}


.send-button {

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    var(--black);

  color: white;

  font-size: 19px;

  transition:
    transform
    0.25s
    var(--ease),

    box-shadow
    0.25s
    var(--ease);

}


.send-button:hover {

  transform:
    scale(1.07);

  box-shadow:
    0
    10px
    24px
    rgba(0, 0, 0, 0.16);

}


.send-button:disabled {

  opacity: 0.45;

  cursor: wait;

}


.disclaimer {

  margin-top: 9px;

  text-align: center;

  font-size: 9px;

  color:
    var(--muted);

}


/* ==========================================================
   JOB PANEL
========================================================== */

.jobs-heading {

  margin-top: 48px;

}


.jobs-heading h2 {

  font-size: 41px;

  line-height: 0.97;

  letter-spacing:
    -0.065em;

  font-weight: 720;

}


.jobs-heading p {

  margin-top: 18px;

  max-width: 290px;

  font-size: 13px;

  line-height: 1.7;

  color:
    var(--secondary);

}


/* ==========================================================
   JOB SEARCH BUTTON
========================================================== */

.find-jobs-button {

  width: 100%;

  min-height: 58px;

  margin-top: 30px;

  padding:
    0
    18px;

  display: flex;

  align-items: center;

  gap: 10px;

  border-radius:
    17px;

  background:
    var(--black);

  color: white;

  font-size: 12px;

  font-weight: 680;

  transition:
    transform
    0.3s
    var(--ease),

    box-shadow
    0.3s
    var(--ease),

    opacity
    0.3s ease;

}


.find-jobs-button:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0
    15px
    32px
    rgba(0, 0, 0, 0.16);

}


.find-jobs-button:disabled {

  opacity: 0.52;

  cursor: wait;

}


.find-jobs-button strong {

  margin-left: auto;

}


.search-icon {

  font-size: 18px;

}


/* ==========================================================
   SEARCH PROGRESS
========================================================== */

.job-search-progress {

  margin-top: 18px;

  padding:
    14px
    2px
    4px;

  opacity: 1;

  transition:
    opacity
    0.3s ease,

    transform
    0.3s
    var(--ease);

}


.job-search-progress.hidden {

  display: none;

}


.progress-info {

  margin-bottom: 10px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 15px;

}


.progress-info span:first-child {

  font-size: 10px;

  color:
    var(--secondary);

}


.progress-info span:last-child {

  font-size: 9px;

  font-weight: 650;

  color:
    var(--muted);

}


.progress-track {

  position: relative;

  height: 5px;

  overflow: hidden;

  border-radius:
    999px;

  background:
    rgba(15, 15, 18, 0.07);

}


.progress-bar {

  width: 0%;

  height: 100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--black),
      #55555d
    );

  transition:
    width
    0.55s
    var(--ease);

}


/* Indeterminate progress option */

.progress-bar.searching {

  width: 35%;

  animation:
    progressSearch
    1.5s
    infinite
    var(--ease);

}


@keyframes progressSearch {

  0% {

    transform:
      translateX(-110%);

  }

  100% {

    transform:
      translateX(310%);

  }

}


/* ==========================================================
   JOB STATUS
========================================================== */

.jobs-status {

  flex-shrink: 0;

  min-height: 38px;

  padding:
    14px
    2px;

  font-size: 10px;

  line-height: 1.45;

  color:
    var(--muted);

}


/* ==========================================================
   JOB LIST
========================================================== */

.job-list {

  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow-y: auto;

  overflow-x: hidden;

  overscroll-behavior:
    contain;

  padding-right:
    3px;

}


.job-list::-webkit-scrollbar {

  width: 5px;

}


.job-list::-webkit-scrollbar-track {

  background:
    transparent;

}


.job-list::-webkit-scrollbar-thumb {

  border-radius:
    999px;

  background:
    rgba(15, 15, 18, 0.12);

}


.job-list::-webkit-scrollbar-thumb:hover {

  background:
    rgba(15, 15, 18, 0.22);

}


/* ==========================================================
   EMPTY JOB STATE
========================================================== */

.jobs-empty {

  min-height: 190px;

  padding: 28px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  border:
    1px dashed
    var(--border-strong);

  border-radius:
    19px;

}


.jobs-empty > span {

  font-size: 23px;

  color:
    #a0a0a6;

}


.jobs-empty strong {

  margin-top: 14px;

  font-size: 13px;

}


.jobs-empty p {

  max-width: 190px;

  margin-top: 7px;

  font-size: 11px;

  line-height: 1.5;

  color:
    var(--muted);

}


/* ==========================================================
   JOB CARD
========================================================== */

.job-card {

  position: relative;

  padding: 17px;

  flex-shrink: 0;

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

  border-radius:
    19px;

  background:
    rgba(255, 255, 255, 0.91);

  cursor: pointer;

  transition:
    transform
    0.3s
    var(--ease),

    box-shadow
    0.3s
    var(--ease),

    border-color
    0.3s ease;

}


.job-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(15, 15, 18, 0.14);

  box-shadow:
    0
    15px
    38px
    rgba(0, 0, 0, 0.065);

}


.job-card-top {

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 9px;

}


.job-source {

  min-width: 0;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size: 9px;

  color:
    var(--muted);

}


.job-score {

  flex-shrink: 0;

  padding:
    5px
    9px;

  border-radius:
    999px;

  background:
    var(--green-soft);

  color:
    #248b55;

  font-size: 9px;

  font-weight: 700;

}


.job-card h3 {

  margin-top: 15px;

  font-size: 16px;

  line-height: 1.22;

  letter-spacing:
    -0.028em;

}


.job-company {

  margin-top: 7px;

  font-size: 11px;

  color:
    var(--secondary);

}


.job-location {

  margin-top: 3px;

  font-size: 10px;

  color:
    var(--muted);

}


.job-reason {

  margin-top: 13px;

  display:
    -webkit-box;

  overflow: hidden;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;

  font-size: 10px;

  line-height: 1.55;

  color:
    var(--secondary);

}


.job-link {

  margin-top: 16px;

  padding-top: 13px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  border-top:
    1px solid
    var(--border);

  font-size: 10px;

  font-weight: 650;

  color:
    var(--text);

}


/* ==========================================================
   MATCH TAGS
========================================================== */

.job-skill-preview {

  margin-top: 13px;

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

}


.job-skill-preview span {

  padding:
    5px
    7px;

  border-radius:
    999px;

  background:
    #f0f0f3;

  font-size: 8px;

  color:
    #5e5e65;

}


/* ==========================================================
   JOB FOOTER
========================================================== */

.jobs-footer {

  flex-shrink: 0;

  margin-top: 15px;

  padding-top: 15px;

  border-top:
    1px solid
    var(--border);

}


.jobs-footer span {

  display: block;

  font-size: 8px;

  color:
    var(--muted);

}


.jobs-footer div {

  margin-top: 5px;

  font-size: 9px;

  color:
    var(--secondary);

}


/* ==========================================================
   JOB EXPAND BUTTON
========================================================== */

.expand-jobs-button {

  position: absolute;

  top: 27px;
  right: 24px;

  z-index: 5;

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(15, 15, 18, 0.05);

  color:
    var(--secondary);

  font-size: 14px;

  transition:
    background
    0.25s ease,

    color
    0.25s ease,

    transform
    0.3s
    var(--ease);

}


.expand-jobs-button:hover {

  background:
    var(--black);

  color:
    white;

  transform:
    scale(1.06);

}


/* ==========================================================
   PAGE OVERLAY FOR EXPANDED JOBS
========================================================== */

.jobs-expansion-backdrop {
  position: fixed;

  inset: 0;

  z-index: 1999;

  background:
    rgba(9, 9, 12, 0.28);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}



.jobs-expansion-backdrop.visible {

  opacity: 1;

  visibility: visible;

}


/* ==========================================================
   EXPANDED JOB PANEL
========================================================== */

.jobs-panel.expanded {
  position: fixed;

  inset: 28px;

  z-index: 2000;

  width: auto;
  height: auto;

  padding:
    38px
    42px;

  overflow: hidden;

  border:
    1px solid
    rgba(15, 15, 18, 0.10);

  border-radius: 32px;

  background:
    rgba(248, 248, 250, 0.98);

  backdrop-filter:
    blur(34px)
    saturate(160%);

  -webkit-backdrop-filter:
    blur(34px)
    saturate(160%);

  box-shadow:
    0
    45px
    140px
    rgba(0, 0, 0, 0.22);
}


.jobs-panel.expanded
.jobs-heading {

  margin-top: 32px;

}


.jobs-panel.expanded
.jobs-heading h2 {

  font-size:
    clamp(
      46px,
      5vw,
      72px
    );

}


.jobs-panel.expanded
.jobs-heading p {

  max-width: 540px;

  font-size: 14px;

}


.jobs-panel.expanded
.find-jobs-button {

  max-width: 360px;

}


.jobs-panel.expanded
.jobs-status {

  max-width: 700px;

}


.jobs-panel.expanded
.job-list {

  display: grid;

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

  align-content: start;

  gap: 14px;

  padding:
    5px
    4px
    10px;

}


.jobs-panel.expanded
.job-card {

  min-height: 270px;

  display: flex;

  flex-direction: column;

}


.jobs-panel.expanded
.job-reason {

  -webkit-line-clamp:
    4;

}


.jobs-panel.expanded
.job-link {

  margin-top: auto;

}


.jobs-panel.expanded
.jobs-footer {

  margin-top: 16px;

}


/* ==========================================================
   JOB MODAL BACKDROP
========================================================== */

.job-modal-backdrop {

  position: fixed;

  inset: 0;

  z-index: 1200;

  padding:
    28px;

  display: grid;

  place-items: center;

  background:
    rgba(9, 9, 12, 0.35);

  backdrop-filter:
    blur(11px);

  -webkit-backdrop-filter:
    blur(11px);

  animation:
    modalFadeIn
    0.3s ease;

}


@keyframes modalFadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ==========================================================
   JOB DETAIL MODAL
========================================================== */

.job-modal {

  position: relative;

  width:
    min(
      100%,
      720px
    );

  max-height:
    min(
      820px,
      calc(100vh - 56px)
    );

  overflow-y: auto;

  padding:
    38px;

  border:
    1px solid
    rgba(255, 255, 255, 0.55);

  border-radius:
    30px;

  background:
    rgba(249, 249, 251, 0.97);

  box-shadow:
    0
    45px
    150px
    rgba(0, 0, 0, 0.26);

  animation:
    modalSlideIn
    0.42s
    var(--ease);

}


@keyframes modalSlideIn {

  from {

    opacity: 0;

    transform:
      translateY(18px)
      scale(0.98);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


.job-modal::-webkit-scrollbar {

  width: 6px;

}


.job-modal::-webkit-scrollbar-thumb {

  border-radius:
    999px;

  background:
    rgba(15, 15, 18, 0.13);

}


/* ==========================================================
   MODAL CLOSE
========================================================== */

.job-modal-close {

  position: absolute;

  top: 22px;
  right: 22px;

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(15, 15, 18, 0.06);

  color:
    var(--text);

  font-size: 17px;

  transition:
    background
    0.2s ease,

    color
    0.2s ease,

    transform
    0.25s
    var(--ease);

}


.job-modal-close:hover {

  transform:
    scale(1.05);

  background:
    var(--black);

  color:
    white;

}


/* ==========================================================
   MODAL JOB CONTENT
========================================================== */

.job-modal-source {

  padding-right:
    55px;

  font-size: 10px;

  font-weight: 650;

  letter-spacing:
    0.1em;

  text-transform: uppercase;

  color:
    var(--muted);

}


.job-modal h2 {

  max-width: 600px;

  margin-top: 22px;

  font-size:
    clamp(
      35px,
      5vw,
      54px
    );

  line-height: 0.98;

  letter-spacing:
    -0.06em;

}


.job-modal-company {

  margin-top: 18px;

  font-size: 15px;

  color:
    var(--secondary);

}


.job-modal-location {

  margin-top: 4px;

  font-size: 12px;

  color:
    var(--muted);

}


/* ==========================================================
   MODAL SCORE
========================================================== */

.job-modal-score-row {

  margin-top: 30px;

  padding:
    20px
    0;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 20px;

  border-top:
    1px solid
    var(--border);

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

}


.job-modal-score {

  display: flex;

  align-items: baseline;

  gap: 8px;

}


.job-modal-score strong {

  font-size: 38px;

  line-height: 1;

  letter-spacing:
    -0.05em;

}


.job-modal-score span {

  font-size: 11px;

  color:
    var(--muted);

}


.job-match-level {

  padding:
    7px
    10px;

  border-radius:
    999px;

  background:
    var(--green-soft);

  color:
    #248b55;

  font-size: 10px;

  font-weight: 700;

}


/* ==========================================================
   MODAL SECTIONS
========================================================== */

.job-modal-section {

  margin-top: 30px;

}


.job-modal-section > span {

  display: block;

  margin-bottom: 12px;

  font-size: 9px;

  font-weight: 750;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

  color:
    var(--muted);

}


.job-modal-section > p {

  font-size: 14px;

  line-height: 1.75;

  color:
    var(--secondary);

}


/* ==========================================================
   MATCH / GAP LIST
========================================================== */

.job-detail-list {

  display: grid;

  gap: 8px;

}


.job-detail-item {

  padding:
    12px
    13px;

  display: flex;

  align-items: center;

  gap: 10px;

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

  border-radius:
    13px;

  background:
    rgba(255, 255, 255, 0.68);

  font-size: 11px;

}


.job-detail-item.match i {

  color:
    var(--green);

}


.job-detail-item.gap i {

  color:
    var(--orange);

}


.job-detail-item i {

  width: 18px;

  font-style: normal;

}


/* ==========================================================
   MODAL ORIGINAL JOB BUTTON
========================================================== */

.job-modal-link {

  min-height: 56px;

  margin-top: 35px;

  padding:
    0
    18px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  border-radius:
    16px;

  background:
    var(--black);

  color:
    white;

  font-size: 12px;

  font-weight: 680;

  transition:
    transform
    0.3s
    var(--ease),

    box-shadow
    0.3s
    var(--ease);

}


.job-modal-link:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0
    15px
    35px
    rgba(0, 0, 0, 0.16);

}


/* ==========================================================
   PREVENT BODY SCROLL WHEN MODAL OPEN
========================================================== */

body.modal-open {

  overflow: hidden;

}


/* ==========================================================
   TABLET / SMALL LAPTOP
========================================================== */

@media
(max-width: 1250px) {

  .app-shell {

    grid-template-columns:
      250px
      minmax(430px, 1fr)
      290px;

  }


  .document-panel,
  .jobs-panel {

    padding:
      28px
      21px;

  }


  .document-heading h2,
  .jobs-heading h2 {

    font-size: 35px;

  }


  .starter-prompts {

    grid-template-columns:
      1fr;

  }


  .jobs-panel.expanded
  .job-list {

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

  }

}


/* ==========================================================
   TABLET
========================================================== */

@media
(max-width: 930px) {

  body {

    overflow-y: auto;

  }


  .app-shell {

    height: auto;

    min-height: 0;

    grid-template-columns:
      1fr;

    overflow: visible;

  }


  .document-panel,
  .jobs-panel {

    border: 0;

  }


  .document-panel {

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

  }


  .jobs-panel {

    min-height: 650px;

    border-top:
      1px solid
      var(--border);

  }


  .chat-panel {

    min-height: 780px;

  }


  .messages {

    height: 490px;

    flex: none;

  }


  .job-list {

    max-height: 520px;

  }


  .document-heading p,
  .jobs-heading p {

    max-width: 520px;

  }


  .jobs-panel.expanded {

    inset:
      20px;

  }


  .jobs-panel.expanded
  .job-list {

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

  }

}


/* ==========================================================
   PHONE
========================================================== */

@media
(max-width: 640px) {

  .site-header {

    height: 70px;

    padding:
      8px
      10px;

  }


  .nav-shell {

    height: 54px;

    padding:
      0
      16px;

  }


  .product-title {

    display: none;

  }


  .app-shell {

    width:
      calc(100% - 20px);

    margin:
      7px auto
      16px;

    border-radius:
      24px;

  }


  .document-panel,
  .jobs-panel {

    padding:
      26px
      19px;

  }


  .chat-panel {

    min-height: 740px;

    padding:
      26px
      18px
      18px;

  }


  .chat-header h1 {

    font-size:
      46px;

  }


  .clear-button {

    padding:
      8px
      11px;

  }


  .message.user
  .message-content {

    max-width: 90%;

  }


  .message-content {

    font-size: 14px;

  }


  #message-input {

    font-size: 15px;

  }


  .jobs-panel.expanded {

    inset: 8px;

    padding:
      26px
      18px;

    border-radius:
      24px;

  }


  .jobs-panel.expanded
  .job-list {

    grid-template-columns:
      1fr;

  }


  .job-modal-backdrop {

    padding:
      10px;

  }


  .job-modal {

    width: 100%;

    max-height:
      calc(100vh - 20px);

    padding:
      28px
      20px;

    border-radius:
      24px;

  }


  .job-modal h2 {

    font-size:
      38px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media
(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;

  }

}