/* POLO2 Android v0.1.6 Beta — one-column Servers drawer.
   Fixes the duplicate narrow icon rail introduced by old mobile breakpoints.
   Only phone-width screens are affected; no global font/zoom overrides. */
@media screen and (max-width:760px) {
  /* The real server rail stays in the DOM for existing Firebase/server handlers,
     but mobile users see the named server list INSIDE the sidebar instead. */
  #app {grid-template-columns:minmax(0,1fr)!important;}
  #app > .servers {display:none!important; visibility:hidden!important;}
  #app > .center {grid-column:1!important;width:100%!important;min-width:0!important;}
  #app > .sidebar,
  body.drawer #app > .sidebar {
    left:0!important;
    right:auto!important;
    width:min(90vw,360px)!important;
    max-width:calc(100vw - 12px)!important;
    box-sizing:border-box!important;
    padding:12px!important;
    z-index:46!important;
  }
  /* Keep the existing open/close animation; do not expose a drawer while closed. */
  body:not(.drawer) #app > .sidebar {transform:translateX(-110%)!important;}
  body.drawer #app > .sidebar {transform:translateX(0)!important;}
  #app > .sidebar > .tabs {display:none!important;}
  #app > .sidebar > .p2b-mobile-server-list {
    display:block!important;
    padding:4px 0 6px!important;
    flex:none!important;
    min-width:0;
  }
  #app #p2b-mobile-server-items {
    max-height:min(30dvh,240px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0 2px 0 0;
  }
  #app .p2b-mobile-server-item {
    min-height:44px;
    width:100%;
    padding:6px 9px;
    font-size:13px;
    border-radius:8px;
  }
  #app .p2b-mobile-server-icon {flex:0 0 34px;width:34px;height:34px;}
  #app .p2b-mobile-server-icon img {width:100%;height:100%;object-fit:cover;display:block;}
  #app #channel-nav:not([hidden]) {
    flex:1 1 auto!important;
    min-height:110px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    margin-top:6px;
    padding-top:8px;
    border-top:1px solid #303030;
  }
  #app #server-icon.p2b-image-fallback {
    display:grid;
    place-items:center;
    font-size:15px;
    font-weight:800;
    background:#242424;
    color:#fff;
  }
  #app .p2b-mobile-server-name {
    display:block; min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
  }
  /* The bottom Servers tab is the only phone-size drawer opener.
     Preserve chat header labels and channel options. */
  #app .center .bar > .menu-btn {display:none!important;}
}

