:root{
    --glass-bg: rgba(13, 20, 36, 0.45);
    --glass-bg-2: rgba(13, 20, 36, 0.65);
    --stroke: rgba(148, 163, 184, 0.25);
    --highlight: rgba(255,255,255,0.06);
    --accent10: #22c55e;
    --accent-20:#16a34a;
    --muted: #94a3b8;
    --text: #e5e7eb;
    --danger: #ef4444;
  }

  /* Frosted glass container */
  .ai_chat_composer{
    position: relative;
    display:flex; flex-direction:column; gap:8px;
    padding:12px; width:min(940px, 100%);
    border-radius:18px;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  }
  /* .ai_chat_composer:hover{ transform: translateY(-1px); } */
  .ai_chat_composer:focus-within{
    border: 1px solid rgb(255 255 255 / 20%);
    box-shadow: 0 8px 30px rgb(255 255 255 / 35%), inset 0 1px 0 var(--highlight), 0 0 0 1px rgb(255 255 255 / 18%);
    max-width: 90vw;
  }

  /* Email pill */
  .ai_chat_email_row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
  .ai_chat_email_pill{
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    background-color: transparent;
    font-size: 14px;
    color: #cbd5e1;
    width: calc(100% - 240px);
    gap: 4px;
  }
  .ai_chat_email_icon{ width:16px; height:16px; opacity:.9; color: var(--color-light);}
  .ai_chat_email_pill input{
    background:transparent; border: 0; outline:0; color: white!important; padding: 0; font-size: 15px;
  }
  .ai_chat_email_pill input::placeholder{ color: var(--color-light); }

  /* Invalid style */
  .ai_chat_email_pill:has(input:invalid){ background-color: transparent; border-color: rgba(255, 255, 255, 0.1); }
  .ai_chat_error{
    font-size: 12px;
    color: #fe3769;
    min-height: 16px;
    text-align: right;
    margin-left: auto;
    margin-right: 10px;
    font-weight: 500;
  }

  /* Message box (contenteditable) */
  .ai_chat_message{
    min-height: 36px;
    max-height: 300px;
    overflow: auto;
    line-height: 22px;
    font-size: 15px;
    color: white;
    outline: none;
    padding: 8px 10px;
    width: 100%;
    border-radius: 20px;
    border: none;
    background-color: transparent;
    white-space: pre-wrap;
    word-break: break-word;
    transition: border-color .15s 
ease, box-shadow .15s 
ease;
outline: none;
  }
  /* .ai_chat_message:focus{     border-color: rgb(255 255 255 / 40%);
    box-shadow: 0 0 0 2px rgb(255 255 255 / 18%); } */
  .ai_chat_message:empty::before{
    content: attr(data-placeholder);
    color: var(--color-light); pointer-events:none;
  }
  /* Scrollbar polish */
  .ai_chat_message::-webkit-scrollbar{ width:4px; }
  .ai_chat_message::-webkit-scrollbar-track{ background:transparent; }
  .ai_chat_message::-webkit-scrollbar-thumb{ background: white; border-radius:8px; }

  /* Helper text under the form */
  .ai_chat_helper{
    display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    font-size:12px; color: #cbd5e1;
    padding: 0 10px;
  }
  .ai_chat_helper small{ color: white; }

  /* Button */
  .ai_chat_send{
    align-self: stretch;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius:30px; padding:6px 12px; font-weight:600; letter-spacing:.2px; color:black; cursor:pointer;
    transition: background .15s ease, transform .05s ease, filter .15s ease, opacity .15s ease;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    background: linear-gradient(110deg, white 0%, white 40%, #e7e7e7 30%, white 55%, white 100%);
    background-size: 200% 100%;
    font-size: 13px;
    animation: skeletonIdleShimmer 2.5s 
linear infinite;
    transition: all 0.2s 
ease-in-out;
margin-left: auto;
margin-bottom: 6px;
margin-right: 6px;
  }
  .ai_chat_send_icon {
    font-size: 18px;
  }
  .ai_chat_send:hover{ }
  .ai_chat_send:active{ transform: translateY(1px); }
  .ai_chat_send:disabled{ opacity:.1; cursor:not-allowed; animation: none;}

  .ai_chat_btn_icon{ width:18px; height:18px; }
  .ai_chat_spinner{
    width:16px; height:16px; border:2px solid rgba(255,255,255,.5);
    border-top-color:#fff; border-radius:50%;
    animation: spin 0.8s linear infinite; display:none;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  /* Loading state */
  .ai_chat_send.ai_chat_loading .ai_chat_btn_label{ display:none; }
  .ai_chat_send.ai_chat_loading .ai_chat_spinner{ display:inline-block; }


  .ai_chat_input_wrapper {
    background-color: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.2);
  }

  .ai_chat_input_wrapper:focus {
    border-color: rgb(255 255 255 / 40%);
    box-shadow: 0 0 0 2px rgb(255 255 255 / 18%);
  }

  .ai_chat_email_label {
    color: rgba(255,255,255,0.5);
  }

  input:-webkit-autofill {
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    -webkit-text-fill-color: inherit !important; /* keeps text color */
    transition: background-color 5000s ease-in-out 0s; /* hack to suppress flash */
    -webkit-text-fill-color: white !important;
  }

  .prompt-box{
    width:min(760px, 92vw);
    min-height:56px;
    padding: 14px 24px;
    border-radius: 100px;
    /* background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.15)); */
    background-color: rgba(255, 255, 255, 0);
    border: none;
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    display:flex; align-items:center;
    white-space: pre-wrap; word-break: break-word;
    font: 500 15px/1.2;
    border: 1px solid rgba(255,255,255,0.1);
  }

  #typed {
    display: block;          /* or inline-block */
    white-space: nowrap;     /* never wrap */
    overflow: hidden;        /* clip overflow */
    /* optional: give it a width so truncation is predictable */
    /* width: 100%; */
  }

  .typed{ display:inline; font-weight:600;
  color: white;}
  .caret{
    width:6px; height:1.2em; margin-left:2px;
    background: currentColor; opacity:.8; display:inline-block; transform: translateY(2px);
    animation: caretBlink 1s steps(1,end) infinite;
    background-color: white;
  }
  @keyframes caretBlink{ 50% { opacity:0; } }

/* show placeholder when the contenteditable is empty and not focused */
.ai_chat_message:empty::before {
  content: attr(data-placeholder);
  opacity: .6;
  pointer-events: none;
}
.ai_chat_message:focus::before { content: ""; }

.ai_chat_message[data-empty="true"]::before {
  content: attr(data-placeholder);
  opacity: .6;
  pointer-events: none;
}

  @media (prefers-reduced-motion: reduce){
    .caret{ animation:none; opacity:.5; }
  }

@media (prefers-reduced-motion: reduce){
  .prompt-demo__caret{ animation: none; opacity: .6; }
}


  /* Mobile tweaks */
  @media (max-width: 520px){
    .ai_chat_email_pill input{ width:160px; }
  }