:root {
  --ft-green: #123c32;
  --ft-green-2: #0c2c25;
  --ft-gold: #c9a85c;
  --ft-cream: #f7f3e9;
  --ft-ink: #1e2623;
  --ft-muted: #66736d;
  --ft-border: rgba(201,168,92,.35);
}
#ft-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 99990;
  border: 1px solid var(--ft-border); background: var(--ft-green);
  color: white; border-radius: 999px; padding: 12px 16px;
  font: 600 14px/1.2 Georgia, "Times New Roman", serif;
  box-shadow: 0 12px 34px rgba(0,0,0,.22); cursor: pointer;
}
#ft-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;

  width: 86px;
  height: 86px;
  padding: 0;

  border: 2px solid #c9a24a;
  border-radius: 50%;

  background:
    url("assets/tuileur-vs.jpg?v=1")
    center 20% / 170% auto
    no-repeat;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 4px rgba(201,162,74,.12);

  color: transparent;
  font-size: 0;
  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#ft-launcher:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 0 5px rgba(201,162,74,.18);
}

#ft-launcher span {
  display: none;
}
#ft-launcher::after {
  content: "Le Frère Tuileur";
  position: absolute;
  right: 94px;
  top: 50%;
  transform: translateY(-50%);

  white-space: nowrap;

  background: rgba(10, 34, 29, .94);
  color: #ead69d;

  border: 1px solid rgba(201, 162, 74, .55);
  border-radius: 999px;

  padding: 8px 12px;

  font: 600 13px Georgia, serif;

  opacity: 0;
  pointer-events: none;

  transition: opacity .2s ease;
}

#ft-launcher:hover::after {
  opacity: 1;
}
#ft-panel {
  position: fixed; right: 22px; bottom: 78px; z-index: 99999;
  width: min(860px, calc(100vw - 44px)); height: min(640px, calc(100vh - 110px));
  display: none; overflow: hidden; border-radius: 20px;
  background: var(--ft-cream); border: 1px solid var(--ft-border);
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}
#ft-panel.ft-open { display: grid; grid-template-columns: 38% 62%; }
.ft-portrait {
  position: relative; background:
    linear-gradient(180deg, rgba(12,44,37,.08), rgba(12,44,37,.82)),
url("assets/tuileur-vs.jpg?v=1") center/cover no-repeat;
  min-height: 100%;
}
.ft-portrait-copy {
  position: absolute; left: 24px; right: 24px; bottom: 24px; color: white;
}
.ft-portrait-copy strong { display:block; font: 700 22px Georgia,serif; letter-spacing:.04em; }
.ft-portrait-copy small { color: #ead69d; font-size: 13px; }
.ft-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fbfaf6;
}
.ft-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; background:var(--ft-green); color:white;
}
.ft-head-title strong { display:block; font:700 16px Georgia,serif; }
.ft-head-title small { color:#d9c98f; }
.ft-close { border:0; background:transparent; color:white; font-size:24px; cursor:pointer; }
.ft-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ft-messages::-webkit-scrollbar {
  width: 7px;
}

.ft-messages::-webkit-scrollbar-thumb {
  background: rgba(18, 60, 50, 0.28);
  border-radius: 10px;
}

.ft-messages::-webkit-scrollbar-track {
  background: transparent;
}
.ft-msg { max-width:86%; margin:0 0 12px; padding:12px 14px; border-radius:14px; line-height:1.45; white-space:pre-wrap; }
.ft-msg.assistant { background:white; border:1px solid #e6e1d6; color:var(--ft-ink); }
.ft-msg.user { margin-left:auto; background:var(--ft-green); color:white; }
.ft-quick { display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 12px; }
.ft-quick button {
  border:1px solid var(--ft-border); background:#fff; color:var(--ft-green);
  border-radius:999px; padding:8px 10px; cursor:pointer; font-size:12px;
}
.ft-form { display:flex; gap:8px; padding:14px 16px 16px; border-top:1px solid #e9e3d7; }
.ft-input {
  flex:1; border:1px solid #d8d0c0; background:white; border-radius:12px;
  padding:12px 13px; font:14px Arial,sans-serif; outline:none;
}
.ft-send {
  border:0; border-radius:12px; background:var(--ft-green); color:white;
  padding:0 16px; cursor:pointer; font-weight:700;
}
.ft-status { padding:0 18px 10px; color:var(--ft-muted); font:12px Arial,sans-serif; min-height:14px; }

@media (max-width: 720px) {
  #ft-launcher { right:14px; bottom:14px; }
  #ft-panel { left:0; right:0; bottom:0; width:100vw; height:92vh; border-radius:18px 18px 0 0; }
  #ft-panel.ft-open { grid-template-columns:1fr; grid-template-rows:150px 1fr; }
  .ft-portrait { min-height:150px; background-position:center 20%; }
  .ft-portrait-copy { left:18px; bottom:14px; }
  .ft-portrait-copy strong { font-size:18px; }
}
.ft-msg a { color:#1c4a3d; font-weight:600; word-break:break-all; }