.shahdad-chat-mobile {
  --smc-bg: #edf5f2;
  --smc-surface: #ffffff;
  --smc-surface-2: #f4f8f7;
  --smc-text: #12373a;
  --smc-muted: #526b6d;
  --smc-border: #cadeda;
  --smc-primary: #166b61;
  --smc-primary-strong: #0e554d;
  --smc-on-primary: #ffffff;
  --smc-danger: #9c2f35;
  --smc-danger-bg: #fff0f0;
  --smc-warning: #72500f;
  --smc-warning-bg: #fff7e7;
  --smc-focus: #0b75a5;
  min-block-size: 100%;
  color: var(--smc-text);
  background: var(--smc-bg);
  font: inherit;
}
.shahdad-chat-mobile *, .shahdad-chat-mobile *::before, .shahdad-chat-mobile *::after { box-sizing: border-box; }
.shahdad-chat-mobile button, .shahdad-chat-mobile textarea { font: inherit; }
.shahdad-chat-mobile button { cursor: pointer; touch-action: manipulation; }
.shahdad-chat-mobile button:disabled, .shahdad-chat-mobile textarea:disabled { cursor: not-allowed; opacity: .52; }
.shahdad-chat-mobile :focus-visible { outline: 3px solid var(--smc-focus); outline-offset: 2px; }

.smc-screen { min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--smc-bg); overflow-x: clip; }
.smc-header {
  position: sticky; inset-block-start: 0; z-index: 10; min-block-size: 72px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--smc-surface) 94%, transparent);
  border-block-end: 1px solid var(--smc-border);
}
.smc-heading, .smc-header-actions, .smc-thread-actions, .smc-composer-row,
.smc-composer-note, .smc-message-meta, .smc-confirm > div { display: flex; align-items: center; }
.smc-heading { min-inline-size: 0; gap: 10px; }
.smc-heading h1 { margin: 1px 0 0; font-size: 1.18rem; line-height: 1.35; }
.smc-heading small { display: block; color: var(--smc-muted); font-size: .7rem; }
.smc-mark, .smc-empty-mark {
  inline-size: 44px; block-size: 44px; flex: 0 0 auto; border-radius: 15px;
  display: grid; place-items: center; color: var(--smc-on-primary);
  background: linear-gradient(145deg, var(--smc-primary), var(--smc-primary-strong));
  box-shadow: 0 8px 20px rgba(22, 107, 97, .22);
}
.smc-header-actions { gap: 8px; }
.smc-access { min-block-size: 34px; padding: 6px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: var(--smc-muted); background: var(--smc-surface-2); font-size: .68rem; font-weight: 750; }
.smc-access i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--smc-primary); }
.smc-icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; fill: currentColor; }

