/* セセラ AIコンシェルジュ フロント — デザイン3a（白ベース＋ティール） */
.cecela-ai{
  --teal:#45b1a8; --teal-d:#3aa198; --teal-l:#4cbcb2;
  --navy:#2c3e50; --coral:#e8836f; --coral-l:#ef9070;
  --ink:#2b2b2b; --sub:#1b1b1b; --soft:#6b6b6b; --faint:#8a8a8a;
  --line:#eef0f2; --border:#dfe4e6; --panel:#f7f9f9; --ai:#f2f7f6;
  max-width:900px; margin:0 auto; color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
}
.cecela-ai *{box-sizing:border-box;}
.cecela-ai .cai-row{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.cecela-ai .cai-form{background:var(--panel); border-bottom:1px solid var(--line);}

/* 折りたたみヘッダー（スマホのみ表示） */
.cecela-ai .cai-toggle{
  display:none; width:100%; align-items:center; justify-content:space-between;
  padding:16px 18px; background:none; border:0; cursor:pointer; font:inherit;
}
.cecela-ai .cai-toggle-label{font-size:13px; font-weight:700; color:var(--sub);}
.cecela-ai .cai-toggle-right{display:flex; align-items:center; gap:8px;}
.cecela-ai .cai-summary{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--soft);}
.cecela-ai .cai-arrow{font-size:11px; color:var(--teal); transition:transform .3s;}
.cecela-ai .cai-form.is-open .cai-arrow{transform:rotate(180deg);}

.cecela-ai .cai-panel{padding:20px 18px;}
.cecela-ai .cai-field{margin:0 0 16px; border:0; padding:0;}
.cecela-ai .cai-field legend, .cecela-ai .cai-label{
  font-size:11.5px; font-weight:700; color:var(--sub); margin:0 0 8px; padding:0;
}

/* チップ（エリア・種類・予算） */
.cecela-ai .cai-chips{display:flex; flex-wrap:wrap; gap:7px;}
.cecela-ai .cai-chip{cursor:pointer;}
.cecela-ai .cai-chip input{position:absolute; opacity:0; width:0; height:0;}
.cecela-ai .cai-chip span{
  display:inline-block; border:1px solid var(--border); border-radius:999px;
  padding:7px 14px; font-size:11.5px; font-weight:600; color:var(--soft); background:#fff;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.cecela-ai .cai-chip:hover span{border-color:var(--teal); color:var(--teal);}
.cecela-ai .cai-chip input:checked + span{
  background:var(--teal); border-color:var(--teal); color:#fff;
  box-shadow:0 3px 8px rgba(69,177,168,.3); transform:scale(1.02);
}
.cecela-ai .cai-chip input:focus-visible + span{outline:2px solid var(--teal-d); outline-offset:2px;}

.cecela-ai textarea{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:11px 12px;
  font-size:12px; line-height:1.7; color:var(--sub); background:#fff; font-family:inherit; resize:vertical;
}
.cecela-ai textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}

