:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #fff8fb; color: #33262d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #ffe4ef, #fff8fb 42%, #f8f3ff); }
button, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
.shell { width: min(780px, 100%); height: 100vh; margin: auto; display: flex; flex-direction: column; background: rgba(255,255,255,.82); box-shadow: 0 0 45px rgba(109,62,85,.12); }
header { min-height: 76px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #f0dce5; backdrop-filter: blur(12px); }
.avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: #ffe2ee; font-size: 25px; }
h1 { margin: 0; font-size: 19px; } header p { margin: 3px 0 0; color: #8c7180; font-size: 13px; }
.ghost { margin-left: auto; padding: 9px 13px; border-radius: 11px; background: #f8eaf0; color: #8b4767; }
.claim { margin: auto 24px; padding: 34px 28px; text-align: center; border: 1px solid #f0d4e0; border-radius: 24px; background: white; box-shadow: 0 14px 40px rgba(129,78,102,.1); }
.claim h2 { margin-top: 0; } .claim p { color: #725d68; line-height: 1.7; }
.claim button, #send { padding: 0 18px; min-height: 46px; border-radius: 14px; background: #c64f83; color: white; font-weight: 650; white-space: nowrap; }
.claim small { display: block; margin-top: 16px; color: #9d8792; }
.chat { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.conversation-toolbar { display: grid; grid-template-columns: auto minmax(140px, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f0dce5; background: rgba(255,255,255,.9); }
.conversation-toolbar label { color: #8c7180; font-size: 12px; white-space: nowrap; }
.conversation-toolbar select { min-width: 0; height: 38px; padding: 0 34px 0 11px; border: 1px solid #dfcbd5; border-radius: 11px; color: #4c3440; background: #fffafd; font: inherit; overflow: hidden; text-overflow: ellipsis; }
.conversation-action, .conversation-new { min-height: 38px; padding: 0 12px; border-radius: 11px; color: #86415f; background: #f8eaf0; white-space: nowrap; }
.conversation-action.danger { color: #a33c4d; background: #fff0f2; }
.conversation-new { color: white; background: #c64f83; font-weight: 650; }
.messages { flex: 1; overflow-y: auto; padding: 24px 18px; }
.message { width: fit-content; max-width: min(82%, 620px); margin: 10px 0; padding: 12px 15px; border-radius: 18px; line-height: 1.65; overflow-wrap: anywhere; }
.assistant { width: min(94%, 680px); max-width: min(94%, 680px); background: white; border: 1px solid #f0dfe7; border-bottom-left-radius: 6px; }
.user { margin-left: auto; color: white; background: #c64f83; border-bottom-right-radius: 6px; }
.waiting { color: #9b8190; } .error { background: #fff0f0; color: #a43d3d; }
form { padding: 12px 14px 6px; border-top: 1px solid #f0dce5; background: rgba(255,255,255,.96); }
.composer { width: 100%; min-width: 0; }
.composer-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.attachments { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 9px 0; }
.attachment-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 9px; border-radius: 10px; background: #f7e8ef; color: #74465b; font-size: 12px; overflow-wrap: anywhere; }
.attachment-chip button { flex: none; width: 20px; height: 20px; border-radius: 50%; color: #8b4767; background: rgba(255,255,255,.7); }
.attach { width: 44px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 14px; background: #f7e8ef; color: #9b3f69; font-size: 25px; line-height: 1; }
textarea { display: block; width: 100%; min-width: 0; resize: none; overflow-y: auto; min-height: 46px; max-height: 160px; padding: 11px 14px; border: 1px solid #dfcbd5; border-radius: 14px; outline: none; background: #fffafd; line-height: 22px; }
textarea:focus { border-color: #c64f83; box-shadow: 0 0 0 3px rgba(198,79,131,.12); }
#send { height: 46px; } #send:disabled, button:disabled { opacity: .55; cursor: wait; }
.hint { margin: 0; padding: 7px 12px 10px; text-align: center; color: #a38d98; background: white; font-size: 11px; line-height: 1.4; }
.site-footer { flex: none; padding: 8px 12px 10px; border-top: 1px solid #f0dce5; background: rgba(255,255,255,.96); text-align: center; font-size: 12px; line-height: 1.4; }
.site-footer a { color: #8c7180; text-decoration: none; }
.site-footer a:hover { color: #c64f83; text-decoration: underline; }
@media (max-width: 600px) {
  .shell { box-shadow: none; }
  .messages { padding: 16px 12px; }
  .message { max-width: 88%; }
  .assistant { width: 100%; max-width: 100%; }
  form { padding: 10px 12px 4px; }
  .composer-row { grid-template-columns: 42px minmax(0, 1fr) 72px; gap: 7px; }
  .attach { width: 42px; }
  #send { width: 72px; padding: 0; }
  .conversation-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px 12px; }
  .conversation-toolbar label { display: none; }
  .conversation-toolbar select { grid-column: 1; grid-row: 1; width: 100%; }
  .conversation-new { grid-column: 2; grid-row: 1; padding-inline: 11px; }
  .conversation-action { grid-row: 2; padding: 0 10px; min-height: 32px; font-size: 12px; }
  #renameConversation { grid-column: 1; justify-self: end; }
  #deleteConversation { grid-column: 2; justify-self: start; }
}
@media (max-width: 360px) {
  form { padding-inline: 8px; }
  .composer-row { grid-template-columns: 40px minmax(0, 1fr) 64px; gap: 6px; }
  .attach { width: 40px; }
  #send { width: 64px; }
  textarea { padding-inline: 11px; }
}
.message-text { min-width: 0; white-space: normal; }
.message-text > :first-child { margin-top: 0; }
.message-text > :last-child { margin-bottom: 0; }
.message-text p { margin: 0 0 12px; }
.message-text h1, .message-text h2, .message-text h3,
.message-text h4, .message-text h5, .message-text h6 {
  margin: 20px 0 10px;
  color: #37232d;
  line-height: 1.35;
}
.message-text h1 { font-size: 22px; }
.message-text h2 { font-size: 20px; }
.message-text h3 { font-size: 18px; }
.message-text h4, .message-text h5, .message-text h6 { font-size: 16px; }
.message-text hr { height: 1px; margin: 18px 0; border: 0; background: #ecdce4; }
.message-text ul, .message-text ol { margin: 8px 0 14px; padding-left: 24px; }
.message-text li { margin: 5px 0; }
.message-text blockquote { margin: 12px 0; padding: 8px 12px; border-left: 4px solid #d985aa; background: #fff7fa; color: #705966; }
.message-text code { padding: 2px 5px; border-radius: 5px; background: #f7edf2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.message-text pre { max-width: 100%; margin: 12px 0; padding: 12px; overflow-x: auto; border-radius: 10px; background: #30262b; color: #fff8fb; white-space: pre; }
.message-text pre code { padding: 0; background: transparent; color: inherit; }
.xychart { width: 100%; margin: 14px 0 18px; overflow-x: auto; border: 1px solid #eadfe4; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(70, 44, 56, .05); -webkit-overflow-scrolling: touch; }
.xychart svg { display: block; width: 100%; min-width: 620px; height: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.xychart .chart-title { fill: #493d43; font-size: 18px; font-weight: 600; }
.xychart .chart-grid { stroke: #eee8eb; stroke-width: 1; }
.xychart .chart-axis, .xychart .chart-tick-mark { stroke: #554b50; stroke-width: 1.5; }
.xychart .chart-tick { fill: #62575d; font-size: 12px; }
.xychart .chart-axis-label { fill: #493d43; font-size: 13px; }
.xychart .chart-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.xychart .chart-point { stroke: #fff; stroke-width: 1; }
.xychart .chart-legend-line { stroke-width: 2.4; }
.xychart .chart-legend { fill: #51474c; font-size: 12px; }
.table-scroll { width: 100%; margin: 12px 0 16px; overflow-x: auto; border: 1px solid #ead9e1; border-radius: 10px; -webkit-overflow-scrolling: touch; }
.message-text table { width: 100%; min-width: 420px; border-collapse: collapse; background: white; font-size: 14px; }
.message-text th, .message-text td { padding: 9px 10px; border-right: 1px solid #eee1e7; border-bottom: 1px solid #eee1e7; text-align: left; vertical-align: top; }
.message-text th { background: #fff2f7; color: #6f3f55; font-weight: 700; white-space: nowrap; }
.message-text tr:last-child td { border-bottom: 0; }
.message-text th:last-child, .message-text td:last-child { border-right: 0; }
@media (max-width: 600px) {
  .message-text h1 { font-size: 20px; }
  .message-text h2 { font-size: 18px; }
  .message-text h3 { font-size: 17px; }
  .message-text table { font-size: 13px; }
  .message-text th, .message-text td { padding: 8px; }
  .xychart { margin-inline: 0; }
  .xychart svg { min-width: 590px; }
}
.generated-files { display: grid; gap: 8px; margin-top: 10px; }
.file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(92, 68, 79, 0.14);
  border-radius: 12px;
  text-decoration: none;
}
.file-card:active { transform: scale(0.99); }
.file-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: white;
  background: #d75c84;
  font-size: 20px;
  font-weight: 700;
}
.file-detail { display: grid; min-width: 0; gap: 2px; }
.file-detail strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-detail small { opacity: 0.66; font-size: 12px; }