/* ===========================
   AÏSHA — Luxe Chat Styling
   =========================== */

/* ----- Theme tokens ----- */
:root{
  --cream: #fbf7f2;
  --cream-2: #fffdfa;
  --sand: #efe7df;
  --sand-2:#e9dfd6;
  --ink: #1d140e;
  --cocoa: #3b291b;
  --accent: #4a3520;
  --brown: #5a3e2b;
  --brown-dark: #332211;
  --shadow: 0 20px 60px rgba(0,0,0,.08);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --red: #e03c31;
}

/* Reset-ish */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--cocoa);
  background:
    radial-gradient(1200px 600px at -10% -10%, #f3e8dd 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% -20%, #f0e5da 0%, transparent 60%),
    radial-gradient(900px 480px at 50% 120%, #f7eee6 0%, transparent 70%),
    var(--cream);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Inter", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

/* Load the fancy serif (only used for the main H1) */
@font-face{
  font-family:"Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Playfair Display Bold"),
       url("https://fonts.gstatic.com/s/playfairdisplay/v30/nuFvD-vYSZviVYUb_rj3ij__anPXDTzYh8lq.woff2") format("woff2");
}

/* ----- Header (kept minimal) ----- */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(6px);
  background:color-mix(in oklab, var(--cream) 80%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--sand) 60%, transparent);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.logo{ 
  font: 700 32px/1 "Playfair Display", serif; 
  letter-spacing:.5px; color:var(--ink); 
  background:none; border:0; cursor:pointer;
}
nav ul{ list-style:none; display:flex; gap:20px; margin:0; padding:0 }
nav a{ text-decoration:none; color:var(--cocoa); opacity:.86 }
nav a:hover{ opacity:1 }

.signup {
  background-color: var(--brown-dark);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
}

/* ----- Shell card ----- */
.aisha-section{
  max-width: 1060px;
  margin: 56px auto;
  padding: clamp(18px, 2vw, 24px);
  background: linear-gradient(180deg, var(--cream-2), var(--sand));
  border: 1px solid color-mix(in oklab, var(--sand) 70%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

/* Header area */
.aisha-header{
  text-align:center;
  padding: clamp(18px, 3vw, 30px) 2vw 8px;
}
.aisha-header h1{
  margin:0 0 8px 0;
  font: 700 clamp(36px, 5.2vw, 56px)/1 "Playfair Display", serif;
  color: var(--ink);
  letter-spacing:.3px;
}
.aisha-header p{
  margin:0;
  font-size: clamp(15px, 1.4vw, 18px);
  color: color-mix(in oklab, var(--cocoa) 75%, black 0%);
  opacity:.85;
}

/* Chat board */
.aisha-chat p {
  margin: 0 0 10px 0;
}

/* Chat board: stack messages vertically */
.aisha-chat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* User bubble (right) */
.user-bubble {
  background: var(--accent);
  color: #fff;
  border: 1px solid color-mix(in oklab, var(--accent) 85%, black 0%);
  border-top-right-radius: 6px;
  box-shadow: 0 10px 24px rgba(74,53,32,.18);
  text-align: right;
  align-self: flex-end;
  margin-left: auto; /* Pushes bubble all the way right */
  max-width: min(72ch, 92%);
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
  width: fit-content;
}

/* AI bubble (left) */
.ai-bubble {
  background: #fff;
  color: var(--cocoa);
  border: 1px solid color-mix(in oklab, var(--sand-2) 85%, transparent);
  border-top-left-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  text-align: left;
  align-self: flex-start;
  margin-right: auto; /* Pushes bubble all the way left */
  max-width: min(72ch, 92%);
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
  width: fit-content;
}


/* Subtle list styling inside AI messages */
.ai-bubble ul{ margin: 8px 0 0 18px }
.ai-bubble li{ margin: 4px 0 }

/* Input bar */
.aisha-input{
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fffefc, #f5efe8);
  border: 1px solid color-mix(in oklab, var(--sand) 70%, transparent);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.aisha-input input{
  flex:1;
  min-width: 0;
  border:0; outline:0; background:transparent;
  padding: 12px 4px 12px 14px;
  font-size: 16px;
  color: var(--cocoa);
}
.aisha-input input::placeholder{ color: color-mix(in oklab, var(--cocoa) 60%, white 0%) }

.aisha-input button{
  width:44px; height:44px; border-radius:50%;
  border: 1px solid color-mix(in oklab, var(--accent) 60%, black 0%);
  background: var(--accent);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .08s ease, opacity .15s ease;
}
.aisha-input button:hover{ transform: translateY(-1px) }
.aisha-input button svg{ stroke:#fff }

/* Dropdowns (kept from your build) */
.dropdown-menu{
  display:none;
  position:absolute; top:100%; left:0;
  min-width: 120px; padding:8px 6px;
  background:#fff;
  border:1px solid color-mix(in oklab, var(--sand) 70%, transparent);
  border-radius:10px;
  box-shadow: var(--shadow);
  z-index: 20;
}
nav li:hover .dropdown-menu{ display:block }
.dropdown-menu li{ padding:6px 10px }

/* Layout helpers & responsive tidy-up */
.container{ padding: 0 20px }

@media (max-width: 960px){
  .aisha-section{ margin: 36px 16px }
  .aisha-chat{ max-height: 58vh }
}
@media (max-width: 560px){
  header{ padding:12px 16px }
  .aisha-section{ margin: 24px 12px; border-radius: 18px }
  .aisha-input{ padding: 8px 10px }
  .aisha-input button{ width:42px; height:42px }
  .user-bubble, .ai-bubble{ max-width: 100% }
}