/* CTA（グラデ＋光沢スイープ） */
.cecela-ai .cai-submit{
  position:relative; overflow:hidden; width:100%; border:0; border-radius:999px;
  padding:14px; margin-top:4px; letter-spacing:.06em;
  background:linear-gradient(135deg,var(--teal-l),var(--teal-d)); color:#fff;
  font-size:13.5px; font-weight:700; cursor:pointer; transition:transform .15s;
  box-shadow:0 6px 16px rgba(69,177,168,.35);
  animation:cai-glow 2.2s ease-in-out infinite;
}
.cecela-ai .cai-submit::after{
  content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
  transform:skewX(-22deg);
  animation:cai-shine 2.2s ease-in-out infinite;
}
.cecela-ai .cai-submit:hover{transform:translateY(-2px);}
.cecela-ai .cai-submit:active{transform:scale(.97);}
.cecela-ai .cai-submit:disabled{background:var(--faint); cursor:wait; transform:none; box-shadow:none; animation:none;}
.cecela-ai .cai-submit:disabled::after{display:none;}
.cecela-ai .cai-error{margin:12px 0 0; background:#fdecec; color:#a3211f; border-radius:8px; padding:10px 12px; font-size:12px;}

/* チャット側 */
.cecela-ai .cai-chat{flex:1; padding:20px 18px; min-height:360px; display:flex; flex-direction:column; gap:12px; background:#fff;}
.cecela-ai .cai-chat-head{font-size:11px; font-weight:700; color:var(--teal); letter-spacing:.1em; margin:0;}
.cecela-ai .cai-messages{display:flex; flex-direction:column; gap:12px;}
.cecela-ai .cai-bubble{
  max-width:92%; background:var(--ai); border-radius:4px 14px 14px 14px;
  padding:12px 14px; font-size:12.5px; line-height:1.7; color:var(--sub);
  animation:cai-in .5s ease both;
}
.cecela-ai .cai-bubble.is-user{
  align-self:flex-end; background:var(--navy); color:#fff; border-radius:14px 4px 14px 14px;
  animation:cai-spring .55s cubic-bezier(.34,1.56,.64,1) both;
}
.cecela-ai .cai-typing{display:flex; align-items:center; gap:5px; background:var(--ai); border-radius:4px 14px 14px 14px; padding:14px 16px; width:fit-content;}
.cecela-ai .cai-dot{width:7px; height:7px; border-radius:50%; background:var(--teal); animation:cai-dotb 1.1s ease infinite;}
.cecela-ai .cai-dot:nth-child(2){animation-delay:.18s;}
.cecela-ai .cai-dot:nth-child(3){animation-delay:.36s;}

/* 結果カード */
.cecela-ai .cai-card{
  position:relative; border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.05); max-width:100%; overflow:visible;
  margin-top:8px; /* 飛び出すバッジのぶん上に余白を確保 */
  animation:cai-spring .6s cubic-bezier(.34,1.56,.64,1) both;
}
.cecela-ai .cai-badge{
  position:absolute; top:-8px; right:12px;
  background:linear-gradient(135deg,var(--coral-l),var(--coral)); color:#fff;
  font-size:9.5px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.04em;
  box-shadow:0 3px 8px rgba(232,131,111,.4); animation:cai-badge .5s cubic-bezier(.34,1.56,.64,1) both .3s;
}
.cecela-ai .cai-card-top{display:flex; gap:12px;}
.cecela-ai .cai-card-top > div{min-width:0; flex:1;}
.cecela-ai .cai-thumb{
  width:72px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0;
  background:linear-gradient(135deg,#cfe3da,#a9cdbd);
}
.cecela-ai .cai-card-title{font-size:12px; font-weight:700; color:var(--navy); margin:0;}
.cecela-ai .cai-card-title .cai-price{color:var(--navy); font-weight:800;}
.cecela-ai .cai-card-sub{font-size:11px; color:var(--faint); margin:3px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cecela-ai .cai-card-comment{font-size:11.5px; line-height:1.7; color:var(--soft); margin:6px 0 0; overflow-wrap:anywhere;}
.cecela-ai .cai-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.cecela-ai .cai-actions a{
  border-radius:999px; padding:8px 15px; font-size:11.5px; font-weight:700; text-decoration:none; transition:all .2s;
}
.cecela-ai .cai-a-view{border:1.5px solid var(--teal); color:var(--teal-d); background:#fff;}
.cecela-ai .cai-a-view:hover{background:var(--teal); color:#fff;}
.cecela-ai .cai-a-line{background:#06c755; color:#fff;}
.cecela-ai .cai-a-line:hover{filter:brightness(1.05);}

/* 条件に合う物件すべて（AIおすすめの下に出す一覧） */
.cecela-ai .cai-alllist{
  border-top:1px solid var(--line); margin-top:6px; padding-top:14px;
  animation:cai-in .5s ease both;
}
.cecela-ai .cai-alllist-head{
  font-size:12px; font-weight:700; color:var(--sub); margin:0 0 10px;
}
.cecela-ai .cai-alllist-items{ display:flex; flex-direction:column; gap:8px; }
.cecela-ai a.cai-mini{
  display:flex !important; align-items:center; gap:10px; width:100% !important; max-width:none !important;
  background:#fff !important; border:1px solid var(--line); border-radius:10px;
  padding:8px 10px !important; margin:0 !important;
  text-decoration:none !important; color:var(--sub) !important; transition:background .2s;
}
.cecela-ai a.cai-mini:hover{ background:#faf8f5 !important; }
.cecela-ai .cai-mini-thumb{
  width:56px; height:44px; border-radius:6px; object-fit:cover; flex-shrink:0;
  background:linear-gradient(135deg,#efe9e0,#e2d8ca); display:block;
}
.cecela-ai .cai-mini-body{ min-width:0; flex:1; display:block; }
.cecela-ai .cai-mini-title{
  display:block; font-size:12px; font-weight:700; color:var(--sub);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.5;
}
.cecela-ai .cai-mini-meta{ display:block; font-size:11px; color:var(--soft); margin-top:2px; }
.cecela-ai .cai-alllist-note{ font-size:11px; color:var(--faint); margin:10px 0 0; }

/* 入力バー（装飾・実際の送信は上のボタン） */
.cecela-ai .cai-inputbar{display:flex; gap:8px; padding:12px 14px; background:#fff; border-top:1px solid var(--line); align-items:center;}
.cecela-ai .cai-inputbar .cai-fakeinput{flex:1; border:1px solid var(--border); border-radius:999px; padding:10px 14px; font-size:12px; color:var(--faint);}
.cecela-ai .cai-inputbar .cai-send{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; color:#fff; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--teal-l),var(--teal-d)); animation:cai-pulse 2.4s ease infinite;
}

@keyframes cai-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@keyframes cai-spring{0%{opacity:0; transform:translateY(26px) scale(.96);}60%{opacity:1; transform:translateY(-4px) scale(1.01);}100%{opacity:1; transform:translateY(0) scale(1);}}
@keyframes cai-dotb{0%,60%,100%{transform:translateY(0); opacity:.35;}30%{transform:translateY(-5px); opacity:1;}}
@keyframes cai-shine{0%{left:-70%;}32%{left:150%;}100%{left:150%;}}
@keyframes cai-glow{0%,100%{box-shadow:0 6px 16px rgba(69,177,168,.35);}50%{box-shadow:0 8px 28px rgba(69,177,168,.7);}}
@keyframes cai-badge{0%{opacity:0; transform:scale(.4) rotate(-8deg);}70%{opacity:1; transform:scale(1.15) rotate(2deg);}100%{opacity:1; transform:scale(1) rotate(0deg);}}
@keyframes cai-pulse{0%,100%{box-shadow:0 0 0 0 rgba(69,177,168,.4);}50%{box-shadow:0 0 0 9px rgba(69,177,168,0);}}
@media (prefers-reduced-motion: reduce){
  .cecela-ai .cai-submit,.cecela-ai .cai-submit::after,.cecela-ai .cai-send{animation:none;}
}

/* PC: 2カラム（左パネル固定・右チャット） */
@media(min-width:768px){
  .cecela-ai .cai-row{flex-direction:row;}
  .cecela-ai .cai-form{width:300px; border-bottom:0; border-right:1px solid var(--line);}
  .cecela-ai .cai-panel{display:block !important;}
  .cecela-ai .cai-inputbar{display:none;}
}
/* スマホ: 折りたたみ */
@media(max-width:767px){
  .cecela-ai .cai-toggle{display:flex;}
  .cecela-ai .cai-panel{display:none;}
  .cecela-ai .cai-form.is-open .cai-panel{display:block;}
}