/* ThaiDai v3 screens — splash, search, order detail with timeline+chat,
 * notifications sheet, success page.
 * Port of /Users/macbook/Downloads/design_handoff_thaidai/screens-v3.css.
 * Variable rename: --td-mute → --td-text-mute, --td-panel → --td-surface.
 */

/* ─── Splash ───────────────────────────────────────────────────── */
.td-splash {
  position: fixed;
  inset: 0;
  background: var(--td-bg);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  animation: td-fade-in 200ms ease;
}
.td-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(232,196,106,0.6), transparent 50%),
    radial-gradient(1px 1px at 80% 20%, rgba(232,196,106,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 35% 70%, rgba(232,196,106,0.4), transparent 50%),
    radial-gradient(1px 1px at 65% 60%, rgba(232,196,106,0.5), transparent 50%),
    radial-gradient(2px 2px at 90% 80%, rgba(232,196,106,0.4), transparent 50%);
  pointer-events: none;
  animation: td-fade-in 600ms ease;
}
.td-splash__medallion {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--td-gold);
  box-shadow:
    0 0 0 6px rgba(212,164,55,0.18),
    0 20px 50px rgba(212,164,55,0.30);
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: var(--td-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.td-splash__medallion img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.td-splash__medallion-fallback {
  font-family: var(--td-font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--td-gold);
}
.td-splash__brand {
  margin-top: 22px;
  font-family: var(--td-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--td-text);
  position: relative;
  z-index: 1;
}
.td-splash__brand em { color: var(--td-gold); font-style: italic; font-weight: 500; }
.td-splash__sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--td-text-mute);
  position: relative;
  z-index: 1;
}
.td-splash__loader {
  margin-top: 28px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--td-line);
  border-top-color: var(--td-gold);
  border-radius: 50%;
  animation: td-splash-spin 0.8s linear infinite;
  position: relative;
  z-index: 1;
}
@keyframes td-splash-spin { to { transform: rotate(360deg); } }
.td-splash.is-leaving { animation: td-fade-out 250ms ease forwards; }

/* ─── Search ───────────────────────────────────────────────────── */
.td-search {
  position: fixed;
  inset: 0;
  background: var(--td-bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  animation: td-fade-in 200ms ease;
}
.td-search__bar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 18px 18px 14px;
  background: var(--td-bg);
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--td-line);
}
.td-search__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--td-surface);
  border: 1px solid var(--td-line);
  border-radius: 99px;
  height: 44px;
  transition: border-color var(--td-anim-fast) ease, box-shadow var(--td-anim-fast) ease;
}
.td-search__input-wrap:focus-within {
  border-color: var(--td-gold);
  box-shadow: 0 0 0 3px var(--td-gold-glow);
}
.td-search__input-wrap input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--td-text);
  font-family: var(--td-font-ui);
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.td-search__input-wrap input::placeholder { color: var(--td-text-mute); }
.td-search__cancel {
  background: none;
  border: 0;
  color: var(--td-gold);
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
}
.td-search__body { flex: 1; overflow-y: auto; }
.td-search__section-h {
  padding: 18px 22px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--td-text-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.td-search__section-h .clear {
  font-size: 11px;
  color: var(--td-gold);
  cursor: pointer;
  background: none;
  border: 0;
  font-family: var(--td-font-ui);
  padding: 0;
}
.td-search__recents { padding: 0 22px; }
.td-search__recent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--td-line-soft);
  cursor: pointer;
  font-size: 14px;
  color: var(--td-text);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  text-align: left;
}
.td-search__recent:last-child { border-bottom: 0; }
.td-search__recent:hover { color: var(--td-gold); }
.td-search__recent-arrow { color: var(--td-text-mute); margin-left: auto; }
.td-search__results { padding: 8px 16px 80px; }
.td-search__hit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--td-surface);
  border: 1px solid var(--td-line);
  border-radius: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  width: 100%;
  font-family: var(--td-font-ui);
  text-align: left;
  transition: border-color var(--td-anim-fast) ease;
}
.td-search__hit:hover { border-color: var(--td-gold-soft); }
.td-search__hit-icon { font-size: 22px; flex-shrink: 0; }
.td-search__hit-body { flex: 1; min-width: 0; }
.td-search__hit-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--td-text); }
.td-search__hit-title mark {
  background: var(--td-gold-glow);
  color: var(--td-gold);
  padding: 0 2px;
  border-radius: 3px;
}
.td-search__hit-meta { font-size: 11px; color: var(--td-text-mute); }
.td-search__hit-price {
  font-family: var(--td-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--td-gold);
  flex-shrink: 0;
}
.td-search__empty { padding: 60px 30px; text-align: center; color: var(--td-text-mute); }
.td-search__empty-icon { font-size: 38px; margin-bottom: 12px; opacity: 0.5; }
.td-search__empty h3 { font-family: var(--td-font-display); font-size: 18px; color: var(--td-text); margin: 0 0 6px; font-weight: 600; }
.td-search__empty p { font-size: 13px; margin: 0; }

