:root {
  --paper: #fbfaf7;
  --sidebar: #f3f2ee;
  --panel: #f8f7f3;
  --ink: #202322;
  --muted: #777b78;
  --faint: #a7aaa7;
  --line: #e4e3dd;
  --teal: #21797f;
  --teal-dark: #155f65;
  --teal-soft: #e5f0ef;
  --coral: #e47d68;
  --gold: #c89d49;
  --shadow: 0 18px 60px rgba(35, 41, 39, 0.12);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: var(--paper); }
button, textarea { font: inherit; }
button { color: inherit; }

.app-shell { display: grid; grid-template-columns: 248px minmax(480px, 1fr) 310px; height: 100vh; }
.sidebar, .artifact-panel { background: var(--sidebar); min-height: 0; }
.sidebar { display: flex; flex-direction: column; padding: 22px 14px 16px; border-right: 1px solid var(--line); }
.brand-row { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; font-family: Georgia, "Songti SC", serif; font-size: 20px; font-weight: 700; }
.brand-mark { width: 29px; height: 29px; border-radius: 8px; background: var(--teal); display: grid; place-items: center; }
.brand-mark svg { width: 20px; fill: none; stroke: white; stroke-width: 1.8; stroke-linejoin: round; }

.new-chat-button { width: 100%; border: 1px solid #d9d8d2; background: #fff; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: .2s; }
.new-chat-button:hover { border-color: #bfc7c4; background: #fdfdfb; transform: translateY(-1px); }
.plus { color: var(--teal); font-size: 19px; font-weight: 400; }
.primary-nav { margin: 18px 0 15px; display: grid; gap: 3px; }
.nav-item { border: 0; background: transparent; border-radius: 8px; padding: 9px 10px; display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; text-align: left; cursor: pointer; color: #595d5a; font-size: 14px; }
.nav-item:hover, .nav-item.active { background: #e9e8e3; color: var(--ink); }
.nav-icon { color: var(--teal); font-size: 17px; text-align: center; }
.nav-count { color: var(--faint); font-size: 11px; }

.history-heading { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; color: #999b98; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.history-heading button { border: 0; background: transparent; color: #989c99; cursor: pointer; font-size: 15px; }
.session-list { overflow-y: auto; min-height: 80px; padding: 0 2px; scrollbar-width: thin; }
.session-item { width: 100%; border: 0; background: transparent; padding: 9px 9px; border-radius: 7px; text-align: left; cursor: pointer; font-size: 13px; color: #696c69; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-item:hover { background: #e9e8e3; color: var(--ink); }
.session-item.active { background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; }
.session-skeleton { height: 31px; margin: 5px 8px; border-radius: 6px; background: linear-gradient(90deg,#e8e7e2,#efeee9,#e8e7e2); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.session-skeleton.short { width: 70%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.sidebar-footer { margin-top: auto; padding: 14px 9px 2px; border-top: 1px solid var(--line); display: flex; gap: 9px; align-items: center; }
.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer strong { font-size: 12px; font-weight: 600; }
.sidebar-footer small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #50a37a; box-shadow: 0 0 0 4px #dcebe2; }

.chat-area { min-width: 0; min-height: 0; display: grid; grid-template-rows: 62px 1fr auto; background: var(--paper); position: relative; }
.topbar { border-bottom: 1px solid rgba(228,227,221,.8); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: rgba(251,250,247,.9); backdrop-filter: blur(12px); z-index: 5; }
.project-title span, .project-title small { display: block; }
.project-title span { font-size: 14px; font-weight: 650; }
.project-title small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.topbar-actions { display: flex; gap: 8px; }
.subtle-button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 11px; cursor: pointer; font-size: 12px; }
.subtle-button span { color: var(--teal); font-size: 15px; }
.icon-button { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font-size: 21px; display: grid; place-items: center; }
.icon-button:hover { background: #ecebe6; }

.conversation-scroll { overflow-y: auto; min-height: 0; scroll-behavior: smooth; scrollbar-width: thin; }
.welcome { min-height: calc(100% - 12px); display: flex; flex-direction: column; justify-content: center; max-width: 780px; margin: 0 auto; padding: 56px 36px 120px; }
.welcome-kicker, .eyebrow { color: var(--teal); font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.welcome h1 { font-family: Georgia, "Songti SC", serif; font-size: clamp(36px, 4.2vw, 57px); letter-spacing: -.035em; line-height: 1.08; margin: 12px 0 18px; font-weight: 500; }
.welcome h1 em { color: var(--teal); font-style: normal; }
.welcome > p { margin: 0 0 32px; color: var(--muted); font-size: 15px; }
.starter-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }
.starter { border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 12px; padding: 15px; text-align: left; min-height: 115px; cursor: pointer; transition: .2s ease; }
.starter:hover { transform: translateY(-2px); border-color: #bfc9c6; box-shadow: 0 8px 24px rgba(40,55,51,.07); }
.starter strong, .starter small { display: block; }
.starter strong { font-size: 13px; margin: 12px 0 5px; }
.starter small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.starter-icon { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; }
.starter-icon.coral { background: var(--coral); }.starter-icon.teal { background: var(--teal); }.starter-icon.gold { background: var(--gold); }

.messages { display: none; max-width: 800px; margin: 0 auto; padding: 40px 36px 170px; }
.messages.visible { display: block; }
.message { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 13px; margin-bottom: 30px; }
.message.user { grid-template-columns: minmax(0,1fr); justify-items: end; margin-bottom: 24px; }
.message-avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--teal); display: grid; place-items: center; color: #fff; font-family: Georgia,serif; font-size: 15px; }
.message-content { min-width: 0; line-height: 1.72; font-size: 14px; }
.message.user .message-content { max-width: 82%; background: #e9f0ef; border-radius: 14px 14px 3px 14px; padding: 11px 15px; line-height: 1.55; white-space: pre-wrap; }
.message-label { font-size: 11px; font-weight: 700; color: var(--teal); margin-bottom: 7px; letter-spacing: .04em; }
.markdown > :first-child { margin-top: 0; }.markdown > :last-child { margin-bottom: 0; }
.markdown h1,.markdown h2,.markdown h3 { font-family: Georgia,"Songti SC",serif; line-height: 1.35; margin: 1.3em 0 .55em; }
.markdown h2 { font-size: 20px; }.markdown h3 { font-size: 16px; }
.markdown p { margin: .55em 0; }
.markdown ul,.markdown ol { padding-left: 1.35em; }
.markdown li { margin: .26em 0; }
.markdown code { background: #eeede8; border-radius: 4px; padding: 2px 5px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; }
.markdown pre { background: #242827; color: #e9eeec; padding: 14px; border-radius: 10px; overflow-x: auto; }
.markdown pre code { background: none; padding: 0; }
.markdown table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; font-size: 12px; margin: 14px 0; }
.markdown th,.markdown td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.markdown th { background: #f0efea; font-weight: 650; }.markdown tr:last-child td { border-bottom: 0; }
.tool-status { display: flex; align-items: center; gap: 8px; min-height: 25px; color: var(--muted); font-size: 12px; margin: 8px 0; }
.tool-status .mini-spinner { width: 13px; height: 13px; border: 1.5px solid #b9c7c4; border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
.tool-status.done .mini-spinner { animation: none; border: 0; color: var(--teal); width: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.typing-dots { display: inline-flex; gap: 4px; padding: 8px 0; }.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: #a6aaa7; animation: bounce 1.2s infinite; }.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)} }

.composer-wrap { position: absolute; z-index: 6; bottom: 0; left: 0; right: 0; padding: 18px 36px 12px; background: linear-gradient(0deg,var(--paper) 72%,rgba(251,250,247,0)); }
.composer { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid #d9d9d3; border-radius: 16px; box-shadow: 0 8px 26px rgba(40,47,44,.1); padding: 12px 13px 9px; transition: .2s; }
.composer:focus-within { border-color: #9db7b4; box-shadow: 0 9px 30px rgba(33,121,127,.11); }
.composer textarea { width: 100%; display: block; resize: none; border: 0; outline: 0; max-height: 150px; min-height: 28px; padding: 2px 4px 8px; color: var(--ink); line-height: 1.55; background: transparent; }
.composer textarea::placeholder { color: #a8aba8; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; }
.composer-actions > div { display: flex; align-items: center; gap: 8px; }
.composer-icon { width: 28px; height: 28px; border: 0; border-radius: 7px; background: #f0efeb; color: #656967; font-size: 20px; cursor: pointer; }
.composer-hint { font-size: 10px; color: #a1a4a1; }
.send-button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--teal); cursor: pointer; display: grid; place-items: center; transition: .2s; }
.send-button:hover { background: var(--teal-dark); transform: translateY(-1px); }.send-button:disabled { background: #b9c4c2; cursor: not-allowed; transform: none; }
.send-button svg { width: 17px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.disclaimer { text-align: center; color: #a0a3a0; font-size: 9px; margin: 7px auto 0; }
.upload-strip { max-width: 760px; margin: 0 auto 8px; display: flex; gap: 7px; overflow-x: auto; }
.upload-strip[hidden] { display: none; }
.upload-chip { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 10px; white-space: nowrap; color: var(--muted); box-shadow: 0 3px 10px rgba(0,0,0,.04); }
.upload-chip.done { color: var(--teal-dark); }.upload-chip.error { color: #a14d40; }

.artifact-panel { border-left: 1px solid var(--line); padding: 23px 17px 16px; display: flex; flex-direction: column; min-width: 0; }
.artifact-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 4px; }
.artifact-header h2 { font-family: Georgia,"Songti SC",serif; font-size: 23px; font-weight: 500; margin: 4px 0 15px; }
.artifact-tabs { background: #eae9e4; border-radius: 9px; padding: 3px; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.artifact-tab { border: 0; background: transparent; border-radius: 7px; padding: 7px 5px; font-size: 11px; color: var(--muted); cursor: pointer; }
.artifact-tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.06); font-weight: 650; }
.artifact-content { overflow-y: auto; padding: 12px 2px 20px; min-height: 0; scrollbar-width: thin; }
.empty-artifacts { text-align: center; padding: 50px 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.empty-artifacts span { display: block; font-size: 27px; color: #afb8b5; margin-bottom: 8px; }
.artifact-card { background: rgba(255,255,255,.8); border: 1px solid var(--line); border-radius: 10px; padding: 11px; margin-bottom: 8px; cursor: pointer; transition: .18s; }
.artifact-card:hover { border-color: #bdcbc8; transform: translateY(-1px); }
.artifact-card h3 { font-size: 12px; margin: 0 0 6px; line-height: 1.4; }
.artifact-card p { color: var(--muted); font-size: 10px; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.artifact-meta { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.tag { padding: 3px 6px; border-radius: 5px; background: #efeee9; color: #6e726f; font-size: 9px; }
.tag.teal { background: var(--teal-soft); color: var(--teal-dark); }
.asset-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.asset-card { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; min-width: 0; }
.asset-preview { height: 82px; background: #e9e8e3; display: grid; place-items: center; color: #89908d; font-size: 25px; }
.asset-preview img { width: 100%; height: 100%; object-fit: cover; }.asset-preview video { width: 100%; height: 100%; object-fit: cover; }
.asset-name { font-size: 9px; padding: 7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.output-card video,.output-card img { width: 100%; border-radius: 7px; background: #222; max-height: 175px; object-fit: cover; }
.output-card audio { width: 100%; height: 34px; }

.detail-dialog { width: min(780px,calc(100vw - 32px)); max-height: calc(100vh - 50px); border: 0; border-radius: 16px; padding: 0; box-shadow: var(--shadow); background: var(--paper); }
.detail-dialog::backdrop { background: rgba(25,30,29,.34); backdrop-filter: blur(3px); }
.dialog-header { padding: 20px 23px 15px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; position: sticky; top: 0; background: var(--paper); z-index: 2; }
.dialog-header h2 { font-family: Georgia,"Songti SC",serif; font-size: 23px; margin: 5px 0 0; font-weight: 500; }
.dialog-body { padding: 20px 23px 28px; overflow-y: auto; }
.script-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.shot-card { border-left: 2px solid #9bbab7; padding: 1px 0 3px 14px; margin: 17px 0; }
.shot-card h4 { margin: 0 0 7px; font-size: 13px; }.shot-card p { margin: 5px 0; font-size: 12px; line-height: 1.6; color: #555b58; }
.shot-time { color: var(--teal); font-size: 10px; font-weight: 700; }

.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: grid; gap: 8px; }
.toast { background: #252a28; color: white; border-radius: 9px; padding: 10px 13px; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease; max-width: 320px; }
.toast.error { background: #8e493e; }
@keyframes toast-in { from { opacity:0; transform:translateY(7px) } }
.mobile-only,.mobile-artifact-button { display: none; }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 225px minmax(480px,1fr); }
  .artifact-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; z-index: 20; box-shadow: var(--shadow); transform: translateX(105%); transition: transform .25s ease; }
  .artifact-panel.open { transform: translateX(0); }
  .mobile-artifact-button { display: grid; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 265px; z-index: 30; box-shadow: var(--shadow); transform: translateX(-105%); transition: transform .25s ease; }
  .sidebar.open { transform: translateX(0); }
  .mobile-only { display: grid; }.brand-row .mobile-only { margin-left: auto; }
  .chat-area { height: 100vh; grid-template-rows: 58px 1fr auto; }
  .topbar { padding: 0 13px; }.subtle-button { display: none; }
  .welcome { padding: 45px 20px 130px; justify-content: flex-start; }.welcome h1 { font-size: 38px; margin-top: 24px; }
  .starter-grid { grid-template-columns: 1fr; }.starter { min-height: 80px; display: grid; grid-template-columns: 35px 1fr; column-gap: 4px; }.starter strong { margin: 2px 0 1px; }.starter small { grid-column: 2; }
  .messages { padding: 27px 18px 160px; }.message.user .message-content { max-width: 92%; }
  .composer-wrap { padding: 15px 13px 8px; }.composer-hint { display: none; }
  .markdown table { display: block; overflow-x: auto; }
}