/* SecureTalk product shell — visible quality pass */
:root {
  --st-brand: #2AABEE;
  --st-brand-dark: #1E96D1;
  --st-bg: #ffffff;
  --st-bg-soft: #f4f4f5;
  --st-text: #0f0f0f;
  --st-muted: #8e8e93;
  --st-line: rgba(0,0,0,.08);
  --st-green-chat: #b7d4a8;
  --st-radius: 16px;
  --st-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
}

html, body {
  font-family: var(--st-font);
  background: #0b141a;
  color: var(--st-text);
}

.app { min-height: 100%; }
.shell {
  background: var(--st-bg);
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
}

/* Auth */
.screen-auth {
  background: linear-gradient(165deg, #dcefff 0%, #f7f8fa 42%, #f7f8fa 100%) !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
}
.auth-wrap {
  width: min(400px, 100%);
  margin: 28px auto 40px;
  padding: 0 18px;
}
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-logo {
  width: 88px; height: 88px; border-radius: 22px;
  box-shadow: 0 14px 36px rgba(42,171,238,.35);
  margin-bottom: 12px;
}
.auth-brand h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 760;
  letter-spacing: -0.03em;
}
.auth-brand .profile-sub {
  margin-top: 6px;
  color: var(--st-muted);
  font-size: 14px;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(120,120,128,.12);
  border-radius: 14px;
  margin-bottom: 14px;
}
.auth-tabs button {
  border-radius: 11px;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 600;
  color: #3a3a3c;
}
.auth-tabs button.active {
  background: #fff;
  color: var(--st-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.auth-form {
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(15,23,42,.08);
  border: 1px solid rgba(255,255,255,.8);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-form label {
  font-size: 12px;
  font-weight: 600;
  color: #636366;
  gap: 6px;
}
.auth-form input, .auth-form textarea {
  border: 1px solid var(--st-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  background: #fafafa;
}
.auth-form input:focus, .auth-form textarea:focus {
  background: #fff;
  border-color: rgba(42,171,238,.55);
  box-shadow: 0 0 0 4px rgba(42,171,238,.16);
  outline: none;
}
.primary-btn, .auth-form button.primary-btn, button.primary-btn {
  background: linear-gradient(180deg, #3bb6f3, var(--st-brand));
  color: #fff !important;
  border: none;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(42,171,238,.35);
}
.form-hint { margin: 0; font-size: 12px; color: var(--st-muted); text-align: center; }
.auth-error {
  background: #ffe9e9;
  color: #c62828;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
}

/* Lists */
.screen-chats-list, .screen-contacts, .screen-settings, .screen-devices, .screen-calls {
  background: #fff !important;
}
.page-header h1 {
  font-size: 32px !important;
  font-weight: 780 !important;
  letter-spacing: -0.03em;
}
.chip-btn {
  background: rgba(42,171,238,.12);
  color: var(--st-brand);
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
}
.chat-row {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--st-line) !important;
  background: #fff !important;
}
.chat-row .avatar {
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, #5ac8fa, #2AABEE) !important;
  font-weight: 700;
}
.chat-row-top strong { font-size: 16px; }
.search-wrap input {
  background: var(--st-bg-soft) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 16px !important;
  padding: 12px 16px !important;
}

/* Chat */
.screen-chat {
  background:
    linear-gradient(rgba(140, 170, 120, 0.25), rgba(140, 170, 120, 0.25)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.2) 0 2px, transparent 3px),
    linear-gradient(180deg, #c4d6b5, #8eab7c) !important;
  background-size: auto, 22px 22px, auto !important;
}
.chat-header {
  background: rgba(247,248,250,.94) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--st-line);
}
.peer-pill {
  background: rgba(255,255,255,.7) !important;
}
.msg-out .bubble {
  background: #effdde !important;
  border-radius: 14px 14px 5px 14px !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
}
.msg-in .bubble {
  background: #fff !important;
  border-radius: 14px 14px 14px 5px !important;
}
.composer {
  background: rgba(247,248,250,.96) !important;
  border-top: 1px solid var(--st-line);
}
.composer-field {
  background: #fff !important;
  border: 1px solid var(--st-line) !important;
  min-height: 42px;
}
#btn-send {
  background: var(--st-brand) !important;
  color: #fff !important;
  border-radius: 50%;
}

.tabbar {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--st-line) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
}
.tab.active { color: var(--st-brand) !important; }

.empty-card {
  border-radius: 20px !important;
  padding: 32px 22px !important;
  box-shadow: 0 12px 40px rgba(15,23,42,.08) !important;
}
.empty-card .primary-btn { width: 100%; }

#btn-toggle-help {
  margin-top: 14px;
  color: var(--st-brand);
  font-weight: 600;
}
.help-card { border-radius: 18px !important; }