/* Discord image fallback messaging; only shown when external image fails. */
.p2b-discord-image-note{display:block;margin:7px 0 0;color:#a5a5a5;font:700 12px/1.5 var(--body);overflow-wrap:anywhere}
.p2b-discord-image-error{padding:9px 10px;max-width:100%;font:700 12px/1.5 var(--body);overflow-wrap:anywhere;color:#d8d8d8;background:#191919;border:1px solid #383838;border-radius:7px}
.p2b-discord-image-error a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* v0.1.8: Prevent long media attachment URLs from widening the mobile feed
   composer and pushing the Post button outside the viewport. Desktop untouched. */
@media screen and (max-width:760px) {
  #view-feed .composer {box-sizing:border-box;max-width:100%;min-width:0;}
  #view-feed .composer > .avatar {flex:0 0 34px;}
  #view-feed .composer-body {flex:1 1 0;min-width:0;width:0;max-width:100%;}
  #view-feed #post-text {box-sizing:border-box;max-width:100%;width:100%;min-width:0;}
  #view-feed #post-attachment-preview {box-sizing:border-box;max-width:100%;min-width:0;overflow:hidden;}
  #view-feed .post-attachment-chip {box-sizing:border-box;max-width:100%;width:100%;min-width:0;overflow:hidden;}
  #view-feed .post-attachment-chip > span {display:block;min-width:0;flex:1 1 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #view-feed .composer-foot {display:flex;align-items:center;flex-wrap:nowrap;box-sizing:border-box;min-width:0;max-width:100%;width:100%;gap:6px;}
  #view-feed .composer-tools {flex:1 1 auto;min-width:0;}
  #view-feed #post-count {flex:0 0 auto;}
  #view-feed #btn-post {flex:0 0 auto;min-width:60px;}
}


/* POLO2 Android v0.1.9.1 Beta — mobile-only member management cards.
   The real event handlers and Firebase permissions remain unchanged. */
@media screen and (max-width:760px) {
  /* Dialogs are outside #app, so selectors must not rely on #app ancestry. */
  .modal-card, .modal-body, .modal-body .manage-grid,
  #server-role-list, #server-role-list > .manage-grid,
  #server-moderation-list {min-width:0; max-width:100%; box-sizing:border-box;}

  /* Role member: avatar and username on first row, small badge, full-width button. */
  #server-role-list .role-member-row {
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto;
    align-items:center;
    gap:8px 10px;
    min-width:0!important;
    width:100%;box-sizing:border-box;
    padding:11px;
    overflow:hidden;
  }
  #server-role-list .role-member-row > .avatar {
    grid-column:1;grid-row:1;
    width:40px;height:40px;min-width:40px;min-height:40px;
    flex:none;
  }
  #server-role-list .role-member-row > .grow {
    grid-column:2;grid-row:1;
    min-width:0!important;width:100%;flex:none;
    overflow:hidden;overflow-wrap:normal!important;word-break:normal!important;
  }
  #server-role-list .role-member-row > .grow b,
  #server-role-list .role-member-row > .grow .muted {
    display:block;min-width:0;max-width:100%;
    white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
    overflow-wrap:normal!important;word-break:normal!important;
  }
  #server-role-list .role-member-row > .badge {
    grid-column:1 / -1;grid-row:2;justify-self:start;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:11px;line-height:1.5;
    padding:3px 7px;
  }
  #server-role-list .role-member-row > [data-member-roles] {
    grid-column:1 / -1;grid-row:3;
    display:block;width:100%;min-width:0;
    min-height:42px;box-sizing:border-box;
    padding:9px 10px;font-size:13px;white-space:normal;
  }
  #server-role-list .custom-role-card {min-width:0;gap:8px;flex-wrap:wrap;}
  #server-role-list .custom-role-card > .grow {min-width:0;flex:1 1 100px;}
  #server-role-list .custom-role-card > .grow b {overflow-wrap:anywhere;}
  #server-role-list .custom-role-card > div:last-child {max-width:100%;flex:0 1 auto;}
  #server-role-list .custom-role-card > div:last-child button {min-width:0;font-size:12px;}

  /* Moderation: the member identity spans the top, actions share the next row. */
  #server-moderation-list .p2b-moderation-member-row {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:7px;row-gap:10px;
    min-width:0!important;width:100%;box-sizing:border-box;
    padding:11px;overflow:hidden;
  }
  #server-moderation-list .p2b-moderation-member-row > .avatar {
    grid-column:1;grid-row:1;width:40px;height:40px;
    min-width:40px;min-height:40px;flex:none;
  }
  #server-moderation-list .p2b-moderation-member-row > .grow {
    grid-column:2 / -1;grid-row:1;
    min-width:0!important;width:100%;flex:none;
    overflow:hidden;overflow-wrap:normal!important;word-break:normal!important;
  }
  #server-moderation-list .p2b-moderation-member-row > .grow b,
  #server-moderation-list .p2b-moderation-member-row > .grow .muted {
    display:block;min-width:0;max-width:100%;
    white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
    overflow-wrap:normal!important;word-break:normal!important;
  }
  #server-moderation-list .p2b-moderation-member-row > [data-mod2] {
    width:100%;min-width:0;min-height:42px;
    box-sizing:border-box;padding:8px 4px;
    font-size:13px;white-space:nowrap;
  }
  #server-moderation-list .p2b-moderation-member-row > [data-mod2="mute"] {grid-column:1;grid-row:2;}
  #server-moderation-list .p2b-moderation-member-row > [data-mod2="kick"] {grid-column:2;grid-row:2;}
  #server-moderation-list .p2b-moderation-member-row > [data-mod2="ban"] {grid-column:3;grid-row:2;}
  #server-moderation-list .manage-row:not(.p2b-moderation-member-row) > .grow {
    min-width:0;overflow-wrap:normal;word-break:normal;
  }

  /* Badge only on the mobile bottom navigation, never in desktop sidebar. */
  .p2b-mobile-nav button[data-mobile-view="dms"],
  .p2b-mobile-nav button[data-mobile-view="notifs"] {position:relative;overflow:visible;}
  .p2b-mobile-nav button > .p2b-mobile-unread-badge {
    display:grid!important;place-items:center;
    position:absolute;top:0;left:calc(50% + 4px);
    min-width:17px!important;max-width:32px;height:17px;
    padding:0 4px;box-sizing:border-box;
    color:#000;background:#fff;border:2px solid #090909;
    border-radius:999px;font:800 10px/1 Arial,sans-serif!important;
    z-index:2;pointer-events:none;
  }
  .p2b-mobile-nav button > .p2b-mobile-unread-badge[hidden],
  body.pref-hide-notification-badges .p2b-mobile-unread-badge {display:none!important;}
}


/* v0.1.9.2 — Restore true role colors/gradient bounds in Android member dialogs.
   v0.1.9.1 made colored name elements block-level to stop vertical wraps.
   That stretched each role gradient over the whole row, changing its colors.
   Keep the grid/card layout; render ONLY the colored text at its natural width.
   Do not override the inline roleStyle() solid/gradient settings from Firebase. */
@media screen and (max-width:760px) {
  #server-role-list .role-member-row > .grow > b,
  #server-moderation-list .p2b-moderation-member-row > .grow > b,
  #server-role-list .custom-role-card > .grow > b.role-name {
    display:inline-block!important;
    width:max-content;
    max-width:100%;
    box-sizing:border-box;
    vertical-align:bottom;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}