/* ─── Order Detail ─────────────────────────────────────────────── */
.td-od {
  position: fixed;
  inset: 0;
  background: var(--td-bg);
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  animation: td-fade-in 200ms ease;
}
.td-od__topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--td-bg);
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--td-line-soft);
}
.td-od__topbar .td-back-btn { margin-bottom: 0; }
.td-od__hero {
  position: relative;
  padding: 28px 22px 24px;
  background: linear-gradient(180deg, var(--td-bg-elev) 0%, var(--td-bg) 100%);
  overflow: hidden;
}
.td-od__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, var(--td-gold-glow), transparent 50%);
  pointer-events: none;
}
.td-od__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(212,164,55,0.16);
  border: 1px solid rgba(212,164,55,0.4);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--td-gold);
  margin-bottom: 14px;
  position: relative;
}
.td-od__status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--td-gold);
  box-shadow: 0 0 8px var(--td-gold);
  animation: td-pulse 1.4s ease-in-out infinite;
}
.td-od__hero-title {
  font-family: var(--td-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 6px;
  position: relative;
}
.td-od__hero-id {
  font-family: var(--td-font-mono);
  font-size: 12px;
  color: var(--td-text-mute);
  position: relative;
}
.td-od__hero-meta {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  position: relative;
}
.td-od__hero-meta > div { flex: 1; min-width: 0; }
.td-od__hero-meta-l {
  font-size: 10px;
  color: var(--td-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.td-od__hero-meta-v {
  font-size: 14px;
  font-weight: 600;
  color: var(--td-text);
  font-family: var(--td-font-ui);
}
.td-od__hero-meta-v.mono { font-family: var(--td-font-mono); color: var(--td-gold); }

/* timeline */
.td-od__section { padding: 22px 22px 8px; }
.td-od__section-h {
  font-family: var(--td-font-display);
  font-size: 18px;
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.td-od__tl { padding: 0 22px; position: relative; }
.td-od__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding-bottom: 22px;
  position: relative;
}
.td-od__step-rail { display: flex; flex-direction: column; align-items: center; }
.td-od__step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--td-line);
  background: var(--td-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 2;
}
.td-od__step--done .td-od__step-dot {
  background: var(--td-gold);
  border-color: var(--td-gold);
  color: #0a1426;
}
.td-od__step--done .td-od__step-dot::after {
  content: '✓';
  font-size: 12px;
  font-weight: 700;
}
.td-od__step--active .td-od__step-dot {
  border-color: var(--td-gold);
  box-shadow: 0 0 0 4px rgba(212,164,55,0.18);
  animation: td-pulse 1.4s ease-in-out infinite;
}
.td-od__step--active .td-od__step-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--td-gold);
}
.td-od__step--cancelled .td-od__step-dot {
  background: var(--td-danger);
  border-color: var(--td-danger);
  color: #1a1003;
}
.td-od__step-line {
  flex: 1;
  width: 2px;
  background: var(--td-line);
  margin-top: 2px;
  min-height: 16px;
}
.td-od__step--done .td-od__step-line { background: var(--td-gold); }
.td-od__step:last-child .td-od__step-line { display: none; }
.td-od__step-when {
  font-size: 11px;
  color: var(--td-text-mute);
  margin-bottom: 2px;
  font-family: var(--td-font-mono);
}
.td-od__step-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.td-od__step-text { font-size: 12px; color: var(--td-text-mute); line-height: 1.5; }
.td-od__step--active .td-od__step-title { color: var(--td-gold); }

