/* Hols v6.3 — journal categories, right-click menu, tighter posts, iPhone layout.
   Loaded last on purpose: it only adds or tightens things, so no earlier screen can break. */

/* ---------- 1. journal categories (Админка → Журнал) ---------- */
.lg-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.lg-cat {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel, rgba(255,255,255,.03)); color: var(--text);
  font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.lg-cat:hover { background: var(--hover); transform: translateY(-1px); }
.lg-cat.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.lg-cat.empty { opacity: .5; }
.lg-cat .ico-sq { width: 22px; height: 22px; border-radius: 7px; }
.lg-cat .lg-n { font-size: .74rem; opacity: .75; background: var(--hover); border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center; }
.lg-list { display: flex; flex-direction: column; gap: 6px; }
.lg-item {
  display: flex; gap: 10px; padding: 9px 11px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel, rgba(255,255,255,.025)); transition: background .15s;
}
.lg-item:hover { background: var(--hover); }
.lg-item .lg-cat-ico { width: 30px; height: 30px; border-radius: 10px; flex: none; }
.lg-item .lg-body { min-width: 0; flex: 1; }
.lg-item .lg-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.lg-item .lg-top b { font-size: .9rem; }
.lg-item .lg-who { font-size: .82rem; color: var(--accent); font-weight: 600; }
.lg-item .lg-det { font-size: .82rem; color: var(--text-2); margin-top: 2px; word-break: break-word; }
.lg-item .lg-meta { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--text-3); margin-top: 4px; }
.lg-item .lg-meta svg { width: 12px; height: 12px; }

/* ---------- 2. tighter channel posts (no stray empty space) ---------- */
.mrow.channel .bubble.channel-post { padding-bottom: 0 !important; }
.mrow.channel .bubble.channel-post .b-body > .b-text:last-child,
.mrow.channel .bubble.channel-post .b-body > .rich:last-child { margin-bottom: 0 !important; }
/* the views / time row no longer takes a full line of its own: it sits right under the text */
.mrow.channel .bubble.channel-post .b-meta {
  margin: 4px 0 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  opacity: .85;
}
.mrow.channel .bubble.channel-post .b-comments { margin-top: 4px !important; padding: 8px 14px !important; }
.mrow.channel .bubble.channel-post .b-body:empty { display: none !important; }
/* empty paragraphs from pasted text must not create blank blocks */
.b-text.rich > p:empty, .b-text.rich > div:empty,
.b-text.rich > p > br:only-child:last-child { display: none !important; }
.b-text.rich > *:last-child { margin-bottom: 0 !important; }
.b-text.rich > *:first-child { margin-top: 0 !important; }
/* reactions right under a post hug the text as well */
.bubble.channel-post .reactions.in-bubble { margin: 6px 0 2px !important; }

/* ---------- 2b. gift card: the name row must not overlap the avatar or the artwork ---------- */
.gs-for, .gc-name { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; position: relative; z-index: 2; }
.gs-for .ava, .gs-for .ava img { width: 18px; height: 18px; flex: none; }
.gs-for .ava { margin: 0 !important; }
.gs-card, .gcard { overflow: hidden; }

