:root{
  --tm-indigo:#5b5bff; --tm-indigo-strong:#473fe4; --tm-coral:#ff5a64;
  --tm-bg:#f6f7fb; --tm-surface:#ffffff; --tm-ink:#171a2b; --tm-muted:#6b7088;
  --tm-border:rgba(30,34,70,.10); --tm-radius:18px; --tm-radius-sm:12px;
  --tm-shadow:0 18px 40px rgba(40,46,100,.14);
  --tm-font:-apple-system,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--tm-font);color:var(--tm-ink);background:var(--tm-bg);
  -webkit-font-smoothing:antialiased}
.tm-app{height:100%}

/* login */
.tm-login{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px;gap:14px}
.tm-login__logo{width:104px;height:104px;border-radius:24px;
  background:#fff url("/assets/logo-flora.png") center/72% no-repeat;box-shadow:var(--tm-shadow)}
.tm-login__title{font-size:24px;font-weight:800;margin:6px 0 0}
.tm-login__hint{color:var(--tm-muted);font-size:15px;max-width:320px;line-height:1.5}

/* shell */
.tm-shell{height:100%;display:flex;flex-direction:column}
.tm-header{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--tm-surface);
  border-bottom:1px solid var(--tm-border)}
.tm-header__brand{font-weight:800;letter-spacing:.5px;
  background:linear-gradient(135deg,var(--tm-indigo-strong),var(--tm-coral));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tm-header__me{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--tm-muted);font-size:14px}
.tm-header__av{width:30px;height:30px;font-size:13px}
.tm-chat__peerav{width:38px;height:38px;font-size:15px;flex:0 0 auto}
.tm-main{flex:1;display:flex;min-height:0}
.tm-empty{margin:auto;color:var(--tm-muted)}