/* chat */
.td-od__chat {
  margin: 8px 22px;
  padding: 16px;
  background: var(--td-surface);
  border: 1px solid var(--td-line);
  border-radius: 16px;
}
.td-od__chat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.td-od__chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--td-gold), var(--td-gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #0a1426;
  font-size: 14px;
  font-family: var(--td-font-display);
  flex-shrink: 0;
}
.td-od__chat-name { font-size: 13px; font-weight: 600; }
.td-od__chat-role {
  font-size: 10px;
  color: var(--td-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.td-od__chat-bubble {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  word-wrap: break-word;
}
.td-od__chat-bubble--manager {
  background: rgba(212,164,55,0.08);
  border: 1px solid rgba(212,164,55,0.2);
  border-top-left-radius: 4px;
}
.td-od__chat-bubble--client {
  background: var(--td-surface-2);
  border: 1px solid var(--td-line);
  border-top-right-radius: 4px;
  margin-left: 36px;
}
.td-od__chat-bubble--system {
  background: transparent;
  border: 0;
  text-align: center;
  font-size: 11px;
  color: var(--td-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.td-od__chat-when {
  font-size: 10px;
  color: var(--td-text-mute);
  font-family: var(--td-font-mono);
  margin-top: 2px;
  padding-left: 4px;
}
.td-od__chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: var(--td-bg);
  border: 1px solid var(--td-line);
  border-radius: 99px;
  margin-top: 8px;
}
.td-od__chat-input input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--td-text);
  font-family: var(--td-font-ui);
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.td-od__chat-input input::placeholder { color: var(--td-text-mute); }
.td-od__chat-send {
  width: 32px;
  height: 32px;
  background: var(--td-gold);
  border: 0;
  border-radius: 50%;
  color: #0a1426;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform var(--td-anim-fast) ease;
}
.td-od__chat-send:hover { transform: scale(1.05); }
.td-od__chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.td-od__chat-empty {
  text-align: center;
  font-size: 12px;
  color: var(--td-text-mute);
  padding: 18px 0 14px;
}

/* ─── Notifications sheet ──────────────────────────────────────── */
.td-notif__list { padding: 4px 16px 0; }
.td-notif__item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--td-surface);
  border: 1px solid var(--td-line);
  border-radius: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;
  width: 100%;
  font-family: var(--td-font-ui);
  text-align: left;
}
.td-notif__item.is-unread {
  background: rgba(212,164,55,0.06);
  border-color: rgba(212,164,55,0.25);
}
.td-notif__item.is-unread::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--td-gold);
  box-shadow: 0 0 6px var(--td-gold);
}
.td-notif__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--td-bg);
  border: 1px solid var(--td-line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.td-notif__body { flex: 1; min-width: 0; }
.td-notif__title { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--td-text); }
.td-notif__text { font-size: 12px; color: var(--td-text-mute); line-height: 1.5; }
.td-notif__when {
  font-size: 10px;
  color: var(--td-text-mute);
  margin-top: 6px;
  font-family: var(--td-font-mono);
}
.td-notif__empty { padding: 60px 30px; text-align: center; color: var(--td-text-mute); }
.td-notif__empty-art { font-size: 36px; margin-bottom: 14px; opacity: 0.6; }
.td-notif__empty h3 {
  font-family: var(--td-font-display);
  font-size: 18px;
  color: var(--td-text);
  margin: 0 0 6px;
  font-weight: 600;
}
.td-notif__empty p { font-size: 13px; margin: 0; }