@layer base, components, responsive;
@layer base {
  :root {
    --primary: oklch(0.53 0.145 153);
    --primary-hover: oklch(0.47 0.13 153);
    --bg: oklch(0.975 0.002 153);
    --surface: oklch(1 0 0);
    --ink: oklch(0.24 0.008 153);
    --muted: oklch(0.48 0.008 153);
    --line: oklch(0.915 0.004 153);
    --soft: oklch(0.953 0.025 153);
    --accent: oklch(0.93 0.05 153);
    --danger: oklch(0.49 0.17 25);
    --unread: oklch(0.62 0.23 25);
    --warning: oklch(0.43 0.09 75);
    --chat: oklch(0.956 0.002 153);
    --bubble: oklch(0.89 0.115 142);
    --masthead-height: 68px;
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  button,
  a,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
  }
  button,
  a {
    touch-action: manipulation;
  }
  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
  }
  button {
    color: inherit;
  }
  a {
    color: var(--primary);
    text-decoration: none;
  }
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }
  h1 {
    font-size: 2rem;
    line-height: 1.4;
    letter-spacing: -0.025em;
  }
  h2 {
    font-size: 1.25rem;
    line-height: 1.5;
  }
  h3 {
    font-size: 1.05rem;
  }
  small {
    font-size: 0.875rem;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  button {
    min-height: 44px;
  }
  button,
  a {
    transition:
      background 0.15s,
      color 0.15s,
      transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  button:active {
    transform: translateY(1px);
  }
  input,
  select,
  textarea {
    border: 1px solid var(--line);
    background: white;
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    color: var(--ink);
  }
  textarea {
    min-height: 140px;
    resize: vertical;
  }
  label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
  }
  label input,
  label select,
  label textarea {
    margin-top: 6px;
  }
  .muted,
  .quiet {
    color: var(--muted);
  }
  .boot {
    padding: 20vh 24px;
    text-align: center;
  }
  .eyebrow {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 0.875rem;
  }
  .tag {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    background: var(--soft);
    padding: 3px 9px;
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
  }
  .footnote {
    color: var(--muted);
    font-size: 0.8125rem;
    margin-top: 24px;
  }
  .primary {
    border: 0;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .primary:hover {
    background: var(--primary-hover);
  }
  .secondary {
    border: 1px solid var(--line);
    background: white;
    border-radius: 8px;
    padding: 10px 16px;
  }
  .secondary:hover {
    background: var(--soft);
  }
  .text-button {
    border: 0;
    background: transparent;
    color: var(--primary);
    padding: 8px 10px;
  }
  .icon-button {
    border: 0;
    background: transparent;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .icon-button:hover {
    background: var(--soft);
  }
  .row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .spread {
    justify-content: space-between;
  }
  .stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .full {
    width: 100%;
  }
  .danger {
    color: var(--danger);
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  [hidden] {
    display: none !important;
  }
}
@layer components {
  .entry-screen {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 40px 24px 64px;
    background: var(--surface);
  }
  .masthead + .entry-screen {
    min-height: calc(100dvh - var(--masthead-height));
  }
  .entry-actions {
    width: min(100%, 440px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .entry-title {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 28px;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    font-size: 1.5rem;
  }
  .entry-brand {
    font-weight: 700;
    font-size: 1.875rem;
    letter-spacing: -0.025em;
  }
  .entry-name {
    font-weight: 500;
    color: var(--muted);
    font-size: 1.25rem;
  }
  .entry-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 180px;
    padding: 28px 24px 24px;
    border: 0;
    border-radius: 16px;
    text-align: left;
    font-size: 1.25rem;
    font-weight: 600;
    isolation: isolate;
  }
  .entry-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .entry-icon .icon {
    width: 28px;
    height: 28px;
    stroke-width: 1.6;
  }
  .entry-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    white-space: nowrap;
  }
  .entry-label .entry-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .entry-practice {
    background: var(--primary);
    color: var(--surface);
  }
  .entry-practice .entry-icon {
    background: oklch(1 0 0 / 0.13);
  }
  .entry-exam {
    background: oklch(0.958 0.003 153);
    color: var(--ink);
  }
  .entry-exam .entry-icon {
    background: var(--surface);
    color: var(--primary);
  }
  .entry-button:disabled {
    opacity: 0.65;
  }
  .entry-button[aria-busy="true"] {
    opacity: 1;
    cursor: wait;
  }
  .entry-button[aria-busy="true"] .entry-arrow {
    opacity: 0;
  }
  .entry-button[aria-busy="true"]::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 28px;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: busy-turn 0.7s linear infinite;
  }
  @keyframes busy-turn {
    to {
      transform: rotate(360deg);
    }
  }
  @media (hover: hover) {
    .entry-button:not(:disabled):hover {
      transform: translateY(-3px);
    }
    .entry-practice:not(:disabled):hover {
      background: var(--primary-hover);
      box-shadow: 0 4px 8px oklch(0.35 0.05 153 / 0.12);
    }
    .entry-exam:not(:disabled):hover {
      background: oklch(0.936 0.009 153);
    }
    .entry-button:not(:disabled):hover .entry-arrow {
      transform: translateX(3px);
    }
  }
  .entry-button:not(:disabled):active {
    transform: translateY(0) scale(0.985);
  }
  .entry-actions .error-banner {
    grid-column: 1 / -1;
    margin: 0;
  }
  .exam-brief {
    margin: 22px 0 8px;
    font-size: 1.125rem;
  }
  .exam-rule {
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 0.875rem;
  }
  .masthead {
    height: var(--masthead-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5vw;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .brand-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-weight: 700;
    font-size: 1.125rem;
  }
  .brand-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: 9px;
    font-size: 1.125rem;
  }
  .brand-sub {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 400;
  }
  .workspace {
    max-width: 1120px;
    margin: 0 auto;
    padding: 44px 32px 70px;
  }
  .workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
  }
  .workspace-head h1 + p {
    margin-top: 12px;
  }
  .section-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .scenario-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: var(--soft);
    color: var(--primary);
    font-size: 1.35rem;
    flex-shrink: 0;
  }
  .quiet {
    font-size: 0.875rem;
  }
  #toast:not(:empty) {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    background: var(--ink);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    z-index: 50;
    max-width: calc(100vw - 32px);
    font-size: 0.875rem;
  }
  dialog {
    border: 0;
    border-radius: 16px;
    padding: 28px;
    max-width: min(440px, calc(100vw - 32px));
    max-height: 90dvh;
    width: 100%;
    color: var(--ink);
    background: var(--surface);
  }
  dialog::backdrop {
    background: oklch(0.2 0.008 153 / 0.38);
  }
}
@layer responsive {
  @media (max-width: 700px) {
    :root {
      --masthead-height: 64px;
    }
    .masthead {
      padding: 0 20px;
    }
    .brand-sub {
      font-size: 0.75rem;
    }
    .workspace {
      padding: 30px 20px;
    }
    .workspace-head {
      margin-bottom: 24px;
    }
    .workspace-head h1 {
      font-size: 1.55rem;
    }
    .workspace-head .muted {
      font-size: 0.875rem;
    }
    .brand {
      gap: 8px;
    }
    .masthead > .quiet {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer components {
  .icon {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .small {
    font-size: 0.875rem;
  }
  .top-nav {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .top-nav .text-button {
    color: var(--muted);
    font-size: 0.875rem;
  }
  .top-nav .selected {
    color: var(--primary);
    font-weight: 700;
  }
  .text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }
  .text-button .icon {
    width: 17px;
    height: 17px;
  }
  .error-banner {
    background: oklch(0.96 0.025 25);
    border: 1px solid oklch(0.84 0.065 25);
    color: var(--danger);
    font-size: 0.875rem;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 8px;
    margin-bottom: 16px;
  }
  .phone > .error-banner {
    border-radius: 0;
    margin: 0;
    flex-shrink: 0;
  }
  .error-banner .text-button {
    color: var(--danger);
    white-space: nowrap;
  }
  .sim-stage {
    width: 420px;
    max-width: calc(100% - 40px);
    margin: 20px auto;
  }
  .sim-heading {
    display: flex;
    align-items: center;
    height: 44px;
    margin-bottom: 12px;
  }
  .sim-heading .text-button {
    font-size: 0.875rem;
    padding-left: 0;
  }

  .phone {
    height: calc(100dvh - 96px);
    min-height: 360px;
    max-height: 840px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .masthead + .sim-stage .sim-heading {
    display: none;
  }
  .masthead + .sim-stage .phone {
    height: calc(100dvh - var(--masthead-height) - 40px);
  }
  .training-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
    background: var(--soft);
    color: var(--primary-hover);
    font-size: 0.8125rem;
    font-weight: 500;
    flex-shrink: 0;
  }
  .timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding-left: 12px;
  }
  .phone-nav {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .phone-nav h2 {
    font-size: 1rem;
    font-weight: 600;
  }
  .phone-nav .tag {
    margin-right: 8px;
  }
  .nav-spacer {
    width: 44px;
  }
  .phone-scroll {
    overflow: auto;
    flex: 1;
    min-height: 0;
    overscroll-behavior: contain;
  }
  .phone-scroll,
  .chat-body {
    scrollbar-width: thin;
    scrollbar-color: oklch(0.78 0.008 153) transparent;
  }
  .conversation-hint {
    font-size: 0.8125rem;
    padding: 14px 20px;
    background: var(--surface);
    color: var(--muted);
  }
  .conversation {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    position: relative;
  }
  .conversation + .conversation:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 78px;
    border-top: 1px solid var(--line);
  }
  .conversation:hover {
    background: var(--bg);
  }
  .avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .avatar-0 {
    background: oklch(0.86 0.05 200);
    color: oklch(0.32 0.055 200);
  }
  .avatar-1 {
    background: oklch(0.9 0.075 85);
    color: oklch(0.34 0.06 85);
  }
  .avatar-2 {
    background: oklch(0.88 0.055 290);
    color: oklch(0.34 0.07 290);
  }
  .avatar-3 {
    background: oklch(0.86 0.055 155);
    color: oklch(0.34 0.06 155);
  }
  .agent-avatar {
    background: var(--primary);
    color: white;
    white-space: nowrap;
  }
  .conversation-content {
    flex: 1;
    min-width: 0;
    display: block;
  }
  .conversation-content strong {
    font-size: 1rem;
    font-weight: 600;
  }
  .conversation-content small {
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
  }
  .conversation-preview {
    display: block;
    font-size: 0.875rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
  }
  .unread-dot {
    background: var(--unread);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 56px;
    top: 14px;
    outline: 2px solid white;
  }
  .done-mark {
    width: 16px;
    height: 16px;
    color: var(--primary);
  }
  .phone-footer {
    background: var(--surface);
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }
  .chat-body {
    background: var(--chat);
    padding: 20px 16px 28px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .chat-date,
  .system-message {
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
    color: oklch(0.45 0 0);
    margin: 8px 26px 16px;
    overflow-wrap: anywhere;
  }
  .message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .message .avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 0.8125rem;
  }
  .message.outgoing {
    flex-direction: row-reverse;
  }
  .bubble {
    background: var(--surface);
    border-radius: 7px;
    max-width: calc(100% - 64px);
    padding: 10px 13px;
    position: relative;
    line-height: 1.65;
    overflow-wrap: anywhere;
    min-width: 38px;
  }
  .bubble:before {
    content: "";
    position: absolute;
    left: -5px;
    top: 13px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: inherit;
  }
  .bubble p {
    white-space: pre-wrap;
    position: relative;
  }
  .outgoing .bubble {
    background: var(--bubble);
  }
  .outgoing .bubble:before {
    left: auto;
    right: -5px;
  }
  .image-bubble {
    padding: 0;
    background: transparent !important;
    max-width: 140px;
    line-height: 0;
    overflow: hidden;
  }
  .image-bubble:before {
    display: none;
  }
  .image-button {
    border: 0;
    padding: 0;
    background: transparent;
    display: block;
    line-height: 0;
    max-width: 100%;
    min-height: 0;
  }
  .image-button img {
    display: block;
    border-radius: 5px;
  }
  .decision-marker {
    font-size: 0.75rem;
    text-align: center;
    color: var(--muted);
    padding: 12px 0;
    margin-top: 28px;
  }
  .composer {
    background: var(--surface);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }
  .composer-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
  }
  .draft-input {
    border: 0;
    border-radius: 8px;
    background: var(--bg);
    color: var(--muted);
    text-align: left;
    padding: 10px 12px;
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .send-button {
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: var(--surface);
    padding: 8px 16px;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
  }
  .send-button:disabled {
    background: var(--bg);
    color: var(--muted);
    opacity: 0.7;
  }
  .plus-button {
    position: relative;
    border: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
  }

  .plus-button {
    position: relative;
  }
  .plus-button.is-open {
    transform: rotate(45deg);
  }
  .plus-panel {
    display: flex;
    gap: 8px;
    padding: 20px 16px;
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
  .plus-panel button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .plus-panel button > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: white;
    color: var(--ink);
  }
  .draft-preview {
    margin: 12px 12px 0;
    padding: 0 12px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
  }
  .draft-label {
    font-size: 0.75rem;
    color: var(--primary);
    line-height: 1.3;
  }
  .draft-text {
    max-height: 100px;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.6;
  }
  .draft-image {
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.8125rem;
  }
  .draft-image img {
    width: 30px;
    height: 65px;
    object-fit: cover;
    object-position: top;
  }
  .training-actions {
    background: var(--surface);
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }
  .training-actions > span {
    color: var(--muted);
    font-size: 0.75rem;
  }
  .training-actions .hint-button {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.875rem;
  }
  .training-actions .primary {
    padding: 10px 14px;
    font-size: 0.875rem;
    gap: 10px;
  }
  .locked-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--soft);
    color: var(--primary);
    font-size: 0.8125rem;
    gap: 8px;
    flex-shrink: 0;
  }
  .locked-notice .icon {
    width: 16px;
    height: 16px;
  }
  .library-controls {
    padding: 16px 16px 0;
    background: white;
    flex-shrink: 0;
  }
  .search-field {
    display: flex;
    align-items: center;
    border-radius: 8px;
    background: var(--bg);
    padding: 0 10px;
    gap: 8px;
  }
  .search-field input {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 10px 0;
    font-weight: 400;
    font-size: 1rem;
  }
  .search-field input:focus-visible {
    outline: none;
  }
  .search-field:focus-within {
    outline: 2px solid var(--primary);
  }
  .search-field .icon {
    color: var(--muted);
    width: 18px;
    height: 18px;
  }
  .filters {
    display: flex;
    gap: 8px;
    padding: 14px 0;
  }
  .filter {
    padding: 6px 18px;
    min-height: 44px;
    border: 0;
    background: none;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.875rem;
  }
  .filter.active {
    background: var(--soft);
    color: var(--primary);
    font-weight: 600;
  }
  .favorite {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    background: var(--surface);
    text-align: left;
    padding: 20px;
    border-top: 1px solid var(--line);
  }
  .favorite:hover {
    background: var(--bg);
  }
  .favorite-type {
    width: 44px;
    height: 48px;
    background: var(--soft);
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--primary);
  }
  .favorite-type img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
  }
  .favorite-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .favorite-copy strong {
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .favorite-copy > span {
    font-size: 0.875rem;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
  }
  .favorite-copy small {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 3px;
  }
  .favorite > .icon {
    width: 16px;
    height: 16px;
    color: var(--muted);
    margin-top: 3px;
  }
  .detail-content {
    padding: 24px 20px;
  }
  .detail-content h2 {
    margin: 0 0 22px;
  }
  .detail-condition {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 22px;
  }
  .template-body {
    white-space: pre-wrap;
    line-height: 1.85;
    border-top: 1px solid var(--line);
    padding-top: 22px;
    overflow-wrap: anywhere;
  }
  .note {
    background: var(--bg);
    padding: 14px 16px;
    font-size: 0.875rem;
    line-height: 1.7;
    border-radius: 6px;
    color: var(--muted);
    margin: 18px 0;
  }
  .note.danger {
    color: var(--danger);
  }
  .guide-full {
    width: 100%;
  }
  .guide-full img {
    width: 100%;
  }
  .footer-note {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    margin-top: 8px;
  }
  .review-content {
    padding: 24px 20px;
  }
  .result-lead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 22px;
  }
  .result-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--soft);
    color: var(--primary);
    flex-shrink: 0;
  }
  .needs-work .result-icon {
    background: oklch(0.94 0.045 75);
    color: var(--warning);
  }
  .result-lead h2 {
    font-size: 1.125rem;
  }
  .result-lead p {
    font-size: 0.875rem;
    color: var(--muted);
    margin-top: 4px;
  }
  .result-lead p strong {
    font-size: 1.4rem;
    color: var(--ink);
  }
  .feedback-reasons {
    padding: 14px;
    background: oklch(0.96 0.02 75);
    color: var(--warning);
    font-size: 0.875rem;
    border-radius: 8px;
    margin-bottom: 24px;
  }
  .feedback-reasons p + p {
    margin-top: 6px;
  }
  .review-content h3 {
    font-size: 0.9375rem;
  }
  .checklist {
    list-style: none;
    padding: 0;
    margin: 12px 0 24px;
  }
  .checklist li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .check-state {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .check-state .icon {
    width: 16px;
    height: 16px;
  }
  .sent {
    background: var(--soft);
    color: var(--primary);
  }
  .missing {
    background: oklch(0.94 0.035 25);
    color: var(--danger);
  }
  .checklist strong {
    font-size: 0.875rem;
    font-weight: 500;
    display: block;
  }
  .checklist small {
    font-size: 0.75rem;
    color: var(--muted);
    display: block;
  }
  .explanation {
    font-size: 0.9375rem;
    line-height: 1.85;
    margin-top: 10px;
  }
  .review-content .secondary {
    margin-top: 24px;
  }
  .narrow {
    max-width: 800px;
  }
  .summary-heading {
    margin: 20px 0 28px;
  }
  .summary-heading h1 {
    margin: 14px 0 8px;
    font-size: 1.75rem;
  }
  .summary-heading p {
    font-size: 0.875rem;
  }
  .score-panel {
    display: flex;
    align-items: center;
    gap: 40px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px 30px;
  }
  .score-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .score-main strong {
    font-size: 3.5rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
  }
  .score-main > span {
    font-size: 0.8125rem;
    color: var(--muted);
    white-space: nowrap;
  }
  .score-details {
    flex: 1;
    padding-left: 28px;
    border-left: 1px solid var(--line);
    font-size: 0.8125rem;
  }
  .score-details p {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0;
    color: var(--muted);
  }
  .score-details strong {
    color: var(--ink);
    font-weight: 500;
  }
  .score-details strong.danger {
    color: var(--danger);
  }
  .results-section {
    margin-top: 32px;
  }
  .results-section h2 {
    font-size: 1.125rem;
    margin-bottom: 16px;
  }
  .result-list {
    border-top: 1px solid var(--line);
  }
  .result-list button {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
  .result-list strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .result-list small {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted);
    margin-top: 2px;
  }
  .result-mini {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .good {
    background: var(--soft);
    color: var(--primary);
  }
  .bad {
    background: oklch(0.94 0.04 75);
    color: var(--warning);
  }
  .result-points {
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.875rem;
  }
  .result-list button > .icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
  }
  .category-results {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    margin: 24px 0;
  }
  .category-results div {
    display: flex;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .category-results strong {
    font-weight: 500;
    color: var(--ink);
  }
  .summary-buttons {
    margin-top: 28px;
  }
  .history-stats {
    display: flex;
    gap: 40px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .history-stats div {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .history-stats strong {
    font-size: 1.75rem;
    font-weight: 600;
  }
  .history-stats span {
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .history-list {
    margin-top: 30px;
  }
  .history-list button {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    padding: 20px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    background: transparent;
  }
  .history-list strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
  }
  .history-list small {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .history-score {
    margin-left: auto;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary);
  }
  .history-score small {
    display: inline;
    font-size: 0.75rem;
    margin-left: 4px;
    font-weight: 400;
  }
  .empty {
    padding: 50px 24px;
    text-align: center;
    color: var(--muted);
  }
  .empty > .icon {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
  }
  .empty h2,
  .empty h3 {
    color: var(--ink);
    margin-bottom: 8px;
  }
  .empty p {
    font-size: 0.875rem;
    margin-bottom: 20px;
  }
  .empty .primary {
    width: auto;
    display: inline-flex;
    padding: 12px 20px;
    background: var(--primary);
    color: white;
  }
  .modal-copy {
    margin: 18px 0;
    font-size: 0.9375rem;
  }
  .modal-copy p + p {
    margin-top: 14px;
  }
  .modal-guide {
    margin-top: 20px;
    width: 100%;
  }
  .modal-copy label {
    font-size: 0.875rem;
  }
  .media-error {
    padding: 16px;
    line-height: 1.5;
    font-size: 0.875rem;
    display: block;
    color: var(--danger);
    background: white;
  }
  .admin-workspace {
    max-width: 1280px;
  }
  .admin-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--line);
    margin: 16px 0 26px;
    overflow-x: auto;
  }
  .admin-tabs button {
    padding: 12px 0;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 0.9375rem;
    white-space: nowrap;
    color: var(--muted);
  }
  .admin-tabs button.active {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
  }
  .admin-note {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    gap: 20px;
    margin-bottom: 18px;
  }
  .table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
  }
  table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
  }
  th {
    background: var(--bg);
    color: var(--muted);
    font-weight: 500;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  td,
  th {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  tr:last-child td {
    border: 0;
  }
  td strong {
    font-weight: 600;
  }
  td small {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    margin-top: 2px;
  }
  td .text-button {
    white-space: nowrap;
    font-size: 0.8125rem;
  }
  td .tag {
    white-space: nowrap;
  }
  .excerpt-cell {
    max-width: 340px;
    min-width: 220px;
    line-height: 1.7;
  }
  .published {
    background: var(--accent);
    color: oklch(0.3 0.07 155);
  }
  .admin-template-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .admin-template-list article {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    padding: 22px;
  }
  .admin-template-list h3 {
    font-size: 1rem;
  }
  .admin-template-list .muted {
    font-size: 0.8125rem;
    margin: 10px 0;
  }
  .template-excerpt {
    white-space: pre-wrap;
    font-size: 0.875rem;
    max-height: 140px;
    overflow: hidden;
    line-height: 1.75;
    color: var(--muted);
    margin-bottom: 20px;
  }
  .admin-template-list .secondary {
    font-size: 0.875rem;
  }
  .settings-form {
    max-width: 460px;
  }
  .settings-form .note {
    margin: 0;
  }
  .question-editor {
    background: white;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .editor-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 36px;
  }
  .message-editors {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }
  .message-editors label > span {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
  }
  .message-editors textarea {
    font-size: 0.875rem;
    min-height: 100px;
  }
  .editor-grid h3 {
    margin-bottom: 8px;
  }
  .editor-grid fieldset {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
  }
  .editor-grid legend {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0 5px;
  }
  .check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
    padding: 8px 0;
  }
  .check-label input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--primary);
  }
  .import-panel {
    max-width: 800px;
  }
  .import-panel h2 {
    margin-bottom: 12px;
  }
  .import-panel > .muted {
    font-size: 0.875rem;
  }
  .file-label {
    margin-top: 24px;
  }
  .file-label input {
    padding: 14px;
    background: white;
  }
  .import-range {
    display: flex;
    gap: 20px;
    margin: 24px 0;
  }
  .import-message {
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }
  .import-message small {
    color: var(--muted);
  }
  .import-message p {
    font-size: 0.9375rem;
    white-space: pre-wrap;
    margin-top: 6px;
    overflow-wrap: anywhere;
  }
  #import-preview {
    margin-bottom: 20px;
    max-height: 450px;
    overflow: auto;
  }
  .admin-workspace .workspace-head h1 {
    font-size: 1.75rem;
  }
}
@layer responsive {
  @media (max-width: 700px) {
    .top-nav {
      gap: 8px;
    }
    .top-nav .text-button {
      padding: 8px 5px;
    }
    .phone-footer {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .training-actions {
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .training-strip {
      padding-top: max(9px, env(safe-area-inset-top));
      font-size: 0.75rem;
    }
    .phone-nav {
      min-height: 55px;
    }
    .score-panel {
      gap: 20px;
      padding: 20px;
      flex-wrap: wrap;
    }
    .score-details {
      padding-left: 0;
      border: 0;
      flex: 1;
      min-width: 180px;
    }
    .score-main strong {
      font-size: 3rem;
    }
    .summary-heading h1 {
      font-size: 1.5rem;
    }
    .summary-buttons {
      flex-wrap: wrap;
    }
    .history-stats {
      gap: 24px;
      justify-content: space-between;
    }
    .history-stats strong {
      font-size: 1.4rem;
    }
    .history-stats span {
      font-size: 0.75rem;
    }
    .narrow > .workspace-head {
      align-items: flex-start;
      gap: 12px;
    }
    .narrow > .workspace-head .secondary {
      font-size: 0.8125rem;
      padding: 8px;
      white-space: nowrap;
    }
    .admin-workspace .workspace-head {
      flex-direction: column;
      align-items: flex-start;
    }
    .admin-workspace .workspace-head h1 {
      font-size: 1.5rem;
    }
    .admin-note {
      flex-direction: column;
      gap: 6px;
    }
    .admin-template-list {
      grid-template-columns: 1fr;
    }
    .editor-grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .question-editor {
      padding: 18px;
    }
    .admin-tabs {
      gap: 22px;
    }
    .question-editor .row h2 {
      font-size: 1rem;
    }
    .draft-text {
      max-height: 90px;
    }
    .result-lead h2 {
      font-size: 1rem;
    }
    .admin-workspace {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
  @media (max-width: 360px) {
    .workspace {
      padding-left: 16px;
      padding-right: 16px;
    }
    .brand {
      font-size: 1rem;
    }
    .masthead {
      padding: 0 14px;
    }
    .top-nav {
      gap: 4px;
    }
    .bubble {
      max-width: calc(100% - 52px);
      padding: 9px 10px;
    }
    .message {
      gap: 8px;
    }
    .message .avatar {
      width: 32px;
      height: 32px;
    }
    .training-actions .primary {
      padding: 10px;
      font-size: 0.8125rem;
    }
    .composer-line {
      gap: 4px;
    }
  }
}
@layer components {
  .message .image-bubble {
    width: 120px;
    max-width: 140px;
    flex-shrink: 0;
  }
  .message .image-bubble img {
    width: 120px;
    height: auto;
  }
}
@layer components {
  .training-strip > span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .timer {
    display: inline-block;
    min-width: 52px;
    color: var(--primary-hover);
  }
  .plus-button .icon {
    width: 24px;
    height: 24px;
    padding: 3px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-sizing: content-box;
  }
  .primary,
  .secondary {
    border-radius: 9px;
  }
  .training-actions .primary {
    min-width: 132px;
  }
  .training-actions > span {
    font-size: 0.8125rem;
  }
  .favorite-copy strong {
    font-size: 1rem;
  }
  .favorite-copy small {
    margin-top: 6px;
  }
  .detail-content {
    padding: 26px 24px;
  }
  .template-body {
    line-height: 1.9;
  }
  .detail-condition {
    line-height: 1.8;
  }
  .result-lead {
    padding-bottom: 22px;
  }
  .checklist li {
    padding: 15px 0;
  }
  .checklist strong {
    font-size: 0.9375rem;
  }
  .locked-notice {
    background: var(--bg);
    color: var(--muted);
  }
  .send-button:not(:disabled):hover {
    background: var(--primary-hover);
  }
  .phone-nav .icon-button:hover {
    background: var(--bg);
  }
}
@layer responsive {
  @media (max-width: 480px) {
    .brand-title {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      line-height: 1.4;
    }
    .brand-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
    }
    .masthead {
      padding-inline: 16px;
      gap: 8px;
    }
    .top-nav {
      gap: 4px;
      flex-shrink: 0;
    }
    .top-nav .text-button {
      min-width: 44px;
    }
    .entry-screen {
      padding: 32px 24px 56px;
    }
    .entry-actions {
      max-width: 360px;
      gap: 14px;
    }
    .entry-title {
      gap: 10px;
      margin-bottom: 22px;
    }
    .entry-brand {
      font-size: 1.625rem;
    }
    .entry-name {
      font-size: 1.125rem;
    }
    .entry-button {
      min-height: 164px;
      padding: 22px 18px 20px;
      font-size: 1.125rem;
    }
    .entry-icon {
      width: 44px;
      height: 44px;
    }
    .entry-icon .icon {
      width: 26px;
      height: 26px;
    }
    .entry-label {
      gap: 6px;
    }
    .entry-label .entry-arrow {
      width: 18px;
      height: 18px;
    }
    .entry-button[aria-busy="true"]::after {
      right: 18px;
      bottom: 26px;
    }
    .sim-stage {
      width: 100%;
      max-width: none;
      margin: 0;
    }
    .sim-heading {
      display: none;
    }
    .phone {
      height: 100dvh;
      max-height: none;
      min-height: 0;
      border: 0;
      border-radius: 0;
    }
    .masthead + .sim-stage .phone {
      height: calc(100dvh - var(--masthead-height));
    }
    .training-strip {
      padding-top: max(12px, env(safe-area-inset-top));
    }
    .phone-nav {
      min-height: 58px;
    }
    .phone-footer {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .training-actions {
      padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
  }
  @media (max-width: 340px) {
    .entry-screen {
      padding-inline: 20px;
    }
    .entry-actions {
      gap: 12px;
    }
    .entry-button {
      min-height: 152px;
      padding-inline: 16px;
      font-size: 1rem;
    }
    .entry-brand {
      font-size: 1.5rem;
    }
    .entry-name {
      font-size: 1rem;
    }
    .composer-line {
      gap: 4px;
      padding-inline: 8px;
    }
    .send-button {
      padding-inline: 12px;
    }
    .chat-body {
      padding-inline: 12px;
    }
  }
  @media (max-height: 560px) and (min-width: 481px) {
    .sim-stage {
      margin-block: 8px;
    }
    .sim-heading {
      margin-bottom: 4px;
    }
    .phone {
      height: calc(100dvh - 64px);
      min-height: 0;
    }
  }
}

@layer components {
  .business-brief { padding: 12px 16px; background: var(--soft); font-size: .875rem; line-height: 1.65; border-bottom: 1px solid var(--line); max-height: min(240px, 32dvh); flex-shrink: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; overflow-wrap: anywhere; }
  .business-brief h3 { margin: 0 0 6px; font-size: .875rem; font-weight: 600; }
  .brief-list { margin: 0; padding-left: 1.25em; list-style: disc; }
  .brief-list li + li { margin-top: 5px; }
  .choice-form input[readonly] { cursor: default; background: var(--bg); }
  .answer-choices { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
  .answer-choices legend { font-size: .875rem; font-weight: 500; margin-bottom: 10px; }
  .answer-choice { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 54px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400; overflow-wrap: anywhere; }
  .answer-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
  .choice-letter { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; font-weight: 600; }
  .answer-choice:has(input:checked) { border-color: var(--primary); background: var(--soft); }
  .answer-choice:has(input:checked) .choice-letter { color: white; background: var(--primary); border-color: var(--primary); }
  .answer-choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
  .answer-choices:disabled .answer-choice { cursor: default; }
  .inquiry-notification { margin: 0 0 20px; padding: 12px 14px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: .875rem; overflow-wrap: anywhere; }
  .inquiry-notification header { display: flex; align-items: center; gap: 10px; }
  .notification-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; color: white; background: oklch(.46 .14 252); }
  .inquiry-notification header strong { display: block; font-weight: 600; }
  .inquiry-notification header span:not(.notification-avatar) { display: block; margin-top: 2px; color: var(--muted); font-size: .75rem; }
  .inquiry-notification dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 12px 0 0; line-height: 1.5; }
  .inquiry-notification dt { color: var(--muted); }
  .inquiry-notification dd { margin: 0; }
  .inquiry-notification time { display: block; margin: 8px 0 10px; color: var(--muted); font-size: .75rem; }
  .notification-action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 0; background: none; border: 0; border-top: 1px solid var(--line); color: var(--primary-hover); text-align: left; font-size: .875rem; font-weight: 500; }
  .notification-action:hover { color: var(--primary); }
  .profile-content { padding: 24px 18px; }
  .profile-content h3 { margin:24px 0 12px; }
  .profile-identity { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
  .profile-identity > div { min-width:0; overflow-wrap:anywhere; }
  .sim-form { min-height:0; display:flex; flex-direction:column; flex:1; }
  .sim-form > .phone-scroll { flex:1; }
  .setting-row { width:100%; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; background:var(--surface); padding:12px 0; border:0; border-bottom:1px solid var(--line); }
  .switch { display:block; background:var(--muted); border-radius:16px; width:48px; height:28px; padding:3px; flex-shrink:0; }
  .switch i { display:block; background:white; width:22px; height:22px; border-radius:50%; transition:transform .18s ease-out; }
  .switch.on { background:var(--primary); }
  .switch.on i { transform:translateX(20px); }
  .member-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 10px; margin-bottom:28px; }
  .member-grid > div, .member-add { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; overflow-wrap:anywhere; }
  .member-grid small { width:100%; font-size:.75rem; }
  .member-add { background:none; border:0; min-height:64px; padding:0; }
  .member-add .icon { height:44px; width:44px; padding:10px; border:1px solid var(--line); border-radius:6px; }
  .selection-row { display:flex; flex-direction:row; align-items:center; min-height:72px; gap:12px; border-bottom:1px solid var(--line); cursor:pointer; }
  .selection-row input { width:20px; height:20px; flex:0 0 20px; accent-color:var(--primary); }
  .selection-row small { display:block; color:var(--muted); }
  .selection-row span:last-child { overflow-wrap:anywhere; min-width:0; }
  .inquiry-notes { padding:12px 0; font-size:.875rem; color:var(--muted); }
  .forward-preview { padding:14px; background:var(--bg); white-space:pre-wrap; font-size:.875rem; max-height:180px; overflow:auto; margin-bottom:16px; }
  .message-entry { position:relative; }
  .message-menu { display:block; margin:0 0 8px 50px; min-width:44px; min-height:44px; border:0; background:transparent; font-size:.75rem; color:var(--muted); }
  .message-entry:has(.outgoing) .message-menu { margin-left:auto; margin-right:50px; }
  .forwarded-label { display:block; text-align:right; margin-right:50px; color:var(--muted); }
  .operation-log { padding-left:22px; margin:16px 0 28px; }
  .operation-log li { padding:8px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
  .operation-log small { display:block; color:var(--muted); }
  .operation-editor { min-width:0; }
  .operation-editor > * { margin-bottom:16px; }
  .environment-section { min-width:0; }
  .environment-record { border-bottom:1px solid var(--line); padding:16px 0; display:grid; gap:12px; }
  .environment-record label small { font-weight:400; color:var(--muted); }
  .operation-editor input, .operation-editor select { min-width:0; width:100%; }
  .operation-editor .check-label input { width:18px; }
  .sim-form .phone-footer { flex-shrink:0; }
  .profile-content form { margin-bottom:20px; }
  @media (prefers-reduced-motion: reduce) { .switch i { transition:none; } }
}
@layer components {
  button.avatar { border:0; padding:0; min-width:44px; min-height:44px; }
  .phone-nav h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .phone-nav > .icon-button { flex-shrink:0; }
}