body { margin: 0; background: var(--bg-body); }
.it-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100dvh - var(--layout-topbar-height, 56px) - 16px); min-height: 560px; color: var(--text-main); background: var(--bg-body); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.it-app * { box-sizing: border-box; }
.it-app h1, .it-app h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.it-app h3 { font-size: 1rem; }
.it-app p { line-height: 1.6; }
.it-sidebar { padding: 24px 20px; border-right: 1px solid var(--border); overflow-y: auto; }
.it-sidebar header p, .it-muted, .it-context, .it-chat-header p { color: var(--text-sub); font-size: .875rem; }
.it-sidebar label, .it-composer label { display: block; margin: 16px 0 6px; font-size: .875rem; font-weight: 600; }
.it-sidebar select, .it-composer textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-main); font: inherit; padding: 10px 12px; }
.it-sidebar select { min-height: 44px; }
.it-context { min-height: 24px; overflow-wrap: anywhere; }
.it-button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-main); font: inherit; font-size: .875rem; cursor: pointer; }
.it-button:hover { background: var(--bg-body); }
.it-primary { background: var(--color-primary); color: var(--bg-card); border-color: var(--color-primary); }
.it-primary:hover { background: var(--color-primary-dark); }
.it-app :is(button, select, textarea, summary, a):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.it-app :disabled { opacity: .55; cursor: not-allowed; }
.it-sidebar > button { width: 100%; }
.it-history { margin-top: 24px; }
.it-history summary, .it-orders-panel summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: .875rem; font-weight: 600; }
.it-history-item { display: block; text-align: left; width: 100%; margin: 6px 0; padding: 12px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; cursor: pointer; color: var(--text-main); font: inherit; overflow-wrap: anywhere; }
.it-history-item:hover { background: var(--bg-card); }
.it-history-item[aria-pressed="true"] { border-color: var(--color-primary-light); background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-card)); }
.it-history-item small { display: block; margin-top: 4px; font-size: .75rem; color: var(--text-sub); }
.it-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; min-height: 44px; color: var(--color-primary); font-size: .875rem; }
.it-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-card); }
.it-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 28px 12px; border-bottom: 1px solid var(--border); }
.it-chat-header p { margin: 4px 0 0; overflow-wrap: anywhere; }
.it-badge { flex-shrink: 0; padding: 6px 10px; border-radius: var(--radius-pill); color: var(--color-primary-dark); background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-card)); font-size: .75rem; }
.it-sandbox-note { margin: 0; padding: 10px 28px; background: var(--bg-body); color: var(--text-sub); font-size: .8rem; }
.it-messages { flex: 1; min-height: 180px; padding: 24px 28px; overflow-y: auto; overscroll-behavior: contain; }
.it-empty { text-align: center; color: var(--text-sub); max-width: 440px; margin: 48px auto; }
.it-empty > i { font-size: 2rem; color: var(--color-primary-light); }
.it-empty h3 { color: var(--text-main); margin: 16px 0 8px; }
.it-empty p { font-size: .875rem; }
.it-turn { margin-bottom: 28px; }
.it-message { max-width: min(75ch, 88%); margin: 8px 0; padding: 12px 16px; border-radius: 12px; background: var(--bg-body); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.it-customer { margin-left: auto; background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-card)); }
.it-speaker { font-weight: 600; font-size: .75rem; color: var(--text-sub); margin-bottom: 4px; }
.it-message img, .it-attachment img { display: block; max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 6px; }
.it-meta { color: var(--text-sub); font-size: .75rem; margin: 10px 0; overflow-wrap: anywhere; }
.it-tools { margin: 8px 0; max-width: 75ch; }
.it-tools summary { cursor: pointer; color: var(--color-primary-dark); font-size: .8rem; padding: 8px 0; }
.it-tools pre, .it-orders-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; padding: 12px; background: var(--bg-body); border-radius: 6px; max-height: 250px; overflow-y: auto; }
.it-error { color: var(--color-danger); }
.it-orders-panel { border-top: 1px solid var(--border); padding: 0 28px; max-height: 240px; overflow-y: auto; }
.it-orders-panel[hidden] { display: none; }
.it-status { padding: 0 28px; font-size: .875rem; color: var(--text-sub); white-space: pre-wrap; }
.it-status:not(:empty) { padding-top: 10px; padding-bottom: 10px; }
.it-composer { padding: 0 28px 20px; border-top: 1px solid var(--border); }
.it-composer textarea { resize: vertical; min-height: 80px; max-height: 160px; line-height: 1.5; }
.it-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.it-attach-action { display: flex; align-items: center; gap: 10px; }
.it-attach-action span { color: var(--text-sub); font-size: .75rem; }
.it-attachments { display: flex; flex-wrap: wrap; gap: 10px; }
.it-attachment { position: relative; margin-top: 12px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; }
.it-attachment img { height: 64px; max-width: 100px; }
.it-attachment button { margin-top: 4px; display: block; width: 100%; min-height: 32px; border: 0; background: var(--bg-body); color: var(--text-main); cursor: pointer; }
@media (max-width: 900px) { .it-app { grid-template-columns: 240px minmax(0, 1fr); } .it-attach-action span { display: none; } }
@media (max-width: 640px) {
  .it-app { display: flex; flex-direction: column; height: auto; min-height: calc(100dvh - 120px); }
  .it-sidebar { padding: 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .it-sidebar header p { margin: 6px 0; }
  .it-sidebar .it-history { margin-top: 12px; }
  #itHistory { max-height: 200px; overflow-y: auto; }
  .it-back { margin-top: 4px; }
  .it-chat { min-height: 650px; }
  .it-chat-header { padding: 16px; }
  .it-sandbox-note, .it-status, .it-orders-panel { padding-left: 16px; padding-right: 16px; }
  .it-messages { padding: 16px; max-height: 65dvh; }
  .it-composer { padding: 0 16px 20px; }
  .it-message { max-width: 95%; }
  .it-chat-header h2 { font-size: 1.125rem; }
}