/* Veb-pochta telefonda (elastic: html.layout-phone) — o'qish va bosish qulay bo'lsin.
   Shriftlar kattaroq, mavzu 2 qatorgacha, bosiladigan joylar ≥ 44px, pastki ikonkali panel. */

/* ---------- Umumiy shrift ---------- */
html.layout-phone body { font-size: 15px; }
html.layout-phone .header .header-title { font-size: 17px; }
html.layout-phone input.form-control, html.layout-phone select.form-control, html.layout-phone textarea.form-control,
html.layout-phone .recipient-input input, html.layout-phone .searchbar input { font-size: 16px; }   /* iOS fokusda kattalashtirmaydi */

/* ---------- Xatlar ro'yxati ---------- */
html.layout-phone #messagelist tbody tr td.subject { padding-top: .55rem; padding-bottom: .6rem; line-height: 1.35; }
html.layout-phone #messagelist tbody tr td.subject span.fromto { font-size: 14px; line-height: 1.5; color: #4a5357; }
html.layout-phone #messagelist tbody tr.unread td.subject span.fromto { color: #1f2629; font-weight: 700; }
html.layout-phone #messagelist tbody tr td.subject span.date { font-size: 13px; line-height: 1.5; }
html.layout-phone #messagelist tbody tr td.subject span.subject { font-size: 15.5px; line-height: 1.35; }
html.layout-phone #messagelist tbody tr td.subject span.subject a {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.35;
}
html.layout-phone #messagelist tbody tr td.subject span.subject { display: flex; align-items: flex-start; margin-top: .1rem; }
html.layout-phone #messagelist tbody tr td.subject span.subject a span { line-height: 1.35; }
html.layout-phone #messagelist tbody tr td.subject span.fromto,
html.layout-phone #messagelist tbody tr td.subject span.date { line-height: 1.6; }
html.layout-phone #messagelist tbody tr td.subject span.subject span.msgicon.status { align-self: flex-start; margin-top: .1rem; }
html.layout-phone #messagelist td.flags span { min-width: 1.6rem; }
html.dark-mode.layout-phone #messagelist tbody tr td.subject span.fromto { color: #c5cdd0; }
html.dark-mode.layout-phone #messagelist tbody tr.unread td.subject span.fromto { color: #fff; }

/* Papkalar va kontaktlar ro'yxati — kattaroq qatorlar */
html.layout-phone #folderlist-content li a, html.layout-phone .listing li > a, html.layout-phone .listing li > div > a { font-size: 15.5px; }
html.layout-phone table.listing td { font-size: 15px; }