.smc-button, .smc-icon-button, .smc-send, .smc-cross-actions button, .smc-thread-list button {
  min-block-size: 44px; border: 1px solid transparent; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.smc-button { padding: 9px 13px; font-weight: 800; }
.smc-button.primary, .smc-send { color: var(--smc-on-primary); background: var(--smc-primary); }
.smc-button.subtle { color: var(--smc-text); background: var(--smc-surface); border-color: var(--smc-border); }
.smc-button.danger { color: #fff; background: var(--smc-danger); }
.smc-button.compact { min-block-size: 40px; padding: 7px 10px; }
.smc-icon-button { inline-size: 44px; padding: 0; color: var(--smc-text); background: var(--smc-surface); border-color: var(--smc-border); }
.smc-icon-button.danger { color: var(--smc-danger); }

.smc-main { flex: 1; min-block-size: 0; display: flex; flex-direction: column; inline-size: 100%; max-inline-size: 820px; margin-inline: auto; background: var(--smc-surface); }
.smc-alert { margin: 12px 14px 0; min-block-size: 48px; padding: 10px 12px; border: 1px solid; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; line-height: 1.7; font-size: .82rem; }
.smc-alert.error { color: var(--smc-danger); background: var(--smc-danger-bg); border-color: color-mix(in srgb, var(--smc-danger) 34%, transparent); }
.smc-alert.warning { color: var(--smc-warning); background: var(--smc-warning-bg); border-color: #e9cc8c; }

.smc-loading { flex: 1; min-block-size: 300px; padding: 28px; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--smc-muted); }
.smc-loading i { inline-size: min(72vw, 420px); block-size: 18px; border-radius: 9px; background: linear-gradient(100deg, var(--smc-surface-2) 30%, #dce9e6 48%, var(--smc-surface-2) 66%); background-size: 260% 100%; animation: smc-shimmer 1.25s ease infinite; }
.smc-loading i:last-child { inline-size: min(48vw, 260px); }
.smc-spinner { inline-size: 22px; block-size: 22px; border: 3px solid color-mix(in srgb, var(--smc-primary) 20%, transparent); border-block-start-color: var(--smc-primary); border-radius: 50%; animation: smc-spin .75s linear infinite; }

.smc-list-toolbar, .smc-thread-toolbar { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-block-end: 1px solid var(--smc-border); }
.smc-list-toolbar h2 { margin: 0; font-size: 1.08rem; }
.smc-list-toolbar p, .smc-thread-toolbar small { margin: 3px 0 0; display: block; color: var(--smc-muted); font-size: .72rem; line-height: 1.6; }
.smc-thread-toolbar > div:first-child { min-inline-size: 0; }
.smc-thread-toolbar strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smc-thread-actions { gap: 8px; }
.smc-thread-list { padding: 14px; display: grid; gap: 9px; }
.smc-thread-list button { inline-size: 100%; min-block-size: 64px; padding: 11px 13px; align-items: flex-start; flex-direction: column; gap: 3px; text-align: start; color: var(--smc-text); background: var(--smc-surface-2); border-color: var(--smc-border); }
.smc-thread-list strong { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smc-thread-list small { color: var(--smc-muted); font-size: .72rem; }

.smc-confirm { margin: 12px 14px 0; padding: 12px; border: 1px solid var(--smc-border); border-radius: 14px; background: var(--smc-warning-bg); display: grid; gap: 12px; }
.smc-confirm > div { justify-content: flex-end; gap: 8px; }
.smc-log { flex: 1; min-block-size: 270px; overflow-y: auto; overscroll-behavior: contain; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-block: 20px; }
.smc-empty { margin: auto; max-inline-size: 520px; padding: 34px 18px; text-align: center; }
.smc-empty-mark { margin: 0 auto 15px; inline-size: 56px; block-size: 56px; border-radius: 19px; }
.smc-empty h2 { margin: 0 0 7px; font-size: 1.3rem; }
.smc-empty p { margin: 0; color: var(--smc-muted); line-height: 1.9; }
.smc-message { max-inline-size: 90%; padding: 12px 13px; border: 1px solid var(--smc-border); border-radius: 17px; line-height: 1.9; overflow-wrap: anywhere; }
.smc-message.user { align-self: flex-start; color: #fff; background: var(--smc-primary); border-color: var(--smc-primary); border-start-start-radius: 6px; }
.smc-message.assistant { align-self: flex-end; background: var(--smc-surface-2); border-end-end-radius: 6px; }
.smc-message-meta { justify-content: space-between; gap: 14px; margin-block-end: 5px; font-size: .68rem; opacity: .82; }
.smc-message p { margin: 0; white-space: pre-wrap; }
.smc-message time { white-space: nowrap; }
.smc-cross-actions { margin-block-start: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
.smc-cross-actions button { min-block-size: 44px; padding: 8px 10px; color: var(--smc-primary-strong); background: var(--smc-surface); border-color: var(--smc-border); font-weight: 800; }
.smc-receiving { align-self: flex-end; min-block-size: 48px; padding: 10px 13px; border-radius: 15px; display: flex; align-items: center; gap: 9px; color: var(--smc-muted); background: var(--smc-surface-2); }

.smc-composer { position: sticky; inset-block-end: 0; padding: 11px 12px max(12px, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--smc-border); background: color-mix(in srgb, var(--smc-surface) 96%, transparent); }
.smc-composer > label { display: block; margin-block-end: 6px; font-size: .78rem; font-weight: 850; }
.smc-composer-row { align-items: stretch; gap: 9px; }
.smc-composer textarea { flex: 1; min-inline-size: 0; min-block-size: 52px; max-block-size: 138px; resize: vertical; padding: 12px 13px; color: var(--smc-text); background: var(--smc-bg); border: 1px solid var(--smc-border); border-radius: 15px; font-size: 16px; line-height: 1.65; }
.smc-composer textarea::placeholder { color: color-mix(in srgb, var(--smc-muted) 84%, transparent); }
.smc-send { min-inline-size: 88px; padding: 9px 13px; font-weight: 850; }
.smc-composer-note { justify-content: space-between; align-items: flex-start; gap: 12px; margin-block-start: 6px; color: var(--smc-muted); font-size: .66rem; line-height: 1.6; }
.smc-composer-note span:first-child { max-inline-size: 58ch; }
.smc-composer-note span:last-child { direction: ltr; white-space: nowrap; }

@keyframes smc-spin { to { transform: rotate(360deg); } }
@keyframes smc-shimmer { to { background-position: -160% 0; } }

@media (max-width: 390px) {
  .smc-header { padding-inline: 12px; }
  .smc-access { display: none; }
  .smc-header-actions .smc-button { inline-size: 44px; padding: 0; font-size: 0; }
  .smc-list-toolbar { align-items: flex-start; }
  .smc-list-toolbar .smc-button { inline-size: 44px; padding: 0; font-size: 0; }
  .smc-thread-toolbar small { max-inline-size: 62vw; }
  .smc-send { inline-size: 52px; min-inline-size: 52px; padding: 0; font-size: 0; }
  .smc-composer-note span:first-child { display: none; }
}

@media (min-width: 768px) {
  .smc-screen { padding: 18px; }
  .smc-header, .smc-main { inline-size: min(820px, 100%); margin-inline: auto; }
  .smc-header { border: 1px solid var(--smc-border); border-block-end: 0; border-radius: 22px 22px 0 0; }
  .smc-main { min-block-size: calc(100dvh - 126px); border: 1px solid var(--smc-border); border-radius: 0 0 22px 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(11, 49, 49, .1); }
  .smc-log { padding-inline: 34px; }
  .smc-message { max-inline-size: 78%; }
}

@media (prefers-color-scheme: dark) {
  .shahdad-chat-mobile {
    --smc-bg: #0d1d1f; --smc-surface: #122629; --smc-surface-2: #193134;
    --smc-text: #eef7f5; --smc-muted: #afc4c2; --smc-border: #355052;
    --smc-primary: #4aa99c; --smc-primary-strong: #2f8b80; --smc-on-primary: #071a19;
    --smc-danger: #ff9ba0; --smc-danger-bg: #3b1b1e; --smc-warning: #f3d391;
    --smc-warning-bg: #342a17; --smc-focus: #7bd5ff;
  }
  .smc-message.user { color: #071a19; }
  .smc-loading i { background: linear-gradient(100deg, var(--smc-surface-2) 30%, #294245 48%, var(--smc-surface-2) 66%); background-size: 260% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .shahdad-chat-mobile *, .shahdad-chat-mobile *::before, .shahdad-chat-mobile *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}