/* ---------- 3. right-click menu (users & channels) ---------- */
.ctxmenu .ctx-item { gap: 10px; }
.ctxmenu-title { padding: 8px 12px 4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

/* ---------- 3b. complaints and tickets ---------- */
.rp-target { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel, rgba(255,255,255,.03)); }
.rp-target b { display: block; font-size: .96rem; }
.rp-target small { color: var(--text-3); }
.rp-reasons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.rp-reason { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 11px; border-radius: 13px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; }
.rp-reason:hover { background: var(--hover); }
.rp-reason.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rp-reason b { display: block; font-size: .9rem; }
.rp-reason small { color: var(--text-3); font-size: .78rem; }
.rp-card { border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 7%, var(--panel, rgba(255,255,255,.03))); padding: 11px 12px; min-width: min(320px, 78vw); }
.rp-card.rp-reply { background: color-mix(in srgb, #34d399 10%, var(--panel, rgba(255,255,255,.03))); }
.rp-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .92rem; margin-bottom: 8px; }
.rp-head svg { width: 17px; height: 17px; color: var(--accent); }
.rp-row { display: flex; gap: 8px; font-size: .86rem; margin-bottom: 3px; }
.rp-row .rp-k { color: var(--text-3); min-width: 74px; }
.rp-row .rp-v { font-weight: 600; }
.rp-note { margin-top: 7px; padding: 8px 10px; border-radius: 10px; background: var(--hover); font-size: .86rem; }
.rp-note.rp-answer { border-left: 3px solid #34d399; }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.rp-time { font-size: .74rem; color: var(--text-3); }
.rp-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.rp-status { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.rp-status.rp-new { color: #34d399; border-color: color-mix(in srgb, #34d399 45%, transparent); }
.rp-status.rp-open { color: #38bdf8; border-color: color-mix(in srgb, #38bdf8 45%, transparent); }
.rp-status.rp-done { color: var(--text-3); }

/* ---------- 4. iPhone / iOS layout ---------- */
/* The notch and the home indicator. env() is written out everywhere on purpose: a value that goes
   through var() can end up invalid (that once turned `bottom` into `auto` and pushed the tab bar and the
   composer into the middle of the screen). */
/* On a phone the app box must be exactly as tall as the VISIBLE area. On iOS 100vh/100dvh can be taller
   than what you actually see (the address bar), which is what left black bands above and below the
   composer. A fixed box with inset 0 follows the visible viewport, so nothing sticks out and the
   composer sits on the bottom edge. Desktop is untouched. */
@media (max-width: 900px), (pointer: coarse) {
  html, body { height: 100%; }
  /* --app-h is measured in js/viewport.js: exactly what the phone shows right now. The fallbacks keep
     the layout fine even if the script did not run. */
  #app, .app { position: fixed; inset: 0; height: var(--app-h, 100vh); min-height: 0; max-height: none; }
  .chatview { height: 100%; }
  /* the keyboard: the composer stays right above it */
  html.kb-open .cv-foot { padding-bottom: 8px !important; }
}
@supports (height: 100dvh) {
  @media (max-width: 900px), (pointer: coarse) {
    #app, .app { height: var(--app-h, 100dvh); }
  }
}
/* header and composer keep clear of the notch / home indicator */
.topbar, .chat-head, .cv-head { padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important; }
.cv-foot {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
}
/* the tab bar is hidden inside an open chat, so only the list screens need room for it */
@media (max-width: 900px) {
  .app:not(.chat-open) .cv-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}
.tabbar {
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  left: calc(14px + env(safe-area-inset-left, 0px)) !important;
  right: calc(14px + env(safe-area-inset-right, 0px)) !important;
}
.sidebar, #sidebar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
#sbScroll, .sidebar .sb-scroll { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
.sheet, .modal-back .modal, .modal-back .sheet { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.toast, .sync-off { margin-bottom: env(safe-area-inset-bottom, 0px); }
/* messages should not stick to the header, and the tab bar must not sit on top of the last row */
.msgs-inner { padding-top: 8px; }
/* iOS zooms the page when a field is under 16px — keep inputs at 16px on phones */
@media (max-width: 560px) {
  input, textarea, select, .input, .textarea, .composer [contenteditable], [contenteditable="true"] { font-size: 16px !important; }
  .modal-back .modal, .modal-back .sheet { max-height: calc(100dvh - 24px); }
  .chat-head .ch-title, .pf-name, .li-label { overflow: hidden; text-overflow: ellipsis; }
  .icon-btn { min-width: 38px; min-height: 38px; }
}
@media (max-width: 760px) { .tabbar { height: 58px; } }
/* sideways: the composer only needs the safe area, the tab bar is in the way */
@media (orientation: landscape) and (max-height: 520px) {
  .tabbar { display: none; }
  .app .cv-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
}