/* LINE conversation illustration with a compact, single-row rich menu. */
.tr-company .demo-phone-wrap{padding:22px 0 0;gap:0;min-width:0}
.tr-company .demo-phone-wrap:before{
  inset:11% -15% 10%;border:0;border-radius:50%;transform:none;
  background:radial-gradient(ellipse,#cae9f4b3,#d4e3f43b 55%,transparent 72%);
}
.tr-company .phone{
  display:flex;flex-direction:column;flex-shrink:0;
  width:330px;max-width:100%;aspect-ratio:375/770;
  border:7px solid #dce3e9;border-radius:43px;background:#fff;
  box-shadow:0 32px 65px -24px #17577e45,0 0 0 1px #fff,inset 0 0 0 1px #ffffffa0;
  overflow:hidden;isolation:isolate;scroll-margin-top:24px;
}
.tr-company .phone-status{
  flex:none;height:32px;display:flex;justify-content:space-between;align-items:center;
  padding:7px 20px 0;background:#91afd4;color:#17314a;position:relative;
  font:800 10px 'Nunito Sans',sans-serif;
}
.tr-company .phone-status>svg{width:49px;height:13px}
.tr-company .phone-camera{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:72px;height:16px;border-radius:12px;background:#172737;box-shadow:inset 0 1px 2px #ffffff1a}
.tr-company .phone-header{
  flex:none;display:flex;align-items:center;gap:7px;height:55px;padding:8px 12px 12px;
  background:#91afd4;border:0;color:#132e49;
}
.tr-company .phone-header svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tr-company .phone-back{width:18px;height:20px;flex:none}
.tr-company .phone-account{flex:1;min-width:0}
.tr-company .phone-account strong{display:block;font-size:12px;line-height:1.6;font-weight:700;letter-spacing:.015em}
.tr-company .phone-account small{display:block;font-size:8px;line-height:1.6;opacity:.76;font-weight:500}
.tr-company .phone-header-icons{display:flex;gap:11px;align-items:center}
.tr-company .phone-header-icons svg{width:16px;height:16px}
.tr-company .phone .chat{
  flex:1;min-height:0;padding:12px 12px 20px;background:#91afd4;
  overflow:auto;scrollbar-width:thin;scrollbar-color:#ffffff50 transparent;
}
.tr-company .chat-day{width:max-content;margin:0 auto 22px;padding:3px 13px;background:#52779a40;color:#fff;border-radius:20px;font-size:9px;line-height:1.6}
.tr-company .incoming-message{display:grid;grid-template-columns:27px minmax(0,1fr);gap:7px;align-items:start;margin-right:19px}
.tr-company .chat-account-icon{
  display:grid;place-items:center;width:27px;height:27px;margin-top:2px;border-radius:50%;
  color:#fff;background:linear-gradient(140deg,#20bfdf,#0870de);border:1px solid #ffffffa6;
}
.tr-company .chat-account-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tr-company .chat-sender{font-size:9px;line-height:1.7;color:#274c6a;margin-bottom:5px}
.tr-company .phone .bubble{
  position:relative;max-width:100%;padding:12px 13px;font-size:11px;line-height:1.85;
  color:#1b344a;border-radius:4px 16px 16px 16px;background:#fff;
  box-shadow:0 2px 5px #214e7310;overflow-wrap:anywhere;
}
.tr-company .incoming-message .bubble:before{content:'';position:absolute;top:0;left:-6px;border-top:8px solid #fff;border-left:9px solid transparent}
.tr-company .chat-time{display:block;font:500 8px/1.6 'Noto Sans JP',sans-serif;color:#254e72}
.tr-company .message-content>.chat-time{margin-top:4px}
.tr-company .reply-message{display:flex;gap:6px;align-items:flex-end;justify-content:flex-end;margin:22px 1px 0 38px}
.tr-company .reply-message>.chat-time{flex:none;text-align:right;margin-bottom:2px}
.tr-company .phone .bubble.reply{margin:0;max-width:100%;background:#cef1dc;border-radius:16px 4px 16px 16px}
.tr-company .reply-message .bubble:after{content:'';position:absolute;top:0;right:-5px;border-top:8px solid #cef1dc;border-right:8px solid transparent}
.tr-company .phone-rich-menu{flex:none;width:100%;aspect-ratio:2500/843;background:#d3f2fb;border-top:1px solid #ffffffa6;overflow:hidden}
.tr-company .phone-rich-menu img{display:block;width:100%;height:100%;object-fit:fill}
.tr-company .phone-menu-toggle{
  flex:none;position:relative;display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;width:100%;padding:9px 36px;border:0;border-radius:0;
  background:#fff;color:#243b4b;box-shadow:none;font-size:12px;font-weight:500;line-height:1.4;
}
.tr-company .phone-menu-toggle:hover{background:#f2f8fc}
.tr-company .phone-menu-toggle:focus-visible{outline:2px solid #0c6ff0;outline-offset:-4px}
.tr-company .phone-menu-toggle svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tr-company .keyboard-icon{position:absolute;left:16px;top:13px;width:19px;height:19px}
.tr-company .menu-chevron{width:12px;height:12px}
.tr-company .phone-menu-toggle[aria-expanded=false] .menu-chevron{transform:rotate(180deg)}
.tr-company .phone-home{height:22px;flex:none;background:#fff;display:flex;align-items:center;justify-content:center}
.tr-company .phone-home:before{content:'';display:block;width:36%;height:4px;border-radius:5px;background:#1d2228}
.tr-company .demo-playback{flex-wrap:wrap;gap:8px 15px;margin-top:22px}
.tr-company .demo-playback .fine{font-size:10px;text-align:center}
@media(min-width:768px) and (max-width:960px){
  .tr-company .phone{width:294px;border-width:6px;border-radius:39px}
  .tr-company .phone-status{height:29px}
  .tr-company .phone-header{height:50px;padding-inline:9px;gap:4px}
  .tr-company .phone-header-icons{gap:8px}
  .tr-company .phone-account strong{font-size:11px}
  .tr-company .phone .chat{padding:10px 10px 15px}
  .tr-company .chat-day{margin-bottom:16px}
  .tr-company .phone .bubble{font-size:10px;padding:10px 11px}
  .tr-company .incoming-message{grid-template-columns:24px minmax(0,1fr);gap:6px;margin-right:12px}
  .tr-company .chat-account-icon{width:24px;height:24px}
}
@media(max-width:767px){
  .tr-company .demo-phone-wrap{max-width:360px;padding:14px 10px 0}
  .tr-company .phone{width:320px;border-width:6px;border-radius:40px}
  .tr-company .phone-header{padding-inline:10px}
  .tr-company .demo-playback{margin-top:20px}
}
@media(max-width:359px){
  .tr-company .demo-phone-wrap{padding-inline:2px}
  .tr-company .phone{border-radius:35px}
  .tr-company .phone-status{height:29px;padding-inline:15px}
  .tr-company .phone-camera{width:62px;height:14px}
  .tr-company .phone-header{height:49px;gap:3px;padding-inline:8px}
  .tr-company .phone-account strong{font-size:10px}
  .tr-company .phone-account small{font-size:7px}
  .tr-company .phone-header-icons{gap:7px}
  .tr-company .phone-header-icons svg{width:14px;height:14px}
  .tr-company .phone .chat{padding:10px 8px}
  .tr-company .chat-day{margin-bottom:14px}
  .tr-company .incoming-message{grid-template-columns:23px minmax(0,1fr);gap:6px;margin-right:10px}
  .tr-company .chat-account-icon{width:23px;height:23px}
  .tr-company .phone .bubble{font-size:10px;padding:10px}
  .tr-company .reply-message{margin-left:27px;margin-top:18px}
  .tr-company .phone-menu-toggle{font-size:11px}
}