/* ---------- Xatni o'qish ---------- */
html.layout-phone #message-header h2.subject { font-size: 19px; line-height: 1.3; }
html.layout-phone #messagebody, html.layout-phone .message-partheaders, html.layout-phone #message-header .header { font-size: 15px; }
html.layout-phone #messagebody .message-part div.pre { font-size: 15px; line-height: 1.5; }
/* Keng HTML xatlar ekrandan chiqib ketmasin */
html.layout-phone #messagebody img { max-width: 100% !important; height: auto !important; }
html.layout-phone #messagebody table { max-width: 100% !important; }
html.layout-phone #messagebody .message-htmlpart { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Pastki panel (elastic: xat / yozish ekranida) ---------- */
html.layout-phone .footer.content-frame-navigation { height: auto; min-height: 3.6rem; padding-bottom: env(safe-area-inset-bottom); }
html.layout-phone .footer.content-frame-navigation a.button,
html.layout-phone .footer.content-frame-navigation .buttons a { min-width: 3.4rem; padding: .35rem .15rem; }
html.layout-phone .footer.content-frame-navigation a.button .inner,
html.layout-phone .footer.content-frame-navigation .buttons a .inner {
    font-size: 11.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 4.6rem; display: block;
}
html.layout-phone .footer.content-frame-navigation .buttons { display: flex; flex: 1; justify-content: space-around; }
html.layout-phone .footer.content-frame-navigation .buttons a.send { color: #8a682a; font-weight: 700; }

/* ---------- Xat yozish ---------- */
html.layout-phone #compose-content .form-group > label, html.layout-phone #compose-headers label { font-size: 14px; }
html.layout-phone #compose-content .tox-tinymce { min-height: 55vh; }
html.layout-phone #composebody { min-height: 55vh; font-size: 16px; }

/* ---------- Yon menyu (☰) ---------- */
html.layout-phone #layout-menu { width: 78vw !important; max-width: 20rem; }
html.layout-phone #layout-menu #logo { max-width: calc(100% - 3rem); max-height: 2.6rem; object-fit: contain; }
html.layout-phone #layout-menu .menu a { font-size: 16px; padding-top: .9rem; padding-bottom: .9rem; white-space: nowrap; }

/* ---------- Ilova pastki paneli (ro'yxat, papkalar, kontaktlar, sozlamalar) ---------- */
#hp-tabbar { display: none; }
html.layout-phone #hp-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    height: calc(3.75rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid #e3e6e8; box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
html.layout-phone.hp-tabbar-hidden #hp-tabbar { display: none; }
html.layout-phone.hp-has-tabbar:not(.hp-tabbar-hidden) #layout { height: calc(100% - 3.75rem - env(safe-area-inset-bottom)); }
html.layout-phone.hp-has-tabbar:not(.hp-tabbar-hidden) #messagestack { bottom: calc(3.75rem + env(safe-area-inset-bottom)); }   /* «Kuting…» panel ostida qolmasin */
html.layout-phone.hp-has-tabbar:not(.hp-tabbar-hidden) body.task-mail .floating-action-buttons { display: none; }   /* «Yozish» panelda bor */
#hp-tabbar .hp-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    color: #5f6b70; text-decoration: none; font-size: 11.5px; line-height: 1.1; min-width: 0;
    -webkit-tap-highlight-color: transparent;
}
#hp-tabbar .hp-tab svg { width: 1.6rem; height: 1.6rem; }
#hp-tabbar .hp-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .1rem; }
#hp-tabbar .hp-tab.active { color: #8a682a; font-weight: 700; }
#hp-tabbar .hp-tab:active { background: #f7f1e6; }
#hp-tabbar .hp-tab.primary svg {
    width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 50%; background: #8a682a; color: #fff;
    margin-top: -1.1rem; box-shadow: 0 2px 8px rgba(138, 104, 42, .45);
}
#hp-tabbar .hp-tab.primary { color: #8a682a; font-weight: 700; }
html.dark-mode #hp-tabbar { background: #21292c; border-top-color: #374549; }
html.dark-mode #hp-tabbar .hp-tab { color: #b0bcc0; }
html.dark-mode #hp-tabbar .hp-tab.active, html.dark-mode #hp-tabbar .hp-tab.primary { color: #c9a35a; }
/* Telefondagi menyular sarlavhasi — elastic ko'ki o'rniga hotelpro rangi */
html.layout-phone #layout-menu .popover-header, html.layout-phone .popover-header { background: #1c1c1c; color: #fff; }
html.layout-phone .popover-header a, html.layout-phone .popover-header .icon { color: #fff; }

/* Kirish sahifasi: xato sababi — ekran markazida katta, aniq toast (har qanday ekranda) */
body.task-login #messagestack {
    position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%); width: min(460px, 92vw); z-index: 10000;
}
body.task-login #messagestack > div {
    font-size: 1rem; line-height: 1.45; padding: 18px 20px 18px 52px; border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55); opacity: 1 !important; white-space: normal;
}
body.task-login #messagestack > div.warning, body.task-login #messagestack > div.error {
    background: #3a1d1d; color: #ffe9e9; border: 1px solid #c0504d;
}
body.task-login .hp-forgot { text-align: center; margin: 12px 0 4px; }
body.task-login .hp-forgot a { color: #c9a24e; font-weight: 600; text-decoration: underline; }

/* «Telegram'ga ulash» tugmasi (chap menyu): ikonka, ulanmagan bo'lsa — qizil nuqta */
#taskmenu a.hp-tg:before {
    content: ""; display: block; width: 1.6em; height: 1.6em; margin: 0 auto .15em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 3.5 2.8 10.7c-1 .4-1 1.8.1 2.1l4.6 1.5 1.8 5.6c.2.7 1.1.9 1.6.4l2.6-2.4 4.8 3.5c.6.4 1.4.1 1.6-.6l3.1-15.4c.2-1-.7-1.8-1.6-1.4ZM9.6 14.3l8.6-7.6-10.2 6.4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 3.5 2.8 10.7c-1 .4-1 1.8.1 2.1l4.6 1.5 1.8 5.6c.2.7 1.1.9 1.6.4l2.6-2.4 4.8 3.5c.6.4 1.4.1 1.6-.6l3.1-15.4c.2-1-.7-1.8-1.6-1.4ZM9.6 14.3l8.6-7.6-10.2 6.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#taskmenu a.hp-tg { position: relative; }
#taskmenu a.hp-tg-off:after {
    content: ""; position: absolute; top: .45em; right: 1.1em; width: .6em; height: .6em; border-radius: 50%;
    background: #e5484d; box-shadow: 0 0 0 2px #1c1c1c;
}
#taskmenu a.hp-tg-on { color: #4fb3e8; }
body.task-login .hp-forgot-note { color: #d8c7a0; font-size: .9rem; margin-top: 4px; }