@media (min-width: 900px) {
  body { background: #0e1621; }
  .shell { box-shadow: none; }
}

/* Telegram-like settings + tabbar (no emoji) */
.i { width: 18px; height: 18px; display: block; }
.row-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  flex-shrink: 0;
}
.row-icon .i { width: 16px; height: 16px; }
.row-icon.blue { background: #2AABEE !important; }
.row-icon.green { background: #34c759 !important; }
.row-label { flex: 1; text-align: left; font-size: 16px; }
.profile-hero.tg {
  padding: 8px 16px 22px;
  text-align: center;
}
.profile-hero.tg .brand-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 28px rgba(42,171,238,.28);
  margin: 0 auto 10px;
  display: block;
  background: #2AABEE;
}
.profile-hero.tg h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}
.settings-top.tg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 12px;
  min-height: 44px;
}
.settings-top.tg .text-btn {
  font-size: 16px;
  font-weight: 500;
  color: #2AABEE;
}

.tabbar.tg {
  left: 10px !important;
  right: 10px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  height: 56px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
}
.tabbar.tg .tab {
  flex: 1;
  gap: 2px;
  font-size: 10px;
  font-weight: 500;
  color: #8e8e93;
  padding: 6px 0;
}
.tabbar.tg .tab-ico {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: inherit;
}
.tabbar.tg .tab-ico .i { width: 22px; height: 22px; }
.tabbar.tg .tab.active {
  color: #2AABEE !important;
}
.tabbar.tg .tab.active .tab-ico {
  background: transparent !important;
  padding: 0 !important;
}
.tab-avatar-img {
  border-radius: 50%;
  overflow: hidden;
}
.tab-avatar-img img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
}
.search-fab { display: none !important; }

#btn-chat-call .i { width: 20px; height: 20px; color: #2AABEE; }
#btn-send {
  background: #2AABEE !important;
  color: #fff !important;
}
#btn-send .i { width: 18px; height: 18px; }

@media (min-width: 900px) {
  .tabbar.tg {
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0 !important;
    background: #0e1621 !important;
    border: none !important;
    box-shadow: none !important;
  }
  .tabbar.tg .tab { color: #8b9bab; }
  .tabbar.tg .tab.active { color: #fff !important; }
}
.build-stamp {
  margin: 8px 0 0;
  font-size: 11px;
  color: #8e8e93;
  letter-spacing: 0.04em;
}

/* [hidden] must beat .tabbar.tg { display:flex !important } */
#main-tabbar[hidden],
.tabbar.tg[hidden],
.tabbar[hidden] {
  display: none !important;
}

/* Auth: full-screen, no chrome peeking */
.shell:has(#screen-auth:not([hidden])) #main-tabbar {
  display: none !important;
}
.screen-auth {
  padding-bottom: 24px !important;
}

/* Never show desktop empty hint on phone / during auth */
#desktop-empty {
  display: none !important;
}
@media (min-width: 900px) {
  .shell:not(:has(#screen-auth:not([hidden]))) #desktop-empty {
    display: grid !important;
  }
  .shell.desktop-detail #desktop-empty {
    display: none !important;
  }
}

/* Aligned to telegram-tt Auth.scss proportions (not MTProto) */
.screen-auth {
  background: #fff !important;
  min-height: 100%;
}
.auth-wrap {
  width: 100%;
  max-width: 25.5rem;
  margin: 0 auto;
  padding: 4.5rem 1rem 2rem !important;
  text-align: center;
}
.auth-brand { margin-bottom: 0; }
.auth-logo {
  width: 7.5rem !important;
  height: 7.5rem !important;
  margin: 0 auto 1.75rem !important;
  border-radius: 1.5rem !important;
  box-shadow: none !important;
}
.auth-brand h1 {
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.auth-brand .profile-sub {
  margin: 0.5rem 0 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
  color: #707579 !important;
}
.build-stamp { margin-top: 0.75rem !important; }
.auth-tabs {
  margin: 2rem auto 0 !important;
  max-width: 100%;
}
.auth-form {
  margin-top: 1.25rem !important;
  text-align: left;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.auth-form input, .auth-form textarea {
  background: #fff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 12px !important;
  min-height: 54px;
  font-size: 1rem !important;
}
.auth-form .primary-btn {
  margin-top: 0.5rem;
  text-transform: none;
  border-radius: 12px !important;
  min-height: 48px;
  box-shadow: none !important;
  background: #2AABEE !important;
}
#btn-toggle-help {
  margin-top: 1.5rem !important;
}
.help-card {
  text-align: left;
  margin-top: 0.75rem;
  border: 1px solid #eee;
  box-shadow: none !important;
}
@media (min-width: 600px) {
  .auth-wrap { padding-top: 6rem !important; }
  .auth-logo {
    width: 10rem !important;
    height: 10rem !important;
    margin-bottom: 2.5rem !important;
  }
  .auth-brand h1 { font-size: 2rem !important; line-height: 1.5 !important; }
  .auth-brand .profile-sub { font-size: 1rem !important; margin-bottom: 0.5rem !important; }
}