:root{
  --bg:#060507;
  --sidebar:#09090b;
  --panel:#18181a;
  --panel-2:#1b1b1e;
  --line:#1b1b1f;
  --line2:#18181b;
  --hover:#121214;
  --muted:#8a8a91;
  --text:#ededf0;
  --soft:#b7b7bd;
  --purple:#f472b6;
  --purple-2:#ec4899;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  letter-spacing:-.01em;
}

button,input,textarea{font:inherit}
button{border:0;background:none;color:inherit}
svg{display:block}

.app{
  width:100vw;
  height:100vh;
  min-width:960px;
  display:flex;
  background:#060507;
}

/* ------------------------------------------------ Sidebar */
.sidebar{
  width:280px;
  height:100vh;
  flex:0 0 280px;
  background:#09090b;
  border-right:1px solid #18181b;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:0 10px;
}

.brand-row{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
}
.brand{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.03em;
  color:#ededed;
}
.top-actions{display:flex;gap:16px;align-items:center;color:#77777d}
.icon-btn{
  width:20px;height:20px;
  display:grid;place-items:center;
  padding:0;
  cursor:pointer;
}
.icon-btn:hover{color:#bdbdc3}

.new-chat{
  height:50px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 10px;
  color:#8f8f95;
  border-radius:9px;
  cursor:pointer;
}
.new-chat:hover{background:#121214;color:#d2d2d6}
.plus{font-size:21px;line-height:1;font-weight:300;color:#b8b8bd}
.new-chat span:last-child{font-size:14.5px}

.usage{
  height:38px;
  margin:1px 0 16px;
  border-radius:9px;
  background:#0a0a0d;
  border:1px solid #24242b;
  color:#f472b6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
}
.usage.low{color:#f87171;border-color:#3a2220}

.nav{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.nav-item{
  height:34px;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 8px;
  color:#88888e;
  cursor:pointer;
  user-select:none;
}
.nav-item:hover{background:#121214;color:#c8c8cd}
.nav-item .ico{width:16px;height:16px;color:inherit;display:grid;place-items:center}
.nav-item span{font-size:14px}

.section-label{
  margin:18px 5px 8px;
  color:#66666c;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
}

.recent{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.recent-head{
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5px;
}
.recent-title{
  color:#66666c;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.filter{
  color:#77777d;
  width:16px;height:16px;
  display:grid;place-items:center;
  cursor:pointer;
}
.filter:hover{color:#c5c5c9}

.search-box{
  height:32px;
  margin:0 5px 8px;
  padding:0 10px;
  border:1px solid #222226;
  border-radius:8px;
  background:#0d0d10;
  color:#e9e9eb;
  outline:none;
  font-size:13.5px;
}
.search-box::placeholder{color:#66666c}
.search-box:focus{border-color:#33333a}

/* Liste des conversations */
.chat-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.conv{
  height:38px;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 7px;
  color:#88888e;
  cursor:pointer;
}
.conv:hover{background:#121214;color:#c8c8cd}
.conv.active{background:#121214;color:#e2e2e5}
.conv .conv-ico{width:15px;height:15px;flex-shrink:0;display:grid;place-items:center;color:#6f6f76}
.conv-title{
  flex:1;
  min-width:0;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conv-delete{
  flex-shrink:0;
  width:20px;height:20px;
  display:grid;place-items:center;
  color:#66666c;
  border-radius:5px;
  font-size:12px;
  cursor:pointer;
  opacity:0;
}
.conv:hover .conv-delete{opacity:1}
.conv-delete:hover{color:#f87171;background:#1f0d0f}
.empty{
  color:#444449;
  font-size:12px;
  padding:3px 5px;
}

/* ------------------------------------------------ Main */
.main{
  flex:1;
  min-width:0;
  height:100vh;
  position:relative;
  background:#060507;
}

.hero{
  position:absolute;
  left:50%;
  top:250px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:17px;
  white-space:nowrap;
}

.hero h1{
  margin:0;
  font-size:44px;
  line-height:52px;
  font-weight:700;
  letter-spacing:-.045em;
  color:#efeff1;
}
.hero h1 .accent{color:#f472b6}

.composer{
  position:absolute;
  width:660px;
  height:130px;
  left:50%;
  top:348px;
  transform:translateX(-50%);
  border:1px solid #28282c;
  border-radius:16px;
  background:#18181a;
  box-shadow:0 8px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.015) inset;
  overflow:hidden;
}

.message{
  width:100%;
  height:78px;
  resize:none;
  outline:none;
  border:0;
  background:transparent;
  color:#e9e9eb;
  padding:18px 17px 12px;
  line-height:24px;
  font-size:15px;
}
.message::placeholder{color:#74747a;opacity:1}

.toolbar{
  height:50px;
  display:flex;
  align-items:center;
  padding:0 14px;
  color:#808086;
}

.send{
  margin-left:auto;
  width:36px;height:36px;
  border-radius:9px;
  display:grid;place-items:center;
  color:#727278;
  cursor:pointer;
}
.send:hover{background:#242428;color:#d4d4d7}
.send.active{color:#f472b6;background:#2a1523}
.send:disabled{opacity:.4;cursor:default}

.plan{
  position:absolute;
  left:50%;
  top:492px;
  transform:translateX(-50%);
  color:#74747b;
  font-size:13px;
  white-space:nowrap;
}
.plan a{
  color:#f472b6;
  text-decoration:none;
  cursor:pointer;
}
.plan a:hover{text-decoration:underline}

.disclaimer{
  position:absolute;
  left:50%;
  top:518px;
  transform:translateX(-50%);
  color:#4e4e54;
  font-size:11px;
  white-space:nowrap;
}

/* ------------------------------------------------ Vue conversation */
.conversation{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
}
body.show-chat .conversation{display:flex}
body.show-chat .hero,
body.show-chat .composer,
body.show-chat .plan,
body.show-chat .disclaimer{display:none}

.msg-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  scroll-behavior:smooth;
}
.messages-inner{
  max-width:1000px;
  margin:0 auto;
  padding:40px 34px 20px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.msg.user{display:flex;justify-content:flex-end}
.msg.user .msg-bubble{
  max-width:88%;
  background:var(--panel);
  border:1px solid #28282c;
  border-radius:16px;
  padding:13px 17px;
  font-size:15.5px;
  line-height:24px;
  color:#e9e9eb;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}
.msg.ai{
  max-width:94%;
  color:#e9e9eb;
  font-size:15.5px;
  font-weight:600;
  line-height:24px;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}
.msg.ai code{
  font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size:13.5px;
  font-weight:400;
  background:#101014;
  border:1px solid #26262b;
  border-radius:6px;
  padding:1px 6px;
}
.msg.ai pre{
  margin:8px 0;
  background:#0d0d10;
  border:1px solid #26262b;
  border-radius:12px;
  padding:14px 16px;
  overflow-x:auto;
}
.msg.ai pre code{
  background:none;
  border:0;
  padding:0;
  font-size:14px;
  line-height:22px;
  font-weight:400;
}
.msg.ai strong{font-weight:800;color:#f2f2f5}
.msg.ai em{color:#c8c8cd}

.msg{animation:msgIn .3s ease-out}
@keyframes msgIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.thinking-row{
  display:flex;
  align-items:center;
  gap:12px;
  color:#77777d;
  font-size:14px;
  padding:6px 2px;
}
.logo-ring{
  position:relative;
  width:34px;height:34px;
  flex-shrink:0;
  display:grid;place-items:center;
}
.logo-ring img{
  width:22px;height:22px;
  border-radius:50%;
  object-fit:cover;
}
.logo-ring .ring{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(244,114,182,.22);
  border-top-color:#f472b6;
  border-right-color:#f9a8d4;
  animation:spin .85s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes letterDrop{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

.caret{
  display:inline-block;
  width:2px;
  height:1.05em;
  background:#f472b6;
  vertical-align:text-bottom;
  margin-left:2px;
  border-radius:1px;
  animation:blink 1s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

.msg-empty{
  margin-top:14vh;
  text-align:center;
  color:#4e4e54;
  font-size:14px;
  letter-spacing:.02em;
}

.chat-composer{
  width:min(700px, calc(100% - 48px));
  margin:0 auto 18px;
  border:1px solid #28282c;
  border-radius:16px;
  background:#18181a;
  box-shadow:0 8px 28px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.015) inset;
  overflow:hidden;
}
.chat-composer .message{height:auto;min-height:66px;max-height:200px;padding:16px 17px 8px}

/* ------------------------------------------------ Panneau Projets */
.projects-panel{
  position:absolute;
  left:50%;
  top:50px;
  width:400px;
  max-height:min(520px, calc(100vh - 90px));
  background:#0e0e12;
  border:1px solid #28282c;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
  z-index:20;
}
.projects-panel:not([hidden]){
  display:flex;
  flex-direction:column;
  transform:translateX(-50%);
  animation:projectsIn .18s ease-out;
}
@keyframes projectsIn{
  from{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.98)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
.projects-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 16px 12px;
  border-bottom:1px solid #1f1f24;
}
.projects-title{
  font-size:14px;
  font-weight:700;
  letter-spacing:-.02em;
  color:#e9e9eb;
}
.projects-count{
  font-size:10px;
  font-weight:600;
  padding:3px 8px;
  border-radius:20px;
  background:#17171c;
  border:1px solid #26262b;
  color:#8a8a91;
}
.projects-close{
  margin-left:auto;
  width:22px;height:22px;
  display:grid;place-items:center;
  color:#66666c;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
}
.projects-close:hover{color:#d4d4d7;background:#17171b}
.projects-new{
  padding:12px 14px;
  border-bottom:1px solid #1f1f24;
  display:flex;
  gap:8px;
}
.projects-input{
  flex:1;
  min-width:0;
  height:36px;
  padding:0 12px;
  border:1px solid #26262b;
  border-radius:9px;
  background:#0a0a0d;
  color:#e9e9eb;
  outline:none;
  font-size:13px;
}
.projects-input::placeholder{color:#55555c}
.projects-input:focus{border-color:#f472b6;box-shadow:0 0 0 2px rgba(244,114,182,.15)}
.projects-create{
  height:36px;
  padding:0 16px;
  border-radius:9px;
  background:linear-gradient(90deg,#ec4899 0%,#f472b6 100%);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
}
.projects-create:hover{filter:brightness(1.1)}
.projects-create:disabled{opacity:.45;cursor:default}
.projects-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:7px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.project-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 11px;
  border-radius:10px;
  cursor:pointer;
  border:1px solid transparent;
}
.project-row:hover{background:#121214}
.project-row.active{background:#2a1523;border-color:rgba(244,114,182,.25)}
.project-ico{
  width:30px;height:30px;
  flex-shrink:0;
  display:grid;place-items:center;
  border-radius:8px;
  background:#141419;
  border:1px solid #24242b;
  color:#f472b6;
}
.project-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.project-name{
  font-size:13px;
  font-weight:600;
  color:#dcdce0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.project-meta{
  font-size:10.5px;
  color:#6b6b73;
}
.project-del{
  flex-shrink:0;
  width:22px;height:22px;
  display:grid;place-items:center;
  color:#66666c;
  border-radius:6px;
  font-size:11px;
  cursor:pointer;
  opacity:0;
}
.project-row:hover .project-del{opacity:1}
.project-del:hover{color:#f87171;background:#1f0d0f}
.projects-foot{
  padding:10px 16px;
  color:#55555c;
  font-size:10.5px;
  border-top:1px solid #1f1f24;
}

/* ------------------------------------------------ Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  z-index:99;
  background:#18181a;
  border:1px solid #2c2c33;
  border-radius:11px;
  color:#e9e9eb;
  font-size:14px;
  padding:12px 20px;
  box-shadow:0 10px 34px rgba(0,0,0,.4);
  max-width:80vw;
}
.toast.error{color:#f2b8b0;border-color:#4a2620;background:#1c1110}

/* Scrollbars */
.chat-list::-webkit-scrollbar,.msg-scroll::-webkit-scrollbar{width:6px}
.chat-list::-webkit-scrollbar-thumb,.msg-scroll::-webkit-scrollbar-thumb{background:#232329;border-radius:3px}
.chat-list::-webkit-scrollbar-track,.msg-scroll::-webkit-scrollbar-track{background:transparent}

/* ------------------------------- Responsive (référence) */
@media (max-width:1100px){
  .sidebar{width:262px;flex-basis:262px}
  .composer{width:min(660px,calc(100vw - 360px))}
  .messages-inner{max-width:880px}
}

@media (max-height:650px){
  .hero{top:180px}
  .composer{top:262px}
  .plan{top:392px}
  .disclaimer{top:414px}
}