/* ==========================================================================
   TWITTER 2015 THEME - DEDICATED MOBILE RESPONSIVE STYLESHEET (mobile2015.css)
   Targeting smartphones and tablets (max-width: 768px and max-width: 480px)
   Authentic Twitter 2014/2015 mobile experience with smooth fluidity
   ========================================================================== */

@media (max-width: 768px) {

	/* ----------------------------------------------------------------------
	   1. GLOBAL RESETS & BODY
	   ---------------------------------------------------------------------- */
	html, body {
		width: 100% !important;
		max-width: 100vw !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	*, *:before, *:after {
		box-sizing: border-box !important;
	}

	body {
		padding-top: 46px !important;
		margin: 0 !important;
		background-color: #f5f8fa !important;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
		-webkit-font-smoothing: antialiased;
	}

	.page, 
	.layout, 
	.session, 
	.sessionClass,
	.profile-session-wrap {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.popout {
		display: none !important;
	}

	/* ----------------------------------------------------------------------
	   2. TOP NAVIGATION BAR (TWITTER 2015 MOBILE NAVBAR)
	   ---------------------------------------------------------------------- */
	.warpper_top_bar {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 46px !important;
		line-height: 46px !important;
		background: #ffffff !important;
		border-bottom: 1px solid #e1e8ed !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
		z-index: 9999 !important;
	}

	.inner_top_bar {
		height: 46px !important;
		line-height: 46px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.warpper_top_bar .padding_class {
		height: 46px !important;
		padding: 0 8px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.twitter-2015-nav {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		height: 46px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Left 4 Tabs (Início, Notificações, Mensagens, Descobrir) */
	.twitter-2015-nav .nav-left {
		display: flex !important;
		align-items: center !important;
		height: 46px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		flex-shrink: 0 !important;
		gap: 2px !important;
	}

	.twitter-2015-nav .nav-left li {
		display: flex !important;
		align-items: center !important;
		height: 46px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.twitter-2015-nav .nav-left li a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 46px !important;
		padding: 0 10px !important;
		color: #66757f !important;
		border-bottom: 3px solid transparent !important;
		position: relative !important;
		text-decoration: none !important;
	}

	.twitter-2015-nav .nav-left li.active a,
	.twitter-2015-nav .nav-left li a:hover {
		color: #0084B4 !important;
		border-bottom-color: #0084B4 !important;
	}

	/* Hide text labels on mobile to make room */
	.twitter-2015-nav .nav-left li a .nav-text {
		display: none !important;
	}

	.twitter-2015-nav .nav-left li a .nav-icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin-right: 0 !important;
		color: inherit !important;
	}

	.twitter-2015-nav .nav-left li a .nav-icon svg {
		width: 21px !important;
		height: 21px !important;
		fill: currentColor !important;
	}

	/* Badge notification numbers */
	.twitter-2015-nav .nav-counter {
		position: absolute !important;
		top: 6px !important;
		right: 3px !important;
		min-width: 14px !important;
		height: 14px !important;
		line-height: 14px !important;
		padding: 0 3px !important;
		font-size: 9px !important;
		border-radius: 7px !important;
		background: #0084B4 !important;
		color: #ffffff !important;
		font-weight: bold !important;
		text-align: center !important;
		margin-left: 0 !important;
	}

	/* Center Owl Logo */
	.twitter-2015-nav .nav-center-bird {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 46px !important;
		flex-shrink: 0 !important;
		margin: 0 4px !important;
	}

	.twitter-2015-nav .nav-center-bird a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.twitter-2015-nav .owl-logo-minimal {
		transform: scale(0.8) !important;
		transform-origin: center center !important;
	}

	/* Right Side Items: Search, User Menu, Tweet Button */
	.twitter-2015-nav .nav-right {
		display: flex !important;
		align-items: center !important;
		height: 46px !important;
		gap: 6px !important;
		flex-shrink: 0 !important;
	}

	/* Quick Search in Mobile Topbar: Compact expandable input */
	.twitter-2015-nav .quick_search_2015 {
		position: relative !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	.twitter-2015-nav .quick_search_2015 form {
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	.twitter-2015-nav .search-input-2015 {
		width: 32px !important;
		height: 30px !important;
		padding: 0 6px 0 26px !important;
		font-size: 12px !important;
		border-radius: 15px !important;
		border: 1px solid #e1e8ed !important;
		background: #f5f8fa !important;
		color: #292f33 !important;
		transition: width 0.25s cubic-bezier(0.1, 0.9, 0.2, 1), background 0.2s ease !important;
		cursor: pointer !important;
	}

	.twitter-2015-nav .search-input-2015:focus {
		width: 130px !important;
		cursor: text !important;
		background: #ffffff !important;
		border-color: #0084B4 !important;
		outline: none !important;
		box-shadow: 0 0 0 1px #0084B4 !important;
	}

	.twitter-2015-nav .icon-search-2015 {
		position: absolute !important;
		left: 9px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		pointer-events: none !important;
		display: flex !important;
		align-items: center !important;
	}

	.twitter-2015-nav .icon-search-2015 svg {
		width: 13px !important;
		height: 13px !important;
	}

	.twitter-2015-nav .nav-actions {
		display: flex !important;
		align-items: center !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 6px !important;
	}

	.twitter-2015-nav .nav-user-avatar {
		width: 30px !important;
		height: 30px !important;
		border-radius: 4px !important;
		object-fit: cover !important;
		display: block !important;
		cursor: pointer !important;
	}

	/* Compact Mobile Tweet Button */
	.twitter-2015-nav .tweet-btn-2015 {
		width: 32px !important;
		height: 30px !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 4px !important;
		background: #0084B4 !important;
		color: #ffffff !important;
		text-decoration: none !important;
		box-shadow: none !important;
		border: none !important;
	}

	.twitter-2015-nav .tweet-btn-2015:hover {
		background: #006991 !important;
	}

	.twitter-2015-nav .tweet-btn-text {
		display: none !important;
	}

	.twitter-2015-nav .tweet-btn-icon {
		margin: 0 !important;
		font-size: 16px !important;
		line-height: 1 !important;
	}

	/* User Dropdown Menu Positioning on Mobile */
	.twitter-2015-nav #boxLogin,
	.boxLogin {
		position: absolute !important;
		right: 4px !important;
		left: auto !important;
		top: 44px !important;
		width: 200px !important;
		max-width: 90vw !important;
		z-index: 10001 !important;
		border-radius: 6px !important;
		box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
	}

	/* Unauthenticated Navbar on Mobile */
	.twitter-2015-nav.unauthenticated {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	.twitter-2015-nav.unauthenticated .signin-text-intro {
		display: none !important;
	}

	.twitter-2015-nav.unauthenticated .session-null-signin-btn {
		padding: 5px 10px !important;
		font-size: 13px !important;
	}

	/* ----------------------------------------------------------------------
	   3. HOME PAGE LAYOUT (home-2015-container)
	   ---------------------------------------------------------------------- */
	.home-2015-container {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 10px 8px 30px !important;
		margin: 0 auto !important;
		gap: 12px !important;
		box-sizing: border-box !important;
	}

	/* CENTER COLUMN (Composer + Feed) COMES FIRST ON MOBILE! */
	.home-col-center {
		order: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
		flex-grow: 1 !important;
	}

	/* LEFT COLUMN (Profile mini-card & Trends) COMES SECOND */
	.home-col-left {
		order: 2 !important;
		width: 100% !important;
		flex-shrink: 1 !important;
	}

	/* Hide the profile mini-card on mobile home to prevent redundant duplication */
	.home-col-left .dashboard-profile-card-2015 {
		display: none !important;
	}

	/* RIGHT COLUMN (Who to follow & Footer) */
	.home-col-right {
		order: 3 !important;
		width: 100% !important;
	}

	/* Hide search bar inside session class (redundant on mobile) */
	.sessionClass > .formSearchResp,
	.formSearchResp {
		display: none !important;
	}

	/* COMPOSER CARD 2015 (Mobile) */
	.composer-card-2015 {
		background: #ffffff !important;
		border: 1px solid #e1e8ed !important;
		border-radius: 5px !important;
		margin-bottom: 10px !important;
		overflow: hidden !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.composer-collapsed-bar {
		padding: 10px 12px !important;
	}

	.composer-expanded-wrap {
		padding: 12px !important;
	}

	.composer-bottom-bar {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		margin-top: 10px !important;
	}

	.composer-actions-right {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
	}

	/* TIMELINE CARD & POSTS FEED */
	.timeline-card-2015 {
		background: #ffffff !important;
		border: 1px solid #e1e8ed !important;
		border-radius: 5px !important;
		overflow: hidden !important;
		width: 100% !important;
	}

	ul.posts {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		background: #ffffff !important;
	}

	ul.posts > li,
	.content > li {
		display: block !important;
		width: 100% !important;
		padding: 12px 12px !important;
		border-bottom: 1px solid #e1e8ed !important;
		box-sizing: border-box !important;
		background: #ffffff !important;
	}

	ul.posts > li:last-child {
		border-bottom: none !important;
	}

	.paddingPost {
		padding: 0 !important;
		width: 100% !important;
	}

	.avatar_user {
		width: 44px !important;
		height: 44px !important;
		border-radius: 5px !important;
		object-fit: cover !important;
		float: left !important;
		margin-right: 10px !important;
	}

	.detail_grid {
		width: calc(100% - 54px) !important;
		float: right !important;
		box-sizing: border-box !important;
		padding: 0 !important;
	}

	.detail_grid p {
		font-size: 14px !important;
		line-height: 1.4 !important;
		word-break: break-word !important;
		margin: 4px 0 8px 0 !important;
	}

	/* Tweet Action Bar on Mobile */
	.detail_grid .bottom_actions,
	.detail_grid .actions_post,
	.detail_grid > span[style*="display: block"] {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 18px !important;
		margin-top: 6px !important;
	}

	.detail_grid a.reply,
	.detail_grid a.repost_button,
	.detail_grid a.favorite {
		display: inline-flex !important;
		align-items: center !important;
		font-size: 12px !important;
		line-height: 1 !important;
		padding: 4px 2px !important;
		text-decoration: none !important;
	}

	/* Post Images on Mobile */
	.posts li img.media_post,
	.posts li .wrapper_media_post img,
	.detail_grid img {
		max-width: 100% !important;
		height: auto !important;
		border-radius: 6px !important;
		margin-top: 6px !important;
		display: block !important;
	}

	/* ----------------------------------------------------------------------
	   4. PROFILE PAGE (profile.phtml, CANOPY, AVATAR, BIO, STATS)
	   ---------------------------------------------------------------------- */
	.profile-2015-page-layout {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.profile-canopy-2015 {
		width: 100% !important;
		position: relative !important;
		background: #ffffff !important;
	}

	.profile-canopy-2015 .cover_user {
		height: 140px !important;
		min-height: 140px !important;
		max-height: 140px !important;
		width: 100% !important;
		background-size: cover !important;
		background-position: center center !important;
		position: relative !important;
	}

	/* Canopy subheader bar on mobile: Natural scroll, no locking */
	.profile-canopy-nav-container {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		background: #ffffff !important;
		border-bottom: 1px solid #e1e8ed !important;
	}

	.profile-canopy-nav {
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: auto !important;
		background: #ffffff !important;
		box-shadow: none !important;
	}

	/* Force disable is-fixed on mobile */
	.profile-canopy-nav.is-fixed {
		position: relative !important;
		top: 0 !important;
		box-shadow: none !important;
	}

	.profile-canopy-inner {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		padding: 0 12px 10px !important;
		box-sizing: border-box !important;
		position: relative !important;
		height: auto !important;
	}

	/* Always hide mini card on mobile */
	.ProfileCanopy-card,
	.profile-canopy-nav.is-fixed .ProfileCanopy-card {
		display: none !important;
	}

	/* Avatar on mobile: Overlaps cover nicely */
	.profile-avatar-box,
	.profile-canopy-nav.is-fixed .profile-avatar-box {
		position: relative !important;
		top: -36px !important;
		left: 0 !important;
		width: 76px !important;
		height: 76px !important;
		border-radius: 6px !important;
		border: 3px solid #ffffff !important;
		background: #ffffff !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
		margin-bottom: -26px !important;
		display: block !important;
		flex-shrink: 0 !important;
		z-index: 5 !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.profile-avatar-box .avatar_large {
		width: 100% !important;
		height: 100% !important;
		border-radius: 4px !important;
		object-fit: cover !important;
		display: block !important;
	}

	/* Follow / Edit Profile buttons: Aligned to the top right of avatar row */
	.profile-nav-actions,
	.mobile_action_wrapper {
		position: absolute !important;
		top: 10px !important;
		right: 12px !important;
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		width: auto !important;
		margin: 0 !important;
		z-index: 6 !important;
	}

	.profile-nav-actions .follow_button,
	.profile-nav-actions .edit_profile_btn {
		padding: 6px 14px !important;
		font-size: 13px !important;
		border-radius: 4px !important;
		height: 32px !important;
		line-height: 20px !important;
	}

	.profile-dm-btn,
	.profile-gear-btn {
		width: 32px !important;
		height: 32px !important;
		border-radius: 4px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Profile Stats on Mobile: Clean horizontal grid */
	.profile-nav-stats,
	.profile-canopy-nav.is-fixed .profile-nav-stats {
		display: flex !important;
		width: 100% !important;
		height: 52px !important;
		margin: 12px 0 0 0 !important;
		padding: 0 !important;
		border-top: 1px solid #e1e8ed !important;
		border-bottom: 1px solid #e1e8ed !important;
		list-style: none !important;
		justify-content: space-around !important;
	}

	.profile-nav-stats li {
		flex: 1 !important;
		text-align: center !important;
		height: 52px !important;
		margin: 0 !important;
	}

	.profile-nav-stats li a {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		height: 52px !important;
		padding: 4px 0 !important;
		text-decoration: none !important;
		border-bottom: 3px solid transparent !important;
	}

	.profile-nav-stats li.active a {
		border-bottom-color: #0084B4 !important;
	}

	.profile-nav-stats .stat-label {
		font-size: 10px !important;
		font-weight: bold !important;
		color: #66757f !important;
		text-transform: uppercase !important;
		display: block !important;
		letter-spacing: 0.02em !important;
	}

	.profile-nav-stats .stat-value {
		font-size: 15px !important;
		font-weight: bold !important;
		color: #0084B4 !important;
		display: block !important;
	}

	/* Main Profile 3-Column Content Layout */
	.profile-main-2015 {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 10px 8px 30px !important;
		margin: 0 auto !important;
		gap: 12px !important;
		box-sizing: border-box !important;
	}

	.profile-col-left {
		width: 100% !important;
		order: 1 !important;
		box-sizing: border-box !important;
	}

	.profile-col-center {
		width: 100% !important;
		order: 2 !important;
		box-sizing: border-box !important;
	}

	.profile-col-right {
		display: none !important;
	}

	/* User Info Details on Mobile */
	.profile-user-info {
		padding-top: 4px !important;
		width: 100% !important;
	}

	.profile-full-name {
		font-size: 20px !important;
		font-weight: 700 !important;
		color: #292f33 !important;
		line-height: 1.2 !important;
		margin: 0 0 2px 0 !important;
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		word-break: break-word !important;
	}

	.profile-screenname {
		font-size: 13px !important;
		color: #66757f !important;
		margin-bottom: 8px !important;
	}

	.profile-bio-text {
		font-size: 14px !important;
		line-height: 1.4 !important;
		color: #292f33 !important;
		margin-bottom: 10px !important;
		word-break: break-word !important;
	}

	.profile-meta-list {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px 14px !important;
		margin-bottom: 10px !important;
		padding: 0 !important;
	}

	.profile-meta-item {
		display: inline-flex !important;
		align-items: center !important;
		font-size: 12px !important;
		color: #66757f !important;
		margin: 0 !important;
		width: auto !important;
	}

	/* Profile Sub-filter bar (Posts / Posts e respostas / Mídia) */
	.profile-feed-tabs-2015,
	.profile-subnav-tabs {
		display: flex !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
		background: #ffffff !important;
		border: 1px solid #e1e8ed !important;
		border-bottom: 1px solid #e1e8ed !important;
		border-radius: 5px 5px 0 0 !important;
		width: 100% !important;
	}

	.profile-feed-container ul.posts {
		border-radius: 0 0 5px 5px !important;
	}

	/* ----------------------------------------------------------------------
	   5. FOLLOWERS & FOLLOWING GRID ON MOBILE
	   ---------------------------------------------------------------------- */
	.profile-users-grid-2015 .content {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		padding: 8px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.user-card-2015 {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* ----------------------------------------------------------------------
	   6. DISCOVER & INTERACTIONS PAGES (3-COLUMN LAYOUT ADAPTATION)
	   ---------------------------------------------------------------------- */
	.discover-2015-container,
	.interactions-2015-container {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		padding: 10px 8px 30px !important;
		margin: 0 auto !important;
		gap: 12px !important;
		box-sizing: border-box !important;
	}

	/* Center column (Header & Feed) FIRST on mobile */
	.discover-2015-container .home-col-center,
	.interactions-2015-container .home-col-center {
		order: 1 !important;
		width: 100% !important;
	}

	/* Left column (Menu card & Trends) SECOND on mobile */
	.discover-2015-container .home-col-left,
	.interactions-2015-container .home-col-left {
		order: 2 !important;
		width: 100% !important;
	}

	.discover-2015-container .home-col-right,
	.interactions-2015-container .home-col-right {
		display: none !important;
	}

	.discover-header-card-2015,
	.notifications-header-card-2015 {
		padding: 12px 14px !important;
		border-radius: 5px 5px 0 0 !important;
	}

	.discover-header-card-2015 .discover-title-2015,
	.notifications-header-card-2015 .notifications-title-2015 {
		font-size: 18px !important;
	}

	/* ----------------------------------------------------------------------
	   7. STATUS / POST PERMALINK PAGE
	   ---------------------------------------------------------------------- */
	.status-2015-layout {
		width: 100% !important;
		max-width: 100% !important;
		padding: 10px 8px 30px !important;
		margin: 0 !important;
	}

	.status-page-session {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.status-card-2015 {
		border-radius: 5px !important;
		width: 100% !important;
	}

	.status-card-inner {
		padding: 14px 14px 10px !important;
	}

	/* ----------------------------------------------------------------------
	   8. DIRECT MESSAGES MODAL FULLSCREEN ON MOBILE
	   ---------------------------------------------------------------------- */
	#dm-modal-overlay {
		padding: 0 !important;
		align-items: stretch !important;
		justify-content: stretch !important;
	}

	.dm-modal-window,
	.dm-modal-2015 {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		border-radius: 0 !important;
		margin: 0 !important;
		transform: none !important;
		box-shadow: none !important;
		z-index: 100000 !important;
	}

	.dm-modal-content {
		height: 100% !important;
		border-radius: 0 !important;
	}

	/* ----------------------------------------------------------------------
	   9. FLOATING THEME TOGGLER (DARK/LIGHT SWITCH)
	   ---------------------------------------------------------------------- */
	.mobile-theme-toggle {
		position: fixed !important;
		bottom: 16px !important;
		right: 14px !important;
		z-index: 9998 !important;
	}

	.mobile-theme-toggle .theme-toggle-btn {
		width: 44px !important;
		height: 44px !important;
		border-radius: 50% !important;
		background: #ffffff !important;
		border: 1px solid #e1e8ed !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
	}
}