.tm-btn{border:0;border-radius:var(--tm-radius-sm);padding:8px 14px;font:inherit;font-weight:600;
  cursor:pointer;background:var(--tm-indigo);color:#fff}
.tm-btn--ghost{background:transparent;color:var(--tm-muted);border:1px solid var(--tm-border)}

/* toast */
.tm-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;
  background:var(--tm-ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;
  transition:.25s;z-index:50}
.tm-toast--in{opacity:1;transform:translate(-50%,0)}
.tm-toast--error{background:var(--tm-coral)}

/* list + chat layout */
.tm-main{flex:1;display:flex;min-height:0}
.tm-side{width:320px;border-right:1px solid var(--tm-border);overflow-y:auto;background:var(--tm-surface)}
.tm-chatpane{flex:1;display:flex;min-height:0;min-width:0;background:var(--tm-bg)}
.tm-search{width:calc(100% - 24px);margin:12px;padding:9px 12px;border:1px solid var(--tm-border);border-radius:12px;font:inherit}
.tm-conv{display:flex;gap:10px;width:100%;text-align:left;border:0;background:none;padding:10px 12px;cursor:pointer;align-items:center}
.tm-conv:hover{background:#f1f3fa}.tm-conv--active{background:#eaecf8}
.tm-conv--pinned .tm-conv__name::after{content:" 📌";font-size:11px}
.tm-conv__avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--tm-indigo),var(--tm-coral))}
.tm-conv__body{flex:1;min-width:0}
.tm-conv__top{display:flex;justify-content:space-between;gap:8px}
.tm-conv__name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-conv__time{color:var(--tm-muted);font-size:12px}
.tm-conv__preview{color:var(--tm-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-conv__badge{background:var(--tm-coral);color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;font-size:12px;font-weight:700}
.tm-chat{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}
.tm-chat__head{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--tm-border);background:var(--tm-surface)}
.tm-chat__headtext{min-width:0}
.tm-chat__back{display:none;font-size:22px;line-height:1;padding:4px 10px;flex:0 0 auto}
@media(max-width:760px){.tm-chat__back{display:inline-flex}}
.tm-chat__title{font-weight:700}
.tm-chat__status{font-size:12px;color:var(--tm-muted)}
.tm-chat__status--on{color:#1fa971}
/* presence dot on avatars */
.tm-conv__avwrap{position:relative;flex:0 0 auto}
.tm-conv__dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;
  background:var(--tm-muted);border:2px solid var(--tm-surface)}
.tm-conv__dot--on{background:#1fa971}
/* team-wide chat = ФЛОРА logo badge (clearly the common chat) */
.tm-conv__avatar--logo{background:#fff url("/assets/logo-flora.png") center/76% no-repeat}
.tm-chat__logo{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:#fff url("/assets/logo-flora.png") center/76% no-repeat;box-shadow:0 0 0 1px var(--tm-border)}
/* people-at-hand strip (quick DM) */
.tm-strip{display:flex;gap:10px;overflow-x:auto;padding:10px 12px;border-bottom:1px solid var(--tm-border);scrollbar-width:none}
.tm-strip::-webkit-scrollbar{display:none}
.tm-person{flex:0 0 auto;width:60px;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;font:inherit;color:inherit}
.tm-person__av{width:52px;height:52px;font-size:20px}
.tm-person__dot{right:2px;bottom:2px}
.tm-person__name{font-size:11px;color:var(--tm-muted);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-dir__meta{min-width:0}
.tm-dir__status{font-size:12px}
/* identity: avatars, profile, contact rename, group sender, onboarding */
.tm-avatar-img{object-fit:cover;background:none;cursor:pointer}
.tm-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:100;padding:24px;cursor:zoom-out}
.tm-lightbox__img{max-width:92vw;max-height:92vh;border-radius:16px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tm-dir__main{display:flex;gap:10px;align-items:center;flex:1;min-width:0;border:0;background:none;cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit}
.tm-dir__rename{flex:0 0 auto;padding:6px 10px}
.tm-profile__head{display:flex;align-items:center;gap:12px}
.tm-profile__av{width:64px;height:64px;font-size:24px}
.tm-msg__avwrap{align-self:flex-end;margin-right:8px}
.tm-msg__av{width:30px;height:30px;font-size:13px}
.tm-msg__sender{font-size:12px;font-weight:600;color:var(--tm-indigo-strong);margin-bottom:2px}
.tm-join__form{display:flex;flex-direction:column;gap:10px;width:min(320px,100%)}
.tm-chat__scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:var(--tm-bg)}
/* chat wallpapers — subtle, distinct per chat type, so chats don't blur together */
.tm-wall--direct{background-image:radial-gradient(rgba(91,91,255,.06) 1.2px, transparent 1.5px);background-size:24px 24px}
.tm-wall--group{background-image:radial-gradient(rgba(255,90,100,.06) 1.2px, transparent 1.5px);background-size:24px 24px}
.tm-wall--team{background-color:#eef5ee;
  background-image:radial-gradient(rgba(70,150,90,.10) 1.4px, transparent 1.7px),
    radial-gradient(130% 70% at 100% 0%, rgba(70,150,90,.07), transparent 62%);
  background-size:26px 26px, 100% 100%}
body.tm-dark .tm-wall--direct{background-image:radial-gradient(rgba(130,130,255,.10) 1.2px, transparent 1.5px)}
body.tm-dark .tm-wall--group{background-image:radial-gradient(rgba(255,130,140,.10) 1.2px, transparent 1.5px)}
body.tm-dark .tm-wall--team{background-color:#0f1712;
  background-image:radial-gradient(rgba(110,180,120,.13) 1.4px, transparent 1.7px),
    radial-gradient(130% 70% at 100% 0%, rgba(110,180,120,.07), transparent 62%)}
.tm-msg{display:flex}.tm-msg--mine{justify-content:flex-end}
.tm-msg__bubble{max-width:72%;background:var(--tm-surface);border:1px solid var(--tm-border);padding:8px 12px;border-radius:16px;position:relative}
.tm-msg--mine .tm-msg__bubble{background:#e7e9ff;border-color:transparent}
.tm-msg__bubble--del{color:var(--tm-muted);font-style:italic}
.tm-msg__text{white-space:pre-wrap;word-break:break-word}
.tm-msg__transcript{color:var(--tm-muted);font-size:13px;margin-top:3px}
.tm-msg__meta{display:flex;gap:5px;justify-content:flex-end;color:var(--tm-muted);font-size:11px;margin-top:3px}
.tm-msg__del{position:absolute;top:-8px;right:-8px;border:0;background:var(--tm-coral);color:#fff;border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:11px;opacity:0;transition:.15s}
.tm-msg__bubble:hover .tm-msg__del{opacity:1}
.tm-msg__share{position:absolute;top:-8px;left:-8px;border:0;background:var(--tm-indigo);color:#fff;border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:11px;line-height:1;opacity:0;transition:.15s}
.tm-msg__bubble:hover .tm-msg__share{opacity:1}
.tm-chat__bar{display:flex;gap:8px;padding:12px;border-top:1px solid var(--tm-border);background:var(--tm-surface)}
.tm-chat__input{flex:1;min-width:0;resize:none;border:1px solid var(--tm-border);border-radius:14px;padding:10px 14px;font:inherit;max-height:120px}
.tm-chat__send{align-self:flex-end}
@media(max-width:760px){
  .tm-side{width:100%}.tm-main--chat .tm-side{display:none}
  .tm-main:not(.tm-main--chat) .tm-chatpane{display:none}
}
.tm-hidden{display:none}
.tm-pushbanner{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 16px;background:#eef0ff;color:var(--tm-ink);border-bottom:1px solid var(--tm-border);font-size:14px}
.tm-pushbanner .tm-btn{flex:0 0 auto}
body.tm-dark .tm-pushbanner{background:#1d2130}
.tm-side__head{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--tm-border);align-items:center}
.tm-msg__img{max-width:240px;border-radius:12px;display:block;cursor:zoom-in}
.tm-msg__video{max-width:260px;border-radius:12px;display:block}
.tm-msg__voice{max-width:220px}
.tm-msg__file{color:var(--tm-indigo-strong);text-decoration:none;font-weight:600}
.tm-chat__attach,.tm-chat__voice{align-self:flex-end}
.tm-chat__voice--on{background:var(--tm-coral);color:#fff}
.tm-modalhost{position:fixed;inset:0;z-index:60;pointer-events:none}
.tm-modal{position:fixed;inset:0;background:rgba(10,12,30,.45);display:grid;place-items:center;pointer-events:auto;padding:16px}
.tm-modal__card{background:var(--tm-surface);border-radius:18px;width:min(420px,100%);max-height:80vh;overflow:auto;box-shadow:var(--tm-shadow)}
.tm-modal__head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--tm-border);font-weight:700}
.tm-modal__x{border:0;background:none;font-size:18px;cursor:pointer;color:var(--tm-muted)}
.tm-form{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.tm-input{padding:10px 12px;border:1px solid var(--tm-border);border-radius:12px;font:inherit;width:100%}
.tm-dir__list{display:flex;flex-direction:column;max-height:50vh;overflow:auto}
.tm-dir__row{display:flex;gap:10px;align-items:center;padding:9px 14px;border:0;background:none;cursor:pointer;text-align:left;width:100%}
.tm-dir__row:hover{background:#f1f3fa}
.tm-linkrow{display:flex;gap:8px}
.tm-muted{color:var(--tm-muted);font-size:14px}
/* access-management panel */
.tm-btn--danger{background:var(--tm-coral);color:#fff}
.tm-access__sect{padding:14px 16px;border-top:1px solid var(--tm-border)}
.tm-access__sect:first-child{border-top:0}
.tm-access__h{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--tm-muted)}
.tm-access__row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--tm-border)}
.tm-access__row:last-child{border-bottom:0}
.tm-access__row--off{opacity:.55}
.tm-access__info{display:flex;align-items:center;gap:10px;min-width:0}
.tm-access__info>div:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tm-access__av{width:34px;height:34px;font-size:14px;flex:0 0 auto}
body.tm-dark{--tm-bg:#0e1016;--tm-surface:#171a23;--tm-ink:#eef0f6;--tm-muted:#9aa0b5;--tm-border:rgba(255,255,255,.10)}
body.tm-dark .tm-conv:hover,body.tm-dark .tm-dir__row:hover{background:#1d2130}
body.tm-dark .tm-msg--mine .tm-msg__bubble{background:#2a2f55}
.call-overlay { position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center;
  background: rgba(20,24,40,.92); backdrop-filter: blur(6px); }
.call-overlay[hidden] { display: none; }
.call-ov__card { text-align: center; color: #fff; padding: 32px 24px; max-width: 320px; }
.call-ov__ava { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.call-ov__ava--ph { display: flex; align-items: center; justify-content: center;
  font-size: 48px; background: #4f46e5; }
.call-ov__name { font-size: 22px; font-weight: 600; margin: 16px 0 4px; }
.call-ov__sub { opacity: .8; margin-bottom: 28px; }
.call-ov__row { display: flex; gap: 16px; justify-content: center; }
.call-ov__btn { border: 0; border-radius: 999px; padding: 14px 22px; font-size: 16px;
  cursor: pointer; background: #374151; color: #fff; }
.call-ov__btn--accept { background: #16a34a; }
.call-ov__btn--end { background: #dc2626; }
.call-ov__btn--mute.is-on { background: #f59e0b; }

.tm-msg--system { justify-content: center; }
.tm-msg__bubble--sys { background: transparent; opacity: .7; font-size: 13px; }

.tm-chat__headtext--tap { cursor: pointer; }
.tm-chat__headtext--tap:active { opacity: .7; }