.elementor-1763 .elementor-element.elementor-element-9d9d840{width:var( --container-widget-width, 115.423% );max-width:115.423%;--container-widget-width:115.423%;--container-widget-flex-grow:0;}/* Start custom CSS for html, class: .elementor-element-9d9d840 *//* =========================
  Chat Interview (clean)
  - centered container
  - icons stay beside bubbles
  - responsive
========================= */

.chat-interview{
  max-width: 880px;
  margin: 0 auto;
  background: #f3f6fb;
  padding: 20px;
  border-radius: 12px;

  --av: 48px;          /* avatar display size */
  --gap: 12px;         /* gap between avatar and bubble */
  --bubble-max: 620px; /* bubble max width (PC) */
}

/* section */
.chat-interview .chat-section{
  margin-bottom: 28px;
}

.chat-interview .chat-title{
  font-weight: 800;
  margin-bottom: 14px;
  color: #1f2937;
}

/* rows */
.chat-interview .chat-row{
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
  margin-bottom: 10px;

  /* 変な上書き対策：レイアウト崩れを防ぐ */
  position: relative;
  float: none;
}

/* recruiter (left) */
.chat-interview .chat-row.recruiter{
  justify-content: flex-start;
}

/* employee (right) */
.chat-interview .chat-row.employee{
  justify-content: flex-end;
}

/* avatar */
.chat-interview .avatar{
  width: var(--av);
  height: var(--av);
  flex: 0 0 var(--av);
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,.12);
  background: #fff;

  /* Elementor等で右固定される事故を潰す */
  position: static;
  right: auto;
  left: auto;
  margin: 0;
}

.chat-interview .avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* bubble common */
.chat-interview .bubble{
  max-width: var(--bubble-max);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.8;
  border-radius: 16px;
  word-break: break-word;

  /* 変な自動余白が入る事故を潰す */
  margin: 0;
}

/* recruiter bubble */
.chat-interview .recruiter .bubble{
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-top-left-radius: 6px;
}

/* employee bubble */
.chat-interview .employee .bubble{
  background: #dff3ea;
  border: 1px solid #9fd8c3;
  border-top-right-radius: 6px;
}

/* list inside bubble */
.chat-interview .bubble ul{
  margin: 0 0 8px;
  padding-left: 18px;
}
.chat-interview .bubble li{
  margin: 0 0 4px;
}

/* ====== responsive ====== */
@media (max-width: 768px){
  .chat-interview{
    padding: 14px;
    --av: 40px;
    --gap: 10px;
    --bubble-max: 90%;
  }
}/* End custom CSS */
/* Start custom CSS */.chat-interview{
  max-width: 900px;
  margin: 0 auto;
  background: #f3f6fb;
  padding: 24px;
  border-radius: 16px;

  --av: 48px;          /* avatar size */
  --gap: 12px;         /* gap between bubble & avatar */
  --bubble-max: 640px; /* bubble max width */
}

/* section */
.chat-section{
  margin-bottom: 32px;
}

.chat-title{
  font-weight: 800;
  margin-bottom: 16px;
  color: #1f2937;
}

/* row */
.chat-row{
  display: flex;
  margin-bottom: 12px;
}

/* left / right positioning */
.chat-row.recruiter{
  justify-content: flex-start;
}

.chat-row.employee{
  justify-content: flex-end;
}

/* message group (bubble + avatar) */
.chat-row .msg{
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
  max-width: 100%;
}

/* avatar */
.chat-interview .avatar{
  width: var(--av);
  height: var(--av);
  flex: 0 0 var(--av);
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,.12);
  background: #fff;

  /* Elementor事故防止 */
  position: static !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
}

.chat-interview .avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* bubble */
.chat-interview .bubble{
  width: auto !important;
  max-width: var(--bubble-max);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.8;
  border-radius: 16px;
  word-break: break-word;
  margin: 0 !important;
}

/* recruiter bubble */
.chat-row.recruiter .bubble{
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-top-left-radius: 6px;
}

/* employee bubble */
.chat-row.employee .bubble{
  background: #dff3ea;
  border: 1px solid #9fd8c3;
  border-top-right-radius: 6px;
}

/* list inside bubble */
.chat-interview .bubble ul{
  margin: 0 0 8px;
  padding-left: 18px;
}
.chat-interview .bubble li{
  margin: 0 0 4px;
}

/* responsive */
@media (max-width: 768px){
  .chat-interview{
    padding: 16px;
    --av: 40px;
    --gap: 10px;
    --bubble-max: 90%;
  }
}/* End custom CSS */