/* ===== Estimate Chat — CSS Variables ===== */
:root{
  --green:#22b573;
  --green-d:#1ea366;
  --green-l:#e8f5ee;
  --blue:#5b9fd5;
  --ink:#2d3a3f;
  --ink-2:#566066;
  --ink-3:#8a9197;
  --line:#e3e8ec;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:#f5f7fa;line-height:1.75;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}

.ec-wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* ===== Header ===== */
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.04)}
.hdr{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:'Montserrat',sans-serif;font-size:16px}
.logo-name{font-weight:800;font-size:18px;font-family:'Montserrat','Noto Sans JP',sans-serif}
.logo-name small{font-weight:500;font-size:11px;color:var(--ink-2);margin-left:6px;font-family:'Noto Sans JP',sans-serif}
.hdr-cta{height:40px;padding:0 18px;border-radius:999px;background:var(--green);color:#fff;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:8px;transition:background .15s}
.hdr-cta:hover{background:var(--green-d)}

/* ===== Hero ===== */
.ec-hero{background:#fff;border-bottom:1px solid var(--line);padding:56px 0 48px}
.ec-hero-inner{text-align:center}
.ec-badge{display:inline-flex;align-items:center;gap:8px;background:var(--green-l);color:var(--green-d);font-weight:700;font-size:12px;padding:7px 16px;border-radius:999px;margin-bottom:20px;letter-spacing:.04em}
.ec-badge svg{width:13px;height:13px;flex-shrink:0}
.ec-hero h1{font-size:38px;font-weight:900;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px;line-height:1.25;font-family:'Montserrat','Noto Sans JP',sans-serif}
.ec-hero h1 span{color:var(--green)}
.ec-hero p{color:var(--ink-2);font-size:15px;line-height:1.9;max-width:560px;margin:0 auto}

/* ===== Category Selection ===== */
.ec-cat-section{padding:52px 0 64px}
.ec-section-label{text-align:center;font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-family:'Montserrat',sans-serif;margin-bottom:8px}
.ec-section-title{text-align:center;font-size:22px;font-weight:800;color:var(--ink);margin-bottom:36px}
.ec-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ec-cat-btn{background:#fff;border:2px solid var(--line);border-radius:20px;padding:28px 20px;text-align:center;transition:border-color .18s,box-shadow .18s,transform .15s;cursor:pointer;position:relative;overflow:hidden}
.ec-cat-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,181,115,.04) 0%,rgba(91,159,213,.04) 100%);opacity:0;transition:opacity .18s}
.ec-cat-btn:hover{border-color:var(--green);box-shadow:0 8px 24px -8px rgba(34,181,115,.22);transform:translateY(-2px)}
.ec-cat-btn:hover::before{opacity:1}
.ec-cat-btn:active{transform:translateY(0)}
.ec-cat-icon{width:52px;height:52px;border-radius:14px;background:var(--green-l);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--green-d);transition:background .18s}
.ec-cat-btn:hover .ec-cat-icon{background:var(--green);color:#fff}
.ec-cat-icon svg{width:24px;height:24px}
.ec-cat-name{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px;font-family:'Montserrat','Noto Sans JP',sans-serif}
.ec-cat-desc{font-size:12px;color:var(--ink-3);line-height:1.6}

/* ===== Chat Interface ===== */
.ec-chat-section{padding:0 0 64px}
.ec-chat-container{background:#fff;border-radius:24px;box-shadow:0 16px 48px -16px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.04);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;height:680px}

/* Chat header */
.ec-chat-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line);background:#fff;flex-shrink:0}
.ec-chat-hdr-left{display:flex;align-items:center;gap:12px}
.ec-ai-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ec-ai-avatar svg{width:18px;height:18px;color:#fff}
.ec-ai-name{font-weight:800;font-size:14px;color:var(--ink);font-family:'Montserrat','Noto Sans JP',sans-serif}
.ec-ai-name small{display:block;font-size:11px;font-weight:500;color:var(--ink-3);font-family:'Noto Sans JP',sans-serif}
.ec-cat-tag{display:inline-flex;align-items:center;gap:6px;background:var(--green-l);color:var(--green-d);font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;font-family:'Montserrat',sans-serif}
.ec-reset-btn{font-size:12px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600;transition:border-color .15s,color .15s;background:#fff;cursor:pointer;white-space:nowrap}
.ec-reset-btn:hover{border-color:var(--ink-2);color:var(--ink)}

/* Messages area */
.ec-messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
.ec-messages::-webkit-scrollbar{width:4px}
.ec-messages::-webkit-scrollbar-track{background:transparent}
.ec-messages::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* Message bubbles */
.ec-msg{display:flex;gap:10px;max-width:82%;animation:msgIn .2s ease-out}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ec-msg--ai{align-self:flex-start}
.ec-msg--user{align-self:flex-end;flex-direction:row-reverse}
.ec-msg-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ec-msg--ai .ec-msg-avatar{background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%)}
.ec-msg--user .ec-msg-avatar{background:var(--green)}
.ec-msg-avatar svg{width:15px;height:15px;color:#fff}
.ec-msg-bubble{padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.75;word-break:break-word}
.ec-msg-bubble p{margin:0 0 6px}
.ec-msg-bubble p:last-child,.ec-msg-bubble br:last-child{margin:0}
.ec-msg-bubble .ec-list{margin:6px 0 6px 18px;padding:0;list-style:disc}
.ec-msg-bubble .ec-list li{margin-bottom:3px}
.ec-msg--ai .ec-msg-bubble{background:#f5f7fa;border-top-left-radius:4px;color:var(--ink)}
.ec-msg--user .ec-msg-bubble{background:var(--green);border-top-right-radius:4px;color:#fff}

/* Typing indicator */
.ec-typing{display:flex;gap:10px;align-items:center;align-self:flex-start;animation:msgIn .2s ease-out}
.ec-typing-dots{display:flex;gap:5px;padding:12px 16px;background:#f5f7fa;border-radius:18px;border-top-left-radius:4px}
.ec-typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:dot 1.2s infinite}
.ec-typing-dots span:nth-child(2){animation-delay:.2s}
.ec-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{transform:scale(.8);opacity:.4}40%{transform:scale(1);opacity:1}}

/* Disclaimer */
.ec-disclaimer{font-size:11px;color:var(--ink-3);background:#fafbfc;border-top:1px solid var(--line);padding:10px 24px;line-height:1.6;flex-shrink:0}

/* Input area */
.ec-input-area{display:flex;align-items:flex-end;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:#fff;flex-shrink:0}
#ec-input{flex:1;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;font-family:'Noto Sans JP',sans-serif;font-size:14px;color:var(--ink);resize:none;outline:none;line-height:1.6;max-height:120px;overflow-y:auto;transition:border-color .15s}
#ec-input:focus{border-color:var(--green)}
#ec-input::placeholder{color:var(--ink-3)}
#ec-send-btn{width:44px;height:44px;border-radius:50%;background:var(--green);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .1s}
#ec-send-btn:hover{background:var(--green-d);transform:scale(1.05)}
#ec-send-btn:disabled{background:var(--line);cursor:not-allowed;transform:none}
#ec-send-btn svg{width:18px;height:18px;color:#fff}

/* ===== Contact CTA button (inside AI bubble) ===== */
.ec-contact-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;height:40px;padding:0 20px;border-radius:999px;background:var(--green);color:#fff;font-size:13px;font-weight:700;text-decoration:none;transition:background .15s,transform .1s;font-family:'Montserrat','Noto Sans JP',sans-serif}
.ec-contact-btn:hover{background:var(--green-d);transform:translateY(-1px)}

/* ===== Counter ===== */
.ec-counter{font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;font-family:'Montserrat',sans-serif;letter-spacing:.02em;transition:background .2s,color .2s;white-space:nowrap}
.ec-counter:empty{display:none}
.ec-counter{background:#f0f7f4;color:var(--green-d)}
.ec-counter--estimate{background:#eaf3fb;color:var(--blue-d,#3d7eb8)}
.ec-counter--warn{background:#fef9ec;color:#92400e}
.ec-counter--locked{background:#fff5f5;color:#c0392b}

/* ===== Lock banner ===== */
.ec-lock-banner{background:#f5f7fa;border-top:2px solid var(--line);padding:14px 20px;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.ec-lock-banner svg{color:var(--ink-3)}
.ec-lock-banner span{flex:1;min-width:0}
.ec-lock-cta{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;transition:background .15s;text-decoration:none}
.ec-lock-cta:hover{background:var(--green-d)}

/* ===== Error banner ===== */
.ec-error{background:#fff5f5;border:1px solid #fecaca;border-radius:10px;padding:12px 16px;font-size:13px;color:#c0392b;margin:0 24px 16px;display:flex;gap:8px;align-items:center;flex-shrink:0}

/* ===== Footer ===== */
footer.site{background:#fff;border-top:1px solid var(--line);padding:28px 0}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-logo{display:flex;align-items:center;gap:8px}
.foot-logo .logo-mark{width:26px;height:26px;font-size:13px}
.foot-logo .logo-name{font-size:14px}
.foot-links{display:flex;gap:20px;font-size:12px;color:var(--ink-2)}
.foot-links a:hover{color:var(--green)}
.foot-copy{font-size:11px;color:var(--ink-3)}

/* ===== Responsive ===== */
@media(max-width:768px){
  .ec-hero h1{font-size:26px}
  .ec-cat-grid{grid-template-columns:repeat(2,1fr)}
  .ec-chat-container{height:calc(100svh - 68px - 32px);border-radius:16px}
  .ec-msg{max-width:90%}
  .hdr-cta{display:none}
  .foot-links{display:none}
}
@media(max-width:480px){
  .ec-cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ec-cat-btn{padding:20px 14px}
  .ec-hero{padding:36px 0 32px}
  .ec-hero h1{font-size:22px}
}