@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-lg:32rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.25;--leading-relaxed:1.625;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:#ff714a;--color-body:#f5f5f5;--color-text:#666;--color-heading:#333}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}html{scroll-behavior:smooth}body{color:var(--color-text);background-color:var(--color-body);font-family:Plus Jakarta Sans,Helvetica,sans-serif;font-size:14px;font-weight:400;line-height:1.85em}h1,h2,h3,h4,h5,h6{color:var(--color-heading);font-weight:600;line-height:1.5em}a{color:var(--color-primary);text-decoration:none;transition:all .3s ease-in-out}a:hover{color:#ff9800}}.card-stack{z-index:0;position:relative}.card-stack a{height:100%}.card-stack:nth-child(8n+1)>div,.card-stack:nth-child(8n+1) a{border:1px solid #ff2d20}.card-stack:nth-child(8n+2)>div,.card-stack:nth-child(8n+2) a{border:1px solid #393}.card-stack:nth-child(8n+3)>div,.card-stack:nth-child(8n+3) a{border:1px solid #00acd7}.card-stack:nth-child(8n+4)>div,.card-stack:nth-child(8n+4) a{border:1px solid #f90}.card-stack:nth-child(8n+5)>div,.card-stack:nth-child(8n+5) a{border:1px solid #96bf48}.card-stack:nth-child(8n+6)>div,.card-stack:nth-child(8n+6) a{border:1px solid #61dafb}.card-stack:nth-child(8n+7)>div,.card-stack:nth-child(8n+7) a{border:1px solid #21759b}.card-stack:nth-child(8n+8)>div,.card-stack:nth-child(8n+8) a{border:1px solid #42b883}.card-stack:after{content:"";z-index:-1;width:100%;height:100%;position:absolute;top:10px;right:10px}.card-stack:nth-child(8n+1):after{background:var(--svg-red);border:1px solid #ff2d20}.card-stack:nth-child(8n+2):after{background:var(--svg-green);border:1px solid #393}.card-stack:nth-child(8n+3):after{background:var(--svg-cyan);border:1px solid #00acd7}.card-stack:nth-child(8n+4):after{background:var(--svg-orange);border:1px solid #f90}.card-stack:nth-child(8n+5):after{background:var(--svg-shopify);border:1px solid #96bf48}.card-stack:nth-child(8n+6):after{background:var(--svg-react);border:1px solid #61dafb}.card-stack:nth-child(8n+7):after{background:var(--svg-blue);border:1px solid #21759b}.card-stack:nth-child(8n+8):after{background:var(--svg-vue);border:1px solid #42b883}.card-stack.--card-stack-top:after{top:-10px;right:-10px}.tag-lists>*{font-size:var(--text-xs);border-style:solid;border-width:1px;padding:0 6px}.tag-lists>:nth-child(8n+1){color:#ff2d20;border-color:#ff2d20}.tag-lists>:nth-child(8n+2){color:#393;border-color:#393}.tag-lists>:nth-child(8n+3){color:#00acd7;border-color:#00acd7}.tag-lists>:nth-child(8n+4){color:#f90;border-color:#f90}.tag-lists>:nth-child(8n+5){color:#96bf48;border-color:#96bf48}.tag-lists>:nth-child(8n+6){color:#61dafb;border-color:#61dafb}.tag-lists>:nth-child(8n+7){color:#21759b;border-color:#21759b}.tag-lists>:nth-child(8n+8){color:#42b883;border-color:#42b883}
html, body { height: 100%; }
  body { background: #f5f5f5; overflow: hidden; }

  .eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: #999;
  }

  /* ---- App shell ---- */
  .app { height: 100vh; display: flex; flex-direction: column; }

  .topbar {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 14px 22px; background: #fff; border-bottom: 1px solid #ececec;
  }
  .brand { display: flex; align-items: center; gap: 12px; }
  .monogram {
    width: 38px; height: 38px; flex: none; background: #000; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  }
  .brand-name { font-size: 15px; font-weight: 600; color: #000; line-height: 1.2; }
  .brand-sub  { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
                text-transform: uppercase; color: #aaa; margin-top: 2px; }
  .status { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono);
            font-size: 11px; letter-spacing: .06em; color: #888; }
  .dot-live { width: 7px; height: 7px; border-radius: 50%; background: #339933;
              box-shadow: 0 0 0 0 rgba(51,153,51,.5); animation: pulse 2.4s infinite; }
  @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(51,153,51,.45);} 70%{box-shadow:0 0 0 6px rgba(51,153,51,0);} 100%{box-shadow:0 0 0 0 rgba(51,153,51,0);} }
  .reset {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: #999;
    border: 1px solid #e2e2e2; background: #fff; padding: 7px 12px; cursor: pointer;
    transition: all .15s ease;
  }
  .reset:hover { color: #ff2d20; border-color: #ffc7bf; }

  /* ---- Workspace: chat + sidebar ---- */
  .workspace { flex: 1; display: flex; min-height: 0; }
  .chat-col { flex: 0 0 40%; max-width: 620px; min-width: 340px; display: flex; flex-direction: column; min-height: 0; }

  .thread { flex: 1; overflow-y: auto; padding: 30px 22px 12px; scroll-behavior: smooth; }
  .thread-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

  /* ---- Messages ---- */
  .msg { display: flex; flex-direction: column; gap: 7px; }
  body.anim .msg { animation: msgIn .4s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .msg .who { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
              text-transform: uppercase; color: #aaa; display: flex; align-items: center; gap: 8px; }
  .msg .who .tick { width: 14px; height: 1px; background: #ddd; }

  .msg.assistant { align-items: flex-start; }
  .bubble-ai {
    background: #fff; border: 1px solid #ececec; padding: 16px 18px; max-width: 88%;
    font-size: 15px; line-height: 1.72; color: #333; border-radius: 3px;
  }
  .bubble-ai b { color: #000; font-weight: 600; }

  .msg.user { align-items: flex-end; }
  .msg.user .who { color: #bbb; flex-direction: row-reverse; }
  .bubble-user {
    background: #000; color: #f3f3f3; padding: 13px 17px; max-width: 80%;
    font-size: 15px; line-height: 1.6; border-radius: 3px;
  }

  /* typing */
  .typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; }
  .typing span { width: 6px; height: 6px; border-radius: 50%; background: #c4c4c4; animation: bob 1.1s infinite ease-in-out; }
  .typing span:nth-child(2){ animation-delay: .16s; } .typing span:nth-child(3){ animation-delay: .32s; }
  @keyframes bob { 0%,80%,100%{ transform: translateY(0); opacity:.5; } 40%{ transform: translateY(-5px); opacity:1; } }

  /* ---- Composer ---- */
  .composer { flex: none; background: #fff; border-top: 1px solid #ececec; padding: 14px 22px 18px; }
  .composer-inner { max-width: 760px; margin: 0 auto; }

  .chips-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .chips-label { flex: none; }
  .chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .chips-scroll::-webkit-scrollbar { height: 4px; } .chips-scroll::-webkit-scrollbar-thumb { background:#e2e2e2; }
  .chip {
    flex: none; white-space: nowrap; font-size: 13px; color: #444; background: #fafafa;
    border: 1px solid #e6e6e6; padding: 7px 13px; cursor: pointer; border-radius: 999px;
    transition: all .14s ease; display: inline-flex; align-items: center; gap: 7px;
  }
  .chip:hover { border-color: #ffb9aa; color: #d63a1a; background: #fff; transform: translateY(-1px); }
  .chip .plus { font-family: var(--font-mono); color: #c9c9c9; font-size: 13px; }
  .chip:hover .plus { color: #ff714a; }

  .input-wrap {
    display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; background: #fff;
    padding: 8px 8px 8px 16px; border-radius: 4px; transition: border-color .15s ease;
  }
  .input-wrap:focus-within { border-color: #000; }
  textarea#input {
    flex: 1; border: 0; outline: 0; resize: none; font-family: inherit; font-size: 15px;
    line-height: 1.5; color: #222; background: transparent; max-height: 140px; padding: 6px 0;
  }
  textarea#input::placeholder { color: #b3b3b3; }
  .send {
    flex: none; width: 40px; height: 40px; background: #000; color: #fff; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; border-radius: 3px; transition: all .15s ease;
  }
  .send:hover { background: #ff2d20; }
  .send:disabled { background: #d8d8d8; cursor: default; }
  .send svg { width: 18px; height: 18px; }

  /* ---- Sidebar ---- */
  .sidebar { flex: 1 1 60%; min-width: 0; background: #f5f5f5; border-left: 1px solid #ececec;
             display: flex; flex-direction: column; min-height: 0; }
  .sidebar-head { flex: none; padding: 20px 22px 14px; border-bottom: 1px solid #ececec; background:#fafafa; }
  .sidebar-head h3 { font-size: 14px; font-weight: 600; color: #000; margin-top: 6px; }
  .rec-count { font-family: var(--font-mono); font-size: 11px; color: #00839e; }
  .sidebar-body { flex: 1; overflow-y: auto; padding: 22px 22px 28px; }
  .rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  @media (max-width: 1180px) { .rec-grid { grid-template-columns: minmax(0, 1fr); } }

  /* villa card lives inside the system's .card-stack (auto-cycles border colour) */
  .villa-inner { background: #fff; }
  .villa-photo {
    aspect-ratio: 16 / 9; max-height: 190px; border-bottom: 1px solid #eee; position: relative;
    background: repeating-linear-gradient(135deg,#f4f4f4 0 9px,#fbfbfb 9px 18px);
    display: flex; align-items: center; justify-content: center; width: 100%;
  }
  .ph-cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #b0b0b0; }
  .ph-tag { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 8.5px;
            letter-spacing: .12em; color: #c4c4c4; border: 1px solid #ececec; background:#fff; padding: 2px 6px; }
  .villa-body { padding: 15px 16px 17px; }
  .villa-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .villa-name { font-size: 15px; font-weight: 600; color: #000; flex: 1; min-width: 0; }
  .villa-price { font-family: var(--font-mono); font-size: 14px; color: #000; white-space: nowrap; flex: none; }
  .villa-price small { color: #aaa; font-size: 10px; }
  .villa-loc { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: #999;
               text-transform: uppercase; margin-top: 4px; }
  .villa-meta { font-size: 12.5px; color: #777; margin-top: 9px; }
  .villa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
  .villa-why { margin-top: 13px; padding-top: 12px; border-top: 1px solid #f0f0f0; font-size: 13px;
               line-height: 1.55; color: #444; display: flex; gap: 8px; }
  .villa-why .wl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: #00839e;
                   border: 1px solid #bfe9f3; background: #e8f7fb; padding: 2px 5px; height: fit-content; white-space: nowrap; }
  /* concierge block inside each villa card */
  .conc-block { margin-top: 14px; padding-top: 13px; border-top: 1px solid #f0f0f0; }
  .conc-label { display: block; margin-bottom: 9px; }
  .conc-list { display: flex; flex-wrap: wrap; gap: 7px; }
  .conc-chip { display: flex; align-items: center; gap: 8px; border: 1px solid #e6e6e6; background: #fff;
               padding: 5px 11px 5px 5px; cursor: pointer; border-radius: 999px; transition: all .14s ease; }
  .conc-chip:hover { border-color: #c4c4c4; }
  .conc-chip.sel { border-color: #000; background: #000; }
  .conc-chip.sel .conc-name { color: #fff; } .conc-chip.sel .conc-role { color: #aaa; }
  .conc-chip.sel .conc-av { background: #fff; color: #000; }
  .conc-av { width: 26px; height: 26px; border-radius: 50%; background: #f0f0f0; color: #555; flex: none;
             display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
             font-size: 11px; font-weight: 700; }
  .conc-meta { display: flex; flex-direction: column; line-height: 1.2; }
  .conc-name { font-size: 12.5px; font-weight: 600; color: #000; }
  .conc-role { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: #999; margin-top: 1px; }
  .book-btn { margin-top: 13px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
              background: #fff; border: 1px solid #000; color: #000; font-family: inherit; font-size: 13px; font-weight: 600;
              padding: 11px; cursor: pointer; transition: all .15s ease; }
  .book-btn:hover { background: #000; color: #fff; }
  .book-btn .arr { transition: transform .15s ease; } .book-btn:hover .arr { transform: translateX(3px); }
  .booked { margin-top: 13px; display: flex; gap: 9px; background: #f6fbf6; border: 1px solid #cfe9cf;
            color: #2c7a2c; font-size: 12.5px; line-height: 1.5; padding: 12px 13px; }
  .booked b { color: #1f5e1f; font-weight: 700; }

  /* sidebar empty state */
  .rec-empty { text-align: center; padding: 40px 18px; color: #aaa; }
  .rec-empty .glyph { width: 46px; height: 46px; border: 1px dashed #d4d4d4; margin: 0 auto 16px;
                      display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
                      color: #c4c4c4; font-size: 18px; }
  .rec-empty p { font-size: 13px; line-height: 1.6; max-width: 24ch; margin: 0 auto; }
  .rec-empty .mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
                     color: #c4c4c4; margin-top: 14px; }

  .stagger { }
  body.anim .stagger { animation: msgIn .45s cubic-bezier(.2,.7,.3,1) both; }

  @media (max-width: 880px) {
    body { overflow: auto; }
    .app { height: auto; min-height: 100vh; }
    .workspace { flex-direction: column; }
    .chat-col { flex: auto; width: 100%; max-width: none; min-width: 0; }
    .sidebar { flex: auto; border-left: 0; border-top: 1px solid #ececec; }
    .thread { min-height: 50vh; }
  }