/* The same frosted surface, typography and controls as the office composer. */
.lc-preview { position:absolute; z-index:4; left:50%; top:auto; bottom:0; transform:translate(-50%,40%); width:min(1120px,calc(100% - 100px)); height:min(680px,calc(100% - 210px)); display:flex; overflow:hidden; border:1px solid rgb(255 255 255 / 55%); border-radius:var(--chat-corner-radius); background:rgb(255 255 255 / 48%); backdrop-filter:blur(22px) saturate(125%); -webkit-backdrop-filter:blur(22px) saturate(125%); color:#121212; box-shadow:0 8px 32px rgb(18 18 18 / 12%); font:14px/1.4 system-ui,sans-serif; opacity:0; visibility:hidden; }
.use-cases.is-result-ready .lc-preview { visibility:visible; animation:use-question-in 1800ms cubic-bezier(.3333333333,0,.6666666667,1) both; }
.lc-preview * { box-sizing:border-box; }
.lc-preview button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; padding:8px; border-radius:var(--chat-corner-radius); display:flex; align-items:center; gap:10px; text-align:left; }
.lc-preview button:hover { background:rgb(18 18 18 / 7%); }
.lc-preview button:disabled { cursor:default; opacity:.35; }
.lc-preview svg { width:20px; height:20px; flex-shrink:0; }
.lc-preview [hidden] { display:none!important; }
.lc-preview ::selection { background:#121212; color:white; }
.lc-sidebar { width:250px; flex-shrink:0; background:rgb(255 255 255 / 18%); border-right:1px solid rgb(255 255 255 / 30%); padding:0 12px 12px; display:flex; flex-direction:column; }
.lc-side-top { display:flex; justify-content:space-between; align-items:center; padding:0 0 0 4px; height:60px; flex-shrink:0; }
.lc-brand { display:block; width:98px; height:auto; filter:brightness(0); opacity:.93; }
.lc-nav { width:100%; }
.lc-history { overflow:auto; flex:1; margin-top:18px; }
.lc-history small { display:block; padding:12px 8px 6px; color:rgb(18 18 18 / 55%); font-size:12px; }
.lc-history button { width:100%; font-size:13px; margin:2px 0; }
.lc-history .is-active { background:rgb(18 18 18 / 7%); }
.lc-account { display:flex; align-items:center; gap:10px; padding:8px; font-size:12px; }
.lc-avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:rgb(18 18 18 / 8%); }
.lc-main { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
.lc-toolbar { height:60px; flex-shrink:0; display:flex; align-items:center; gap:2px; padding:8px 14px; }
.lc-messages { flex:1; min-height:0; overflow:auto; padding:24px 7%; overscroll-behavior:contain; }
.lc-welcome { height:100%; display:flex; align-items:center; justify-content:center; padding-bottom:30px; text-align:center; }
.lc-welcome h3 { font-size:26px; font-weight:500; line-height:1.25; margin:0; }
.lc-message { margin:8px 0 28px; }
.lc-message p { white-space:pre-wrap; margin:0; line-height:1.65; }
.lc-message-user { margin-left:auto; width:fit-content; max-width:85%; background:rgb(255 255 255 / 42%); border:1px solid rgb(255 255 255 / 35%); border-radius:var(--chat-corner-radius); padding:12px 18px; }
.lc-message-assistant { padding:24px; background:#121212; color:#fff; border:1px solid #121212; border-radius:var(--chat-corner-radius); backdrop-filter:none; -webkit-backdrop-filter:none; }
.lc-compose-wrap { padding:12px 6% 14px; }
.lc-composer { border:1px solid rgb(255 255 255 / 55%); border-radius:var(--chat-corner-radius); background:rgb(255 255 255 / 26%); padding:14px 14px 10px; box-shadow:0 8px 32px rgb(18 18 18 / 6%); }
.lc-placeholder { position:relative; height:40px; margin:0 6px 8px; font:14px/1.5 system-ui,sans-serif; color:rgb(18 18 18 / 55%); }
.lc-preview .composer-control > button { width:30px; height:30px; padding:0; display:grid; place-items:center; border-radius:50%; }
.lc-preview .composer-control > .composer-send { background:#121212; color:white; }
.lc-preview .composer-context { right:-44px; width:min(312px,calc(100vw - 94px)); font:14px/1.4 system-ui,sans-serif; }
.lc-disclaimer { display:block; text-align:center; font-size:11px; color:rgb(18 18 18 / 60%); margin-top:10px; }
.lc-sidebar-closed .lc-sidebar { margin-left:-250px; opacity:0; visibility:hidden; pointer-events:none; }
@media(max-width:767px) { .lc-preview { width:calc(100% - 28px); height:calc(100% - 190px); max-height:680px; border-radius:var(--chat-corner-radius); }.lc-sidebar { display:flex; margin-left:0; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-100%); position:absolute; inset:0 auto 0 0; z-index:6; background:rgb(239 239 239 / 94%); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:12px 0 30px #0002; }.lc-sidebar-open .lc-sidebar { margin-left:0; opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); }.lc-welcome h3 { font-size:22px; }.lc-compose-wrap { padding:10px 12px; }.lc-toolbar { padding:8px; }.lc-messages { padding:16px 20px; }.lc-message-user { max-width:92%; }.lc-composer { padding:16px 10px 10px; border-radius:var(--chat-corner-radius); }.lc-disclaimer { font-size:10px; } }


.lc-preview .office-composer__tools svg { width:18px; height:18px; }
.lc-preview .office-composer__tools svg[viewBox="0 0 20 20"] { width:17px; height:17px; }

.lc-preview, .lc-preview * { user-select:none; -webkit-user-select:none; }
.lc-preview .lc-sidebar-reopen { display:none; }
.lc-sidebar-closed .lc-sidebar-reopen { display:flex; }
.lc-preview .lc-message p { font:13px/1.6 system-ui,sans-serif; max-width:none; margin:0; }
.lc-preview .composer-context p { font:14px/1.4 system-ui,sans-serif; max-width:none; margin:12px 0 0; }
.lc-preview .composer-control > .composer-tooltip:not(.composer-context) { left:50%; right:auto; transform:translateX(-50%) translateY(4px); }
.lc-preview .composer-control.is-open > .composer-tooltip:not(.composer-context) { transform:translateX(-50%) translateY(0); }
.lc-caret { position:absolute; top:3px; left:0; width:1px; height:16px; background:#121212; animation:composer-caret 1.1s steps(1) infinite; pointer-events:none; }
@media(max-width:767px) {
  .lc-preview .lc-sidebar-reopen { display:flex; }
  .lc-preview.lc-sidebar-open .lc-sidebar-reopen { display:flex; visibility:hidden; pointer-events:none; }
}


.lc-sidebar { transition:margin-left 300ms ease, transform 300ms ease, opacity 300ms ease, visibility 300ms; }


.lc-preview button,
.lc-preview .composer-control > button:not(.composer-send) {
  border-radius: var(--chat-detail-radius);
}

@media(max-width:767px) { .lc-preview { transform:translate(-50%,50%); } }

@media(max-width:767px) {
  .lc-preview :is(.lc-nav, [data-action="new"]),
  .lc-preview :is(.lc-nav, [data-action="new"]):is(:hover, :active, :focus) {
    background:transparent; -webkit-tap-highlight-color:transparent;
  }
}

.lc-preview .lc-brand-button { padding:0; border-radius:0; }
.lc-preview .lc-brand-button:hover { background:transparent; }

.lc-history button { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; }

.lc-preview .lc-attachments { height:auto; opacity:1; margin:0 0 14px; flex-wrap:wrap; justify-content:flex-end; }
.lc-preview .composer-attachment-card > svg { width:40px; height:40px; }

.lc-messages {
  --lc-scroll-fade:24px;
  
}
@media(max-width:640px) {
  .lc-preview .lc-attachments { align-items:flex-end; }
}

@media(max-width:767px) {
  .lc-messages {
    --lc-scroll-fade:12px;
    
  }
  .lc-toolbar > button[data-action="new"] { width:36px; height:36px; justify-content:center; }
  .lc-toolbar > button[data-action="new"] svg { width:18px; height:18px; }
}

/* Attachment bubbles can use the full conversation width before wrapping cards. */
.lc-message-user:has(.lc-attachments) { width:max-content; max-width:100%; }
.lc-preview .lc-attachments { flex-direction:row; align-items:center; }

.lc-message-user:has(.lc-attachments > :nth-child(2)) { width:606px; max-width:100%; }
@media(min-width:768px) {
  .lc-preview .lc-sidebar-reopen {
    display:flex; width:0; padding:8px 0; margin-right:-2px;
    overflow:hidden; opacity:0; visibility:hidden; flex-shrink:0;
    transition:width 300ms ease, padding 300ms ease, margin-right 300ms ease, opacity 300ms ease, visibility 300ms;
  }
  .lc-preview.lc-sidebar-closed .lc-sidebar-reopen {
    width:36px; padding:8px; margin-right:0; opacity:1; visibility:visible;
  }
}


/* A definite intrinsic width keeps long filenames from widening the bubble. */
.lc-preview .lc-attachments .composer-attachment-card { width:280px; max-width:100%; }


/* Move from the cropped preview to the centered interactive window. */
.lc-preview { transition:bottom 900ms cubic-bezier(.4,0,.2,1), transform 900ms cubic-bezier(.4,0,.2,1); }
.use-cases.is-demo-centered .lc-preview { bottom:50%; transform:translate(-50%,50%); }


.lc-toolbar > button[data-action="new"] { margin-left:auto; }

.lc-messages { padding:24px max(0px,calc(6% - var(--lc-scrollbar-width,0px))) 0 6%; }
.lc-compose-wrap { padding-top:0; }
.lc-message-assistant { width:100%; }
.lc-message:last-child { margin-bottom:0; }
.lc-account { border-radius:var(--chat-detail-radius); }
.lc-preview .composer-context__track { overflow:hidden; }
.lc-preview .composer-context__track::before { content:""; display:block; height:100%; width:var(--context-used,0%); background:#121212; border-radius:inherit; }
@media(min-width:768px) and (hover:hover) { .lc-account:hover { background:rgb(18 18 18 / 7%); } }
@media(max-width:767px) {
  .lc-messages { padding:16px max(0px,calc(12px - var(--lc-scrollbar-width,0px))) 0 12px; }
  .lc-compose-wrap { padding-top:0; }
}

/* Extend the thread beneath the rounded top edge rather than clipping it flat above it. */
.lc-compose-wrap { position:relative; z-index:1; margin-top:calc(-1 * var(--chat-corner-radius)); pointer-events:none; }
.lc-composer { pointer-events:auto; }
.lc-messages { padding-bottom:calc(var(--chat-corner-radius) + 40px); }

/* Only the two corner cutouts expose the thread beneath the composer. */
.lc-messages {
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--lc-scroll-fade)),radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px),radial-gradient(circle at 0 100%,transparent 12px,#000 12.5px);
  mask-image:linear-gradient(to bottom,transparent,#000 var(--lc-scroll-fade)),radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px),radial-gradient(circle at 0 100%,transparent 12px,#000 12.5px);
  -webkit-mask-size:100% var(--lc-composer-edge),12px 13px,12px 13px;
  mask-size:100% var(--lc-composer-edge),12px 13px,12px 13px;
  -webkit-mask-position:left top,var(--lc-corner-left) calc(var(--lc-composer-edge) - 1px),var(--lc-corner-right) calc(var(--lc-composer-edge) - 1px);
  mask-position:left top,var(--lc-corner-left) calc(var(--lc-composer-edge) - 1px),var(--lc-corner-right) calc(var(--lc-composer-edge) - 1px);
}


@media(min-width:768px) {
  .lc-preview { height:min(720px,calc(100% - 170px)); }
  .use-cases.is-demo-centered .lc-preview { bottom:46%; }
}

/* Keep the reading column fixed while the available space recenters around it. */
.lc-preview { container-type:inline-size; }
@media(min-width:768px) {
  .lc-messages, .lc-compose-wrap {
    width:calc(100cqw - 250px);
    align-self:center;
    flex-shrink:0;
  }
  .lc-messages {
    padding-left:calc(6cqw - 15px);
    padding-right:max(0px,calc(6cqw - 15px - var(--lc-scrollbar-width,0px)));
  }
  .lc-compose-wrap { padding-left:calc(6cqw - 15px); padding-right:calc(6cqw - 15px); }
}

.lc-messages, .lc-history { scrollbar-width:none; scrollbar-gutter:auto; }
.lc-messages::-webkit-scrollbar, .lc-history::-webkit-scrollbar { display:none; }

.lc-messages { -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.lc-preview:not(.lc-mask-ready) .lc-messages { visibility:hidden; }

@media(max-width:767px) {
  .lc-preview { height:calc(100% - 150px); max-height:720px; }
  .use-cases.is-demo-centered .lc-preview { bottom:47%; }
}

.lc-messages { padding-top:36px; }
@media(max-width:767px) { .lc-messages { padding-top:28px; } }

.lc-chat-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; margin:0 8px; }
.lc-chat-title:empty { display:none; }
.lc-toolbar > button { flex-shrink:0; }
@media(max-width:767px) { .lc-chat-title { font-size:13px; } }

@media(max-width:767px) {
  .lc-preview .lc-message-user,
  .lc-preview .lc-message-user:has(.lc-attachments),
  .lc-preview .lc-message-user:has(.lc-attachments > :nth-child(2)) {
    max-width:85%;
    margin-left:auto;
    margin-right:0;
  }
}